Skip to content
Snippets Groups Projects
Commit 87e2823f authored by Tilman Vatteroth's avatar Tilman Vatteroth :robot:
Browse files

Überarbeitung des Layoutloadings

Cycler eingeführt
Duration für panels und cycler eingefügt
Kapseln der Panel-Funktionen
parent f3d0fced
No related branches found
No related tags found
No related merge requests found
layout = {}; 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) { layout.panelJSPrototype = function (js) {
switch(json.type) { js = js.prototype;
case "ysplit": js.hide = function () {
var cont = $("<div>").attr("data-container","split");
$(container).append(cont); };
layout.processLayout(json.up, cont).css("height",json.cut+"%"); js.show = function () {
layout.processLayout(json.down, cont).css("height",(100.0-json.cut)+"%");
return cont; };
case "xsplit": js.loaded = function () {
var cont = $("<div>").attr("data-container","split");
$(container).append(cont); };
layout.processLayout(json.left, cont).css("width",json.cut+"%"); js.unload = function () {
layout.processLayout(json.right, cont).css("width",(100.0-json.cut)+"%");
return cont; }
case "panel": js.checkShowCondition = function () {
return 0;
if (json.name == "") { }
layout.error(json); 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; this.hide = function () {
default: this.first.hide();
layout.error(json); this.second.hide();
break; }
} 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) { this.left.dom.css("width", (cut) + "%");
for (var tmp in layout.templates) { this.right.dom.css("width", (100.0 - cut) + "%");
if (layout.templates[tmp].name == name)
{ this.hide = function () {
layout.templates[tmp].panels.push(panel); this.first.hide();
return; 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, "name": wrap.name,
"template": null, "template": null,
"panels": [panel], "panels": [wrap],
"script": function() {}, "script": function () {
"css": null, },
"loadTemplate": function() { "css": null,
var t = this; "loadTemplate": function () {
var e = {}; var t = this;
var e = {};
var doMore = function() { var doMore = function () {
if (e.js == null || e.css == null || e.template == null) if (e.js == null || e.css == null || e.template == null)
return; return;
if (e.js != null) { if (e.js != null) {
eval("doStuff = function() {\n" + e.js + "\n}"); eval("doStuff = function() {\n" + e.js + "\n}");
t.script = doStuff; t.script = doStuff;
doStuff = null; layout.panelJSPrototype(t.script);
} 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);
} }
}
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; /*.fail(function() {
$.get("panels/" + n + "/template.html", function(k) { layout.error("get fail of style " + n);
console.log("get success of template " + n) });*/
e.template=k;
doMore(); $("head").append(t.css);
},"text")
.fail(function() { $.get("panels/" + n + "/script.js", function (k) {
layout.error("get fail of template " + n ); console.log("get success of script " + n)
}); e.js = k;
doMore();
}, "text")
t.css = $("<link>").attr("rel","stylesheet").attr("href", "panels/" + n + "/style.less").attr("data-template",t.name); .fail(function (e) {
layout.error("get fail of script " + n);
console.log(e);
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);
});
}
}
)
} }
layout.panelLoaded = function(panel) { layout.loadLayout = function (layoutname) {
console.log(panel); 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"; layout.error = function (e) {
console.log(w); console.error("Layout: Error " + e);
$.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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment