radio/lorgar/views/view.js

338 lines
12 KiB
JavaScript
Raw Normal View History

2018-08-04 21:46:25 +00:00
"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]);
}
2018-10-28 21:32:44 +00:00
//if (this._f.initialized) {
this._onData(this._f);
//}
2018-08-04 21:46:25 +00:00
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) {
2018-12-17 17:15:58 +00:00
this._e.classList.add(className);
2018-08-04 21:46:25 +00:00
},
"_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;
},
2019-01-26 18:54:22 +00:00
"getAbsolutePosition": function() {
var pp;
if (this._p) {
pp = this._p.getAbsolutePosition();
} else {
pp = Object.create(null);
pp.x = 0;
pp.y = 0;
}
pp.x += this._x;
pp.y += this._y;
return pp;
},
2018-08-04 21:46:25 +00:00
"_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);
2019-01-26 18:54:22 +00:00
delete this._p; //just to make sure
2018-08-04 21:46:25 +00:00
}
},
"removeClass": function(className) {
2018-12-17 17:15:58 +00:00
this._e.classList.remove(className);
2018-08-04 21:46:25 +00:00
},
"_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);
2018-08-04 21:52:16 +00:00
if (this._w !== undefined && this._h !== undefined) {
this.setSize(this._w, this._h);
}
2018-08-04 21:46:25 +00:00
}
2018-08-04 21:52:16 +00:00
return needToTell && this._events.changeLimits && this._events.changeLimits.length; //to see if someone actually going to listen that event, if not - return result
2018-08-04 21:46:25 +00:00
},
"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,
2018-08-04 21:52:16 +00:00
Image: 4,
Button: 5,
View: 6,
Enumeration: 7,
2018-08-04 21:46:25 +00:00
Page: 102,
2018-08-04 21:52:16 +00:00
PanesList: 104,
Player: 107
2018-08-04 21:46:25 +00:00
};
View.ReversedViewType = {
"0": "Label",
2018-08-04 21:52:16 +00:00
"4": "Image",
"5": "Button",
"6": "View",
"7": "Enumeration",
2018-08-04 21:46:25 +00:00
"101": "Nav",
"102": "Page",
2018-08-04 21:52:16 +00:00
"104": "PanesList",
"107": "Player"
2018-08-04 21:46:25 +00:00
};
View.ViewTypesPaths = {
Label: "views/label",
Nav: "views/nav",
Page: "views/page",
PanesList: "views/panesList",
2018-08-04 21:52:16 +00:00
Image: "views/image",
Button: "views/button",
Player: "views/player",
Enumeration: "views/enumeration"
2018-08-04 21:46:25 +00:00
};
View.constructors = {
View: View
};
return View;
});
})();