Skip to content

Commit ffca551

Browse files
marlo-longleymarlo-longley
committed
Try to recreate the settings playground
1 parent 4c80e38 commit ffca551

File tree

1 file changed

+172
-0
lines changed

1 file changed

+172
-0
lines changed

‎demo/playground.html‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<title>Mirador Playground</title>
7+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
8+
9+
<style>
10+
body {
11+
margin: 0;
12+
font-family: 'Roboto', sans-serif;
13+
display: flex;
14+
height: 100vh;
15+
background: #fafafa;
16+
}
17+
#editor {
18+
width: 40%;
19+
padding: 20px;
20+
box-sizing: border-box;
21+
border-right: 1px solid #e0e0e0;
22+
display: flex;
23+
flex-direction: column;
24+
background: white;
25+
}
26+
#editor h3 {
27+
font-weight: 400;
28+
color: rgba(0, 0, 0, 0.87);
29+
margin-top: 0;
30+
}
31+
#editor #config {
32+
flex: 1;
33+
width: 100%;
34+
font-family: 'Roboto Mono', monospace;
35+
font-size: 13px;
36+
padding: 12px;
37+
border: 1px solid #e0e0e0;
38+
border-radius: 4px;
39+
resize: none;
40+
}
41+
#editor #config:focus {
42+
outline: none;
43+
border-color: #1976d2;
44+
}
45+
#viewer {
46+
width: 60%;
47+
position: relative;
48+
}
49+
#editor button {
50+
font-family: 'Roboto', sans-serif;
51+
font-size: 0.875rem;
52+
font-weight: 500;
53+
line-height: 1.75;
54+
letter-spacing: 0.02857em;
55+
text-transform: uppercase;
56+
min-width: 64px;
57+
padding: 6px 16px;
58+
border-radius: 4px;
59+
border: none;
60+
background-color: #1976d2;
61+
color: white;
62+
cursor: pointer;
63+
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
64+
box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),
65+
0px 2px 2px 0px rgba(0,0,0,0.14),
66+
0px 1px 5px 0px rgba(0,0,0,0.12);
67+
}
68+
#editor button:hover {
69+
background-color: #1565c0;
70+
box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),
71+
0px 4px 5px 0px rgba(0,0,0,0.14),
72+
0px 1px 10px 0px rgba(0,0,0,0.12);
73+
}
74+
#editor button:active {
75+
box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),
76+
0px 8px 10px 1px rgba(0,0,0,0.14),
77+
0px 3px 14px 2px rgba(0,0,0,0.12);
78+
}
79+
#editor button:last-child {
80+
background-color: transparent;
81+
color: #1976d2;
82+
box-shadow: none;
83+
}
84+
#editor button:last-child:hover {
85+
background-color: rgba(25, 118, 210, 0.04);
86+
}
87+
#editor button:last-child:active {
88+
background-color: rgba(25, 118, 210, 0.12);
89+
}
90+
</style>
91+
</head>
92+
93+
<body>
94+
<div id="editor">
95+
<h3>Mirador Config</h3>
96+
<textarea id="config"></textarea>
97+
<div style="display: flex; gap: 10px; padding-top: 20px;">
98+
<button onclick="loadViewer()">Apply Config</button>
99+
<button onclick="resetConfig()">Reset to Default</button>
100+
</div>
101+
<div id="error" style="color: red; margin-top: 10px; display: none;"></div>
102+
</div>
103+
104+
<div id="viewer"></div>
105+
106+
<script type="module">
107+
import Mirador from '../src';
108+
import settings from '../src/config/settings';
109+
110+
let currentInstance = null;
111+
112+
// exclude complicated/internal settings
113+
const { theme, auth, availableLanguages, requests, translations, state, createGenerateClassNameOptions, ...prunedSettings } = settings;
114+
115+
// Use settings from config file as base, add minimal required config
116+
const defaultConfig = {
117+
id: "viewer",
118+
...prunedSettings,
119+
manifests: {
120+
"https://iiif.harvardartmuseums.org/manifests/object/299843": {
121+
"provider": "Harvard Art Museums"
122+
}
123+
},
124+
windows: [
125+
{
126+
"manifestId": "https://iiif.harvardartmuseums.org/manifests/object/299843",
127+
}
128+
],
129+
};
130+
131+
function showError(message) {
132+
const errorDiv = document.getElementById("error");
133+
errorDiv.textContent = message;
134+
errorDiv.style.display = "block";
135+
}
136+
137+
window.loadViewer = function() {
138+
const configText = document.getElementById("config").value;
139+
140+
try {
141+
const config = JSON.parse(configText);
142+
143+
// Properly unmount previous instance
144+
if (currentInstance) {
145+
currentInstance.unmount();
146+
currentInstance = null;
147+
}
148+
149+
// Clear the container
150+
document.getElementById("viewer").innerHTML = "";
151+
152+
// Create new instance with config
153+
currentInstance = Mirador.viewer(config);
154+
document.getElementById("error").style.display = "none";
155+
} catch (e) {
156+
showError("Invalid JSON: " + e.message);
157+
}
158+
}
159+
160+
window.resetConfig = function() {
161+
document.getElementById("config").value = JSON.stringify(defaultConfig, null, 2);
162+
window.loadViewer();
163+
}
164+
165+
// Initialize with default config
166+
document.getElementById("config").value = JSON.stringify(defaultConfig, null, 2);
167+
168+
// Load default on start
169+
window.loadViewer();
170+
</script>
171+
</body>
172+
</html>

0 commit comments

Comments
 (0)