Initial commit

.gitignore

@@ -0,0 +1 @@
+.dccache

.jshintrc

@@ -0,0 +1,3 @@
+{
+    "esversion": 9
+}

README.md

@@ -1,2 +1,150 @@
-# modern-context.js
+# ModernContext.js
+
+[日本語](README_ja.md)
+
 A modern, beautiful, and lightweight context menu JavaScript library inspired by Fluent Design.
+
+![screenshot](screenshot_light.png)
+
+## Dark Mode Support
+
+ModernContext.js supports dark mode. If your browser is set to dark mode, the context menu will automatically switch to the black-based design.
+
+![screenshot](screenshot_dark.png)
+
+## Supported Browsers
+
+The following browsers are supported. ModernContext.js may work in other modern browsers, but I tested only the following browsers.
+
+- Google Chrome
+- Firefox
+- Microsoft Edge
+
+Note: Firefox does not currently supports CSS ``backdrop-filter`` property, so the blur effect behind of the context is not active if you are using Firefox.
+
+## Usage
+
+```javascript
+const context = new Context("#target");
+
+context.add_item("Alert", () => {
+    alert("Clicked!")
+});
+context.add_separator();
+context.add_item("No Callback");
+```
+
+The following code will have the same behavior.
+
+```javascript
+const context = new Context("#target");
+
+const contents = [
+    {
+        type: "item",
+        label: "Alert",
+        callback: () => {
+            alert("Clicked!");
+        }
+    },
+    {
+        type: "separator"
+    },
+    {
+        type: "item",
+        label: "No Callback"
+    },
+];
+
+context.add_contents(contents);
+```
+
+And you can also write the following.
+
+```javascript
+const contents = [
+    {
+        type: "item",
+        label: "Alert",
+        callback: () => {
+            alert("Clicked!");
+        }
+    },
+    {
+        type: "separator"
+    },
+    {
+        type: "item",
+        label: "No Callback"
+    },
+];
+
+const context = new Context("#target", contents);
+```
+
+### Arguments
+
+#### Context()
+
+|Name|Value Type|Default|Description|
+|--:|--:|--:|--:|
+|target_selector|String|N/A|CSS selector of the target element.|
+|contents|Array|[ ]|The contents of the context menu. This argument is optional. For more detail, see ``add_contents()``.|
+
+#### add_item()
+
+Add a item to the context menu.
+
+|Name|Value Type|Default|Description|
+|--:|--:|--:|--:|
+|label|String|N/A|The label of the item.|
+|callback|Function|() => {}|When the user select the item, this function will be called.|
+
+#### add_separator()
+
+Add a separator to the context menu. This function has no arguments.
+
+#### add_contents()
+
+Add item(s) or separator(s) to the context menu.
+
+|Name|Value Type|Default|Description|
+|--:|--:|--:|--:|
+|contents|Array of Object|N/A|Array of contents you want to add to the context menu.|
+
+##### Example of add_contents()
+
+```javascript
+const context = new Context();
+
+const contents = [
+    {
+        type: "item",
+        label: "Alert",
+        callback: () => {
+            alert("Clicked!");
+        }
+    },
+    {
+        type: "separator"
+    },
+    {
+        type: "item",
+        label: "No Callback"
+    },
+];
+
+context.add_contents(contents);
+```
+
+#### open()
+
+Open the context menu. Since the process of opening the context menu by right-clicking is handled by the library, you should not need to use this function.
+
+|Name|Value Type|Default|Description|
+|--:|--:|--:|--:|
+|event|MouseEvent|N/A|Mouse event.|
+
+#### close()
+
+Close the context menu. Since the process of closing the opened context menu in response to a user operation is handled by the library, you should not need to use this function. This function has no arguments.

README_ja.md

