otsdaq_utilities  v2_04_02
DesktopWindow.js
1 //=====================================================================================
2 //
3 // Created Dec, 2012
4 // by Ryan Rivera ((rrivera at fnal.gov))
5 //
6 // DesktopWindow.js
7 //
8 // This is the desktop code for the user interface for ots. ots is the DAQ
9 // and control software for the Fermi Strips Telescope.
10 //
11 // The desktop consists of a dashboard and an arbitrary amount of windows
12 //
13 //=====================================================================================
14 
15 if (typeof Debug == 'undefined')
16  console.log('ERROR: Debug is undefined! Must include Debug.js before Desktop.js');
17 
18 if (typeof Desktop == 'undefined')
19  console.log('ERROR: Desktop is undefined! Must include Desktop.js before DesktopWindow.js');
20 else {
21 
22 
25  //define Desktop.createWindow to return window class
28  Desktop.createWindow = function(id,z,name,subname,url,w,h,x,y) {
29 
30  if(false === (this instanceof Desktop.createWindow)) {
31  //here to correct if called as "var v = Desktop.createDesktop();"
32  // instead of "var v = new Desktop.createDesktop();"
33  return new Desktop.createWindow(id,z,name,subname,url,w,h,x,y);
34  }
35 
36  //------------------------------------------------------------------
37  //create private members variables ----------------------
38  //------------------------------------------------------------------
39 
40 
41  //all units in pixels unless otherwise specified
42 
43  var _defaultWindowMinWidth = 100;
44  var _defaultWindowMinHeight = 100;
45 
46  var _defaultHeaderHeight = 30;
47  var _defaultHeaderLeftMargin = 10;
48  var _defaultHeaderFontSize = 16;
49  var _defaultButtonSize = 20;
50  var _defaultButtonLeftMargin = 2;
51  var _defaultButtonTopMargin = 1;
52 
53  var _defaultFrameBorder = 6;
54 
55  var _name;
56  var _subname;
57  var _url = url;
58  var _id = id; //unique window id, cannot change! Used as link between html div container and object
59 
60  var _winhdr,_winfrm,_winfrmHolder;
61 
62  var _w,_h,_x,_y; //position and size members
63  var _isMaximized = false;
64  var _isMinimized = false;
65  var _z = z;
66 
67  //------------------------------------------------------------------
68  //create public members variables ----------------------
69  //------------------------------------------------------------------
70  this.windiv;
71 
72  //------------------------------------------------------------------
73  //create PRIVATE members functions ----------------------
74  //------------------------------------------------------------------
75  //_refreshHeader()
76 
77  //_refreshHeader() ~~~
78  // private function to refresh header name based on window size
79  // clip text if too long
80  var _refreshHeader = function() {
81  var hdrW = _w-2*_defaultHeaderLeftMargin-5*(_defaultButtonSize+_defaultButtonLeftMargin)-1;
82  _winhdr.style.width = hdrW +"px";
83  _winhdr.innerHTML = _name + (_subname==""?"":" - ") + _subname;
84  while(_winhdr.scrollWidth > hdrW && _winhdr.innerHTML.length > 4)
85  _winhdr.innerHTML = _winhdr.innerHTML.substr(0,_winhdr.innerHTML.length-4)+"...";
86  }
87 
88  var _handleWindowContentLoading = function() {
89  //remove the "Loading" once iframe loades
90  if(_winfrmHolder.childNodes.length > 1)
91  _winfrmHolder.removeChild(
92  document.getElementById("DesktopWindowFrameLoadingDiv-"+_id));
93  }
94  //------------------------------------------------------------------
95  //create PUBLIC members functions ----------------------
96  //------------------------------------------------------------------
97  //setWindowNameAndSubName
98  //setWindowSizeAndPosition
99  //moveWindowByOffset
100  //resizeAndPositionWindow(x,y,w,h)
101  //maximize
102  //minimize
103 
104  //member variable access functions ~~~
105  this.getWindowName = function() { return _name; }
106  this.getWindowSubName = function() { return _subname; }
107  this.getWindowUrl = function() { return _url; }
108  this.getWindowId = function() { return _id; }
109  this.getWindowX = function() { return _x; }
110  this.getWindowY = function() { return _y; }
111  this.getWindowZ = function() { return parseInt(this.windiv.style.zIndex);} //return integer
112  this.getWindowWidth = function() { return _w; }
113  this.getWindowHeight = function() { return _h; }
114  this.getWindowHeaderHeight = function() { return _defaultHeaderHeight; }
115  this.isMaximized = function() {return _isMaximized && !_isMinimized;} //make sure the maximized window is visible
116  this.isMinimized = function() {return _isMinimized;}
117 
118  this.setWindowZ = function(z) {
119  //console.log("z",z,this.getWindowName());
120  _z = z; this.windiv.style.zIndex = _z;
121  }
122 
123  this.showFrame = function() { _winfrm.style.display = "inline"; }
124  this.hideFrame = function() { _winfrm.style.display = "none"; }
125 
126  //setWindowNameAndSubName() ~~~
127  // set name and subname
128  this.setWindowNameAndSubName = function(name,subname) {
129  _name = name; _subname = subname;
130  _refreshHeader();
131  Debug.log("Desktop Window name=" + name + " and subname=" + subname,Debug.LOW_PRIORITY);
132  }
133 
134  //setWindowSizeAndPosition() ~~~
135  // set size and position of window and its elements
136  this.setWindowSizeAndPosition = function(x,y,w,h) {
137  x = parseInt(x);
138  y = parseInt(y);
139  w = parseInt(w);
140  h = parseInt(h);
141 
142  //apply minimum size requirements and maximized state
143  _w = _isMaximized?Desktop.desktop.getDesktopContentWidth():(w < _defaultWindowMinWidth?_defaultWindowMinWidth:w);
144  _h = _isMaximized?Desktop.desktop.getDesktopContentHeight():(h < _defaultWindowMinHeight?_defaultWindowMinHeight:h);
145  _x = _isMaximized?Desktop.desktop.getDesktopContentX():x;
146  _y = _isMaximized?Desktop.desktop.getDesktopContentY():y;
147 
148  //keep window within desktop content bounds
149  if(_x + _w > Desktop.desktop.getDesktopContentX() + Desktop.desktop.getDesktopContentWidth())
150  _x = Desktop.desktop.getDesktopContentX() + Desktop.desktop.getDesktopContentWidth() - _w;
151  if(_y + _h > Desktop.desktop.getDesktopContentY() + Desktop.desktop.getDesktopContentHeight())
152  _y = Desktop.desktop.getDesktopContentY() + Desktop.desktop.getDesktopContentHeight() - _h;
153 
154  this.windiv.style.width = _w +"px";
155  this.windiv.style.height = _h+"px";
156  this.windiv.style.left = _x+"px";
157  this.windiv.style.top = _y+"px";
158 
159  _refreshHeader();
160 
161  _winfrm.style.width = (_w-2*_defaultFrameBorder-2)+"px"; //extra 2 for border pixels
162  _winfrm.style.height = (_h-_defaultHeaderHeight-_defaultFrameBorder-2)+"px"; //extra 2 for border pixels
163  _winfrmHolder.style.width = (_w-2*_defaultFrameBorder-2)+"px"; //extra 2 for border pixels
164  _winfrmHolder.style.height = (_h-_defaultHeaderHeight-_defaultFrameBorder-2)+"px"; //extra 2 for border pixels
165 
166  //Debug.log("Desktop Window position to " + _x + "," +
167  // _y + " size to " + _w + "," + _h,Debug.LOW_PRIORITY);
168 
169  if(_isMaximized){ //keep proper dimensions
170  _winfrm.style.position = "absolute";
171  _winfrm.style.zIndex = _z + 1;
172  _winfrm.style.width = _w + "px";
173  _winfrm.style.height = _h + "px";
174  _winfrm.style.left ="-1px";
175  _winfrm.style.top = "-1px";
176  _winfrmHolder.style.position = "absolute";
177  _winfrmHolder.style.width = (_w)+"px"; //extra 2 for border pixels
178  _winfrmHolder.style.height = (_h)+"px"; //extra 2 for border pixels
179  _winfrmHolder.style.left =(-_defaultFrameBorder-2) + "px";
180  _winfrmHolder.style.top = "-1px";
181 
182 
183  _w = w < _defaultWindowMinWidth?_defaultWindowMinWidth:w;
184  _h = h < _defaultWindowMinHeight?_defaultWindowMinHeight:h;
185  _x = x;
186  _y = y;
187 
188  //hide window header (in case user page is transparent)
189  var hdrs = this.windiv.getElementsByClassName("DesktopWindowButton");
190  for(var h=0;hdrs && h<hdrs.length;++h)
191  hdrs[h].style.display = "none";
192  hdrs = this.windiv.getElementsByClassName("DesktopWindowHeader");
193  for(var h=0;hdrs && h<hdrs.length;++h)
194  hdrs[h].style.display = "none";
195  }
196  else {
197  _winfrm.style.zIndex = _z;
198  _winfrm.style.position = "static";
199  _winfrmHolder.style.position = "static";
200 
201  //show window header (for case user page is transparent)
202  var hdrs = this.windiv.getElementsByClassName("DesktopWindowButton");
203  for(var h=0;hdrs && h<hdrs.length;++h)
204  hdrs[h].style.display = "block";
205  hdrs = this.windiv.getElementsByClassName("DesktopWindowHeader");
206  for(var h=0;hdrs && h<hdrs.length;++h)
207  hdrs[h].style.display = "block";
208  }
209 
210  Desktop.desktop.login.resetCurrentLayoutUpdateTimer();
211  }
212  //moveWindowByOffset() ~~~
213  // move position of window and its elements by an offset
214  this.moveWindowByOffset = function(dx,dy) {
215  _x += dx;
216  _y += dy;
217  //if(_x < Desktop.desktop.getDesktopContentX()) _x = Desktop.desktop.getDesktopContentX();
218  if(_y < Desktop.desktop.getDesktopContentY()) _y = Desktop.desktop.getDesktopContentY();
219  this.windiv.style.left = _x+"px";
220  this.windiv.style.top = _y+"px";
221 
222  //Debug.log("Desktop Window position to " + _x + "," +
223  // _y ,Debug.LOW_PRIORITY);
224 
225  //reset current layout update timer if a window moves
226  Desktop.desktop.login.resetCurrentLayoutUpdateTimer();
227  }
228  //resizeAndPositionWindow(x,y,w,h) ~~~
229  // resize and position of window and its elements
230  // do not allow weird re-size effects
231  this.resizeAndPositionWindow = function(x,y,w,h) {
232  if((w <= _defaultWindowMinWidth && x > _x) ||
233  (h <= _defaultWindowMinHeight && y > _y)) return;
234  if(x < Desktop.desktop.getDesktopContentX()) x = Desktop.desktop.getDesktopContentX();
235  if(y < Desktop.desktop.getDesktopContentY()) y = Desktop.desktop.getDesktopContentY();
236  this.setWindowSizeAndPosition(x,y,w,h);
237  }
238 
239  //maximize() ~~~
240  // maximize window toggle fulls screen mode
241  this.maximize = function() {
242 
243  if(_isMinimized) this.unminimize(); //untoggle minimize flag
244  _isMaximized = true;
245 
246  this.windiv.style.display = "inline"; //make sure is visible
247  this.setWindowSizeAndPosition(_x+10,_y,_w,_h);
248  window.parent.document.title= _name;
249  console.log(document.title, _name, "Maximize()");
250 
251  }
252 
253  this.unmaximize = function() {
254 
255  _isMaximized = false;
256 
257  this.windiv.style.display = "inline"; //make sure is visible
258  this.setWindowSizeAndPosition(_x,_y,_w,_h);
259  window.parent.document.title = Desktop.isWizardMode()?"ots wiz":"ots";
260  }
261 
262  //minimize() ~~~
263  // minimize window toggles visible or not (does not affect current position/size)
264  this.minimize = function() {
265 
266  if(_isMaximized)
267  window.parent.document.title = _name;
268  else
269  window.parent.document.title = Desktop.isWizardMode()?"ots wiz":"ots";
270 
271  _isMinimized = true;
272  this.windiv.style.display = "none";
273  Debug.log("-----------Chat this.windiv.style.display now is " + this.windiv.style.display);
274  }
275 
276  this.unminimize = function() {
277 
278  if(_isMaximized)
279  window.parent.document.title = _name;
280  else
281  window.parent.document.title = Desktop.isWizardMode()?"ots wiz":"ots";
282 
283  _isMinimized = false;
284  this.windiv.style.display = "inline";
285  Debug.log("-----------Chat this.windiv.style.display now is " + this.windiv.style.display);
286  }
287 
288  //------------------------------------------------------------------
289  //handle class construction ----------------------
290  //------------------------------------------------------------------
291 
292  //create holding container
293  this.windiv = document.createElement("div");
294  this.windiv.setAttribute("class", "DesktopWindow");
295  this.windiv.setAttribute("id", "DesktopWindow-" + _id); //setup ids
296  this.windiv.style.backgroundColor = Desktop.desktop.defaultWindowFrameColor;
297  this.windiv.style.position = "absolute";
298  this.windiv.style.zIndex = _z;
299 
300  //create header
301  _winhdr = document.createElement("div");
302  _winhdr.setAttribute("class", "DesktopWindowHeader");
303  _winhdr.setAttribute("id", "DesktopWindowHeader-" + _id);
304  _winhdr.style.height = _defaultHeaderHeight+"px";
305  _winhdr.style.marginLeft = _defaultHeaderLeftMargin+"px";
306  _winhdr.style.fontSize = _defaultHeaderFontSize+"px";
307  this.setWindowNameAndSubName(name, subname); // set name and subname
308  this.windiv.appendChild(_winhdr); //add header to window
309 
310  //create buttons
311 
312 
313  var tmpContainer = document.createElement("div");
314  tmpContainer.setAttribute("style", "float:right;white-space:nowrap;");
315  var tmpBtn = document.createElement("div");
316  tmpBtn.setAttribute("class", "DesktopWindowButton");
317  tmpBtn.setAttribute("id", "DesktopWindowButtonRefresh-" + _id);
318  tmpBtn.style.width = (_defaultButtonSize) +"px";
319  tmpBtn.style.height = (_defaultButtonSize) +"px";
320  tmpBtn.style.marginLeft = (_defaultButtonLeftMargin) +"px";
321  tmpBtn.style.marginTop = (_defaultButtonTopMargin) +"px";
322  tmpBtn.onmouseup = Desktop.handleWindowRefresh;
323  tmpBtn.onmousedown = Desktop.handleWindowButtonDown;
324  var tmpEl = document.createElement("div");
325  tmpEl.setAttribute("class", "DesktopWindowButtonGraphicRefresh");
326  tmpEl.innerHTML = "↻";
327  tmpBtn.appendChild(tmpEl);
328  tmpContainer.appendChild(tmpBtn); //add button to window
329 
330  //create new window element next to the refresh button with the question mark
331  var tmpBtn = document.createElement("div");
332  tmpBtn.setAttribute("class", "DesktopWindowButton");
333  tmpBtn.setAttribute("id", "DesktopWindowButtonHelp-" + _id);
334  tmpBtn.style.width = (_defaultButtonSize) +"px";
335  tmpBtn.style.height = (_defaultButtonSize) +"px";
336  tmpBtn.style.marginLeft = (_defaultButtonLeftMargin) +"px";
337  tmpBtn.style.marginTop = (_defaultButtonTopMargin) +"px";
338  tmpBtn.onmouseup = Desktop.handleWindowHelp;
339  tmpBtn.onmousedown = Desktop.handleWindowButtonDown;
340  var tmpEl = document.createElement("div");
341  tmpEl.setAttribute("class", "DesktopWindowButtonGraphicHelp");
342  tmpEl.innerHTML = "?";
343  tmpBtn.appendChild(tmpEl);
344  tmpContainer.appendChild(tmpBtn); //add button to window
345 
346 
347  var tmpBtn = document.createElement("div");
348  tmpBtn.setAttribute("class", "DesktopWindowButton");
349  tmpBtn.setAttribute("id", "DesktopWindowButtonMin-" + _id);
350  tmpBtn.style.width = (_defaultButtonSize) +"px";
351  tmpBtn.style.height = (_defaultButtonSize) +"px";
352  tmpBtn.style.marginLeft = (_defaultButtonLeftMargin) +"px";
353  tmpBtn.style.marginTop = (_defaultButtonTopMargin) +"px";
354  tmpBtn.onmouseup = Desktop.handleWindowMinimize;
355  tmpBtn.onmousedown = Desktop.handleWindowButtonDown;
356  var tmpEl = document.createElement("div");
357  tmpEl.setAttribute("class", "DesktopWindowButtonGraphicMin");
358  tmpBtn.appendChild(tmpEl);
359  tmpContainer.appendChild(tmpBtn); //add button to window
360 
361  tmpBtn = document.createElement("div");
362  tmpBtn.setAttribute("class", "DesktopWindowButton");
363  tmpBtn.setAttribute("id", "DesktopWindowButtonMax-" + _id);
364  tmpBtn.style.width = (_defaultButtonSize) +"px";
365  tmpBtn.style.height = (_defaultButtonSize) +"px";
366  tmpBtn.style.marginLeft = (_defaultButtonLeftMargin) +"px";
367  tmpBtn.style.marginTop = (_defaultButtonTopMargin) +"px";
368  tmpBtn.onmouseup = Desktop.handleWindowMaximize;
369  tmpBtn.onmousedown = Desktop.handleWindowButtonDown;
370  var tmpEl = document.createElement("div");
371  tmpEl.setAttribute("class", "DesktopWindowButtonGraphicMax");
372  tmpBtn.appendChild(tmpEl);
373  tmpContainer.appendChild(tmpBtn); //add button to window
374 
375  tmpBtn = document.createElement("div");
376  tmpBtn.setAttribute("class", "DesktopWindowButton");
377  tmpBtn.setAttribute("id", "DesktopWindowButtonClose-" + _id);
378  tmpBtn.style.width = (_defaultButtonSize) +"px";
379  tmpBtn.style.height = (_defaultButtonSize) +"px";
380  tmpBtn.style.marginLeft = (_defaultButtonLeftMargin) +"px";
381  tmpBtn.style.marginTop = (_defaultButtonTopMargin) +"px";
382  tmpBtn.onmouseup = Desktop.handleWindowClose;
383  tmpBtn.onmousedown = Desktop.handleWindowButtonDown;
384  var tmpEl = document.createElement("div");
385  tmpEl.setAttribute("class", "DesktopWindowButtonGraphicClose");
386  tmpEl.innerHTML = "x";
387  tmpBtn.appendChild(tmpEl);
388  tmpContainer.appendChild(tmpBtn); //add button to window
389 
390 
391  this.windiv.appendChild(tmpContainer); //add button container to window
392 
393  //create iframe holder for displaying during window manipulations
394  _winfrmHolder = document.createElement("div");
395  _winfrmHolder.setAttribute("class", "DesktopWindowFrameHolder");
396  _winfrmHolder.setAttribute("id", "DesktopWindowFrameHolder-" + _id);
397  _winfrmHolder.style.marginLeft = _defaultFrameBorder+"px";
398  _winfrmHolder.innerHTML =
399  "<div class='DesktopWindowHeader' id='DesktopWindowFrameLoadingDiv-"+
400  _id + "' style='width:100px;height:50px;position:relative;top:50%;left:50%;margin-top:-25px;margin-left:-50px;text-align:center;margin-bottom:-50px;'>" +
401  "Loading..." + "</div>";
402 
403  //create iframe
404  _winfrm = document.createElement("iframe");
405  _winfrm.setAttribute("class", "DesktopWindowFrame");
406  _winfrm.setAttribute("id", "DesktopWindowFrame-" + _id);
407  _winfrm.setAttribute("name", "DesktopWindowFrame-" + _id);
408  _winfrm.onload = _handleWindowContentLoading; //event to delete "Loading"
409  _winfrm.setAttribute("src", _url);
410  _winfrmHolder.appendChild(_winfrm); //add frame to holder
411  this.windiv.appendChild(_winfrmHolder); //add holder to window
412 
413  this.setWindowSizeAndPosition(x,y,w,h); //setup size and position
414 
415  //add mouse handlers
416  this.windiv.onmousedown = Desktop.handleWindowMouseDown;
417  this.windiv.onmouseup = Desktop.handleWindowMouseUp;
418  this.windiv.onmousemove = Desktop.handleWindowMouseMove;
419  this.windiv.ondblclick = Desktop.handleWindowMaximize;
420 
421  //add touch handlers (for mobile devices)
422  this.windiv.addEventListener('touchstart',Desktop.handleTouchStart);
423  this.windiv.addEventListener('touchend',Desktop.handleTouchEnd);
424  this.windiv.addEventListener('touchmove',Desktop.handleTouchMove);
425 
426  Debug.log("Desktop Window Created",Debug.LOW_PRIORITY);
427 
428  }
429 }