-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html.literal
105 lines (85 loc) · 5.12 KB
/
index.html.literal
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
<!DOCTYPE html>
<html lang="en">
<head>
${ include('../literal/documentation/templates/head.literal', './package.json') }
<script title="slide-show">
window.slideshowStylesheet = './build/slide-show-shadow.css';
</script>
<link rel="stylesheet" href="./docs/module.css">
<link rel="stylesheet" href="./build/slide-show.css">
<link rel="prefetch" as="style" href="./build/slide-show-shadow.css">
<script type="importmap">{
"imports": {
"bolt/": "https://cdn.jsdelivr.net/gh/stephband/bolt-2@main/",
"dom/": "https://cdn.jsdelivr.net/gh/stephband/dom@master/modules/",
"fn/": "https://cdn.jsdelivr.net/gh/stephband/fn@master/modules/"
}
}</script>
<script type="module">
// Register <slide-show>
import './build/slide-show.js';
// Log events
import events from 'dom/modules/events.js';
events('slide-active', document).each((e) => console.log(e.type, e.target));
</script>
</head>
<body class="4x-grid @1-6x-grid @2-7x-grid @3-9x-grid grid">
<header class="x1 3x @1-4x @3-x2 x-stretch y-start">
<h1 class="text-title"><span class="tag-brace"><</span>slide-show<span class="tag-brace">></span>${ include('../literal/documentation/templates/version.literal', './package.json') }</h1>
<p class="@1-no-wrap">A scroll-snapping, loopable, autoplaying, keyboard-navigable, fullscreen-ready horizontal carousel custom element. <br class="@1-shown"/>No dependencies, about <code>13kB</code> minified and gzipped.</p>
</header>
<slide-show class="banner-slide-show x1 4x x-flood @1-6x @1-x-stretch @2-7x @3-9x" loop autoplay controls="navigation pagination fullscreen">
<img src="https://stephen.band/slide-show/docs/images/donkeys.jpg" draggable="false" alt="A rowdy group of curious donkeys"/>
<img src="https://stephen.band/slide-show/docs/images/tractor.jpg" draggable="false" alt="A lonely, rusted tractor abandonned on the edge of the arctic ocean"/>
<img src="https://stephen.band/slide-show/docs/images/mauverin.jpg" draggable="false" alt="The shadow of a the summit of the Mauverin cast over the alpine valley of Nant"/>
<img src="https://stephen.band/slide-show/docs/images/rocks.jpg" draggable="false" alt="Wet moss and lichen-covered rocks in a shallow pool"/>
<img src="https://stephen.band/slide-show/docs/images/summit.jpg" draggable="false" alt="Golden autumn meadows in front of a rocky summit dusted with snow"/>
</slide-show>
<section class="x1 4x @3-x2 x-stretch y-start documentation-block block">
${ include('../literal/documentation/templates/content.literal', comments("./module.js")) }
</section>
<h2 class="x1 3x @1-4x @2-x2 x-stretch y-start">API</h2>
${ include('../literal/documentation/templates/api.literal', comments(
"./modules/lifecycle.js",
"./modules/properties.js",
"./modules/active.js",
"./modules/navigation.js",
"./modules/fullscreen.js",
"./module.css",
"./shadow.css",
"./css/host.css",
"./css/slides.css",
"./css/loop.css",
"./css/navigation.css",
"./css/pagination.css",
"./css/fullscreen.css"
)) }
<div class="x1 4x @3-x2 x-stretch y-start documentation-block block">
<h3 class="docs-text-04">Fallback</h3>
<p><code><slide-show></code> is built to scroll, and if JavaScript
fails and the features of the element do not initialise (the component
is not 'upgraded' in Web Component parlance), the user nonetheless gets
a scrollable element. Fallback style is provided by <code>./build/slide-show.css</code>.</p>
<p>Upgraded style is provided by <code>./build/slide-show-shadow.css</code>, which
must be in the same location as <code>./build/slide-show.js</code> in order
to be loaded into the <code>slide-show</code>'s shadow DOM.</p>
<h3 class="docs-text-04">Semantics</h3>
<p>The <a href="github.com/stephband/slide-show/releases">release</a>
includes JS files for registering customised built-in versions of the
slide-show.</p>
<p>Note that these don't register the same way in
all browsers – Safari does not support customised built-ins, so support
is roughly polyfilled. Mileage may vary; please file an
<a href="github.com/stephband/slide-show/issues">issue</a> if you find
a problem.</p>
<h3 class="docs-text-04">Polyfills</h3>
<p>The package includes a basic polyfill of <code>element.scrollTo()</code>,
as Safari lacks support for the smooth scrolling option of this method.
The polyfill is not applied in browsers where smooth scrolling is already
supported.</p>
</div>
${ include('../literal/documentation/templates/contribute.literal', './package.json') }
${ include('../literal/documentation/templates/credit.literal', './package.json') }
${ include('../literal/documentation/templates/footer.literal', './package.json') }
${ include('../literal/documentation/templates/scripts.literal', './package.json') }
</body>