blob: 4186827f37d1d847dc04d2799515f4fcd6dd579a [file] [log] [blame]
Simon Hunt195cb382014-11-03 17:50:51 -08001/*
2 * Copyright 2014 Open Networking Laboratory
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16
17/*
18 ONOS GUI -- Base Framework
19
20 @author Simon Hunt
21 */
22
23(function ($) {
24 'use strict';
25 var tsI = new Date().getTime(), // initialize time stamp
26 tsB, // build time stamp
Simon Hunt25248912014-11-04 11:25:48 -080027 mastHeight = 36, // see mast2.css
Simon Hunt142d0032014-11-04 20:13:09 -080028 defaultVid = 'sample';
Simon Hunt195cb382014-11-03 17:50:51 -080029
30
31 // attach our main function to the jQuery object
32 $.onos = function (options) {
Simon Hunt25248912014-11-04 11:25:48 -080033 var uiApi,
34 viewApi,
Simon Hunt1a9eff92014-11-07 11:06:34 -080035 navApi,
Simon Huntbb282f52014-11-10 11:08:19 -080036 libApi,
37 exported = {};
Simon Hunt25248912014-11-04 11:25:48 -080038
39 var defaultOptions = {
Simon Hunt142d0032014-11-04 20:13:09 -080040 trace: false,
Thomas Vachuskaece59ee2014-11-19 19:06:11 -080041 theme: 'dark',
Simon Hunt142d0032014-11-04 20:13:09 -080042 startVid: defaultVid
Simon Hunt25248912014-11-04 11:25:48 -080043 };
44
45 // compute runtime settings
46 var settings = $.extend({}, defaultOptions, options);
Simon Hunt195cb382014-11-03 17:50:51 -080047
Thomas Vachuska65368e32014-11-08 16:10:20 -080048 // set the selected theme
49 d3.select('body').classed(settings.theme, true);
50
Simon Hunt195cb382014-11-03 17:50:51 -080051 // internal state
52 var views = {},
Simon Hunt61d04042014-11-11 17:27:16 -080053 fpanels = {},
Simon Hunt195cb382014-11-03 17:50:51 -080054 current = {
55 view: null,
Thomas Vachuska65368e32014-11-08 16:10:20 -080056 ctx: '',
Simon Hunt56d51852014-11-09 13:03:35 -080057 flags: {},
Thomas Vachuska65368e32014-11-08 16:10:20 -080058 theme: settings.theme
Simon Hunt195cb382014-11-03 17:50:51 -080059 },
60 built = false,
Simon Hunt61d04042014-11-11 17:27:16 -080061 buildErrors = [],
Simon Hunt934c3ce2014-11-05 11:45:07 -080062 keyHandler = {
Thomas Vachuska65368e32014-11-08 16:10:20 -080063 globalKeys: {},
64 maskedKeys: {},
65 viewKeys: {},
Simon Hunt87514342014-11-24 16:41:27 -080066 viewFn: null,
67 viewGestures: []
Thomas Vachuska65368e32014-11-08 16:10:20 -080068 },
69 alerts = {
70 open: false,
71 count: 0
Simon Hunt934c3ce2014-11-05 11:45:07 -080072 };
Simon Hunt195cb382014-11-03 17:50:51 -080073
74 // DOM elements etc.
Simon Hunt61d04042014-11-11 17:27:16 -080075 // TODO: verify existence of following elements...
76 var $view = d3.select('#view'),
77 $floatPanels = d3.select('#floatPanels'),
78 $alerts = d3.select('#alerts'),
79 // note, following elements added programmatically...
Simon Huntdb9eb072014-11-04 19:12:46 -080080 $mastRadio;
Simon Hunt195cb382014-11-03 17:50:51 -080081
82
Simon Hunt0df1b1d2014-11-04 22:58:29 -080083 function whatKey(code) {
84 switch (code) {
85 case 13: return 'enter';
86 case 16: return 'shift';
87 case 17: return 'ctrl';
88 case 18: return 'alt';
89 case 27: return 'esc';
90 case 32: return 'space';
91 case 37: return 'leftArrow';
92 case 38: return 'upArrow';
93 case 39: return 'rightArrow';
94 case 40: return 'downArrow';
95 case 91: return 'cmdLeft';
96 case 93: return 'cmdRight';
Simon Hunt8f40cce2014-11-23 15:57:30 -080097 case 187: return 'equals';
98 case 189: return 'dash';
Simon Hunt988c6fc2014-11-20 17:43:03 -080099 case 191: return 'slash';
Thomas Vachuska1e68bdd2014-11-29 13:53:10 -0800100 case 192: return 'backQuote';
Simon Hunt0df1b1d2014-11-04 22:58:29 -0800101 default:
102 if ((code >= 48 && code <= 57) ||
103 (code >= 65 && code <= 90)) {
104 return String.fromCharCode(code);
105 } else if (code >= 112 && code <= 123) {
106 return 'F' + (code - 111);
107 }
108 return '.';
109 }
110 }
111
112
Simon Hunt195cb382014-11-03 17:50:51 -0800113 // ..........................................................
114 // Internal functions
115
116 // throw an error
117 function throwError(msg) {
118 // separate function, as we might add tracing here too, later
119 throw new Error(msg);
120 }
121
122 function doError(msg) {
Simon Hunt25248912014-11-04 11:25:48 -0800123 console.error(msg);
Simon Hunt56d51852014-11-09 13:03:35 -0800124 doAlert(msg);
Simon Hunt25248912014-11-04 11:25:48 -0800125 }
126
127 function trace(msg) {
128 if (settings.trace) {
129 console.log(msg);
130 }
131 }
132
133 function traceFn(fn, params) {
134 if (settings.trace) {
135 console.log('*FN* ' + fn + '(...): ' + params);
136 }
Simon Hunt195cb382014-11-03 17:50:51 -0800137 }
138
139 // hash navigation
140 function hash() {
141 var hash = window.location.hash,
142 redo = false,
143 view,
144 t;
145
Simon Hunt25248912014-11-04 11:25:48 -0800146 traceFn('hash', hash);
147
Simon Hunt195cb382014-11-03 17:50:51 -0800148 if (!hash) {
Simon Hunt142d0032014-11-04 20:13:09 -0800149 hash = settings.startVid;
Simon Hunt195cb382014-11-03 17:50:51 -0800150 redo = true;
151 }
152
153 t = parseHash(hash);
154 if (!t || !t.vid) {
Simon Hunt56d51852014-11-09 13:03:35 -0800155 doError('Unable to parse target hash: "' + hash + '"');
Simon Hunt195cb382014-11-03 17:50:51 -0800156 }
157
158 view = views[t.vid];
159 if (!view) {
160 doError('No view defined with id: ' + t.vid);
161 }
162
163 if (redo) {
164 window.location.hash = makeHash(t);
165 // the above will result in a hashchange event, invoking
166 // this function again
167 } else {
168 // hash was not modified... navigate to where we need to be
169 navigate(hash, view, t);
170 }
Simon Hunt195cb382014-11-03 17:50:51 -0800171 }
172
173 function parseHash(s) {
174 // extract navigation coordinates from the supplied string
Simon Hunt56d51852014-11-09 13:03:35 -0800175 // "vid,ctx?flag1,flag2" --> { vid:vid, ctx:ctx, flags:{...} }
Simon Hunt25248912014-11-04 11:25:48 -0800176 traceFn('parseHash', s);
Simon Hunt195cb382014-11-03 17:50:51 -0800177
Simon Hunt56d51852014-11-09 13:03:35 -0800178 // look for use of flags, first
179 var vidctx,
180 vid,
181 ctx,
182 flags,
183 flagMap,
184 m;
185
186 // RE that includes flags ('?flag1,flag2')
187 m = /^[#]{0,1}(.+)\?(.+)$/.exec(s);
Simon Hunt195cb382014-11-03 17:50:51 -0800188 if (m) {
Simon Hunt56d51852014-11-09 13:03:35 -0800189 vidctx = m[1];
190 flags = m[2];
191 flagMap = {};
192 } else {
193 // no flags
194 m = /^[#]{0,1}((.+)(,.+)*)$/.exec(s);
195 if (m) {
196 vidctx = m[1];
197 } else {
198 // bad hash
199 return null;
200 }
Simon Hunt195cb382014-11-03 17:50:51 -0800201 }
202
Simon Hunt56d51852014-11-09 13:03:35 -0800203 vidctx = vidctx.split(',');
204 vid = vidctx[0];
205 ctx = vidctx[1];
206 if (flags) {
207 flags.split(',').forEach(function (f) {
208 flagMap[f.trim()] = true;
209 });
210 }
211
212 return {
213 vid: vid.trim(),
214 ctx: ctx ? ctx.trim() : '',
215 flags: flagMap
216 };
217
Simon Hunt195cb382014-11-03 17:50:51 -0800218 }
219
Simon Hunt56d51852014-11-09 13:03:35 -0800220 function makeHash(t, ctx, flags) {
Simon Hunt25248912014-11-04 11:25:48 -0800221 traceFn('makeHash');
Simon Hunt56d51852014-11-09 13:03:35 -0800222 // make a hash string from the given navigation coordinates,
223 // and optional flags map.
Simon Hunt195cb382014-11-03 17:50:51 -0800224 // if t is not an object, then it is a vid
225 var h = t,
Simon Hunt56d51852014-11-09 13:03:35 -0800226 c = ctx || '',
227 f = $.isPlainObject(flags) ? flags : null;
Simon Hunt195cb382014-11-03 17:50:51 -0800228
229 if ($.isPlainObject(t)) {
230 h = t.vid;
231 c = t.ctx || '';
Simon Hunt56d51852014-11-09 13:03:35 -0800232 f = t.flags || null;
Simon Hunt195cb382014-11-03 17:50:51 -0800233 }
234
235 if (c) {
236 h += ',' + c;
237 }
Simon Hunt56d51852014-11-09 13:03:35 -0800238 if (f) {
239 h += '?' + d3.map(f).keys().join(',');
240 }
Simon Hunt25248912014-11-04 11:25:48 -0800241 trace('hash = "' + h + '"');
Simon Hunt195cb382014-11-03 17:50:51 -0800242 return h;
243 }
244
245 function navigate(hash, view, t) {
Simon Hunt25248912014-11-04 11:25:48 -0800246 traceFn('navigate', view.vid);
Simon Hunt195cb382014-11-03 17:50:51 -0800247 // closePanes() // flyouts etc.
Simon Hunt25248912014-11-04 11:25:48 -0800248 // updateNav() // accordion / selected nav item etc.
Simon Hunt195cb382014-11-03 17:50:51 -0800249 createView(view);
250 setView(view, hash, t);
251 }
252
Simon Hunt61d04042014-11-11 17:27:16 -0800253 function buildError(msg) {
254 buildErrors.push(msg);
255 }
256
Simon Hunt195cb382014-11-03 17:50:51 -0800257 function reportBuildErrors() {
Simon Hunt25248912014-11-04 11:25:48 -0800258 traceFn('reportBuildErrors');
Simon Hunt61d04042014-11-11 17:27:16 -0800259 var nerr = buildErrors.length,
260 errmsg;
261 if (!nerr) {
262 console.log('(no build errors)');
263 } else {
264 errmsg = 'Build errors: ' + nerr + ' found...\n\n' +
265 buildErrors.join('\n');
266 doAlert(errmsg);
267 console.error(errmsg);
268 }
Simon Hunt195cb382014-11-03 17:50:51 -0800269 }
270
Simon Hunt25248912014-11-04 11:25:48 -0800271 // returns the reference if it is a function, null otherwise
272 function isF(f) {
273 return $.isFunction(f) ? f : null;
274 }
275
Simon Hunt988c6fc2014-11-20 17:43:03 -0800276 // returns the reference if it is an array, null otherwise
277 function isA(a) {
278 return $.isArray(a) ? a : null;
279 }
280
Simon Hunt195cb382014-11-03 17:50:51 -0800281 // ..........................................................
282 // View life-cycle functions
283
Simon Hunt25248912014-11-04 11:25:48 -0800284 function setViewDimensions(sel) {
285 var w = window.innerWidth,
286 h = window.innerHeight - mastHeight;
287 sel.each(function () {
288 $(this)
289 .css('width', w + 'px')
290 .css('height', h + 'px')
291 });
292 }
293
Simon Hunt195cb382014-11-03 17:50:51 -0800294 function createView(view) {
295 var $d;
Simon Hunt25248912014-11-04 11:25:48 -0800296
Simon Hunt195cb382014-11-03 17:50:51 -0800297 // lazy initialization of the view
298 if (view && !view.$div) {
Simon Hunt25248912014-11-04 11:25:48 -0800299 trace('creating view for ' + view.vid);
Simon Hunt195cb382014-11-03 17:50:51 -0800300 $d = $view.append('div')
301 .attr({
Simon Hunt25248912014-11-04 11:25:48 -0800302 id: view.vid,
303 class: 'onosView'
Simon Hunt195cb382014-11-03 17:50:51 -0800304 });
Simon Hunt25248912014-11-04 11:25:48 -0800305 setViewDimensions($d);
306 view.$div = $d; // cache a reference to the D3 selection
Simon Hunt195cb382014-11-03 17:50:51 -0800307 }
308 }
309
310 function setView(view, hash, t) {
Simon Hunt25248912014-11-04 11:25:48 -0800311 traceFn('setView', view.vid);
Simon Hunt195cb382014-11-03 17:50:51 -0800312 // set the specified view as current, while invoking the
313 // appropriate life-cycle callbacks
314
Simon Hunt56d51852014-11-09 13:03:35 -0800315 // first, we'll start by closing the alerts pane, if open
316 closeAlerts();
317
Simon Hunt195cb382014-11-03 17:50:51 -0800318 // if there is a current view, and it is not the same as
319 // the incoming view, then unload it...
Simon Hunt25248912014-11-04 11:25:48 -0800320 if (current.view && (current.view.vid !== view.vid)) {
Simon Hunt195cb382014-11-03 17:50:51 -0800321 current.view.unload();
Simon Huntdb9eb072014-11-04 19:12:46 -0800322
Simon Hunt0df1b1d2014-11-04 22:58:29 -0800323 // detach radio buttons, key handlers, etc.
324 $('#mastRadio').children().detach();
Thomas Vachuska65368e32014-11-08 16:10:20 -0800325 keyHandler.viewKeys = {};
326 keyHandler.viewFn = null;
Simon Hunt195cb382014-11-03 17:50:51 -0800327 }
328
329 // cache new view and context
330 current.view = view;
331 current.ctx = t.ctx || '';
Simon Hunt56d51852014-11-09 13:03:35 -0800332 current.flags = t.flags || {};
Simon Hunt195cb382014-11-03 17:50:51 -0800333
Simon Hunta2994cc2014-12-02 14:19:15 -0800334 // init is called only once, after the view is in the DOM
335 if (!view.inited) {
336 view.init(current.ctx, current.flags);
337 view.inited = true;
Simon Hunt195cb382014-11-03 17:50:51 -0800338 }
339
340 // clear the view of stale data
341 view.reset();
342
343 // load the view
Simon Hunt56d51852014-11-09 13:03:35 -0800344 view.load(current.ctx, current.flags);
Simon Hunt195cb382014-11-03 17:50:51 -0800345 }
346
Simon Huntdb9eb072014-11-04 19:12:46 -0800347 // generate 'unique' id by prefixing view id
Simon Hunt934c3ce2014-11-05 11:45:07 -0800348 function makeUid(view, id) {
Simon Huntdb9eb072014-11-04 19:12:46 -0800349 return view.vid + '-' + id;
350 }
351
352 // restore id by removing view id prefix
Simon Hunt934c3ce2014-11-05 11:45:07 -0800353 function unmakeUid(view, uid) {
Simon Huntdb9eb072014-11-04 19:12:46 -0800354 var re = new RegExp('^' + view.vid + '-');
355 return uid.replace(re, '');
356 }
357
Simon Hunt934c3ce2014-11-05 11:45:07 -0800358 function setRadioButtons(vid, btnSet) {
Simon Huntdb9eb072014-11-04 19:12:46 -0800359 var view = views[vid],
Simon Hunt9462e8c2014-11-14 17:28:09 -0800360 btnG,
361 api = {};
Simon Huntdb9eb072014-11-04 19:12:46 -0800362
363 // lazily create the buttons...
364 if (!(btnG = view.radioButtons)) {
365 btnG = d3.select(document.createElement('div'));
Simon Hunt934c3ce2014-11-05 11:45:07 -0800366 btnG.buttonDef = {};
Simon Huntdb9eb072014-11-04 19:12:46 -0800367
368 btnSet.forEach(function (btn, i) {
369 var bid = btn.id || 'b' + i,
370 txt = btn.text || 'Button #' + i,
Simon Hunt934c3ce2014-11-05 11:45:07 -0800371 uid = makeUid(view, bid),
372 button = btnG.append('span')
Simon Huntdb9eb072014-11-04 19:12:46 -0800373 .attr({
Simon Hunt934c3ce2014-11-05 11:45:07 -0800374 id: uid,
Simon Huntdb9eb072014-11-04 19:12:46 -0800375 class: 'radio'
376 })
377 .text(txt);
Simon Hunt934c3ce2014-11-05 11:45:07 -0800378
Simon Hunt9462e8c2014-11-14 17:28:09 -0800379 btn.id = bid;
Simon Hunt934c3ce2014-11-05 11:45:07 -0800380 btnG.buttonDef[uid] = btn;
381
Simon Huntdb9eb072014-11-04 19:12:46 -0800382 if (i === 0) {
Simon Hunt934c3ce2014-11-05 11:45:07 -0800383 button.classed('active', true);
Simon Hunt9462e8c2014-11-14 17:28:09 -0800384 btnG.selected = bid;
Simon Huntdb9eb072014-11-04 19:12:46 -0800385 }
386 });
387
388 btnG.selectAll('span')
389 .on('click', function (d) {
Simon Hunt934c3ce2014-11-05 11:45:07 -0800390 var button = d3.select(this),
391 uid = button.attr('id'),
392 btn = btnG.buttonDef[uid],
393 act = button.classed('active');
Simon Huntdb9eb072014-11-04 19:12:46 -0800394
395 if (!act) {
Simon Hunt934c3ce2014-11-05 11:45:07 -0800396 btnG.selectAll('span').classed('active', false);
397 button.classed('active', true);
Simon Hunt9462e8c2014-11-14 17:28:09 -0800398 btnG.selected = btn.id;
Simon Hunt934c3ce2014-11-05 11:45:07 -0800399 if (isF(btn.cb)) {
400 btn.cb(view.token(), btn);
401 }
Simon Huntdb9eb072014-11-04 19:12:46 -0800402 }
403 });
404
405 view.radioButtons = btnG;
Simon Hunt9462e8c2014-11-14 17:28:09 -0800406
407 api.selected = function () {
408 return btnG.selected;
409 }
Simon Huntdb9eb072014-11-04 19:12:46 -0800410 }
411
412 // attach the buttons to the masthead
413 $mastRadio.node().appendChild(btnG.node());
Simon Hunt9462e8c2014-11-14 17:28:09 -0800414 // return an api for interacting with the button set
415 return api;
Simon Huntdb9eb072014-11-04 19:12:46 -0800416 }
417
Thomas Vachuska65368e32014-11-08 16:10:20 -0800418 function setupGlobalKeys() {
419 keyHandler.globalKeys = {
Simon Hunt5cef9062014-11-24 15:24:35 -0800420 slash: [quickHelp, 'Show / hide Quick Help'],
Simon Hunt56ef0fe2014-11-21 08:24:43 -0800421 esc: [escapeKey, 'Dismiss dialog or cancel selections'],
422 T: [toggleTheme, "Toggle theme"]
Thomas Vachuska65368e32014-11-08 16:10:20 -0800423 };
424 // Masked keys are global key handlers that always return true.
425 // That is, the view will never see the event for that key.
426 keyHandler.maskedKeys = {
Simon Hunt988c6fc2014-11-20 17:43:03 -0800427 slash: true,
Thomas Vachuska65368e32014-11-08 16:10:20 -0800428 T: true
429 };
430 }
431
Simon Hunt5cef9062014-11-24 15:24:35 -0800432 function quickHelp(view, key, code, ev) {
433 libApi.quickHelp.show(keyHandler);
Simon Hunt988c6fc2014-11-20 17:43:03 -0800434 return true;
435 }
436
Thomas Vachuska65368e32014-11-08 16:10:20 -0800437 function escapeKey(view, key, code, ev) {
438 if (alerts.open) {
439 closeAlerts();
440 return true;
441 }
Simon Hunt5cef9062014-11-24 15:24:35 -0800442 if (libApi.quickHelp.hide()) {
443 return true;
444 }
Thomas Vachuska65368e32014-11-08 16:10:20 -0800445 return false;
446 }
447
448 function toggleTheme(view, key, code, ev) {
449 var body = d3.select('body');
450 current.theme = (current.theme === 'light') ? 'dark' : 'light';
451 body.classed('light dark', false);
452 body.classed(current.theme, true);
Simon Hunt8f40cce2014-11-23 15:57:30 -0800453 theme(view);
Thomas Vachuska65368e32014-11-08 16:10:20 -0800454 return true;
455 }
456
Simon Hunt87514342014-11-24 16:41:27 -0800457 function setGestureNotes(g) {
458 keyHandler.viewGestures = isA(g) || [];
459 }
460
Simon Hunt0df1b1d2014-11-04 22:58:29 -0800461 function setKeyBindings(keyArg) {
Thomas Vachuska65368e32014-11-08 16:10:20 -0800462 var viewKeys,
463 masked = [];
464
Simon Hunt0df1b1d2014-11-04 22:58:29 -0800465 if ($.isFunction(keyArg)) {
466 // set general key handler callback
Thomas Vachuska65368e32014-11-08 16:10:20 -0800467 keyHandler.viewFn = keyArg;
Simon Hunt0df1b1d2014-11-04 22:58:29 -0800468 } else {
469 // set specific key filter map
Thomas Vachuska65368e32014-11-08 16:10:20 -0800470 viewKeys = d3.map(keyArg).keys();
471 viewKeys.forEach(function (key) {
472 if (keyHandler.maskedKeys[key]) {
473 masked.push(' Key "' + key + '" is reserved');
474 }
475 });
476
477 if (masked.length) {
478 doAlert('WARNING...\n\nsetKeys():\n' + masked.join('\n'));
479 }
480 keyHandler.viewKeys = keyArg;
Simon Hunt0df1b1d2014-11-04 22:58:29 -0800481 }
482 }
483
Thomas Vachuska65368e32014-11-08 16:10:20 -0800484 function keyIn() {
485 var event = d3.event,
486 keyCode = event.keyCode,
487 key = whatKey(keyCode),
Simon Hunt56ef0fe2014-11-21 08:24:43 -0800488 gk = keyHandler.globalKeys[key],
489 gcb = isF(gk) || (isA(gk) && isF(gk[0])),
Simon Hunt988c6fc2014-11-20 17:43:03 -0800490 vk = keyHandler.viewKeys[key],
491 vcb = isF(vk) || (isA(vk) && isF(vk[0])) || isF(keyHandler.viewFn);
Thomas Vachuska65368e32014-11-08 16:10:20 -0800492
493 // global callback?
494 if (gcb && gcb(current.view.token(), key, keyCode, event)) {
495 // if the event was 'handled', we are done
496 return;
497 }
498 // otherwise, let the view callback have a shot
499 if (vcb) {
500 vcb(current.view.token(), key, keyCode, event);
501 }
502 }
Simon Hunt1a9eff92014-11-07 11:06:34 -0800503
504 function createAlerts() {
Simon Hunt61d04042014-11-11 17:27:16 -0800505 $alerts.style('display', 'block');
506 $alerts.append('span')
Simon Hunt1a9eff92014-11-07 11:06:34 -0800507 .attr('class', 'close')
508 .text('X')
509 .on('click', closeAlerts);
Simon Hunt61d04042014-11-11 17:27:16 -0800510 $alerts.append('pre');
511 $alerts.append('p').attr('class', 'footnote')
Thomas Vachuska65368e32014-11-08 16:10:20 -0800512 .text('Press ESCAPE to close');
Simon Hunt1a9eff92014-11-07 11:06:34 -0800513 alerts.open = true;
514 alerts.count = 0;
515 }
516
517 function closeAlerts() {
Simon Hunt61d04042014-11-11 17:27:16 -0800518 $alerts.style('display', 'none')
Thomas Vachuska65368e32014-11-08 16:10:20 -0800519 .html('');
Simon Hunt1a9eff92014-11-07 11:06:34 -0800520 alerts.open = false;
521 }
522
523 function addAlert(msg) {
524 var lines,
525 oldContent;
526
527 if (alerts.count) {
Simon Hunt61d04042014-11-11 17:27:16 -0800528 oldContent = $alerts.select('pre').html();
Simon Hunt1a9eff92014-11-07 11:06:34 -0800529 }
530
531 lines = msg.split('\n');
532 lines[0] += ' '; // spacing so we don't crowd 'X'
533 lines = lines.join('\n');
534
535 if (oldContent) {
536 lines += '\n----\n' + oldContent;
537 }
538
Simon Hunt61d04042014-11-11 17:27:16 -0800539 $alerts.select('pre').html(lines);
Simon Hunt1a9eff92014-11-07 11:06:34 -0800540 alerts.count++;
541 }
542
543 function doAlert(msg) {
544 if (!alerts.open) {
545 createAlerts();
546 }
547 addAlert(msg);
548 }
549
Simon Hunt25248912014-11-04 11:25:48 -0800550 function resize(e) {
551 d3.selectAll('.onosView').call(setViewDimensions);
552 // allow current view to react to resize event...
Simon Hunt195cb382014-11-03 17:50:51 -0800553 if (current.view) {
Simon Hunt56d51852014-11-09 13:03:35 -0800554 current.view.resize(current.ctx, current.flags);
Simon Hunt195cb382014-11-03 17:50:51 -0800555 }
556 }
557
Simon Hunt8f40cce2014-11-23 15:57:30 -0800558 function theme() {
559 // allow current view to react to theme event...
560 if (current.view) {
561 current.view.theme(current.ctx, current.flags);
562 }
563 }
564
Simon Hunt195cb382014-11-03 17:50:51 -0800565 // ..........................................................
566 // View class
567 // Captures state information about a view.
568
569 // Constructor
570 // vid : view id
571 // nid : id of associated nav-item (optional)
Simon Hunta2994cc2014-12-02 14:19:15 -0800572 // cb : callbacks (init, reset, load, unload, resize, theme, error)
Simon Hunt195cb382014-11-03 17:50:51 -0800573 function View(vid) {
574 var av = 'addView(): ',
575 args = Array.prototype.slice.call(arguments),
576 nid,
Simon Hunt25248912014-11-04 11:25:48 -0800577 cb;
Simon Hunt195cb382014-11-03 17:50:51 -0800578
579 args.shift(); // first arg is always vid
580 if (typeof args[0] === 'string') { // nid specified
581 nid = args.shift();
582 }
583 cb = args.shift();
Simon Hunt195cb382014-11-03 17:50:51 -0800584
585 this.vid = vid;
586
587 if (validateViewArgs(vid)) {
588 this.nid = nid; // explicit navitem id (can be null)
589 this.cb = $.isPlainObject(cb) ? cb : {}; // callbacks
Simon Huntdb9eb072014-11-04 19:12:46 -0800590 this.$div = null; // view not yet added to DOM
591 this.radioButtons = null; // no radio buttons yet
592 this.ok = true; // valid view
Simon Hunt195cb382014-11-03 17:50:51 -0800593 }
Simon Hunt195cb382014-11-03 17:50:51 -0800594 }
595
596 function validateViewArgs(vid) {
Simon Hunt25248912014-11-04 11:25:48 -0800597 var av = "ui.addView(...): ",
598 ok = false;
Simon Hunt195cb382014-11-03 17:50:51 -0800599 if (typeof vid !== 'string' || !vid) {
600 doError(av + 'vid required');
601 } else if (views[vid]) {
602 doError(av + 'View ID "' + vid + '" already exists');
603 } else {
604 ok = true;
605 }
606 return ok;
607 }
608
609 var viewInstanceMethods = {
Simon Hunt25248912014-11-04 11:25:48 -0800610 token: function () {
Simon Hunt195cb382014-11-03 17:50:51 -0800611 return {
Simon Hunt25248912014-11-04 11:25:48 -0800612 // attributes
Simon Hunt195cb382014-11-03 17:50:51 -0800613 vid: this.vid,
614 nid: this.nid,
Simon Hunt25248912014-11-04 11:25:48 -0800615 $div: this.$div,
616
617 // functions
618 width: this.width,
Simon Huntdb9eb072014-11-04 19:12:46 -0800619 height: this.height,
Simon Hunt142d0032014-11-04 20:13:09 -0800620 uid: this.uid,
Simon Hunt0df1b1d2014-11-04 22:58:29 -0800621 setRadio: this.setRadio,
Simon Huntc7ee0662014-11-05 16:44:37 -0800622 setKeys: this.setKeys,
Simon Hunt87514342014-11-24 16:41:27 -0800623 setGestures: this.setGestures,
Simon Hunt1a9eff92014-11-07 11:06:34 -0800624 dataLoadError: this.dataLoadError,
Simon Hunt625dc402014-11-18 10:57:18 -0800625 alert: this.alert,
Simon Hunta3dd9572014-11-20 15:22:41 -0800626 flash: this.flash,
Simon Hunt8f40cce2014-11-23 15:57:30 -0800627 getTheme: this.getTheme
Simon Hunt195cb382014-11-03 17:50:51 -0800628 }
Simon Hunt25248912014-11-04 11:25:48 -0800629 },
630
Simon Huntf67722a2014-11-10 09:32:06 -0800631 // == Life-cycle functions
632 // TODO: factor common code out of life-cycle
Simon Hunta2994cc2014-12-02 14:19:15 -0800633 init: function (ctx, flags) {
Simon Hunt25248912014-11-04 11:25:48 -0800634 var c = ctx || '',
Simon Hunta2994cc2014-12-02 14:19:15 -0800635 fn = isF(this.cb.init);
636 traceFn('View.init', this.vid + ', ' + c);
Simon Hunt25248912014-11-04 11:25:48 -0800637 if (fn) {
Simon Hunta2994cc2014-12-02 14:19:15 -0800638 trace('INIT cb for ' + this.vid);
Simon Hunt56d51852014-11-09 13:03:35 -0800639 fn(this.token(), c, flags);
Simon Hunt25248912014-11-04 11:25:48 -0800640 }
641 },
642
Simon Huntf67722a2014-11-10 09:32:06 -0800643 reset: function (ctx, flags) {
644 var c = ctx || '',
645 fn = isF(this.cb.reset);
Simon Hunt25248912014-11-04 11:25:48 -0800646 traceFn('View.reset', this.vid);
647 if (fn) {
648 trace('RESET cb for ' + this.vid);
Simon Huntf67722a2014-11-10 09:32:06 -0800649 fn(this.token(), c, flags);
Simon Hunt25248912014-11-04 11:25:48 -0800650 } else if (this.cb.reset === true) {
651 // boolean true signifies "clear view"
652 trace(' [true] cleaing view...');
653 viewApi.empty();
654 }
655 },
656
Simon Hunt56d51852014-11-09 13:03:35 -0800657 load: function (ctx, flags) {
Simon Hunt25248912014-11-04 11:25:48 -0800658 var c = ctx || '',
659 fn = isF(this.cb.load);
660 traceFn('View.load', this.vid + ', ' + c);
661 this.$div.classed('currentView', true);
Simon Hunt25248912014-11-04 11:25:48 -0800662 if (fn) {
663 trace('LOAD cb for ' + this.vid);
Simon Hunt56d51852014-11-09 13:03:35 -0800664 fn(this.token(), c, flags);
Simon Hunt25248912014-11-04 11:25:48 -0800665 }
666 },
667
Simon Huntf67722a2014-11-10 09:32:06 -0800668 unload: function (ctx, flags) {
669 var c = ctx | '',
670 fn = isF(this.cb.unload);
Simon Hunt25248912014-11-04 11:25:48 -0800671 traceFn('View.unload', this.vid);
672 this.$div.classed('currentView', false);
Simon Hunt25248912014-11-04 11:25:48 -0800673 if (fn) {
674 trace('UNLOAD cb for ' + this.vid);
Simon Huntf67722a2014-11-10 09:32:06 -0800675 fn(this.token(), c, flags);
Simon Hunt25248912014-11-04 11:25:48 -0800676 }
677 },
678
Simon Hunt56d51852014-11-09 13:03:35 -0800679 resize: function (ctx, flags) {
Simon Hunt25248912014-11-04 11:25:48 -0800680 var c = ctx || '',
681 fn = isF(this.cb.resize),
682 w = this.width(),
683 h = this.height();
684 traceFn('View.resize', this.vid + '/' + c +
685 ' [' + w + 'x' + h + ']');
686 if (fn) {
687 trace('RESIZE cb for ' + this.vid);
Simon Hunt56d51852014-11-09 13:03:35 -0800688 fn(this.token(), c, flags);
Simon Hunt25248912014-11-04 11:25:48 -0800689 }
690 },
691
Simon Hunt8f40cce2014-11-23 15:57:30 -0800692 theme: function (ctx, flags) {
693 var c = ctx | '',
694 fn = isF(this.cb.theme);
695 traceFn('View.theme', this.vid);
696 if (fn) {
697 trace('THEME cb for ' + this.vid);
698 fn(this.token(), c, flags);
699 }
700 },
701
Simon Huntf67722a2014-11-10 09:32:06 -0800702 error: function (ctx, flags) {
Simon Hunt25248912014-11-04 11:25:48 -0800703 var c = ctx || '',
704 fn = isF(this.cb.error);
705 traceFn('View.error', this.vid + ', ' + c);
706 if (fn) {
707 trace('ERROR cb for ' + this.vid);
Simon Huntf67722a2014-11-10 09:32:06 -0800708 fn(this.token(), c, flags);
Simon Hunt25248912014-11-04 11:25:48 -0800709 }
710 },
711
Simon Huntf67722a2014-11-10 09:32:06 -0800712 // == Token API functions
Simon Hunt25248912014-11-04 11:25:48 -0800713 width: function () {
714 return $(this.$div.node()).width();
715 },
716
717 height: function () {
718 return $(this.$div.node()).height();
Simon Huntdb9eb072014-11-04 19:12:46 -0800719 },
Simon Hunt25248912014-11-04 11:25:48 -0800720
Simon Hunt934c3ce2014-11-05 11:45:07 -0800721 setRadio: function (btnSet) {
Simon Hunt9462e8c2014-11-14 17:28:09 -0800722 return setRadioButtons(this.vid, btnSet);
Simon Hunt142d0032014-11-04 20:13:09 -0800723 },
724
Simon Hunt0df1b1d2014-11-04 22:58:29 -0800725 setKeys: function (keyArg) {
726 setKeyBindings(keyArg);
727 },
728
Simon Hunt87514342014-11-24 16:41:27 -0800729 setGestures: function (g) {
730 setGestureNotes(g);
731 },
732
Simon Hunt8f40cce2014-11-23 15:57:30 -0800733 getTheme: function () {
Simon Hunt625dc402014-11-18 10:57:18 -0800734 return current.theme;
735 },
736
Simon Hunt142d0032014-11-04 20:13:09 -0800737 uid: function (id) {
Simon Hunt934c3ce2014-11-05 11:45:07 -0800738 return makeUid(this, id);
Simon Huntc7ee0662014-11-05 16:44:37 -0800739 },
740
Simon Huntbb282f52014-11-10 11:08:19 -0800741 // TODO : add exportApi and importApi methods
Simon Hunt1a9eff92014-11-07 11:06:34 -0800742 // TODO : implement custom dialogs
743
744 // Consider enhancing alert mechanism to handle multiples
745 // as individually closable.
746 alert: function (msg) {
747 doAlert(msg);
748 },
Simon Huntc7ee0662014-11-05 16:44:37 -0800749
Simon Hunta3dd9572014-11-20 15:22:41 -0800750 flash: function (msg) {
751 libApi.feedback.flash(msg);
752 },
753
Simon Huntc7ee0662014-11-05 16:44:37 -0800754 dataLoadError: function (err, url) {
755 var msg = 'Data Load Error\n\n' +
756 err.status + ' -- ' + err.statusText + '\n\n' +
757 'relative-url: "' + url + '"\n\n' +
758 'complete-url: "' + err.responseURL + '"';
Simon Hunt1a9eff92014-11-07 11:06:34 -0800759 this.alert(msg);
Simon Huntdb9eb072014-11-04 19:12:46 -0800760 }
Simon Hunt25248912014-11-04 11:25:48 -0800761
762 // TODO: consider schedule, clearTimer, etc.
Simon Hunt195cb382014-11-03 17:50:51 -0800763 };
764
765 // attach instance methods to the view prototype
766 $.extend(View.prototype, viewInstanceMethods);
767
768 // ..........................................................
Simon Hunt25248912014-11-04 11:25:48 -0800769 // UI API
Simon Hunt195cb382014-11-03 17:50:51 -0800770
Simon Hunta5e89142014-11-14 07:00:33 -0800771 var fpConfig = {
772 TR: {
773 side: 'right'
Simon Hunta5e89142014-11-14 07:00:33 -0800774 },
775 TL: {
776 side: 'left'
777 }
778 };
779
Simon Hunt25248912014-11-04 11:25:48 -0800780 uiApi = {
Simon Hunt1a9eff92014-11-07 11:06:34 -0800781 addLib: function (libName, api) {
782 // TODO: validation of args
783 libApi[libName] = api;
784 },
785
Simon Hunt61d04042014-11-11 17:27:16 -0800786 // TODO: implement floating panel as a class
787 // TODO: parameterize position (currently hard-coded to TopRight)
788 /*
789 * Creates div in floating panels block, with the given id.
790 * Returns panel token used to interact with the panel
791 */
792 addFloatingPanel: function (id, position) {
793 var pos = position || 'TR',
Simon Hunta5e89142014-11-14 07:00:33 -0800794 cfg = fpConfig[pos],
Simon Hunt61d04042014-11-11 17:27:16 -0800795 el,
Thomas Vachuska47635c62014-11-22 01:21:36 -0800796 fp,
797 on = false;
Simon Hunt61d04042014-11-11 17:27:16 -0800798
799 if (fpanels[id]) {
800 buildError('Float panel with id "' + id + '" already exists.');
801 return null;
802 }
803
804 el = $floatPanels.append('div')
805 .attr('id', id)
Simon Hunta5e89142014-11-14 07:00:33 -0800806 .attr('class', 'fpanel')
807 .style('opacity', 0);
808
809 // has to be called after el is set.
810 el.style(cfg.side, pxHide());
811
812 function pxShow() {
813 return '20px';
814 }
815 function pxHide() {
816 return (-20 - widthVal()) + 'px';
817 }
Simon Hunt7b403bc2014-11-22 19:01:00 -0800818 function noPx(what) {
819 return el.style(what).replace(/px$/, '');
820 }
Simon Hunta5e89142014-11-14 07:00:33 -0800821 function widthVal() {
Simon Hunt7b403bc2014-11-22 19:01:00 -0800822 return noPx('width');
823 }
824 function heightVal() {
825 return noPx('height');
Simon Hunta5e89142014-11-14 07:00:33 -0800826 }
Simon Hunt61d04042014-11-11 17:27:16 -0800827
Simon Hunt06811b72014-11-25 18:54:48 -0800828 function noop() {}
829
Simon Hunt61d04042014-11-11 17:27:16 -0800830 fp = {
831 id: id,
832 el: el,
833 pos: pos,
Thomas Vachuska47635c62014-11-22 01:21:36 -0800834 isVisible: function () {
835 return on;
836 },
Simon Hunta5e89142014-11-14 07:00:33 -0800837
Simon Hunt06811b72014-11-25 18:54:48 -0800838 show: function (cb) {
839 var endCb = isF(cb) || noop;
Thomas Vachuska47635c62014-11-22 01:21:36 -0800840 on = true;
Simon Hunt61d04042014-11-11 17:27:16 -0800841 el.transition().duration(750)
Simon Hunt06811b72014-11-25 18:54:48 -0800842 .each('end', endCb)
Simon Hunta5e89142014-11-14 07:00:33 -0800843 .style(cfg.side, pxShow())
Simon Hunt61d04042014-11-11 17:27:16 -0800844 .style('opacity', 1);
845 },
Simon Hunt06811b72014-11-25 18:54:48 -0800846 hide: function (cb) {
847 var endCb = isF(cb) || noop;
Thomas Vachuska47635c62014-11-22 01:21:36 -0800848 on = false;
Simon Hunt61d04042014-11-11 17:27:16 -0800849 el.transition().duration(750)
Simon Hunt06811b72014-11-25 18:54:48 -0800850 .each('end', endCb)
Simon Hunta5e89142014-11-14 07:00:33 -0800851 .style(cfg.side, pxHide())
Simon Hunt61d04042014-11-11 17:27:16 -0800852 .style('opacity', 0);
853 },
854 empty: function () {
855 return el.html('');
856 },
857 append: function (what) {
858 return el.append(what);
Simon Hunta5e89142014-11-14 07:00:33 -0800859 },
860 width: function (w) {
861 if (w === undefined) {
862 return widthVal();
863 }
Simon Huntb82f6902014-11-22 11:53:15 -0800864 el.style('width', w + 'px');
Simon Hunt7b403bc2014-11-22 19:01:00 -0800865 },
866 height: function (h) {
867 if (h === undefined) {
868 return heightVal();
869 }
870 el.style('height', h + 'px');
Simon Hunt61d04042014-11-11 17:27:16 -0800871 }
872 };
873 fpanels[id] = fp;
874 return fp;
875 },
876
Simon Hunt1a9eff92014-11-07 11:06:34 -0800877 // TODO: it remains to be seen whether we keep this style of docs
Simon Hunt25248912014-11-04 11:25:48 -0800878 /** @api ui addView( vid, nid, cb )
879 * Adds a view to the UI.
880 * <p>
881 * Views are loaded/unloaded into the view content pane at
882 * appropriate times, by the navigation framework. This method
883 * adds a view to the UI and returns a token object representing
884 * the view. A view's token is always passed as the first
885 * argument to each of the view's life-cycle callback functions.
886 * <p>
887 * Note that if the view is directly referenced by a nav-item,
888 * or in a group of views with one of those views referenced by
889 * a nav-item, then the <i>nid</i> argument can be omitted as
890 * the framework can infer it.
891 * <p>
892 * <i>cb</i> is a plain object containing callback functions:
Simon Hunta2994cc2014-12-02 14:19:15 -0800893 * "init", "reset", "load", "unload", "resize", "theme", "error".
Simon Hunt25248912014-11-04 11:25:48 -0800894 * <pre>
895 * function myLoad(view, ctx) { ... }
896 * ...
897 * // short form...
898 * onos.ui.addView('viewId', {
899 * load: myLoad
900 * });
901 * </pre>
902 *
903 * @param vid (string) [*] view ID (a unique DOM element id)
904 * @param nid (string) nav-item ID (a unique DOM element id)
905 * @param cb (object) [*] callbacks object
906 * @return the view token
907 */
908 addView: function (vid, nid, cb) {
909 traceFn('addView', vid);
910 var view = new View(vid, nid, cb),
Simon Hunt195cb382014-11-03 17:50:51 -0800911 token;
912 if (view.ok) {
913 views[vid] = view;
914 token = view.token();
915 } else {
916 token = { vid: view.vid, bad: true };
917 }
918 return token;
919 }
920 };
921
Simon Hunt25248912014-11-04 11:25:48 -0800922 // ..........................................................
923 // View API
924
Simon Huntbb282f52014-11-10 11:08:19 -0800925 // TODO: deprecated
Simon Hunt25248912014-11-04 11:25:48 -0800926 viewApi = {
927 /** @api view empty( )
928 * Empties the current view.
929 * <p>
930 * More specifically, removes all DOM elements from the
931 * current view's display div.
932 */
933 empty: function () {
934 if (!current.view) {
935 return;
936 }
937 current.view.$div.html('');
938 }
939 };
940
941 // ..........................................................
942 // Nav API
943 navApi = {
944
945 };
946
947 // ..........................................................
Simon Hunt1a9eff92014-11-07 11:06:34 -0800948 // Library API
949 libApi = {
950
951 };
952
953 // ..........................................................
Simon Hunt25248912014-11-04 11:25:48 -0800954 // Exported API
955
Simon Hunt195cb382014-11-03 17:50:51 -0800956 // function to be called from index.html to build the ONOS UI
957 function buildOnosUi() {
958 tsB = new Date().getTime();
959 tsI = tsB - tsI; // initialization duration
960
961 console.log('ONOS UI initialized in ' + tsI + 'ms');
962
963 if (built) {
964 throwError("ONOS UI already built!");
965 }
966 built = true;
967
Simon Huntdb9eb072014-11-04 19:12:46 -0800968 $mastRadio = d3.select('#mastRadio');
Simon Hunt195cb382014-11-03 17:50:51 -0800969
970 $(window).on('hashchange', hash);
Simon Hunt25248912014-11-04 11:25:48 -0800971 $(window).on('resize', resize);
Simon Hunt195cb382014-11-03 17:50:51 -0800972
Simon Hunt0df1b1d2014-11-04 22:58:29 -0800973 d3.select('body').on('keydown', keyIn);
Thomas Vachuska65368e32014-11-08 16:10:20 -0800974 setupGlobalKeys();
Simon Hunt0df1b1d2014-11-04 22:58:29 -0800975
Simon Hunt195cb382014-11-03 17:50:51 -0800976 // Invoke hashchange callback to navigate to content
977 // indicated by the window location hash.
978 hash();
979
980 // If there were any build errors, report them
981 reportBuildErrors();
982 }
983
Simon Hunt195cb382014-11-03 17:50:51 -0800984 // export the api and build-UI function
985 return {
Simon Hunt25248912014-11-04 11:25:48 -0800986 ui: uiApi,
Simon Hunt1a9eff92014-11-07 11:06:34 -0800987 lib: libApi,
988 //view: viewApi,
Simon Hunt25248912014-11-04 11:25:48 -0800989 nav: navApi,
Simon Huntbb282f52014-11-10 11:08:19 -0800990 buildUi: buildOnosUi,
991 exported: exported
Simon Hunt195cb382014-11-03 17:50:51 -0800992 };
993 };
994
Simon Huntdb9eb072014-11-04 19:12:46 -0800995}(jQuery));