cyp/app/js/lib/range.js

169 lines
4.5 KiB
JavaScript
Raw Permalink Normal View History

2019-04-25 22:09:48 +08:00
import * as html from "./html.js";
class Range extends HTMLElement {
2019-04-30 15:42:16 +08:00
static get observedAttributes() { return ["min", "max", "value", "step", "disabled"]; }
2019-04-25 22:09:48 +08:00
constructor() {
super();
2019-04-26 19:48:23 +08:00
this._dom = {};
2019-04-25 22:09:48 +08:00
2019-04-26 19:48:23 +08:00
this.innerHTML = `
<span class="-track"></span>
<span class="-elapsed"></span>
<span class="-remaining"></span>
<div class="-inner">
<button class="-thumb"></button>
</div>
`;
2019-04-25 22:09:48 +08:00
2019-04-26 19:48:23 +08:00
Array.from(this.querySelectorAll("[class^='-']")).forEach(node => {
let name = node.className.substring(1);
this._dom[name] = node;
});
2019-04-25 22:09:48 +08:00
this._update();
2019-04-26 19:48:23 +08:00
this.addEventListener("mousedown", this);
2019-04-30 15:42:16 +08:00
this.addEventListener("keydown", this);
2019-04-25 22:09:48 +08:00
}
2019-04-30 15:42:16 +08:00
get _valueAsNumber() {
let raw = (this.hasAttribute("value") ? Number(this.getAttribute("value")) : 50);
return this._constrain(raw);
}
get _minAsNumber() {
return (this.hasAttribute("min") ? Number(this.getAttribute("min")) : 0);
}
get _maxAsNumber() {
return (this.hasAttribute("max") ? Number(this.getAttribute("max")) : 100);
}
get _stepAsNumber() {
return (this.hasAttribute("step") ? Number(this.getAttribute("step")) : 1);
}
get value() { return String(this._valueAsNumber); }
get valueAsNumber() { return this._valueAsNumber; }
get min() { return this.hasAttribute("min") ? this.getAttribute("min") : ""; }
get max() { return this.hasAttribute("max") ? this.getAttribute("max") : ""; }
get step() { return this.hasAttribute("step") ? this.getAttribute("step") : ""; }
get disabled() { return this.hasAttribute("disabled"); }
set _valueAsNumber(value) { this.value = String(value); }
2019-04-26 19:48:23 +08:00
set min(min) { this.setAttribute("min", min); }
set max(max) { this.setAttribute("max", max); }
set value(value) { this.setAttribute("value", value); }
2019-04-30 15:42:16 +08:00
set step(step) { this.setAttribute("step", step); }
2019-04-26 19:48:23 +08:00
set disabled(disabled) {
disabled ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
2019-04-25 22:09:48 +08:00
}
attributeChangedCallback(name, oldValue, newValue) {
2019-04-26 19:48:23 +08:00
switch (name) {
case "min":
case "max":
case "value":
2019-04-30 15:42:16 +08:00
case "step":
2019-04-26 19:48:23 +08:00
this._update();
break;
}
2019-04-25 22:09:48 +08:00
}
2019-04-26 19:48:23 +08:00
handleEvent(e) {
switch (e.type) {
case "mousedown":
if (this.disabled) { return; }
document.addEventListener("mousemove", this);
document.addEventListener("mouseup", this);
this._setToMouse(e);
break;
case "mousemove":
this._setToMouse(e);
break;
case "mouseup":
document.removeEventListener("mousemove", this);
document.removeEventListener("mouseup", this);
this.dispatchEvent(new CustomEvent("change"));
break;
2019-04-30 15:42:16 +08:00
case "keydown":
if (this.disabled) { return; }
this._handleKey(e.code);
this.dispatchEvent(new CustomEvent("input"));
this.dispatchEvent(new CustomEvent("change"));
break;
2019-04-26 19:48:23 +08:00
}
}
2019-04-25 22:09:48 +08:00
2019-04-30 15:42:16 +08:00
_handleKey(code) {
let min = this._minAsNumber;
let max = this._maxAsNumber;
let range = max - min;
let step = this._stepAsNumber;
switch (code) {
case "ArrowLeft":
case "ArrowDown":
this._valueAsNumber = this._constrain(this._valueAsNumber - step);
break;
case "ArrowRight":
case "ArrowUp":
this._valueAsNumber = this._constrain(this._valueAsNumber + step);
break;
case "Home": this._valueAsNumber = this._constrain(min); break;
case "End": this._valueAsNumber = this._constrain(max); break;
case "PageUp": this._valueAsNumber = this._constrain(this._valueAsNumber + range/10); break;
case "PageDown": this._valueAsNumber = this._constrain(this._valueAsNumber - range/10); break;
}
}
_constrain(value) {
const min = this._minAsNumber;
const max = this._maxAsNumber;
const step = this._stepAsNumber;
value = Math.max(value, min);
value = Math.min(value, max);
value -= min;
value = Math.round(value / step) * step;
value += min;
if (value > max) { value -= step; }
return value;
}
2019-04-25 22:09:48 +08:00
_update() {
2019-04-30 15:42:16 +08:00
let min = this._minAsNumber;
let max = this._maxAsNumber;
let frac = (this._valueAsNumber-min) / (max-min);
2019-04-26 19:48:23 +08:00
this._dom.thumb.style.left = `${frac * 100}%`;
this._dom.remaining.style.left = `${frac * 100}%`;
this._dom.elapsed.style.width = `${frac * 100}%`;
}
_setToMouse(e) {
let rect = this._dom.inner.getBoundingClientRect();
let x = e.clientX;
x = Math.max(x, rect.left);
x = Math.min(x, rect.right);
2019-04-30 15:42:16 +08:00
let min = this._minAsNumber;
let max = this._maxAsNumber;
2019-04-26 19:48:23 +08:00
2019-04-30 15:42:16 +08:00
let frac = (x-rect.left) / (rect.right-rect.left);
let value = this._constrain(min + frac * (max-min));
if (value == this._valueAsNumber) { return; }
2019-04-26 19:48:23 +08:00
2019-04-30 15:42:16 +08:00
this._valueAsNumber = value;
2019-04-26 19:48:23 +08:00
this.dispatchEvent(new CustomEvent("input"));
2019-04-25 22:09:48 +08:00
}
}
customElements.define('x-range', Range);