Hacky combo editing

author: Nick Coutsos <[email protected]> 2020-08-27 17:38:03 -0400
committer: Nick Coutsos <[email protected]> 2020-08-27 17:38:22 -0400
commit: dc0caea37940473f6ebb8670399fa3e2ac11b5ae (patch)
tree: 319a80172098907f3fcfaab3cc0187d28cdec912 /application
parent: 24ac9f6a5830e29ea56622807cd3936bf5c0360a (diff)
download: keymap-editor-dc0caea37940473f6ebb8670399fa3e2ac11b5ae.tar.gz
keymap-editor-dc0caea37940473f6ebb8670399fa3e2ac11b5ae.zip
5 files changed, 113 insertions, 15 deletions
diff --git a/application/combo-editor.js b/application/combo-editor.js
new file mode 100644
index 0000000..9bac7e8
--- /dev/null
+++ b/application/combo-editor.js
@@ -0,0 +1,61 @@
+import { createComboKeyInput } from './combo-key-input.js'
+import { setKeycode } from './keymap.js'
+
+function createComboRow (def) {
+  const row = document.createElement('tr')
+  const actionCell = document.createElement('td')
+  const comboCell = document.createElement('td')
+  const deleteCell = document.createElement('td')
+  const action = document.createElement('span')
+  const selector = createComboKeyInput(def.combo)
+  const del = document.createElement('button')
+
+  action.classList.add('code')
+  setKeycode(action, def.action || 'KC_TRNS')
+  del.textContent = 'delete'
+  del.type = 'button'
+  del.addEventListener('click', () => {
+    row.parentNode && row.parentNode.removeChild(row)
+  })
+
+  actionCell.appendChild(action)
+  actionCell.style.textAlign = 'center'
+  comboCell.appendChild(selector)
+  deleteCell.appendChild(del)
+
+  row.appendChild(actionCell)
+  row.appendChild(comboCell)
+  row.appendChild(deleteCell)
+
+  return row
+}
+
+const comboEditor = document.querySelector('#combo-editor')
+comboEditor.querySelector('label').addEventListener('click', () => {
+  comboEditor.classList.toggle('closed')
+})
+
+comboEditor
+  .querySelector('tfoot button')
+  .addEventListener('click', () => {
+    comboEditor
+      .querySelector('tbody')
+      .appendChild(createComboRow())
+  })
+
+export function getComboDefinitions () {
+  return Array.from(comboEditor.querySelectorAll('tbody tr'))
+    .map(row => {
+      const action = row.querySelector('.code').dataset.code
+      const combo = Array.from(row.querySelectorAll('.chip .code'))
+        .map(chip => chip.dataset.code)
+
+      return { action, combo }
+    })
+}
+
+export function addComboDefinition (def) {
+  comboEditor
+    .querySelector('tbody')
+    .appendChild(createComboRow(def))
+}
diff --git a/application/combo-key-input.js b/application/combo-key-input.js
index 0bf2638..0e709e7 100644
--- a/application/combo-key-input.js
+++ b/application/combo-key-input.js
@@ -11,12 +11,12 @@ function chipRenderer (value) {
   return element
 }
 
