diff --git a/app/js/lib/range.js b/app/js/lib/range.js
index 291dd82..86d77df 100644
--- a/app/js/lib/range.js
+++ b/app/js/lib/range.js
@@ -1,58 +1,101 @@
import * as html from "./html.js";
class Range extends HTMLElement {
- static get observedAttributes() { return ["min", "max", "value"]; }
+ static get observedAttributes() { return ["min", "max", "value", "disabled"]; }
constructor() {
super();
- this._data = {
- min: 0,
- max: 100,
- value: 50
- };
+ this._dom = {};
- this.track = html.node("span", {className:"-track"});
- this.elapsed = html.node("span", {className:"-elapsed"});
- this.thumb = html.node("span", {className:"-thumb"});
+ this.innerHTML = `
+
+
+
+
+
+
+ `;
- this.appendChild(this.track);
- this.appendChild(this.elapsed);
- this.appendChild(this.thumb);
+ Array.from(this.querySelectorAll("[class^='-']")).forEach(node => {
+ let name = node.className.substring(1);
+ this._dom[name] = node;
+ });
this._update();
+
+ this.addEventListener("mousedown", this);
}
- set value(value) {
- value = Math.max(value, this._data.min);
- value = Math.min(value, this._data.max);
- this._data.value = value;
- this._update();
+ set min(min) { this.setAttribute("min", min); }
+ set max(max) { this.setAttribute("max", max); }
+ set value(value) { this.setAttribute("value", value); }
+ set disabled(disabled) {
+ disabled ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
}
- set min(min) {
- this._data.min = Math.min(min, this._data.max);
- this._update();
- }
-
- set max(max) {
- this._data.max = Math.max(max, this._data.max);
- this._update();
- }
+ get value() { return (this.hasAttribute("value") ? this.getAttribute("value") : "50"); }
+ get valueAsNumber() { return Number(this.value); }
+ get min() { return this.getAttribute("min"); }
+ get max() { return this.getAttribute("max"); }
+ get disabled() { return this.hasAttribute("disabled"); }
attributeChangedCallback(name, oldValue, newValue) {
- this[name] = newValue;
+ switch (name) {
+ case "min":
+ case "max":
+ case "value":
+ this._update();
+ break;
+ }
}
- get value() { return this._data.value; }
- get valueAsNumber() { return Number(this._data.value); }
- get min() { return this._data.min; }
- get max() { return this._data.max; }
+ 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;
+ }
+ }
_update() {
- let frac = (this._data.value - this._data.min) / (this._data.max - this._data.min);
- this.thumb.style.left = `${frac * 100}%`;
- this.elapsed.style.width = `${frac * 100}%`;
+ let min = Number(this.min || 0);
+ let max = Number(this.max || 100);
+ let frac = (this.valueAsNumber - min) / (max - min);
+ 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);
+
+ let min = Number(this.min || 0);
+ let max = Number(this.max || 100);
+
+ let frac = (x-rect.left)/(rect.right-rect.left);
+ let value = min + frac * (max-min);
+ value = Math.round(value); // fixme
+ if (value == this.valueAsNumber) { return; }
+
+ this.value = value.toString();
+ this.dispatchEvent(new CustomEvent("input"));
}
}
diff --git a/app/js/player.js b/app/js/player.js
index 22243e0..77df796 100644
--- a/app/js/player.js
+++ b/app/js/player.js
@@ -112,8 +112,8 @@ export function init(n) {
let all = node.querySelectorAll("[class]");
Array.from(all).forEach(node => DOM[node.className] = node);
- DOM.progress = DOM.timeline.querySelector("[type=range]");
- DOM.volume = DOM.volume.querySelector("[type=range]");
+ DOM.progress = DOM.timeline.querySelector("x-range");
+ DOM.volume = DOM.volume.querySelector("x-range");
DOM.play.addEventListener("click", e => command("play"));
DOM.pause.addEventListener("click", e => command("pause 1"));