Skip to content

Commit

Permalink
Deploying to gh-pages from @ 0185edf 🚀
Browse files Browse the repository at this point in the history
  • Loading branch information
@gera2ld
gera2ld committed Mar 8, 2024
0 parents commit eeb6839
Show file tree
Hide file tree
Showing 5 changed files with 1,132 additions and 0 deletions.
1 change: 1 addition & 0 deletions .nojekyll
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.
100 changes: 100 additions & 0 deletions app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
const { createApp, nextTick, ref, watch, onMounted } = Vue;
createApp({
setup() {
const shortcuts = ref(`\
g g
c-a c-b
a-a a-b
ArrowUp ArrowUp ArrowDown ArrowDown ArrowLeft ArrowRight ArrowLeft ArrowRight B A`);
const keyExpCS = ref('');
const keyExpCI = ref('');
const keyExpCICode = ref('');
const keyTriggered = ref('');
const sequence = ref('');
const caseSensitive = ref(false);
let disposeList = [];

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,
() => {
nextTick(() => {
keyTriggered.value = key;
});
},
{
caseSensitive: caseSensitive.value,
},
);
});
},
{ immediate: true },
);
watch(sequence, () => {
keyTriggered.value = '';
});

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 {
shortcuts,
sequence,
keyTriggered,
keyExpCS,
keyExpCI,
keyExpCICode,
caseSensitive,
};
},
}).mount('#app');
184 changes: 184 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,184 @@
<!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>
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap"
rel="stylesheet"
/>
<style>
* {
box-sizing: border-box;
}

body {
font-family: 'Roboto Slab', serif;
}

[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',
},
};
</script>
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>
</head>

<body>
<a
href="https://github.com/violentmonkey/vm-shortcut"
class="github-corner"
aria-label="View source on GitHub"
><svg
width="80"
height="80"
viewBox="0 0 250 250"
style="
fill: #70b7fd;
color: #fff;
position: absolute;
top: 0;
border: 0;
right: 0;
"
aria-hidden="true"
>
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor"
style="transform-origin: 130px 106px"
class="octo-arm"
></path>
<path
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor"
class="octo-body"
></path></svg></a
><style>
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
@keyframes octocat-wave {
0%,
100% {
transform: rotate(0);
}
20%,
60% {
transform: rotate(-25deg);
}
40%,
80% {
transform: rotate(10deg);
}
}
@media (max-width: 500px) {
.github-corner:hover .octo-arm {
animation: none;
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
}
</style>
<div id="app" class="max-w-screen-lg mx-auto px-2" un-cloak>
<h1 class="text-center"><em>@violentmonkey/shortcut</em> Playground</h1>
<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"></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>
Loading

0 comments on commit eeb6839

Please sign in to comment.