*

desktop/sources/scripts/lib/theme.js

@@ -5,56 +5,72 @@
 /* global DOMParser */
 
 function Theme () {
-  const themer = this
-
-  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 = (host = document.body, callback) => {
+  this.active = {}
+  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.install = (host = document.body) => {
+    window.addEventListener('dragover', this.drag)
+    window.addEventListener('drop', this.drop)
     host.appendChild(this.el)
-    this.callback = callback
   }
 
   this.start = () => {
-    this.active = this.default
     console.log('Theme', 'Starting..')
     if (isJson(localStorage.theme)) {
       const storage = JSON.parse(localStorage.theme)
-      if (validate(storage)) {
+      if (isValid(storage)) {
         console.log('Theme', 'Loading localStorage..')
         this.load(storage)
         return
       }
     }
-    this.load(this.active)
+    this.load(this.default)
   }
 
   this.load = (data) => {
-    const theme = parse(data)
-    if (!validate(theme)) { return }
+    const theme = this.parse(data)
+    if (!isValid(theme)) { console.warn('Theme', 'Invalid format'); 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}; }`
+    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
-    if (this.callback) {
-      this.callback()
-    }
   }
 
   this.reset = () => {
     this.load(this.default)
   }
 
-  this.get = (key) => {
+  this.read = (key) => {
     return this.active[key]
   }
 
-  function parse (any) {
-    if (any && any.background) { return any } else if (any && any.data) { return any.data } else if (any && isJson(any)) { return JSON.parse(any) } else if (any && isHtml(any)) { return extract(any) }
-    return null
+  this.parse = (any) => {
+    if (isValid(any)) { return any }
+    if (isJson(any)) { return JSON.parse(any) }
+    if (isHtml(any)) { return extract(any) }
   }
 
   // Drag
@@ -67,49 +83,21 @@ function Theme () {
 
   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) { return }
+    if (!file || !file.name) { console.warn('Theme', 'Could not read file.'); return }
+    if (file.name.indexOf('.svg') < 0) { console.warn('Theme', 'Not a SVG file.'); return }
     const reader = new FileReader()
-    reader.onload = function (e) {
-      themer.load(e.target.result)
+    reader.onload = (e) => {
+      this.load(e.target.result)
     }
     reader.readAsText(file)
+    e.stopPropagation()
   }
 
-  this.open = () => {
-    const fs = require('fs')
-    const { dialog, app } = require('electron').remote
-    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
-      themer.load(data)
-    })
-  }
-
-  window.addEventListener('dragover', this.drag)
-  window.addEventListener('drop', this.drop)
-
   // Helpers
 
-  function validate (json) {
-    if (!json) { return false }
-    if (!json.background) { return false }
-    if (!json.f_high) { return false }
-    if (!json.f_med) { return false }
-    if (!json.f_low) { return false }
-    if (!json.f_inv) { return false }
-    if (!json.b_high) { return false }
-    if (!json.b_med) { return false }
-    if (!json.b_low) { return false }
-    if (!json.b_inv) { return false }
-    return true
-  }
-
-  function extract (text) {
-    const svg = new DOMParser().parseFromString(text, 'text/xml')
+  function extract (xml) {
+    const svg = new DOMParser().parseFromString(xml, 'text/xml')
     try {
       return {
         background: svg.getElementById('background').getAttribute('fill'),
@@ -127,6 +115,20 @@ function Theme () {
     }
   }
 
+  function isValid (json) {
+    if (!json) { return false }
+    if (!json.background) { return false }
+    if (!json.f_high) { return false }
+    if (!json.f_med) { return false }
+    if (!json.f_low) { return false }
+    if (!json.f_inv) { return false }
+    if (!json.b_high) { return false }
+    if (!json.b_med) { return false }
+    if (!json.b_low) { return false }
+    if (!json.b_inv) { return false }
+    return true
+  }
+
   function isJson (text) {
     try { JSON.parse(text); return true } catch (error) { return false }
   }