/
index.html
110 lines (87 loc) 路 2.86 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conditioner Demo</title>
<style>
html {
line-height:1.5;
}
body {
padding:2em;
}
h2 {
margin-top:0;
font-size:1.125em;
}
button {
all:inherit;
position: relative;
width: 100%;
box-sizing: border-box;
padding-right: 2em;
cursor: pointer;
}
svg {
position: absolute;
right: 0;
top: .5em;
width: 1.25em;
}
button:focus svg {
outline: 2px solid;
}
[aria-expanded='true'] svg {
transform: scaleY(-1);
}
</style>
</head>
<body>
<!--
Resize the window, when it's wider than 40em Conditioner will unmount the SectionToggler
-->
<h2 data-module="SectionToggler" data-context="@media (max-width:40em)">Frizz free, context-aware, JavaScript modules</h2>
<div>
<p>Building a content based website?</p>
<p>Progressively enhancing it with a bit of interactivity?</p>
<p>Want to offer different interactivity based on user context?</p>
<p>Preferably do it without losing your mind?</p>
<p>馃憠 <a href="https://pqina.nl/conditioner/">pqina.nl/conditioner/</a></p>
</div>
<h2>Let's print "Hello World"</h2>
<p data-module="HelloWorld"></p>
<script src="conditioner-core.min.js"></script>
<script>
// Our Hello World module
function HelloWorld(element) {
element.textContent = 'Hello World';
};
// Our Section Toggler module
function SectionToggler(element) {
// get section to toggle so we can hide it
const target = element.nextElementSibling;
// setup toggle button
const btn = document.createElement('button');
btn.setAttribute('aria-expanded', 'false');
btn.innerHTML = element.textContent + '<svg aria-hidden="true" focusable="false" viewBox="0 0 16 10"><polyline stroke="#000" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" points="2 2 8 8 14 2"></polyline></svg>';
btn.onclick = function() {
const expanded = btn.getAttribute('aria-expanded') === 'true' || false;
btn.setAttribute('aria-expanded', !expanded);
target.hidden = expanded;
};
element.textContent = '';
element.appendChild(btn);
// hide the section
target.hidden = true;
// clean up method
return function() {
element.nextElementSibling.hidden = false;
element.textContent = element.firstChild.textContent;
};
};
// Hydrate the DOM with Conditioner
conditioner.hydrate(document.documentElement);
</script>
</body>
</html>