initial commit
This commit is contained in:
Юрий Губич
commit
4b60ece582
327 changed files with 28286 additions and 0 deletions
4
lorgar/views/helpers/CMakeLists.txt
Normal file
4
lorgar/views/helpers/CMakeLists.txt
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
cmake_minimum_required(VERSION 2.8.12)
|
||||
|
||||
configure_file(scrollable.js scrollable.js)
|
||||
configure_file(draggable.js draggable.js)
|
||||
148
lorgar/views/helpers/draggable.js
Normal file
148
lorgar/views/helpers/draggable.js
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
"use strict";
|
||||
(function draggable_js() {
|
||||
var moduleName = "views/helpers/draggable";
|
||||
|
||||
var defineArray = [];
|
||||
defineArray.push("lib/utils/subscribable");
|
||||
|
||||
define(moduleName, defineArray, function draggable_module() {
|
||||
var Subscribable = require("lib/utils/subscribable");
|
||||
|
||||
var Draggable = Subscribable.inherit({
|
||||
"className": "Draggable",
|
||||
"constructor": function Draggable (view, options) {
|
||||
var base = {
|
||||
snapDistance: 0
|
||||
};
|
||||
W.extend(base, options);
|
||||
Subscribable.fn.constructor.call(this, base);
|
||||
|
||||
this._o = base;
|
||||
this._e = view._e;
|
||||
this._v = view;
|
||||
this._v.addClass("draggable");
|
||||
|
||||
this._initProxy();
|
||||
this._dragging = false;
|
||||
this._toFlush = false;
|
||||
|
||||
this._x = 0;
|
||||
this._y = 0;
|
||||
|
||||
this._e.addEventListener("mousedown", this._proxy.onMouseDown, false);
|
||||
this._e.addEventListener("touchstart", this._touch, false);
|
||||
this._e.addEventListener("touchmove", this._touch, false);
|
||||
this._e.addEventListener("touchend", this._touch, false);
|
||||
},
|
||||
"destructor": function () {
|
||||
if (this._dragging) {
|
||||
window.removeEventListener("mouseup", this._proxy.onMouseUp);
|
||||
window.removeEventListener("mousemove", this._proxy.onMouseMove);
|
||||
}
|
||||
|
||||
if (!this._v.destroying) {
|
||||
this._v.removeClass("draggable");
|
||||
}
|
||||
|
||||
this._e.removeEventListener("mousedown", this._proxy.onMouseDown);
|
||||
this._e.removeEventListener("touchstart", this._touch);
|
||||
this._e.removeEventListener("touchmove", this._touch);
|
||||
this._e.removeEventListener("touchend", this._touch);
|
||||
|
||||
Subscribable.fn.destructor.call(this);
|
||||
},
|
||||
"_initProxy": function () {
|
||||
this._proxy = {
|
||||
"onMouseDown": this._onMouseDown.bind(this),
|
||||
"onMouseUp": this._onMouseUp.bind(this),
|
||||
"onMouseMove": this._onMouseMove.bind(this)
|
||||
}
|
||||
},
|
||||
"_onMouseDown": function (e) {
|
||||
if (e.which === 1) {
|
||||
window.addEventListener("mouseup", this._proxy.onMouseUp);
|
||||
window.addEventListener("mousemove", this._proxy.onMouseMove);
|
||||
lorgar._body.addClass("non-selectable");
|
||||
this._x = e.pageX;
|
||||
this._y = e.pageY;
|
||||
}
|
||||
},
|
||||
"_onMouseMove": function (e) {
|
||||
var x = e.pageX - this._x;
|
||||
var y = e.pageY - this._y;
|
||||
|
||||
if (this._dragging) {
|
||||
this._v.trigger("drag", {
|
||||
x: x,
|
||||
y: y
|
||||
});
|
||||
} else {
|
||||
var absX = Math.abs(x);
|
||||
var absY = Math.abs(y);
|
||||
|
||||
if (absX > this._o.snapDistance || absY > this._o.snapDistance) {
|
||||
this._dragging = true;
|
||||
lorgar._body.addClass("dragging");
|
||||
this._v.trigger("dragStart", {
|
||||
x: x,
|
||||
y: y
|
||||
});
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
"_onMouseUp": function (e) {
|
||||
window.removeEventListener("mouseup", this._proxy.onMouseUp);
|
||||
window.removeEventListener("mousemove", this._proxy.onMouseMove);
|
||||
|
||||
this._x = 0;
|
||||
this._y = 0;
|
||||
lorgar._body.removeClass("non-selectable");
|
||||
if (this._dragging) {
|
||||
e.preventDefault();
|
||||
this._dragging = false;
|
||||
lorgar._body.removeClass("dragging");
|
||||
this._v.trigger("dragEnd");
|
||||
return false;
|
||||
}
|
||||
},
|
||||
"_touch": function (e) {
|
||||
e.preventDefault();
|
||||
if (e.touches.length > 1 || (e.type == "touchend" && e.touches.length > 0))
|
||||
return;
|
||||
|
||||
var type = null;
|
||||
var touch = null;
|
||||
var src = e.currentTarget;
|
||||
switch (e.type) {
|
||||
case "touchstart":
|
||||
type = "mousedown";
|
||||
touch = e.changedTouches[0];
|
||||
|
||||
break;
|
||||
case "touchmove":
|
||||
type = "mousemove";
|
||||
touch = e.changedTouches[0];
|
||||
src = window;
|
||||
break;
|
||||
case "touchend":
|
||||
type = "mouseup";
|
||||
touch = e.changedTouches[0];
|
||||
src = window;
|
||||
break;
|
||||
}
|
||||
|
||||
var event = new MouseEvent(type, {
|
||||
button: 0,
|
||||
screenX: touch.screenX,
|
||||
screenY: touch.screenY,
|
||||
clientX: touch.clientX,
|
||||
clientY: touch.clientY
|
||||
});
|
||||
src.dispatchEvent(event);
|
||||
}
|
||||
});
|
||||
|
||||
return Draggable;
|
||||
});
|
||||
})();
|
||||
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