Skip to content

Commit 4a87285

Browse files
jpamentaljpamental
committed
Adding inactive toggle
1 parent e6405de commit 4a87285

File tree

3 files changed

+78
-2
lines changed

3 files changed

+78
-2
lines changed

‎font-features/font-kerning.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@
141141
<p>Puffy Pangolins</p>
142142
</div>
143143
</textarea>
144-
<input type="checkbox" name="demo1_control" id="demo1_control" value="on" checked /> Kerning active
144+
<input type="checkbox" name="demo1_control" id="demo1_control" value="on" checked /> <label for="demo1_control">Kerning active</label>
145145
</div>
146146
<div class="demo2">
147147
<section class="section section2">
@@ -163,7 +163,7 @@
163163
<p>Puffy Pangolins</p>
164164
</div>
165165
</textarea>
166-
<input type="checkbox" name="demo2_control" id="demo2_control" value="on" checked /> Kerning active
166+
<input type="checkbox" name="demo2_control" id="demo2_control" value="on" checked /> <label for="demo2_control">Kerning active</label>
167167
</div>
168168
</div>
169169
<div class="playable-buttons">
@@ -200,6 +200,10 @@
200200
textareaCSS1.value = cssCode1;
201201
textareaHTML2.value = htmlCode2;
202202
textareaCSS2.value = cssCode2;
203+
demo1_active.checked = true;
204+
demo1_active.parentNode.classList.remove('inactive');
205+
demo2_active.checked = true;
206+
demo2_active.parentNode.classList.remove('inactive');
203207
fillCode();
204208
});
205209

‎font-features/font-variant-caps.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,9 @@
107107
.container1 .all-small-caps {
108108
font-variant-caps: all-small-caps;
109109
}
110+
.inactive .container1 * {
111+
font-variant-caps: normal;
112+
}
110113
</style>
111114
<style class="editable2">
112115
/* 'smcp', 'c2sc' */
@@ -116,6 +119,9 @@
116119
.container2 .all-small-caps {
117120
font-feature-settings: 'c2sc' 1, 'smcp' 1;
118121
}
122+
.inactive .container2 * {
123+
font-feature-settings: 'smcp' 0, 'c2sc' 0;
124+
}
119125
</style>
120126
</head>
121127

@@ -135,12 +141,16 @@
135141
.container1 .all-small-caps {
136142
font-variant-caps: all-small-caps;
137143
}
144+
.inactive .container1 * {
145+
font-variant-caps: normal;
146+
}
138147
</textarea>
139148
<textarea id="code1" class="playable-html1">
140149
<div class="container container1">
141150
<p><span class="small-caps">Small Caps</span> and <span class="all-small-caps">All Small Caps</span></p>
142151
</div>
143152
</textarea>
153+
<input type="checkbox" name="demo1_control" id="demo1_control" value="on" checked /> <label for="demo1_control">Caps active</label>
144154
</div>
145155
<div class="demo2">
146156
<section class="section section2">
@@ -156,12 +166,16 @@
156166
.container2 .all-small-caps {
157167
font-feature-settings: 'c2sc' 1, 'smcp' 1;
158168
}
169+
.inactive .container2 * {
170+
font-feature-settings: 'smcp' 0, 'c2sc' 0;
171+
}
159172
</textarea>
160173
<textarea id="code2" class="playable-html2">
161174
<div class="container container2">
162175
<p><span class="small-caps">Small Caps</span> and <span class="all-small-caps">All Small Caps</span></p>
163176
</div>
164177
</textarea>
178+
<input type="checkbox" name="demo2_control" id="demo2_control" value="on" checked /> <label for="demo2_control">Caps active</label>
165179
</div>
166180
</div>
167181
<div class="playable-buttons">
@@ -183,6 +197,24 @@
183197
var cssCode1 = textareaCSS1.value;
184198
var htmlCode2 = textareaHTML2.value;
185199
var cssCode2 = textareaCSS2.value;
200+
var demo1_active = document.getElementById('demo1_control');
201+
var demo2_active = document.getElementById('demo2_control');
202+
203+
demo1_active.addEventListener('change', function () {
204+
if (this.checked) {
205+
this.parentNode.classList.remove('inactive');
206+
} else {
207+
this.parentNode.classList.add('inactive');
208+
}
209+
});
210+
211+
demo2_active.addEventListener('change', function () {
212+
if (this.checked) {
213+
this.parentNode.classList.remove('inactive');
214+
} else {
215+
this.parentNode.classList.add('inactive');
216+
}
217+
});
186218

