@peter.naydenov/shortcuts 1.0.0

package/Changelog.md

@@ -0,0 +1,11 @@
+## Release History
+
+
+
+### 1.0.0 (2023-08-14)
+ 
+ - [x] Initial code;
+ - [x] Test package;
+ - [x] Documentation;
+
+

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Peter Naydenov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,299 @@
+# Shortcuts (@peter.naydenov/shortcuts)
+
+![version](https://img.shields.io/github/package-json/v/peterNaydenov/shortcuts)
+![license](https://img.shields.io/github/license/peterNaydenov/shortcuts)
+
+Build a keyboard shortcuts maps and describe a mouse clicks. Control them on context.
+
+
+
+## Shortcut Description Rules
+The shortcuts definition includes a context name and a set of rules(object). The rules are a set of key-value pairs. The key is a shortcut name and the value is a function or array of functions, to be executed when the shortcut is triggered (action function).
+
+```js
+// Shortcut definition object:
+{
+    contextName : {
+                    shortcutName : function () {
+                                                // do something
+                                        }
+                    , shortcutName : [ 
+                                              function action1() {
+                                                        // do something
+                                                }
+                                            , function action2() {
+                                                        // do something
+                                                }
+                                    ]
+                }
+}
+```
+Load a shortcut definition by calling `load` method.
+
+```js
+include shortcuts from '@peter.naydenov/shortcuts'
+const short = shortcuts ();
+short.load ( shortcutDefinition )
+```
+
+Shortcuts are working only if contex is active. To activate a context call `changeContext` method.
+
+```js
+short.changeContext ( contextName )
+```
+
+To deactivate a context without starting other context, call `changeContext` method without arguments.
+
+```js
+short.changeContext ()
+``` 
+
+Shortcuts context has `note` that works like sub-contexts. Every shortcut function receives a context and note as arguments, so you can have fine control over the context.
+
+```js
+short.setNote ( 'special' ) // set note to 'special'
+short.setNote () // remove the note
+```
+
+The idea of `note` is to minimize the number of contexts if they are very simular. You can use same context but change the `note` and control the shortcut execution from inside of the action function by checking the `note`.
+
+```js
+{
+    contextName : {
+                    shortcutName : function ( {context, note} ) {
+                                        if ( note === 'special' ) {
+                                                        // do something
+                                            }
+                                    }
+                }
+}
+```
+
+Context and notes are available inside action functions but you can check them from outside too.
+Check current context by calling `getContext` method.
+
+```js
+short.getContext ()
+```
+
+Check notes by calling `getNote` method.
+
+```js
+short.getNote ()
+```
+
+
+
+
+
+## Mouse Event Descriptions
+Mouse event name is build from the following parts:
+```js
+ // mouse-click-<mouse button>-<number of clicks>
+ // example:
+ // mouse-click-left-2 -> for double click with left mouse button
+ // mouse-click-right-3 -> for triple click with right mouse button
+
+ // mouse button options: left, right, middle
+```
+
+The modifier keys `ctrl`, `alt`, and `shift` are supported. They are added to the mouse event by sign `+`:
+
+```js
+ // example:
+ // ctrl+mouse-click-left-1 -> for single click with left mouse button and ctrl key pressed
+```
+Order of describing mouse event and modifier keys is not important.
+
+```js
+ // example:
+ // mouse-click-left-1+ctrl -> same as above
+
+ // These 3 descriptions are equal:
+ // mouse-click-left-1+ctrl+alt+shift
+ // alt+shift+mouse-click-left-1+ctrl
+ // mouse-click-left-1+shift+ctrl+alt
+```
+
+Multiple clicks are detected automatically by time interval between clicks. The default interval is 320ms but you can change it by setting `mouseWait` option. Read more in section `Options`.
+
+
+
+
+
+## Keyboard Event Descriptions
+Keyboard event description contains a key name and a modifier keys if they are used. The modifier keys `ctrl`, `alt`, and `shift` are supported. They are added to the keyboard event by sign `+`:
+
+```js
+ // example:
+ // ctrl+alt+shift+a -> for key 'a' with ctrl, alt and shift keys pressed
+```
+
+Keyboard event description support a shortcut sequenses. These means that you can press a sequence of keys to trigger a shortcut. The sequence elements are separated by sign "," ( coma ):
+
+```js
+ // example:
+ // a,b,c -> for key 'a' then key 'b' then key 'c'
+
+ // g+shift,o,t,o -> for key 'g' with shift, then key 'o', then key 't' then key 'o'
+```
+
+Order of describing keyboard event and modifier keys is not important, but sequence elements are:
+
+```js
+ // example:
+ // a+ctrl,l,o,t -> a with ctrl, then l, then o, then t
+ // this is equal to:
+ // ctrl+a,l,o,t
+ // but not equal to:
+ // ctrl+a,o,t,l
+```
+
+Keyboard sequence is detected automatically by time interval between key presses. The default interval is 480ms but you can change it by setting `keyWait` option. Read more in section `Options`. 
+
+There is a way to disable automatic sequence detection and mark the begining and the end of the sequense by using a keyboard action functions. Read more in section `Keyboard Action Functions`.
+
+Special characters that are available for your shortcut descriptions:
+- 'left' - left arrow key
+- 'right' - right arrow key
+- 'up' - up arrow key
+- 'down' - down arrow key
+- 'enter' - enter key
+- 'space' - space key
+- 'esc' - escape key
+- 'tab' - tab key
+- 'backspace' - backspace key
+- '=' - equal key
+- F1 - F12 - function keys
+- '/' - slash key
+- '\\' - backslash key
+- '[' - open square bracket key
+- ']' - close square bracket key
+- '`' - backtick key
+
+**Warning**: For keys with two symbols, in shortcut description use the lower one. Examples: Use '=' instead of '+', use '/' instead of '?', etc. Modifier keys are available for special characters too.
+
+**Warining**: Some of the shortcuts are used by OS and the browswer, so they are not available.
+
+
+
+## Action Functions
+Action functions are called when a shortcut is triggered. They is a difference between keyboard and mouse action functions. Arguments are slightly different.
+
+
+
+### Keyboard Action Functions
+Description of keyboard action functions is:
+```js
+function myKeyHandler ({
+                  context   // (string) Name of the current context;
+                , note      // (string) Name of the note or null if note isn't set;
+                , wait      // (function). Call it to stop a sequence timer and write shortcut sequence without a timer.
+                , end       // (function). Recover the sequence timer;
+                , ignore    // (function). Call it to ignore the current shortcut from the sequence;
+                , isWaiting // (boolean). True if the sequence timer is active;
+                        }) {
+    // Body of the handler. Do something...
+}
+```
+
+
+
+
+### Mouse Action Functions
+Mouse action functions can be described like:
+
+```js
+function myMouseHandler ({
+                  context     // (string) Name of the current context;
+                , note        // (string) Name of the note or null if note isn't set;
+                , target      // (DOM element). Target element of the mouse event;
+                , targetProps // (object). Coordinates of the target element (top, left, right, bottom, width, height) or null if target element is not available;
+                , x           // (number). X coordinate of the target element;
+                , y           // (number). Y coordinate of the target element;
+                , event       // (object). Original mouse event object;
+          }) {
+    // Body of the handler. Do something...
+}
+```
+
+
+
+
+
+## Methods
+
+Description of the methods of shortcut instance:
+
+```js
+  load          : 'Load and extend a shortcut definition.'
+, unload        : 'Remove a shortcut context with all its shortcuts.'
+, changeContext : 'Switch to existing shortcut context.'
+, pause         : 'Stop listening for shortcuts.'
+, resume        : 'Resume listening for shortcuts.'
+, listContexts  : 'Return list of available contexts.'
+, getContext    : 'Return a name of current context or null if there is no context selected'
+, getNote       : `Return a name of current note or null if note isn't set`
+, setNote       : 'Set a note to current context.'
+```
+
+
+
+
+## Options
+
+By `options` you can customize the behavior of the shortcuts. Here is the list of available options:
+
+```js
+  mouseWait     : 'Timeout for entering multiple mouse events. Default value - 320.'
+, keyWait       : 'Timeout for entering shortcut sequence in ms. Default value - 480'
+, clickTarget   : 'Data attribute name to recognize click items in HTML. Default value - click' // data attribute 'click' means attribute ( data-click='someName' )
+, listenFor     : `List input signal sources. Default value - [ 'mouse', 'keyboard' ]`
+, onShortcut    : 'False or a callback function that is called when a shortcut is triggered. Default value - false'
+, streamKeys    : 'False or a callback function that is called when a key is pressed. Default value - false'
+```
+
+You can request default list of options with their default values:
+
+```js
+shortcuts.getDefaults ()
+// Note: This method is availalble on the original shortcuts object, not on the shortcuts instance.
+
+// start a shortcuts with default options
+const short = shortcuts ()
+const short = shortcuts ( shortcuts.getDefaults () ) // same as above
+// The idea behind getDefaults is to see what options are available and what are their default values.
+```
+
+
+
+### onShortcut option
+```js
+ function onShortcut ( shortcut, context, note ) {
+        // shortcut - (string) Triggered shortcut name
+        // context - (string) Name of the current context
+        // note - (string) Name of the note or null if note isn't set
+    }
+```
+
+
+
+### streamKeys option
+```js
+ function streamKeys ( key, context, note ) {
+        // key - (string) Pressed key name
+        // context - (string) Name of the current context
+        // note - (string) Name of the note or null if note isn't set
+    }
+```
+
+
+
+
+## Credits
+'@peter.naydenov/shortcuts' was created and supported by Peter Naydenov.
+
+
+
+## License
+'@peter.naydenov/shortcuts' is released under the MIT License.

package/blueprint-docs.md

@@ -0,0 +1,73 @@
+# Shortcuts (@peter.naydenov/shortcuts)
+*UNDER HEAVY DEVELOPMENT - early experimental stage*
+
+Build a keyboard shortcuts maps and describe a mouse clicks. Control them on context.
+
+Tread it as a "**draft**" during `HEAVY DEVELOPMENT` stage. the API will change frequently and version of the package will not be updated. Will stay at `0.0.1` until the API get usable.
+
+
+
+
+
+Create shortcuts for your web application based on keyboard and mouse events.
+
+Listen for keyboard, mouse and touch events and converts them into event-emmiter events. 
+Define a shortcut library with shortcut names and callback functions. The callback functions will be called when the shortcut is pressed. Library `shortcuts` supports a context switching and that allows 
+to add, remove and change multiple shortcuts by changing the current context. 
+
+- Context switching;
+- Listen for keyboard, mouse and touch events;
+- Read a shortcut sequences;
+- Multiple mouse clicks events for left and right mouse buttons;
+- The delay between keypresses and mouse clicks in shortcut sequences are controlled by parameters;
+- Centralized control over mouse click event. All clicks on the page can be described by a single callback function;
+
+
+Define and conrol shortcuts in your application. Setup a stage, create a shortcut name and associate a list of callback function with it. The callback function will be called when the shortcut is pressed. Changing the stage will stop all shortcuts associated with it old stage and start all shortcuts associated with the new stage.
+
+Event sources: keyboard, mouse, touch;
+
+## Installation
+
+```bash
+ npm i @peter.naydenov/shortcuts
+```
+
+From the project file:
+
+```js
+ import shortcuts from '@peter.naydenov/shortcuts'
+
+```
+
+## Methods
+
+
+```js
+  'load'          : 'Provide context objects, shortcuts related to the context and list of callback functions'
+, 'unload'        : 'Remove context objects and shortcuts'
+, 'changeContext' : 'Change the current context. Change active list of shortcuts'
+, 'pause'         : 'Disable all shortcuts. No change of context'
+, 'resume'        : 'Resume shortcuts after pause'
+, 'getContext'    : 'Return the current context name'
+```
+
+
+## Keyboard Action functions
+Keypress will create an event with name of pressed keys. If `shortcut` has a callback function associated with this name, the callback function will be called. 
+
+The callback function will receive an object with the following properties:
+
+```js
+    function keyCallback (key) {
+        console.log(key)
+    }
+```
+Every shortcut is defined by a callback function. The callback function will be called when the shortcut is pressed. The callback function will receive an object with the following properties:
+
+
+```js
+    function keyCallback (key) {
+        console.log(key)
+    }
+```

package/cypress.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: "react",
+      bundler: "vite",
+    },
+  },
+});

package/dist/assets/index-3c4377c6.js

@@ -0,0 +1 @@
+(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const o of document.querySelectorAll('link[rel="modulepreload"]'))i(o);new MutationObserver(o=>{for(const l of o)if(l.type==="childList")for(const u of l.addedNodes)u.tagName==="LINK"&&u.rel==="modulepreload"&&i(u)}).observe(document,{childList:!0,subtree:!0});function t(o){const l={};return o.integrity&&(l.integrity=o.integrity),o.referrerPolicy&&(l.referrerPolicy=o.referrerPolicy),o.crossOrigin==="use-credentials"?l.credentials="include":o.crossOrigin==="anonymous"?l.credentials="omit":l.credentials="same-origin",l}function i(o){if(o.ep)return;o.ep=!0;const l=t(o);fetch(o.href,l)}})();function M(){function r(){let e={},t={},i=[],o=!1,l="";function u(n,s){e[n]||(e[n]=[]),e[n].push(s)}function c(n,s){t[n]||(t[n]=[]),t[n].push(s)}function y(n,s){if(s){e[n]&&(e[n]=e[n].filter(g=>g!==s)),t[n]&&(t[n]=t[n].filter(g=>g!==s)),e[n]&&e[n].length===0&&delete e[n],t[n]&&t[n].length===0&&delete e[n];return}t[n]&&delete t[n],e[n]&&delete e[n]}function f(){e={},t={},i=[]}function m(n,s){o=!!n,s&&typeof s=="string"&&(l=s)}function d(){const[n,...s]=arguments;if(o&&(console.log(`${l} Event "${n}" was triggered.`),s.length>0&&(console.log("Arguments:"),console.log(...s),console.log("^----"))),n=="*"&&Object.keys(e).forEach(E=>{i.includes(E)||e[E].forEach(F=>F(...s))}),t[n]){if(i.includes(n))return;t[n].forEach(g=>g(...s)),delete t[n]}if(e[n]){if(i.includes(n))return;e[n].forEach(g=>g(...s))}}function k(n){if(n==="*"){i=[];return}i=i.filter(s=>n!=s)}function p(n){if(n==="*"){const s=Object.keys(e);i=[...Object.keys(t),...s];return}i.push(n)}return{on:u,once:c,off:y,reset:f,emit:d,stop:p,start:k,debug:m}}return new r}function P(r,e,t){const{specialChars:i,readKeyEvent:o,readMouseEvent:l,findTarget:u,ev:c,exposeShortcut:y,streamKeys:f}=r,{mouseWait:m,keyWait:d,clickTarget:k,listenFor:p}=e;let n=[],s=null,g=null,E=null,F=null,h=null,T=!0,L=!1,S=0;const A=()=>T=!1,b=()=>T=!0,O=()=>L=!0,v=()=>T===!1;function I(){let a=n.map(K=>[K.join("+")]);if(!T){let K=a.at(-1);c.emit(K,{wait:A,end:b,ignore:O,isWaiting:v,note:t.note,context:t.name}),L&&(a=a.slice(0,-1),L=!1)}T&&(c.emit(a.join(","),{wait:A,end:b,ignore:O,isWaiting:v,note:t.note,context:t.name}),y&&y(a.join(","),t.name,t.note),n=[],E=null)}function w(){const a=l(g,S),K={target:s,targetProps:s?s.getBoundingClientRect():null,x:g.clientX,y:g.clientY,context:t.name,note:t.note,event:g};c.emit(a.join("+"),K),y&&y(a.join("+"),t.name,t.note),F=null,h=null,s=null,g=null,S=0}function q(){window.addEventListener("contextmenu",a=>{if(clearTimeout(F),h){clearTimeout(h),h=setTimeout(()=>h=null,m);return}if(S===e.maxClicks){w(),h=setTimeout(()=>h=null,m);return}a.preventDefault(),s=u(a.target,k),g=a,S++,F=setTimeout(w,m)}),document.addEventListener("click",a=>{if(clearTimeout(F),h){clearTimeout(h),h=setTimeout(()=>h=null,m);return}if(S===e.maxClicks){w(),h=setTimeout(()=>h=null,m);return}s=u(a.target,k),g=a,S++,F=setTimeout(w,m)})}function j(){document.addEventListener("keydown",a=>{if(clearTimeout(E),i.hasOwnProperty(a.code))n.push(o(a,i));else return;if(f&&f(a.key,t.name,t.note),e.keyIgnore){clearTimeout(e.keyIgnore),e.keyIgnore=setTimeout(()=>e.keyIgnore=null,d);return}if(T&&n.length===e.maxSequence){I(),e.keyIgnore=setTimeout(()=>e.keyIgnore=null,d);return}T?E=setTimeout(I,d):I()}),document.addEventListener("keypress",a=>{if(!i.hasOwnProperty(a.code)){if(clearTimeout(E),f&&f(a.key,t.name,t.note),e.keyIgnore){clearTimeout(e.keyIgnore),e.keyIgnore=setTimeout(()=>e.keyIgnore=null,d);return}if(n.push(o(a,i)),T&&n.length===e.maxSequence){I(),e.keyIgnore=setTimeout(()=>e.keyIgnore=null,d);return}T?E=setTimeout(I,d):I()}})}p.includes("mouse")&&q(),p.includes("keyboard")&&j()}function B(r){return r.split(",").map(t=>t.trim()).map(t=>t.split("+").map(i=>i.toUpperCase()).sort().join("+")).join(",")}function D(r,e){let{shiftKey:t,altKey:i,ctrlKey:o}=r,l=["ControlLeft","ControlRight","ShiftLeft","ShiftRight","AltLeft","AltRight","Meta"],u=r.code.replace("Key","").replace("Digit",""),c=[];return o&&c.push("CTRL"),t&&c.push("SHIFT"),i&&c.push("ALT"),e.hasOwnProperty(u)?c.push(e[u].toUpperCase()):l.includes(u)||c.push(u.toUpperCase()),c.sort()}function U(r,e){let{shiftKey:t,altKey:i,ctrlKey:o,key:l,button:u}=r,c=["LEFT","MIDDLE","RIGHT"],y=`MOUSE-CLICK-${c[u]}-${e}`,f=[];return f.push(y),o&&f.push("CTRL"),t&&f.push("SHIFT"),i&&f.push("ALT"),f.sort()}function $(r,e){let t=r;for(;t&&!t.dataset[e];)if(t=t.parentNode,t===document||t===document.body)return null;return t}const x={ArrowLeft:"LEFT",ArrowUp:"UP",ArrowRight:"RIGHT",ArrowDown:"DOWN",Enter:"ENTER",NumpadEnter:"ENTER",Escape:"ESC",Backspace:"BACKSPACE",Space:"SPACE",Tab:"TAB",Backquote:"`",BracketLeft:"[",BracketRight:"]",Equal:"=",Slash:"/",Backslash:"\\",IntlBackslash:"`",F1:"F1",F2:"F2",F3:"F3",F4:"F4",F5:"F5",F6:"F6",F7:"F7",F8:"F8",F9:"F9",F10:"F10",F11:"F11",F12:"F12"};function N(r,e,t,i){return function(l){const u=i(),c=Object.keys(l);let y=!1;c.forEach(f=>{const m=Object.entries(l[f]);f===u&&(y=!0),r[f]={},m.forEach(([d,k])=>{const p=e(d);k instanceof Function&&(k=[k]),r[f][p]=k})}),y&&(t(),t(u))}}function H(r,e,t){return function(o){if(t.name===o){e.emit("shortcuts-error",`Context '${o}' can't be removed during is current active context. Change the context first`);return}if(!r[o]){e.emit("shortcuts-error",`Context '${o}' does not exist`);return}delete r[o]}}function R(r,e,t,i){return function(l=!1){const u=i.name;if(e.maxSequence=1,e.maxClicks=1,e.keyIgnore>=0&&(clearTimeout(e.keyIgnore),e.keyIgnore=null),!l){t.reset(),i.name=null;return}if(u!==l){if(!r[l]){t.emit("shortcuts-error",`Context '${l}' does not exist`);return}r[u]&&t.reset(),Object.entries(r[l]).forEach(([c,y])=>{if(c.includes("MOUSE-CLICK-")){let[,,,m]=c.split("-"),d=parseInt(m);e.maxClicks<d&&(e.maxClicks=d)}else{let m=c.split(",").length;e.maxSequence<m&&(e.maxSequence=m)}y.forEach(m=>t.on(c,m))}),i.name=l}}}function W(r={}){const e=M(),t={name:null,note:null},i=r.onShortcut&&typeof r.onShortcut=="function"?r.onShortcut:!1,o=r.streamKeys&&typeof r.streamKeys=="function"?r.streamKeys:!1,l={mouseWait:r.mouseWait?r.mouseWait:320,maxClicks:1,keyWait:r.keyWait?r.keyWait:480,maxSequence:1,clickTarget:r.clickTarget?r.clickTarget:"click",listenFor:r.listenFor&&Array.isArray(r.listenFor)?r.listenFor:["mouse","keyboard"],keyIgnore:null},u={},c=()=>t.name,y=()=>t.note,f=(d=null)=>{(typeof d=="string"||d==null)&&(t.note=d)};return P({specialChars:x,readKeyEvent:D,readMouseEvent:U,findTarget:$,ev:e,exposeShortcut:i,streamKeys:o},l,t),{load:N(u,B,R(u,l,e,t),c),unload:H(u,e,t),changeContext:R(u,l,e,t),pause:()=>e.stop(),resume:()=>e.start(),listContexts:()=>Object.keys(u),getContext:c,getNote:y,setNote:f}}W.getDefaults=()=>({mouseWait:320,keyWait:480,clickTarget:"click",listenFor:["mouse","keyboard"],onShortcut:!1,streamKeys:!1});const G={onShortcut(r,e,t){console.log("-- RESULTS --->"),console.log("Shortcut",r),console.log("Context:",e),t&&console.log("Note:",t)}},C=W(G);C.load({general:{q:[()=>console.log("Q was clicked")],"r,o,s":()=>console.log("ROS was clicked"),"mouse-click-left-2":()=>console.log("Mouse left click 2"),r:[({isWaiting:r})=>{r()||console.log("R was clicked")}],"shift+w":[({wait:r,end:e,ignore:t,isWaiting:i,note:o})=>{t(),i()?(console.log("END"),e()):(console.log("WAIT"),r())},()=>console.log("W")]}});C.changeContext("general");C.setNote("some");

package/dist/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <style>
+      .block {
+              width: 100px;
+              height: 100px;
+              background-color: red;
+          }
+      .big-btn {
+              width: 200px;
+              height: 200px;
+              margin-left: 320px;
+              background-color: skyblue;
+              border-radius: 10px;
+          }
+    </style>
+    <script type="module" crossorigin src="/assets/index-3c4377c6.js"></script>
+  </head>
+  <body>
+    
+    <div class="block" data-click="red-block">
+        <span>hello</span>
+    </div>
+
+    <button class="big-btn" data-click="mega-button" draggable>Mega button</button>
+  </body>
+</html>

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/index.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <style>
+      .block {
+              width: 100px;
+              height: 100px;
+              background-color: red;
+          }
+      .big-btn {
+              width: 200px;
+              height: 200px;
+              margin-left: 320px;
+              background-color: skyblue;
+              border-radius: 10px;
+          }
+    </style>
+  </head>
+  <body>
+    <script type="module">
+        import sc from '/src/main.js'
+
+        const options = {
+                  onShortcut ( shortcut, context, note ) {
+                          console.log ( '-- RESULTS --->' )
+                          console.log ( 'Shortcut', shortcut )
+                          console.log ( 'Context:', context )
+                          if ( note )   console.log ( 'Note:', note )
+                    } // onShortcut func.
+              }
+
+        const short = sc ( options );
+        short.load ( { general : {
+                              'q' : [ () => console.log('Q was clicked')   ] 
+                            , 'r,o,s' : () => console.log ( 'ROS was clicked' ) 
+                            , 'mouse-click-left-2' : () => console.log ( 'Mouse left click 2' )
+                            , 'r' : [
+                                        ({isWaiting}) => { 
+                                                if ( !isWaiting() ) {
+                                                            console.log ( 'R was clicked' )
+                                                    }
+                                            }
+                                    ]
+                            , 'shift+w' : [
+                                                ({wait, end, ignore, isWaiting, note })  => { 
+                                                          ignore ()
+                                                          if ( isWaiting () ) {
+                                                                      console.log('END')
+                                                                      end ()    
+                                                            } 
+                                                          else {
+                                                                      console.log('WAIT')
+                                                                      wait ()
+                                                            }
+                                                    },
+                                                () => console.log ( 'W' )
+                                          ]
+                          }
+            })
+        short.changeContext ( 'general' )
+        short.setNote ( 'some' )
+    </script>
+    <div class="block" data-click="red-block">
+        <span>hello</span>
+    </div>
+
+    <button class="big-btn" data-click="mega-button" draggable>Mega button</button>
+  </body>
+</html>

package/javascript.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@peter.naydenov/shortcuts",
+  "version": "1.0.0",
+  "description": "Create shortcuts for your web application based on keyboard and mouse events",
+  "keywords": [
+    "shortcut",
+    "key",
+    "keyboard",
+    "mouse",
+    "click"
+  ],
+  "main": "src/main.js",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "test": "cypress open --component --browser chrome test"
+  },
+  "dependencies": {
+    "@peter.naydenov/notice": "^2.1.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.0.4",
+    "chai": "^4.3.7",
+    "cypress": "^12.17.3",
+    "mocha": "^10.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "vite": "^4.4.9"
+  },
+  "author": "Peter Naydenov",
+  "license": "MIT"
+}

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/changeContext.js

