-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
290 lines (250 loc) · 11.2 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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!doctype html>
<html lang="en" class="govuk-template">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Library finder widget</title>
<link rel="stylesheet" href="/govuk-frontend-5.4.0.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/default.min.css">
<style>
</style>
</head>
<body class="govuk-template__body">
<a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
<header class="govuk-header" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
<a href="/" class="govuk-header__link govuk-header__link--homepage">
Library finder
</a>
</div>
</div>
</header>
<div class="govuk-width-container">
<div class="govuk-phase-banner">
<p class="govuk-phase-banner__content">
<strong class="govuk-tag govuk-phase-banner__content__tag">
Prototype
</strong>
<span class="govuk-phase-banner__text">
This is a new service. Help us improve it and <a class="govuk-link"
href="mailto:info@librarieshacked.org">give your feedback by email</a>.
</span>
</p>
</div>
<hr class="govuk-section-break govuk-section-break--m">
<span class="govuk-caption-l">Add a library finder to your website</span>
<h1 class="govuk-heading-l">Library finder instructions</h1>
<p class="govuk-body" id="main-content">
A widget is a small component that can be placed on any website. This widget helps users find their nearest public
library. The data is provided by the <a class="govuk-link" href="https://www.libraryon.org"
target="_blank">LibraryOn API</a>.
</p>
<p class="govuk-body">
You can either embed the widget as it comes, or customise the width, height, and primary/secondary colours. Once
you are done with customisations, refresh and copy the code at the bottom of the page, to paste into your
website's HTML.
</p>
<p class="govuk-body">
If you have any problems, or would like to give feedback, please <a class="govuk-link"
href="mailto:info@librarieshacked.org">get in touch</a>.
</p>
<hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
<span class="govuk-caption-l">See it in action</span>
<h2 class="govuk-heading-l">Demo</h2>
<p class="govuk-body">
The demo shows the widget with the default colours and a width of 320px and a height of 500px.
</p>
<script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
<div id="libraryfinder-widget" data-width="320px" data-height="500px" data-primary="#63117b"
data-secondary="#f0e7da" data-service="" data-region="">
</div>
<hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
<span class="govuk-caption-l">Make it work for your website</span>
<h2 class="govuk-heading-l">Customisation</h2>
<p class="govuk-body">
After you have made your customisations for size and colours, click the 'Refresh code' button to update the code
snippet at the bottom of the page.
</p>
<div class="govuk-accordion" data-module="govuk-accordion" id="accordion-default">
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h3 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="accordion-default-heading-1">
Size
</span>
</h3>
</div>
<div id="accordion-default-content-1" class="govuk-accordion__section-content">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
<h4 class="govuk-fieldset__heading">
Set the width and height
</h4>
</legend>
<p class="govuk-body">
By default the widget will be 100% width (filling whatever container it is placed in), and 500px high.
You
can adjust these values below. It is not recommended to go below 320px in width or 500px in height.
</p>
<div class="govuk-form-group">
<h4 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--2" for="width">
What is the width in pixels?
</label>
<div id="width-hint" class="govuk-hint">
For example, enter 400 for 400px
</div>
</h4>
<div class="govuk-input__wrapper">
<input class="govuk-input govuk-input--width-4" id="width" name="width" type="text" spellcheck="false">
<div class="govuk-input__suffix" aria-hidden="true">px</div>
</div>
</div>
<div class="govuk-form-group">
<h4 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--2" for="height">
What is the height in pixels?
</label>
<div id="height-hint" class="govuk-hint">
For example, enter 500 for 500px
</div>
</h4>
<div class="govuk-input__wrapper">
<input class="govuk-input govuk-input--width-4" id="height" name="height" type="text"
spellcheck="false">
<div class="govuk-input__suffix" aria-hidden="true">px</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h3 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="accordion-default-heading-2">
Colours
</span>
</h3>
</div>
<div id="accordion-default-content-2" class="govuk-accordion__section-content">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
<h4 class="govuk-fieldset__heading">
Set a primary and secondary colour
</h4>
</legend>
<div class="govuk-form-group">
<h4 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--2" for="primary">
What is the primary colour?
</label>
<div id="primary-hint" class="govuk-hint">
Use the colour picker to select a colour that will be used for the main elements of the widget
</div>
</h4>
<div class="govuk-input__wrapper">
<input class="govuk-input govuk-input--width-5" id="primary" name="primary" type="color"
spellcheck="false" value="#63117b">
</div>
</div>
<div class="govuk-form-group">
<h3 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--2" for="secondary">
What is the secondary colour?
</label>
<div id="secondary-hint" class="govuk-hint">
Use the colour picker to select a colour that will be used for secondary elements of the widget
</div>
</h3>
<div class="govuk-input__wrapper">
<input class="govuk-input govuk-input--width-5" id="secondary" name="secondary" type="color"
spellcheck="false" value="#f0e7da">
</div>
</div>
</fieldset>
</div>
</div>
</div>
<span class="govuk-caption-l">Take a copy of your embed code</span>
<h1 class="govuk-heading-l">Code</h1>
<a id="btn_refreshcode" href="#" role="button" draggable="false" class="govuk-button govuk-button--start"
data-module="govuk-button">
Refresh code
</a>
<pre>
<code id="code_libraryfinder" class="language-html"></code>
</pre>
</div>
<footer class="govuk-footer">
<div class="govuk-width-container">
<div class="govuk-footer__meta">
<div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
<span class="govuk-footer__licence-description">
All widget code is open source under the
<a class="govuk-footer__link"
href="https://github.com/LibrariesHacked/libraryfinder-widget/blob/main/LICENSE" rel="license">MIT
Licence</a> and can be found on <a class="govuk-footer__link"
href="https://github.com/LibrariesHacked/libraryfinder-widget/">GitHub</a>
</span>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/main.jsx"></script>
<script type="module" src="/govuk-frontend-5.4.0.min.js"></script>
<script type="module">
import { initAll } from '/govuk-frontend-5.4.0.min.js?url'
initAll()
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"
integrity="sha512-6yoqbrcLAHDWAdQmiRlHG4+m0g/CT/V9AGyxabG8j7Jk8j3r3K6due7oqpiRMZqcYe9WM2gPcaNNxnl2ux+3tA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
const defaultWidth = '100%';
const defaultHeight = '500px';
const defaultPrimary = '#632279';
const defaultSecondary = '#f8ab89';
const libraryFinderWidget = document.getElementById('libraryfinder-widget');
const refreshCodeButton = document.getElementById('btn_refreshcode');
const codeLibraryFinder = document.getElementById('code_libraryfinder');
refreshCodeButton.addEventListener('click', (event) => {
event.preventDefault();
refreshCode();
});
const refreshCode = () => {
const customWidth = document.getElementById('width').value;
const customHeight = document.getElementById('height').value;
const customPrimary = document.getElementById('primary').value;
const customSecondary = document.getElementById('secondary').value;
const width = customWidth ? customWidth + 'px' : defaultWidth;
const height = customHeight ? customHeight + 'px' : defaultHeight;
const primary = customPrimary || defaultPrimary;
const secondary = customSecondary || defaultSecondary;
const embedScript = `<script>
(function () {
var script = document.createElement('script');
script.type = 'module';
script.async = true;
script.src = 'https://widget.librarymap.co.uk/libraryfinder-widget.js';
var firstTag = document.getElementsByTagName('script')[0];
firstTag.parentNode.insertBefore(script, firstTag);
})();
<\/script>
<div id="libraryfinder-widget"
data-width="${width}"
data-height="${height}"
data-primary="${primary}"
data-secondary="${secondary}">
</div>`;
if (codeLibraryFinder.dataset.highlighted) {
delete codeLibraryFinder.dataset.highlighted;
}
codeLibraryFinder.textContent = embedScript;
hljs.highlightBlock(codeLibraryFinder)
};
refreshCode();
</script>
<script></script>
</body>
</html>