staffroller

0.5.0 • Public • Published

Staffroller

Site

https://staffroller.qranoko.jp

About

Staffroller(スタッフローラー)は Web サイトにスタッフロールを追加する簡単な JavaScript (+CSS) ライブラリです。

  • トリガーをクリックするとスタッフロールが表示
  • 閉じる場合は右上の × ボタンもしくは esc キーを押す

How To Use

  1. JSON ファイルに表示したい項目を書き込み設置(URL と Image は任意)
[
  {
    "role": "役割A",
    "members": [
      {
        "name": "スタッフ1-名前(役割A)",
        "url": "https://example.com",
        "image": "https://example.com/image.png"
      },
      {
        "name": "スタッフ2-名前(役割A)",
        "url": "https://example.com"
      }
    ]
  },
  {
    "role": ["役割B", "役割C"],
    "members": [
      {
        "name": "スタッフ3-名前(役割B・役割C)"
      }
    ]
  }
]
  1. staffroller.min.css を読み込む
  2. 表示させるトリガー(ボタンなど)に data-staffroller-show="オプションで設定したid" を付与
  3. staffroller.min.js を読み込む
  4. オプション dataFile に JSON ファイルへのパスを書いて StaffRoller を呼び出し
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Example</title>
 
    <!-- 2. Import CSS File -->
    <link rel="stylesheet" href="path/to/staffroller.min.css" />
  </head>
  <body>
    <!-- 3. Setting Trigger -->
    <button type="button" data-staffroller-show="staff-1">
      View Staff
    </button>
 
    <!-- 4. Import JavaScript File -->
    <script src="path/to/staffroller.min.js"></script> 
 
    <!-- 5. Init JavaScript -->
    <script>
      const Staff1 = new StaffRoller({
        id: "staff-1",
        title: "STAFF",
        dataFile: "./staff.json"
      })
    </script> 
  </body>
</html>

Install

CDN

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/staffroller@0.5.0/dist/staffroller.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/staffroller@0.5.0/dist/staffroller.min.js"></script>

npm

$ yarn add staffroller

Option

JavaScript

Option Default Note
id staff モーダルを特定する ID
title STAFF スタッフロールのタイトル
data null 表示する役割と名前を渡す配列
dataFile null 表示する項目を書いた JSON ファイルへのパス
nameSpace staffroller 属性名の設定

CSS

色やサイズなどは、SCSS 変数またはCSSで上書きできます。

License

  • MIT

Credit

Dependencies (0)

    Dev Dependencies (23)

    Package Sidebar

    Install

    npm i staffroller

    Weekly Downloads

    1

    Version

    0.5.0

    License

    MIT

    Unpacked Size

    269 kB

    Total Files

    14

    Last publish

    Collaborators

    • qrac