@@ -0,0 +1,150 @@
+# ModernContext.js
+
+[English](README.md)
+
+Fluent Designに影響を受けた、モダンで美しく軽量なJavaScriptのコンテキストメニューのライブラリーです。
+
+![screenshot](screenshot_light.png)
+
+## ダークモードをサポート
+
+ModernContext.jsはダークモードをサポートしています。ブラウザーがダークモードに設定されている場合、コンテキストメニューは自動で黒を基調としたデザインに切り替わります。
+
+![screenshot](screenshot_dark.png)
+
+## サポートしているブラウザー
+
+次のブラウザーがサポートされています。ModernContext.jsは他のモダンブラウザーでも動作するかもしれませんが、リストにあるブラウザーでのみテストしています。
+
+- Google Chrome
+- Firefox
+- Microsoft Edge
+
+注意：Firefoxは現在、CSSの``backdrop-filter``プロパティーをサポートしていないため、コンテキストメニューの背景のブラーエフェクトはFirefoxでは動作しません。
+
+## 使い方
+
+```javascript
+const context = new Context("#target");
+
+context.add_item("Alert", () => {
+    alert("Clicked!")
+});
+context.add_separator();
+context.add_item("No Callback");
+```
+
+次のコードでも同じように動作します。
+
+```javascript
+const context = new Context("#target");
+
+const contents = [
+    {
+        type: "item",
+        label: "Alert",
+        callback: () => {
+            alert("Clicked!");
+        }
+    },
+    {
+        type: "separator"
+    },
+    {
+        type: "item",
+        label: "No Callback"
+    },
+];
+
+context.add_contents(contents);
+```
+
+また、次のように書くこともできます。
+
+```javascript
+const contents = [
+    {
+        type: "item",
+        label: "Alert",
+        callback: () => {
+            alert("Clicked!");
+        }
+    },
+    {
+        type: "separator"
+    },
+    {
+        type: "item",
+        label: "No Callback"
+    },
+];
+
+const context = new Context("#target", contents);
+```
+
+### 引数
+
+#### Context()
+
+|名前|引数の型|デフォルト|説明|
+|--:|--:|--:|--:|
+|target_selector|String|N/A|ターゲットとする要素のCSSセレクター|
+|contents|Array Of Object|[ ]|コンテキストメニューの内容。この引数は省略可能です。詳細は``add_contents()``を参照|
+
+#### add_item()
+
+コンテキストメニューにアイテムを追加します。
+
+|名前|引数の型|デフォルト|説明|
+|--:|--:|--:|--:|
+|label|String|N/A|アイテムのラベル|
+|callback|Function|() => {}|ユーザーがアイテムを選択したとき、この関数が呼び出されます|
+
+#### add_separator()
+
+コンテキストメニューにセパレーターを追加します。引数はありません。
+
+#### add_contents()
+
+コンテキストメニューにアイテムやセパレーターを追加します。
+
+|名前|引数の型|デフォルト|説明|
+|--:|--:|--:|--:|
+|contents|Array of Object|N/A|コンテキストメニューに追加する内容の配列|
+
+##### add_contents()の例
+
+```javascript
+const context = new Context();
+
+const contents = [
+    {
+        type: "item",
+        label: "Alert",
+        callback: () => {
+            alert("Clicked!");
+        }
+    },
+    {
+        type: "separator"
+    },
+    {
+        type: "item",
+        label: "No Callback"
+    },
+];
+
+context.add_contents(contents);
+```
+
+#### open()
+
+コンテキストメニューを開きます。右クリックによってコンテキストメニューを開く処理はライブラリー側で行うため、基本的にこの関数を使用することはないはずです。
+
+|名前|引数の型|デフォルト|説明|
+|--:|--:|--:|--:|
+|event|MouseEvent|N/A|マウスイベント|
+
+#### close()
+
+コンテキストメニューを閉じます。開かれたコンテキストメニューをユーザーの操作に応じて閉じる処理はライブラリー側で行うため、基本的にこの関数を使用することはないはずです。引数はありません。