From 6d9b611928e672e5fdab19a835f92a7f556ee073 Mon Sep 17 00:00:00 2001 From: Ondrej Zara Date: Tue, 30 Apr 2019 10:02:34 +0200 Subject: [PATCH] external range --- Makefile | 1 - app/app.css | 12 +++- app/css/range.less | 64 +---------------- app/js/lib/range.js | 169 +------------------------------------------- package.json | 1 + 5 files changed, 12 insertions(+), 235 deletions(-) mode change 100644 => 120000 app/css/range.less mode change 100644 => 120000 app/js/lib/range.js 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" },