initial commit
This commit is contained in:
commit
4b60ece582
327 changed files with 28286 additions and 0 deletions
222
lorgar/views/helpers/scrollable.js
Normal file
222
lorgar/views/helpers/scrollable.js
Normal file
|
@ -0,0 +1,222 @@
|
|||
"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;
|
||||
});
|
||||
})();
|
Loading…
Add table
Add a link
Reference in a new issue