otsdaq_utilities  v2_02_00
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) { _z = z; this.windiv.style.zIndex = _z; }
119 
120  this.showFrame = function() { _winfrm.style.display = "inline"; }
121  this.hideFrame = function() { _winfrm.style.display = "none"; }
122 
123  //setWindowNameAndSubName() ~~~
124  // set name and subname
125  this.setWindowNameAndSubName = function(name,subname) {
126  _name = name; _subname = subname;
127  _refreshHeader();
128  Debug.log("Desktop Window name=" + name + " and subname=" + subname,Debug.LOW_PRIORITY);
129  }
130 
131  //setWindowSizeAndPosition() ~~~
132  // set size and position of window and its elements
133  this.setWindowSizeAndPosition = function(x,y,w,h) {
134  x = parseInt(x);
135  y = parseInt(y);
136  w = parseInt(w);
137  h = parseInt(h);
138 
139  //apply minimum size requirements and maximized state
140  _w = _isMaximized?Desktop.desktop.getDesktopContentWidth():(w < _defaultWindowMinWidth?_defaultWindowMinWidth:w);
141  _h = _isMaximized?Desktop.desktop.getDesktopContentHeight():(h < _defaultWindowMinHeight?_defaultWindowMinHeight:h);
142  _x = _isMaximized?Desktop.desktop.getDesktopContentX():x;
143  _y = _isMaximized?Desktop.desktop.getDesktopContentY():y;
144 
145  //keep window within desktop content bounds
146  if(_x + _w > Desktop.desktop.getDesktopContentX() + Desktop.desktop.getDesktopContentWidth())
147  _x = Desktop.desktop.getDesktopContentX() + Desktop.desktop.getDesktopContentWidth() - _w;
148  if(_y + _h > Desktop.desktop.getDesktopContentY() + Desktop.desktop.getDesktopContentHeight())
149  _y = Desktop.desktop.getDesktopContentY() + Desktop.desktop.getDesktopContentHeight() - _h;
150 
151  this.windiv.style.width = _w +"px";
152  this.windiv.style.height = _h+"px";
153  this.windiv.style.left = _x+"px";
154  this.windiv.style.top = _y+"px";
155 
156  _refreshHeader();
157 
158  _winfrm.style.width = (_w-2*_defaultFrameBorder-2)+"px"; //extra 2 for border pixels
159  _winfrm.style.height = (_h-_defaultHeaderHeight-_defaultFrameBorder-2)+"px"; //extra 2 for border pixels
160  _winfrmHolder.style.width = (_w-2*_defaultFrameBorder-2)+"px"; //extra 2 for border pixels
161  _winfrmHolder.style.height = (_h-_defaultHeaderHeight-_defaultFrameBorder-2)+"px"; //extra 2 for border pixels
162 
163  //Debug.log("Desktop Window position to " + _x + "," +
164  // _y + " size to " + _w + "," + _h,Debug.LOW_PRIORITY);
165 
166  if(_isMaximized){ //keep proper dimensions
167  _winfrm.style.position = "absolute";
168  _winfrm.style.zIndex = _z + 1;
169  _winfrm.style.width = _w + "px";
170  _winfrm.style.height = _h + "px";
171  _winfrm.style.left ="-1px";
172  _winfrm.style.top = "-1px";
173  _winfrmHolder.style.position = "absolute";
174  _winfrmHolder.style.width = (_w)+"px"; //extra 2 for border pixels
175  _winfrmHolder.style.height = (_h)+"px"; //extra 2 for border pixels
176  _winfrmHolder.style.left =(-_defaultFrameBorder-2) + "px";
177  _winfrmHolder.style.top = "-1px";
178 
179 
180  _w = w < _defaultWindowMinWidth?_defaultWindowMinWidth:w;
181  _h = h < _defaultWindowMinHeight?_defaultWindowMinHeight:h;
182  _x = x;
183  _y = y;
184 
185  //hide window header (in case user page is transparent)
186  var hdrs = this.windiv.getElementsByClassName("DesktopWindowButton");
187  for(var h=0;hdrs && h<hdrs.length;++h)
188  hdrs[h].style.display = "none";
189  hdrs = this.windiv.getElementsByClassName("DesktopWindowHeader");
190  for(var h=0;hdrs && h<hdrs.length;++h)
191  hdrs[h].style.display = "none";
192  }
193  else {
194  _winfrm.style.zIndex = _z;
195  _winfrm.style.position = "static";
196  _winfrmHolder.style.position = "static";
197 
198  //show window header (for case user page is transparent)
199  var hdrs = this.windiv.getElementsByClassName("DesktopWindowButton");
200  for(var h=0;hdrs && h<hdrs.length;++h)
201  hdrs[h].style.display = "block";
202  hdrs = this.windiv.getElementsByClassName("DesktopWindowHeader");
203  for(var h=0;hdrs && h<hdrs.length;++h)
204  hdrs[h].style.display = "block";
205  }
206 
207  Desktop.desktop.login.resetCurrentLayoutUpdateTimer();
208  }
209  //moveWindowByOffset() ~~~
210  // move position of window and its elements by an offset
211  this.moveWindowByOffset = function(dx,dy) {
212  _x += dx;
213  _y += dy;
214  //if(_x < Desktop.desktop.getDesktopContentX()) _x = Desktop.desktop.getDesktopContentX();
215  if(_y < Desktop.desktop.getDesktopContentY()) _y = Desktop.desktop.getDesktopContentY();
216  this.windiv.style.left = _x+"px";
217  this.windiv.style.top = _y+"px";
218 
219  //Debug.log("Desktop Window position to " + _x + "," +
220  // _y ,Debug.LOW_PRIORITY);
221 
222  //reset current layout update timer if a window moves
223  Desktop.desktop.login.resetCurrentLayoutUpdateTimer();
224  }
225  //resizeAndPositionWindow(x,y,w,h) ~~~
226  // resize and position of window and its elements
227  // do not allow weird re-size effects
228  this.resizeAndPositionWindow = function(x,y,w,h) {
229  if((w <= _defaultWindowMinWidth && x > _x) ||
230  (h <= _defaultWindowMinHeight && y > _y)) return;
231  if(x < Desktop.desktop.getDesktopContentX()) x = Desktop.desktop.getDesktopContentX();
232  if(y < Desktop.desktop.getDesktopContentY()) y = Desktop.desktop.getDesktopContentY();
233  this.setWindowSizeAndPosition(x,y,w,h);
234  }
235 
236  //maximize() ~~~
237  // maximize window toggle fulls screen mode
238  this.maximize = function() {
239 
240  if(_isMinimized) this.unminimize(); //untoggle minimize flag
241  _isMaximized = true;
242 
243  this.windiv.style.display = "inline"; //make sure is visible
244  this.setWindowSizeAndPosition(_x+10,_y,_w,_h);
245  window.parent.document.title= _name;
246  console.log(document.title, _name, "Maximize()");
247 
248  }
249 
250  this.unmaximize = function() {
251 
252  _isMaximized = false;
253 
254  this.windiv.style.display = "inline"; //make sure is visible
255  this.setWindowSizeAndPosition(_x,_y,_w,_h);
256  window.parent.document.title = Desktop.isWizardMode()?"ots wiz":"ots";
257  }
258 
259  //minimize() ~~~
260  // minimize window toggles visible or not (does not affect current position/size)
261  this.minimize = function() {
262 
263  if(_isMaximized)
264  window.parent.document.title = _name;
265  else
266  window.parent.document.title = Desktop.isWizardMode()?"ots wiz":"ots";
267 
268  _isMinimized = true;
269  this.windiv.style.display = "none";
270  Debug.log("-----------Chat this.windiv.style.display now is " + this.windiv.style.display);
271  }
272 
273  this.unminimize = function() {
274 
275  if(_isMaximized)
276  window.parent.document.title = _name;
277  else
278  window.parent.document.title = Desktop.isWizardMode()?"ots wiz":"ots";
279 
280  _isMinimized = false;
281  this.windiv.style.display = "inline";
282  Debug.log("-----------Chat this.windiv.style.display now is " + this.windiv.style.display);
283  }
284 
285  //------------------------------------------------------------------
286  //handle class construction ----------------------
287  //------------------------------------------------------------------
288 
289  //create holding container
290  this.windiv = document.createElement("div");
291  this.windiv.setAttribute("class", "DesktopWindow");
292  this.windiv.setAttribute("id", "DesktopWindow-" + _id); //setup ids
293  this.windiv.style.backgroundColor = Desktop.desktop.defaultWindowFrameColor;
294  this.windiv.style.position = "absolute";
295  this.windiv.style.zIndex = _z;
296 
297  //create header
298  _winhdr = document.createElement("div");
299  _winhdr.setAttribute("class", "DesktopWindowHeader");
300  _winhdr.setAttribute("id", "DesktopWindowHeader-" + _id);
301  _winhdr.style.height = _defaultHeaderHeight+"px";
302  _winhdr.style.marginLeft = _defaultHeaderLeftMargin+"px";
303  _winhdr.style.fontSize = _defaultHeaderFontSize+"px";
304  this.setWindowNameAndSubName(name, subname); // set name and subname
305  this.windiv.appendChild(_winhdr); //add header to window
306 
307  //create buttons
308  var tmpBtn = document.createElement("div");
309  tmpBtn.setAttribute("class", "DesktopWindowButton");
310  tmpBtn.setAttribute("id", "DesktopWindowButtonRefresh-" + _id);
311  tmpBtn.style.width = (_defaultButtonSize) +"px";
312  tmpBtn.style.height = (_defaultButtonSize) +"px";
313  tmpBtn.style.marginLeft = (_defaultButtonLeftMargin) +"px";
314  tmpBtn.style.marginTop = (_defaultButtonTopMargin) +"px";
315  tmpBtn.onmouseup = Desktop.handleWindowRefresh;
316  tmpBtn.onmousedown = Desktop.handleWindowButtonDown;
317  var tmpEl = document.createElement("div");
318  tmpEl.setAttribute("class", "DesktopWindowButtonGraphicRefresh");
319  tmpEl.innerHTML = "↻";
320  tmpBtn.appendChild(tmpEl);
321  this.windiv.appendChild(tmpBtn); //add button to window
322 
323  var tmpBtn = document.createElement("div");
324  tmpBtn.setAttribute("class", "DesktopWindowButton");
325  tmpBtn.setAttribute("id", "DesktopWindowButtonMin-" + _id);
326  tmpBtn.style.width = (_defaultButtonSize) +"px";
327  tmpBtn.style.height = (_defaultButtonSize) +"px";
328  tmpBtn.style.marginLeft = (_defaultButtonLeftMargin) +"px";
329  tmpBtn.style.marginTop = (_defaultButtonTopMargin) +"px";
330  tmpBtn.onmouseup = Desktop.handleWindowMinimize;
331  tmpBtn.onmousedown = Desktop.handleWindowButtonDown;
332  var tmpEl = document.createElement("div");
333  tmpEl.setAttribute("class", "DesktopWindowButtonGraphicMin");
334  tmpBtn.appendChild(tmpEl);
335  this.windiv.appendChild(tmpBtn); //add button to window
336 
337  tmpBtn = document.createElement("div");
338  tmpBtn.setAttribute("class", "DesktopWindowButton");
339  tmpBtn.setAttribute("id", "DesktopWindowButtonMax-" + _id);
340  tmpBtn.style.width = (_defaultButtonSize) +"px";
341  tmpBtn.style.height = (_defaultButtonSize) +"px";
342  tmpBtn.style.marginLeft = (_defaultButtonLeftMargin) +"px";
343  tmpBtn.style.marginTop = (_defaultButtonTopMargin) +"px";
344  tmpBtn.onmouseup = Desktop.handleWindowMaximize;
345  tmpBtn.onmousedown = Desktop.handleWindowButtonDown;
346  var tmpEl = document.createElement("div");
347  tmpEl.setAttribute("class", "DesktopWindowButtonGraphicMax");
348  tmpBtn.appendChild(tmpEl);
349  this.windiv.appendChild(tmpBtn); //add button to window
350 
351  tmpBtn = document.createElement("div");
352  tmpBtn.setAttribute("class", "DesktopWindowButton");
353  tmpBtn.setAttribute("id", "DesktopWindowButtonClose-" + _id);
354  tmpBtn.style.width = (_defaultButtonSize) +"px";
355  tmpBtn.style.height = (_defaultButtonSize) +"px";
356  tmpBtn.style.marginLeft = (_defaultButtonLeftMargin) +"px";
357  tmpBtn.style.marginTop = (_defaultButtonTopMargin) +"px";
358  tmpBtn.onmouseup = Desktop.handleWindowClose;
359  tmpBtn.onmousedown = Desktop.handleWindowButtonDown;
360  var tmpEl = document.createElement("div");
361  tmpEl.setAttribute("class", "DesktopWindowButtonGraphicClose");
362  tmpEl.innerHTML = "x";
363  tmpBtn.appendChild(tmpEl);
364  this.windiv.appendChild(tmpBtn); //add button to window
365 
366  //create iframe holder for displaying during window manipulations
367  _winfrmHolder = document.createElement("div");
368  _winfrmHolder.setAttribute("class", "DesktopWindowFrameHolder");
369  _winfrmHolder.setAttribute("id", "DesktopWindowFrameHolder-" + _id);
370  _winfrmHolder.style.marginLeft = _defaultFrameBorder+"px";
371  _winfrmHolder.innerHTML =
372  "<div class='DesktopWindowHeader' id='DesktopWindowFrameLoadingDiv-"+
373  _id + "' style='width:100px;height:50px;position:relative;top:50%;left:50%;margin-top:-25px;margin-left:-50px;text-align:center;margin-bottom:-50px;'>" +
374  "Loading..." + "</div>";
375 
376  //create iframe
377  _winfrm = document.createElement("iframe");
378  _winfrm.setAttribute("class", "DesktopWindowFrame");
379  _winfrm.setAttribute("id", "DesktopWindowFrame-" + _id);
380  _winfrm.setAttribute("name", "DesktopWindowFrame-" + _id);
381  _winfrm.onload = _handleWindowContentLoading; //event to delete "Loading"
382  _winfrm.setAttribute("src", _url);
383  _winfrmHolder.appendChild(_winfrm); //add frame to holder
384  this.windiv.appendChild(_winfrmHolder); //add holder to window
385 
386  this.setWindowSizeAndPosition(x,y,w,h); //setup size and position
387 
388  //add mouse handlers
389  this.windiv.onmousedown = Desktop.handleWindowMouseDown;
390  this.windiv.onmouseup = Desktop.handleWindowMouseUp;
391  this.windiv.onmousemove = Desktop.handleWindowMouseMove;
392  this.windiv.ondblclick = Desktop.handleWindowMaximize;
393 
394  //add touch handlers (for mobile devices)
395  this.windiv.addEventListener('touchstart',Desktop.handleTouchStart);
396  this.windiv.addEventListener('touchend',Desktop.handleTouchEnd);
397  this.windiv.addEventListener('touchmove',Desktop.handleTouchMove);
398 
399  Debug.log("Desktop Window Created",Debug.LOW_PRIORITY);
400 
401  }
402 }