NP_TrackBack/trunk/trackback/js/rico/ricoDashboard.js

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