processmaker-builder
Version:
The gulp task runner for ProcessMaker building
287 lines (283 loc) • 8.4 kB
JavaScript
/***************************************************************************
* module.dashboard.js
* ------------------------
* Copyleft : (c) 2007 maborak.com <maborak@maborak.com>
* Version : 0.2
*
***************************************************************************/
/***************************************************************************
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
***************************************************************************/
/**
* @class drag
*/
leimnud.Package.Public({
info :{
Class :"maborak",
File :"module.dashboard.js",
Name :"dashboard",
Type :"module",
Version :"0.1"
},
content :function(){
this.elements = {};
this.make=function(options)
{
this.options = {
drag:true,
panel:[],
data:[]
}.concatMaborak(options || {});
this.drop = new this.parent.module.drop();
this.drop.make();
var width = this.options.target.offsetWidth-50;
this.columns = this.options.data.length;
this.widthColumn = (width/this.columns);
this.elements.column=[];
this.elements.table = $dce('table');
$(this.elements.table).setStyle({
width:width,
borderCollapse:'collapse'
})
this.elements.tr = this.elements.table.insertRow(-1);
this.options.target.append(this.elements.table);
this.matriz = [];
for(var i=0;i<this.columns;i++)
{
this.elements.column[i]=this.elements.tr.insertCell(i);
this.parent.dom.setStyle(this.elements.column[i],{
width :width/this.columns,
border :'0px solid red',
//position:'relative',
verticalAlign:'top'
});
this.matriz.push([]);
}
this.parseData();
this.drop.setArrayPositions(true);
};
this.parseData=function()
{
for(var i=0;i<this.columns;i++)
{
var column = this.options.data[i];
for(var j=0;j<column.length;j++)
{
var wd = column[j];
this.panel({
target:this.elements.column[i],
column:i,
index:j
}.concatMaborak(wd));
this.matriz[i].push(j);
}
}
};
this.panel=function(options)
{
options = {
style:{},
titleBar:true
}.concatMaborak(options || {});
var _panel = new this.parent.module.panel();
_panel.options={
target:options.target,
title :options.title || "",
size:{w:(options.width || this.widthColumn),h:options.height || 300},
position:{x:0,y:0},
/*statusBarButtons:[
{value:G_STRINGS.ID_REMOVE}
],
statusbar:true,*/
//setup:function(){alert('Setup under construction!')},
titleBar:(options.titleBar || false),
control:{resize:false,roll:false,setup:false,drag:this.options.drag,close:true},
fx:{shadow:false,opacity:false}
};
_panel.setStyle={
containerWindow:(options.style.containerWindow || {}).concatMaborak({
position:'relative',
border:"1px solid #afafaf",
margin:3
}),
content:(options.style.content || {}).concatMaborak({
overflow:"hidden",
margin:0,
borderLeftWidth:0,
borderRightWidth:0,
borderBottomWidth:0
}),
titleBar:(options.style.titleBar || {}).concatMaborak({
backgroundImage:"url("+this.parent.info.images+"grid.title.gray.gif)",
height:16,
backgroundPosition:"0pt -5px"
}),
title:(options.style.title || {}).concatMaborak({
padding:1,
fontWeight:"normal"
}),
roll:(options.style.roll || {}).concatMaborak({
top:1
}),
close:(options.style.close || {}).concatMaborak({
top:1
}),
setup:(options.style.setup || {}).concatMaborak({
top:1
})
};
if(options.noBg)
{
_panel.setStyle.content.concatMaborak({
backgroundColor : "#DFDFDF",
borderWidth : 0
});
_panel.setStyle.containerWindow.concatMaborak({
backgroundColor : "#DFDFDF"
});
_panel.setStyle.frontend={
backgroundColor : "#DFDFDF"
};
}
_panel.events={
roll:function(){return this.drop.setArrayPositions(true);}.extend(this),
init:[function(i){
if(this.lock===true || this.moving==true){return false;}
var e = this.options.panel[i].panel.elements.containerWindow;
var p;
this.currentPhantom = p = new DOM("div",false,{
width : e.clientWidth,
height : e.clientHeight,
border : "1px dashed red",
position: "relative",
margin : 3
});
if(e.nextSibling)
{
e.parentNode.insertBefore(p,e.nextSibling);
}
else
{
e.parentNode.appendChild(p);
}
//console.info(e.nextSibling)
//console.info(e.clientWidth+":"+e.clientHeight)
}.extend(this,this.options.panel.length)],
move:function(i){
var e = this.options.panel[i].panel.elements.containerWindow;
var h = this.drop.selected;
this.drop.captureFromArray({currentElementDrag:e});
//console.info(h+":"+this.drop.selected);
if(this.drop.selected!==false && this.drop.selected!==h)
{
//var f = this.options.panel[this.drop.selected].panel.elements.containerWindow;
var f = this.drop.elements[this.drop.selected].element;
this.currentPhantom.remove();
var p;
this.currentPhantom = p = new DOM("div",false,{
width : e.clientWidth,
height : e.clientHeight,
border : "1px dashed red",
position: "relative",
margin : 3
});
if(f.nextSibling)
{
f.parentNode.insertBefore(p,f.nextSibling);
}
else
{
f.parentNode.appendChild(p);
}
//console.info(this.currentPhantom);
}
this.de = this.drop.selected;
//console.info(this.drop.selected)
}.extend(this,this.options.panel.length),
finish:function(i){
if(this.lock===true && this.moving==true){return false;}
this.lock=true;
this.moving=true;
var p = this.parent.dom.positionRange(this.currentPhantom,true);
var e = this.options.panel[i].panel.elements.containerWindow;
new this.parent.module.fx.algorithm().make({
duration : 400,
end : [p.x1,p.y1],
transition : "sineOut",
begin : [parseInt(e.style.left),parseInt(e.style.top)],
onTransition : function(fx,dom)
{
dom.style.left = fx.result[0];
dom.style.top = fx.result[1];
}.extend(this,e),
onFinish:function(fx,dom,finish)
{
var e = dom;
dom.style.left = fx.options.end[0];
dom.style.top = fx.options.end[1];
try{
this.currentPhantom.parentNode.replaceChild(e,this.currentPhantom);
}catch(e){}
this.parent.dom.setStyle(e,{
left:"auto",
top:"auto",
position:"relative"
});
this.drop.setArrayPositions(true);
this.lock=false;
this.moving=false;
if(this.drop.selected!==false)
{
var inp = this.drop.elements[this.drop.selected].value;
//console.log(this.options.panel[inp]);
//console.info("========================");
//console.info(i+":"+this.drop.selected);
//console.info(this.drop.elements[this.drop.selected].value);
}
}.extend(this,e)
});
}.extend(this,this.options.panel.length)
};
_panel.events.remove = function() {
_panel.cancelClose = true;
new leimnud.module.app.confirm().make({
label : G_STRINGS.ID_CONFIRM_REMOVE_DASHBOARD,
action: function() {
removeDashboard(options['class'],options['type'],options['element']);
return true;
}.extend(this),
cancel: function() {
_panel.cancelClose = true;
_panel.inRemove = false;
return false;
}
});
};
_panel.make();
if(options.url)
{
_panel.open({url:options.url,proxy:false});
}
if(options.image)
{
_panel.open({image:options.image,proxy:false});
}
this.options.panel.push({
panel :_panel,
index :this.options.panel.length-1,
column :options.column
});
this.drop.register({
element:_panel.elements.containerWindow,
value:this.options.panel.length-1
});
return _panel;
};
this.expand(this);
}
});