-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathframework.html
121 lines (119 loc) · 4.6 KB
/
framework.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
<!doctype html>
<html>
<head>
<title>X-Tag</title>
<link href="roboto/roboto.css" rel="stylesheet">
<link href="telex/telex.css" rel="stylesheet">
<link href="slideshow.css" rel="stylesheet">
<link href="highlight.css" rel="stylesheet">
<link href="themes.css" rel="stylesheet">
</head>
<body>
<curtissimo-slideshow auto-resize color="brown">
<curtissimo-slide>
<h1>Let's Build Something</h1>
</curtissimo-slide>
<curtissimo-slide>
<h1>Want to Follow Along?</h1>
<p>http://bit.ly/24OVKUD</p>
<p>
https://github.com<br>
/curtissimo/hdnug-201605-starter
</p>
</curtissimo-slide>
<curtissimo-slide>
<h1>Features</h1>
<ul>
<li>slideshow theme</li>
<li>color override for slide</li>
<li>click advances presentation</li>
<li>remember current slide</li>
<li>keyboard navigation</li>
<li>resize content to window</li>
</ul>
</curtissimo-slide>
<curtissimo-slide color="pink">
<h1>This'd Be Good</h1>
<table class="highlighttable">
<tr>
<td class="code">
<div class="highlight">
<pre><span></span><span class="p"><</span><span class="nt">curtissimo-slideshow</span> <span class="na">auto-resize</span> <span class="na">color</span><span class="o">=</span><span class="s">"brown"</span><span class="p">></span>
<span class="c"><!-- more slides here --></span>
<span class="p"><</span><span class="nt">curtissimo-slide</span> <span class="na">color</span><span class="o">=</span><span class="s">"pink"</span><span class="p">></span>
<span class="p"><</span><span class="nt">h1</span><span class="p">></span>This'd Be Good<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
<span class="c"><!-- code snippet here --></span>
<span class="p"></</span><span class="nt">curtissimo-slide</span><span class="p">></span>
<span class="c"><!-- more slides here --></span>
<span class="p"></</span><span class="nt">curtissimo-slideshow</span><span class="p">></span>
</pre>
</div>
</td>
</tr>
</table>
</curtissimo-slide>
<curtissimo-slide>
<h1>Define Elements</h1>
<table class="highlighttable">
<tr>
<td class="code">
<div class="highlight">
<pre><span></span><span class="nx">xtag</span><span class="p">.</span><span class="nx">register</span><span class="p">(</span><span class="s1">'curtissimo-slide'</span><span class="p">,</span> <span class="p">{});</span>
<span class="nx">xtag</span><span class="p">.</span><span class="nx">register</span><span class="p">(</span><span class="s1">'curtissimo-slideshow'</span><span class="p">,</span> <span class="p">{});</span>
</pre>
</div>
</td>
</tr>
</table>
</curtissimo-slide>
<curtissimo-slide>
<h1>Slideshow Theme</h1>
<ul>
<li>expand slideshow to cover screen</li>
<li>change to appropriate color</li>
</ul>
</curtissimo-slide>
<curtissimo-slide>
<h1>Color Override for Slide</h1>
<ul>
<li>query current slide for color</li>
<li>set slideshow to color, if exists</li>
</ul>
</curtissimo-slide>
<curtissimo-slide>
<h1>Click Advances Presentation</h1>
<ul>
<li>subscribe to event</li>
<li>advance slideshow</li>
</ul>
</curtissimo-slide>
<curtissimo-slide>
<h1>Remember Current Slide</h1>
<ul>
<li>write slide index to location</li>
<li>read slide index on load</li>
</ul>
</curtissimo-slide>
<curtissimo-slide>
<h1>Keyboard Nav</h1>
<ul>
<li>subscribe to keyboard events</li>
<li>advance and retreat slides</li>
</ul>
</curtissimo-slide>
<curtissimo-slide>
<h1>Resize Content</h1>
<ul>
<li>subscribe to window resize</li>
<li>determine appropriate transform</li>
<li>write to all children</li>
</ul>
</curtissimo-slide>
</curtissimo-slideshow>
<a href="/" class="fab">⤆</a>
<script src="node_modules/webcomponents.js/webcomponents.js"></script>
<script src="node_modules/X-Tag/dist/X-Tag-core.js"></script>
<script src="components/curtissimo-slide/curtissimo-slide.js"></script>
<script src="components/curtissimo-slideshow/curtissimo-slideshow.js"></script>
</body>
</html>