otsdaq_utilities  v2_04_01
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-4*(_defaultButtonSize+_defaultButtonLeftMargin);
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  var tmpContainer = document.createElement("div");
312  tmpContainer.setAttribute("style", "float:right;white-space:nowrap;");
313  var tmpBtn = document.createElement("div");
314  tmpBtn.setAttribute("class", "DesktopWindowButton");
315  tmpBtn.setAttribute("id", "DesktopWindowButtonRefresh-" + _id);
316  tmpBtn.style.width = (_defaultButtonSize) +"px";
317  tmpBtn.style.height = (_defaultButtonSize) +"px";
318  tmpBtn.style.marginLeft = (_defaultButtonLeftMargin) +"px";
319  tmpBtn.style.marginTop = (_defaultButtonTopMargin) +"px";
320  tmpBtn.onmouseup = Desktop.handleWindowRefresh;
321  tmpBtn.onmousedown = Desktop.handleWindowButtonDown;
322  var tmpEl = document.createElement("div");
323  tmpEl.setAttribute("class", "DesktopWindowButtonGraphicRefresh");
324  tmpEl.innerHTML = "↻";
325  tmpBtn.appendChild(tmpEl);
326  tmpContainer.appendChild(tmpBtn); //add button to window
327 
328  var tmpBtn = document.createElement("div");
329  tmpBtn.setAttribute("class", "DesktopWindowButton");
330  tmpBtn.setAttribute("id", "DesktopWindowButtonMin-" + _id);
331  tmpBtn.style.width = (_defaultButtonSize) +"px";
332  tmpBtn.style.height = (_defaultButtonSize) +"px";
333  tmpBtn.style.marginLeft = (_defaultButtonLeftMargin) +"px";
334  tmpBtn.style.marginTop = (_defaultButtonTopMargin) +"px";
335  tmpBtn.onmouseup = Desktop.handleWindowMinimize;
336  tmpBtn.onmousedown = Desktop.handleWindowButtonDown;
337  var tmpEl = document.createElement("div");
338  tmpEl.setAttribute("class", "DesktopWindowButtonGraphicMin");
339  tmpBtn.appendChild(tmpEl);
340  tmpContainer.appendChild(tmpBtn); //add button to window
341 
342  tmpBtn = document.createElement("div");
343  tmpBtn.setAttribute("class", "DesktopWindowButton");
344  tmpBtn.setAttribute("id", "DesktopWindowButtonMax-" + _id);
345  tmpBtn.style.width = (_defaultButtonSize) +"px";
346  tmpBtn.style.height = (_defaultButtonSize) +"px";
347  tmpBtn.style.marginLeft = (_defaultButtonLeftMargin) +"px";
348  tmpBtn.style.marginTop = (_defaultButtonTopMargin) +"px";
349  tmpBtn.onmouseup = Desktop.handleWindowMaximize;
350  tmpBtn.onmousedown = Desktop.handleWindowButtonDown;
351  var tmpEl = document.createElement("div");
352  tmpEl.setAttribute("class", "DesktopWindowButtonGraphicMax");
353  tmpBtn.appendChild(tmpEl);
354  tmpContainer.appendChild(tmpBtn); //add button to window
355 
356  tmpBtn = document.createElement("div");
357  tmpBtn.setAttribute("class", "DesktopWindowButton");
358  tmpBtn.setAttribute("id", "DesktopWindowButtonClose-" + _id);
359  tmpBtn.style.width = (_defaultButtonSize) +"px";
360  tmpBtn.style.height = (_defaultButtonSize) +"px";
361  tmpBtn.style.marginLeft = (_defaultButtonLeftMargin) +"px";
362  tmpBtn.style.marginTop = (_defaultButtonTopMargin) +"px";
363  tmpBtn.onmouseup = Desktop.handleWindowClose;
364  tmpBtn.onmousedown = Desktop.handleWindowButtonDown;
365  var tmpEl = document.createElement("div");
366  tmpEl.setAttribute("class", "DesktopWindowButtonGraphicClose");
367  tmpEl.innerHTML = "x";
368  tmpBtn.appendChild(tmpEl);
369  tmpContainer.appendChild(tmpBtn); //add button to window
370 
371 
372  this.windiv.appendChild(tmpContainer); //add button container to window
373 
374  //create iframe holder for displaying during window manipulations
375  _winfrmHolder = document.createElement("div");
376  _winfrmHolder.setAttribute("class", "DesktopWindowFrameHolder");
377  _winfrmHolder.setAttribute("id", "DesktopWindowFrameHolder-" + _id);
378  _winfrmHolder.style.marginLeft = _defaultFrameBorder+"px";
379  _winfrmHolder.innerHTML =
380  "<div class='DesktopWindowHeader' id='DesktopWindowFrameLoadingDiv-"+
381  _id + "' style='width:100px;height:50px;position:relative;top:50%;left:50%;margin-top:-25px;margin-left:-50px;text-align:center;margin-bottom:-50px;'>" +
382  "Loading..." + "</div>";
383 
384  //create iframe
385  _winfrm = document.createElement("iframe");
386  _winfrm.setAttribute("class", "DesktopWindowFrame");
387  _winfrm.setAttribute("id", "DesktopWindowFrame-" + _id);
388  _winfrm.setAttribute("name", "DesktopWindowFrame-" + _id);
389  _winfrm.onload = _handleWindowContentLoading; //event to delete "Loading"
390  _winfrm.setAttribute("src", _url);
391  _winfrmHolder.appendChild(_winfrm); //add frame to holder
392  this.windiv.appendChild(_winfrmHolder); //add holder to window
393 
394  this.setWindowSizeAndPosition(x,y,w,h); //setup size and position
395 
396  //add mouse handlers
397  this.windiv.onmousedown = Desktop.handleWindowMouseDown;
398  this.windiv.onmouseup = Desktop.handleWindowMouseUp;
399  this.windiv.onmousemove = Desktop.handleWindowMouseMove;
400  this.windiv.ondblclick = Desktop.handleWindowMaximize;
401 
402  //add touch handlers (for mobile devices)
403  this.windiv.addEventListener('touchstart',Desktop.handleTouchStart);
404  this.windiv.addEventListener('touchend',Desktop.handleTouchEnd);
405  this.windiv.addEventListener('touchmove',Desktop.handleTouchMove);
406 
407  Debug.log("Desktop Window Created",Debug.LOW_PRIORITY);
408 
409  }
410 }