-function createDomElements () {
+function createDomElements (values) {
   const container = document.createElement('div')
-  const chipInput = ChipInput({ chipRenderer })
+  const chipInput = ChipInput({ chipRenderer, initialValues: values })
   const results = document.createElement('ul')
 
-  container.classList.add('combo-editor')
+  container.classList.add('combo-selector')
   results.classList.add('search-results')
 
   container.appendChild(chipInput.element)
@@ -25,8 +25,8 @@ function createDomElements () {
   return { container, chipInput, results }
 }
 
-export function createComboKeyInput () {
-  const { container, chipInput, results } = createDomElements()
+export function createComboKeyInput (values = []) {
+  const { container, chipInput, results } = createDomElements(values)
   const input = chipInput.element.querySelector('input')
   let keycodes = []
 
@@ -63,11 +63,23 @@ export function createComboKeyInput () {
     }
   }
 
+  function activate (event) {
+    chipInput.element.classList.add('active')
+    event.stopPropagation()
+    input.focus()
+  }
+
+  function deactivate (event) {
+    chipInput.element.classList.remove('active')
+  }
+
   (async function init () {
     hideResults()
     input.focus()
     input.addEventListener('input', handleInput)
     results.addEventListener('click', handleSelect, { useCapture: true })
+    container.addEventListener('click', activate)
+    input.addEventListener('blur', deactivate)
 
     keycodes = await loadKeycodes()
   }())
diff --git a/application/index.html b/application/index.html
index 8ca15c8..aecbc69 100644
--- a/application/index.html
+++ b/application/index.html
@@ -10,10 +10,28 @@
 </head>
 <body>
 	<div id="layer-selector">
-		<p>Layers:</p>
+		<label>Layers:</label>
 		<ul></ul>
 		<button>Add layer</button>
 	</div>
+	<div id="combo-editor" class="closed">
+		<label>Combos:</label>
+		<table>
+			<thead>
+				<tr>
+					<th>Action</th>
+					<th>Combo</th>
+					<th>Delete</th>
+				</tr>
+			</thead>
+			<tbody></tbody>
+			<tfoot>
+				<tr>
+					<td></td><td></td><td><button type="button">new combo</button></td>
+				</tr>
+			</tfoot>
+		</table>
+	</div>
 	<div id="layers"></div>
 	<div id="search" style="display: none">
 		<p></p>
diff --git a/application/main.js b/application/main.js
index 2bbdb1a..c89ee83 100644
--- a/application/main.js
+++ b/application/main.js
@@ -3,14 +3,11 @@ import { loadKeymap, setKeycode } from './keymap.js'
 import { addLayer, selectLayer } from './layers.js'
 import { loadLayout } from './layout.js'
 import { createComboKeyInput } from './combo-key-input.js'
+import { addComboDefinition, getComboDefinitions } from './combo-editor.js'
 
 /* global Terminal */
 
 async function main() {
-  // const keycodes = await loadKeycodes()
-  // const keycodesIndex = keycodes.reduce((map, keycode) => Object.assign(map, { [keycode.code]: keycode }), {})
-  // const layout = await loadLayout()
-
   const layout = await loadLayout()
   const keymap = await loadKeymap()
   let active
@@ -26,7 +23,7 @@ async function main() {
 
   setInterval(() => socket.send('ping'), 10000)
 
-  document.body.appendChild(createComboKeyInput())
+  keymap.combos.map(addComboDefinition)
 
   search.onSelect(code => {
     if (active) {
@@ -64,6 +61,7 @@ async function main() {
   }
 
   function buildKeymap () {
+    const combos = getComboDefinitions()
     const layers = []
     for (let layer of [...document.querySelectorAll('#layers .layer')]) {
       const layerExport = []
@@ -74,7 +72,7 @@ async function main() {
       layers.push(layerExport)
     }
 
-    return Object.assign({}, keymap, { layers })
+    return Object.assign({}, keymap, { layers, combos })
   }
 
   function compile ({ flash = false } = {}) {
@@ -107,7 +105,7 @@ async function main() {
 
   document.querySelector('#export').addEventListener('click', () => {
     const keymap = buildKeymap()
-    const file = new File([JSON.stringify(newKeymap, null, 2)], 'default.json', {
+    const file = new File([JSON.stringify(keymap, null, 2)], 'default.json', {
       type: 'application/octet-stream'
     })
 
diff --git a/application/style.css b/application/style.css
index 11f43db..ec35326 100644
--- a/application/style.css
+++ b/application/style.css
@@ -118,6 +118,8 @@ ul.search-results {
 	font-family: monospace;
 	list-style-position: inside;
 	list-style-type: none;
+	max-height: 200px;
+	overflow: scroll;
 	padding: 4px;
 	background: rgba(0, 0, 0, 0.8);
 	border-radius: 4px;
@@ -189,9 +191,16 @@ ul.search-results {
   background-color: #914e0e
 }
 
-.combo-editor {
-  position: absolute;
+#combo-editor {
+  position: relative;
   z-index: 2;
+}
+#combo-editor label::before { display: inline-block; content: '▶︎'; transform: rotate(90deg); }
+#combo-editor.closed label::before { transform: rotate(0deg); }
+#combo-editor.closed table { display: none; }
 
+.combo-selector {
   background: rgba(255, 255, 255, 0.8);
 }
+.combo-selector .chip-input:not(.active) { border: none; }
+.combo-selector .chip-input:not(.active) input { display: none; }
author	Nick Coutsos <[email protected]>	2020-08-27 17:38:03 -0400
committer	Nick Coutsos <[email protected]>	2020-08-27 17:38:22 -0400
commit	dc0caea37940473f6ebb8670399fa3e2ac11b5ae (patch)
tree	319a80172098907f3fcfaab3cc0187d28cdec912 /application
parent	24ac9f6a5830e29ea56622807cd3936bf5c0360a (diff)
download	keymap-editor-dc0caea37940473f6ebb8670399fa3e2ac11b5ae.tar.gz keymap-editor-dc0caea37940473f6ebb8670399fa3e2ac11b5ae.zip