138 lines
4.2 KiB
JavaScript
138 lines
4.2 KiB
JavaScript
'use strict'
|
|
|
|
/* global localStorage */
|
|
/* global FileReader */
|
|
/* 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) => {
|
|
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)) {
|
|
console.log('Theme', 'Loading localStorage..')
|
|
this.load(storage)
|
|
return
|
|
}
|
|
}
|
|
this.load(this.active)
|
|
}
|
|
|
|
this.load = (data) => {
|
|
const theme = parse(data)
|
|
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
|
|
if (this.callback) {
|
|
this.callback()
|
|
}
|
|
}
|
|
|
|
this.reset = () => {
|
|
this.load(this.default)
|
|
}
|
|
|
|
this.get = (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
|
|
}
|
|
|
|
// Drag
|
|
|
|
this.drag = (e) => {
|
|
e.stopPropagation()
|
|
e.preventDefault()
|
|
e.dataTransfer.dropEffect = 'copy'
|
|
}
|
|
|
|
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 }
|
|
const reader = new FileReader()
|
|
reader.onload = function (e) {
|
|
themer.load(e.target.result)
|
|
}
|
|
reader.readAsText(file)
|
|
}
|
|
|
|
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')
|
|
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')
|
|
}
|
|
} catch (err) {
|
|
console.warn('Theme', 'Incomplete SVG Theme', err)
|
|
}
|
|
}
|
|
|
|
function isJson (text) {
|
|
try { JSON.parse(text); return true } catch (error) { return false }
|
|
}
|
|
|
|
function isHtml (text) {
|
|
try { new DOMParser().parseFromString(text, 'text/xml'); return true } catch (error) { return false }
|
|
}
|
|
}
|