Remoto - VFS: footer.js Source File
Remoto - VFS
footer.js
Go to the documentation of this file.
1 
2 define( [
3  "remoto!stdlib:js/paneManager/arrowMessage.js",
4  "include/modal/modal",
5  "remoto!stdlib:js/paneManager/paneMenu.js",
6  //"jquery/jquery-color/jquery.color",
7  "jquery/jquery",
8  "remoto!stdlib:js/paneManager/footer.css",
9  ],
10  function(arrowMessage,modal,menuManager)
11  {
12  'use strict';
13 
31  function footer(config)
32  {
33  var THIS = this;
34 
35  var _html = this._html = $("<div class='footer'/>");
36  //var _message = this._message = $("<span class='footer-message'>&#x1F464;</span>");
37  var _user = this._user = $("<span class='footer-icon footer-user'></span>");
38  var _connect = this._connectState = $("<span class='footer-icon footer-connect'>&#9741;</span>");
39  var _status = this._statusState = $("<span class='footer-icon footer-status'>&#9673;</span>");
40 
41  this._username = "[unknown]";
42 
43  //this._message_M = "";
44 
45  this._connectState_M = null;
46  this._connectMessage_M = "Initializing...";
47  //this._connectState.bind("mouseover", function() { THIS.message = "Client is "+THIS._connectState_M.toLowerCase(); } );
48  //this._connectState.bind("mouseover", function() { THIS.arrowMessage("Client is "+THIS._connectState_M.toLowerCase(),THIS._connectState,"left+5 bottom+0","left bottom"); } );
49  this._connectState.bind("mouseover", function() { THIS.arrowMessage(THIS._connectMessage_M,THIS._connectState,"left+10 bottom+8","right top", {left:5} ); } );
50 
51  this._statusState_M = null;
52  //this._statusState.bind("mouseover", function() { THIS.message = "Connection status: "+THIS._statusState_M.toLowerCase(); } );
53 
54  this._user.bind("click", function(e) {
55 
56  var u = menuManager.getMenu( "__userMenu" );
57 
58  if (!u)
59  {
60  u = menuManager.createMenu("__userMenu");
61  u.addItem( { label: "Preferences for "+THIS._username,
62  callback: function() { $(window).trigger("openUserPreferences"); },
63  icon: "<span class='paneMenuIcon'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 -60 531.626 511.626\" fill=\"var(--FontColorMain)\"><path d=\"M54.818 200.999c-15.23 0-28.171 5.327-38.832 15.987C5.33 227.642 0 240.583 0 255.813c0 15.223 5.33 28.172 15.99 38.83 10.66 10.656 23.604 15.984 38.832 15.984 15.225 0 28.167-5.328 38.828-15.984 10.657-10.657 15.987-23.606 15.987-38.83 0-15.23-5.33-28.171-15.99-38.828-10.658-10.656-23.601-15.986-38.829-15.986zM54.821 54.817c-15.23 0-28.171 5.33-38.832 15.987C5.333 81.464.003 94.405.003 109.632c0 15.229 5.327 28.171 15.986 38.831 10.66 10.657 23.604 15.985 38.832 15.985 15.225 0 28.167-5.329 38.828-15.985 10.657-10.66 15.987-23.603 15.987-38.831 0-15.227-5.33-28.168-15.987-38.828-10.656-10.657-23.598-15.987-38.828-15.987zM54.821 347.18c-15.23 0-28.175 5.325-38.832 15.981C5.333 373.824.003 386.767.003 401.989c0 15.235 5.327 28.171 15.986 38.834 10.66 10.657 23.604 15.985 38.832 15.985 15.225 0 28.167-5.328 38.828-15.985 10.657-10.663 15.987-23.599 15.987-38.834 0-15.223-5.33-28.172-15.987-38.828-10.656-10.656-23.598-15.981-38.828-15.981zM508.917 75.8c-1.813-1.803-3.949-2.708-6.427-2.708H155.313c-2.473 0-4.615.902-6.423 2.708-1.807 1.812-2.712 3.949-2.712 6.423v54.821c0 2.475.905 4.611 2.712 6.424 1.809 1.805 3.951 2.708 6.423 2.708H502.49c2.478 0 4.616-.9 6.427-2.708 1.81-1.812 2.71-3.949 2.71-6.424v-54.82c-.001-2.474-.904-4.615-2.71-6.424zM502.49 219.271H155.313c-2.473 0-4.615.9-6.423 2.712-1.807 1.807-2.712 3.949-2.712 6.423v54.819c0 2.472.905 4.613 2.712 6.421 1.809 1.813 3.951 2.714 6.423 2.714H502.49c2.478 0 4.616-.9 6.427-2.714 1.81-1.808 2.71-3.949 2.71-6.421v-54.819c0-2.474-.903-4.62-2.71-6.423-1.814-1.808-3.95-2.712-6.427-2.712zM502.49 365.447H155.313c-2.473 0-4.615.903-6.423 2.714-1.807 1.81-2.712 3.949-2.712 6.42V429.4c0 2.478.905 4.616 2.712 6.427 1.809 1.807 3.951 2.707 6.423 2.707H502.49c2.478 0 4.616-.9 6.427-2.707 1.81-1.811 2.71-3.949 2.71-6.427v-54.819c0-2.471-.903-4.617-2.71-6.42-1.814-1.804-3.95-2.714-6.427-2.714z\"/></svg></span>",
64  } );
65 
66  if (config.showSwitchUser !== false) //if undefined, this will be true
67  {
68  u.addItem( "spacer" ); //this is in the conditional because there is only one item below... if more items appear below, this should be above, outside the if() switch to separate groups
69 
70  u.addItem( { label: "Switch User",
71  callback: function() {
72 
73  /*
74  if (modal.showing)
75  return;
76 
77  function switchUser(credentials)
78  {
79  $(window).trigger("switchuser",credentials);
80  //window.switchUser( credentials );
81  }
82 
83  modal.login( null,//"Switch to user", //message
84  switchUser, //accept()
85  null, //dismiss()
86  null, //acceptText,
87  null, //dismissText,
88  "Switch user" //header
89  );
90  */
91  $(window).trigger("switchuser", [null,"Switch User"]);
92  },
93  icon: "<span class='paneMenuIcon'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 -5 80.13 80.13\" fill=\"var(--FontColorMain)\"><path d=\"M48.355 17.922c3.705 2.323 6.303 6.254 6.776 10.817a11.69 11.69 0 0 0 4.966 1.112c6.491 0 11.752-5.261 11.752-11.751 0-6.491-5.261-11.752-11.752-11.752-6.429.002-11.644 5.169-11.742 11.574zm-7.699 24.062c6.491 0 11.752-5.262 11.752-11.752s-5.262-11.751-11.752-11.751c-6.49 0-11.754 5.262-11.754 11.752s5.264 11.751 11.754 11.751zm4.985.801h-9.972c-8.297 0-15.047 6.751-15.047 15.048v12.195l.031.191.84.263c7.918 2.474 14.797 3.299 20.459 3.299 11.059 0 17.469-3.153 17.864-3.354l.785-.397h.084V57.833c.003-8.297-6.747-15.048-15.044-15.048zm19.443-12.132h-9.895a14.483 14.483 0 0 1-4.47 10.088c7.375 2.193 12.771 9.032 12.771 17.11v3.758c9.77-.358 15.4-3.127 15.771-3.313l.785-.398h.084V45.699c0-8.296-6.75-15.046-15.046-15.046zm-45.049-.8c2.299 0 4.438-.671 6.25-1.814a14.544 14.544 0 0 1 5.467-9.276c.012-.22.033-.438.033-.66 0-6.491-5.262-11.752-11.75-11.752-6.492 0-11.752 5.261-11.752 11.752 0 6.488 5.26 11.75 11.752 11.75zm10.554 10.888a14.492 14.492 0 0 1-4.467-10.032c-.367-.027-.73-.056-1.104-.056h-9.971C6.75 30.653 0 37.403 0 45.699v12.197l.031.188.84.265c6.352 1.983 12.021 2.897 16.945 3.185v-3.683c.002-8.078 5.396-14.915 12.773-17.11z\"/></svg></span>",
94  } );
95  }
96 
97  u.addItem( { label: "Log Out",
98  callback: function() {
99 
100  //if (modal.showing)
101  // return;
102 
103  function logOut()
104  {
105  $(window).trigger("logout");
106  }
107 
108  modal.confirm( "Are you sure you want to end this session?", //message
109  logOut, //accept()
110  null, //dismiss()
111  null, //acceptText,
112  null, //dismissText,
113  "Log Out" //header
114  );
115  },
116  //icon: "<span class='paneMenuIcon'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 -5 80.13 80.13\" fill=\"var(--FontColorMain)\"><path d=\"M48.355 17.922c3.705 2.323 6.303 6.254 6.776 10.817a11.69 11.69 0 0 0 4.966 1.112c6.491 0 11.752-5.261 11.752-11.751 0-6.491-5.261-11.752-11.752-11.752-6.429.002-11.644 5.169-11.742 11.574zm-7.699 24.062c6.491 0 11.752-5.262 11.752-11.752s-5.262-11.751-11.752-11.751c-6.49 0-11.754 5.262-11.754 11.752s5.264 11.751 11.754 11.751zm4.985.801h-9.972c-8.297 0-15.047 6.751-15.047 15.048v12.195l.031.191.84.263c7.918 2.474 14.797 3.299 20.459 3.299 11.059 0 17.469-3.153 17.864-3.354l.785-.397h.084V57.833c.003-8.297-6.747-15.048-15.044-15.048zm19.443-12.132h-9.895a14.483 14.483 0 0 1-4.47 10.088c7.375 2.193 12.771 9.032 12.771 17.11v3.758c9.77-.358 15.4-3.127 15.771-3.313l.785-.398h.084V45.699c0-8.296-6.75-15.046-15.046-15.046zm-45.049-.8c2.299 0 4.438-.671 6.25-1.814a14.544 14.544 0 0 1 5.467-9.276c.012-.22.033-.438.033-.66 0-6.491-5.262-11.752-11.75-11.752-6.492 0-11.752 5.261-11.752 11.752 0 6.488 5.26 11.75 11.752 11.75zm10.554 10.888a14.492 14.492 0 0 1-4.467-10.032c-.367-.027-.73-.056-1.104-.056h-9.971C6.75 30.653 0 37.403 0 45.699v12.197l.031.188.84.265c6.352 1.983 12.021 2.897 16.945 3.185v-3.683c.002-8.078 5.396-14.915 12.773-17.11z\"/></svg></span>",
117  icon: "<span class='paneMenuIcon'><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 412\" width=\"14\" height=\"14\" fill=\"var(--FontColorMain)\"><path d=\"M510.371 226.513c-1.088-2.603-2.645-4.971-4.629-6.955l-63.979-63.979c-8.341-8.32-21.824-8.32-30.165 0-8.341 8.341-8.341 21.845 0 30.165l27.584 27.584H320.013c-11.797 0-21.333 9.557-21.333 21.333s9.536 21.333 21.333 21.333h119.168l-27.584 27.584c-8.341 8.341-8.341 21.845 0 30.165 4.16 4.181 9.621 6.251 15.083 6.251s10.923-2.069 15.083-6.251l63.979-63.979c1.984-1.963 3.541-4.331 4.629-6.955a21.356 21.356 0 0 0 0-16.296z\"/><path d=\"M362.68 298.667c-11.797 0-21.333 9.557-21.333 21.333v106.667h-85.333V85.333c0-9.408-6.187-17.728-15.211-20.437l-74.091-22.229h174.635v106.667c0 11.776 9.536 21.333 21.333 21.333s21.333-9.557 21.333-21.333v-128C384.013 9.557 374.477 0 362.68 0H21.347c-.768 0-1.451.32-2.197.405-1.003.107-1.92.277-2.88.512a21.476 21.476 0 0 0-6.165 2.645c-.469.299-1.045.32-1.493.661-.172.129-.236.364-.407.492-2.325 1.834-4.266 4.074-5.674 6.741-.299.576-.363 1.195-.597 1.792-.683 1.621-1.429 3.2-1.685 4.992-.107.64.085 1.237.064 1.856-.021.427-.299.811-.299 1.237V448c0 10.176 7.189 18.923 17.152 20.907l213.333 42.667c1.387.299 2.795.427 4.181.427a21.31 21.31 0 0 0 13.525-4.843 21.354 21.354 0 0 0 7.808-16.491v-21.333H362.68c11.797 0 21.333-9.557 21.333-21.333V320c0-11.776-9.536-21.333-21.333-21.333z\"/></svg></span>",
118  } );
119  }
120 
121  menuManager.openMenu( "__userMenu", _user, "B" );
122  } );
123 
124  //this._clearTimer = null; //deprecated?
125 
126  var h = this._html;
127  //h.append(this._message);
128  h.append(this._user);
129  h.append(this._connectState);
130  h.append(this._statusState);
131 
132  $("body").append( h );
133 
134  //var mm = new arrowMessage("hello world", $(document.body), "center center", "left bottom");
135  //mm._completeCallback = function() { console.log("hello world"); };
136  }
137 
138  footer.prototype = {
139 
148  destroy: function()
149  {
150  this._html.remove();
151  },
152 
166  //a message with an arrow pointing to a DOM object
167  arrowMessage: function(m,o,at,my,offset)
168  { //this.message = m;
169  var a = new arrowMessage(m,o,at,my,offset);
170  //FIXME: manage arrowMessages here so they don't overlap?
171  },
172 
178  //message on the header, next to connection status
179  /*
180  set message(m) {
181  this._message_M = m;
182 
183  //we want to deprecate the messages, so do a trace here to find sources.
184  console.trace("DEPRECATE FOOTER MESSAGES");
185  return;
186 
187  this._message.html(m);
188  this._message.stop().css( {"opacity":1,"color":"#555"} ).animate( {"color":"#888"} , 2000 );
189  //this._message.stop().css( {"opacity":1,"color":"#555"} ).animate( {"color":"#888"} , 2000 ).delay(5000).animate( {"opacity":0} );
190 
191  if (this._clearTimer) clearInterval(this._clearTimer);
192 
193  var THIS = this;
194  this._clearTimer = setTimeout( function() { THIS._message.animate( {"opacity":0}, function(){$(this).html('');} ); THIS._clearTimer = null; }, 5000 );
195  },
196 
197  get message() { return this._message_M; },
198  */
199 
206  set user(u) { this._user.text(u);
207  this._username = u;
208 
209  //this will never happen... menus are reset when a user switch happens.
210  //var m = menuManager.getMenu("__userMenu");
211  //if (m) m._items[0].setMenuItem( "XXYYZZ!" );
212  },
213 
220  set statusState(s) { this._statusState_M = s;
221 
222  switch( s )
223  {
224  case "IDLE": this._statusState.stop().animate( { "color": "#888" }, 1000 );
225  break;
226 
227  case "RECEIVED": this._statusState.stop().css("color", "#0F0").animate( { "color": "#888" }, 1000 );
228  this._statusState_M = "IDLE";
229  break;
230 
231  case "PENDING": this._statusState.stop().css("color", "#6FF").animate( { "color": "#888" }, 1000 );
232  this._statusState_M = "IDLE";
233  break;
234 
235  case "CONNECTING": this._statusState.stop().animate( { "color": "orange" }, 100 );
236  break;
237 
238  case "ERROR": this._statusState.stop().animate( { "color": "red" }, 100 );
239  break;
240 
241  default: console.error("Bad status state: "+s);
242  this._statusState.stop().css( { "color": "red" } );
243  break;
244  }
245  },
246 
253  set connectMessage(m) {
254  this._connectMessage_M = m;
255  },
256 
263  set connectState(s) { this._connectState_M = s;
264 
265  switch( s )
266  {
267  case "CONNECTED": this._connectState.stop().animate( {"color": "#0F0"}, 200 );
268  break;
269 
270  case "CONNECTING": this._connectState.stop().animate( {"color": "orange"}, 200 );
271  break;
272 
273  case "DISCONNECTED": this._connectState.stop().animate( {"color": "red"}, 200 );
274  break;
275 
276  default: console.error("Bad connect state: "+s);
277  this._connectState.stop().css( { "color": "red"} );
278  break;
279  }
280  },
281 
292  hide: function()
293  {
294  this._html.hide();
295  },
296 
305  show: function()
306  {
307  this._html.show();
308  },
309  }
310 
311  return footer;
312  }
313 );
314 
315 
arrowMessage
Create a message with an arrow pointing to a DOM element.
arrowMessage::arrowMessage
arrowMessage(message, o, at, my, offset, persistent)
The arrowMessage constructor.
footer
DOCME.
footer::connectState
setter connectState
a setter DOCME
footer::connectMessage
setter connectMessage
a setter DOCME
footer::statusState
setter statusState
a setter DOCME
footer::user
setter user
a setter DOCME
footer::footer
footer()
DOCME.
menuManager
Manages context menus or any other menu.
menuManager::createMenu
createMenu(m, p, subscribe)
Create a paneMenu(). You will want to use paneMenu.addItem() on the resulting object.
menuManager::openMenu
openMenu(m, b, p, d, c)
Open a menu.
paneManager::config
setter config
a setter DOCME