-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
286 lines (286 loc) · 12.1 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FooHTML</title>
<link href="style.css" type="text/css" rel="stylesheet">
<link href="snippet-explorer/style.css" type="text/css" rel="stylesheet">
<link href="simple-button/style.css" type="text/css" rel="stylesheet">
<link href="toggler-switch/style.css" type="text/css" rel="stylesheet">
<link href="animated-select/style.css" type="text/css" rel="stylesheet">
<link href="lazy-image/style.css" type="text/css" rel="stylesheet">
<link href="lazy-loading/style.css" type="text/css" rel="stylesheet">
<link href="video-player/style.css" type="text/css" rel="stylesheet">
<link href="video-widget/style.css" type="text/css" rel="stylesheet">
<link href="hexagonal-image/style.css" type="text/css" rel="stylesheet">
<link href="hexagonal-gallery/style.css" type="text/css" rel="stylesheet">
<link href="wave-slider/style.css" type="text/css" rel="stylesheet">
<script src="foo-html.lib.js"></script>
<script src="script.js"></script>
<script src="snippet-explorer/index.js"></script>
<script src="simple-button/index.js"></script>
<script src="toggler-switch/index.js"></script>
<script src="animated-select/index.js"></script>
<script src="lazy-loading/index.js"></script>
<script src="lazy-image/index.js"></script>
<script src="video-player/index.js"></script>
<script src="video-widget/index.js"></script>
<script src="hexagonal-image/index.js"></script>
<script src="hexagonal-gallery/index.js"></script>
<script src="wave-slider/index.js"></script>
</head>
<body>
<div id="wrap">
<header>
<img src="img/logo.png" />
<big>FooHTML</big>
<small>Yet Another Custom Elements Library</small>
</header>
<section>
<h2>
What is FooHTML?
</h2>
<p>
FooHTML is a helper library dedicated for Custom Elements,
it allows you to implement and use any new html tag with specific tailor made functionality.
Your html source code becomes shorter, easier and more semantic.
<br />
<br />
Consider examples in your html code:
<br />
<br />
<code>
<random-image theme="food" /><br />
<random-text min-words="3" max-words="15" />
</code>
</p>
<h3>
Browsers support
</h3>
<p>
FooHTML is an experimental project, so keep in mind cross-browser compatibility issues.<br />
It should works fine in Chrome, Firefox and Safari.
</p>
</section>
<section>
<h2><simple-button></h2>
<p>
Lets demontrate, what possibilities FooHTML gives, by creating a very simple button, which will change it's appear after clicking on it. That's it, nothing else.
</p>
<simple-button>Click me</simple-button>
<p>
Below you can check, how it is done. HTML is now enriched with this new tag, which can be use anywhere across web project.
</p>
<snippet-explorer title="simple-button"></snippet-explorer>
</section>
<section>
<h2><toggler-switch></h2>
<p>With FooHTML it's very easy to create toggler switch, with customized look.</p>
<toggler-switch checked></toggler-switch> apples
<br />
<toggler-switch></toggler-switch> oranges
<br />
<toggler-switch></toggler-switch> lemons
<br />
<toggler-switch disabled></toggler-switch> kiwi
<br />
<toggler-switch checked disabled></toggler-switch> pears
<snippet-explorer title="toggler-switch"></snippet-explorer>
</section>
<section id="animated-select">
<h2><animated-select></h3>
<p>Here we have a select field, with nice animated effect on open/close.</p>
<animated-select>
<animated-select-option>Select country</animated-select-option>
<animated-select-option value="be">Belgium</animated-select-option>
<animated-select-option value="de">Germany</animated-select-option>
<animated-select-option value="fr">France</animated-select-option>
<animated-select-option value="es">Spain</animated-select-option>
<animated-select-option value="us">United States of America</animated-select-option>
</animated-select>
<animated-select class="long-answers">
<animated-select-option>Select your favourite<br />"Lorem ipsum" sentence</animated-select-option>
<animated-select-option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</animated-select-option>
<animated-select-option value="2">Praesent luctus porttitor velit, non dapibus sapien eleifend eu.</animated-select-option>
<animated-select-option value="3">Donec consectetur enim at enim laoreet, quis iaculis nulla molestie.</animated-select-option>
<animated-select-option value="4">Ut dignissim mi eros, id vehicula turpis hendrerit vel.</animated-select-option>
<animated-select-option value="5">Integer vehicula purus a neque elementum pulvinar.</animated-select-option>
</animated-select>
<snippet-explorer title="animated-select"></snippet-explorer>
</section>
<section>
<h2><lazy-loading></h3>
<p>
Here we have elements, which have build-in lazy-loading concept.
It means, they are triggered to change their appearance, when element is first displayed within visible area of the page.
Optionally, we can set different offset thresholds.
<br />
<br />
Scroll down slowly, and see, when and why elements are triggered.
<br />
<br />
</p>
<lazy-loading>
Lazy loading, when top edge is displayed (default behavior).
</lazy-loading>
<lazy-loading data-threshold="50%">
Lazy loading, with 50% of the element's height as top offset.
</lazy-loading>
<lazy-loading data-threshold="400">
Lazy loading, with 400px top offset
</lazy-loading>
<lazy-loading data-threshold="W50%">
Lazy loading, when top edge meets 50% of the screen height.
</lazy-loading>
<lazy-loading data-threshold="100%">
Lazy loading, when 100% of the element's height is displayed.
</lazy-loading>
<lazy-loading data-threshold="0.5">
Lazy loading, when element is at the middle of the screen height.
</lazy-loading>
<snippet-explorer title="lazy-loading"></snippet-explorer>
</section>
<section>
<h2><lazy-image></h2>
<p>
Here we will use inheritance from <lazy-loading> to apply this concept for images.
</p>
<lazy-image data-threshold="100%" src="img/gallery-1.jpg"></lazy-image>
<lazy-image data-threshold="100%" src="img/gallery-2.jpg"></lazy-image>
<lazy-image data-threshold="100%" src="img/gallery-3.jpg"></lazy-image>
<lazy-image data-threshold="100%" src="img/gallery-4.jpg"></lazy-image>
<lazy-image data-threshold="100%" src="img/gallery-5.jpg"></lazy-image>
<lazy-image data-threshold="100%" src="img/gallery-6.jpg"></lazy-image>
<snippet-explorer title="lazy-image"></snippet-explorer>
</section>
<section>
<h3><video-player></h3>
<p>Lets demonstrate more advanced example of inheritance, by creating custom video player, based on HTML5 video tag.</p>
<p>We start player having functionalities:</p>
<ul>
<li>title of the movie</li>
<li>play/pause and progress bar</li>
<li>when a player is started, other already running player pauses</li>
</ul>
<video-player data-config="[{'title': 'Lorem ipsum', 'videos': {'video/mp4': 'vid/movie.mp4', 'video/ogg': 'vid/movie.ogg'}}]"></video-player>
<video-player data-config="[{'title': 'Dolor sit', 'videos': {'video/mp4': 'vid/movie.mp4', 'video/ogg': 'vid/movie.ogg'}}]"></video-player>
<video-player data-config="[{'title': 'Amet consectetur', 'videos': {'video/mp4': 'vid/movie.mp4', 'video/ogg': 'vid/movie.ogg'}}]"></video-player>
<video-player data-config="[{'title': 'Adipiscing elit', 'videos': {'video/mp4': 'vid/movie.mp4', 'video/ogg': 'vid/movie.ogg'}}]"></video-player>
<snippet-explorer title="video-player"></snippet-explorer>
</section>
<section>
<h3><video-widget></h3>
<p>Now, lets extend video-player and add some more advanced functionalities:</p>
<ul>
<li>player widget allows to switch between related movies via toggable tab on the right side</li>
<li>subtitles are displayed during the "Lorem ipsum" movie</li>
<li>adverts are displayed during playing the "Dolor sit" movie</li>
<li>related movies are displayed, after movie finished</li>
</ul>
<video-widget data-config="[
{
'title': 'Lorem ipsum',
'cover': 'img/cover-1.jpg',
'videos': {
'video/mp4': 'vid/movie.mp4',
'video/ogg': 'vid/movie.ogg'
},
'subtitles': {
'1': 'Donec lectus orci, varius nec rhoncus ac, <br />commodo id leo.',
'3': 'Donec varius, dui id porta sollicitudin, risus ex <br />sodales risus, quis semper velit ante sed orci.',
'5.5': 'Cras elementum sagittis velit <br />in blandit. Nulla facilisi.',
'7.5': 'Morbi odio risus, posuere quis <br />sapien ut, mattis pretium tellus.'
}
},
{
'title': 'Dolor sit',
'cover': 'img/cover-2.jpg',
'videos': {
'video/mp4': 'vid/movie.mp4',
'video/ogg': 'vid/movie.ogg'
},
'subtitles': {
'2': 'img/banner-1.jpg',
'4': '',
'6': 'img/banner-2.jpg'
}
},
{
'title': 'Amet consectetur',
'cover': 'img/cover-3.jpg',
'videos': {
'video/mp4': 'vid/movie.mp4',
'video/ogg': 'vid/movie.ogg'
}
},
{
'title': 'Adipiscing elit',
'cover': 'img/cover-4.jpg',
'videos': {
'video/mp4': 'vid/movie.mp4',
'video/ogg': 'vid/movie.ogg'
}
},
{
'title': 'Sed ut dictum',
'cover': 'img/cover-5.jpg',
'videos': {
'video/mp4': 'vid/movie.mp4',
'video/ogg': 'vid/movie.ogg'
}
}
]"></video-widget>
<p>There is of cource space for improvements and adding new functionalities, like volume control, showing progress time and video duration, closable adverts, etc.</p>
<snippet-explorer title="video-widget"></snippet-explorer>
</section>
<section>
<h3><hexagonal-image></h3>
<p>
Custom elements don't have to be used as components serving a business logic.
<br />
They can also be used for creating interesting layout, like displaying ordinary image with hexagonal shape.
</p>
<img class="hex-img" src="img/hex-img.jpg" />
→
<hexagonal-image src="img/hex-img.jpg"></hexagonal-image>
<snippet-explorer title="hexagonal-image"></snippet-explorer>
</section>
<section>
<h3><hexagonal-gallery></h3>
<p>On top of hexagonal-image, we can build a mosaic gallery.</p>
<hexagonal-gallery data-config="{
'size': [3, 3],
'glue': {
'size': 4
},
'tiles': ['img/mosaic-1.jpg', 'img/mosaic-2.jpg', 'img/mosaic-3.jpg', 'img/mosaic-4.jpg', 'img/mosaic-5.jpg', 'img/mosaic-6.jpg', 'img/mosaic-7.jpg', 'img/mosaic-8.jpg', 'img/mosaic-9.jpg', 'img/mosaic-10.jpg', 'img/mosaic-11.jpg', 'img/mosaic-12.jpg', 'img/mosaic-13.jpg', 'img/mosaic-14.jpg', 'img/mosaic-15.jpg', 'img/mosaic-16.jpg', 'img/mosaic-17.jpg', 'img/mosaic-18.jpg']
}"></hexagonal-gallery>
<hexagonal-gallery data-config="{
'size': [4, 2],
'glue': {
'size': 10,
'color': '#FFF'
},
'tiles': ['img/mosaic-1.jpg', 'img/mosaic-2.jpg', 'img/mosaic-3.jpg', 'img/mosaic-4.jpg', 'img/mosaic-5.jpg', 'img/mosaic-6.jpg', 'img/mosaic-7.jpg', 'img/mosaic-8.jpg', 'img/mosaic-9.jpg', 'img/mosaic-10.jpg', 'img/mosaic-11.jpg', 'img/mosaic-12.jpg', 'img/mosaic-13.jpg', 'img/mosaic-14.jpg', 'img/mosaic-15.jpg', 'img/mosaic-16.jpg', 'img/mosaic-17.jpg', 'img/mosaic-18.jpg']
}"></hexagonal-gallery>
<snippet-explorer title="hexagonal-gallery"></snippet-explorer>
</section>
<section id="wave-slider">
<h3><wave-slider></h3>
<p>
Finally, we have an image slider with interesting transition effect.
<br />
<br />
When you click, images are replaced by circle waves. One wave starts on position of your click, and the second in random place.
<br />
<br />
Try clicking quickly in different spots.
</p>
<wave-slider data-config="[{'title': 'Lorem ipsum dolor sit amet', 'img': 'img/slider-1.jpg'}, {'title': '', 'img': 'img/slider-2.jpg'}, {'title': '', 'img': 'img/slider-3.jpg'}, {'title': '', 'img': 'img/slider-4.jpg'}, {'title': '', 'img': 'img/slider-5.jpg'}]"></wave-slider>
<snippet-explorer title="wave-slider"></snippet-explorer>
</section>
</div>
</body>
</html>