Progress toward new controls

desktop/sources/scripts/lib/acels.js

@@ -0,0 +1,115 @@
+'use strict'
+
+function Acels () {
+  this.all = {}
+
+  this.install = (host = window) => {
+    host.addEventListener('keydown', this.onKeyDown, false)
+    host.addEventListener('keyup', this.onKeyUp, false)
+  }
+
+  this.set = (cat, name, accelerator, downfn, upfn) => {
+    if (this.all[accelerator]) { console.warn('Acels', `Trying to overwrite ${this.all[accelerator].name}, with ${name}.`) }
+    this.all[accelerator] = { cat, name, downfn, upfn, accelerator }
+  }
+
+  this.get = (accelerator) => {
+    return this.all[accelerator]
+  }
+
+  this.sort = () => {
+    const h = {}
+    for (const item of Object.values(this.all)) {
+      if (!h[item.cat]) { h[item.cat] = [] }
+      h[item.cat].push(item)
+    }
+    return h
+  }
+
+  this.convert = (event) => {
+    const accelerator = event.key.substr(0, 1).toUpperCase() + event.key.substr(1)
+    if ((event.ctrlKey || event.metaKey) && event.shiftKey) {
+      return `CmdOrCtrl+Shift+${accelerator}`
+    }
+    if (event.shiftKey) {
+      return `Shift+${accelerator}`
+    }
+    if (event.ctrlKey || event.metaKey) {
+      return `CmdOrCtrl+${accelerator}`
+    }
+    return accelerator
+  }
+
+  this.onKeyDown = (e) => {
+    const target = this.get(this.convert(e))
+    if (!target || !target.downfn) { return }
+    target.downfn()
+    e.preventDefault()
+  }
+
+  this.onKeyUp = (e) => {
+    const target = this.get(this.convert(e))
+    if (!target || !target.upfn) { return }
+    target.upfn()
+    e.preventDefault()
+  }
+
+  this.toMarkdown = () => {
+    const cats = this.sort()
+    let text = ''
+    for (const cat in cats) {
+      text += `\n### ${cat}\n\n`
+      for (const item of cats[cat]) {
+        text += `- \`${item.accelerator}\`: ${item.info}\n`
+      }
+    }
+    return text.trim()
+  }
+
+  this.toString = () => {
+    const cats = this.sort()
+    let text = ''
+    for (const cat in cats) {
+      for (const item of cats[cat]) {
+        text += `${cat}: ${item.name} | ${item.accelerator}\n`
+      }
+    }
+    return text.trim()
+  }
+
+  // Electron specifics
+
+  this.inject = (name = 'Untitled') => {
+    const app = require('electron').remote.app
+    const injection = []
+
+    injection.push({
+      label: name,
+      submenu: [
+        { label: 'About', click: () => { require('electron').shell.openExternal('https://github.com/hundredrabbits/' + name) } },
+        { label: 'Download Themes', click: () => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Themes') } },
+        { label: 'Fullscreen', accelerator: 'CmdOrCtrl+Enter', click: () => { app.toggleFullscreen() } },
+        { label: 'Hide', accelerator: 'CmdOrCtrl+H', click: () => { app.toggleVisible() } },
+        { label: 'Toggle Menubar', accelerator: 'Alt+H', click: () => { app.toggleMenubar() } },
+        { label: 'Inspect', accelerator: 'CmdOrCtrl+.', click: () => { app.inspect() } },
+        { label: 'Quit', accelerator: 'CmdOrCtrl+Q', click: () => { app.exit() } }
+      ]
+    })
+
+    const sorted = this.sort()
+    for (const cat of Object.keys(sorted)) {
+      const submenu = []
+      for (const option of sorted[cat]) {
+        if (option.role) {
+          submenu.push({ role: option.role })
+        } else if (option.type) {
+          submenu.push({ type: option.type })
+        } else {
+          submenu.push({ label: option.name, accelerator: option.accelerator, click: option.downfn })
+        }
+      }
+      injection.push({ label: cat, submenu: submenu })
+    }
+    app.injectMenu(injection)
+  }
+}

desktop/sources/scripts/lib/controller.js

@@ -1,72 +0,0 @@
-'use strict'
-
-function Controller () {
-  const fs = require('fs')
-  const { dialog, app } = require('electron').remote
-
-  this.menu = { default: {} }
-  this.mode = 'default'
-
-  this.app = require('electron').remote.app
-
-  this.start = function () {
-  }
-
-  this.add = function (mode, cat, label, fn, accelerator) {
-    if (!this.menu[mode]) { this.menu[mode] = {} }
-    if (!this.menu[mode][cat]) { this.menu[mode][cat] = {} }
-    this.menu[mode][cat][label] = { fn: fn, accelerator: accelerator }
-  }
-
-  this.addRole = function (mode, cat, label) {
-    if (!this.menu[mode]) { this.menu[mode] = {} }
-    if (!this.menu[mode][cat]) { this.menu[mode][cat] = {} }
-    this.menu[mode][cat][label] = { role: label }
-  }
-
-  this.clearCat = function (mode, cat) {
-    if (this.menu[mode]) { this.menu[mode][cat] = {} }
-  }
-
-  this.set = function (mode = 'default') {
-    this.mode = mode
-    this.commit()
-  }
-
-  this.format = function () {
-    const f = []
-    const m = this.menu[this.mode]
-    for (const cat in m) {
-      const submenu = []
-      for (const name in m[cat]) {
-        const option = m[cat][name]
-        if (option.role) {
-          submenu.push({ role: option.role })
-        } else {
-          submenu.push({ label: name, accelerator: option.accelerator, click: option.fn })
-        }
-      }
-      f.push({ label: cat, submenu: submenu })
-    }
-    return f
-  }
-
-  this.commit = function () {
-    this.app.injectMenu(this.format())
-  }
-
-  this.accelerator_for_key = function (key, menu) {
-    const acc = { basic: null, ctrl: null }
-    for (cat in menu) {
-      const options = menu[cat]
-      for (const id in options.submenu) {
-        const option = options.submenu[id]; if (option.role) { continue }
-        acc.basic = (option.accelerator.toLowerCase() === key.toLowerCase()) ? option.label.toUpperCase().replace('TOGGLE ', '').substr(0, 8).trim() : acc.basic
-        acc.ctrl = (option.accelerator.toLowerCase() === ('CmdOrCtrl+' + key).toLowerCase()) ? option.label.toUpperCase().replace('TOGGLE ', '').substr(0, 8).trim() : acc.ctrl
-      }
-    }
-    return acc
-  }
-}
-
-module.exports = new Controller()

desktop/sources/scripts/lib/source.js

@@ -0,0 +1,69 @@
+'use strict'
+
+/* global FileReader */
+/* global MouseEvent */
+
+function Source () {
+  this.cache = {}
+
+  this.install = () => {
+  }
+
+  this.start = () => {
+    this.new()
+  }
+
+  this.new = () => {
+    console.log('Source', 'New file..')
+    this.cache = {}
+  }
+
+  this.open = (ext, callback) => {
+    console.log('Source', 'Open file..')
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.onchange = (e) => {
+      const file = e.target.files[0]
+      if (file.name.indexOf(ext) < 0) { console.warn('Source', 'File is not ' + ext); return }
+      this.cache = file
+      this.load(this.cache, callback)
+    }
+    input.click()
+  }
+
+  this.save = (name, content, type = 'text/plain', callback) => {
+    this.saveAs(name, content, type, callback)
+  }
+
+  this.saveAs = (name, content, type = 'text/plain', callback) => {
+    console.log('Source', 'Save new file..')
+    this.download(name, content, type, callback)
+  }
+
+  this.revert = () => {
+
+  }
+
+  // I/O
+
+  this.load = (file, callback) => {
+    const reader = new FileReader()
+    reader.onload = (event) => {
+      const res = event.target.result
+      callback(res)
+    }
+    reader.readAsText(file, 'UTF-8')
+  }
+
+  this.download = (name, content, type) => {
+    console.info('Source', `Downloading ${name}(${type})`)
+    const link = document.createElement('a')
+    link.setAttribute('download', name)
+    if (type === 'image/png' || type === 'image/jpeg') {
+      link.setAttribute('href', content)
+    } else {
+      link.setAttribute('href', 'data:' + type + ';charset=utf-8,' + encodeURIComponent(content))
+    }
+    link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))
+  }
+}

