radio/lorgar/views/helpers/scrollable.js

223 lines
8.9 KiB
JavaScript
Raw Normal View History

2018-08-04 21:46:25 +00:00
"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;
});
})();