1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
'use strict'
function Theme (noir, pale) {
const themer = this
this.collection = { noir: noir, pale: pale }
this.active = this.collection.noir
this.el = document.createElement('style')
this.el.type = 'text/css'
this.install = function (host = document.body, callback) {
console.log('Theme', 'Installing..')
host.appendChild(this.el)
this.callback = callback
}
this.start = function () {
console.log('Theme', 'Starting..')
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(this.collection.noir)
}
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.active = theme
if (this.callback) {
this.callback()
}
}
this.reset = function () {
this.load(this.collection.noir)
}
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
}
// Defaults
this.noir = function () {
this.load(this.collection.noir)
}
this.pale = function () {
this.load(this.collection.pale)
}
// 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)
}
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 }
}
}
|