desktop/sources/scripts/lib/theme.js

@@ -1,19 +1,25 @@
 'use strict'
 
-function Theme (_default) {
+/* global localStorage */
+/* global FileReader */
+/* global DOMParser */
+
+function Theme () {
   const themer = this
 
-  this.active = _default
+  this.default = { background: '#eee', f_high: '#000', f_med: '#999', f_low: '#ccc', f_inv: '#000', b_high: '#000', b_med: '#888', b_low: '#aaa', b_inv: '#ffb545' }
+  this.active = {}
 
   this.el = document.createElement('style')
   this.el.type = 'text/css'
 
-  this.install = function (host = document.body, callback) {
+  this.install = (host = document.body, callback) => {
     host.appendChild(this.el)
     this.callback = callback
   }
 
-  this.start = function () {
+  this.start = () => {
+    this.active = this.default
     console.log('Theme', 'Starting..')
     if (isJson(localStorage.theme)) {
       const storage = JSON.parse(localStorage.theme)
@@ -23,13 +29,13 @@ function Theme (_default) {
         return
       }
     }
-    this.load(_default)
+    this.load(this.active)
   }
 
-  this.load = function (data) {
+  this.load = (data) => {
     const theme = parse(data)
-    if (!validate(theme)) { console.warn('Theme', 'Not a theme', theme); return }
-    console.log('Theme', `Loaded theme!`)
+    if (!validate(theme)) { return }
+    console.log('Theme', 'Loaded theme!')
     this.el.innerHTML = `:root { --background: ${theme.background}; --f_high: ${theme.f_high}; --f_med: ${theme.f_med}; --f_low: ${theme.f_low}; --f_inv: ${theme.f_inv}; --b_high: ${theme.b_high}; --b_med: ${theme.b_med}; --b_low: ${theme.b_low}; --b_inv: ${theme.b_inv}; }`
     localStorage.setItem('theme', JSON.stringify(theme))
     this.active = theme
@@ -38,8 +44,12 @@ function Theme (_default) {
     }
   }
 
-  this.reset = function () {
-    this.load(_default)
+  this.reset = () => {
+    this.load(this.default)
+  }
+
+  this.get = (key) => {
+    return this.active[key]
   }
 
   function parse (any) {
@@ -49,18 +59,18 @@ function Theme (_default) {
 
   // Drag
 
-  this.drag = function (e) {
+  this.drag = (e) => {
     e.stopPropagation()
     e.preventDefault()
     e.dataTransfer.dropEffect = 'copy'
   }
 
-  this.drop = function (e) {
+  this.drop = (e) => {
     e.preventDefault()
     e.stopPropagation()
     const file = e.dataTransfer.files[0]
     if (!file || !file.name) { console.warn('Theme', 'Unnamed file.'); return }
-    if (file.name.indexOf('.thm') < 0 && file.name.indexOf('.svg') < 0) { console.warn('Theme', 'Skipped, not a theme'); return }
+    if (file.name.indexOf('.thm') < 0 && file.name.indexOf('.svg') < 0) { return }
     const reader = new FileReader()
     reader.onload = function (e) {
       themer.load(e.target.result)
@@ -68,10 +78,10 @@ function Theme (_default) {
     reader.readAsText(file)
   }
 
-  this.open = function () {
+  this.open = () => {
     const fs = require('fs')
     const { dialog, app } = require('electron').remote
-    let paths = dialog.showOpenDialog(app.win, { properties: ['openFile'], filters: [{ name: 'Themes', extensions: ['svg'] }] })
+    const paths = dialog.showOpenDialog(app.win, { properties: ['openFile'], filters: [{ name: 'Themes', extensions: ['svg'] }] })
     if (!paths) { console.log('Nothing to load'); return }
     fs.readFile(paths[0], 'utf8', function (err, data) {
       if (err) throw err
@@ -102,15 +112,15 @@ function Theme (_default) {
     const svg = new DOMParser().parseFromString(text, 'text/xml')
     try {
       return {
-        'background': svg.getElementById('background').getAttribute('fill'),
-        'f_high': svg.getElementById('f_high').getAttribute('fill'),
-        'f_med': svg.getElementById('f_med').getAttribute('fill'),
-        'f_low': svg.getElementById('f_low').getAttribute('fill'),
-        'f_inv': svg.getElementById('f_inv').getAttribute('fill'),
-        'b_high': svg.getElementById('b_high').getAttribute('fill'),
-        'b_med': svg.getElementById('b_med').getAttribute('fill'),
-        'b_low': svg.getElementById('b_low').getAttribute('fill'),
-        'b_inv': svg.getElementById('b_inv').getAttribute('fill')
+        background: svg.getElementById('background').getAttribute('fill'),
+        f_high: svg.getElementById('f_high').getAttribute('fill'),
+        f_med: svg.getElementById('f_med').getAttribute('fill'),
+        f_low: svg.getElementById('f_low').getAttribute('fill'),
+        f_inv: svg.getElementById('f_inv').getAttribute('fill'),
+        b_high: svg.getElementById('b_high').getAttribute('fill'),
+        b_med: svg.getElementById('b_med').getAttribute('fill'),
+        b_low: svg.getElementById('b_low').getAttribute('fill'),
+        b_inv: svg.getElementById('b_inv').getAttribute('fill')
       }
     } catch (err) {
       console.warn('Theme', 'Incomplete SVG Theme', err)