radio/lorgar/views/slider.js

143 lines
6.0 KiB
JavaScript
Raw Normal View History

2019-01-30 20:36:33 +00:00
"use strict";
(function() {
var moduleName = "views/slider";
var deps = [];
deps.push("views/view");
define(moduleName, deps, function() {
var View = require("views/view");
var Slider = View.inherit({
className: "Slider",
constructor: function(controller, options) {
var base = {
minHeight: 10,
maxHeight: 10
};
W.extend(base, options)
var el = document.createElement("div");
this._createBars();
View.fn.constructor.call(this, controller, base, el);
this._seeking = false;
this._createProxy();
this._f.on("value", this._onValue, this);
this._f.on("enabled", this._onEnabled, this);
this._e.style.backgroundColor = "#eeeeee";
this._e.appendChild(this._value);
if (this._f.enabled) {
this._e.addEventListener("mousedown", this._proxy.onMouseDown, false);
this._e.addEventListener("touchstart", W.touchToMouse, false);
this._e.addEventListener("touchmove", W.touchToMouse, false);
this._e.addEventListener("touchend", W.touchToMouse, false);
}
},
destructor: function() {
if (this._seeking) {
window.removeEventListener("mouseup", this._proxy.onMouseUp);
window.removeEventListener("mousemove", this._proxy.onMouseMove);
lorgar._body.removeClass("dragging");
lorgar._body.removeClass("non-selectable");
2019-01-30 20:36:33 +00:00
}
if (this._f.enabled) {
this._e.removeEventListener("mousedown", this._proxy.onMouseDown);
this._e.removeEventListener("touchstart", W.touchToMouse);
this._e.removeEventListener("touchmove", W.touchToMouse);
this._e.removeEventListener("touchend", W.touchToMouse);
}
this._f.off("value", this._value, this);
this._f.off("enabled", this._onEnabled, this);
View.fn.destructor.call(this);
},
_createBars: function() {
this._value = document.createElement("div");
this._value.style.backgroundColor = View.theme.primaryColor || "#ff0000";
this._value.style.height = "100%";
this._value.style.width = "0";
this._value.style.position = "absolute";
this._value.style.top = "0";
this._value.style.left = "0";
},
_createProxy: function () {
this._proxy = {
onMouseDown: this._onMouseDown.bind(this),
onMouseUp: this._onMouseUp.bind(this),
onMouseMove: this._onMouseMove.bind(this)
}
},
_onData: function() {
this._onValue(this._f.value);
},
_onEnabled: function(enabled) {
if (enabled) {
this._e.addEventListener("mousedown", this._proxy.onMouseDown, false);
this._e.addEventListener("touchstart", W.touchToMouse, false);
this._e.addEventListener("touchmove", W.touchToMouse, false);
this._e.addEventListener("touchend", W.touchToMouse, false);
} else {
if (this._seeking) {
this._onMouseUp();
}
this._e.removeEventListener("mousedown", this._proxy.onMouseDown);
this._e.removeEventListener("touchstart", W.touchToMouse);
this._e.removeEventListener("touchmove", W.touchToMouse);
this._e.removeEventListener("touchend", W.touchToMouse);
}
},
_onMouseDown: function(e) {
if (e.which === 1) {
window.addEventListener("mouseup", this._proxy.onMouseUp);
window.addEventListener("mousemove", this._proxy.onMouseMove);
lorgar._body.addClass("dragging");
lorgar._body.addClass("non-selectable");
2019-01-30 20:36:33 +00:00
this._seeking = true;
this._ap = this.getAbsolutePosition();
var seek = Math.max(Math.min(e.pageX - this._ap.x, this._w), 0);
var nSeek = seek / this._w;
if (this._seek !== nSeek) {
this._seek = nSeek;
this._f.setValue(this._seek);
}
}
},
_onMouseMove: function(e) {
var seek = Math.max(Math.min(e.pageX - this._ap.x, this._w), 0);
var nSeek = seek / this._w;
if (this._seek !== nSeek) {
this._seek = nSeek;
this._f.setValue(this._seek);
}
},
_onMouseUp: function() {
delete this._ap;
delete this._seek;
this._seeking = false;
window.removeEventListener("mouseup", this._proxy.onMouseUp);
window.removeEventListener("mousemove", this._proxy.onMouseMove);
lorgar._body.removeClass("dragging");
2019-01-30 20:36:33 +00:00
},
_onValue: function(pb) {
this._value.style.width = pb * 100 + "%";
},
_resetTheme: function() {
View.fn._resetTheme.call(this);
this._value.style.backgroundColor = View.theme.primaryColor || "#ff0000";
}
});
return Slider;
})
})();