git.infodrom.org Git - misc/kostenrechnung/blob - 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');