-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathoverride-editor.html
149 lines (142 loc) · 5.67 KB
/
override-editor.html
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<title>OlamREEE override editor</title>
<meta charset="UTF-8">
<meta name="description" content="A tool to brainstorm a periodic table for the elements on planet Olam."/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="../sheep2.css">
<link rel="stylesheet" href="./literally-everything.css">
<script src="../sheep2.js" charset="utf-8"></script>
<style media="screen">
body {
padding: 20px;
box-sizing: border-box;
overflow: auto;
}
</style>
</head>
<body>
<a href="./" class="close" id="back">back</a>
<h1><code>override</code> editor</h1>
<p>Add your predicted properties and elements here!</p>
<p>To see the format of certain properties (eg the values used for Special characteristics), you can look at the JSON source <a id="source">here</a>.</p>
<p><button class="menu-btn" id="add">add element</button></p>
<table id="table">
<tr id="heading"><th>Replace?</th><th>Name</th><th>Symbol*</th></tr>
</table>
<p>* required</p>
<p><a id="output" class="menu-btn" href="./">output link (click me when done)</a></p>
<p>If you want to override properties of an existing element, leave the other inputs blank; you only need to specify the atomic <em>symbol</em>.</p>
<p>Check Replace? if you want to actually overwrite the elements; otherwise OlamREEE will show your changes.</p>
<p>The output link uses a different save code because unfortunately overrides aren't compatible, so you'll have to manually remake your table of elements.</p>
<p>See <a href="./override-demo.md">here</a> for more details.</p>
<script type="text/javascript">
// URL PARAMETERS
// source - where to load JSON data from
// override - base64 encoded JSON to override/add properties (+: -; =: _)
const params = {};
if (window.location.search) {
window.location.search.slice(1).split('&').forEach(entry => {
const equalSignLoc = entry.indexOf('=');
if (~equalSignLoc) {
params[entry.slice(0, equalSignLoc)] = entry.slice(equalSignLoc + 1);
} else {
params[entry] = true;
}
});
}
const SOURCE = params.source ? params.source : './olam';
function init([metadata]) {
const table = document.getElementById('table');
const tblHead = document.getElementById('heading');
const output = document.getElementById('output');
const addBtn = document.getElementById('add');
delete metadata._DEFAULT_SORT_;
const props = Object.keys(metadata).map(prop => {
const th = document.createElement('th');
th.textContent = metadata[prop]['show-btn'];
tblHead.appendChild(th);
return {prop: prop, number: metadata[prop].key.type === 'range', small: metadata[prop].short};
});
props.splice(0, 0, {prop: 'name', number: false, small: false}, {prop: 'symbol', number: false, small: true});
const elems = [];
function generate() {
const overrides = [];
elems.forEach(elem => {
const output = {};
if (elem[0].checked)
output._REPLACE_ = true;
elem.slice(1).forEach((input, index) => {
if (input.value) {
if (props[index].number)
output[props[index].prop] = +input.value;
else
output[props[index].prop] = input.value;
}
})
overrides.push(output);
});
output.href = `./?source=${SOURCE}&key=overriden&override=${btoa(JSON.stringify(overrides)).replace(/=/g, '_').replace(/\+/g, '-')}`;
}
addBtn.addEventListener('click', e => {
const tr = document.createElement('tr');
const checkTd = document.createElement('td');
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkTd.appendChild(checkbox);
tr.appendChild(checkTd);
const inputs = props.map(prop => {
const td = document.createElement('td');
const input = document.createElement('input');
if (prop.small) input.classList.add('small');
input.type = prop.number ? 'number' : 'text';
input.addEventListener('input', generate);
td.appendChild(input);
tr.appendChild(td);
return input;
});
inputs.splice(0, 0, checkbox);
const btnTd = document.createElement('td');
const button = document.createElement('button');
button.textContent = 'remove';
button.classList.add('menu-btn');
button.addEventListener('click', e => {
table.removeChild(tr);
elems.splice(elems.indexOf(inputs), 1);
generate();
}, {once: true});
btnTd.appendChild(button);
tr.appendChild(btnTd);
table.appendChild(tr);
elems.push(inputs);
generate();
});
if (params.override) try {
const overrides = JSON.parse(atob(params.override.replace(/_/g, '=').replace(/-/g, '+')));
const replace = overrides[0] === 'replace';
if (replace) overrides.splice(0, 1);
overrides.forEach(elem => {
addBtn.click();
const [checkbox, ...inputs] = elems[elems.length - 1];
checkbox.checked = replace || elem._REPLACE_;
Object.keys(elem).forEach(prop => {
const propIndex = props.findIndex(propObj => propObj.prop === prop);
if (~propIndex) inputs[propIndex].value = elem[prop];
});
});
generate();
} catch (e) {
console.log(e);
}
document.body.classList.add(localStorage.getItem('[olamreee] theme') === 'dark' ? 'dark' : 'light');
document.getElementById('source').href = `${SOURCE}.json`;
document.getElementById('back').href = './' + window.location.search;
}
Promise.all([
fetch(`${SOURCE}-metadata.json`).then(res => res.json()),
new Promise(res => document.addEventListener('DOMContentLoaded', res, {once: true}))
]).then(init);
</script>
</body>
</html>