radio/lorgar/views/slider.js

"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");
                }
                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");
                    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");
            },
            _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;
    })
})();