├── docs
    └── show.gif
├── package.json
├── README.md
├── Keybinds.svelte
└── maps.js


/docs/show.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaUnknown/svelte-keybinds/HEAD/docs/show.gif


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-keybinds",
 3 |   "version": "1.0.9",
 4 |   "description": "Minimalistic keybinds interface, with rebinding and saving. Made for Svelte.",
 5 |   "main": "Keybinds.svelte",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/ThaUnknown/svelte-keybinds.git"
12 |   },
13 |   "keywords": [
14 |     "keybinds",
15 |     "keyboard",
16 |     "svelte",
17 |     "binds",
18 |     "rebinding",
19 |     "dragdrop"
20 |   ],
21 |   "author": "ThaUnknown",
22 |   "license": "MIT",
23 |   "bugs": {
24 |     "url": "https://github.com/ThaUnknown/svelte-keybinds/issues"
25 |   },
26 |   "homepage": "https://github.com/ThaUnknown/svelte-keybinds#readme"
27 | }
28 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <h1 align="center">
  2 | 	Svelte Keybinds
  3 | </h1>
  4 | <p align="center">
  5 |   <img src="./docs/show.gif" alt="chat"><br>
  6 | </p>
  7 | 
  8 | ## Functions:
  9 | ```jsx
 10 | import Keybinds, { binds, loadWithDefaults, condition } from './Keybinds.svelte'
 11 | 
 12 | <Keybinds let:prop={item} autosave={true} clickable={true}>
 13 | ```
 14 | - `clickable` - runs functions when the user clicks the key in the UI
 15 | - `condition` - async callback function any time a keybind is ran, if it returns true the keybind is ran, if it returns false it isnt
 16 | - `binds` - store/writable, binds object
 17 | - `autosave` - automatically saves to localstorage when a user changes binds, requires `id` in binds object
 18 | - `loadWithDefaults(defaults)` - loads the stored keybinds from autosave, using specific defaults, if a new keybind was added it will be properly created
 19 | 
 20 | On browsers which support the [keyboard API](https://caniuse.com/mdn-api_navigator_keyboard) this module will respect the user's keyboard layout [dworak etc].
 21 | 
 22 | ## Usage:
 23 | 
 24 | Simple example:
 25 | ```html
 26 | <script>
 27 | 	import Keybinds, { binds } from './Keybinds.svelte';
 28 | 
 29 | 	$binds = {
 30 | 		ArrowRight: {
 31 | 			fn: console.log,
 32 | 			label: '+2',
 33 | 		},
 34 | 		ArrowLeft: {
 35 | 			fn: console.warn,
 36 | 			label: '-2',
 37 | 		},
 38 | 		KeyA: {
 39 | 			fn: console.error,
 40 | 			label: '1'
 41 | 		}
 42 | 	};
 43 | </script>
 44 | 
 45 | <Keybinds let:prop={item}>
 46 | 	<div class="font-size-24 flex-center">{item?.label || ''}</div>
 47 | </Keybinds>
 48 | 
 49 | <style>
 50 | 	.font-size-24 {
 51 | 		font-size: 24px;
 52 | 	}
 53 | 	.flex-center {
 54 | 		display: flex;
 55 | 		height: 100%;
 56 | 		justify-content: center;
 57 | 		align-items: center;
 58 | 	}
 59 | </style>
 60 | ```
 61 | 
 62 | Example with autosave:
 63 | ```html
 64 | <script>
 65 | 	import Keybinds, { binds, loadWithDefaults } from './Keybinds.svelte';
 66 | 
 67 | 	const defaults = {
 68 | 		ArrowRight: {
 69 | 			fn: console.log,
 70 | 			id: '+2',
 71 | 		},
 72 | 		ArrowLeft: {
 73 | 			fn: console.warn,
 74 | 			id: '-2',
 75 | 		},
 76 | 		KeyA: {
 77 | 			fn: console.error,
 78 | 			id: '1'
 79 | 		}
 80 | 	};
 81 | 
 82 | 	$: console.log($binds)
 83 | 
 84 | 	loadWithDefaults(defaults)
 85 | </script>
 86 | 
 87 | <Keybinds let:prop={item} autosave={true} clickable={true}>
 88 | 	<div class="font-size-24 flex-center">{item?.id || ''}</div>
 89 | </Keybinds>
 90 | 
 91 | <style>
 92 | 	.font-size-24 {
 93 | 		font-size: 24px;
 94 | 	}
 95 | 	.flex-center {
 96 | 		display: flex;
 97 | 		height: 100%;
 98 | 		justify-content: center;
 99 | 		align-items: center;
100 | 	}
101 | </style>
102 | 
103 | ```
104 | 


--------------------------------------------------------------------------------
/Keybinds.svelte:
--------------------------------------------------------------------------------
  1 | <script context='module'>
  2 |   import { writable } from 'svelte/store'
  3 |   import { keys, layout } from './maps.js'
  4 | 
  5 |   let kbn = null
  6 | 
  7 |   export const binds = writable(null)
  8 |   binds.subscribe((obj) => {
  9 |     kbn = obj ?? {}
 10 |   })
 11 | 
 12 |   let cnd = null
 13 | 
 14 |   export const condition = writable(() => true)
 15 |   condition.subscribe((fn) => {
 16 |     if (typeof fn !== 'function') throw new Error('Condition must be a function')
 17 |     cnd = fn
 18 |   })
 19 | 
 20 |   document.addEventListener('keydown', runBind)
 21 | 
 22 |   async function runBind (e) {
 23 |     if (await cnd(e)) kbn[layout[e.code] || e.code]?.fn?.(e)
 24 |   }
 25 | 
 26 |   export function loadWithDefaults (defaults) {
 27 |     const def = toIDmap(defaults)
 28 |     const saved = JSON.parse(localStorage.getItem('thaunknown/svelte-keybinds'))
 29 |     for (const id in saved) {
 30 |       if (def[id]) {
 31 |         saved[id] = { ...saved[id], ...def[id] }
 32 |       } else {
 33 |         delete saved[id]
 34 |       }
 35 |     }
 36 |     binds.set(toKeyMap({ ...def, ...saved }))
 37 |   }
 38 | 
 39 |   function toIDmap (target = {}) {
 40 |     const obj = {}
 41 |     for (const code in target) {
 42 |       const bind = target[code]
 43 |       obj[bind.id] = { ...bind, code }
 44 |     }
 45 |     return obj
 46 |   }
 47 | 
 48 |   function toKeyMap (target = {}) {
 49 |     const obj = {}
 50 |     for (const code in target) {
 51 |       const bind = target[code]
 52 |       obj[bind.code] = { ...bind, code }
 53 |     }
 54 |     return obj
 55 |   }
 56 | 
 57 |   function save () {
 58 |     localStorage.setItem('thaunknown/svelte-keybinds', JSON.stringify(toIDmap(kbn)))
 59 |   }
 60 | </script>
 61 | 
 62 | <script>
 63 |   export let autosave = false
 64 | 
 65 |   export let clickable = false
 66 | 
 67 |   const kbnref = kbn
 68 |   let dragged = null
 69 |   function draggable (node, code) {
 70 |     let drag = false
 71 |     node.addEventListener('dragstart', ({ target }) => {
 72 |       dragged = target
 73 |       target.classList.add('transparent')
 74 |       drag = true
 75 |     })
 76 |     node.addEventListener('dragend', ({ target }) => {
 77 |       target.classList.remove('transparent')
 78 |       drag = false
 79 |     })
 80 |     node.addEventListener('dragover', (e) => {
 81 |       e.dataTransfer.dropEffect = 'move'
 82 |       e.preventDefault()
 83 |       if (!drag) e.target.classList.add('transparent')
 84 |     })
 85 |     node.addEventListener('dragleave', ({ target }) => {
 86 |       if (!drag) target.classList.remove('transparent')
 87 |     })
 88 |     node.addEventListener('drop', ({ target }) => {
 89 |       target.style.opacity = null
 90 |       const targetcode = dragged.dataset.code
 91 |       if (kbnref[code]) {
 92 |         const temp = kbnref[targetcode]
 93 |         kbnref[targetcode] = kbnref[code]
 94 |         kbnref[code] = temp
 95 |       } else {
 96 |         kbnref[code] = kbnref[targetcode]
 97 |         delete kbnref[targetcode]
 98 |       }
 99 |       binds.set(kbnref)
100 |       if (autosave === true) {
101 |         save()
102 |       }
103 |     })
104 |   }
105 | </script>
106 | 
107 | <div class='svelte-keybinds'>
108 |   {#each Object.values(keys) as key}
109 |     {@const { size, dark, name } = key}
110 |     <div
111 |       class:dark
112 |       draggable={!!kbnref[name]}
113 |       data-code={name}
114 |       class='w-{size || 50}'
115 |       {...$$restProps}
116 |       use:draggable={name}
117 |       on:click={(e) => clickable && runBind(Object.assign(e, { code: name }))}>
118 |       <slot prop={kbnref[name]} />
119 |     </div>
120 |   {/each}
121 | </div>
122 | 
123 | <style>
124 |   .svelte-keybinds {
125 |     flex-shrink: 0;
126 |     user-select: none;
127 |     display: flex;
128 |     flex-wrap: wrap;
129 |     width: 82em;
130 |     background: rgba(0, 0, 0, 0.8);
131 |     border-radius: 0.4em;
132 |     padding: 1em;
133 |     color: #eee;
134 |   }
135 | 
136 |   .svelte-keybinds .dark {
137 |     background: #191c20 !important;
138 |   }
139 | 
140 |   .svelte-keybinds .transparent {
141 |     opacity: 0.2 !important;
142 |   }
143 | 
144 |   .svelte-keybinds > div {
145 |     height: 4em;
146 |     margin: 0.5em;
147 |     background: #25282c;
148 |     border-radius: 0.4em;
149 |     cursor: pointer;
150 |     transition-property: opacity, transform;
151 |     transition-duration: 0.2s;
152 |     transition-timing-function: ease;
153 |   }
154 |   .svelte-keybinds > div > :global(*) {
155 |     pointer-events: none !important;
156 |   }
157 |   .svelte-keybinds > div:hover {
158 |     transform: scale(0.9);
159 |   }
160 |   .svelte-keybinds .w-50 {
161 |     width: 4em !important;
162 |   }
163 |   .svelte-keybinds .w-75 {
164 |     width: 6.5em !important;
165 |   }
166 |   .svelte-keybinds .w-85 {
167 |     width: 7.5em !important;
168 |   }
169 |   .svelte-keybinds .w-90 {
170 |     width: 8em !important;
171 |   }
172 |   .svelte-keybinds .w-100 {
173 |     width: 9em !important;
174 |   }
175 |   .svelte-keybinds .w-110 {
176 |     width: 10em !important;
177 |   }
178 |   .svelte-keybinds .w-115 {
179 |     width: 10.5em !important;
180 |   }
181 |   .svelte-keybinds .w-300 {
182 |     width: 29em !important;
183 |   }
184 | </style>
185 | 


--------------------------------------------------------------------------------
/maps.js:
--------------------------------------------------------------------------------
  1 | // Risky as objects dont guarantee order
  2 | export const keys = {
  3 |   Escape: {
  4 |     dark: true,
  5 |     name: 'Escape'
  6 |   },
  7 |   Digit1: {
  8 |     name: 'Digit1'
  9 |   },
 10 |   Digit2: {
 11 |     name: 'Digit2'
 12 |   },
 13 |   Digit3: {
 14 |     name: 'Digit3'
 15 |   },
 16 |   Digit4: {
 17 |     name: 'Digit4'
 18 |   },
 19 |   Digit5: {
 20 |     name: 'Digit5'
 21 |   },
 22 |   Digit6: {
 23 |     name: 'Digit6'
 24 |   },
 25 |   Digit7: {
 26 |     name: 'Digit7'
 27 |   },
 28 |   Digit8: {
 29 |     name: 'Digit8'
 30 |   },
 31 |   Digit9: {
 32 |     name: 'Digit9'
 33 |   },
 34 |   Digit0: {
 35 |     name: 'Digit0'
 36 |   },
 37 |   Minus: {
 38 |     name: 'Minus'
 39 |   },
 40 |   Equal: {
 41 |     name: 'Equal'
 42 |   },
 43 |   Backspace: {
 44 |     dark: true,
 45 |     size: 100,
 46 |     name: 'Backspace'
 47 |   },
 48 |   Delete: {
 49 |     dark: true,
 50 |     name: 'Delete'
 51 |   },
 52 |   Tab: {
 53 |     dark: true,
 54 |     size: 75,
 55 |     name: 'Tab'
 56 |   },
 57 |   KeyQ: {
 58 |     name: 'KeyQ'
 59 |   },
 60 |   KeyW: {
 61 |     name: 'KeyW'
 62 |   },
 63 |   KeyE: {
 64 |     name: 'KeyE'
 65 |   },
 66 |   KeyR: {
 67 |     name: 'KeyR'
 68 |   },
 69 |   KeyT: {
 70 |     name: 'KeyT'
 71 |   },
 72 |   KeyY: {
 73 |     name: 'KeyY'
 74 |   },
 75 |   KeyU: {
 76 |     name: 'KeyU'
 77 |   },
 78 |   KeyI: {
 79 |     name: 'KeyI'
 80 |   },
 81 |   KeyO: {
 82 |     name: 'KeyO'
 83 |   },
 84 |   KeyP: {
 85 |     name: 'KeyP'
 86 |   },
 87 |   BracketLeft: {
 88 |     name: 'BracketLeft'
 89 |   },
 90 |   BracketRight: {
 91 |     name: 'BracketRight'
 92 |   },
 93 |   Backslash: {
 94 |     dark: true,
 95 |     size: 75,
 96 |     name: 'Backslash'
 97 |   },
 98 |   Home: {
 99 |     dark: true,
100 |     name: 'Home'
101 |   },
102 |   CapsLock: {
103 |     dark: true,
104 |     size: 90,
105 |     name: 'CapsLock'
106 |   },
107 |   KeyA: {
108 |     name: 'KeyA'
109 |   },
110 |   KeyS: {
111 |     name: 'KeyS'
112 |   },
113 |   KeyD: {
114 |     name: 'KeyD'
115 |   },
116 |   KeyF: {
117 |     name: 'KeyF'
118 |   },
119 |   KeyG: {
120 |     name: 'KeyG'
121 |   },
122 |   KeyH: {
123 |     name: 'KeyH'
124 |   },
125 |   KeyJ: {
126 |     name: 'KeyJ'
127 |   },
128 |   KeyK: {
129 |     name: 'KeyK'
130 |   },
131 |   KeyL: {
132 |     name: 'KeyL'
133 |   },
134 |   Semicolon: {
135 |     name: 'Semicolon'
136 |   },
137 |   Quote: {
138 |     name: 'Quote'
139 |   },
140 |   Enter: {
141 |     dark: true,
142 |     size: 110,
143 |     name: 'Enter'
144 |   },
145 |   PageUp: {
146 |     dark: true,
147 |     name: 'PageUp'
148 |   },
149 |   ShiftLeft: {
150 |     dark: true,
151 |     size: 115,
152 |     name: 'ShiftLeft'
153 |   },
154 |   KeyZ: {
155 |     name: 'KeyZ'
156 |   },
157 |   KeyX: {
158 |     name: 'KeyX'
159 |   },
160 |   KeyC: {
161 |     name: 'KeyC'
162 |   },
163 |   KeyV: {
164 |     name: 'KeyV'
165 |   },
166 |   KeyB: {
167 |     name: 'KeyB'
168 |   },
169 |   KeyN: {
170 |     name: 'KeyN'
171 |   },
172 |   KeyM: {
173 |     name: 'KeyM'
174 |   },
175 |   Comma: {
176 |     name: 'Comma'
177 |   },
178 |   Period: {
179 |     name: 'Period'
180 |   },
181 |   Slash: {
182 |     name: 'Slash'
183 |   },
184 |   ShiftRight: {
185 |     dark: true,
186 |     size: 85,
187 |     name: 'ShiftRight'
188 |   },
189 |   ArrowUp: {
190 |     dark: true,
191 |     name: 'ArrowUp'
192 |   },
193 |   PageDown: {
194 |     dark: true,
195 |     name: 'PageDown'
196 |   },
197 |   ControlLeft: {
198 |     dark: true,
199 |     size: 75,
200 |     name: 'ControlLeft'
201 |   },
202 |   MetaLeft: {
203 |     dark: true,
204 |     name: 'MetaLeft'
205 |   },
206 |   AltLeft: {
207 |     dark: true,
208 |     size: 75,
209 |     name: 'AltLeft'
210 |   },
211 |   Space: {
212 |     dark: true,
213 |     size: 300,
214 |     name: 'Space'
215 |   },
216 |   AltRight: {
217 |     dark: true,
218 |     size: 75,
219 |     name: 'AltRight'
220 |   },
221 |   ContextMenu: {
222 |     dark: true,
223 |     size: 75,
224 |     name: 'ContextMenu'
225 |   },
226 |   ArrowLeft: {
227 |     dark: true,
228 |     name: 'ArrowLeft'
229 |   },
230 |   ArrowDown: {
231 |     dark: true,
232 |     name: 'ArrowDown'
233 |   },
234 |   ArrowRight: {
235 |     dark: true,
236 |     name: 'ArrowRight'
237 |   }
238 | }
239 | // char => code for navigator.keyboard API
240 | const codeMap = {
241 |   0: 'Digit0',
242 |   1: 'Digit1',
243 |   2: 'Digit2',
244 |   3: 'Digit3',
245 |   4: 'Digit4',
246 |   5: 'Digit5',
247 |   6: 'Digit6',
248 |   7: 'Digit7',
249 |   8: 'Digit8',
250 |   9: 'Digit9',
251 |   e: 'KeyE',
252 |   d: 'KeyD',
253 |   '-': 'Minus',
254 |   h: 'KeyH',
255 |   z: 'KeyZ',
256 |   '=': 'Equal',
257 |   n: 'KeyN',
258 |   p: 'KeyP',
259 |   ']': 'BracketRight',
260 |   '[': 'BracketLeft',
261 |   s: 'KeyS',
262 |   ';': 'Semicolon',
263 |   q: 'KeyQ',
264 |   o: 'KeyO',
265 |   '.': 'Period',
266 |   v: 'KeyV',
267 |   l: 'KeyL',
268 |   '`': 'Backquote',
269 |   g: 'KeyG',
270 |   j: 'KeyJ',
271 |   t: 'KeyT',
272 |   "'": 'Quote',
273 |   y: 'KeyY',
274 |   '\\': 'Backslash',
275 |   r: 'KeyR',
276 |   u: 'KeyU',
277 |   k: 'KeyK',
278 |   '/': 'Slash',
279 |   f: 'KeyF',
280 |   i: 'KeyI',
281 |   x: 'KeyX',
282 |   a: 'KeyA',
283 |   m: 'KeyM',
284 |   w: 'KeyW',
285 |   b: 'KeyB',
286 |   c: 'KeyC',
287 |   ',': 'Comma'
288 | }
289 | export const layout = {}
290 | if (navigator.keyboard) {
291 |   navigator.keyboard.getLayoutMap().then((map) => {
292 |     for (const [key, value] of map.entries()) {
293 |       layout[key] = codeMap[value]
294 |     }
295 |   })
296 | }
297 | 


--------------------------------------------------------------------------------