initial commit
This commit is contained in:
Юрий Губич
commit
4b60ece582
327 changed files with 28286 additions and 0 deletions
15
lorgar/views/CMakeLists.txt
Normal file
15
lorgar/views/CMakeLists.txt
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
cmake_minimum_required(VERSION 2.8.12)
|
||||
|
||||
configure_file(label.js label.js)
|
||||
configure_file(view.js view.js)
|
||||
configure_file(layout.js layout.js)
|
||||
configure_file(gridLayout.js gridLayout.js)
|
||||
configure_file(navigationPanel.js navigationPanel.js)
|
||||
configure_file(nav.js nav.js)
|
||||
configure_file(panesList.js panesList.js)
|
||||
configure_file(mainLayout.js mainLayout.js)
|
||||
configure_file(page.js page.js)
|
||||
configure_file(pane.js pane.js)
|
||||
configure_file(image.js image.js)
|
||||
|
||||
add_subdirectory(helpers)
|
||||
436
lorgar/views/gridLayout.js
Normal file
436
lorgar/views/gridLayout.js
Normal file
|
|
@ -0,0 +1,436 @@
|
|||
"use strict";
|
||||
(function gridLayout_js() {
|
||||
var moduleName = "views/gridLayout";
|
||||
|
||||
var defineArray = [];
|
||||
defineArray.push("views/view");
|
||||
defineArray.push("views/layout");
|
||||
|
||||
define(moduleName, defineArray, function gridLayout_module() {
|
||||
var View = require("views/view");
|
||||
var Layout = require("views/layout");
|
||||
|
||||
var GridLayout = Layout.inherit({
|
||||
"className": "GridLayout",
|
||||
"constructor": function(controller, options) {
|
||||
var base = {
|
||||
|
||||
};
|
||||
W.extend(base, options);
|
||||
Layout.fn.constructor.call(this, controller, base);
|
||||
|
||||
this._lay = [[[]]];
|
||||
this._cols = [{}];
|
||||
this._rows = [{}];
|
||||
},
|
||||
"append": function(child, row, col, rowSpan, colSpan, aligment) {
|
||||
aligment = aligment || 5;
|
||||
this._addChild(child, aligment);
|
||||
|
||||
rowSpan = rowSpan || 1;
|
||||
colSpan = colSpan || 1;
|
||||
|
||||
var tRow = row + rowSpan;
|
||||
var tCol = col + colSpan;
|
||||
|
||||
while (this._lay.length < tRow) {
|
||||
this._lay.push([]);
|
||||
|
||||
}
|
||||
for (var i = 0; i < this._lay.length; ++i) {
|
||||
while (this._lay[i].length < tCol) {
|
||||
this._lay[i].push([]);
|
||||
}
|
||||
}
|
||||
var obj = {
|
||||
child: child,
|
||||
colspan: colSpan,
|
||||
rowspan: rowSpan,
|
||||
a: aligment
|
||||
}
|
||||
|
||||
for (i = row; i < tRow; ++i) {
|
||||
for (var j = col; j < tCol; ++j) {
|
||||
this._lay[i][j].push(obj);
|
||||
}
|
||||
}
|
||||
|
||||
this._recountLimits();
|
||||
if (this._w !== undefined && this._h !== undefined) {
|
||||
this.refreshLay();
|
||||
}
|
||||
},
|
||||
"_cleanupLay": function() {
|
||||
var i;
|
||||
var rowsC = false;
|
||||
var colsC = false;
|
||||
while (!rowsC) {
|
||||
for (i = 0; i < this._lay[this._lay.length - 1].length; ++i) {
|
||||
if (this._lay[this._lay.length - 1][i].length) {
|
||||
rowsC = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!rowsC) {
|
||||
this._lay.pop()
|
||||
rowsC = !this._lay.length;
|
||||
colsC = !this._lay.length;
|
||||
}
|
||||
}
|
||||
while (!colsC) {
|
||||
for (i = 0; i < this._lay.length; ++i) {
|
||||
if (this._lay[i][this._lay[i].length - 1].length) {
|
||||
colsC = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!colsC) {
|
||||
for (i = 0; i < this._lay.length; ++i) {
|
||||
this._lay[i].pop();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"clear": function() {
|
||||
Layout.fn.clear.call(this);
|
||||
|
||||
this._lay = [[[]]];
|
||||
this._cols = [{}];
|
||||
this._rows = [{}];
|
||||
},
|
||||
"_onChildChangeLimits": function() {
|
||||
var notification = this._recountLimits();
|
||||
if (!notification) {
|
||||
this.refreshLay();
|
||||
}
|
||||
},
|
||||
"_positionElements": function() {
|
||||
var shiftW = 0;
|
||||
var shiftH = 0;
|
||||
|
||||
var positioned = [];
|
||||
|
||||
for (var i = 0; i < this._lay.length; ++i) {
|
||||
shiftW = 0;
|
||||
for (var j = 0; j < this._lay[i].length; ++j) {
|
||||
for (var k = 0; k < this._lay[i][j].length; ++k) {
|
||||
var e = this._lay[i][j][k];
|
||||
var child = e.child;
|
||||
if (positioned.indexOf(child) === -1) {
|
||||
var tWidth = 0;
|
||||
var tHeight = 0;
|
||||
var s;
|
||||
for (s = 0; s < e.colspan; ++s) {
|
||||
tWidth += this._cols[j + s].cur;
|
||||
}
|
||||
for (s = 0; s < e.rowspan; ++s) {
|
||||
tHeight += this._rows[i + s].cur;
|
||||
}
|
||||
child.setSize(tWidth, tHeight);
|
||||
|
||||
switch (e.a) {
|
||||
case Layout.Aligment.LeftTop:
|
||||
child.setTop(shiftH);
|
||||
child.setLeft(shiftW);
|
||||
break;
|
||||
case Layout.Aligment.LeftCenter:
|
||||
child.setTop(shiftH + (tHeight - child._h) / 2);
|
||||
child.setLeft(shiftW);
|
||||
break;
|
||||
case Layout.Aligment.LeftBottom:
|
||||
child.setTop(shiftH + (tHeight - child._h));
|
||||
child.setLeft(shiftW);
|
||||
break;
|
||||
case Layout.Aligment.CenterTop:
|
||||
child.setTop(shiftH);
|
||||
child.setLeft(shiftW + (tWidth - child._w) / 2);
|
||||
break;
|
||||
case Layout.Aligment.CenterCenter:
|
||||
child.setTop(shiftH + (tHeight - child._h) / 2);
|
||||
child.setLeft(shiftW + (tWidth - child._w) / 2);
|
||||
break;
|
||||
case Layout.Aligment.CenterBottom:
|
||||
child.setTop(shiftH + (tHeight - child._h));
|
||||
child.setLeft((tWidth - child._w) / 2);
|
||||
break;
|
||||
case Layout.Aligment.RightTop:
|
||||
child.setTop(shiftH);
|
||||
child.setLeft(shiftW + (tWidth - child._h));
|
||||
break;
|
||||
case Layout.Aligment.RightCenter:
|
||||
child.setTop((tHeight - child._h) / 2);
|
||||
child.setLeft(shiftW + (tWidth - child._h));
|
||||
break;
|
||||
case Layout.Aligment.RightBottom:
|
||||
child.setTop(shiftH + (tHeight - child._h));
|
||||
child.setLeft(shiftW + (tWidth - child._h));
|
||||
break;
|
||||
|
||||
}
|
||||
positioned.push(child);
|
||||
}
|
||||
}
|
||||
shiftW += this._cols[j].cur;
|
||||
}
|
||||
shiftH += this._rows[i].cur;
|
||||
}
|
||||
},
|
||||
"_recountLimits": function() {
|
||||
this._cols = [];
|
||||
this._rows = [];
|
||||
var i, j;
|
||||
var multiCols = [];
|
||||
var multiRows = [];
|
||||
var proccessed = Object.create(null);
|
||||
|
||||
for (i = 0; i < this._lay.length; ++i) {
|
||||
while (!this._rows[i]) {
|
||||
this._rows.push({});
|
||||
}
|
||||
for (j = 0; j < this._lay[i].length; ++j) {
|
||||
while (!this._cols[j]) {
|
||||
this._cols.push({});
|
||||
}
|
||||
for (var k = 0; k < this._lay[i][j].length; ++k) {
|
||||
var e = this._lay[i][j][k];
|
||||
|
||||
if (proccessed[e.child._id]) {
|
||||
this._cols[j].min = this._cols[j].min || 0;
|
||||
this._rows[i].min = this._rows[i].min || 0;
|
||||
this._cols[j].max = this._cols[j].max || 0;
|
||||
this._rows[i].max = this._rows[i].max || 0;
|
||||
continue;
|
||||
}
|
||||
|
||||
var colMinW = this._cols[j].min || 0;
|
||||
var rowMinH = this._rows[i].min || 0;
|
||||
var colMaxW = this._cols[j].max || Infinity;
|
||||
var rowMaxH = this._rows[i].max || Infinity;
|
||||
|
||||
if (e.colspan === 1) {
|
||||
this._cols[j].min = Math.max(colMinW, e.child._o.minWidth);
|
||||
this._cols[j].max = Math.min(colMaxW, e.child._o.maxWidth);
|
||||
} else {
|
||||
this._cols[j].min = colMinW;
|
||||
this._cols[j].max = colMaxW;
|
||||
|
||||
multiCols.push({
|
||||
p: j,
|
||||
e: e
|
||||
});
|
||||
}
|
||||
if (e.rowspan === 1) {
|
||||
this._rows[i].min = Math.max(rowMinH, e.child._o.minHeight);
|
||||
this._rows[i].max = Math.min(rowMaxH, e.child._o.maxHeight);
|
||||
} else {
|
||||
this._rows[i].min = rowMinH;
|
||||
this._rows[i].max = rowMaxH;
|
||||
|
||||
multiRows.push({
|
||||
p: i,
|
||||
e: e
|
||||
});
|
||||
}
|
||||
|
||||
proccessed[e.child._id] = true;
|
||||
}
|
||||
if (!this._lay[i][j].length) {
|
||||
this._cols[j].min = this._cols[j].min || 0;
|
||||
this._rows[i].min = this._rows[i].min || 0;
|
||||
this._cols[j].max = this._cols[j].max || 0;
|
||||
this._rows[i].max = this._rows[i].max || 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (i = 0; i < multiCols.length; ++i) {
|
||||
var e = multiCols[i].e;
|
||||
var pos = multiCols[i].p;
|
||||
var span = e.colspan;
|
||||
var target = pos + span;
|
||||
var minSize = 0;
|
||||
var maxSize = 0;
|
||||
for (j = pos; j < target; ++j) {
|
||||
minSize += this._cols[j].min;
|
||||
maxSize += this._cols[j].max;
|
||||
}
|
||||
if (e.child._o.minWidth > minSize) {
|
||||
var portion = (e.child._o.minWidth - minSize) / span;
|
||||
for (j = pos; j < target; ++j) {
|
||||
this._cols[j].min += portion;
|
||||
}
|
||||
}
|
||||
if (e.child._o.maxWidth < maxSize) {
|
||||
var portion = (maxSize - e.child._o.maxWidth) / span;
|
||||
for (j = pos; j < target; ++j) {
|
||||
this._cols[j].max -= portion;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (i = 0; i < multiRows.length; ++i) {
|
||||
var e = multiRows[i].e;
|
||||
var pos = multiRows[i].p;
|
||||
var span = e.rowspan;
|
||||
var target = pos + span;
|
||||
var minSize = 0;
|
||||
var maxSize = 0;
|
||||
for (j = pos; j < target; ++j) {
|
||||
minSize += this._rows[j].min;
|
||||
maxSize += this._rows[j].max;
|
||||
}
|
||||
if (e.child._o.minHeight > minSize) {
|
||||
var portion = (e.child._o.minHeight - minSize) / span;
|
||||
for (j = pos; j < target; ++j) {
|
||||
this._rows[j].min += portion;
|
||||
}
|
||||
}
|
||||
if (e.child._o.maxHeight < maxSize) {
|
||||
var portion = (maxSize - e.child._o.maxHeight) / span;
|
||||
for (j = pos; j < target; ++j) {
|
||||
this._rows[j].max -= portion;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var minWidth = 0;
|
||||
var minHeight = 0;
|
||||
var maxWidth = 0;
|
||||
var maxHeight = 0;
|
||||
|
||||
for (i = 0; i < this._rows.length; ++i) {
|
||||
minHeight += this._rows[i].min;
|
||||
this._rows[i].max = Math.max(this._rows[i].max, this._rows[i].min);
|
||||
maxHeight += this._rows[i].max;
|
||||
}
|
||||
for (i = 0; i < this._cols.length; ++i) {
|
||||
minWidth += this._cols[i].min;
|
||||
this._cols[i].max = Math.max(this._cols[i].max, this._cols[i].min);
|
||||
maxWidth += this._cols[i].max;
|
||||
}
|
||||
|
||||
return this._setLimits(minWidth, minHeight, maxWidth, maxHeight);
|
||||
},
|
||||
"refreshLay": function() {
|
||||
var totalMaxW = 0;
|
||||
var totalMaxH = 0;
|
||||
var totalMinW = 0;
|
||||
var totalMinH = 0;
|
||||
var i;
|
||||
|
||||
for (i = 0; i < this._cols.length; ++i) {
|
||||
totalMaxW += this._cols[i].max;
|
||||
totalMinW += this._cols[i].min
|
||||
}
|
||||
for (i = 0; i < this._rows.length; ++i) {
|
||||
totalMaxH += this._rows[i].max;
|
||||
totalMinH += this._rows[i].min;
|
||||
}
|
||||
|
||||
if (this._w <= totalMinW || this._w >= totalMaxW) {
|
||||
var kW;
|
||||
var keyW;
|
||||
if (this._w <= totalMinW) {
|
||||
kW = this._w / totalMinW;
|
||||
keyW = "min";
|
||||
} else {
|
||||
kW = this._w / totalMaxW;
|
||||
keyW = "max";
|
||||
}
|
||||
|
||||
for (i = 0; i < this._cols.length; ++i) {
|
||||
this._cols[i].cur = this._cols[i][keyW] * kW;
|
||||
}
|
||||
} else {
|
||||
distribute(this._w, this._cols);
|
||||
}
|
||||
|
||||
if (this._h <= totalMinH || this._h >= totalMaxH) {
|
||||
var kH;
|
||||
var keyH;
|
||||
if (this._h <= totalMinH) {
|
||||
kH = this._h / totalMinH;
|
||||
keyH = "min";
|
||||
} else {
|
||||
kH = this._h / totalMaxH;
|
||||
keyH = "max";
|
||||
}
|
||||
|
||||
for (i = 0; i < this._rows.length; ++i) {
|
||||
this._rows[i].cur = this._rows[i][keyH] * kH;
|
||||
}
|
||||
} else {
|
||||
distribute(this._h, this._rows);
|
||||
}
|
||||
this._positionElements();
|
||||
},
|
||||
"removeChild": function(child) {
|
||||
Layout.fn.removeChild.call(this, child);
|
||||
|
||||
for (var i = 0; i < this._lay.length; ++i) {
|
||||
for (var j = 0; j < this._lay[i].length; ++j) {
|
||||
for (var k = 0; k < this._lay[i][j].length; ++k) {
|
||||
if (child === this._lay[i][j][k].child) {
|
||||
this._lay[i][j].splice(k, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this._cleanupLay();
|
||||
this._recountLimits();
|
||||
this.refreshLay();
|
||||
},
|
||||
"setSize": function(w, h) {
|
||||
View.fn.setSize.call(this, w, h);
|
||||
|
||||
if (this._c.length) {
|
||||
this.refreshLay();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function distribute (size, array) {
|
||||
var i, portion;
|
||||
var cMax = [];
|
||||
for (i = 0; i < array.length; ++i) {
|
||||
array[i].cur = array[i].min;
|
||||
size -= array[i].min;
|
||||
|
||||
if (array[i].cur < array[i].max) {
|
||||
cMax.push(array[i]);
|
||||
}
|
||||
}
|
||||
cMax.sort(GridLayout._candidatesSortMax);
|
||||
|
||||
while (cMax.length && size) {
|
||||
portion = size / cMax.length;
|
||||
var last = cMax[cMax.length -1];
|
||||
|
||||
if (portion >= last.max) {
|
||||
size -= last.max - last.cur;
|
||||
last.cur = last.max;
|
||||
cMax.pop();
|
||||
} else {
|
||||
for (i = 0; i < cMax.length; ++i) {
|
||||
cMax[i].cur += portion;
|
||||
}
|
||||
size = 0;
|
||||
}
|
||||
}
|
||||
|
||||
if (size) {
|
||||
portion = size / array.length;
|
||||
for (i = 0; i < array.length; ++i) {
|
||||
array.cur += portion;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
GridLayout._candidatesSortMax = function(a, b) {
|
||||
return b.max - a.max;
|
||||
}
|
||||
|
||||
return GridLayout;
|
||||
});
|
||||
})();
|
||||
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;
|
||||
});
|
||||
})();
|
||||
35
lorgar/views/image.js
Normal file
35
lorgar/views/image.js
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
"use strict";
|
||||
(function() {
|
||||
var moduleName = "views/image";
|
||||
|
||||
var deps = [];
|
||||
deps.push("views/view");
|
||||
|
||||
define(moduleName, deps, function() {
|
||||
var View = require("views/view");
|
||||
|
||||
var Image = View.inherit({
|
||||
"className": "Image",
|
||||
"constructor": function(controller, options) {
|
||||
var base = {};
|
||||
W.extend(base, options)
|
||||
var el = document.createElement("img");
|
||||
View.fn.constructor.call(this, controller, base, el);
|
||||
|
||||
controller.needData();
|
||||
},
|
||||
"destructor": function() {
|
||||
this._f.dontNeedData();
|
||||
|
||||
View.fn.destructor.call(this);
|
||||
},
|
||||
"_onData": function() {
|
||||
if (this._f.hasData()) {
|
||||
this._e.src = "data:" + this._f.getMimeType() + ";base64," + this._f.data.base64();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return Image;
|
||||
})
|
||||
})();
|
||||
88
lorgar/views/label.js
Normal file
88
lorgar/views/label.js
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
"use strict";
|
||||
(function view_label_js() {
|
||||
var moduleName = "views/label";
|
||||
|
||||
var defineArray = [];
|
||||
defineArray.push("views/view");
|
||||
defineArray.push("lib/fonts/Liberation");
|
||||
|
||||
define(moduleName, defineArray, function view_label_module() {
|
||||
var View = require("views/view");
|
||||
|
||||
var Label = View.inherit({
|
||||
"className": "Label",
|
||||
"constructor": function(controller, options) {
|
||||
var base = {};
|
||||
W.extend(base, options)
|
||||
View.fn.constructor.call(this, controller, base);
|
||||
|
||||
this._timeout = undefined;
|
||||
this._recalculationScheduled = false;
|
||||
|
||||
this._e.innerText = this._f.data || "";
|
||||
if (this._f.data !== "") {
|
||||
this._scheduleRecalculation();
|
||||
}
|
||||
},
|
||||
"destructor": function() {
|
||||
if (this._recalculationScheduled) {
|
||||
clearTimeout(this._timeout);
|
||||
}
|
||||
|
||||
View.fn.destructor.call(this);
|
||||
},
|
||||
"_onAddProperty": function(key, propertyName) {
|
||||
View.fn._onAddProperty.call(this, key, propertyName);
|
||||
|
||||
if (sizeChangingProperties.indexOf(propertyName) !== -1) {
|
||||
this._scheduleRecalculation();
|
||||
}
|
||||
},
|
||||
"_onData": function() {
|
||||
if (this._e.innerText !== this._f.data) {
|
||||
this._e.innerText = this._f.data || "";
|
||||
this._scheduleRecalculation();
|
||||
}
|
||||
},
|
||||
"_recalculateSize": function() {
|
||||
var fs = parseFloat(this._e.style.fontSize) || 16;
|
||||
var fontFamily = this._e.style.fontFamily || "Liberation";
|
||||
|
||||
var h = fs + 2;
|
||||
var w = Label.calculateSingleString(fontFamily, fs, this._f.data || "");
|
||||
this.setConstSize(w, h);
|
||||
this._recalculationScheduled = false;
|
||||
},
|
||||
"_scheduleRecalculation": function() {
|
||||
if (!this._recalculationScheduled) {
|
||||
this._timeout = setTimeout(this._recalculateSize.bind(this), 10);
|
||||
this._recalculationScheduled = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var sizeChangingProperties = ["fontSize", "fontFamily", "whiteSpace"];
|
||||
|
||||
Label.calculateSingleString = function(family, size, string) {
|
||||
var fontStorage = Label.fonts[family] || Label.fonts["Liberation"];
|
||||
|
||||
var width = 0;
|
||||
var mul = size / fontStorage.unitsPerEm;
|
||||
var aw = fontStorage.advanceWidthArray;
|
||||
|
||||
for (var i = 0; i < string.length; ++i) {
|
||||
var letter = string.charCodeAt(i);
|
||||
var l = aw[letter] || 1536;
|
||||
width += (l * mul);
|
||||
}
|
||||
|
||||
return Math.ceil(width);
|
||||
};
|
||||
|
||||
Label.fonts = {
|
||||
Liberation: require("lib/fonts/Liberation")
|
||||
};
|
||||
|
||||
return Label;
|
||||
});
|
||||
})();
|
||||
242
lorgar/views/layout.js
Normal file
242
lorgar/views/layout.js
Normal file
|
|
@ -0,0 +1,242 @@
|
|||
"use strict";
|
||||
(function layout_js() {
|
||||
var moduleName = "views/layout";
|
||||
|
||||
var defineArray = [];
|
||||
defineArray.push("views/view");
|
||||
defineArray.push("views/helpers/scrollable");
|
||||
|
||||
define(moduleName, defineArray, function layout_module() {
|
||||
var View = require("views/view");
|
||||
var Scrollable = require("views/helpers/scrollable");
|
||||
|
||||
var Layout = View.inherit({
|
||||
"className": "Layout",
|
||||
"constructor": function(controller, options) {
|
||||
var base = {
|
||||
scrollable: Layout.Scroll.None
|
||||
};
|
||||
W.extend(base, options);
|
||||
var element = document.createElement("div");
|
||||
View.fn.constructor.call(this, controller, base, element);
|
||||
|
||||
this._c = [];
|
||||
|
||||
if (this._o.scrollable) {
|
||||
this._scr = new Scrollable({
|
||||
vertical: !!(this._o.scrollable & 1),
|
||||
horizontal: !!(this._o.scrollable & 2),
|
||||
virtual: !!(this._o.scrollable & 4)
|
||||
}, this);
|
||||
}
|
||||
},
|
||||
"destructor": function() {
|
||||
this._destroying = true;
|
||||
this.clear();
|
||||
if (this._o.scrollable) {
|
||||
this._scr.destructor();
|
||||
}
|
||||
|
||||
View.fn.destructor.call(this);
|
||||
},
|
||||
"_addChild": function(child, aligment, index) {
|
||||
aligment = aligment || 1;
|
||||
var item = {
|
||||
c: child,
|
||||
a: aligment
|
||||
}
|
||||
if (index !== undefined) {
|
||||
this._c.splice(index, 0, item);
|
||||
} else {
|
||||
this._c.push(item);
|
||||
}
|
||||
child.remove();
|
||||
if (this._o.scrollable) {
|
||||
if (index === undefined || this._c[index + 1] === undefined) {
|
||||
this._scr.appendChild(child._e);
|
||||
} else {
|
||||
this._scr.insertBefore(child._e, this._c[index + 1].c._e);
|
||||
}
|
||||
} else {
|
||||
if (index === undefined || this._c[index + 1] === undefined) {
|
||||
this._e.appendChild(child._e);
|
||||
} else {
|
||||
this._e.insertBefore(child._e, this._c[index + 1].c._e);
|
||||
}
|
||||
}
|
||||
child._p = this;
|
||||
child.on("changeLimits", this._onChildChangeLimits, this);
|
||||
},
|
||||
"append": function(child, aligment, index) {
|
||||
this._addChild(child, aligment, index)
|
||||
if (this._o.scrollable) {
|
||||
this._scr.maximizeMinSize(child);
|
||||
if (this._w !== undefined && this._h !== undefined) {
|
||||
this._scr.setSize(this._w, this._h);
|
||||
}
|
||||
}
|
||||
|
||||
if (this._w !== undefined && this._h !== undefined) {
|
||||
child.setSize(this._w, this._h);
|
||||
}
|
||||
},
|
||||
"clear": function() {
|
||||
while (this._c.length) {
|
||||
var c = this._c[this._c.length - 1];
|
||||
c.c.destructor();
|
||||
}
|
||||
if (!this._destroying) {
|
||||
if (this._o.scrollable) {
|
||||
this._scr.setMinSize(0, 0);
|
||||
this._scr.setSize(this._w, this._h);
|
||||
}
|
||||
}
|
||||
},
|
||||
"_onChildChangeLimits": function(child) {
|
||||
var i;
|
||||
if (this._o.scrollable) {
|
||||
var w = 0;
|
||||
var h = 0;
|
||||
for (i = 0; i < this._c.length; ++i) {
|
||||
w = Math.max(this._c[i].c._o.minWidth, w);
|
||||
h = Math.max(this._c[i].c._o.minHeight, h);
|
||||
}
|
||||
this._scr.setMinSize(w, h);
|
||||
this._scr.setSize(this._w, this._h);
|
||||
for (i = 0; i < this._c.length; ++i) {
|
||||
this._positionElement(this._c[i]);
|
||||
}
|
||||
} else {
|
||||
for (i = 0; i < this._c.length; ++i) {
|
||||
if (this._c[i].c === child) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (i < this._c.length) {
|
||||
this._positionElement(this._c[i]);
|
||||
}
|
||||
}
|
||||
},
|
||||
"_positionElement": function(e) {
|
||||
var el = e.c;
|
||||
var a = e.a;
|
||||
var h = this._h;
|
||||
var w = this._w;
|
||||
if (this._o.scrollable) {
|
||||
h = this._scr._h;
|
||||
w = this._scr._w;
|
||||
}
|
||||
el.setSize(this._w, this._h);
|
||||
|
||||
switch (a) {
|
||||
case Layout.Aligment.LeftTop:
|
||||
el.setTop(0);
|
||||
el.setLeft(0);
|
||||
break;
|
||||
case Layout.Aligment.LeftCenter:
|
||||
el.setTop((h - el._h) / 2);
|
||||
el.setLeft(0);
|
||||
break;
|
||||
case Layout.Aligment.LeftBottom:
|
||||
el.setTop(h - el._h);
|
||||
el.setLeft(0);
|
||||
break;
|
||||
case Layout.Aligment.CenterTop:
|
||||
el.setTop(0);
|
||||
el.setLeft((w - el._w) / 2)
|
||||
break;
|
||||
case Layout.Aligment.CenterCenter:
|
||||
el.setTop((h - el._h) / 2);
|
||||
el.setLeft((w - el._w) / 2)
|
||||
break;
|
||||
case Layout.Aligment.CenterBottom:
|
||||
el.setTop(h - el._h);
|
||||
el.setLeft((w - el._w) / 2)
|
||||
break;
|
||||
case Layout.Aligment.RightTop:
|
||||
el.setTop(0);
|
||||
el.setLeft(w - el._w)
|
||||
break;
|
||||
case Layout.Aligment.RightCenter:
|
||||
el.setTop((h - el._h) / 2);
|
||||
el.setLeft(w - el._w)
|
||||
break;
|
||||
case Layout.Aligment.RightBottom:
|
||||
el.setTop(h - el._h);
|
||||
el.setLeft(w - el._w)
|
||||
break;
|
||||
}
|
||||
},
|
||||
"removeChild": function(child) {
|
||||
var i;
|
||||
for (i = 0; i < this._c.length; ++i) {
|
||||
if (this._c[i].c === child) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (i !== this._c.length) {
|
||||
this._removeChildByIndex(i);
|
||||
}
|
||||
},
|
||||
"_removeChildByIndex": function(i) {
|
||||
var child = this._c[i].c;
|
||||
this._c.splice(i, 1);
|
||||
child._p = undefined;
|
||||
|
||||
if (this._o.scrollable) {
|
||||
this._scr.removeChild(child._e);
|
||||
if (!this._destroying) {
|
||||
var w = 0;
|
||||
var h = 0;
|
||||
for (var i = 0; i < this._c.length; ++i) {
|
||||
w = Math.max(this._c[i].c._o.minWidth, w);
|
||||
h = Math.max(this._c[i].c._o.minHeight, h);
|
||||
}
|
||||
this._scr.setMinSize(w, h);
|
||||
this._scr.setSize(this._w, this._h);
|
||||
}
|
||||
} else {
|
||||
this._e.removeChild(child._e);
|
||||
}
|
||||
|
||||
child.off("changeLimits", this._onChildChangeLimits, this);
|
||||
},
|
||||
"setSize": function(w, h) {
|
||||
View.fn.setSize.call(this, w, h);
|
||||
|
||||
if (this._o.scrollable) {
|
||||
this._scr.setSize(this._w, this._h);
|
||||
}
|
||||
|
||||
for (var i = 0; i < this._c.length; ++i) {
|
||||
this._positionElement(this._c[i]);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Layout.Aligment = {
|
||||
"LeftTop": 1,
|
||||
"LeftCenter": 4,
|
||||
"LeftBottom": 7,
|
||||
"CenterTop": 2,
|
||||
"CenterCenter": 5,
|
||||
"CenterBottom": 8,
|
||||
"RightTop": 3,
|
||||
"RightCenter": 6,
|
||||
"RightBottom": 9
|
||||
};
|
||||
|
||||
Layout.Scroll = {
|
||||
"None": 0,
|
||||
"Vertical": 1,
|
||||
"Horizontal": 2,
|
||||
"Both": 3,
|
||||
"Virtual": 4,
|
||||
"VirtualVertical": 5,
|
||||
"VirtualHorizontal": 6,
|
||||
"VirtualBoth": 7
|
||||
}
|
||||
|
||||
return Layout;
|
||||
});
|
||||
})();
|
||||
51
lorgar/views/mainLayout.js
Normal file
51
lorgar/views/mainLayout.js
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
"use strict";
|
||||
(function mainLayout_js() {
|
||||
var moduleName = "views/mainLayout";
|
||||
|
||||
var defineArray = [];
|
||||
defineArray.push("views/gridLayout");
|
||||
defineArray.push("views/label");
|
||||
defineArray.push("views/navigationPanel");
|
||||
defineArray.push("views/layout");
|
||||
defineArray.push("lib/wController/localModel");
|
||||
|
||||
define(moduleName, defineArray, function mainLayout_module() {
|
||||
var GridLayout = require("views/gridLayout");
|
||||
var ViewLabel = require("views/label");
|
||||
var ViewNavigationPanel = require("views/navigationPanel");
|
||||
var Layout = require("views/layout");
|
||||
var LocalModel = require("lib/wController/localModel");
|
||||
|
||||
var MainLayout = GridLayout.inherit({
|
||||
"className": "MainLayout",
|
||||
"_onNewController": function(controller) {
|
||||
GridLayout.fn._onNewController.call(this, controller);
|
||||
|
||||
var view;
|
||||
|
||||
switch (controller.name) {
|
||||
case "version":
|
||||
var lm = new LocalModel({
|
||||
backgroundColor: "secondaryColor"
|
||||
});
|
||||
var lay = new Layout(lm, {maxHeight: 15})
|
||||
view = new ViewLabel(controller);
|
||||
lay.append(view, Layout.Aligment.RightCenter);
|
||||
this.append(lay, 2, 0, 1, 3);
|
||||
break;
|
||||
case "navigationPanel":
|
||||
view = new ViewNavigationPanel(controller);
|
||||
this.append(view, 0, 0, 1, 3);
|
||||
break;
|
||||
case "themes":
|
||||
break;
|
||||
default:
|
||||
//this.trigger("serviceMessage", "Unsupported view: " + name + " (" + type + ")", 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return MainLayout;
|
||||
});
|
||||
})();
|
||||
58
lorgar/views/nav.js
Normal file
58
lorgar/views/nav.js
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
"use strict";
|
||||
(function nav_js() {
|
||||
var moduleName = "views/nav";
|
||||
|
||||
var defineArray = [];
|
||||
defineArray.push("views/layout");
|
||||
defineArray.push("views/label");
|
||||
|
||||
define(moduleName, defineArray, function nav_module() {
|
||||
var Layout = require("views/layout");
|
||||
var Label = require("views/label");
|
||||
|
||||
var Nav = Layout.inherit({
|
||||
"className": "Nav",
|
||||
"constructor": function(controller, options) {
|
||||
var base = {
|
||||
"padding": 5
|
||||
};
|
||||
W.extend(base, options);
|
||||
Layout.fn.constructor.call(this, controller, base);
|
||||
|
||||
this._initProxy();
|
||||
|
||||
this._label = new Label(this._f.label);
|
||||
this._label.on("changeLimits", this._onChangeLimits, this);
|
||||
this._onChangeLimits();
|
||||
|
||||
this.append(this._label, Layout.Aligment.CenterCenter);
|
||||
this.addClass("hoverable");
|
||||
|
||||
this._e.addEventListener("click", this._proxy.onClick, false);
|
||||
},
|
||||
"destructor": function() {
|
||||
this._e.removeEventListener("click", this._proxy.onClick, false);
|
||||
|
||||
Layout.fn.destructor.call(this);
|
||||
},
|
||||
"_initProxy": function() {
|
||||
this._proxy = {
|
||||
onClick: this._onClick.bind(this)
|
||||
}
|
||||
},
|
||||
"_onChangeLimits": function() {
|
||||
this._o.minWidth = this._label._o.minWidth + this._o.padding * 2;
|
||||
this._o.maxWidth = this._label._o.maxWidth + this._o.padding * 2;
|
||||
this._o.minHeight = this._label._o.minHeight + this._o.padding * 2;
|
||||
this._o.maxHeight = this._label._o.maxHeight + this._o.padding * 2;
|
||||
|
||||
this.trigger("changeLimits", this);
|
||||
},
|
||||
"_onClick": function(e) {
|
||||
lorgar.changePage(this._f.targetAddress);
|
||||
}
|
||||
});
|
||||
|
||||
return Nav;
|
||||
});
|
||||
})();
|
||||
50
lorgar/views/navigationPanel.js
Normal file
50
lorgar/views/navigationPanel.js
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
"use strict";
|
||||
(function navigationPanel_js() {
|
||||
var moduleName = "views/navigationPanel";
|
||||
|
||||
var defineArray = [];
|
||||
defineArray.push("views/gridLayout");
|
||||
defineArray.push("views/nav");
|
||||
defineArray.push("views/view");
|
||||
defineArray.push("lib/wController/localModel");
|
||||
|
||||
define(moduleName, defineArray, function navigationPanel_module() {
|
||||
var GridLayout = require("views/gridLayout");
|
||||
var Nav = require("views/nav");
|
||||
var View = require("views/view");
|
||||
var LocalModel = require("lib/wController/localModel");
|
||||
|
||||
var NavigationPanel = GridLayout.inherit({
|
||||
"className": "NavigationPanel",
|
||||
"constructor": function(controller, options) {
|
||||
var base = {
|
||||
minHeight: 50,
|
||||
maxHeight: 50
|
||||
};
|
||||
W.extend(base, options)
|
||||
GridLayout.fn.constructor.call(this, controller, base);
|
||||
|
||||
this._spacerHelper = new LocalModel();
|
||||
this._spacer = new View(this._spacerHelper);
|
||||
},
|
||||
"destructor": function() {
|
||||
this._spacer.destructor();
|
||||
this._spacerHelper.destructor();
|
||||
|
||||
GridLayout.fn.destructor.call(this);
|
||||
},
|
||||
"clear": function() {
|
||||
this._spacer.remove();
|
||||
GridLayout.fn.clear.call(this);
|
||||
},
|
||||
"_onNewController": function(controller) {
|
||||
this._spacer.remove();
|
||||
var nav = new Nav(controller);
|
||||
this.append(nav, 0, this._c.length, 1, 1);
|
||||
this.append(this._spacer, 0, this._c.length, 1, 1);
|
||||
}
|
||||
});
|
||||
|
||||
return NavigationPanel;
|
||||
});
|
||||
})();
|
||||
90
lorgar/views/page.js
Normal file
90
lorgar/views/page.js
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
"use strict";
|
||||
(function() {
|
||||
var moduleName = "views/page";
|
||||
|
||||
var defineArray = [];
|
||||
defineArray.push("views/gridLayout");
|
||||
defineArray.push("lib/wType/address");
|
||||
defineArray.push("lib/wContainer/abstractmap");
|
||||
|
||||
define(moduleName, defineArray, function() {
|
||||
var GridLayout = require("views/gridLayout");
|
||||
var Address = require("lib/wType/address");
|
||||
var AbstractMap = require("lib/wContainer/abstractmap");
|
||||
|
||||
var ContentMap = AbstractMap.template(Address, Object);
|
||||
|
||||
var Page = GridLayout.inherit({
|
||||
"className": "Page",
|
||||
"constructor": function(f, options) {
|
||||
var base = {};
|
||||
|
||||
W.extend(base, options);
|
||||
GridLayout.fn.constructor.call(this, f, base);
|
||||
|
||||
this._map = new ContentMap(false);
|
||||
|
||||
this._f.on("addItem", this._onAddItem, this);
|
||||
this._f.on("removeItem", this._onRemoveItem, this);
|
||||
this._f.on("clear", this.clear, this);
|
||||
|
||||
var end = this._f.data.end();
|
||||
for (var itr = this._f.data.begin(); !itr["=="](end); itr["++"]()) {
|
||||
var pair = itr["*"]();
|
||||
this._onAddItem(pair.first, pair.second);
|
||||
}
|
||||
},
|
||||
"destructor": function() {
|
||||
this._f.off("addItem", this._onAddItem, this);
|
||||
this._f.off("removeItem", this._onRemoveItem, this);
|
||||
this._f.off("clear", this.clear, this);
|
||||
|
||||
this._map.destructor();
|
||||
delete this._map;
|
||||
|
||||
GridLayout.fn.destructor.call(this);
|
||||
},
|
||||
"clear": function() {
|
||||
GridLayout.fn.clear.call(this);
|
||||
|
||||
if (this._map) {
|
||||
this._map.clear();
|
||||
}
|
||||
},
|
||||
"_onAddItem": function(address, element) {
|
||||
var view = Page.createByType(element.viewType, element.controller, element.viewOptions);
|
||||
|
||||
this._map.insert(address, view);
|
||||
|
||||
this.append(view, element.row, element.col, element.rowspan, element.colspan, element.aligment);
|
||||
},
|
||||
"_onRemoveItem": function(address) {
|
||||
var itr = this._map.find(address);
|
||||
var pair = itr["*"]();
|
||||
|
||||
this.removeChild(pair.second);
|
||||
pair.second.destructor();
|
||||
|
||||
this._map.erase(itr);
|
||||
},
|
||||
"_setLimits": function(minWidth, minHeight, maxWidth, maxHeight) {
|
||||
var needToTell = false;
|
||||
if (this._o.minWidth !== minWidth) {
|
||||
needToTell = true;
|
||||
this._o.minWidth = minWidth;
|
||||
}
|
||||
if (this._o.minHeight !== minHeight) {
|
||||
needToTell = true;
|
||||
this._o.minHeight = minHeight;
|
||||
}
|
||||
if (needToTell) {
|
||||
this.trigger("changeLimits", this);
|
||||
}
|
||||
|
||||
return needToTell && this._events.changeLimits && this._events.changeLimits.length; //to see if someone actually going to listen that event
|
||||
}
|
||||
});
|
||||
|
||||
return Page;
|
||||
});
|
||||
})()
|
||||
109
lorgar/views/pane.js
Normal file
109
lorgar/views/pane.js
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
"use strict";
|
||||
|
||||
(function() {
|
||||
var moduleName = "views/pane";
|
||||
|
||||
var defineArray = [];
|
||||
defineArray.push("views/view");
|
||||
defineArray.push("views/layout");
|
||||
defineArray.push("views/label");
|
||||
defineArray.push("views/image");
|
||||
defineArray.push("lib/wController/localModel");
|
||||
|
||||
define(moduleName, defineArray, function() {
|
||||
var View = require("views/view");
|
||||
var Layout = require("views/layout");
|
||||
var Label = require("views/label");
|
||||
var Image = require("views/image");
|
||||
var LM = require("lib/wController/localModel");
|
||||
|
||||
var Pane = Layout.inherit({
|
||||
"constructor": function PaneView (controller, options) {
|
||||
var base = {
|
||||
|
||||
};
|
||||
W.extend(base, options);
|
||||
Layout.fn.constructor.call(this, controller, options);
|
||||
|
||||
this._initProxy();
|
||||
this.addClass("hoverable");
|
||||
this._e.addEventListener("click", this._proxy.onClick, false);
|
||||
|
||||
var lm = this._labelModel = new LM({
|
||||
fontFamily: "casualFont"
|
||||
});
|
||||
|
||||
if (this._f.hasImage()) {
|
||||
this._image = new Image(this._f.image);
|
||||
this.append(this._image, Layout.Aligment.CenterCenter);
|
||||
}
|
||||
|
||||
var name = this._f.data.at("name");
|
||||
this._labelModel.setData(name || "");
|
||||
this._labelView = new Label(this._labelModel);
|
||||
this._labelView.on("changeLimits", this._onLabelChangeLimits, this);
|
||||
this.append(this._labelView, Layout.Aligment.CenterCenter);
|
||||
|
||||
this._f.on("newElement", this._onNewElement, this);
|
||||
this._f.on("removeElement", this._onRemoveElement, this);
|
||||
|
||||
this._uncyclic.push(function() {
|
||||
lm.destructor();
|
||||
});
|
||||
},
|
||||
"destructor": function() {
|
||||
this._e.removeEventListener("click", this._proxy.onClick, false);
|
||||
|
||||
Layout.fn.destructor.call(this);
|
||||
},
|
||||
"_applyProperties": function() {
|
||||
this._onAddProperty("secondaryColor", "background");
|
||||
|
||||
Layout.fn._applyProperties.call(this);
|
||||
},
|
||||
"_initProxy": function() {
|
||||
this._proxy = {
|
||||
onClick: this._onClick.bind(this)
|
||||
};
|
||||
},
|
||||
"_onClick": function() {
|
||||
if (this._f.data.at("hasPageLink").valueOf() === true) {
|
||||
this.trigger("activate", this._f.data.at("pageLink").clone());
|
||||
}
|
||||
},
|
||||
"_onLabelChangeLimits": function(label) {
|
||||
this.setMinSize(label._o.minWidth, this._h);
|
||||
},
|
||||
"_onNewElement": function(key, value) {
|
||||
switch (key) {
|
||||
case "name":
|
||||
this._labelModel.setData(value.toString());
|
||||
break;
|
||||
case "image":
|
||||
this._image = new Image(this._f.image);
|
||||
this.append(this._image, Layout.Aligment.LeftTop, 0);
|
||||
break;
|
||||
}
|
||||
},
|
||||
"_onRemoveElement": function(key) {
|
||||
switch (key) {
|
||||
case "name":
|
||||
this._labelModel.setData("");
|
||||
break;
|
||||
case "image":
|
||||
this._image.destructor();
|
||||
break;
|
||||
}
|
||||
},
|
||||
"setSize": function(w, h) {
|
||||
Layout.fn.setSize.call(this, w, h);
|
||||
|
||||
if (this._f.hasImage()) {
|
||||
this._image.setSize(w, h);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return Pane;
|
||||
});
|
||||
})();
|
||||
189
lorgar/views/panesList.js
Normal file
189
lorgar/views/panesList.js
Normal file
|
|
@ -0,0 +1,189 @@
|
|||
"use strict";
|
||||
(function panesList_js() {
|
||||
var moduleName = "views/panesList";
|
||||
|
||||
var defineArray = [];
|
||||
defineArray.push("views/view");
|
||||
defineArray.push("views/layout");
|
||||
defineArray.push("views/label");
|
||||
defineArray.push("lib/wController/localModel");
|
||||
defineArray.push("views/pane");
|
||||
|
||||
define(moduleName, defineArray, function panesList_module() {
|
||||
var View = require("views/view");
|
||||
var Layout = require("views/layout");
|
||||
var Label = require("views/label");
|
||||
var LM = require("lib/wController/localModel");
|
||||
var Pane = require("views/pane");
|
||||
|
||||
var PanesList = Layout.inherit({
|
||||
"className": "PanesList",
|
||||
"constructor": function PanesListView(controller, options) {
|
||||
var base = {
|
||||
nestWidth: 100,
|
||||
nestHeight: 100,
|
||||
verticalSpace: 10,
|
||||
scrollable: Layout.Scroll.VirtualVertical
|
||||
};
|
||||
W.extend(base, options);
|
||||
this._ctrlInitialized = false;
|
||||
Layout.fn.constructor.call(this, controller, base);
|
||||
|
||||
this._scr.on("scrollTop", this._onScrollTop, this);
|
||||
this._scr.on("dragStart", this._onScrollDragStart, this);
|
||||
this._scr.on("dragEnd", this._onScrollDragEnd, this);
|
||||
|
||||
this._hbi = Object.create(null);
|
||||
this._overflown = false;
|
||||
this._rows = 0;
|
||||
this._cachedMinH = 0;
|
||||
this._cols = 0;
|
||||
this._scrolled = 0;
|
||||
this._scrollShift = 0;
|
||||
this._rangeUpdate = false;
|
||||
this._skipPaneActivate = false;
|
||||
this._proxyClearSkippingPaneActivate = this._clearSkippingPaneActivate.bind(this);
|
||||
|
||||
this._f.on("removedController", this._onRemovedController, this);
|
||||
this._f.on("rangeStart", this._onRangeStart, this);
|
||||
this._f.on("rangeEnd", this._onRangeEnd, this);
|
||||
this._f.setSubscriptionRange(0, 0);
|
||||
},
|
||||
"append": function(child, index) {
|
||||
var model = new LM();
|
||||
var nest = new Layout(model, {
|
||||
minHeight: this._o.nestHeight,
|
||||
maxHeight: this._o.nestHeight,
|
||||
minWidth: this._o.nestWidth,
|
||||
minWidth: this._o.nestWidth,
|
||||
scrollable: Layout.Scroll.None
|
||||
});
|
||||
nest._uncyclic.push(function() {model.destructor()});
|
||||
nest.append(child);
|
||||
child.on("activate", this._onChildActivate, this); //todo need to remove handler on deletion
|
||||
this._addChild(nest, 0, index);
|
||||
|
||||
nest.setSize(this._o.nestWidth, this._o.nestHeight);
|
||||
|
||||
if (this._cols && !this._rangeUpdate) {
|
||||
this._positionElement(index);
|
||||
if (index !== this._c.length - 1) {
|
||||
this._refreshPositions(index + 1);
|
||||
}
|
||||
}
|
||||
},
|
||||
"_clearSkippingPaneActivate": function() {
|
||||
this._skipPaneActivate = false;
|
||||
},
|
||||
"_onAddElement": function() {
|
||||
this._recalculateRows();
|
||||
},
|
||||
"_onChildActivate": function(address) {
|
||||
if (!this._skipPaneActivate) {
|
||||
lorgar.changePage(address);
|
||||
}
|
||||
},
|
||||
"_onData": function() {
|
||||
if (this._f.initialized) {
|
||||
if (!this._ctrlInitialized) {
|
||||
this._f.on("addElement", this._onAddElement, this);
|
||||
this._ctrlInitialized = true;
|
||||
}
|
||||
this._recalculateRows();
|
||||
}
|
||||
},
|
||||
"_onNewController": function(ctrl, index) {
|
||||
var label = new Pane(ctrl);
|
||||
this.append(label, index);
|
||||
},
|
||||
"_onRangeEnd": function() {
|
||||
this._rangeUpdate = false;
|
||||
this._refreshPositions(0);
|
||||
},
|
||||
"_onRangeStart": function() {
|
||||
this._rangeUpdate = true;
|
||||
},
|
||||
"_onRemovedController": function(ctrl, index) {
|
||||
var obj = this._c[index];
|
||||
this._removeChildByIndex(index);
|
||||
obj.c.destructor();
|
||||
|
||||
if (!this._rangeUpdate) {
|
||||
this._refreshPositions(index);
|
||||
}
|
||||
},
|
||||
"_onScrollDragStart": function() {
|
||||
this._skipPaneActivate = true;
|
||||
},
|
||||
"_onScrollDragEnd": function() {
|
||||
setTimeout(this._proxyClearSkippingPaneActivate, 1);
|
||||
},
|
||||
"_onScrollTop": function(y) {
|
||||
this._scrolled = y;
|
||||
this._recalculateShown();
|
||||
},
|
||||
"_positionElement": function(index) {
|
||||
var row = Math.floor(index / this._cols);
|
||||
var col = index % this._cols;
|
||||
var e = this._c[index];
|
||||
|
||||
e.c.setLeft(col * this._o.nestWidth + col * this._hSpace);
|
||||
e.c.setTop(row * this._o.nestHeight + row * this._o.verticalSpace - this._scrollShift);
|
||||
},
|
||||
"_recalculateRows": function() {
|
||||
var rows = Math.ceil(this._f.data.length() / this._cols);
|
||||
if (rows !== this._rows) {
|
||||
this._rows = rows;
|
||||
this._cachedMinH = (rows * this._o.nestHeight) + (rows - 1) * this._o.verticalSpace;
|
||||
}
|
||||
this._scr.setMinSize(this._w, Math.max(this._cachedMinH, this._h));
|
||||
},
|
||||
"_recalculateShown": function() {
|
||||
var ch = this._o.nestHeight + this._o.verticalSpace;
|
||||
this._scrollShift = this._scrolled % (ch);
|
||||
var pr = (this._h + this._scrollShift + this._o.verticalSpace) / (ch);
|
||||
var possibleRows = Math.ceil(pr);
|
||||
var amount = this._cols * (possibleRows);
|
||||
|
||||
var start = Math.floor(this._scrolled / (ch)) * this._cols;
|
||||
var end = start + amount;
|
||||
|
||||
this._f.setSubscriptionRange(start, end);
|
||||
this._refreshPositions(0);
|
||||
},
|
||||
"_refreshPositions": function(start) {
|
||||
for (var i = start; i < this._c.length; ++i) {
|
||||
this._positionElement(i);
|
||||
}
|
||||
},
|
||||
"_removeChildByIndex": function(i) {
|
||||
var child = this._c[i].c;
|
||||
this._c.splice(i, 1);
|
||||
child._p = undefined;
|
||||
|
||||
if (this._o.scrollable) {
|
||||
this._scr.removeChild(child._e);
|
||||
} else {
|
||||
this._e.removeChild(child._e);
|
||||
}
|
||||
|
||||
child.off("changeLimits", this._onChildChangeLimits, this);
|
||||
},
|
||||
"setSize": function(w, h) {
|
||||
View.fn.setSize.call(this, w, h);
|
||||
|
||||
this._cols = Math.floor(this._w / this._o.nestWidth);
|
||||
this._hSpace = (this._w - (this._cols * this._o.nestWidth)) / (this._cols - 1);
|
||||
|
||||
if (this._o.scrollable) {
|
||||
this._recalculateRows();
|
||||
this._scr.setSize(this._w, this._h);
|
||||
}
|
||||
this._recalculateShown();
|
||||
this._refreshPositions(0);
|
||||
}
|
||||
});
|
||||
|
||||
return PanesList;
|
||||
});
|
||||
})();
|
||||
320
lorgar/views/view.js
Normal file
320
lorgar/views/view.js
Normal file
|
|
@ -0,0 +1,320 @@
|
|||
"use strict";
|
||||
(function view_js() {
|
||||
var moduleName = "views/view";
|
||||
|
||||
var defineArray = [];
|
||||
defineArray.push("lib/utils/subscribable");
|
||||
defineArray.push("views/helpers/draggable");
|
||||
|
||||
define(moduleName, defineArray, function view_module() {
|
||||
var counter = 0;
|
||||
var Subscribable = require("lib/utils/subscribable");
|
||||
var Draggable = require("views/helpers/draggable");
|
||||
|
||||
var View = Subscribable.inherit({
|
||||
"className": "View",
|
||||
"constructor": function View (controller, options, element) {
|
||||
Subscribable.fn.constructor.call(this);
|
||||
this._destroying = false;
|
||||
|
||||
var base = {
|
||||
minWidth: 0,
|
||||
minHeight: 0,
|
||||
maxWidth: Infinity,
|
||||
maxHeight: Infinity,
|
||||
draggable: false
|
||||
};
|
||||
W.extend(base, options);
|
||||
|
||||
this._id = ++counter;
|
||||
this._o = base;
|
||||
this._f = controller;
|
||||
if (element) {
|
||||
this._e = element;
|
||||
} else {
|
||||
this._e = document.createElement("div");
|
||||
}
|
||||
this._p = undefined;
|
||||
this._w = undefined;
|
||||
this._h = undefined;
|
||||
this._x = 0;
|
||||
this._y = 0;
|
||||
|
||||
this._initElement();
|
||||
|
||||
if (this._o.draggable) {
|
||||
this._initDraggable();
|
||||
}
|
||||
|
||||
this._f.on("data", this._onData, this);
|
||||
this._f.on("clearProperties", this._onClearProperties, this);
|
||||
this._f.on("addProperty", this._onAddProperty, this);
|
||||
this._f.on("newController", this._onNewController, this);
|
||||
|
||||
for (var i = 0; i < this._f._controllers.length; ++i) {
|
||||
this._onNewController(this._f._controllers[i]);
|
||||
}
|
||||
this._onData(this._f);
|
||||
|
||||
View.collection[this._id] = this;
|
||||
this._applyProperties();
|
||||
},
|
||||
"destructor": function() {
|
||||
this._destroying = true;
|
||||
this._f.off("data", this._onData, this);
|
||||
this._f.off("clearProperties", this._onClearProperties, this);
|
||||
this._f.off("addProperty", this._onAddProperty, this);
|
||||
this._f.off("newController", this._onNewController, this);
|
||||
|
||||
this.remove()
|
||||
if (this._o.draggable) {
|
||||
this._dg.destructor();
|
||||
}
|
||||
|
||||
delete View.collection[this._id];
|
||||
|
||||
Subscribable.fn.destructor.call(this);
|
||||
},
|
||||
"addClass": function(className) {
|
||||
var arr = this._e.className.split(" ");
|
||||
if (arr.indexOf(className) === -1) {
|
||||
arr.push(className);
|
||||
this._e.className = arr.join(" ");
|
||||
}
|
||||
},
|
||||
"_applyProperties": function() {
|
||||
for (var i = 0; i < this._f.properties.length; ++i) {
|
||||
var prop = this._f.properties[i];
|
||||
this._onAddProperty(prop.k, prop.p);
|
||||
}
|
||||
},
|
||||
"constrainHeight": function(h) {
|
||||
h = Math.max(h, this._o.minHeight);
|
||||
h = Math.min(h, this._o.maxHeight);
|
||||
|
||||
return h;
|
||||
},
|
||||
"constrainWidth": function(w) {
|
||||
w = Math.max(w, this._o.minWidth);
|
||||
w = Math.min(w, this._o.maxWidth);
|
||||
|
||||
return w;
|
||||
},
|
||||
"_initDraggable": function() {
|
||||
this._dg = new Draggable(this, {
|
||||
snapDistance: this._o.snapDistance
|
||||
});
|
||||
},
|
||||
"_initElement": function() {
|
||||
this._e.style.position = "absolute";
|
||||
this._e.style.top = "0";
|
||||
this._e.style.left = "0";
|
||||
this._e.style.boxSizing = "border-box";
|
||||
this._e.style.overflow = "hidden";
|
||||
this._e.id = this._id;
|
||||
},
|
||||
"_onAddProperty": function(key, propertyName) {
|
||||
var value = View.theme[key];
|
||||
if (value) {
|
||||
this._e.style[propertyName] = value;
|
||||
}
|
||||
},
|
||||
"_onClearProperties": function() {
|
||||
// for (var key in this._e.style) {
|
||||
// if (this._e.style.hasOwnProperty(key)) {
|
||||
// delete this._e.style[key];
|
||||
// }
|
||||
// }
|
||||
this._initElement();
|
||||
this._e.style.left = this._x + "px";
|
||||
this._e.style.top = this._y + "px";
|
||||
this._e.style.width = this._w + "px";
|
||||
this._e.style.height = this._h + "px";
|
||||
},
|
||||
"_onData": function() {},
|
||||
"_onNewController": function() {},
|
||||
"remove": function() {
|
||||
if (this._p) {
|
||||
this._p.removeChild(this);
|
||||
}
|
||||
},
|
||||
"removeClass": function(className) {
|
||||
var arr = this._e.className.split(" ");
|
||||
var index = arr.indexOf(className)
|
||||
var toJoin = false;
|
||||
while (index !== -1) {
|
||||
arr.splice(index, 1);
|
||||
index = arr.indexOf(className)
|
||||
toJoin = true;
|
||||
}
|
||||
if (toJoin) {
|
||||
this._e.className = arr.join(" ");
|
||||
}
|
||||
},
|
||||
"_resetTheme": function() {
|
||||
this._onClearProperties();
|
||||
this._applyProperties();
|
||||
},
|
||||
"setConstSize": function(w, h) {
|
||||
this._o.maxWidth = w;
|
||||
this._o.maxHeight = h;
|
||||
this._o.minWidth = w;
|
||||
this._o.minHeight = h;
|
||||
|
||||
if (this._w !== undefined && this._h !== undefined) {
|
||||
this.setSize(this._w, this._h);
|
||||
}
|
||||
|
||||
this.trigger("changeLimits", this);
|
||||
},
|
||||
"setLeft": function(l) {
|
||||
this._x = l;
|
||||
this._e.style.left = this._x + "px";
|
||||
},
|
||||
"_setLimits": function(minWidth, minHeight, maxWidth, maxHeight) {
|
||||
var needToTell = false;
|
||||
if (this._o.minWidth !== minWidth) {
|
||||
needToTell = true;
|
||||
this._o.minWidth = minWidth;
|
||||
}
|
||||
if (this._o.maxWidth !== maxWidth) {
|
||||
needToTell = true;
|
||||
this._o.maxWidth = maxWidth;
|
||||
}
|
||||
if (this._o.minHeight !== minHeight) {
|
||||
needToTell = true;
|
||||
this._o.minHeight = minHeight;
|
||||
}
|
||||
if (this._o.maxHeight !== maxHeight) {
|
||||
needToTell = true;
|
||||
this._o.maxHeight = maxHeight;
|
||||
}
|
||||
if (needToTell) {
|
||||
this.trigger("changeLimits", this);
|
||||
}
|
||||
|
||||
return needToTell && this._events.changeLimits && this._events.changeLimits.length; //to see if someone actually going to listen that event
|
||||
},
|
||||
"setMaxSize": function(w, h) {
|
||||
this._o.maxWidth = w;
|
||||
this._o.maxHeight = h;
|
||||
|
||||
if (this._w !== undefined && this._h !== undefined) {
|
||||
this.setSize(this._w, this._h);
|
||||
}
|
||||
|
||||
this.trigger("changeLimits", this);
|
||||
},
|
||||
"setMinSize": function(w, h) {
|
||||
this._o.minWidth = w;
|
||||
this._o.minHeight = h;
|
||||
|
||||
if (this._w !== undefined && this._h !== undefined) {
|
||||
this.setSize(this._w, this._h);
|
||||
}
|
||||
|
||||
this.trigger("changeLimits", this);
|
||||
},
|
||||
"setSize": function(w, h) {
|
||||
this._w = this.constrainWidth(w);
|
||||
this._h = this.constrainHeight(h);
|
||||
|
||||
this._e.style.width = this._w + "px";
|
||||
this._e.style.height = this._h + "px";
|
||||
|
||||
this.trigger("resize", this._w, this._h);
|
||||
},
|
||||
"setTop": function(t) {
|
||||
this._y = t;
|
||||
this._e.style.top = this._y + "px";
|
||||
},
|
||||
"trySize": function(w, h) {
|
||||
return !(w < this._o.minWidth || h < this._o.minHeight || w > this._o.maxWidth || h > this._o.maxHeight)
|
||||
}
|
||||
});
|
||||
|
||||
View.theme = Object.create(null);
|
||||
View.collection = Object.create(null);
|
||||
View.setTheme = function(theme) {
|
||||
for (var key in this.theme) {
|
||||
delete this.theme[key];
|
||||
}
|
||||
for (var key in theme) {
|
||||
if (theme.hasOwnProperty(key)) {
|
||||
this.theme[key] = theme[key];
|
||||
}
|
||||
}
|
||||
|
||||
for (var id in this.collection) {
|
||||
this.collection[id]._resetTheme();
|
||||
}
|
||||
}
|
||||
|
||||
View.createByType = function(type, ctrl, opts) {
|
||||
var typeName = this.ReversedViewType[type];
|
||||
if (typeName === undefined) {
|
||||
throw new Error("Unknown ViewType: " + type);
|
||||
}
|
||||
var Type = this.constructors[typeName];
|
||||
if (Type === undefined) {
|
||||
throw new Error("Constructor is not loaded yet, something is wrong");
|
||||
}
|
||||
return new Type(ctrl, opts);
|
||||
}
|
||||
|
||||
View.initialize = function(rc, cb) {
|
||||
var deps = [];
|
||||
var types = [];
|
||||
for (var key in this.ViewTypesPaths) {
|
||||
if (this.ViewTypesPaths.hasOwnProperty(key)) {
|
||||
if (!rc || rc.indexOf(key) !== -1) {
|
||||
deps.push(this.ViewTypesPaths[key]);
|
||||
types.push(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
require(deps, function() {
|
||||
for (var i = 0; i < types.length; ++i) {
|
||||
View.constructors[types[i]] = arguments[i];
|
||||
}
|
||||
cb();
|
||||
});
|
||||
}
|
||||
|
||||
View.ViewType = {
|
||||
Label: 0,
|
||||
|
||||
Image: 3,
|
||||
View: 4,
|
||||
|
||||
Page: 102,
|
||||
PanesList: 104
|
||||
};
|
||||
|
||||
View.ReversedViewType = {
|
||||
"0": "Label",
|
||||
|
||||
"3": "Image",
|
||||
"4": "View",
|
||||
|
||||
"101": "Nav",
|
||||
"102": "Page",
|
||||
"104": "PanesList"
|
||||
};
|
||||
|
||||
View.ViewTypesPaths = {
|
||||
Label: "views/label",
|
||||
Nav: "views/nav",
|
||||
Page: "views/page",
|
||||
PanesList: "views/panesList",
|
||||
Image: "views/image"
|
||||
};
|
||||
|
||||
View.constructors = {
|
||||
View: View
|
||||
};
|
||||
|
||||
|
||||
return View;
|
||||
});
|
||||
})();
|
||||
Loading…
Add table
Add a link
Reference in a new issue