187219
function fillCode() {
188220
editable1.innerHTML = textareaCSS1.value;
@@ -196,6 +228,10 @@
196228
textareaCSS1.value = cssCode1;
197229
textareaHTML2.value = htmlCode2;
198230
textareaCSS2.value = cssCode2;
231+
demo1_active.checked = true;
232+
demo1_active.parentNode.classList.remove('inactive');
233+
demo2_active.checked = true;
234+
demo2_active.parentNode.classList.remove('inactive');
199235
fillCode();
200236
});
201237

‎font-features/font-variant-ligatures.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,12 +104,18 @@
104104
.container1 * {
105105
font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
106106
}
107+
.inactive .container1 * {
108+
font-variant-ligatures: none;
109+
}
107110
</style>
108111
<style class="editable2">
109112
/* 'liga', 'dlig', 'hlig', 'calt' */
110113
.container2 * {
111114
font-feature-settings: 'dlig', 'liga', 'calt';
112115
}
116+
.inactive .container2 * {
117+
font-feature-settings: 'dlig' 0, 'liga' 0, 'calt' 0;
118+
}
113119
</style>
114120
</head>
115121

@@ -126,12 +132,16 @@
126132
.container1 * {
127133
font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
128134
}
135+
.inactive .container1 * {
136+
font-variant-ligatures: none;
137+
}
129138
</textarea>
130139
<textarea id="code1" class="playable-html1">
131140
<div class="container container1">
132141
<p>Puffy Perfect -^ <-></p>
133142
</div>
134143
</textarea>
144+
<input type="checkbox" name="demo1_control" id="demo1_control" value="on" checked /> <label for="demo1_control">Ligatures active</label>
135145
</div>
136146
<div class="demo2">
137147
<section class="section section2">
@@ -144,12 +154,16 @@
144154
.container2 * {
145155
font-feature-settings: 'dlig', 'liga', 'calt';
146156
}
157+
.inactive .container2 * {
158+
font-feature-settings: 'dlig' 0, 'liga' 0, 'calt' 0;
159+
}
147160
</textarea>
148161
<textarea id="code2" class="playable-html2">
149162
<div class="container container2">
150163
<p>Puffy Perfect -^ <-></p>
151164
</div>
152165
</textarea>
166+
<input type="checkbox" name="demo2_control" id="demo2_control" value="on" checked /> <label for="demo2_control">Ligatures active</label>
153167
</div>
154168
</div>
155169
<div class="playable-buttons">
@@ -171,6 +185,24 @@
171185
var cssCode1 = textareaCSS1.value;
172186
var htmlCode2 = textareaHTML2.value;
173187
var cssCode2 = textareaCSS2.value;
188+
var demo1_active = document.getElementById('demo1_control');
189+
var demo2_active = document.getElementById('demo2_control');
190+
191+
demo1_active.addEventListener('change', function () {
192+
if (this.checked) {
193+
this.parentNode.classList.remove('inactive');
194+
} else {
195+
this.parentNode.classList.add('inactive');
196+
}
197+
});
198+
199+
demo2_active.addEventListener('change', function () {
200+
if (this.checked) {
201+
this.parentNode.classList.remove('inactive');
202+
} else {
203+
this.parentNode.classList.add('inactive');
204+
}
205+
});
174206

175207
function fillCode() {
176208
editable1.innerHTML = textareaCSS1.value;
@@ -184,6 +216,10 @@
184216
textareaCSS1.value = cssCode1;
185217
textareaHTML2.value = htmlCode2;
186218
textareaCSS2.value = cssCode2;
219+
demo1_active.checked = true;
220+
demo1_active.parentNode.classList.remove('inactive');
221+
demo2_active.checked = true;
222+
demo2_active.parentNode.classList.remove('inactive');
187223
fillCode();
188224
});
189225

0 commit comments

Comments
 (0)