Skip to content

Commit 749cfd6

Browse files
NigelOTooleNigelOToole
committed
Animation, tidy up
1 parent d05312c commit 749cfd6

File tree

6 files changed

+168
-998
lines changed

6 files changed

+168
-998
lines changed

‎src/index.html‎

Lines changed: 38 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -128,43 +128,6 @@ <h3>Markers with text</h3>
128128
</div>
129129
</div>
130130

131-
<!-- <section class="demo demo--text">
132-
<ol class="progress-tracker">
133-
<li class="progress-step is-complete">
134-
<div class="progress-text">
135-
<h4 class="progress-title">Step 1</h4>
136-
<p>Text explaining this step to the user.</p>
137-
</div>
138-
</li>
139-
140-
<li class="progress-step is-complete">
141-
<a href="#" class="progress-text">
142-
<h4 class="progress-title">Step 2</h4>
143-
<p>Text explaining this step to the user.</p>
144-
</a>
145-
</li>
146-
147-
<li class="progress-step is-active" aria-current="step">
148-
<button class="progress-text">
149-
<h4 class="progress-title">Step 3</h4>
150-
<p>Shorter text explanation.</p>
151-
</button>
152-
</li>
153-
154-
<li class="progress-step">
155-
<button class="progress-text">
156-
<h4 class="progress-title">Step 4</h4>
157-
<p>Shorter text explanation.</p>
158-
</button>
159-
</li>
160-
161-
<li class="progress-step">
162-
<div class="progress-text">
163-
<h4 class="progress-title">Step 5</h4>
164-
</div>
165-
</li>
166-
</ol>
167-
</section> -->
168131

169132
<section class="demo demo--text">
170133
<ol class="progress-tracker">
@@ -216,33 +179,26 @@ <h4 class="progress-title">Step 3</h4>
216179
</ol>
217180
</section>
218181

219-
<!-- <section class="demo demo--text">
220-
<ol class="progress-tracker progress-tracker--reverse">
221-
<li class="progress-step is-complete">
222-
<div class="progress-text">
223-
<h4 class="progress-title">Step 1</h4>
224-
<p>Text explaining this step to the user.</p>
225-
</div>
226-
</li>
227-
228-
<li class="progress-step is-active">
229-
<div class="progress-text">
230-
<h4 class="progress-title">Step 2</h4>
231-
<p>Text explaining this step to the user.</p>
232-
</div>
233-
</li>
234-
235-
<li class="progress-step" aria-current="step">
236-
<div class="progress-text">
237-
<h4 class="progress-title">Step 3</h4>
238-
<p>Shorter text explanation.</p>
239-
</div>
240-
</li>
241-
</ol>
242-
</section> -->
243182

244-
<!-- <section class="demo demo--text">
245-
<ol class="progress-tracker progress-tracker--center">
183+
<div class="section-heading">
184+
<h3>Spaced</h3>
185+
186+
<div class="demo-classes">
187+
<label for="demo-classes--spaced">Layouts: </label>
188+
<select id="demo-classes--spaced" class="select demo-class-update" data-target=".demo--spaced .progress-tracker">
189+
<option value="" selected>Default</option>
190+
<option value="progress-tracker--center">Center aligned</option>
191+
<option value="progress-tracker--right">Right aligned</option>
192+
193+
<option value="progress-tracker--reverse">Reverse</option>
194+
<option value="progress-tracker--reverse progress-tracker--center">Reverse center</option>
195+
<option value="progress-tracker--reverse progress-tracker--right">Reverse right</option>
196+
</select>
197+
</div>
198+
</div>
199+
200+
<section class="demo demo--spaced">
201+
<ol class="progress-tracker progress-tracker--spaced">
246202
<li class="progress-step is-complete">
247203
<div class="progress-text">
248204
<h4 class="progress-title">Step 1</h4>
@@ -263,13 +219,11 @@ <h4 class="progress-title">Step 3</h4>
263219
<p>Shorter text explanation.</p>
264220
</div>
265221
</li>
266-
267-
268222
</ol>
269223
</section>
270224

271-
<section class="demo demo--text">
272-
<ol class="progress-tracker progress-tracker--right">
225+
<section class="demo demo--spaced">
226+
<ol class="progress-tracker progress-tracker--spaced progress-tracker--marker-square">
273227
<li class="progress-step is-complete">
274228
<div class="progress-text">
275229
<h4 class="progress-title">Step 1</h4>
@@ -291,48 +245,31 @@ <h4 class="progress-title">Step 3</h4>
291245
</div>
292246
</li>
293247
</ol>
294-
</section> -->
295-
296-
297-
<div class="section-heading">
298-
<h3>Spaced</h3>
299-
300-
<div class="demo-classes">
301-
<label for="demo-classes--spaced">Layouts: </label>
302-
<select id="demo-classes--spaced" class="select demo-class-update" data-target=".demo--spaced .progress-tracker">
303-
<option value="" selected>Default</option>
304-
305-
<option value="progress-tracker--center">Center aligned</option>
306-
<option value="progress-tracker--right">Right aligned</option>
248+
</section>
307249

