252 lines
9.4 KiB
JavaScript
252 lines
9.4 KiB
JavaScript
"use strict";
|
||
/* exported renderDef */
|
||
var renderDef = function(options){
|
||
|
||
this.steps = [];
|
||
this.form;
|
||
this.currentStep;
|
||
|
||
this.options = {
|
||
def: '',
|
||
container: null,
|
||
replaceContainer: false
|
||
// refreshRate: 200
|
||
};
|
||
|
||
this.init= function(opt){
|
||
this.steps = [];
|
||
this.setOptions(opt);
|
||
this.parseDef();
|
||
var _this =this;;
|
||
if( this.options.container == '' ){
|
||
LibJavascript.Events.addEvent(window,'load', function(){
|
||
_this.options.container = document.body
|
||
_this.refresh();
|
||
LibJavascript.Events.addEvent(_this.options.container,'resizeWireFrameContainer', function(){_this.refresh();});
|
||
});
|
||
}else {
|
||
if( typeof(this.options.container) == 'string')
|
||
this.options.container = document.getElementById(this.options.container);
|
||
this.renderStep();
|
||
LibJavascript.Events.addEvent(this.options.container,'resizeWireFrameContainer', function(){_this.refresh();});
|
||
}
|
||
LibJavascript.Events.addEvent(window,'resize', function(){
|
||
_this.refresh();
|
||
});
|
||
}
|
||
// var to;
|
||
// var from = new Date().getTime();
|
||
// var iii = 0;
|
||
|
||
this.refresh= function(){
|
||
// to = setTimeout( this.bindFunction(this),this.options.refreshRate );
|
||
this.renderStep();
|
||
this.options.container.dispatchEvent(new CustomEvent("wireFrameRendered",{type:'UIEvent'}));
|
||
}
|
||
|
||
// this.bindFunction= function(_this){
|
||
// // if( to )
|
||
// // window.clearTimeout(to);
|
||
// _this.renderStep();
|
||
// };
|
||
|
||
this.getHTML= function(){
|
||
return this.form.outerHTML;
|
||
}
|
||
|
||
this.renderStep= function(){
|
||
var find = this.findStepIndex();
|
||
if( this.currentStep == find )
|
||
return;
|
||
this.currentStep = find;
|
||
var currentObj = this.steps[find];
|
||
this.form = document.createElement('div');
|
||
this.form.style.width= currentObj.form.w + (currentObj.form.w.indexOf("%")>-1?"":"px");
|
||
this.form.style.minWidth= currentObj.step+"px";
|
||
this.form.style.height= currentObj.form.h+'px';
|
||
if( currentObj.form.page > 1){
|
||
this.renderTab(currentObj.form.page, currentObj.form.wizard);
|
||
this.form.classList.add("form_ctrl_tab");
|
||
}
|
||
this.form.classList.add("form_ctrl");
|
||
if( currentObj.form.titled ){
|
||
this.renderTitle();
|
||
this.form.classList.add("form_ctrl_titled");
|
||
}
|
||
for(var i=0; i<currentObj.childs.length; i++){
|
||
var child = currentObj.childs[i]
|
||
var div = document.createElement("div");
|
||
div.className = "Ctrl Ctrl-default";
|
||
div.innerHTML = child.html ? child.html : '';
|
||
div.style.zIndex= child.z;
|
||
if( child.anchor ){
|
||
if (child.anchor.indexOf('top')!=-1) div.style.top=child.y+'px';
|
||
if (child.anchor.indexOf('left')!=-1) div.style.left=child.x+'px';
|
||
if (child.anchor.indexOf('left(%)')!=-1) div.style.left=(child.x*100/currentObj.step)+'%';
|
||
if (child.anchor.indexOf('right')!=-1) div.style.right=(currentObj.step - child.x-child.w)+'px';
|
||
if (child.anchor.indexOf('right(%)')!=-1) div.style.right=((currentObj.step-child.x-child.w)*100/currentObj.step)+'%';
|
||
if (child.anchor.indexOf('bottom')!=-1){
|
||
div.style.bottom=(currentObj.form.h-child.y-child.h)+'px';
|
||
}
|
||
if (child.w!=null && (child.anchor.indexOf('right')==-1 || child.anchor.indexOf('left')==-1)) div.style.width=child.w+((""+child.w).indexOf("%")>-1?'':'px');
|
||
if (child.h!=null && (child.anchor.indexOf('top')==-1 || child.anchor.indexOf('bottom')==-1)) div.style.height=child.h+'px';
|
||
}
|
||
this.form.appendChild(div);
|
||
}
|
||
|
||
if( this.options.container.firstChild ){
|
||
this.options.container.replaceChild(this.form,this.options.container.firstChild);
|
||
}else{
|
||
if( this.options.replaceContainer && this.options.container.parentElement ){
|
||
this.options.container.parentElement.replaceChild(this.form,this.options.container);
|
||
this.options.container = this.form.parentElement;
|
||
} else {
|
||
this.options.container.appendChild(this.form);
|
||
}
|
||
}
|
||
this.options.container.style.height = Math.max( currentObj.form.h+(currentObj.form.page > 1 ? document.querySelectorAll(".form_ctrl_tab div.tabstrip")[0].offsetHeight : 0 ), this.options.container.offsetHeight)+'px';
|
||
}
|
||
|
||
this.renderTab= function(n,wizard){
|
||
var tabC = document.createElement('div');
|
||
tabC.className = "tabstrip"+(wizard?" wizard": "");
|
||
for( var i=0; i<n; i++){
|
||
var tab = document.createElement('div');
|
||
tab.className = "tab";
|
||
tabC.appendChild(tab);
|
||
}
|
||
this.form.appendChild(tabC);
|
||
}
|
||
|
||
this.renderTitle= function(){
|
||
var title = document.createElement('div');
|
||
title.className = "form_titled"
|
||
title.innerHTML = "Portlet Title";
|
||
this.form.appendChild(title);
|
||
}
|
||
|
||
this.findStepIndex= function(){
|
||
for( var i=0; i< this.steps.length; i++)
|
||
if( this.steps[i].step > this.options.container.offsetWidth )
|
||
return i-1 > 0 ? i-1 : 0;
|
||
return this.steps.length-1;
|
||
}
|
||
|
||
/*
|
||
* Crea una struttura dati per poter gestire
|
||
* pi<70> efficientemente gli step
|
||
* vincolo che il form sia il primo elemento del def
|
||
*/
|
||
|
||
this.parseDef= function(){
|
||
for(var i=0; i<this.options.def.length; i++){
|
||
var item = this.options.def[i];
|
||
if( item.type == 'Form'){
|
||
var iTsteps = typeof(item.steps) != 'undefined' && item.steps != '' ? item.steps : "0"
|
||
var formSteps = iTsteps.split(',');
|
||
formSteps.sort( function(a,b){
|
||
return parseInt(a)>parseInt(b);
|
||
});
|
||
for(var s=0; s<formSteps.length; s++ ){
|
||
|
||
/*
|
||
* Create step
|
||
*/
|
||
this.steps.push({
|
||
step: (typeof(item.steps) != 'undefined' && item.steps != '') ? parseInt(formSteps[s]) : (item.v_line != "" ? parseInt(item.v_line) : parseInt(item.w)),
|
||
form: {
|
||
h: parseInt(item.h),
|
||
w: item.w,
|
||
page: item.pages_names.split(',').length,
|
||
wizard: item.wizard == 'true',
|
||
titled: item.title != 'none' && item.title != '' ? true : false
|
||
},
|
||
childs: []
|
||
});
|
||
|
||
/*
|
||
* add children
|
||
*/
|
||
|
||
for(var ii=0; ii<this.options.def.length; ii++){ /* Ciclo i rimanenti elementi */
|
||
if( ii == i )
|
||
continue;
|
||
else{
|
||
var child = this.options.def[ii];
|
||
if( this.filterType(child.type) && parseInt(child.page) == 1){
|
||
var obj={};
|
||
if(child.layout_steps_values &&
|
||
typeof(child.layout_steps_values) == 'object' && (Object.keys(child.layout_steps_values).indexOf(formSteps[s]) >-1)){
|
||
var itemSteps = child.layout_steps_values;
|
||
var itemObj = itemSteps[formSteps[s]];
|
||
if( itemObj )
|
||
obj = {
|
||
x: parseInt(itemObj.x),
|
||
y: parseInt(itemObj.y),
|
||
w: parseInt(itemObj.w),
|
||
h: parseInt(itemObj.h),
|
||
anchor: typeof(itemObj.anchor) != 'undefined' && itemObj.anchor != "" ? itemObj.anchor : "top-left",
|
||
}
|
||
} else { /* render with standard value */
|
||
obj = {
|
||
x: parseInt(child.x),
|
||
y: parseInt(child.y),
|
||
w: parseInt(child.w),
|
||
h: parseInt(child.h),
|
||
anchor: typeof(child.anchor) != 'undefined' && child.anchor != "" ? child.anchor : "top-left",
|
||
}
|
||
}
|
||
obj.z= typeof(child.zindex) != 'undefined' ? child.zindex : 0;
|
||
obj.type= child.type;
|
||
/*
|
||
* cerco il tipo passando per l'oggetto
|
||
*/
|
||
var o;
|
||
if( ZTObjects[child.type+"Obj"] ){ // ctrl standard
|
||
o = new ZTObjects[child.type+"Obj"]();
|
||
if( typeof(o.objClass.wireframe) == 'function')
|
||
obj.html= o.objClass.wireframe(child);
|
||
} else if (ZTObjects[child.type]) {
|
||
o = new ZTObjects[child.type]();
|
||
if (typeof (o.objClass.wireframe) == 'function')
|
||
obj.html = o.objClass.wireframe(child);
|
||
} else {
|
||
/* global getobj_def */
|
||
if (getobj_def(child.type+'.edtdef', child.type+'Def.js', "../visualweb/")){
|
||
o = new ZTObjects[child.type]();
|
||
if( o && typeof(o.objClass.wireframe) == 'function')
|
||
obj.html=o.objClass.wireframe(child);
|
||
}
|
||
}
|
||
this.steps[s].childs.push( obj );
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
|
||
this.setOptions=function(opt){
|
||
|
||
for( var o in this.options ){
|
||
this.options[o] = opt[o];
|
||
}
|
||
|
||
}
|
||
|
||
this.filterType= function(type){
|
||
if( type == 'SPLinker' ||
|
||
type == 'Variable' ||
|
||
type == 'Note' ||
|
||
type.indexOf('Dataobj')>-1 ||
|
||
type.indexOf('Event')>-1
|
||
)
|
||
return false;
|
||
return true;
|
||
}
|
||
|
||
this.init(options);
|
||
}
|