モダンなデザインで軽量なJavaScriptのコンテキストメニューのライブラリーを作りました

どんなものを作ったのか

Fluent Designに影響を受けた、モダンで美しく軽量なJavaScriptのコンテキストメニューのライブラリーを作りました。

コンテキストメニューが表示されるときにはちゃんとアニメーションも付いています！また、背景はブラーがかかった半透明のデザインです。

そして、ダークモードをサポートしています。ブラウザーがダークモードに設定されている場合、自動で黒を基調としたデザインに切り替わります。

どうして作ったのか

ネットでコンテキストメニューのライブラリーを探すとたくさん出てくるものの古いデザインのものが多く、カッコいいもの（とくにFluent Designのような見た目のもの）はなかなか見つかりませんでした。

また、依存しているものがなく単体で動作してほしい（jQueryやだ）ということもあり、自分で作ってしまいました。

使い方

まず、GitHubから拾ってきてください。ライセンスはMITライセンスです。

https://github.com/Robot-Inventor/modern-context.js

詳しい使い方はGitHubのREADME（日本語版もあります）に書いてありますが、軽く説明します。

READMEを読むと分かりますが、同じことを複数の方法でできるようになっています。ここでは一番使いそうなものに絞って説明します。

const contents = [
    {
        type: "item",
        label: "Alert",
        callback: () => {
            alert("Clicked!");
        }
    },
    {
        type: "separator"
    },
    {
        type: "item",
        label: "No Callback"
    },
];

const context = new Context("#target", contents);

非常にシンプルです。

new Context("#target", contents)の第1引数はターゲットとする要素です。この場合はid="target"が設定された要素を右クリックされるとコンテキストメニューが表示されます。

第2引数はコンテキストメニューの中身です。オブジェクトの配列になっています。配列に入っているオブジェクトはアイテムとセパレーターの2種類です。

アイテムは文字どおりアイテム、セパレーターはアイテム間の区切り線です。セパレーターは似たアイテム同士をまとめるときに使うわけです。

アイテムの場合、各プロパティーは次のような意味です。

{
    type: "item", //固定。アイテムを指定しているいうことを表す
    label: "Alert", //ラベル。コンテキストメニューにはこのテキストが表示される
    callback: () => { //コールバック。アイテムがクリックされたときに実行される。省略可能
        alert("Clicked!");
    }
}

また、セパレーターの場合、次のようになっています。

{
    type: "separator" //固定。セパレーターを指定しているということを表す
}

セパレーターはtype以外の他のプロパティーを指定しても無視されます。

使い方はこんな感じです。シンプルにしました。他にもいくつか関数はありますが、あまり使うことはないでしょう。

おまけ

CSS変数で見た目をカスタマイズできますが、2021年5月25日現在まだこのライブラリーは製作途中で今後変わる可能性があるのでここには書きません。どうしてもカスタマイズしたい場合はソースコードを読んでください。CSS変数関連は割と最初の方に書いてあるのですぐ分かるかと思います。