Atlas48/pointvec
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved controls

Browse Source
This commit is contained in:
Devine Lu Linvega
2018-12-22 10:07:46 +12:00
parent 5360cca5df
commit c0af5e7429
4 changed files with 102 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
desktop/sources/scripts/lib/theme.js
View File

@@ -1,20 +1,13 @@
'use strict'
function Theme (default_theme = { background: '#222', f_high: '#fff', f_med: '#ccc', f_low: '#999', f_inv: '#fff', b_high: '#888', b_med: '#666', b_low: '#444', b_inv: '#000' }) {
function Theme (_default) {
const themer = this
this.active = _default
this.el = document.createElement('style')
this.el.type = 'text/css'
this.callback
this.active
this.collection = {
default: default_theme,
noir: { background: '#222', f_high: '#fff', f_med: '#ccc', f_low: '#999', f_inv: '#fff', b_high: '#888', b_med: '#666', b_low: '#444', b_inv: '#000' },
pale: { background: '#e1e1e1', f_high: '#000', f_med: '#777', f_low: '#fff', f_inv: '#000', b_high: '#eee', b_med: '#999', b_low: '#ccc', b_inv: '#fff' }
}
this.install = function (host = document.body, callback) {
console.log('Theme', 'Installing..')
host.appendChild(this.el)
@@ -23,51 +16,91 @@ function Theme (default_theme = { background: '#222', f_high: '#fff', f_med: '#c
this.start = function () {
console.log('Theme', 'Starting..')
const storage = is_json(localStorage.theme) ? JSON.parse(localStorage.theme) : this.collection.default
this.load(!storage.background ? this.collection.default : storage)
if (isJson(localStorage.theme)) {
const storage = JSON.parse(localStorage.theme)
if (validate(storage)) {
console.log('Theme', 'Found theme in localStorage!')
this.load(storage)
return
}
}
this.load(_default)
}
this.save = function (theme) {
console.log('Theme', 'Saving..')
this.active = theme
this.load = function (data) {
const theme = parse(data)
if (!validate(theme)) { console.warn('Theme', 'Not a theme', theme); return }
console.log('Theme', `Loading theme with background ${theme.background}.`)
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.load = function (theme, fall_back = this.collection.noir) {
if (!theme || !theme.background) { console.warn('Theme', 'Not a theme', theme); return }
this.save(theme)
this.apply(theme)
this.active = theme
if (this.callback) {
this.callback()
}
}
this.apply = function (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.reset = function () {
this.load(_default)
}
this.parse = function (any) {
if (any && any.background) { return any } else if (any && any.data) { return any.data } else if (any && is_json(any)) { return JSON.parse(any) } else if (any && is_html(any)) { return this.extract(any) }
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.extract = function (text) {
const svg = new DOMParser().parseFromString(text, 'text/xml')
// Drag
this.drag = function (e) {
e.stopPropagation()
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
}
this.drop = function (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 }
const reader = new FileReader()
reader.onload = function (e) {
themer.load(e.target.result)
}
reader.readAsText(file)
}
this.open = function () {
const fs = require('fs')
const { dialog, app } = require('electron').remote
let paths = dialog.showOpenDialog(app.win, { properties: ['openFile'], filters: [{ name: 'Themes', extensions: ['svg'] }] })
if (!paths) { console.log('Nothing to load') }
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'),
@@ -85,51 +118,11 @@ function Theme (default_theme = { background: '#222', f_high: '#fff', f_med: '#c
}
}
this.reset = function () {
this.load(this.collection.default)
function isJson (text) {
try { JSON.parse(text); return true } catch (error) { return false }
}
// Defaults
this.pale = function () {
this.load(this.collection.pale)
function isHtml (text) {
try { new DOMParser().parseFromString(text, 'text/xml'); return true } catch (error) { return false }
}
this.noir = function () {
this.load(this.collection.noir)
}
this.invert = function () {
this.load(this.active.background == this.collection.noir.background ? this.collection.pale : this.collection.noir)
}
// Drag
this.drag = function (e) {
e.stopPropagation()
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
}
this.drop = function (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 }
const reader = new FileReader()
reader.onload = function (e) {
themer.load(themer.parse(e.target.result))
}
reader.readAsText(file)
}
window.addEventListener('dragover', this.drag)
window.addEventListener('drop', this.drop)
function is_json (text) { try { JSON.parse(text); return true } catch (error) { return false } }
function is_html (text) { try { new DOMParser().parseFromString(text, 'text/xml'); return true } catch (error) { return false } }
}