mirror of
https://github.com/material-components/material-web.git
synced 2024-10-26 13:40:03 +03:00
Buffer default value is now 0 and added some code cleanup.
This commit is contained in:
parent
1e1048ace5
commit
a8a9d56581
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user