Deploying to gh-pages from @ a73ae92 🚀

violentmonkey · Mar 19, 2024 · dc977c3 · dc977c3
commit dc977c3
Show file tree

Hide file tree

Showing 5 changed files with 1,094 additions and 0 deletions.
diff --git a/.nojekyll b/.nojekyll
@@ -0,0 +1 @@
+TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.
diff --git a/app.js b/app.js
@@ -0,0 +1,98 @@
+(function (vue) {
+  'use strict';
+
+  vue.createApp({
+    setup() {
+      const shortcuts = vue.ref(`\
+g g
+c-a c-b
+a-a a-b
+ArrowUp ArrowUp ArrowDown ArrowDown ArrowLeft ArrowRight ArrowLeft ArrowRight B A`);
+      const keyExpCS = vue.ref('');
+      const keyExpCI = vue.ref('');
+      const keyExpCICode = vue.ref('');
+      const keyTriggered = vue.ref('');
+      const sequence = vue.ref('');
+      const caseSensitive = vue.ref(false);
+      let disposeList = [];
+      const onFocus = () => {
+        VM.shortcut.getService().setContext('input', true);
+      };
+      const onBlur = () => {
+        VM.shortcut.getService().setContext('input', false);
+      };
+      vue.watch([shortcuts, caseSensitive], () => {
+        disposeList.forEach(dispose => dispose());
+        disposeList = shortcuts.value.split('\n').map(row => row.trim()).filter(Boolean).map(key => {
+          console.log('register', key, caseSensitive.value);
+          return VM.shortcut.register(key, () => {
+            vue.nextTick(() => {
+              keyTriggered.value = key;
+            });
+          }, {
+            caseSensitive: caseSensitive.value,
+            condition: '!input'
+          });
+        });
+      }, {
+        immediate: true
+      });
+      vue.watch(sequence, () => {
+        keyTriggered.value = '';
+      });
+      vue.onMounted(() => {
+        VM.shortcut.disable();
+        VM.shortcut.getService().sequence.subscribe(seq => {
+          sequence.value = seq.join(' ');
+        });
+        window.addEventListener('keydown', e => {
+          if (!VM.shortcut.modifiers[e.key.toLowerCase()]) {
+            keyExpCS.value = VM.shortcut.buildKey({
+              base: e.key,
+              modifierState: {
+                c: e.ctrlKey,
+                m: e.metaKey
+              },
+              caseSensitive: true
+            });
+            keyExpCICode.value = VM.shortcut.buildKey({
+              base: e.code,
+              modifierState: {
+                c: e.ctrlKey,
+                s: e.shiftKey,
+                a: e.altKey,
+                m: e.metaKey
+              },
+              caseSensitive: false
+            }).replace(/^i:/, '');
+            keyExpCI.value = VM.shortcut.buildKey({
+              base: e.key,
+              modifierState: {
+                c: e.ctrlKey,
+                s: e.shiftKey,
+                a: e.altKey,
+                m: e.metaKey
+              },
+              caseSensitive: false
+            }).replace(/^i:/, '');
+          }
+          VM.shortcut.handleKey(e);
+        });
+      });
+      return {
+        version: VM.shortcut.version,
+        commit: "a73ae92",
+        shortcuts,
+        sequence,
+        keyTriggered,
+        keyExpCS,
+        keyExpCI,
+        keyExpCICode,
+        caseSensitive,
+        onFocus,
+        onBlur
+      };
+    }
+  }).mount('#app');
+
+})(Vue);
diff --git a/index.html b/index.html
@@ -0,0 +1,146 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@violentmonkey/shortcut Playground</title>
+    <style>
+      [un-cloak] {
+        display: none;
+      }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
+    <script>
+      window.__unocss = {
+        shortcuts: {
+          textarea: 'block w-full',
+          code: 'bg-blue-200 text-gray-700 border border-solid border-blue-300 rounded px-1 text-xs',
+          kbd: 'bg-gray-100 text-gray-700 border border-solid border-gray-300 rounded px-1 text-xs',
+        },
+      };
+      window.__jslib = {
+        githubCorner: {
+          url: 'https://github.com/violentmonkey/vm-shortcut',
+          color: 'blue',
+        },
+        webFont: true,
+      };
+    </script>
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/gh/gera2ld/js-lib@dist/unocss.js"
+    ></script>
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/gh/gera2ld/js-lib@dist/github-corner.js"
+    ></script>
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/gh/gera2ld/js-lib@dist/web-font.js"
+    ></script>
+  </head>
+
+  <body>
+    <div id="app" class="max-w-screen-lg mx-auto px-2" un-cloak>
+      <h1 class="text-center"><em>@violentmonkey/shortcut</em> Playground</h1>
+      <p class="text-right text-gray-400 text-sm">
+        Version: {{version}}
+        <a
+          class="text-blue-400"
+          :href="`https://github.com/violentmonkey/vm-shortcut/commit/${commit}`"
+          v-text="commit"
+        ></a>
+      </p>
+      <h2>Triggering a Shortcut</h2>
+      <div class="flex mb-2">
+        <div class="flex-1">
+          Declare your shortcuts here: (one sequence in a line)
+        </div>
+        <label>
+          <input type="checkbox" v-model="caseSensitive" /> Case sensitive
+        </label>
+      </div>
+      <textarea
+        class="mb-2 textarea h-[10em]"
+        v-model="shortcuts"
+        @focus="onFocus"
+        @blur="onBlur"
+      ></textarea>
+      <div class="mb-2 text-gray-600">
+        Current sequence:
+        <span class="text-blue-400" v-text="sequence || 'empty'"></span>
+      </div>
+      <div class="mb-2 text-center text-gray-600">
+        <div v-if="keyTriggered">
+          You just triggered
+          <span class="text-blue-600" v-text="keyTriggered"></span>!
+        </div>
+        <div v-else>Try to trigger a shortcut sequence declared above.</div>
+      </div>
+      <h2 class="mt-12">Inspecting a Key</h2>
+      <div class="mb-2">Press a key to see how it is represented.</div>
+      <div class="mb-2 text-sm text-gray-600">
+        <p>Note:</p>
+        <ul>
+          <li>
+            <kbd class="kbd">Alt</kbd>/<kbd class="kbd">Opt</kbd>/<kbd
+              class="kbd"
+              >Shift</kbd
+            >
+            do not work in case-sensitive mode.
+          </li>
+          <li>
+            Some keys might not work because they are occupied by the browser.
+          </li>
+        </ul>
+      </div>
+      <div class="grid grid-cols-2 grid-gap-2">
+        <div class="p-2 border border-solid border-gray-400">
+          <div>Case Insensitive:</div>
+          <ul>
+            <li v-if="keyExpCI">
+              <span v-text="keyExpCI"></span> (<code class="code"
+                >event.key</code
+              >)
+            </li>
+            <li v-if="keyExpCICode">
+              <span v-text="keyExpCICode"></span> (<code class="code"
+                >event.code</code
+              >)
+            </li>
+          </ul>
+        </div>
+        <div class="p-2 border border-solid border-gray-400">
+          <div>Case Sensitive:</div>
+          <ul>
+            <li v-if="keyExpCS"><span v-text="keyExpCS"></span></li>
+          </ul>
+        </div>
+        <div>
+          <pre
+            v-if="keyExpCICode"
+            class="m-0 p-2 border border-solid border-blue-400 bg-blue-100"
+          >
+VM.shortcut.register({{ JSON.stringify(keyExpCI) }}, callback);
+// or
+VM.shortcut.register({{ JSON.stringify(keyExpCICode) }}, callback);
+</pre
+          >
+        </div>
+        <div>
+          <pre
+            v-if="keyExpCS"
+            class="m-0 p-2 border border-solid border-blue-400 bg-blue-100"
+          >
+VM.shortcut.register({{ JSON.stringify(keyExpCS) }}, callback, {
+  caseSensitive: true,
+});
+</pre
+          >
+        </div>
+      </div>
+    </div>
+    <script src="index.js"></script>
+    <script src="app.js"></script>
+  </body>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.