generated from daviddarnes/component-template
-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
324 lines (319 loc) · 10 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
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
<!DOCTYPE html>
<html lang="en" style="color-scheme: light dark">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Demo of slide-deck Web Component" />
<title>Slide-Deck Web Component Demo</title>
<link rel="stylesheet" href="slide-deck.css">
<style>body { margin: 0; }</style>
<script type="module" src="slide-deck.js"></script>
</head>
<body>
<slide-deck id="my-slides" key-control>
<header>
<div slide-canvas>
<h1>Slide-Deck Web Component</h1>
<p>
<a href="https://github.com/oddbird/slide-deck/">
github.com/oddbird/slide-deck/
</a>
</p>
<p>
View as…
<button set-view>grid</button>
<button set-view>slideshow</button>
<button set-view>speaker</button>
</p>
<p>
Use arrow keys to navigate. Or scroll instead.
It's just a web page!
</p>
</div>
<div slide-note>
We support speaker notes!
</div>
</header>
<div>
<h2>No Dependencies</h2>
<p>This is a stand-alone web component</p>
</div>
<div>
<div slide-canvas>
<h2>Progressive Enhancement</h2>
<p>Fallback to semantic HTML</p>
</div>
<div slide-note>
<p>
JavaScript is needed
for using keyboard shortcuts
or opening the control panel.
The markup and styles
are all there on first-load.
</p>
</div>
</div>
<div>
<div slide-canvas>
<h2>Just HTML</h2>
</div>
<div slide-note>
<h3>
Slide notes are also HTML
</h3>
<p>
In <button set-view='speaker'>speaker view</button>
the active slide-item will have a larger canvas size
and the font-size of an active slides speaker notes is increased
for easier readability.
</p>
<h4>
This is a heading level 4
</h4>
<p>
This paragraph exists to test a <strong>variety of content</strong>
within <em>slide-notes</em>. While some slides may not have any
notes at all, others may have extremely verbose notes and may
contain many details.
</p>
<blockquote>
<p>
Blockquote example within the slide-notes to test a few different
content types.
</p>
</blockquote>
</div>
</div>
<div>
<div slide-canvas>
<h2>Speaker Notes</h2>
<pre><code><div>
<div slide-canvas>
This slide has both a canvas
</div>
<div slide-note>
And a section for notes
</div>
</div></code></pre>
</div>
<div slide-note>
<p>
To add speaker notes,
a slide should contain
two children: using the
<code>slide-note</code> and <code>slide-canvas</code>
attributes.
</p>
<ul>
<li>
A slide with these internal parts
will be labeled
as a <code>slide-item="container"</code>
</li>
<li>
A slide without nested parts
will get both <code>slide-item="canvas"</code>
and also the <code>slide-canvas</code> attribute
</li>
</ul>
</div>
</div>
<div>
<h2>Keep it simple</h2>
<p>
If you don't need speaker notes,
don't worry about it.
Every child of <code>slide-deck</code>
is a slide without any extra markup.
</p>
</div>
<div><h2>Keyboard Shortcuts</h2></div>
<div>
<div slide-canvas>
<h3>Always available:</h3>
<ul>
<li><strong>command-k</strong>: Toggle control panel</li>
<li><strong>command-shift-enter</strong>: Start presentation (from first slide)</li>
<li><strong>command-enter</strong>: Resume presentation (from active slide)</li>
<li><strong>alt-enter</strong>: Join presentation in speaker view (from active slide)</li>
</ul>
<p>Windows and Linux users can use Ctrl instead of Command.</p>
</div>
<div slide-note>
<p>
Starting a presentation
takes you into the slideshow view,
with keyboard controls on,
and following active-slide changes in local-storage
(in case you are using multiple tabs for different views).
</p>
</div>
</div>
<div>
<div slide-canvas>
<h3>Key-Control On:</h3>
<ul>
<li>
<strong>N</strong>
/ <strong>right-arrow</strong>
/ <strong>down-arrow</strong>
/ <strong>page-down</strong>:
Next slide
</li>
<li>
<strong>P</strong>
/ <strong>left-arrow</strong>
/ <strong>up-arrow</strong>
/ <strong>page-up</strong>:
Previous slide
</li>
<li>
<strong>home</strong>:
First slide
</li>
<li>
<strong>end</strong>:
Last slide
</li>
<li>
<strong>W</strong>
/ <strong>,</strong>:
Toggle white screen
</li>
<li>
<strong>B</strong>
/ <strong>.</strong>:
Toggle black screen
</li>
<li>
<strong>escape</strong>:
Blur focused element, close control panel
</li>
</ul>
</div>
<div slide-note>
<p>
When the <code>key-control</code>
feature is turned on,
these extra shortcuts are available.
To turn them on by default,
add the <code>key-control</code> attribute
to your <code>slide-deck</code>.
</p>
</div>
</div>
<div>
<div slide-canvas>
<div key-control="none">
<label for="focus-trap">no key controls while focused</label>
<input id="focus-trap" type="text">
</div>
<div key-control="escape">
<label for="focus-trap-escape">only blur while focused</label>
<input id="focus-trap-escape" type="text">
</div>
</div>
<div slide-note>
<p>
Set the <code>key-control</code>
to <code>none</code> or <code>escape</code>
on nested elements,
to turn off navigation controls
while focus is on parts of a slide
(like form controls or links).
</p>
</div>
</div>
<div>
<h2>Works with Presentation Remotes</h2>
<p>
(at least the ones we've tested -
they just send keyboard shortcuts)
</p>
</div>
<div>
<div slide-canvas>
<h2>Add Your Own Controls</h2>
<p>
Using the
<a href="./slots.html">
<code>control-panel</code> slot
</a>
</p>
<p>(or style what's there with the provided parts)</p>
</div>
<div slide-note>
<p>
You can
<a href="./slots.html">slot-in your own</a>
control panel or blank slide template,
by providing <code>dialog</code> elements
with <code>slot="control-panel"</code>
or <code>slot="blank-slide"</code>.
</p>
</div>
</div>
<div>
<div slide-canvas>
<h2><code><button slide-event>previous<button></code></h2>
<div>
<button slide-event>previous</button>
<button slide-event>next</button>
<button slide-event>reset</button>
<hr>
<button set-view="slideshow" to-slide>
go to this slide, in slideshow view
</button>
<button to-slide="6">
go to slide 6
</button>
</div>
</div>
<div slide-note>
Buttons with the <code>slide-event</code> attribute
will send custom events to the <code>slide-deck</code>
when activated.
The event can be specified in the attribute
(<code>slide-event="next"</code>)
or it will be inferred from the inner text of the button.
</div>
</div>
<div>
<div slide-canvas>
<h2><code><button set-view>slideshow<button></code></h2>
<div>
<button set-view>slideshow</button>
<button set-view>grid</button>
<button set-view>speaker</button>
</div>
</div>
<div slide-note>
Buttons with the <code>set-view</code> attribute
will set the <code>slide-view</code> attribute
on the <code>slide-deck</code> when activated.
The view can be specified in the attribute
(<code>set-view="grid"</code>)
or it will be inferred from the inner text of the button.
</div>
</div>
<div>
<h2>Open Source</h2>
<p>
<a href="https://github.com/oddbird/slide-deck/">github.com/oddbird/slide-deck/</a>
</p>
</div>
<div><h2>To Do…</h2></div>
<div><h3>… Slide Templates</h3></div>
<div><h3>… CSS Themes</h3></div>
<div><h3>… Fullscreen mode</h3></div>
<div>
<h3>… [Your Request Here]</h3>
<p>
What features would you like to see?
Let us know in the
<a href="https://github.com/oddbird/slide-deck/issues/">GitHub Issues</a>
</p>
</div>
</slide-deck>
</body>
</html>