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.
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";
15 //get panels before adding collumns
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
23 for(var i=0; i<this.numCol; i++)
24 colSizes[i] = 100 / columnCount;
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);
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'));
52 addPanel: function(panel, col){
53 this.panelList.push(panel)
54 this._addToCol(panel, col)
57 _addToCol: function(panel, col) {
58 panel.addToCol(this.cols[col-1]);
61 closeAllPanels: function() {
62 var panels = this.panelList;
63 for (var i=0; i<panels.length; i++)
68 openAllPanels: function(open) {
69 for (var i=0; i<this.panelList.length; i++)
70 this.panelList[i].setVisibility(open);
73 columnAt: function(x) {
74 for (var i=this.cols.length-1; i >=0; i--) {
75 if (x >= Position.positionedOffset(this.cols[i])[0])
83 for (var i=0; i<this.panelList.length; i++) {
84 delete this.panelList[i];
85 this.panelList[i] = null;
91 dropPanel: function(panel){
92 panel.column.removeChild(panel.panelDiv);
93 panel.column = this.insertionColumn;
94 this.insertionColumn.replaceChild(panel.panelDiv, this.insertionOutline);
97 dragPanel: function(panel, left, top){
98 var newCol = this.columnAt(left + panel.panelDiv.offsetWidth/2);
102 this._moveInsertion(newCol);
103 var panels = this.columnPanels(newCol);
104 var insertPos = this._getInsertionPos(panels);
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]);
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]);
116 newCol.appendChild(this.insertionOutline);
118 this.insertionColumn = newCol;
121 _moveInsertion: function(column){
122 if (this.insertionColumn != column) {
123 this.insertionColumn.removeChild(this.insertionOutline)
124 this.insertionColumn = column;
125 column.appendChild(this.insertionOutline);
129 columnPanels: function(column){
131 for (var i=0; i<column.childNodes.length; i++) {
132 if (!column.childNodes[i].isDragging) {
133 panels.push(column.childNodes[i]);
139 _getInsertionPos : function(panels) {
140 for (var i=0; i<panels.length; i++) {
141 if (panels[i] == this.insertionOutline)
146 startInsertionOutline: function(panelDiv){
147 this.insertionOutline.style.height = panelDiv.offsetHeight + "px";
148 panelDiv.parentNode.insertBefore(this.insertionOutline, panelDiv);
149 this.insertionColumn = panelDiv.parentNode;
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)
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;
170 createContent: function() {
171 this.panelContentDiv = document.createElement("div");
172 this.panelContentDiv.className = "panelContent";
173 this.panelContentDiv.innerHTML = "Loading";
174 return this.panelContentDiv;
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;
186 panelDiv.style.zIndex = 1000;
187 this.initializeHeader(headerDiv);
188 Event.observe(headerDiv, "mousedown", this._startDrag.bind(this));
191 initializeHeader: function(headerDiv) {
192 headerDiv.onmouseover = this.hover.bind(this);
193 headerDiv.onmouseout = this.unHover.bind(this);
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);
201 this.titleDiv = document.createElement("div");
202 this.titleDiv.innerHTML = headerDiv.innerHTML;
203 this.titleDiv.className = "title";
205 headerDiv.innerHTML = '';
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);
213 // headerDiv.appendChild(this.visibilityToggleDiv);
214 headerDiv.appendChild(this.closeDiv);
215 headerDiv.appendChild(this.titleDiv);
218 addToCol: function(col, isNew) {
220 if (isNew && toCol.hasChildNodes())
221 this.column.insertBefore(this.panelDiv, this.column.firstChild);
223 this.column.appendChild(this.panelDiv);
226 moveToColumn: function(col){
227 if (this.column != col) {
228 this.column.removeChild(this.panelDiv)
230 col.appendChild(this.panelDiv);
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();
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);
249 // this.visibilityToggleDiv.style.visibility = "visible";
250 this.closeDiv.show();
253 unHover: function() {
254 // this.visibilityToggleDiv.style.visibility = "hidden";
255 this.closeDiv.hide();
258 setVisibility: function(visibility) {
260 this.panelDiv.show();
262 this.panelDiv.hide();
266 toggleVisibility: function() {
267 this.setVisibility(this.panelContentDiv.style.display =='none');
272 this.panelDiv.parentNode.removeChild(this.panelDiv);
277 this.panelContentDiv.show();
278 this.visibilityToggleDiv.firstChild.setAttribute("src", "/images/bkgd_panel_arrow.png");
282 this.panelContentDiv.hide();
283 this.visibilityToggleDiv.firstChild.setAttribute("src", "/images/bkgd_panel_arrow.png");
287 this.dashboard.dropPanel(this);
289 this.panelDiv.style.position = "static";
290 //this.panelDiv.style.width = "100%";
292 this.panelDiv.style.opacity = 1;
293 if (this.dashboard.options.endingDrag)
294 this.dashboard.options.endingDrag();
298 DragPanel = Class.create();
299 DragPanel.prototype = {
300 initialize : function(panel,event){
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
310 drag : function(event){
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);
322 endDrag : function(event){
323 Event.stopObserving(document, "mousemove", this.dragHandler);
324 Event.stopObserving(document, "mouseup", this.dropHandler);
326 this.panel.panelDiv.style.zIndex = 1000;
327 this.panel.panelDiv.isDragging = false;
332 Rico.includeLoaded('ricoDashboard.js');