staffroller

v0.5.0

Published

3 years ago

Simple JavaScript(+CSS) to add staff roles to a website

Downloads

0High
0Medium
0Low

qrac

javascript modal popup credit staff-roll staffroller

Staffroller

Site

https://staffroller.qranoko.jp

About

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

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

How To Use

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）"
      }
    ]
  }
]

staffroller.min.css を読み込む
表示させるトリガー（ボタンなど）に data-staffroller-show="オプションで設定したid" を付与
staffroller.min.js を読み込む
オプション 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/[email protected]/dist/staffroller.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 | 属性名の設定 |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme