diff --git a/Makefile b/Makefile
index 70b4edc..6897838 100644
--- a/Makefile
+++ b/Makefile
@@ -25,7 +25,6 @@ watch: all
while inotifywait -e MODIFY -r $(APP)/css $(APP)/js ; do make $^ ; done
clean:
- systemctl --user disable $(SERVICE)
rm -f $(SERVICE) $(CSS)
.PHONY: all watch icons service clean
diff --git a/app/app.css b/app/app.css
index 5f3c9d5..5a9a475 100644
--- a/app/app.css
+++ b/app/app.css
@@ -99,9 +99,11 @@ x-range {
--thumb-size: 8px;
--thumb-color: #fff;
--thumb-shadow: #000;
+ --thumb-hover-color: #ddd;
--track-size: 4px;
- --track-color: gray;
- --elapsed-color: lightgray;
+ --track-color: #888;
+ --track-shadow: #000;
+ --elapsed-color: #ddd;
--remaining-color: transparent;
--radius: calc(var(--track-size)/2);
width: 192px;
@@ -119,7 +121,8 @@ x-range .-remaining {
x-range .-track {
width: 100%;
left: 0;
- background-color: gray;
+ background-color: var(--track-color);
+ box-shadow: 0 0 1px var(--thumb-shadow);
}
x-range .-elapsed {
left: 0;
@@ -150,6 +153,9 @@ x-range .-thumb {
x-range[disabled] {
opacity: 0.5;
}
+x-range:not([disabled]) .-thumb:hover {
+ background-color: var(--thumb-hover-color);
+}
main {
flex-grow: 1;
overflow: hidden;
diff --git a/app/css/range.less b/app/css/range.less
deleted file mode 100644
index 0e7d34b..0000000
--- a/app/css/range.less
+++ /dev/null
@@ -1,63 +0,0 @@
-x-range {
- --thumb-size: 8px;
- --thumb-color: #fff;
- --thumb-shadow: #000;
- --track-size: 4px;
- --track-color: gray;
- --elapsed-color: lightgray;
- --remaining-color: transparent;
-
- --radius: calc(var(--track-size)/2);
-
- width: 192px;
- height: 16px;
- position: relative;
-
- .-track, .-elapsed, .-remaining {
- position: absolute;
- top: calc(50% - var(--track-size)/2);
- height: var(--track-size);
- border-radius: var(--radius);
- }
-
- .-track {
- width: 100%;
- left: 0;
- background-color: gray;
- }
-
- .-elapsed {
- left: 0;
- background-color: var(--elapsed-color);
- }
-
- .-remaining {
- right: 0;
- background-color: var(--remaining-color);
- }
-
- .-inner {
- position: absolute;
- left: var(--thumb-size);
- right: var(--thumb-size);
- top: 0;
- bottom: 0;
- }
-
- .-thumb {
- all: unset;
- position: absolute;
- top: 50%;
- transform: translate(-50%, -50%);
-
- border-radius: 50%;
- width: calc(2*var(--thumb-size));
- height: calc(2*var(--thumb-size));
- background-color: var(--thumb-color);
- box-shadow: 0 0 2px var(--thumb-shadow);
- }
-
- &[disabled] {
- opacity: 0.5;
- }
-}
diff --git a/app/css/range.less b/app/css/range.less
new file mode 120000
index 0000000..cf33e2d
--- /dev/null
+++ b/app/css/range.less
@@ -0,0 +1 @@
+../../node_modules/custom-range/range.less
\ No newline at end of file
diff --git a/app/js/lib/range.js b/app/js/lib/range.js
deleted file mode 100644
index 3f53099..0000000
--- a/app/js/lib/range.js
+++ /dev/null
@@ -1,168 +0,0 @@
-import * as html from "./html.js";
-
-class Range extends HTMLElement {
- static get observedAttributes() { return ["min", "max", "value", "step", "disabled"]; }
-
- constructor() {
- super();
-
- this._dom = {};
-
- this.innerHTML = `
-
-
-
-
-
-
- `;
-
- Array.from(this.querySelectorAll("[class^='-']")).forEach(node => {
- let name = node.className.substring(1);
- this._dom[name] = node;
- });
-
- this._update();
-
- this.addEventListener("mousedown", this);
- this.addEventListener("keydown", this);
- }
-
- 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); }
- set min(min) { this.setAttribute("min", min); }
- set max(max) { this.setAttribute("max", max); }
- set value(value) { this.setAttribute("value", value); }
- set step(step) { this.setAttribute("step", step); }
- set disabled(disabled) {
- disabled ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
- }
-
- attributeChangedCallback(name, oldValue, newValue) {
- switch (name) {
- case "min":
- case "max":
- case "value":
- case "step":
- this._update();
- break;
- }
- }
-
- 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;
-
- case "keydown":
- if (this.disabled) { return; }
- this._handleKey(e.code);
- this.dispatchEvent(new CustomEvent("input"));
- this.dispatchEvent(new CustomEvent("change"));
- break;
- }
- }
-
- _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;
- }
-
- _update() {
- let min = this._minAsNumber;
- let max = this._maxAsNumber;
- 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 = this._minAsNumber;
- let max = this._maxAsNumber;
-
- let frac = (x-rect.left) / (rect.right-rect.left);
- let value = this._constrain(min + frac * (max-min));
- if (value == this._valueAsNumber) { return; }
-
- this._valueAsNumber = value;
- this.dispatchEvent(new CustomEvent("input"));
- }
-}
-
-customElements.define('x-range', Range);
diff --git a/app/js/lib/range.js b/app/js/lib/range.js
new file mode 120000
index 0000000..fcc7d2c
--- /dev/null
+++ b/app/js/lib/range.js
@@ -0,0 +1 @@
+../../../node_modules/custom-range/range.js
\ No newline at end of file
diff --git a/package.json b/package.json
index c166b75..eca6b3d 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
"description": "",
"main": "index.js",
"dependencies": {
+ "custom-range": "^1.0.0",
"node-static": "^0.7.11",
"ws2mpd": "^2.0.0"
},