diff --git a/js/layoutloader.js b/js/layoutloader.js
index 5e7a9540e184621e5cf6d7dee0e1770c79debf43..042551c567df91b8de61a979cf53e0f9b2c86678 100755
--- a/js/layoutloader.js
+++ b/js/layoutloader.js
@@ -1,161 +1,401 @@
layout = {};
+layout.templates = {};
+layout.cycler = [];
+layout.defaultCycleTime = 3;
+layout.readyCounter = 0;
+layout.resizeLayout = function () {
+ for (var tmp in layout.templates) {
+ tmp = layout.templates[tmp];
+ for (var p in tmp.panels) {
+ p = tmp.panels[p];
+ p.resize();
+ }
+ }
+}
-layout.processLayout = function(json, container) {
- switch(json.type) {
- case "ysplit":
- var cont = $("<div>").attr("data-container","split");
- $(container).append(cont);
- layout.processLayout(json.up, cont).css("height",json.cut+"%");
- layout.processLayout(json.down, cont).css("height",(100.0-json.cut)+"%");
- return cont;
- case "xsplit":
- var cont = $("<div>").attr("data-container","split");
- $(container).append(cont);
- layout.processLayout(json.left, cont).css("width",json.cut+"%");
- layout.processLayout(json.right, cont).css("width",(100.0-json.cut)+"%");
- return cont;
- case "panel":
-
- if (json.name == "") {
- layout.error(json);
+layout.panelJSPrototype = function (js) {
+ js = js.prototype;
+ js.hide = function () {
+
+ };
+ js.show = function () {
+
+ };
+ js.loaded = function () {
+
+ };
+ js.unload = function () {
+
+ }
+ js.checkShowCondition = function () {
+ return 0;
+ }
+ js.resize = function () {
+
+ }
+}
+
+layout.createPanel = function (dom, innerDOM, json) {
+ layout.readyCounter++;
+ this.name = json.name;
+ this.dom = dom;
+ this.innerDOM = innerDOM;
+ this.js = null;
+ this.needResize = false;
+ this.hidden = true;
+ this.config = json.config;
+ this.json = json;
+ /* this.hide=function(){this.js.hide()};
+ this.show=function(){this.js.show()};
+ this.loaded=function(){this.js.loaded()};
+ this.unload=function(){this.js.unload()};*/
+}
+
+/* TODO: Search for a Panel in checkCondition instead of show */
+layout.createCycler = function (dom, panels, duration_, forceDuration) {
+ this.dom = dom;
+ this.duration = duration_ || layout.defaultCycleTime;
+ this.forceDuration = forceDuration || false;
+ var panels = panels || [];
+ var panelIdx = 0;
+ var interval = null;
+ var c = this;
+ this.hidden = false;
+
+
+ var doTick = function () {
+ if (hidden) return;
+ var gefunden = false;
+ for (var i = 1; i <= panels.length; i++) {
+ var j = (i + panelIdx) % panels.length;
+ var panelDuration = panels[j].inner.checkShowCondition();
+ if (panelDuration >= 0) {
+ gefunden = true;
+
+ panels[panelIdx].inner.hide();
+ panels[panelIdx].container.css("display", "none");
+
+ var fd = panels[j].inner.json.forceDuration;
+ var realForceDuration = (typeof(fd) == "undefined" ? forceDuration : fd);
+
+ panelIdx = j;
+ panels[panelIdx].container.css("display", "block");
+ var realDuration = (realForceDuration || (panelDuration == 0)) ? (panels[j].inner.json.duration || this.duration) : panelDuration;
+
+ panels[panelIdx].inner.show(realDuration);
+ console.log(realDuration);
+ interval = setTimeout(doTick.bind(c), realDuration * 1000);
+ break;
+ }
+ }
+ if (!gefunden) {
+ layout.error("no panel found to show in cycler D: search again in " + layout.defaultCycleTime + " seconds");
+ interval = setTimeout(doTick.bind(c), layout.defaultCycleTime * 1000);
}
- var p = $("<div>")
- .attr("data-container","panel")
- .attr("data-template",json.name)
- .attr("data-config",json.config);
- var cont = $("<div>").attr("data-container","panelContainer").append(p);
- $(container).append(cont);
+ }
- layout.insertTemplate(json.name,p);
+ this.hide = function () {
+ hidden = true;
+ }
+ this.show = function (showDuration) {
+ hidden = false;
+ //interval = setTimeout(doTick.bind(this), 1*1000);
+ // panelIdx--;
+ doTick.call(c, showDuration);
+ //showPanel();
+ }
+ this.checkShowCondition = function () {
+ }
+}
+
+/* TODO: create a strategy to determinate how to concat the checkShowCondition of the subpanels */
+layout.createYSpliter = function (dom, first, second, cut) {
+ this.dom = dom;
+ this.cut = cut;
+ this.first = first;
+ this.second = second;
+ this.up = first;
+ this.down = second;
+
+ this.up.dom.css("height", (cut) + "%");
+ this.down.dom.css("height", (100.0 - cut) + "%");
- return cont;
- default:
- layout.error(json);
- break;
- }
+ this.hide = function () {
+ this.first.hide();
+ this.second.hide();
+ }
+ this.show = function (duration) {
+ this.first.show(duration);
+ this.second.show(duration);
+ }
+ this.checkShowCondition = function () {
+
+ }
}
+/* TODO: same as createYSpliter */
+layout.createXSpliter = function (dom, first, second, cut) {
+ this.dom = dom;
+ this.cut = cut;
+ this.first = first;
+ this.second = second;
+ this.left = first;
+ this.right = second;
-layout.insertTemplate = function(name, panel) {
- for (var tmp in layout.templates) {
- if (layout.templates[tmp].name == name)
- {
- layout.templates[tmp].panels.push(panel);
- return;
+ this.left.dom.css("width", (cut) + "%");
+ this.right.dom.css("width", (100.0 - cut) + "%");
+
+ this.hide = function () {
+ this.first.hide();
+ this.second.hide();
+ }
+ this.show = function (duration) {
+ this.first.show(duration);
+ this.second.show(duration);
}
+ this.checkShowCondition = function () {
+
+ }
+}
+
+layout.processLayout = function (json, container) {
+ switch (json.type) {
+ case "ysplit":
+ var cont = $("<div>").attr("data-container", "split");
+ $(container).append(cont);
+ var first = layout.processLayout(json.up, cont);
+ var second = layout.processLayout(json.down, cont);
+
+ var thisSplit = new layout.createYSpliter(cont, first, second, json.cut);
- }
+ return thisSplit;
+ case "xsplit":
+ var cont = $("<div>").attr("data-container", "split");
+ $(container).append(cont);
+ var first = layout.processLayout(json.left, cont);
+ var second = layout.processLayout(json.right, cont);
- this.templates.push(
+ var thisSplit = new layout.createXSpliter(cont, first, second, json.cut);
+ return thisSplit;
+ case "cycler":
+ var dom = $("<div>").attr("data-container", "cycler");
+ var myPanels = [];
+
+ $(container).append(dom);
+ json.panels.forEach(function (subpanel) {
+ console.log(subpanel);
+ var subcont = $("<div>").attr("data-container", "cycleContainer");
+ $(dom).append(subcont);
+ var subsubpanel = layout.processLayout(subpanel, subcont);
+ myPanels.push({
+ "container": subcont,
+ "inner": subsubpanel
+ });
+ });
+
+ var thisCycler = new layout.createCycler(dom, myPanels, json.duration, json.forceDuration);
+
+ layout.cycler.push(thisCycler);
+ return thisCycler;
+ case "panel":
+ if (json.name == "") {
+ layout.error(json);
+ }
+
+ var innerDOM = $("<div>")
+ .attr("data-container", "panel")
+ .attr("data-template", json.name)
+ .attr("data-config", json.config);
+
+ var dom = $("<div>").attr("data-container", "panelContainer").append(innerDOM);
+ $(container).append(dom);
+
+ var panelWrapper = new layout.createPanel(dom, innerDOM, json);
+ layout.insertTemplate(panelWrapper);
+
+ return panelWrapper;
+ default:
+ layout.error(json);
+ break;
+ }
+}
+
+
+layout.insertTemplate = function (wrap) {
+
+ if (typeof(layout.templates[wrap.name]) != "undefined") {
+ layout.templates[wrap.name].panels.push(wrap);
+ return;
+ }
+
+
+ layout.templates[wrap.name] =
{
- "name": name,
- "template": null,
- "panels": [panel],
- "script": function() {},
- "css": null,
- "loadTemplate": function() {
- var t = this;
- var e = {};
-
- var doMore = function() {
- if (e.js == null || e.css == null || e.template == null)
- return;
-
- if (e.js != null) {
- eval("doStuff = function() {\n" + e.js + "\n}");
- t.script = doStuff;
- doStuff = null;
- }
-
- t.template = $.parseHTML(e.template);
-
- for (p in t.panels) {
- t.panels[p].append(
- $(t.template).clone()
- ).ready(function() {
- if (t.script == null) {
-
- } else {
- t.panels[p].js=new t.script();
- try {
- if (typeof t.panels[p].js.loaded == 'function')
- t.panels[p].js.loaded(t.panels[p], t.panels[p].attr("data-config"));
- } catch (ex) {
- console.log("Layout: exception when running loading for " + t.name + "\n" + ex);
+ "name": wrap.name,
+ "template": null,
+ "panels": [wrap],
+ "script": function () {
+ },
+ "css": null,
+ "loadTemplate": function () {
+ var t = this;
+ var e = {};
+ var doMore = function () {
+ if (e.js == null || e.css == null || e.template == null)
+ return;
+
+ if (e.js != null) {
+ eval("doStuff = function() {\n" + e.js + "\n}");
+ t.script = doStuff;
+ layout.panelJSPrototype(t.script);
+ doStuff = null;
}
- }
+
+ t.template = $.parseHTML(e.template);
+ t.panels.forEach(function (panel) {
+ panel.innerDOM.append(
+ $(t.template).clone()
+ ).ready(function () {
+ if (t.script == null) {
+
+ } else {
+ panel.js = new t.script();
+ //hide function
+ panel.hide = function () {
+ panel.hidden = true;
+ try {
+ panel.js.hide.call(panel.js);
+ } catch (ex) {
+ console.log("Layout: exception when running hide for " + panel.name + "\n" + ex);
+ }
+ }
+ //show function
+ panel.show = function (duration) {
+ panel.hidden = false;
+ try {
+ panel.js.show.call(panel.js, duration);
+ } catch (ex) {
+ console.log("Layout: exception when running show for " + panel.name + "\n" + ex);
+ }
+ if (panel.needResize) {
+ panel.resize.call(panel.js);
+ }
+ };
+ panel.loaded = function () {
+ try {
+ panel.js.loaded.call(panel.js, panel.innerDOM, panel.config);
+ } catch (ex) {
+ console.log("Layout: exception when running loaded for " + panel.name + "\n" + ex);
+ }
+ }
+ panel.unload = function () {
+ try {
+ panel.js.unload.bind(panel.js);
+ } catch (ex) {
+ console.log("Layout: exception when running unload for " + panel.name + "\n" + ex);
+ }
+ }
+ panel.resize = function () {
+ if (panel.hidden) {
+ panel.needResize = true;
+ } else {
+ panel.needResize = false;
+ try {
+ panel.js.resize.call(panel.js);
+ } catch (ex) {
+ console.log("Layout: exception when running resize for " + panel.name + "\n" + ex);
+ }
+ }
+ }
+ panel.checkShowCondition = function () {
+ try {
+ var res = panel.js.checkShowCondition.call(panel.js);
+ } catch (ex) {
+ console.log("Layout: exception when running checkShowCondition for " + panel.name + "\n" + ex);
+ return -1;
+ }
+ if (typeof(res) != "number")
+ return 0;
+ return res;
+ }
+
+ panel.js.panel = panel.innerDOM;
+
+ panel.loaded();
+
+ layout.readyCounter--;
+ if (layout.readyCounter == 0) {
+ layout.startMainLayout();
+ }
+ }
+ });
+ })
+ }
+ var n = this.name;
+ $.get("panels/" + n + "/template.html", function (k) {
+ console.log("get success of template " + n)
+ e.template = k;
+ doMore();
+ }, "text")
+ .fail(function () {
+ layout.error("get fail of template " + n);
+ });
+
+
+ t.css = $("<link>").attr("rel", "stylesheet").attr("href", "panels/" + n + "/style.less").attr("data-template", t.name);
+
+
+ t.css.on("load", function () {
+ console.log("get success of style " + n);
+ e.css = t.css;
+ doMore();
});
- }
- }
- var n = this.name;
- $.get("panels/" + n + "/template.html", function(k) {
- console.log("get success of template " + n)
- e.template=k;
- doMore();
- },"text")
- .fail(function() {
- layout.error("get fail of template " + n );
- });
-
-
- t.css = $("<link>").attr("rel","stylesheet").attr("href", "panels/" + n + "/style.less").attr("data-template",t.name);
-
-
- t.css.on("load",function() {
- console.log("get success of style " + n);
- e.css= t.css;
- doMore();
- });
-
-
- /*.fail(function() {
- layout.error("get fail of style " + n);
- });*/
-
- $("head").append(t.css);
- /*$.get("panels/" + n + "/style.less", function(k) {
- e.css=k;
- doMore();
- },"text")
- */
-
-
- $.get("panels/" + n + "/script.js", function(k){
- console.log("get success of script " + n)
- e.js=k;
- doMore();
- },"text")
- .fail(function(e) {
- layout.error("get fail of script " + n);
- console.log(e);
- });
-
- }
- }
- )
+
+
+ /*.fail(function() {
+ layout.error("get fail of style " + n);
+ });*/
+
+ $("head").append(t.css);
+
+ $.get("panels/" + n + "/script.js", function (k) {
+ console.log("get success of script " + n)
+ e.js = k;
+ doMore();
+ }, "text")
+ .fail(function (e) {
+ layout.error("get fail of script " + n);
+ console.log(e);
+ });
+
+ }
+ }
+
}
-layout.panelLoaded = function(panel) {
- console.log(panel);
+layout.loadLayout = function (layoutname) {
+ var w = "config/layouts/" + layoutname + ".json";
+ console.log(w);
+ $.get(w, function (e) {
+ var mainLayout = layout.processLayout(e, $("[data-container=main]"));
+
+ layout.startMainLayout = function () {
+ $(window).resize(layout.resizeLayout);
+ mainLayout.show();
+ layout.resizeLayout();
+ };
+
+ for (var tmp in layout.templates) {
+ layout.templates[tmp].loadTemplate();
+ }
+
+ }).fail(function () {
+ layout.error("get fail");
+ });
}
-layout.loadLayout = function(layoutname) {
- var w = "config/layouts/"+layoutname+".json";
- console.log(w);
- $.get(w, function(e) {
- layout.processLayout(e, $("[data-container=main]"));
- for (var tmp in layout.templates) {
- layout.templates[tmp].loadTemplate();
- }
- }).fail(function() {
- layout.error("get fail");
- });
-},
-
-
-layout.error = function(e) {
- console.log("Layout: Error " + e);
-},
-
-layout.templates = [];
\ No newline at end of file
+
+layout.error = function (e) {
+ console.error("Layout: Error " + e);
+}