Skip to content

Commit 6cf3f72

Browse files
NigelOTooleNigelOToole
committed
Add dashed variant, refactored code and demos
1 parent 42fa35c commit 6cf3f72

File tree

7 files changed

+478
-419
lines changed

7 files changed

+478
-419
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"stepper",
1515
"javascript"
1616
],
17-
"version": "3.0.1",
17+
"version": "3.1.0",
1818
"license": "MIT",
1919
"engines": {
2020
"node": ">=4"

‎src/index.html‎

Lines changed: 139 additions & 205 deletions
Large diffs are not rendered by default.

‎src/scripts/main.js‎

Lines changed: 44 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,54 @@
11
window.addEventListener('DOMContentLoaded', (event) => {
22

3-
// Demos
3+
// ----- Demos -----
4+
// Class updates
5+
const classUpdate = document.querySelectorAll('.class-update');
46

5-
const updateClasses = document.querySelectorAll('.demo-class-update');
6-
7-
for (const item of updateClasses) {
8-
let target = item.dataset['target'];
7+
for (const item of classUpdate) {
8+
let target = item.dataset['target'];
99
if (!target) return;
1010

11-
let targetElement = document.querySelectorAll(item.dataset['target']);
11+
let targetElement = document.querySelectorAll(target);
1212
for (const item of targetElement) {
13-
item.updateClass = {};
14-
item.updateClass.currentClass = [...item.classList];
13+
item.classUpdate = {};
14+
item.classUpdate.classCurrent = [...item.classList];
1515
}
1616

17+
const classUpdateTrigger = item.querySelectorAll('select');
1718

18-
item.addEventListener('change', (event) => {
19-
let oldClass = [];
20-
for (const option of event.target.options) {
21-
oldClass.push(option.value.split(' '))
22-
}
23-
oldClass = oldClass.flat();
24-
25-
let newClass = event.target.value.split(' ');
26-
27-
for (const demo of targetElement) {
28-
let oldClassToApply = oldClass.filter(item => !demo.updateClass.currentClass.includes(item));
29-
let newClassToApply = newClass.filter(item => !demo.updateClass.currentClass.includes(item));
30-
31-
for (const item of oldClassToApply) {
32-
let cssClass = item;
33-
if (cssClass) demo.classList.remove(item);
34-
}
35-
36-
for (const item of newClassToApply) {
37-
let cssClass = item;
38-
if (cssClass) demo.classList.add(item);
19+
for (const item of classUpdateTrigger) {
20+
21+
item.addEventListener('change', (event) => {
22+
let oldClass = [];
23+
for (const option of event.target.options) {
24+
oldClass.push(option.value.split(' '))
3925
}
40-
}
41-
})
42-
43-
};
26+
oldClass = oldClass.flat();
27+
28+
let newClass = event.target.value.split(' ');
29+
30+
for (const demo of targetElement) {
31+
let oldClassToApply = oldClass.filter(item => !demo.classUpdate.classCurrent.includes(item));
32+
let newClassToApply = newClass.filter(item => !demo.classUpdate.classCurrent.includes(item));
33+
34+
for (const item of oldClassToApply) {
35+
let cssClass = item;
36+
if (cssClass) demo.classList.remove(item);
37+
}
38+
39+
for (const item of newClassToApply) {
40+
let cssClass = item;
41+
if (cssClass) demo.classList.add(item);
42+
}
43+
}
44+
})
45+
46+
};
47+
};
48+
49+
4450

51+
// Animation demo
4552
const demoAnimButtons = document.querySelectorAll('.progress-tracker--anim button');
4653

4754
for (const item of demoAnimButtons) {
@@ -50,6 +57,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
5057

5158
for (const item of demoAnimButtons) {
5259
item.closest('.progress-step').classList.remove('is-active');
60+
item.closest('.progress-step').removeAttribute('aria-current');
5361
}
5462

5563
let step = item.closest('.progress-step');
@@ -58,12 +66,14 @@ window.addEventListener('DOMContentLoaded', (event) => {
5866
step.classList.add('is-complete');
5967
if(step.nextElementSibling !== null) {
6068
step.nextElementSibling.classList.add('is-active');
69+
step.nextElementSibling.setAttribute('aria-current', 'step');
6170
}
6271
}
6372
else {
6473
step.classList.remove('is-complete');
6574
if(step.previousElementSibling !== null) {
6675
step.previousElementSibling.classList.remove('is-active');
76+
step.previousElementSibling.removeAttribute('aria-current');
6777
}
6878
}
6979
});
@@ -72,7 +82,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
7282

7383

7484

75-
// Site
85+
// ----- Site -----
7686

7787
// Encoded text
7888
const encodeElements = document.querySelectorAll('.encode');

‎src/styles/main.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -848,6 +848,7 @@ a .icon, button .icon {
848848
/* Section heading */
849849
.section-heading {
850850
display: flex;
851+
flex-direction: column;
851852
gap: 16px;
852853
gap: var(--layout-space-sm);
853854
margin-top: 64px;
@@ -863,6 +864,26 @@ a .icon, button .icon {
863864
border: 1px solid rgb(1, 87, 255);
864865
border: 1px solid var(--color-500);
865866
}
867+
.class-update {
868+
display: flex;
869+
flex-direction: row;
870+
flex-wrap: wrap;
871+
gap: 8px 16px;
872+
gap: var(--layout-space-xs) var(--layout-space-sm);
873+
font-size: .875rem;
874+
}
875+
.class-update .class-update-item {
876+
display: flex;
877+
gap: 8px;
878+
gap: var(--layout-space-xs);
879+
align-items: center;
880+
}
881+
@media (max-width: 479px) {
882+
.class-update .class-update-item {
883+
width: 100%;
884+
justify-content: space-between;
885+
}
886+
}
866887
/* Demo */
867888
/* Social image - 1200x630 */
868889
/* body {

‎src/styles/progress-tracker.css‎

Lines changed: 117 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
--marker-size-block: 32px;
44
--marker-size-inline: var(--marker-size-block);
55
--marker-size-half: calc(var(--marker-size-block) * 0.5);
6-
--marker-spacing: -1px; /* Fix for rounding errors */
6+
--marker-spacing: 0px;
77

88
--marker-bg: #999;
99
--marker-bg-active: #0034a3;
@@ -152,6 +152,59 @@
152152
--bg: var(--marker-bg-hover);
153153
}
154154

155+
/* Alignment */
156+
157+
.progress-tracker--center {
158+
--path-position-inline: calc(50% + (var(--marker-size-inline) / 2) + var(--marker-spacing));
159+
160+
text-align: center;
161+
}
162+
163+
.progress-tracker--center:not(.progress-tracker--vertical) .progress-step::before {
164+
margin-left: auto;
165+
margin-right: auto;
166+
}
167+
168+
.progress-tracker--center.progress-tracker--vertical {
169+
max-width: 240px;
170+
margin-left: auto;
171+
margin-right: auto;
172+
}
173+
174+
.progress-tracker--end {
175+
--path-position-inline: calc(100% + var(--marker-spacing));
176+
177+
text-align: right;
178+
}
179+
180+
.progress-tracker--end:not(.progress-tracker--vertical) .progress-step::before {
181+
margin-left: auto;
182+
}
183+
184+
.progress-tracker--end.progress-tracker--vertical .progress-step {
185+
flex-direction: row-reverse;
186+
}
187+
188+
.progress-tracker--end.progress-tracker--vertical .progress-step::after {
189+
left: auto;
190+
right: var(--path-position-block);
191+
}
192+
193+
.progress-tracker--reverse:not(.progress-tracker--vertical) .progress-step::after {
194+
top: auto;
195+
bottom: var(--path-position-block);
196+
}
197+
198+
.progress-tracker--reverse.progress-tracker--marker-square .progress-step::after {
199+
top: auto;
200+
bottom: 0;
201+
}
202+
203+
.progress-tracker--reverse .progress-text {
204+
order: -1;
205+
flex-grow: 1;
206+
}
207+
155208
/* Variants */
156209

157210
.progress-tracker--marker-counter .progress-step::before {
@@ -164,6 +217,42 @@
164217
content: attr(data-text, "");
165218
}
166219

220+
.progress-tracker--dashed, .progress-tracker--dashed-even {
221+
--path-dash-size: 8px;
222+
--path-dash-count: 0;
223+
--path-dash-calc: var(--path-dash-size);
224+
--path-direction: right;
225+
--marker-spacing: 8px;
226+
}
227+
228+
.progress-tracker--dashed .progress-step:not(:last-child)::after, .progress-tracker--dashed-even .progress-step:not(:last-child)::after {
229+
background: repeating-linear-gradient(to var(--path-direction), var(--bg) 0px var(--path-dash-calc), transparent var(--path-dash-calc) calc(var(--path-dash-calc)*2));
230+
}
231+
232+
.progress-tracker--dashed.progress-tracker--vertical, .progress-tracker--dashed-even.progress-tracker--vertical {
233+
--path-direction: bottom;
234+
}
235+
236+
.progress-tracker--dashed-even {
237+
--path-dash-size: 0px;
238+
--path-dash-count: 4;
239+
--path-dash-percent: calc(100% / (var(--path-dash-count) + (var(--path-dash-count) - 1)));
240+
--path-dash-calc: calc(100% / (var(--path-dash-count) + (var(--path-dash-count) - 1)));
241+
--path-dash-calc: var(--path-dash-percent);
242+
--marker-spacing: 0px;
243+
}
244+
245+
@supports (height: round(up, 100.1px, 1px)) {
246+
247+
.progress-tracker--dashed-even {
248+
--path-dash-calc: round(up, var(--path-dash-percent), .5px);
249+
}
250+
}
251+
252+
.progress-tracker--spaced {
253+
--marker-spacing: 8px;
254+
}
255+
167256
.progress-tracker--marker-square {
168257
--marker-size-block: 24px;
169258
--marker-size-inline: 4px;
@@ -174,9 +263,31 @@
174263
border-radius: 0;
175264
}
176265

177-
.progress-tracker--spaced {
178-
--marker-spacing: 8px;
179-
}
266+
.progress-tracker--marker-square.progress-tracker--vertical {
267+
--marker-size-inline: 24px;
268+
--marker-size-block: 4px;
269+
--path-size-inline: calc(100% - (var(--marker-spacing) * 2));
270+
}
271+
272+
.progress-tracker--anim .progress-step.is-active:not(:last-child)::after, .progress-tracker--anim .progress-step.is-complete:not(:last-child)::after {
273+
background-image: linear-gradient(to right, var(--path-bg-active) 50%, var(--path-bg-complete) 50%);
274+
background-size: 200% 100%;
275+
background-position: 0% 100%;
276+
}
277+
278+
.progress-tracker--anim .progress-step.is-complete:not(:last-child)::after {
279+
background-position: -100% 100%;
280+
}
281+
282+
.progress-tracker--anim.progress-tracker--vertical .progress-step.is-active:not(:last-child)::after, .progress-tracker--anim.progress-tracker--vertical .progress-step.is-complete:not(:last-child)::after {
283+
background-image: linear-gradient(to bottom, var(--path-bg-active) 50%, var(--path-bg-complete) 50%);
284+
background-size: 100% 200%;
285+
background-position: 100% 0%;
286+
}
287+
288+
.progress-tracker--anim.progress-tracker--vertical .progress-step.is-complete:not(:last-child)::after {
289+
background-position: 100% -100%;
290+
}
180291

181292
.progress-tracker--inline {
182293
overflow: auto;
@@ -210,11 +321,11 @@
210321
flex-basis: min-content;
211322
}
212323

213-
.progress-tracker--inline:not(.progress-tracker--inline-text-right) .progress-step:first-child .progress-text {
324+
.progress-tracker--inline:not(.progress-tracker--inline-text-end) .progress-step:first-child .progress-text {
214325
padding-left: 0;
215326
}
216327

217-
.progress-tracker--inline-text-right .progress-text {
328+
.progress-tracker--inline-text-end .progress-text {
218329
order: 2;
219330
}
220331

@@ -238,74 +349,3 @@
238349
padding-top: 4px;
239350
padding-bottom: 12px;
240351
}
241-
242-
.progress-tracker--center {
243-
--path-position-inline: calc(50% + (var(--marker-size-inline) / 2) + var(--marker-spacing));
244-
245-
text-align: center;
246-
}
247-
248-
.progress-tracker--center:not(.progress-tracker--vertical) .progress-step::before {
249-
margin-left: auto;
250-
margin-right: auto;
251-
}
252-
253-
.progress-tracker--center.progress-tracker--vertical {
254-
max-width: 240px;
255-
margin-left: auto;
256-
margin-right: auto;
257-
}
258-
259-
.progress-tracker--right {
260-
--path-position-inline: calc(100% + var(--marker-spacing));
261-
262-
text-align: right;
263-
}
264-
265-
.progress-tracker--right:not(.progress-tracker--vertical) .progress-step::before {
266-
margin-left: auto;
267-
}
268-
269-
.progress-tracker--right.progress-tracker--vertical .progress-step {
270-
flex-direction: row-reverse;
271-
}
272-
273-
.progress-tracker--right.progress-tracker--vertical .progress-step::after {
274-
left: auto;
275-
right: var(--path-position-block);
276-
}
277-
278-
.progress-tracker--reverse:not(.progress-tracker--vertical) .progress-step::after {
279-
top: auto;
280-
bottom: var(--path-position-block);
281-
}
282-
283-
.progress-tracker--reverse.progress-tracker--marker-square .progress-step::after {
284-
top: auto;
285-
bottom: 0;
286-
}
287-
288-
.progress-tracker--reverse .progress-text {
289-
order: -1;
290-
flex-grow: 1;
291-
}
292-
293-
.progress-tracker--anim .progress-step.is-active:not(:last-child)::after, .progress-tracker--anim .progress-step.is-complete:not(:last-child)::after {
294-
background-image: linear-gradient(to right, var(--path-bg-active) 50%, var(--path-bg-complete) 50%);
295-
background-size: 200% 100%;
296-
background-position: 0% 100%;
297-
}
298-
299-
.progress-tracker--anim .progress-step.is-complete:not(:last-child)::after {
300-
background-position: -100% 100%;
301-
}
302-
303-
.progress-tracker--anim.progress-tracker--vertical .progress-step.is-active:not(:last-child)::after, .progress-tracker--anim.progress-tracker--vertical .progress-step.is-complete:not(:last-child)::after {
304-
background-image: linear-gradient(to bottom, var(--path-bg-active) 50%, var(--path-bg-complete) 50%);
305-
background-size: 100% 200%;
306-
background-position: 100% 0%;
307-
}
308-
309-
.progress-tracker--anim.progress-tracker--vertical .progress-step.is-complete:not(:last-child)::after {
310-
background-position: 100% -100%;
311-
}

0 commit comments

Comments
 (0)