@@ -0,0 +1,51 @@
+'use strict'
+
+import listen from "./listen";
+
+
+
+function changeContext ( shortcuts, listenOptions, ev, currentContext ) {
+return function changeContext ( contextName = false ) {
+        const current = currentContext.name;
+        listenOptions.maxSequence = 1
+        listenOptions.maxClicks = 1
+        
+        if ( listenOptions.keyIgnore >= 0 ) {   
+                        clearTimeout ( listenOptions.keyIgnore )
+                        listenOptions.keyIgnore = null
+                }
+
+        if ( !contextName ) {   // Switch off all shortcuts if contextName is not defined
+                        ev.reset ()
+                        currentContext.name = null
+                        return
+                }
+        if ( current === contextName ) return   // Do nothing if contextName is the same as current
+        if ( !shortcuts [ contextName ] ) {   // If contextName is not defined
+                        ev.emit ( 'shortcuts-error', `Context '${ contextName }' does not exist` )
+                        return
+                }
+        if ( shortcuts[current] ) {
+                        ev.reset ()   // Disable all shortcuts from current context
+                }
+        Object.entries ( shortcuts [ contextName ]).forEach ( ([shortcutName, list ]) => {   // Enable new context shortcuts and set a listenOptions 'maxSequence' and 'maxClicks'       
+                        let isMouseEv = shortcutName.includes ( 'MOUSE-CLICK-' );
+                        if ( isMouseEv ) {   // Set mouse max clicks
+                                        let [ , , , count ] = shortcutName.split('-')
+                                        let c = parseInt ( count );   // Number of clicks
+                                        if ( listenOptions.maxClicks < c )   listenOptions.maxClicks = c
+                                }
+                        else {   // Set key max sequence
+                                        let sequenceArraySize = shortcutName.split(',').length;
+                                        if ( listenOptions.maxSequence < sequenceArraySize )   listenOptions.maxSequence = sequenceArraySize
+                                }
+                        list.forEach ( fn => ev.on ( shortcutName, fn )   )    // Enable new context shortcuts
+                })   
+        currentContext.name = contextName
+}} // changeContext func.
+
+
+
+export default changeContext
+
+

package/src/findTarget.js

@@ -0,0 +1,18 @@
+'use strict'
+
+
+function findTarget ( target, dataName ) {
+    let t = target
+    while ( t && !t.dataset[dataName] ) {
+            t = t.parentNode;
+            if ( t === document      )   return null
+            if ( t === document.body )   return null
+        }
+    return t
+} // findTarget func.
+
+
+
+export default findTarget
+
+