tangent/memex
1
0
Fork 0
mirror of https://github.com/TangentFoxy/memex.git synced 2024-11-22 04:54:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update theme.js.

Browse Source
This commit is contained in:
kor 2018-11-02 00:22:26 +13:00
parent 3f1556c6bc
commit 9332e4d769
1 changed files with 66 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
docs/logic/lib/theme.js vendored
View File

@ -1,56 +1,47 @@
'use strict'; 'use strict'
function Theme(default_theme = {background: "#222", f_high: "#fff", f_med: "#777", f_low: "#444", f_inv: "#fff", b_high: "#000", b_med: "#aaa", b_low: "#000", b_inv: "#000"}) 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' }) {
{ const themer = this
let themer = this;
this.el = document.createElement("style") this.el = document.createElement('style')
this.el.type = 'text/css' this.el.type = 'text/css'
this.callback; this.callback
this.active; this.active
this.collection = { this.collection = {
default: default_theme, default: default_theme,
noir: {background: "#222", f_high: "#fff", f_med: "#777", f_low: "#444", f_inv: "#fff", b_high: "#000", b_med: "#aaa", b_low: "#000", b_inv: "#000" }, 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: "#aaa", f_inv: "#000", b_high: "#000", b_med: "#aaa", b_low: "#ccc", b_inv: "#fff" } 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) this.install = function (host = document.body, callback) {
{
console.log("Theme","Installing..")
host.appendChild(this.el) host.appendChild(this.el)
this.callback = callback this.callback = callback
} }
this.start = function() this.start = function () {
{ const storage = is_json(localStorage.theme) ? JSON.parse(localStorage.theme) : this.collection.default
console.log("Theme","Starting..")
let storage = is_json(localStorage.theme) ? JSON.parse(localStorage.theme) : this.collection.default;
this.load(!storage.background ? this.collection.default : storage) this.load(!storage.background ? this.collection.default : storage)
} }
this.save = function(theme) this.save = function (theme) {
{ this.active = theme
console.log("Theme","Saving..") localStorage.setItem('theme', JSON.stringify(theme))
this.active = theme;
localStorage.setItem("theme", JSON.stringify(theme));
} }
this.load = function(theme, fall_back = this.collection.noir) this.load = function (theme, fall_back = this.collection.noir) {
{ if (!theme || !theme.background) { console.warn('Theme', 'Not a theme', theme); return }
if(!theme || !theme.background){ console.warn("Theme","Not a theme",theme); return; }
this.save(theme); this.save(theme)
this.apply(theme); this.apply(theme)
if(this.callback){ if (this.callback) {
this.callback(); this.callback()
} }
} }
this.apply = function(theme) this.apply = function (theme) {
{
this.el.innerHTML = ` this.el.innerHTML = `
:root { :root {
--background: ${theme.background}; --background: ${theme.background};
@ -62,93 +53,80 @@ function Theme(default_theme = {background: "#222", f_high: "#fff", f_med: "#777
--b_med: ${theme.b_med}; --b_med: ${theme.b_med};
--b_low: ${theme.b_low}; --b_low: ${theme.b_low};
--b_inv: ${theme.b_inv}; --b_inv: ${theme.b_inv};
}`; }`
} }
this.parse = function(any) 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) }
let theme;
if(any && any.data){ return any; } return null
else if(any && is_json(any)){ return JSON.parse(any); }
else if(any && is_html(any)){ return this.extract(any); }
return null;
} }
this.extract = function(text) this.extract = function (text) {
{ const svg = new DOMParser().parseFromString(text, 'text/xml')
let svg = new DOMParser().parseFromString(text,"text/xml")
try {
try{
return { return {
"background": svg.getElementById("background").getAttribute("fill"), 'background': svg.getElementById('background').getAttribute('fill'),
"f_high": svg.getElementById("f_high").getAttribute("fill"), 'f_high': svg.getElementById('f_high').getAttribute('fill'),
"f_med": svg.getElementById("f_med").getAttribute("fill"), 'f_med': svg.getElementById('f_med').getAttribute('fill'),
"f_low": svg.getElementById("f_low").getAttribute("fill"), 'f_low': svg.getElementById('f_low').getAttribute('fill'),
"f_inv": svg.getElementById("f_inv").getAttribute("fill"), 'f_inv': svg.getElementById('f_inv').getAttribute('fill'),
"b_high": svg.getElementById("b_high").getAttribute("fill"), 'b_high': svg.getElementById('b_high').getAttribute('fill'),
"b_med": svg.getElementById("b_med").getAttribute("fill"), 'b_med': svg.getElementById('b_med').getAttribute('fill'),
"b_low": svg.getElementById("b_low").getAttribute("fill"), 'b_low': svg.getElementById('b_low').getAttribute('fill'),
"b_inv": svg.getElementById("b_inv").getAttribute("fill") 'b_inv': svg.getElementById('b_inv').getAttribute('fill')
}; }
} } catch (err) {
catch(err){ console.warn('Theme', 'Incomplete SVG Theme', err)
console.warn("Theme","Incomplete SVG Theme", err)
} }
} }
this.reset = function() this.reset = function () {
{ this.load(this.collection.default)
this.load(this.collection.default);
} }
// Defaults // Defaults
this.pale = function() this.pale = function () {
{
this.load(this.collection.pale) this.load(this.collection.pale)
} }
this.noir = function() this.noir = function () {
{
this.load(this.collection.noir) this.load(this.collection.noir)
} }
this.invert = function() this.invert = function () {
{ this.load(this.active.background == this.collection.noir.background ? this.collection.pale : this.collection.noir)
this.load(this.active.background == this.collection.noir.data.background ? this.collection.pale : this.collection.noir)
} }
// Drag // Drag
this.drag = function(e) this.drag = function (e) {
{ e.stopPropagation()
e.stopPropagation(); e.preventDefault()
e.preventDefault(); e.dataTransfer.dropEffect = 'copy'
e.dataTransfer.dropEffect = 'copy';
} }
this.drop = function(e) this.drop = function (e) {
{ e.preventDefault()
e.preventDefault(); e.stopPropagation()
e.stopPropagation();
let file = e.dataTransfer.files[0]; const file = e.dataTransfer.files[0]
if(!file || !file.name){ console.warn("Theme","Unnamed file."); return; } 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) { console.warn('Theme', 'Skipped, not a theme'); return }
let reader = new FileReader(); const reader = new FileReader()
reader.onload = function(e){ reader.onload = function (e) {
themer.load(themer.parse(e.target.result)); themer.load(themer.parse(e.target.result))
}; }
reader.readAsText(file); reader.readAsText(file)
} }
window.addEventListener('dragover',this.drag); window.addEventListener('dragover', this.drag)
window.addEventListener('drop', this.drop); window.addEventListener('drop', this.drop)
function is_json(text){ try{ JSON.parse(text); return true; } catch (error){ return false; } } 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; } } function is_html (text) { try { new DOMParser().parseFromString(text, 'text/xml'); return true } catch (error) { return false } }
} }