223 lines
8.9 KiB
JavaScript
223 lines
8.9 KiB
JavaScript
|
"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;
|
||
|
|
});
|
||
|
|
})();
|