radioタグをライブラリにした（CDN）

　これでサクッとラジオボタンが作れる。

成果物

• DEMO
• CDN
• github

　前回は以下。

• radioタグのwebpack版をつくった

CDNとして使う

<script src="https://ytyaru.github.io/JS.Webpack.Library.Radio.Option.20210126173808/0/dist/RadioTag.js"></script>

<radio>
    <option>男</option>
    <option>女</option>
</radio>

RadioTag.parse();

　これでラジオボタンが作れる。やったぜ！

　以下で使ってみた。表示されているはず。

男 女

　こまかいことは以下を参照。

• JSでラジオボタンのタグradioを作った

コード

webpack.config.js

　ライブラリをグローバル変数RadioTagに展開する。

module.exports = {
  mode: "production",
  entry: "./src/RadioTag.js",
  output: {
    library: 'RadioTag',
    libraryExport: 'default',
    libraryTarget: 'var',
    filename: 'RadioTag.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                // ES2020 を ES5 に変換
                "@babel/preset-env",
              ],
              plugins: [
                // private # を使えるようにする
                "@babel/plugin-proposal-private-methods"
              ],
            },
          },
        ],
      },
    ],
  },
  // ES5(IE11等)向け
  target: ["web", "es5"],
};

index.html

<script src="./dist/RadioTag.js"></script>

<radio>
    <option>男</option>
    <option>女</option>
</radio>

main.js

window.addEventListener('load', (event) => {
    RadioTag.parse();
});

イベント実装版

index.html

<script src="./dist/RadioTag.js"></script>
<script src="./ColorRadio.js"></script>
<script src="./main.js"></script>

<radio id="color" label="色">
    <option value="white" selected="false">白</option>
    <option value="black">黒</option>
    <option value="#FA49AB" name="picker"><input type="color" disabled></option>
</radio>
<input type="checkbox" id="is-add-event" checked>
<label for="is-add-event">イベントを有効にする（上記ColorPickerのラジオを選んだときだけPickerが有効になる）</label>

main.js

window.addEventListener('load', (event) => {
    RadioTag.parse();
    // <radio id="color">にchangeイベントを実装する
    RadioTag.addChangeEventListener('color', ColorRadio.onChange);
    // チェックボックスに応じてイベント追加・解除する
    document.querySelector('#is-add-event').addEventListener('change', (event) => {
        if (event.target.checked) {
            console.log('add-event', event);
            RadioTag.addChangeEventListener('color', ColorRadio.onChange);
        } else {
            console.log('remove-event', event);
            RadioTag.removeChangeEventListener('color', ColorRadio.onChange);
        }
    });
});

ColorRadio.js

class ColorRadio {
    static onChange(event) {
        // <label>内<input>のdisabledを切り替える
        for (let element of event.target.parentElement.children) {
            if ('label' !== element.tagName.toLowerCase()) { continue; }
            if (0 === element.children.length) { continue; }
            if ('input' !== element.children[0].tagName.toLowerCase()) { continue; }
            
            if (event.target.nextSibling === element) {
                element.children[0].removeAttribute('disabled');
            } else {
                element.children[0].setAttribute('disabled', 'disabled');
            }
        }
    }
}

参考

• ブラウザとnode.jsに両対応したライブラリを作りたいときのWebpackレシピ集

所感

　<radio>タグをライブラリ化できた。あとはそれを利用するだけ。それがmain.jsとColorRadio.js。

対象環境

• 2021-01-26
• Raspbierry pi 4 Model B
• Raspberry Pi OS buster 10.0 2020-08-20 ※
• bash 5.0.3(1)-release

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux