-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgui_editor.html
133 lines (118 loc) · 5.32 KB
/
gui_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
<!-- There's no harm in users accessing this page, but you can remove it if you'd like -->
<!-- In GH Pages you can also rename it to start with an `_` and it will 404 -->
<!DOCTYPE html>
<html>
<head>
<title>LinkStache Editor</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<script src="https://cdn.jsdelivr.net/npm/culori"></script>
<script>
let dataFetch = fetch('./data.json').then((response) => response.json());
let schemaFetch = fetch('./data.schema.json').then((response) => response.json());
document.addEventListener('DOMContentLoaded', () => {
Promise.all([dataFetch, schemaFetch]).then(([data, schema]) => setup(data, schema));
});
function setup(data, schema) {
var editor = new JSONEditor(document.getElementById('editor_holder'), {
schema: schema,
disable_edit_json: true,
disable_properties: true,
disable_collapse: true,
theme: 'spectre',
iconlib: 'fontawesome5'
});
document.getElementById('submit').addEventListener('click', function () {
navigator.clipboard.writeText(JSON.stringify(editor.getValue(), null, 2));
console.log(editor.getValue());
});
// pass changes to iframe
editor.on('change',() => {
if (editor.validate().length == 0) {
document.getElementById("preview").contentWindow.postMessage(editor.getValue(), "*")
}
});
editor.on('ready', function() {
if (Object.keys(data).length !== 0) {
editor.setValue(data)
}
editor.watch('root.style.gradientBg', () => setGradientSecondColor(data, editor));
editor.watch('root.style.bgColor', () => setGradientSecondColor(data, editor));
});
}
function setGradientSecondColor(data, editor) {
try {
if (!editor.getEditor("root.style.gradientBg").getValue())
return;
const bgColor = editor.getEditor('root.style.bgColor').getValue();
if (bgColor == data.style.bgColor && editor.getEditor('root.style.bgColor2') !== null
&& editor.getEditor('root.style.bgColor2').getValue() !== "#000000")
return;
const hslBase = culori.converter("hsl")(bgColor)
const hslSecond = calculateSecondColor(hslBase)
editor.getEditor("root.style.bgColor2").setValue(culori.formatHex(hslSecond))
} catch (error) {
console.log(error)
}
}
function calculateSecondColor(firstColor) {
// this is somewhat close to what linktree does. Not clear how the saturation is calculated
// hue and lightness are generally near the average changes used below
h = (360 + firstColor.h - 35) % 360
if (firstColor.s == 1 || firstColor.s == 0) {
s = firstColor.s
}
else {
s = Math.min(1, Math.max(0, firstColor.l < 0.45 ? firstColor.s - .15 : firstColor.s + .2))
}
l = Math.min(firstColor.l + 0.15, 1)
return {"mode": "hsl", "h": h, "s": s, "l": l}
}
</script>
<style>
#submit {
position: relative;
z-index: 1;
}
.preview-wrapper {
position: fixed;
top: 50%;
aspect-ratio: 1 / 2;
height: auto;
width: auto;
transform: translate(0%, -50%);
}
#preview {
border: 16px solid black;
border-radius: 48px;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container grid-xl">
<div class="columns col-gapless" style="height: 100vh;">
<div class="column col-lg-auto">
<div class="p-2">
<h1>GUI Data Editor</h1>
<p class="mb-0">On Load, the current values from <code>data.json</code> are used.</p>
<p class="mb-0">Make any desired edits and see the changes appear in the preview (requires large screen).</p>
<p>Then click the copy button and paste the result back into <code>data.json</code> to update the site contents.</p>
<button id='submit' class="btn btn-lg btn-primary float-right">Copy Data to Clipboard</button>
<div id='editor_holder'></div>
</div>
</div>
<div class="divider-vert hide-lg"></div>
<div class="column col-4 hide-lg p-2 flex-centered">
<div class="preview-wrapper">
<iframe id="preview" src="index.html"></iframe>
</div>
</div>
</div>
</div>
</body>
</html>