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";
12 //get panels before adding collumns
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
20 for(var i=0; i<this.numCol; i++)
21 colSizes[i] = 100 / columnCount;
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);
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'));
49 addPanel: function(panel, col){
50 this.panelList.push(panel)
51 this._addToCol(panel, col)
54 _addToCol: function(panel, col) {
55 panel.addToCol(this.cols[col-1]);
58 closeAllPanels: function() {
59 var panels = this.panelList;
60 for (var i=0; i<panels.length; i++)
65 openAllPanels: function(open) {
66 for (var i=0; i<this.panelList.length; i++)
67 this.panelList[i].setVisibility(open);
70 columnAt: function(x) {
71 for (var i=this.cols.length-1; i >=0; i--) {
72 if (x >= Position.positionedOffset(this.cols[i])[0])
80 for (var i=0; i<this.panelList.length; i++) {
81 delete this.panelList[i];
82 this.panelList[i] = null;
88 dropPanel: function(panel){
89 panel.column.removeChild(panel.panelDiv);
90 panel.column = this.insertionColumn;
91 this.insertionColumn.replaceChild(panel.panelDiv, this.insertionOutline);
94 dragPanel: function(panel, left, top){
95 var newCol = this.columnAt(left + panel.panelDiv.offsetWidth/2);
99 this._moveInsertion(newCol);
100 var panels = this.columnPanels(newCol);
101 var insertPos = this._getInsertionPos(panels);
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]);
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]);
113 newCol.appendChild(this.insertionOutline);
115 this.insertionColumn = newCol;
118 _moveInsertion: function(column){
119 if (this.insertionColumn != column) {
120 this.insertionColumn.removeChild(this.insertionOutline)
121 this.insertionColumn = column;
122 column.appendChild(this.insertionOutline);
126 columnPanels: function(column){
128 for (var i=0; i<column.childNodes.length; i++) {
129 if (!column.childNodes[i].isDragging) {
130 panels.push(column.childNodes[i]);
136 _getInsertionPos : function(panels) {
137 for (var i=0; i<panels.length; i++) {
138 if (panels[i] == this.insertionOutline)
143 startInsertionOutline: function(panelDiv){
144 this.insertionOutline.style.height = panelDiv.offsetHeight + "px";
145 panelDiv.parentNode.insertBefore(this.insertionOutline, panelDiv);
146 this.insertionColumn = panelDiv.parentNode;
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)
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;
167 createContent: function() {
168 this.panelContentDiv = document.createElement("div");
169 this.panelContentDiv.className = "panelContent";
170 this.panelContentDiv.innerHTML = "Loading";
171 return this.panelContentDiv;
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;
183 panelDiv.style.zIndex = 1000;
184 this.initializeHeader(headerDiv);
185 Event.observe(headerDiv, "mousedown", this._startDrag.bind(this));
188 initializeHeader: function(headerDiv) {
189 headerDiv.onmouseover = this.hover.bind(this);
190 headerDiv.onmouseout = this.unHover.bind(this);
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);
198 this.titleDiv = document.createElement("div");
199 this.titleDiv.innerHTML = headerDiv.innerHTML;
200 this.titleDiv.className = "title";
202 headerDiv.innerHTML = '';
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);
210 // headerDiv.appendChild(this.visibilityToggleDiv);
211 headerDiv.appendChild(this.closeDiv);
212 headerDiv.appendChild(this.titleDiv);
215 addToCol: function(col, isNew) {
217 if (isNew && toCol.hasChildNodes())
218 this.column.insertBefore(this.panelDiv, this.column.firstChild);
220 this.column.appendChild(this.panelDiv);
223 moveToColumn: function(col){
224 if (this.column != col) {
225 this.column.removeChild(this.panelDiv)
227 col.appendChild(this.panelDiv);
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();
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);
246 // this.visibilityToggleDiv.style.visibility = "visible";
247 this.closeDiv.show();
250 unHover: function() {
251 // this.visibilityToggleDiv.style.visibility = "hidden";
252 this.closeDiv.hide();
255 setVisibility: function(visibility) {
257 this.panelDiv.show();
259 this.panelDiv.hide();
263 toggleVisibility: function() {
264 this.setVisibility(this.panelContentDiv.style.display =='none');
269 this.panelDiv.parentNode.removeChild(this.panelDiv);
274 this.panelContentDiv.show();
275 this.visibilityToggleDiv.firstChild.setAttribute("src", "/images/bkgd_panel_arrow.png");
279 this.panelContentDiv.hide();
280 this.visibilityToggleDiv.firstChild.setAttribute("src", "/images/bkgd_panel_arrow.png");
284 this.dashboard.dropPanel(this);
286 this.panelDiv.style.position = "static";
287 //this.panelDiv.style.width = "100%";
289 this.panelDiv.style.opacity = 1;
290 if (this.dashboard.options.endingDrag)
291 this.dashboard.options.endingDrag();
295 DragPanel = Class.create();
296 DragPanel.prototype = {
297 initialize : function(panel,event){
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
307 drag : function(event){
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);
319 endDrag : function(event){
320 Event.stopObserving(document, "mousemove", this.dragHandler);
321 Event.stopObserving(document, "mouseup", this.dropHandler);
323 this.panel.panelDiv.style.zIndex = 1000;
324 this.panel.panelDiv.isDragging = false;
329 Rico.includeLoaded('ricoDashboard.js');