Import plugins/php/dbClass2.php from OpenRico 2.1
[misc/kostenrechnung] / lib / rico / ricoDashboard.js
1 // This file is provided for backward compatibility with Rico 1.1.
2 // It is not used by any other module in Rico 2.x. It will likely
3 // be removed in a future release.
4
5 Rico.Dashboard = Class.create();
6 Rico.Dashboard.prototype = {
7         initialize: function(dashboardId, columnCount, options) {
8                 this.dashboardDiv = $(dashboardId);
9                 this.numCol = columnCount;
10                 this.options = options || [];
11                 this.cols = new Array(); 
12                 this.insertionOutline = document.createElement("div");
13                 this.insertionOutline.id = "insertionOutline";
14      
15                 //get panels before adding collumns
16                 var dashboard = this
17    this.panelList = [];
18    // this.panelList = parsePanels(this.dashboardDiv, function(title, content, panel)
19   //                                  { return new Rico.DashboardPanel(title, content, panel, dashboard);})
20                 var colSizes = this.options.columnSizes 
21     if (!colSizes){
22       colSizes = [];
23       for(var i=0; i<this.numCol; i++)
24         colSizes[i] = 100 / columnCount;
25     }
26
27                 for(var i=0; i< this.numCol;i++)        {
28           var newColDiv = document.createElement("div");
29           newColDiv.style.width = colSizes[i] + "%";
30           newColDiv.style.minHeight = "1px";
31           newColDiv.className = "column";
32           newColDiv.id = "" + (i+1) ;
33           this.cols.push(newColDiv);
34           this.dashboardDiv.appendChild(newColDiv);
35           //if (i < this.numCol-1){
36          //    var borderDiv = document.createElement("div");
37          //    borderDiv.style.width = "3px";
38          //    borderDiv.style.height = "100%";
39          //    borderDiv.style.background = "111111"
40          //    borderDiv.className = "border";
41          //    //borderDiv.style.visibility = "visible";
42          //    this.dashboardDiv.appendChild(borderDiv);
43          // }
44                 }
45       //now add the panels to the columns
46     for (var i=0; i< this.panelList.length; i++) {
47          var panel = this.panelList[i];         
48          this._addToCol(panel, panel.panelDiv.getAttribute('column'));
49                 }
50         },
51         
52         addPanel: function(panel, col){
53           this.panelList.push(panel)
54           this._addToCol(panel, col)
55         },
56         
57         _addToCol: function(panel, col) {
58                 panel.addToCol(this.cols[col-1]);         
59         },
60         
61         closeAllPanels: function() {
62           var panels = this.panelList;
63           for (var i=0; i<panels.length; i++)
64             panels[i].close();
65           this.panelList = [];
66         },
67         
68         openAllPanels: function(open) {
69                 for (var i=0; i<this.panelList.length; i++) 
70                         this.panelList[i].setVisibility(open);
71         },
72         
73         columnAt: function(x) {
74                 for (var i=this.cols.length-1; i >=0; i--)      {
75                         if (x >= Position.positionedOffset(this.cols[i])[0])
76                                 return this.cols[i];
77                 }
78                 return this.cols[0];
79         },
80         
81         destroy: function() {
82                 try{
83                         for (var i=0; i<this.panelList.length; i++) {
84                                 delete this.panelList[i];
85                                 this.panelList[i] = null;
86                         }
87                         delete this;
88                 }catch(e){}
89         },
90         
91         dropPanel: function(panel){
92           panel.column.removeChild(panel.panelDiv);
93           panel.column = this.insertionColumn;
94           this.insertionColumn.replaceChild(panel.panelDiv, this.insertionOutline);
95   },
96
97   dragPanel: function(panel, left, top){
98     var newCol = this.columnAt(left + panel.panelDiv.offsetWidth/2);
99
100     if (!newCol) return;  
101     
102                 this._moveInsertion(newCol);
103                 var panels = this.columnPanels(newCol);
104                 var insertPos = this._getInsertionPos(panels);
105
106                 if (insertPos != 0 && 
107                     top <= Position.positionedOffset(panels[insertPos-1])[1]) {
108                         this.insertionColumn.removeChild(this.insertionOutline);
109                         newCol.insertBefore(this.insertionOutline, panels[insertPos-1]);
110                 }
111                 if (insertPos != (panels.length-1) && 
112                     top >= Position.positionedOffset(panels[insertPos+1])[1]) {
113                         if (panels[insertPos + 2]) 
114                                   newCol.insertBefore(this.insertionOutline, panels[insertPos+2]);
115                          else
116                                   newCol.appendChild(this.insertionOutline);
117                 }    
118                 this.insertionColumn = newCol;
119   },
120
121   _moveInsertion: function(column){
122                 if (this.insertionColumn != column) {
123                         this.insertionColumn.removeChild(this.insertionOutline)
124                         this.insertionColumn = column;
125                         column.appendChild(this.insertionOutline);
126         }
127   },
128   
129         columnPanels: function(column){
130                         var panels = [];
131                         for (var i=0; i<column.childNodes.length; i++) {
132                                 if (!column.childNodes[i].isDragging)  {
133                                         panels.push(column.childNodes[i]);
134                                 }
135                         }
136                         return panels;
137         },
138   
139         _getInsertionPos : function(panels) {
140                 for (var i=0; i<panels.length; i++) {
141                         if (panels[i] == this.insertionOutline) 
142                           return i;
143                 }
144         },
145         
146         startInsertionOutline: function(panelDiv){
147           this.insertionOutline.style.height = panelDiv.offsetHeight + "px";
148           panelDiv.parentNode.insertBefore(this.insertionOutline, panelDiv);
149           this.insertionColumn = panelDiv.parentNode;
150   }
151 }
152
153 Rico.PanelCreation = {
154   create: function(title, url, dashboard) {     
155                 var panelDiv = document.createElement("div");
156     var titleDiv = PanelCreation.createHeader(title)
157     var contentDiv = PanelCreation.createContent()
158                 panelDiv.className = "panel";
159                 panelDiv.appendChild(titleDiv);
160                 panelDiv.appendChild(contentDiv);       
161         return new Rico.DashboardPanel(titleDiv, contentDiv, panelDiv, dashboard)
162         },
163         createHeader: function(title) {
164                 this.panelHeaderDiv = document.createElement("div");
165                 this.panelHeaderDiv.className = "panelHeader";
166                 this.panelHeaderDiv.innerHTML = document.createTextNode(this.title);
167                 initializeHeader(this.panelHeaderDiv);
168                 return this.panelHeaderDiv;
169         },
170         createContent: function() {
171                 this.panelContentDiv = document.createElement("div");
172                 this.panelContentDiv.className = "panelContent";
173                 this.panelContentDiv.innerHTML = "Loading";
174                 return this.panelContentDiv;
175         }
176 }
177
178 Rico.DashboardPanel = Class.create();
179 Rico.DashboardPanel.prototype = {
180         initialize: function(headerDiv, contentDiv, panelDiv, dashboard) {
181                 this.dashboard = dashboard;
182                 this.panelHeaderDiv = headerDiv;
183                 this.panelContentDiv = contentDiv;
184                 this.panelDiv = panelDiv;
185                 this.open = true;
186                 panelDiv.style.zIndex = 1000;
187                 this.initializeHeader(headerDiv);
188         Event.observe(headerDiv, "mousedown", this._startDrag.bind(this));
189   },
190     
191         initializeHeader: function(headerDiv) {
192                 headerDiv.onmouseover = this.hover.bind(this);
193                 headerDiv.onmouseout = this.unHover.bind(this);
194                 
195 //              this.visibilityToggleDiv = document.createElement("div");
196 //              this.visibilityToggleDiv.className = "visibilityToggle";
197 //              this.visibilityToggleDiv.innerHTML = '<img src="/images/bkgd_panel_arrow.png"/>';
198 //              this.visibilityToggleDiv.style.visibility = "hidden";
199 //              this.visibilityToggleDiv.onmousedown = this.toggleVisibility.bind(this);
200         
201                 this.titleDiv = document.createElement("div");
202                 this.titleDiv.innerHTML = headerDiv.innerHTML;          
203                 this.titleDiv.className = "title";
204                 
205                 headerDiv.innerHTML = '';
206                 
207                 this.closeDiv = document.createElement("div");
208                 this.closeDiv.className = "close";
209                 this.closeDiv.innerHTML = '<img src="/images/icn_close.png" alt="Remove" title="Remove this metric from the report" />';
210                 this.closeDiv.style.display = "none";
211                 this.closeDiv.onmousedown = this.close.bind(this);    
212                 
213 //              headerDiv.appendChild(this.visibilityToggleDiv);
214                 headerDiv.appendChild(this.closeDiv);
215                 headerDiv.appendChild(this.titleDiv);
216         },
217
218         addToCol: function(col, isNew) {
219           this.column  = col;
220                 if (isNew && toCol.hasChildNodes())
221                         this.column.insertBefore(this.panelDiv, this.column.firstChild);
222                 else
223                         this.column.appendChild(this.panelDiv);
224         },
225         
226         moveToColumn: function(col){
227                 if (this.column != col) {
228                         this.column.removeChild(this.panelDiv)
229                         this.column = col;
230                         col.appendChild(this.panelDiv);
231                 }
232         },    
233     //this.obj.root.onDragStart(parseInt(panel.panelDiv.style.left), parseInt(pnel.panelDiv.style.top), 
234                 //                          event.clientX, event.clientY);
235         _startDrag: function(event) {
236                 if (this.dashboard.options.startingDrag)
237                         this.dashboard.options.startingDrag();
238
239                 Position.absolutize(this.panelDiv)
240                 this.dashboard.startInsertionOutline(this.panelDiv)
241                 this.panelDiv.style.opacity = .7;
242                 this.panelDiv.style.zIndex = 900;
243                 //this.panelDiv.style.width = (parseInt(this.panelDiv.offestWidth)-4)+"px";
244                 new DragPanel(this, event);
245                 Event.stop(event);
246         },
247         
248         hover: function() {
249 //              this.visibilityToggleDiv.style.visibility = "visible";
250                 this.closeDiv.show();
251         },
252         
253         unHover: function() {
254 //              this.visibilityToggleDiv.style.visibility = "hidden";
255                 this.closeDiv.hide();
256         },
257         
258         setVisibility: function(visibility) {
259                 if (visibility) {
260                         this.panelDiv.show(); 
261                 } else {
262                    this.panelDiv.hide();
263                 }
264         },
265         
266         toggleVisibility: function() {
267            this.setVisibility(this.panelContentDiv.style.display =='none');
268         },
269         
270         close: function() {
271     if (this.open)
272                   this.panelDiv.parentNode.removeChild(this.panelDiv);
273                   this.open = false;
274         },
275         
276         show: function() {
277                 this.panelContentDiv.show();
278                 this.visibilityToggleDiv.firstChild.setAttribute("src", "/images/bkgd_panel_arrow.png");
279         },
280
281         hide: function() {
282                 this.panelContentDiv.hide();
283                 this.visibilityToggleDiv.firstChild.setAttribute("src", "/images/bkgd_panel_arrow.png");
284         },  
285         
286         drop: function() {
287           this.dashboard.dropPanel(this);
288           
289           this.panelDiv.style.position = "static";
290                 //this.panelDiv.style.width = "100%";
291                 this.unHover();
292                 this.panelDiv.style.opacity = 1;
293                 if (this.dashboard.options.endingDrag)
294                         this.dashboard.options.endingDrag();
295         }
296 }
297
298 DragPanel = Class.create();
299 DragPanel.prototype = {
300         initialize : function(panel,event){     
301             this.panel = panel;     
302                         this.lastMouseX = event.clientX;
303                         this.lastMouseY = event.clientY;
304                         this.dragHandler = this.drag.bindAsEventListener(this)
305                         this.dropHandler = this.endDrag.bindAsEventListener(this)
306                         Event.observe(document, "mousemove", this.dragHandler);
307                         Event.observe(document, "mouseup", this.dropHandler);
308                         this.panel.panelDiv.isDragging = true
309         },      
310         drag : function(event){
311
312           panelDiv = this.panel.panelDiv
313                 var newLeft = parseInt(panelDiv.style.left) + event.clientX - this.lastMouseX;
314                 var newTop = parseInt(panelDiv.style.top) + event.clientY - this.lastMouseY;
315                 panelDiv.style.left = newLeft + "px";
316                 panelDiv.style.top = newTop + "px";                     
317                 this.lastMouseX = event.clientX;
318                 this.lastMouseY = event.clientY;
319     this.panel.dashboard.dragPanel(this.panel, newLeft, newTop);
320     Event.stop(event);
321         },
322         endDrag : function(event){                      
323                 Event.stopObserving(document, "mousemove", this.dragHandler);
324         Event.stopObserving(document, "mouseup", this.dropHandler);     
325                 this.panel.drop();      
326                 this.panel.panelDiv.style.zIndex = 1000;
327                 this.panel.panelDiv.isDragging = false;
328                 Event.stop(event);
329         }
330 }
331
332 Rico.includeLoaded('ricoDashboard.js');