gov-gui
Version:
Gov UI Component Library Typscript Build
325 lines (324 loc) • 11.8 kB
JavaScript
import { h } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class GovSlider {
constructor() {
// Enforce mutable props for dynamic updates.
this.min = 0;
this.max = 100;
this.step = 1;
this.value = 50;
this.isDragging = false;
this.animationDelay = '2s';
this.allClasses = '';
this.handleMove = (e) => {
if (!this.isDragging)
return;
const rect = this.sliderTrack.getBoundingClientRect();
const clientX = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX;
const x = Math.min(Math.max(clientX - rect.left, 0), rect.width);
const percentage = x / rect.width;
const newValue = this.min + percentage * (this.max - this.min);
// Snap to the nearest step and clamp the value.
this.value = this.clampValue(Math.round(newValue / this.step) * this.step);
this.sliderChange.emit(this.value);
};
this.stopDrag = () => {
this.isDragging = false;
window.removeEventListener('mousemove', this.handleMove);
window.removeEventListener('touchmove', this.handleMove);
window.removeEventListener('mouseup', this.stopDrag);
window.removeEventListener('touchend', this.stopDrag);
};
}
//watching for any change in animations to trigger them
watchAnimations() {
this.provideClass();
}
watchAnimationsDelay() {
this.provideClass();
}
watchAnimationsSpeed() {
this.provideClass();
}
validateMin(newMin) {
// Clamp min to be within 0 and 100.
const clamped = Math.max(0, Math.min(newMin, 100));
if (clamped !== this.min) {
this.min = clamped;
}
// Re-clamp current value if necessary.
this.value = this.clampValue(this.value);
}
validateMax(newMax) {
// Clamp max to be within 0 and 100.
const clamped = Math.min(100, Math.max(newMax, 0));
if (clamped !== this.max) {
this.max = clamped;
}
// Re-clamp current value if necessary.
this.value = this.clampValue(this.value);
}
validateValue(newValue) {
this.value = this.clampValue(newValue);
}
clampValue(value) {
return Math.min(Math.max(value, this.min), this.max);
}
startDrag() {
this.isDragging = true;
window.addEventListener('mousemove', this.handleMove);
window.addEventListener('touchmove', this.handleMove);
window.addEventListener('mouseup', this.stopDrag);
window.addEventListener('touchend', this.stopDrag);
}
// inject the animations and styles on component load
componentWillLoad() {
// Validate the initial properties.
this.validateMin(this.min);
this.validateMax(this.max);
this.value = this.clampValue(this.value);
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed,
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
//Called on change of any animation related property to trigger change
provideClass() {
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed,
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
render() {
const percentage = ((this.value - this.min) / (this.max - this.min)) * 100;
return (h("div", { key: '6c4e0d7823f40ce9f4923b63d234ac7df11b0737', class: `slider-container ${this.allClasses}` }, this.label && h("div", { key: '42aca98b0e616fdc7b7055dda6f376e339fa3116', class: "slider-label" }, this.label), h("div", { key: '1bb1dc2946147dddd92aeaa0a4a8d9f04e760354', class: "value-counter", style: { left: `${percentage}%` } }, this.value), h("div", { key: '4f7123dc1715d6d51741e0890c51d81d4ed0db23', class: "slider-track", ref: el => (this.sliderTrack = el) }, h("div", { key: '23bc54a0991fb48e1a2d7dcbb88baea7df42315b', class: "slider-fill", style: { width: `${percentage}%` } }), h("div", { key: 'a9d74b862d41beebd5531bb0a51a3eb0075ff697', class: "slider-thumb", style: { left: `${percentage}%` }, onMouseDown: () => this.startDrag(), onTouchStart: () => this.startDrag() })), h("div", { key: '260e46292f8f0f3e715b0c20e2cd033d789e2b90', class: "limits" }, h("span", { key: '1826d26101a0506151dd1f19910920ae5cc3188a' }, this.min), h("span", { key: '11015ff1b2ae43e83d979cb945384f009f94c40c' }, this.max))));
}
static get is() { return "gov-slider"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["gov-slider.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-slider.css"]
};
}
static get properties() {
return {
"min": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "min",
"reflect": false,
"defaultValue": "0"
},
"max": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "max",
"reflect": false,
"defaultValue": "100"
},
"step": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "step",
"reflect": false,
"defaultValue": "1"
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "label",
"reflect": false
},
"value": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "value",
"reflect": false,
"defaultValue": "50"
},
"animation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation",
"reflect": false
},
"animationDelay": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'2s' | '3s' | '4s' | '5s'",
"resolved": "\"2s\" | \"3s\" | \"4s\" | \"5s\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-delay",
"reflect": false,
"defaultValue": "'2s'"
},
"animationSpeed": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'slow' | 'slower' | 'fast' | 'faster'",
"resolved": "\"fast\" | \"faster\" | \"slow\" | \"slower\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-speed",
"reflect": false
}
};
}
static get states() {
return {
"isDragging": {}
};
}
static get events() {
return [{
"method": "sliderChange",
"name": "sliderChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
}
}];
}
static get elementRef() { return "hostElement"; }
static get watchers() {
return [{
"propName": "animation",
"methodName": "watchAnimations"
}, {
"propName": "animationDelay",
"methodName": "watchAnimationsDelay"
}, {
"propName": "animationSpeed",
"methodName": "watchAnimationsSpeed"
}, {
"propName": "min",
"methodName": "validateMin"
}, {
"propName": "max",
"methodName": "validateMax"
}, {
"propName": "value",
"methodName": "validateValue"
}];
}
}
//# sourceMappingURL=gov-slider.js.map