npm:clipboard (zenorocha/clipboard.js) v2.0.6 を読んだ。

clipboard.js はクリップボードにコピーする機能を提供する JavaScript のライブラリだ。 GitHub の star が約 28k もあるのでおそらくメジャーなのだろう。

使い方は new ClipboardJS('.btn'); 。セレクタを渡してその要素がクリックされたときに内容がコピーされる。 data-clipboard-* という属性をその要素につけておくことや ClipboardJS の引数にオプションを指定することで動作を変えられる。

実装に使われている API は↓だ。 MDN によるとどちらも obsolete だ。

• document.queryCommandSupported
• document.execCommand

queryCommandSupported は isSupported の実装で使われる。

execCommand は 'copy' または 'cut' を渡して使われる。

execCommand('copy') だと選択しているテキストしかコピーできない。任意の文字列をコピーするために見えない <textarea> を生成してそこからコピーしている。

依存している npm パッケージは↓だ。

• npm:good-listener …… 指定した要素の click イベントをいい感じに listen するため。
• npm:select …… 任意の要素のテキストをいい感じに選択するため。
• npm:tiny-emitter …… 成否を EventEmitter のような形式で提供しているため。

ABC159 A 〜 D の復習をした。明日は E から。