*

2020-03-24 16:42:53 +09:00
parent 12339d315c
commit 8742548eaa
7 changed files with 177 additions and 27 deletions
--- a/scripts/lib/acels.js
+++ b/scripts/lib/acels.js
@@ -1,17 +1,42 @@
 'use strict'

 function Acels (client) {
+  this.el = document.createElement('ul')
+  this.el.id = 'acels'
+
+  this.order = []
  this.all = {}
  this.roles = {}
  this.pipe = null

-  this.install = (host = window) => {
-    host.addEventListener('keydown', this.onKeyDown, false)
-    host.addEventListener('keyup', this.onKeyUp, false)
+  this.install = (host = document.body) => {
+    window.addEventListener('keydown', this.onKeyDown, false)
+    window.addEventListener('keyup', this.onKeyUp, false)
+    host.appendChild(this.el)
+  }
+
+  this.start = () => {
+    const cats = this.sort()
+    for (const cat of this.order) {
+      const main = document.createElement('li')
+      const head = document.createElement('a')
+      head.innerText = cat
+      const subs = document.createElement('ul')
+      for (const item of cats[cat]) {
+        const option = document.createElement('li')
+        option.onclick = item.downfn
+        option.innerHTML = item.accelerator ? `${item.name} <i>${item.accelerator.replace('CmdOrCtrl+', '^')}</i>` : `${item.name}`
+        subs.appendChild(option)
+      }
+      main.appendChild(head)
+      main.appendChild(subs)
+      this.el.appendChild(main)
+    }
  }

  this.set = (cat, name, accelerator, downfn, upfn) => {
    if (this.all[accelerator]) { console.warn('Acels', `Trying to overwrite ${this.all[accelerator].name}, with ${name}.`) }
+    if (this.order.indexOf(cat) < 0) { this.order.push(cat) }
    this.all[accelerator] = { cat, name, downfn, upfn, accelerator }
  }

@@ -49,7 +74,7 @@ function Acels (client) {
    return accelerator
  }

-  this.pipe = (obj) => {
+  this.route = (obj) => {
    this.pipe = obj
  }

@@ -82,11 +107,15 @@ function Acels (client) {
  this.toString = () => {
    const cats = this.sort()
    let text = ''
-    for (const cat in cats) {
+    for (const cat of this.order) {
      for (const item of cats[cat]) {
-        text += item.accelerator ? `${cat}: ${item.name} | ${item.accelerator}\n` : ''
+        text += item.accelerator ? `${cat.padEnd(8, ' ')} ${item.name.padEnd(16, ' ')} ${item.accelerator.replace('CmdOrCtrl+', '^')}\n` : ''
      }
    }
    return text.trim()
  }
+
+  this.toggle = () => {
+    this.el.className = this.el.className === 'hidden' ? '' : 'hidden'
+  }
 }
--- a/scripts/lib/build.js
+++ b/scripts/lib/build.js
@@ -18,7 +18,9 @@ function cleanup (txt) {
  return output
 }

-const wrapper = `
+// Create release
+
+const release_body = `
 <!DOCTYPE html>
 <html lang="en">
 <html>
@@ -43,6 +45,33 @@ const wrapper = `
  </body>
 </html>`

-fs.writeFileSync('index.html', cleanup(wrapper))
+fs.writeFileSync('index.html', cleanup(release_body))

-console.log(`Built ${id}`)
+// Create debug
+
+const debug_body = `
+<!DOCTYPE html>
+<html lang="en">
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${id}</title>
+    ${styles.reduce((acc, item) => { return `${acc}<link rel="stylesheet" type="text/css" href="./links/${item}"/>\n` }, '')}
+    ${libs.reduce((acc, item) => { return `${acc}<script type="text/javascript" src="./scripts/lib/${item}"></script>\n` }, '')}
+    ${scripts.reduce((acc, item) => { return `${acc}<script type="text/javascript" src="./scripts/${item}"></script>\n` }, '')}
+  </head>
+  <body>
+    <script>
+      const client = new Client()
+      client.install(document.body)
+      window.addEventListener('load', () => { 
+        client.start()
+      })
+    </script>
+  </body>
+</html>`
+
+fs.writeFileSync('debug.html', debug_body)
+
+console.log(`Built ${id}`)