radio/lorgar/views/helpers/scrollable.js

"use strict";
(function scrollable_js() {
    var moduleName = "views/helpers/scrollable";
    
    var defineArray = [];
    defineArray.push("views/view");
    defineArray.push("lib/wController/localModel");
    
    define(moduleName, defineArray, function scrollable_module() {
        var View = require("views/view");
        var LocalModel = require("lib/wController/localModel");
        
        var Scrollable = View.inherit({
            "className": "Scrollable",
            "constructor": function Scrollable(options, layout) {
                var base = {
                    draggable: true,
                    snapDistance: 5,
                    vertical: false,
                    horizontal: false,
                    virtual: false
                };
                var lm = new LocalModel();
                W.extend(base, options);
                View.fn.constructor.call(this, lm, base);
                
                this._l = layout;
                this._l._e.appendChild(this._e);
                this._horizontalBar = document.createElement("div");
                this._verticalBar = document.createElement("div");
                this._horizontalBarShown = false;
                this._verticalBarShown = false;
                
                this._initProxy();
                this._initBars();
                
                this._e.addEventListener("mousewheel", this._proxy.onMouseWheel, false);
                
                if (this._o.draggable) {
                    this.on("dragStart", this._onDragStart, this);
                    this.on("drag", this._onDrag, this);
                    this.on("dragEnd", this._onDragEnd, this);
                }
                
                this._uncyclic.push(function() {
                    lm.destructor();
                })
            },
            "destructor": function() {
                this._e.removeEventListener("mousewheel", this._proxy.onMouseWheel, false);
                this._l._e.removeChild(this._e);
                if (this._horizontalBarShown) {
                    this._l._e.removeChild(this._horizontalBar);
                }
                if (this._verticalBarShown) {
                    this._l._e.removeChild(this._verticalBar);
                }
                
                View.fn.destructor.call(this);
            },
            "appendChild": function(e) {
                this._e.appendChild(e);
            },
            "_initBars": function() {
                this._horizontalBar.style.position = "absolute";
                this._horizontalBar.style.left = "0";
                this._horizontalBar.style.bottom = "0";
                this._horizontalBar.style.height = "10px";
                this._horizontalBar.style.width = "0";
                this._horizontalBar.style.zIndex = "2";
                this._horizontalBar.style.backgroundColor = Scrollable.theme.primaryColor || "#ff0000";
                
                this._verticalBar.style.position = "absolute";
                this._verticalBar.style.right = "0";
                this._verticalBar.style.top = "0";
                this._verticalBar.style.height = "0";
                this._verticalBar.style.width = "10px";
                this._verticalBar.style.zIndex = "2";
                this._verticalBar.style.backgroundColor = Scrollable.theme.primaryColor || "#ff0000";
            },
            "_initProxy": function() {
                this._proxy = {
                    onMouseWheel: this._onMouseWheel.bind(this)
                };
            },
            "insertBefore": function(e, other) {
                this._e.insertBefore(e, other);
            },
            "maximizeMinSize": function(child) {
                var width = Math.max(this._o.minWidth, child._o.minWidth);
                var height = Math.max(this._o.minHeight, child._o.minHeight);
                
                this.setMinSize(width, height);
            },
            "_onDrag": function(pos) {
                var oX = this._o.horizontal ? pos.x : 0;
                var oY = this._o.vertical ? pos.y : 0;
                
                var aX = this._sX + oX;
                var aY = this._sY + oY;
                
                var cX = Math.max(Math.min(0, aX), this._l._w - this._w);
                var cY = Math.max(Math.min(0, aY), this._l._h - this._h);
                
                this.setTop(cY);
                this.setLeft(cX);
            },
            "_onDragEnd": function(pos) {
                //console.log("end")
            },
            "_onDragStart": function(pos) {
                this._sX = this._x;
                this._sY = this._y;
                //console.log("start");
            },
            "_onMouseWheel": function(e) {
                var dX = this._o.horizontal ? e.deltaX : 0;
                var dY = this._o.vertical ? e.deltaY : 0;
                
                var aX = this._x + dX;
                var aY = this._y - dY;
                
                var cX = Math.max(Math.min(0, aX), this._l._w - this._w);
                var cY = Math.max(Math.min(0, aY), this._l._h - this._h);
                
                this.setTop(cY);
                this.setLeft(cX);
            },
            "removeChild": function(e) {
                this._e.removeChild(e);
            },
            "_resetTheme": function() {
                View.fn._resetTheme.call(this);
                
                this._horizontalBar.style.backgroundColor = Scrollable.theme.primaryColor || "#ff0000";
                this._verticalBar.style.backgroundColor = Scrollable.theme.primaryColor || "#ff0000";
            },
            "setLeft": function(x) {
                if (this._x !== x) {
                    if (this._o.virtual) {
                        this._x = x;
                        this._e.style.left = "0px";
                    } else {
                        View.fn.setLeft.call(this, x);
                    }
                    if (x === 0) {
                        this.trigger("scrollLeft", 0);
                    } else {
                        this.trigger("scrollLeft", -x);
                    }
                    
                    this._horizontalBar.style.top = this._x / this._w * this._l._w + "px";
                }
            },
            "setSize": function(w, h) {
                if (this._o.virtual) {
                    this._w = this.constrainWidth(w);
                    this._h = this.constrainHeight(h);
                    
                    this._e.style.width = w + "px";
                    this._e.style.height = h + "px";
                    
                    this.trigger("resize", this._w, this._h);
                } else {
                    View.fn.setSize.call(this, w, h);
                }
                
                if (this._w > this._l._w) {
                    var width = this._l._w / this._w * this._l._w;
                    var wOffset = this._x / this._w * this._l._w;
                    
                    this._horizontalBar.style.width = width + "px";
                    this._horizontalBar.style.left = wOffset + "px";
                    
                    if (!this._horizontalBarShown) {
                        this._l._e.appendChild(this._horizontalBar);
                        this._horizontalBarShown = true;
                    }
                } else if (this._horizontalBarShown) {
                    this._l._e.removeChild(this._horizontalBar);
                    this._horizontalBarShown = false;
                }
                
                if (this._h > this._l._h) {
                    var height = this._l._h / this._h * this._l._h;
                    var hOffset = -this._y / this._h * this._l._h;
                    
                    this._verticalBar.style.height = height + "px";
                    this._verticalBar.style.top = hOffset + "px";
                    
                    if (!this._verticalBarShown) {
                        this._l._e.appendChild(this._verticalBar);
                        this._verticalBarShown = true;
                    }
                } else if (this._verticalBarShown) {
                    this._l._e.removeChild(this._verticalBar);
                    this._verticalBarShown = false;
                }
            },
            "setTop": function(y) {
                if (this._y !== y) {
                    if (this._o.virtual) {
                        this._y = y;
                        this._e.style.top = "0px";
                    } else {
                        View.fn.setTop.call(this, y);
                    }
                    if (y === 0) {
                        this.trigger("scrollTop", 0);
                    } else {
                        this.trigger("scrollTop", -y);
                    }
                    
                    
                    this._verticalBar.style.top = -this._y / this._h * this._l._h + "px";
                }
            }
        });
        
        return Scrollable;
    });
})();