material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-10-26 13:40:03 +03:00
Code Issues Projects Releases Wiki Activity

Buffer default value is now 0 and added some code cleanup.

Browse Source
This commit is contained in:
Luke Vo 2024-02-15 17:28:38 +07:00
parent 1e1048ace5
commit a8a9d56581
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
progress/internal/linear-progress.ts
View File

@ -16,9 +16,9 @@ import {Progress} from './progress.js';
export class LinearProgress extends Progress { export class LinearProgress extends Progress {
/** /**
* Buffer amount to display, a fraction between 0 and `max`. * Buffer amount to display, a fraction between 0 and `max`.
* If negative, the buffer is not displayed. * If the value is 0 or negative, the buffer is not displayed.
*/ */
@property({type: Number}) buffer = -1; @property({type: Number}) buffer = 0;
// Note, the indeterminate animation is rendered with transform %'s // Note, the indeterminate animation is rendered with transform %'s
// Previously, this was optimized to use px calculated with the resizeObserver // Previously, this was optimized to use px calculated with the resizeObserver
@ -29,17 +29,20 @@ export class LinearProgress extends Progress {
(this.indeterminate ? 1 : this.value / this.max) * 100 (this.indeterminate ? 1 : this.value / this.max) * 100
}%)`, }%)`,
}; };
const bufferValue = Math.min(this.buffer ?? 0, this.max);
const hasBuffer = bufferValue > 0;
const dotSize = this.indeterminate || !hasBuffer ? 1 : bufferValue / this.max;
const dotStyles = { const dotStyles = {
transform: `scaleX(${ transform: `scaleX(${dotSize * 100}%)`,
// == null is used to check for both null and undefined when buffer attribute is removed
(this.indeterminate || this.buffer == null || this.buffer < 0 ? 1 : this.buffer / this.max) * 100
}%)`,
}; };
// Only display dots when visible - this prevents invisible infinite // Only display dots when visible - this prevents invisible infinite
// animation. // animation.
const hideDots = const hideDots =
this.indeterminate || this.buffer == null || this.buffer < 0 || this.buffer >= this.max || this.value >= this.max; this.indeterminate || !hasBuffer || this.value >= this.max;
return html` return html`
<div class="dots" ?hidden=${hideDots}></div> <div class="dots" ?hidden=${hideDots}></div>
<div class="inactive-track" style=${styleMap(dotStyles)}></div> <div class="inactive-track" style=${styleMap(dotStyles)}></div>