Skip to content

Commit 97e6446

Browse files
shadyvdshadyvd
committed
feat(mdc-linear-progress): straight line showing progress
Standard progress indicator, with indeterminate progress support, and paleete-ized Signed-off-by:Vish Desai <shadyvd@hotmail.com>
1 parent 07c30a3 commit 97e6446

File tree

7 files changed

+234
-0
lines changed

7 files changed

+234
-0
lines changed

‎packages/ember-mdc-web/addon/components/mdc-linear-progress/index.hbs

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{{! template-lint-disable no-inline-styles}}
2+
{{! template-lint-disable style-concatenation}}
3+
<div
4+
class='mdc-linear-progress'
5+
{{! Add styling classes as necessary }}
6+
{{has-class-if @indeterminate 'mdc-linear-progress--indeterminate'}}
7+
{{has-class-if @reversed 'mdc-linear-progress--reversed'}}
8+
{{! Accessibility }}
9+
role='progressbar'
10+
aria-label={{this.label}}
11+
aria-valuemin='0'
12+
aria-valuemax='1'
13+
aria-valuenow={{@progress}}
14+
{{! Re-calculate colours as necessary }}
15+
{{on-args-change this.recalcStyles @palette}}
16+
{{! Store reference to the element for DOM manipulation }}
17+
{{store-element this.storeElement}}
18+
{{! HTML attributes added in the calling template }}
19+
...attributes
20+
>
21+
{{#if this.bufferValue}}
22+
<div
23+
class='mdc-linear-progress__buffer'
24+
style='transform: scale({{this.bufferValue}})'
25+
></div>
26+
<div class='mdc-linear-progress__buffer-dots'></div>
27+
{{/if}}
28+
<div
29+
class='mdc-linear-progress__bar mdc-linear-progress__primary-bar'
30+
style='transform: scale({{this.displayValue}})'
31+
>
32+
<span class='mdc-linear-progress__bar-inner'></span>
33+
</div>
34+
{{#unless @indeterminate}}
35+
<div
36+
class='mdc-linear-progress__bar mdc-linear-progress__secondary-bar'
37+
>
38+
<span class='mdc-linear-progress__bar-inner'></span>
39+
</div>
40+
{{/unless}}
41+
</div>

‎packages/ember-mdc-web/addon/components/mdc-linear-progress/index.js

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import Component from '@glimmer/component';
2+
import debugLogger from 'ember-debug-logger';
3+
4+
import { action } from '@ember/object';
5+
6+
export default class MdcLinearProgressComponent extends Component {
7+
// #region Accessed Services
8+
// #endregion
9+
10+
// #region Tracked Attributes
11+
// #endregion
12+
13+
// #region Constructor
14+
constructor() {
15+
super(...arguments);
16+
this.#debug?.(`constructor`);
17+
}
18+
// #endregion
19+
20+
// #region Lifecycle Hooks
21+
// #endregion
22+
23+
// #region DOM Event Handlers
24+
@action
25+
recalcStyles() {
26+
this.#debug?.(`recalcStyles: re-calculating styling`);
27+
if (!this.#element) return;
28+
29+
this.#element
30+
?.querySelector?.('span.mdc-linear-progress__bar-inner')
31+
?.style?.removeProperty?.('--mdc-linear-progress-color');
32+
33+
const paletteColour = `--mdc-theme-${this?.args?.palette ?? 'primary'}`;
34+
this.#element
35+
?.querySelector?.('span.mdc-linear-progress__bar-inner')
36+
?.style?.setProperty?.(
37+
'--mdc-linear-progress-color',
38+
`var(${paletteColour})`
39+
);
40+
}
41+
42+
@action
43+
storeElement(element) {
44+
this.#debug?.(`storeElement: `, element);
45+
this.#element = element;
46+
47+
this?.recalcStyles?.();
48+
}
49+
// #endregion
50+
51+
// #region Computed Properties
52+
get bufferValue() {
53+
if (this?.args?.indeterminate) {
54+
return 0;
55+
}
56+
57+
let value = Number(this?.args?.bufferedValue) ?? this?.rangeLower;
58+
if (Number?.isNaN(value)) value = this?.rangeLower;
59+
60+
if (value < this?.rangeLower) value = this?.rangeLower;
61+
if (value > this?.rangeUpper) value = this?.rangeUpper;
62+
63+
const bufferValue =
64+
(value - this?.rangeLower) / (this?.rangeUpper - this?.rangeLower);
65+
66+
this.#debug?.(`bufferValue: ${bufferValue}`);
67+
return bufferValue;
68+
}
69+
70+
get displayValue() {
71+
if (this?.args?.indeterminate) {
72+
return 0;
73+
}
74+
75+
let value = Number(this?.args?.progress) ?? this?.rangeLower;
76+
if (Number?.isNaN(value)) value = this?.rangeLower;
77+
78+
if (value < this?.rangeLower) value = this?.rangeLower;
79+
if (value > this?.rangeUpper) value = this?.rangeUpper;
80+
81+
const displayValue =
82+
(value - this?.rangeLower) / (this?.rangeUpper - this?.rangeLower);
83+
84+
this.#debug?.(`displayValue: ${displayValue}`);
85+
return displayValue;
86+
}
87+
88+
get maxValue() {
89+
let maxValue = Number(this?.args?.maxValue) ?? 1;
90+
if (Number?.isNaN(maxValue)) maxValue = 1;
91+
92+
this.#debug?.(`maxValue: ${maxValue}`);
93+
return maxValue;
94+
}
95+
96+
get minValue() {
97+
let minValue = Number(this?.args?.minValue) ?? 0;
98+
if (Number?.isNaN(minValue)) minValue = 0;
99+
100+
this.#debug?.(`minValue: ${minValue}`);
101+
return minValue;
102+
}
103+
104+
get label() {
105+
return this?.args?.label ?? 'linear progress bar';
106+
}
107+
108+
get rangeLower() {
109+
const rangeLower =
110+
(Math?.abs?.(this?.minValue + this?.maxValue) -
111+
Math?.abs?.(this?.minValue - this?.maxValue)) /
112+
2;
113+
114+
this.#debug?.(`rangeLower: ${rangeLower}`);
115+
return rangeLower;
116+
}
117+
118+
get rangeUpper() {
119+
const rangeUpper =
120+
(Math?.abs?.(this?.minValue + this?.maxValue) +
121+
Math?.abs?.(this?.minValue - this?.maxValue)) /
122+
2;
123+
124+
this.#debug?.(`rangeUpper: ${rangeUpper}`);
125+
return rangeUpper;
126+
}
127+
// #endregion
128+
129+
// #region Private Methods
130+
// #endregion
131+
132+
// #region Default Sub-components
133+
// #endregion
134+
135+
// #region Private Attributes
136+
#debug = debugLogger('component:mdc-linear-progress');
137+
#element = null;
138+
#oneRem = 16;
139+
// #endregion
140+
}

‎packages/ember-mdc-web/addon/styles/ember-mdc-web.scss

+4
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,10 @@
101101
@use '@material/image-list/mdc-image-list';
102102
@use './emdc-image-list.css';
103103

104+
/* Linear progress component */
105+
@use '@material/linear-progress/mdc-linear-progress';
106+
@use './emdc-linear-progress.css';
107+
104108
/* List component */
105109
@use '@material/list/mdc-list';
106110
@use './emdc-list.css';

‎packages/ember-mdc-web/addon/styles/emdc-linear-progress.css

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.mdc-linear-progress__bar-inner {
2+
border-color: var(
3+
--mdc-linear-progress-color,
4+
var(--mdc-theme-primary, #01579b)
5+
);
6+
}
7+
8+
.mdc-linear-progress__buffer {
9+
background-color: #e6e6e6;
10+
}
11+
12+
.mdc-linear-progress__buffer-dots {
13+
position: absolute;
14+
width: 100%;
15+
height: 100%;
16+
}
17+
18+
.mdc-linear-progress--indeterminate .mdc-linear-progress__primary-bar {
19+
-webkit-animation: mdc-linear-progress-primary-indeterminate-translate 2s infinite
20+
linear;
21+
animation: mdc-linear-progress-primary-indeterminate-translate 2s infinite
22+
linear;
23+
}

‎packages/ember-mdc-web/addon/styles/tailwind-utilities.css

+4
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@
1212
.grid {
1313
display: grid
1414
}
15+
.transform {
16+
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
17+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
18+
}
1519
.flex-row {
1620
-webkit-box-orient: horizontal;
1721
-webkit-box-direction: normal;

‎packages/ember-mdc-web/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,7 @@
163163
"./components/mdc-image-list/index.js": "./dist/_app_/components/mdc-image-list/index.js",
164164
"./components/mdc-image-list/masonry-item/index.js": "./dist/_app_/components/mdc-image-list/masonry-item/index.js",
165165
"./components/mdc-image-list/regular-item/index.js": "./dist/_app_/components/mdc-image-list/regular-item/index.js",
166+
"./components/mdc-linear-progress/index.js": "./dist/_app_/components/mdc-linear-progress/index.js",
166167
"./components/mdc-list-group/header/index.js": "./dist/_app_/components/mdc-list-group/header/index.js",
167168
"./components/mdc-list-group/index.js": "./dist/_app_/components/mdc-list-group/index.js",
168169
"./components/mdc-list/divider/index.js": "./dist/_app_/components/mdc-list/divider/index.js",

‎packages/ember-mdc-web/tailwindcss/emdc-linear-progress.css

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.mdc-linear-progress__bar-inner {
2+
border-color: var(
3+
--mdc-linear-progress-color,
4+
var(--mdc-theme-primary, #01579b)
5+
);
6+
}
7+
8+
.mdc-linear-progress__buffer {
9+
background-color: #e6e6e6;
10+
}
11+
12+
.mdc-linear-progress__buffer-dots {
13+
position: absolute;
14+
width: 100%;
15+
height: 100%;
16+
}
17+
18+
.mdc-linear-progress--indeterminate .mdc-linear-progress__primary-bar {
19+
animation: mdc-linear-progress-primary-indeterminate-translate 2s infinite
20+
linear;
21+
}

0 commit comments

Comments
 (0)