308-
<option value="progress-tracker--reverse">Reverse</option>
309-
<option value="progress-tracker--reverse progress-tracker--center">Reverse center</option>
310-
<option value="progress-tracker--reverse progress-tracker--right">Reverse right</option>
311-
</select>
312-
</div>
313-
</div>
314250

315-
<section class="demo demo--spaced">
316-
<ol class="progress-tracker progress-tracker--spaced">
317-
<li class="progress-step is-complete">
318-
<div class="progress-text">
251+
<h3>Animation</h3>
252+
<section class="demo demo--anim">
253+
<ol class="progress-tracker progress-tracker--anim">
254+
<li class="progress-step">
255+
<button class="progress-text">
319256
<h4 class="progress-title">Step 1</h4>
320257
<p>Text explaining this step to the user.</p>
321-
</div>
258+
</button>
322259
</li>
323260

324-
<li class="progress-step is-active">
325-
<div class="progress-text">
261+
<li class="progress-step">
262+
<button class="progress-text">
326263
<h4 class="progress-title">Step 2</h4>
327264
<p>Text explaining this step to the user.</p>
328-
</div>
265+
</button>
329266
</li>
330267

331268
<li class="progress-step" aria-current="step">
332-
<div class="progress-text">
269+
<button class="progress-text">
333270
<h4 class="progress-title">Step 3</h4>
334271
<p>Shorter text explanation.</p>
335-
</div>
272+
</button>
336273
</li>
337274
</ol>
338275
</section>
@@ -554,6 +491,11 @@ <h3 id="docs-options">Options</h3>
554491
<td>progress-tracker--vertical</td>
555492
<td>Vertically aligned layout.</td>
556493
</tr>
494+
495+
<tr>
496+
<td>progress-tracker--anim</td>
497+
<td>Allows animation of path.</td>
498+
</tr>
557499

558500
</tbody></table>
559501
</div>

‎src/scripts/main.js‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@ window.addEventListener('DOMContentLoaded', (event) => {
1616

1717

1818
item.addEventListener('change', (event) => {
19-
// let targetElement = document.querySelectorAll(item.dataset['target']);
20-
2119
let oldClass = [];
2220
for (const option of event.target.options) {
2321
oldClass.push(option.value.split(' '))
@@ -27,10 +25,8 @@ window.addEventListener('DOMContentLoaded', (event) => {
2725
let newClass = event.target.value.split(' ');
2826

2927
for (const demo of targetElement) {
30-
let oldClassToApply = oldClass.filter(x => !demo.updateClass.currentClass.includes(x));
31-
let newClassToApply = newClass.filter(x => !demo.updateClass.currentClass.includes(x));
32-
33-
console.log(demo, demo.updateClass.currentClass, oldClass, oldClassToApply)
28+
let oldClassToApply = oldClass.filter(item => !demo.updateClass.currentClass.includes(item));
29+
let newClassToApply = newClass.filter(item => !demo.updateClass.currentClass.includes(item));
3430

3531
for (const item of oldClassToApply) {
3632
let cssClass = item;
@@ -46,6 +42,34 @@ window.addEventListener('DOMContentLoaded', (event) => {
4642

4743
};
4844

45+
const demoAnimButtons = document.querySelectorAll('.progress-tracker--anim button');
46+
47+
for (const item of demoAnimButtons) {
48+
item.addEventListener('click', (event) => {
49+
event.preventDefault();
50+
51+
for (const item of demoAnimButtons) {
52+
item.closest('.progress-step').classList.remove('is-active');
53+
}
54+
55+
let step = item.closest('.progress-step');
56+
57+
if(!step.classList.contains('is-complete')) {
58+
step.classList.add('is-complete');
59+
if(step.nextElementSibling !== null) {
60+
step.nextElementSibling.classList.add('is-active');
61+
}
62+
}
63+
else {
64+
step.classList.remove('is-complete');
65+
if(step.previousElementSibling !== null) {
66+
step.previousElementSibling.classList.remove('is-active');
67+
}
68+
}
69+
});
70+
}
71+
72+
4973

5074

5175
// Site

‎src/styles/main.css‎

Lines changed: 4 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)