-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
152 lines (141 loc) · 4.76 KB
/
index.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
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RAMP4 Config Editor</title>
<script>
let rampConfig = undefined
let started = false
let isFile = false
let isError = false
function showHelpInstructions() {
alert("Click the start editor button to start the app with an empty config. Alternately, you may upload a default config file in json format via the upload config button and then click start editor to start the app with your own default config. At any point in the session, you may download the current config in json format via the download config button.")
}
function openFileUpload() {
document.getElementById('upload-config').click()
}
function onFileUpload(file) {
const reader = new FileReader()
reader.onload = onReaderLoad
reader.readAsText(file);
}
function onReaderLoad(event){
isFile = true
document.getElementById('upload-config').value = ''
setStartingConfig(event.target.result)
}
function setStartingConfig(config) {
try {
rampConfig = JSON.parse(config)
if (isFile) {
alert("Successfully uploaded config.")
}
isError = false
} catch (error) {
if (isFile) {
alert("An error occurred. Please ensure that the config is in json format.")
}
else {
isError = true
}
}
}
function toggleInput() {
document.getElementById('config-input').hidden = !document.getElementById('config-input').hidden
const button = document.getElementById('buttons').children[2]
button.innerHTML = document.getElementById('config-input').hidden ? 'Input Config' : 'Hide Input'
}
function onConfigInput(config) {
isFile = false
setStartingConfig(config)
}
function startEditor() {
if (isError) {
alert("An error occurred. Please ensure that the config is in json format.")
return;
}
const loopy = setInterval(() => {
if (window.ramp4EditorAPI) {
clearInterval(loopy)
window.ramp4EditorAPI.initialize(rampConfig)
started = true
}
})
}
function downloadConfig(){
if (!started) {
alert('Cannot download config without starting the app.');
return;
}
const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(window.ramp4EditorAPI.getConfig()));
const downloadAnchorNode = document.createElement('a');
downloadAnchorNode.setAttribute("href", dataStr);
downloadAnchorNode.hidden = true
downloadAnchorNode.setAttribute("download", "ramp_config.json");
document.body.appendChild(downloadAnchorNode); // required for firefox
downloadAnchorNode.click();
downloadAnchorNode.remove();
}
</script>
</head>
<body>
<div id="container">
<div id="buttons">
<button onclick="showHelpInstructions()">Help Instructions</button>
<button onclick="openFileUpload()">Upload Config</button>
<button onclick="toggleInput()">Input Config</button>
<input oninput="onFileUpload(this.files[0])" type="file" id="upload-config" hidden accept=".json" />
<button onclick="downloadConfig()">Download Config</button>
<button onclick="startEditor()">Start Editor</button>
</div>
<textarea id="config-input" hidden oninput="onConfigInput(this.value)"></textarea>
<div id="app"></div>
</div>
<script type="module" src="src/main.ts"></script>
<style>
body {
margin: 0;
}
#container {
display: flex;
flex-direction: column;
padding: 8px;
height: calc(100vh - 16px);
gap: 16px;
}
#app {
flex-grow: 1;
overflow-y: scroll;
}
#buttons {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
#buttons button, #done-button {
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
sans-serif, Apple Color Emoji, Segoe UI Emoji;
background-color: black;
color: white;
padding: 8px;
width: 20%;
border-radius: 0.5rem;
height: 100%;
cursor: pointer;
font-size: 18px;
}
#config-input {
min-height: 200px;
padding: 8px;
}
#buttons button:hover {
opacity: 0.8;
}
#buttons button:focus-visible {
opacity: 0.8;
}
</style>
</body>
</html>