tangent/memex
1
0
Fork 0
mirror of https://github.com/TangentFoxy/memex.git synced 2024-12-17 19:14:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update hundredrabbits theme.js.

Browse Source
This commit is contained in:
kor 2018-09-14 15:09:12 +12:00
parent ac6c40bc45
commit a5855e93ef
1 changed files with 72 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,44 +1,57 @@
'use strict'; 'use strict';
function Theme() 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"})
{ {
let theme = 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 = null;
this.callback;
this.active;
this.collection = { this.collection = {
noir: {meta:{}, data: { 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" }}, default: default_theme,
pale: {meta:{}, data: { 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" }} 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" },
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" }
} }
this.active = this.collection.noir;
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()
{ {
this.load(localStorage.theme ? localStorage.theme : this.collection.noir, this.collection.noir); 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 = function(t, fall_back = this.collection.noir) this.save = function(theme)
{ {
let theme = is_json(t) ? JSON.parse(t).data : t.data; console.log("Theme","Saving..")
this.active = theme;
localStorage.setItem("theme", JSON.stringify(theme));
}
if(!theme || !theme.background){ this.load = function(theme, fall_back = this.collection.noir)
if(fall_back) { {
theme = fall_back.data; if(!theme || !theme.background){ console.warn("Theme","Not a theme",theme); return; }
} else {
return; this.save(theme);
this.apply(theme);
if(this.callback){
this.callback();
} }
} }
let css = ` this.apply = function(theme)
{
this.el.innerHTML = `
:root { :root {
--background: ${theme.background}; --background: ${theme.background};
--f_high: ${theme.f_high}; --f_high: ${theme.f_high};
@ -50,19 +63,44 @@ function Theme()
--b_low: ${theme.b_low}; --b_low: ${theme.b_low};
--b_inv: ${theme.b_inv}; --b_inv: ${theme.b_inv};
}`; }`;
}
this.active = theme; this.parse = function(any)
this.el.innerHTML = css; {
localStorage.setItem("theme", JSON.stringify({data: theme})); let theme;
if(this.callback){ if(any && any.data){ return any; }
this.callback(); 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)
{
let 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)
} }
} }
this.reset = function() this.reset = function()
{ {
this.load(this.collection.noir); this.load(this.collection.default);
} }
// Defaults // Defaults
@ -84,31 +122,33 @@ function Theme()
// Drag // Drag
this.drag_enter = function(e) this.drag = function(e)
{ {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
e.dataTransfer.dropEffect = 'copy'; e.dataTransfer.dropEffect = 'copy';
} }
this.drag = function(e) this.drop = function(e)
{ {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
let file = e.dataTransfer.files[0]; let file = e.dataTransfer.files[0];
if(!file.name || !file.name.indexOf(".thm") < 0){ console.log("Theme","Not a theme"); 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; }
let reader = new FileReader(); let reader = new FileReader();
reader.onload = function(e){ reader.onload = function(e){
theme.load(e.target.result); themer.load(themer.parse(e.target.result));
}; };
reader.readAsText(file); reader.readAsText(file);
} }
window.addEventListener('dragover',this.drag_enter); window.addEventListener('dragover',this.drag);
window.addEventListener('drop', this.drag); 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; } }
} }