Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 1 | /* |
| 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 Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 27 | mastHeight = 36, // see mast2.css |
Simon Hunt | 142d003 | 2014-11-04 20:13:09 -0800 | [diff] [blame] | 28 | defaultVid = 'sample'; |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 29 | |
| 30 | |
| 31 | // attach our main function to the jQuery object |
| 32 | $.onos = function (options) { |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 33 | var uiApi, |
| 34 | viewApi, |
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 35 | navApi, |
Simon Hunt | bb282f5 | 2014-11-10 11:08:19 -0800 | [diff] [blame] | 36 | libApi, |
| 37 | exported = {}; |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 38 | |
| 39 | var defaultOptions = { |
Simon Hunt | 142d003 | 2014-11-04 20:13:09 -0800 | [diff] [blame] | 40 | trace: false, |
Thomas Vachuska | ece59ee | 2014-11-19 19:06:11 -0800 | [diff] [blame] | 41 | theme: 'dark', |
Simon Hunt | 142d003 | 2014-11-04 20:13:09 -0800 | [diff] [blame] | 42 | startVid: defaultVid |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 43 | }; |
| 44 | |
| 45 | // compute runtime settings |
| 46 | var settings = $.extend({}, defaultOptions, options); |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 47 | |
Thomas Vachuska | 65368e3 | 2014-11-08 16:10:20 -0800 | [diff] [blame] | 48 | // set the selected theme |
| 49 | d3.select('body').classed(settings.theme, true); |
| 50 | |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 51 | // internal state |
| 52 | var views = {}, |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 53 | fpanels = {}, |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 54 | current = { |
| 55 | view: null, |
Thomas Vachuska | 65368e3 | 2014-11-08 16:10:20 -0800 | [diff] [blame] | 56 | ctx: '', |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 57 | flags: {}, |
Thomas Vachuska | 65368e3 | 2014-11-08 16:10:20 -0800 | [diff] [blame] | 58 | theme: settings.theme |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 59 | }, |
| 60 | built = false, |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 61 | buildErrors = [], |
Simon Hunt | 934c3ce | 2014-11-05 11:45:07 -0800 | [diff] [blame] | 62 | keyHandler = { |
Thomas Vachuska | 65368e3 | 2014-11-08 16:10:20 -0800 | [diff] [blame] | 63 | globalKeys: {}, |
| 64 | maskedKeys: {}, |
| 65 | viewKeys: {}, |
| 66 | viewFn: null |
| 67 | }, |
| 68 | alerts = { |
| 69 | open: false, |
| 70 | count: 0 |
Simon Hunt | 934c3ce | 2014-11-05 11:45:07 -0800 | [diff] [blame] | 71 | }; |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 72 | |
| 73 | // DOM elements etc. |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 74 | // TODO: verify existence of following elements... |
| 75 | var $view = d3.select('#view'), |
| 76 | $floatPanels = d3.select('#floatPanels'), |
| 77 | $alerts = d3.select('#alerts'), |
| 78 | // note, following elements added programmatically... |
Simon Hunt | db9eb07 | 2014-11-04 19:12:46 -0800 | [diff] [blame] | 79 | $mastRadio; |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 80 | |
| 81 | |
Simon Hunt | 0df1b1d | 2014-11-04 22:58:29 -0800 | [diff] [blame] | 82 | function whatKey(code) { |
| 83 | switch (code) { |
| 84 | case 13: return 'enter'; |
| 85 | case 16: return 'shift'; |
| 86 | case 17: return 'ctrl'; |
| 87 | case 18: return 'alt'; |
| 88 | case 27: return 'esc'; |
| 89 | case 32: return 'space'; |
| 90 | case 37: return 'leftArrow'; |
| 91 | case 38: return 'upArrow'; |
| 92 | case 39: return 'rightArrow'; |
| 93 | case 40: return 'downArrow'; |
| 94 | case 91: return 'cmdLeft'; |
| 95 | case 93: return 'cmdRight'; |
Simon Hunt | 8f40cce | 2014-11-23 15:57:30 -0800 | [diff] [blame] | 96 | case 187: return 'equals'; |
| 97 | case 189: return 'dash'; |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 98 | case 191: return 'slash'; |
Simon Hunt | 0df1b1d | 2014-11-04 22:58:29 -0800 | [diff] [blame] | 99 | default: |
| 100 | if ((code >= 48 && code <= 57) || |
| 101 | (code >= 65 && code <= 90)) { |
| 102 | return String.fromCharCode(code); |
| 103 | } else if (code >= 112 && code <= 123) { |
| 104 | return 'F' + (code - 111); |
| 105 | } |
| 106 | return '.'; |
| 107 | } |
| 108 | } |
| 109 | |
| 110 | |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 111 | // .......................................................... |
| 112 | // Internal functions |
| 113 | |
| 114 | // throw an error |
| 115 | function throwError(msg) { |
| 116 | // separate function, as we might add tracing here too, later |
| 117 | throw new Error(msg); |
| 118 | } |
| 119 | |
| 120 | function doError(msg) { |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 121 | console.error(msg); |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 122 | doAlert(msg); |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 123 | } |
| 124 | |
| 125 | function trace(msg) { |
| 126 | if (settings.trace) { |
| 127 | console.log(msg); |
| 128 | } |
| 129 | } |
| 130 | |
| 131 | function traceFn(fn, params) { |
| 132 | if (settings.trace) { |
| 133 | console.log('*FN* ' + fn + '(...): ' + params); |
| 134 | } |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 135 | } |
| 136 | |
| 137 | // hash navigation |
| 138 | function hash() { |
| 139 | var hash = window.location.hash, |
| 140 | redo = false, |
| 141 | view, |
| 142 | t; |
| 143 | |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 144 | traceFn('hash', hash); |
| 145 | |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 146 | if (!hash) { |
Simon Hunt | 142d003 | 2014-11-04 20:13:09 -0800 | [diff] [blame] | 147 | hash = settings.startVid; |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 148 | redo = true; |
| 149 | } |
| 150 | |
| 151 | t = parseHash(hash); |
| 152 | if (!t || !t.vid) { |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 153 | doError('Unable to parse target hash: "' + hash + '"'); |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 154 | } |
| 155 | |
| 156 | view = views[t.vid]; |
| 157 | if (!view) { |
| 158 | doError('No view defined with id: ' + t.vid); |
| 159 | } |
| 160 | |
| 161 | if (redo) { |
| 162 | window.location.hash = makeHash(t); |
| 163 | // the above will result in a hashchange event, invoking |
| 164 | // this function again |
| 165 | } else { |
| 166 | // hash was not modified... navigate to where we need to be |
| 167 | navigate(hash, view, t); |
| 168 | } |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 169 | } |
| 170 | |
| 171 | function parseHash(s) { |
| 172 | // extract navigation coordinates from the supplied string |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 173 | // "vid,ctx?flag1,flag2" --> { vid:vid, ctx:ctx, flags:{...} } |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 174 | traceFn('parseHash', s); |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 175 | |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 176 | // look for use of flags, first |
| 177 | var vidctx, |
| 178 | vid, |
| 179 | ctx, |
| 180 | flags, |
| 181 | flagMap, |
| 182 | m; |
| 183 | |
| 184 | // RE that includes flags ('?flag1,flag2') |
| 185 | m = /^[#]{0,1}(.+)\?(.+)$/.exec(s); |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 186 | if (m) { |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 187 | vidctx = m[1]; |
| 188 | flags = m[2]; |
| 189 | flagMap = {}; |
| 190 | } else { |
| 191 | // no flags |
| 192 | m = /^[#]{0,1}((.+)(,.+)*)$/.exec(s); |
| 193 | if (m) { |
| 194 | vidctx = m[1]; |
| 195 | } else { |
| 196 | // bad hash |
| 197 | return null; |
| 198 | } |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 199 | } |
| 200 | |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 201 | vidctx = vidctx.split(','); |
| 202 | vid = vidctx[0]; |
| 203 | ctx = vidctx[1]; |
| 204 | if (flags) { |
| 205 | flags.split(',').forEach(function (f) { |
| 206 | flagMap[f.trim()] = true; |
| 207 | }); |
| 208 | } |
| 209 | |
| 210 | return { |
| 211 | vid: vid.trim(), |
| 212 | ctx: ctx ? ctx.trim() : '', |
| 213 | flags: flagMap |
| 214 | }; |
| 215 | |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 216 | } |
| 217 | |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 218 | function makeHash(t, ctx, flags) { |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 219 | traceFn('makeHash'); |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 220 | // make a hash string from the given navigation coordinates, |
| 221 | // and optional flags map. |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 222 | // if t is not an object, then it is a vid |
| 223 | var h = t, |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 224 | c = ctx || '', |
| 225 | f = $.isPlainObject(flags) ? flags : null; |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 226 | |
| 227 | if ($.isPlainObject(t)) { |
| 228 | h = t.vid; |
| 229 | c = t.ctx || ''; |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 230 | f = t.flags || null; |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 231 | } |
| 232 | |
| 233 | if (c) { |
| 234 | h += ',' + c; |
| 235 | } |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 236 | if (f) { |
| 237 | h += '?' + d3.map(f).keys().join(','); |
| 238 | } |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 239 | trace('hash = "' + h + '"'); |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 240 | return h; |
| 241 | } |
| 242 | |
| 243 | function navigate(hash, view, t) { |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 244 | traceFn('navigate', view.vid); |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 245 | // closePanes() // flyouts etc. |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 246 | // updateNav() // accordion / selected nav item etc. |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 247 | createView(view); |
| 248 | setView(view, hash, t); |
| 249 | } |
| 250 | |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 251 | function buildError(msg) { |
| 252 | buildErrors.push(msg); |
| 253 | } |
| 254 | |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 255 | function reportBuildErrors() { |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 256 | traceFn('reportBuildErrors'); |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 257 | var nerr = buildErrors.length, |
| 258 | errmsg; |
| 259 | if (!nerr) { |
| 260 | console.log('(no build errors)'); |
| 261 | } else { |
| 262 | errmsg = 'Build errors: ' + nerr + ' found...\n\n' + |
| 263 | buildErrors.join('\n'); |
| 264 | doAlert(errmsg); |
| 265 | console.error(errmsg); |
| 266 | } |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 267 | } |
| 268 | |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 269 | // returns the reference if it is a function, null otherwise |
| 270 | function isF(f) { |
| 271 | return $.isFunction(f) ? f : null; |
| 272 | } |
| 273 | |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 274 | // returns the reference if it is an array, null otherwise |
| 275 | function isA(a) { |
| 276 | return $.isArray(a) ? a : null; |
| 277 | } |
| 278 | |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 279 | // .......................................................... |
| 280 | // View life-cycle functions |
| 281 | |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 282 | function setViewDimensions(sel) { |
| 283 | var w = window.innerWidth, |
| 284 | h = window.innerHeight - mastHeight; |
| 285 | sel.each(function () { |
| 286 | $(this) |
| 287 | .css('width', w + 'px') |
| 288 | .css('height', h + 'px') |
| 289 | }); |
| 290 | } |
| 291 | |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 292 | function createView(view) { |
| 293 | var $d; |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 294 | |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 295 | // lazy initialization of the view |
| 296 | if (view && !view.$div) { |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 297 | trace('creating view for ' + view.vid); |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 298 | $d = $view.append('div') |
| 299 | .attr({ |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 300 | id: view.vid, |
| 301 | class: 'onosView' |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 302 | }); |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 303 | setViewDimensions($d); |
| 304 | view.$div = $d; // cache a reference to the D3 selection |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 305 | } |
| 306 | } |
| 307 | |
| 308 | function setView(view, hash, t) { |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 309 | traceFn('setView', view.vid); |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 310 | // set the specified view as current, while invoking the |
| 311 | // appropriate life-cycle callbacks |
| 312 | |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 313 | // first, we'll start by closing the alerts pane, if open |
| 314 | closeAlerts(); |
| 315 | |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 316 | // if there is a current view, and it is not the same as |
| 317 | // the incoming view, then unload it... |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 318 | if (current.view && (current.view.vid !== view.vid)) { |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 319 | current.view.unload(); |
Simon Hunt | db9eb07 | 2014-11-04 19:12:46 -0800 | [diff] [blame] | 320 | |
Simon Hunt | 0df1b1d | 2014-11-04 22:58:29 -0800 | [diff] [blame] | 321 | // detach radio buttons, key handlers, etc. |
| 322 | $('#mastRadio').children().detach(); |
Thomas Vachuska | 65368e3 | 2014-11-08 16:10:20 -0800 | [diff] [blame] | 323 | keyHandler.viewKeys = {}; |
| 324 | keyHandler.viewFn = null; |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 325 | } |
| 326 | |
| 327 | // cache new view and context |
| 328 | current.view = view; |
| 329 | current.ctx = t.ctx || ''; |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 330 | current.flags = t.flags || {}; |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 331 | |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 332 | // preload is called only once, after the view is in the DOM |
| 333 | if (!view.preloaded) { |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 334 | view.preload(current.ctx, current.flags); |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 335 | view.preloaded = true; |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 336 | } |
| 337 | |
| 338 | // clear the view of stale data |
| 339 | view.reset(); |
| 340 | |
| 341 | // load the view |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 342 | view.load(current.ctx, current.flags); |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 343 | } |
| 344 | |
Simon Hunt | db9eb07 | 2014-11-04 19:12:46 -0800 | [diff] [blame] | 345 | // generate 'unique' id by prefixing view id |
Simon Hunt | 934c3ce | 2014-11-05 11:45:07 -0800 | [diff] [blame] | 346 | function makeUid(view, id) { |
Simon Hunt | db9eb07 | 2014-11-04 19:12:46 -0800 | [diff] [blame] | 347 | return view.vid + '-' + id; |
| 348 | } |
| 349 | |
| 350 | // restore id by removing view id prefix |
Simon Hunt | 934c3ce | 2014-11-05 11:45:07 -0800 | [diff] [blame] | 351 | function unmakeUid(view, uid) { |
Simon Hunt | db9eb07 | 2014-11-04 19:12:46 -0800 | [diff] [blame] | 352 | var re = new RegExp('^' + view.vid + '-'); |
| 353 | return uid.replace(re, ''); |
| 354 | } |
| 355 | |
Simon Hunt | 934c3ce | 2014-11-05 11:45:07 -0800 | [diff] [blame] | 356 | function setRadioButtons(vid, btnSet) { |
Simon Hunt | db9eb07 | 2014-11-04 19:12:46 -0800 | [diff] [blame] | 357 | var view = views[vid], |
Simon Hunt | 9462e8c | 2014-11-14 17:28:09 -0800 | [diff] [blame] | 358 | btnG, |
| 359 | api = {}; |
Simon Hunt | db9eb07 | 2014-11-04 19:12:46 -0800 | [diff] [blame] | 360 | |
| 361 | // lazily create the buttons... |
| 362 | if (!(btnG = view.radioButtons)) { |
| 363 | btnG = d3.select(document.createElement('div')); |
Simon Hunt | 934c3ce | 2014-11-05 11:45:07 -0800 | [diff] [blame] | 364 | btnG.buttonDef = {}; |
Simon Hunt | db9eb07 | 2014-11-04 19:12:46 -0800 | [diff] [blame] | 365 | |
| 366 | btnSet.forEach(function (btn, i) { |
| 367 | var bid = btn.id || 'b' + i, |
| 368 | txt = btn.text || 'Button #' + i, |
Simon Hunt | 934c3ce | 2014-11-05 11:45:07 -0800 | [diff] [blame] | 369 | uid = makeUid(view, bid), |
| 370 | button = btnG.append('span') |
Simon Hunt | db9eb07 | 2014-11-04 19:12:46 -0800 | [diff] [blame] | 371 | .attr({ |
Simon Hunt | 934c3ce | 2014-11-05 11:45:07 -0800 | [diff] [blame] | 372 | id: uid, |
Simon Hunt | db9eb07 | 2014-11-04 19:12:46 -0800 | [diff] [blame] | 373 | class: 'radio' |
| 374 | }) |
| 375 | .text(txt); |
Simon Hunt | 934c3ce | 2014-11-05 11:45:07 -0800 | [diff] [blame] | 376 | |
Simon Hunt | 9462e8c | 2014-11-14 17:28:09 -0800 | [diff] [blame] | 377 | btn.id = bid; |
Simon Hunt | 934c3ce | 2014-11-05 11:45:07 -0800 | [diff] [blame] | 378 | btnG.buttonDef[uid] = btn; |
| 379 | |
Simon Hunt | db9eb07 | 2014-11-04 19:12:46 -0800 | [diff] [blame] | 380 | if (i === 0) { |
Simon Hunt | 934c3ce | 2014-11-05 11:45:07 -0800 | [diff] [blame] | 381 | button.classed('active', true); |
Simon Hunt | 9462e8c | 2014-11-14 17:28:09 -0800 | [diff] [blame] | 382 | btnG.selected = bid; |
Simon Hunt | db9eb07 | 2014-11-04 19:12:46 -0800 | [diff] [blame] | 383 | } |
| 384 | }); |
| 385 | |
| 386 | btnG.selectAll('span') |
| 387 | .on('click', function (d) { |
Simon Hunt | 934c3ce | 2014-11-05 11:45:07 -0800 | [diff] [blame] | 388 | var button = d3.select(this), |
| 389 | uid = button.attr('id'), |
| 390 | btn = btnG.buttonDef[uid], |
| 391 | act = button.classed('active'); |
Simon Hunt | db9eb07 | 2014-11-04 19:12:46 -0800 | [diff] [blame] | 392 | |
| 393 | if (!act) { |
Simon Hunt | 934c3ce | 2014-11-05 11:45:07 -0800 | [diff] [blame] | 394 | btnG.selectAll('span').classed('active', false); |
| 395 | button.classed('active', true); |
Simon Hunt | 9462e8c | 2014-11-14 17:28:09 -0800 | [diff] [blame] | 396 | btnG.selected = btn.id; |
Simon Hunt | 934c3ce | 2014-11-05 11:45:07 -0800 | [diff] [blame] | 397 | if (isF(btn.cb)) { |
| 398 | btn.cb(view.token(), btn); |
| 399 | } |
Simon Hunt | db9eb07 | 2014-11-04 19:12:46 -0800 | [diff] [blame] | 400 | } |
| 401 | }); |
| 402 | |
| 403 | view.radioButtons = btnG; |
Simon Hunt | 9462e8c | 2014-11-14 17:28:09 -0800 | [diff] [blame] | 404 | |
| 405 | api.selected = function () { |
| 406 | return btnG.selected; |
| 407 | } |
Simon Hunt | db9eb07 | 2014-11-04 19:12:46 -0800 | [diff] [blame] | 408 | } |
| 409 | |
| 410 | // attach the buttons to the masthead |
| 411 | $mastRadio.node().appendChild(btnG.node()); |
Simon Hunt | 9462e8c | 2014-11-14 17:28:09 -0800 | [diff] [blame] | 412 | // return an api for interacting with the button set |
| 413 | return api; |
Simon Hunt | db9eb07 | 2014-11-04 19:12:46 -0800 | [diff] [blame] | 414 | } |
| 415 | |
Thomas Vachuska | 65368e3 | 2014-11-08 16:10:20 -0800 | [diff] [blame] | 416 | function setupGlobalKeys() { |
| 417 | keyHandler.globalKeys = { |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame^] | 418 | slash: [quickHelp, 'Show / hide Quick Help'], |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 419 | esc: [escapeKey, 'Dismiss dialog or cancel selections'], |
| 420 | T: [toggleTheme, "Toggle theme"] |
Thomas Vachuska | 65368e3 | 2014-11-08 16:10:20 -0800 | [diff] [blame] | 421 | }; |
| 422 | // Masked keys are global key handlers that always return true. |
| 423 | // That is, the view will never see the event for that key. |
| 424 | keyHandler.maskedKeys = { |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 425 | slash: true, |
Thomas Vachuska | 65368e3 | 2014-11-08 16:10:20 -0800 | [diff] [blame] | 426 | T: true |
| 427 | }; |
| 428 | } |
| 429 | |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame^] | 430 | function quickHelp(view, key, code, ev) { |
| 431 | libApi.quickHelp.show(keyHandler); |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 432 | return true; |
| 433 | } |
| 434 | |
Thomas Vachuska | 65368e3 | 2014-11-08 16:10:20 -0800 | [diff] [blame] | 435 | function escapeKey(view, key, code, ev) { |
| 436 | if (alerts.open) { |
| 437 | closeAlerts(); |
| 438 | return true; |
| 439 | } |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame^] | 440 | if (libApi.quickHelp.hide()) { |
| 441 | return true; |
| 442 | } |
Thomas Vachuska | 65368e3 | 2014-11-08 16:10:20 -0800 | [diff] [blame] | 443 | return false; |
| 444 | } |
| 445 | |
| 446 | function toggleTheme(view, key, code, ev) { |
| 447 | var body = d3.select('body'); |
| 448 | current.theme = (current.theme === 'light') ? 'dark' : 'light'; |
| 449 | body.classed('light dark', false); |
| 450 | body.classed(current.theme, true); |
Simon Hunt | 8f40cce | 2014-11-23 15:57:30 -0800 | [diff] [blame] | 451 | theme(view); |
Thomas Vachuska | 65368e3 | 2014-11-08 16:10:20 -0800 | [diff] [blame] | 452 | return true; |
| 453 | } |
| 454 | |
Simon Hunt | 0df1b1d | 2014-11-04 22:58:29 -0800 | [diff] [blame] | 455 | function setKeyBindings(keyArg) { |
Thomas Vachuska | 65368e3 | 2014-11-08 16:10:20 -0800 | [diff] [blame] | 456 | var viewKeys, |
| 457 | masked = []; |
| 458 | |
Simon Hunt | 0df1b1d | 2014-11-04 22:58:29 -0800 | [diff] [blame] | 459 | if ($.isFunction(keyArg)) { |
| 460 | // set general key handler callback |
Thomas Vachuska | 65368e3 | 2014-11-08 16:10:20 -0800 | [diff] [blame] | 461 | keyHandler.viewFn = keyArg; |
Simon Hunt | 0df1b1d | 2014-11-04 22:58:29 -0800 | [diff] [blame] | 462 | } else { |
| 463 | // set specific key filter map |
Thomas Vachuska | 65368e3 | 2014-11-08 16:10:20 -0800 | [diff] [blame] | 464 | viewKeys = d3.map(keyArg).keys(); |
| 465 | viewKeys.forEach(function (key) { |
| 466 | if (keyHandler.maskedKeys[key]) { |
| 467 | masked.push(' Key "' + key + '" is reserved'); |
| 468 | } |
| 469 | }); |
| 470 | |
| 471 | if (masked.length) { |
| 472 | doAlert('WARNING...\n\nsetKeys():\n' + masked.join('\n')); |
| 473 | } |
| 474 | keyHandler.viewKeys = keyArg; |
Simon Hunt | 0df1b1d | 2014-11-04 22:58:29 -0800 | [diff] [blame] | 475 | } |
| 476 | } |
| 477 | |
Thomas Vachuska | 65368e3 | 2014-11-08 16:10:20 -0800 | [diff] [blame] | 478 | function keyIn() { |
| 479 | var event = d3.event, |
| 480 | keyCode = event.keyCode, |
| 481 | key = whatKey(keyCode), |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 482 | gk = keyHandler.globalKeys[key], |
| 483 | gcb = isF(gk) || (isA(gk) && isF(gk[0])), |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 484 | vk = keyHandler.viewKeys[key], |
| 485 | vcb = isF(vk) || (isA(vk) && isF(vk[0])) || isF(keyHandler.viewFn); |
Thomas Vachuska | 65368e3 | 2014-11-08 16:10:20 -0800 | [diff] [blame] | 486 | |
| 487 | // global callback? |
| 488 | if (gcb && gcb(current.view.token(), key, keyCode, event)) { |
| 489 | // if the event was 'handled', we are done |
| 490 | return; |
| 491 | } |
| 492 | // otherwise, let the view callback have a shot |
| 493 | if (vcb) { |
| 494 | vcb(current.view.token(), key, keyCode, event); |
| 495 | } |
| 496 | } |
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 497 | |
| 498 | function createAlerts() { |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 499 | $alerts.style('display', 'block'); |
| 500 | $alerts.append('span') |
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 501 | .attr('class', 'close') |
| 502 | .text('X') |
| 503 | .on('click', closeAlerts); |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 504 | $alerts.append('pre'); |
| 505 | $alerts.append('p').attr('class', 'footnote') |
Thomas Vachuska | 65368e3 | 2014-11-08 16:10:20 -0800 | [diff] [blame] | 506 | .text('Press ESCAPE to close'); |
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 507 | alerts.open = true; |
| 508 | alerts.count = 0; |
| 509 | } |
| 510 | |
| 511 | function closeAlerts() { |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 512 | $alerts.style('display', 'none') |
Thomas Vachuska | 65368e3 | 2014-11-08 16:10:20 -0800 | [diff] [blame] | 513 | .html(''); |
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 514 | alerts.open = false; |
| 515 | } |
| 516 | |
| 517 | function addAlert(msg) { |
| 518 | var lines, |
| 519 | oldContent; |
| 520 | |
| 521 | if (alerts.count) { |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 522 | oldContent = $alerts.select('pre').html(); |
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 523 | } |
| 524 | |
| 525 | lines = msg.split('\n'); |
| 526 | lines[0] += ' '; // spacing so we don't crowd 'X' |
| 527 | lines = lines.join('\n'); |
| 528 | |
| 529 | if (oldContent) { |
| 530 | lines += '\n----\n' + oldContent; |
| 531 | } |
| 532 | |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 533 | $alerts.select('pre').html(lines); |
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 534 | alerts.count++; |
| 535 | } |
| 536 | |
| 537 | function doAlert(msg) { |
| 538 | if (!alerts.open) { |
| 539 | createAlerts(); |
| 540 | } |
| 541 | addAlert(msg); |
| 542 | } |
| 543 | |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 544 | function resize(e) { |
| 545 | d3.selectAll('.onosView').call(setViewDimensions); |
| 546 | // allow current view to react to resize event... |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 547 | if (current.view) { |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 548 | current.view.resize(current.ctx, current.flags); |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 549 | } |
| 550 | } |
| 551 | |
Simon Hunt | 8f40cce | 2014-11-23 15:57:30 -0800 | [diff] [blame] | 552 | function theme() { |
| 553 | // allow current view to react to theme event... |
| 554 | if (current.view) { |
| 555 | current.view.theme(current.ctx, current.flags); |
| 556 | } |
| 557 | } |
| 558 | |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 559 | // .......................................................... |
| 560 | // View class |
| 561 | // Captures state information about a view. |
| 562 | |
| 563 | // Constructor |
| 564 | // vid : view id |
| 565 | // nid : id of associated nav-item (optional) |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 566 | // cb : callbacks (preload, reset, load, unload, resize, error) |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 567 | function View(vid) { |
| 568 | var av = 'addView(): ', |
| 569 | args = Array.prototype.slice.call(arguments), |
| 570 | nid, |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 571 | cb; |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 572 | |
| 573 | args.shift(); // first arg is always vid |
| 574 | if (typeof args[0] === 'string') { // nid specified |
| 575 | nid = args.shift(); |
| 576 | } |
| 577 | cb = args.shift(); |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 578 | |
| 579 | this.vid = vid; |
| 580 | |
| 581 | if (validateViewArgs(vid)) { |
| 582 | this.nid = nid; // explicit navitem id (can be null) |
| 583 | this.cb = $.isPlainObject(cb) ? cb : {}; // callbacks |
Simon Hunt | db9eb07 | 2014-11-04 19:12:46 -0800 | [diff] [blame] | 584 | this.$div = null; // view not yet added to DOM |
| 585 | this.radioButtons = null; // no radio buttons yet |
| 586 | this.ok = true; // valid view |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 587 | } |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 588 | } |
| 589 | |
| 590 | function validateViewArgs(vid) { |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 591 | var av = "ui.addView(...): ", |
| 592 | ok = false; |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 593 | if (typeof vid !== 'string' || !vid) { |
| 594 | doError(av + 'vid required'); |
| 595 | } else if (views[vid]) { |
| 596 | doError(av + 'View ID "' + vid + '" already exists'); |
| 597 | } else { |
| 598 | ok = true; |
| 599 | } |
| 600 | return ok; |
| 601 | } |
| 602 | |
| 603 | var viewInstanceMethods = { |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 604 | token: function () { |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 605 | return { |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 606 | // attributes |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 607 | vid: this.vid, |
| 608 | nid: this.nid, |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 609 | $div: this.$div, |
| 610 | |
| 611 | // functions |
| 612 | width: this.width, |
Simon Hunt | db9eb07 | 2014-11-04 19:12:46 -0800 | [diff] [blame] | 613 | height: this.height, |
Simon Hunt | 142d003 | 2014-11-04 20:13:09 -0800 | [diff] [blame] | 614 | uid: this.uid, |
Simon Hunt | 0df1b1d | 2014-11-04 22:58:29 -0800 | [diff] [blame] | 615 | setRadio: this.setRadio, |
Simon Hunt | c7ee066 | 2014-11-05 16:44:37 -0800 | [diff] [blame] | 616 | setKeys: this.setKeys, |
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 617 | dataLoadError: this.dataLoadError, |
Simon Hunt | 625dc40 | 2014-11-18 10:57:18 -0800 | [diff] [blame] | 618 | alert: this.alert, |
Simon Hunt | a3dd957 | 2014-11-20 15:22:41 -0800 | [diff] [blame] | 619 | flash: this.flash, |
Simon Hunt | 8f40cce | 2014-11-23 15:57:30 -0800 | [diff] [blame] | 620 | getTheme: this.getTheme |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 621 | } |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 622 | }, |
| 623 | |
Simon Hunt | f67722a | 2014-11-10 09:32:06 -0800 | [diff] [blame] | 624 | // == Life-cycle functions |
| 625 | // TODO: factor common code out of life-cycle |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 626 | preload: function (ctx, flags) { |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 627 | var c = ctx || '', |
| 628 | fn = isF(this.cb.preload); |
| 629 | traceFn('View.preload', this.vid + ', ' + c); |
| 630 | if (fn) { |
| 631 | trace('PRELOAD cb for ' + this.vid); |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 632 | fn(this.token(), c, flags); |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 633 | } |
| 634 | }, |
| 635 | |
Simon Hunt | f67722a | 2014-11-10 09:32:06 -0800 | [diff] [blame] | 636 | reset: function (ctx, flags) { |
| 637 | var c = ctx || '', |
| 638 | fn = isF(this.cb.reset); |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 639 | traceFn('View.reset', this.vid); |
| 640 | if (fn) { |
| 641 | trace('RESET cb for ' + this.vid); |
Simon Hunt | f67722a | 2014-11-10 09:32:06 -0800 | [diff] [blame] | 642 | fn(this.token(), c, flags); |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 643 | } else if (this.cb.reset === true) { |
| 644 | // boolean true signifies "clear view" |
| 645 | trace(' [true] cleaing view...'); |
| 646 | viewApi.empty(); |
| 647 | } |
| 648 | }, |
| 649 | |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 650 | load: function (ctx, flags) { |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 651 | var c = ctx || '', |
| 652 | fn = isF(this.cb.load); |
| 653 | traceFn('View.load', this.vid + ', ' + c); |
| 654 | this.$div.classed('currentView', true); |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 655 | if (fn) { |
| 656 | trace('LOAD cb for ' + this.vid); |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 657 | fn(this.token(), c, flags); |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 658 | } |
| 659 | }, |
| 660 | |
Simon Hunt | f67722a | 2014-11-10 09:32:06 -0800 | [diff] [blame] | 661 | unload: function (ctx, flags) { |
| 662 | var c = ctx | '', |
| 663 | fn = isF(this.cb.unload); |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 664 | traceFn('View.unload', this.vid); |
| 665 | this.$div.classed('currentView', false); |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 666 | if (fn) { |
| 667 | trace('UNLOAD cb for ' + this.vid); |
Simon Hunt | f67722a | 2014-11-10 09:32:06 -0800 | [diff] [blame] | 668 | fn(this.token(), c, flags); |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 669 | } |
| 670 | }, |
| 671 | |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 672 | resize: function (ctx, flags) { |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 673 | var c = ctx || '', |
| 674 | fn = isF(this.cb.resize), |
| 675 | w = this.width(), |
| 676 | h = this.height(); |
| 677 | traceFn('View.resize', this.vid + '/' + c + |
| 678 | ' [' + w + 'x' + h + ']'); |
| 679 | if (fn) { |
| 680 | trace('RESIZE cb for ' + this.vid); |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 681 | fn(this.token(), c, flags); |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 682 | } |
| 683 | }, |
| 684 | |
Simon Hunt | 8f40cce | 2014-11-23 15:57:30 -0800 | [diff] [blame] | 685 | theme: function (ctx, flags) { |
| 686 | var c = ctx | '', |
| 687 | fn = isF(this.cb.theme); |
| 688 | traceFn('View.theme', this.vid); |
| 689 | if (fn) { |
| 690 | trace('THEME cb for ' + this.vid); |
| 691 | fn(this.token(), c, flags); |
| 692 | } |
| 693 | }, |
| 694 | |
Simon Hunt | f67722a | 2014-11-10 09:32:06 -0800 | [diff] [blame] | 695 | error: function (ctx, flags) { |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 696 | var c = ctx || '', |
| 697 | fn = isF(this.cb.error); |
| 698 | traceFn('View.error', this.vid + ', ' + c); |
| 699 | if (fn) { |
| 700 | trace('ERROR cb for ' + this.vid); |
Simon Hunt | f67722a | 2014-11-10 09:32:06 -0800 | [diff] [blame] | 701 | fn(this.token(), c, flags); |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 702 | } |
| 703 | }, |
| 704 | |
Simon Hunt | f67722a | 2014-11-10 09:32:06 -0800 | [diff] [blame] | 705 | // == Token API functions |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 706 | width: function () { |
| 707 | return $(this.$div.node()).width(); |
| 708 | }, |
| 709 | |
| 710 | height: function () { |
| 711 | return $(this.$div.node()).height(); |
Simon Hunt | db9eb07 | 2014-11-04 19:12:46 -0800 | [diff] [blame] | 712 | }, |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 713 | |
Simon Hunt | 934c3ce | 2014-11-05 11:45:07 -0800 | [diff] [blame] | 714 | setRadio: function (btnSet) { |
Simon Hunt | 9462e8c | 2014-11-14 17:28:09 -0800 | [diff] [blame] | 715 | return setRadioButtons(this.vid, btnSet); |
Simon Hunt | 142d003 | 2014-11-04 20:13:09 -0800 | [diff] [blame] | 716 | }, |
| 717 | |
Simon Hunt | 0df1b1d | 2014-11-04 22:58:29 -0800 | [diff] [blame] | 718 | setKeys: function (keyArg) { |
| 719 | setKeyBindings(keyArg); |
| 720 | }, |
| 721 | |
Simon Hunt | 8f40cce | 2014-11-23 15:57:30 -0800 | [diff] [blame] | 722 | getTheme: function () { |
Simon Hunt | 625dc40 | 2014-11-18 10:57:18 -0800 | [diff] [blame] | 723 | return current.theme; |
| 724 | }, |
| 725 | |
Simon Hunt | 142d003 | 2014-11-04 20:13:09 -0800 | [diff] [blame] | 726 | uid: function (id) { |
Simon Hunt | 934c3ce | 2014-11-05 11:45:07 -0800 | [diff] [blame] | 727 | return makeUid(this, id); |
Simon Hunt | c7ee066 | 2014-11-05 16:44:37 -0800 | [diff] [blame] | 728 | }, |
| 729 | |
Simon Hunt | bb282f5 | 2014-11-10 11:08:19 -0800 | [diff] [blame] | 730 | // TODO : add exportApi and importApi methods |
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 731 | // TODO : implement custom dialogs |
| 732 | |
| 733 | // Consider enhancing alert mechanism to handle multiples |
| 734 | // as individually closable. |
| 735 | alert: function (msg) { |
| 736 | doAlert(msg); |
| 737 | }, |
Simon Hunt | c7ee066 | 2014-11-05 16:44:37 -0800 | [diff] [blame] | 738 | |
Simon Hunt | a3dd957 | 2014-11-20 15:22:41 -0800 | [diff] [blame] | 739 | flash: function (msg) { |
| 740 | libApi.feedback.flash(msg); |
| 741 | }, |
| 742 | |
Simon Hunt | c7ee066 | 2014-11-05 16:44:37 -0800 | [diff] [blame] | 743 | dataLoadError: function (err, url) { |
| 744 | var msg = 'Data Load Error\n\n' + |
| 745 | err.status + ' -- ' + err.statusText + '\n\n' + |
| 746 | 'relative-url: "' + url + '"\n\n' + |
| 747 | 'complete-url: "' + err.responseURL + '"'; |
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 748 | this.alert(msg); |
Simon Hunt | db9eb07 | 2014-11-04 19:12:46 -0800 | [diff] [blame] | 749 | } |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 750 | |
| 751 | // TODO: consider schedule, clearTimer, etc. |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 752 | }; |
| 753 | |
| 754 | // attach instance methods to the view prototype |
| 755 | $.extend(View.prototype, viewInstanceMethods); |
| 756 | |
| 757 | // .......................................................... |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 758 | // UI API |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 759 | |
Simon Hunt | a5e8914 | 2014-11-14 07:00:33 -0800 | [diff] [blame] | 760 | var fpConfig = { |
| 761 | TR: { |
| 762 | side: 'right' |
| 763 | |
| 764 | }, |
| 765 | TL: { |
| 766 | side: 'left' |
| 767 | } |
| 768 | }; |
| 769 | |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 770 | uiApi = { |
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 771 | addLib: function (libName, api) { |
| 772 | // TODO: validation of args |
| 773 | libApi[libName] = api; |
| 774 | }, |
| 775 | |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 776 | // TODO: implement floating panel as a class |
| 777 | // TODO: parameterize position (currently hard-coded to TopRight) |
| 778 | /* |
| 779 | * Creates div in floating panels block, with the given id. |
| 780 | * Returns panel token used to interact with the panel |
| 781 | */ |
| 782 | addFloatingPanel: function (id, position) { |
| 783 | var pos = position || 'TR', |
Simon Hunt | a5e8914 | 2014-11-14 07:00:33 -0800 | [diff] [blame] | 784 | cfg = fpConfig[pos], |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 785 | el, |
Thomas Vachuska | 47635c6 | 2014-11-22 01:21:36 -0800 | [diff] [blame] | 786 | fp, |
| 787 | on = false; |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 788 | |
| 789 | if (fpanels[id]) { |
| 790 | buildError('Float panel with id "' + id + '" already exists.'); |
| 791 | return null; |
| 792 | } |
| 793 | |
| 794 | el = $floatPanels.append('div') |
| 795 | .attr('id', id) |
Simon Hunt | a5e8914 | 2014-11-14 07:00:33 -0800 | [diff] [blame] | 796 | .attr('class', 'fpanel') |
| 797 | .style('opacity', 0); |
| 798 | |
| 799 | // has to be called after el is set. |
| 800 | el.style(cfg.side, pxHide()); |
| 801 | |
| 802 | function pxShow() { |
| 803 | return '20px'; |
| 804 | } |
| 805 | function pxHide() { |
| 806 | return (-20 - widthVal()) + 'px'; |
| 807 | } |
Simon Hunt | 7b403bc | 2014-11-22 19:01:00 -0800 | [diff] [blame] | 808 | function noPx(what) { |
| 809 | return el.style(what).replace(/px$/, ''); |
| 810 | } |
Simon Hunt | a5e8914 | 2014-11-14 07:00:33 -0800 | [diff] [blame] | 811 | function widthVal() { |
Simon Hunt | 7b403bc | 2014-11-22 19:01:00 -0800 | [diff] [blame] | 812 | return noPx('width'); |
| 813 | } |
| 814 | function heightVal() { |
| 815 | return noPx('height'); |
Simon Hunt | a5e8914 | 2014-11-14 07:00:33 -0800 | [diff] [blame] | 816 | } |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 817 | |
| 818 | fp = { |
| 819 | id: id, |
| 820 | el: el, |
| 821 | pos: pos, |
Thomas Vachuska | 47635c6 | 2014-11-22 01:21:36 -0800 | [diff] [blame] | 822 | isVisible: function () { |
| 823 | return on; |
| 824 | }, |
Simon Hunt | a5e8914 | 2014-11-14 07:00:33 -0800 | [diff] [blame] | 825 | |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 826 | show: function () { |
| 827 | console.log('show pane: ' + id); |
Thomas Vachuska | 47635c6 | 2014-11-22 01:21:36 -0800 | [diff] [blame] | 828 | on = true; |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 829 | el.transition().duration(750) |
Simon Hunt | a5e8914 | 2014-11-14 07:00:33 -0800 | [diff] [blame] | 830 | .style(cfg.side, pxShow()) |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 831 | .style('opacity', 1); |
| 832 | }, |
| 833 | hide: function () { |
| 834 | console.log('hide pane: ' + id); |
Thomas Vachuska | 47635c6 | 2014-11-22 01:21:36 -0800 | [diff] [blame] | 835 | on = false; |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 836 | el.transition().duration(750) |
Simon Hunt | a5e8914 | 2014-11-14 07:00:33 -0800 | [diff] [blame] | 837 | .style(cfg.side, pxHide()) |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 838 | .style('opacity', 0); |
| 839 | }, |
| 840 | empty: function () { |
| 841 | return el.html(''); |
| 842 | }, |
| 843 | append: function (what) { |
| 844 | return el.append(what); |
Simon Hunt | a5e8914 | 2014-11-14 07:00:33 -0800 | [diff] [blame] | 845 | }, |
| 846 | width: function (w) { |
| 847 | if (w === undefined) { |
| 848 | return widthVal(); |
| 849 | } |
Simon Hunt | b82f690 | 2014-11-22 11:53:15 -0800 | [diff] [blame] | 850 | el.style('width', w + 'px'); |
Simon Hunt | 7b403bc | 2014-11-22 19:01:00 -0800 | [diff] [blame] | 851 | }, |
| 852 | height: function (h) { |
| 853 | if (h === undefined) { |
| 854 | return heightVal(); |
| 855 | } |
| 856 | el.style('height', h + 'px'); |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 857 | } |
| 858 | }; |
| 859 | fpanels[id] = fp; |
| 860 | return fp; |
| 861 | }, |
| 862 | |
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 863 | // TODO: it remains to be seen whether we keep this style of docs |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 864 | /** @api ui addView( vid, nid, cb ) |
| 865 | * Adds a view to the UI. |
| 866 | * <p> |
| 867 | * Views are loaded/unloaded into the view content pane at |
| 868 | * appropriate times, by the navigation framework. This method |
| 869 | * adds a view to the UI and returns a token object representing |
| 870 | * the view. A view's token is always passed as the first |
| 871 | * argument to each of the view's life-cycle callback functions. |
| 872 | * <p> |
| 873 | * Note that if the view is directly referenced by a nav-item, |
| 874 | * or in a group of views with one of those views referenced by |
| 875 | * a nav-item, then the <i>nid</i> argument can be omitted as |
| 876 | * the framework can infer it. |
| 877 | * <p> |
| 878 | * <i>cb</i> is a plain object containing callback functions: |
| 879 | * "preload", "reset", "load", "unload", "resize", "error". |
| 880 | * <pre> |
| 881 | * function myLoad(view, ctx) { ... } |
| 882 | * ... |
| 883 | * // short form... |
| 884 | * onos.ui.addView('viewId', { |
| 885 | * load: myLoad |
| 886 | * }); |
| 887 | * </pre> |
| 888 | * |
| 889 | * @param vid (string) [*] view ID (a unique DOM element id) |
| 890 | * @param nid (string) nav-item ID (a unique DOM element id) |
| 891 | * @param cb (object) [*] callbacks object |
| 892 | * @return the view token |
| 893 | */ |
| 894 | addView: function (vid, nid, cb) { |
| 895 | traceFn('addView', vid); |
| 896 | var view = new View(vid, nid, cb), |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 897 | token; |
| 898 | if (view.ok) { |
| 899 | views[vid] = view; |
| 900 | token = view.token(); |
| 901 | } else { |
| 902 | token = { vid: view.vid, bad: true }; |
| 903 | } |
| 904 | return token; |
| 905 | } |
| 906 | }; |
| 907 | |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 908 | // .......................................................... |
| 909 | // View API |
| 910 | |
Simon Hunt | bb282f5 | 2014-11-10 11:08:19 -0800 | [diff] [blame] | 911 | // TODO: deprecated |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 912 | viewApi = { |
| 913 | /** @api view empty( ) |
| 914 | * Empties the current view. |
| 915 | * <p> |
| 916 | * More specifically, removes all DOM elements from the |
| 917 | * current view's display div. |
| 918 | */ |
| 919 | empty: function () { |
| 920 | if (!current.view) { |
| 921 | return; |
| 922 | } |
| 923 | current.view.$div.html(''); |
| 924 | } |
| 925 | }; |
| 926 | |
| 927 | // .......................................................... |
| 928 | // Nav API |
| 929 | navApi = { |
| 930 | |
| 931 | }; |
| 932 | |
| 933 | // .......................................................... |
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 934 | // Library API |
| 935 | libApi = { |
| 936 | |
| 937 | }; |
| 938 | |
| 939 | // .......................................................... |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 940 | // Exported API |
| 941 | |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 942 | // function to be called from index.html to build the ONOS UI |
| 943 | function buildOnosUi() { |
| 944 | tsB = new Date().getTime(); |
| 945 | tsI = tsB - tsI; // initialization duration |
| 946 | |
| 947 | console.log('ONOS UI initialized in ' + tsI + 'ms'); |
| 948 | |
| 949 | if (built) { |
| 950 | throwError("ONOS UI already built!"); |
| 951 | } |
| 952 | built = true; |
| 953 | |
Simon Hunt | db9eb07 | 2014-11-04 19:12:46 -0800 | [diff] [blame] | 954 | $mastRadio = d3.select('#mastRadio'); |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 955 | |
| 956 | $(window).on('hashchange', hash); |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 957 | $(window).on('resize', resize); |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 958 | |
Simon Hunt | 0df1b1d | 2014-11-04 22:58:29 -0800 | [diff] [blame] | 959 | d3.select('body').on('keydown', keyIn); |
Thomas Vachuska | 65368e3 | 2014-11-08 16:10:20 -0800 | [diff] [blame] | 960 | setupGlobalKeys(); |
Simon Hunt | 0df1b1d | 2014-11-04 22:58:29 -0800 | [diff] [blame] | 961 | |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 962 | // Invoke hashchange callback to navigate to content |
| 963 | // indicated by the window location hash. |
| 964 | hash(); |
| 965 | |
| 966 | // If there were any build errors, report them |
| 967 | reportBuildErrors(); |
| 968 | } |
| 969 | |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 970 | // export the api and build-UI function |
| 971 | return { |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 972 | ui: uiApi, |
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 973 | lib: libApi, |
| 974 | //view: viewApi, |
Simon Hunt | 2524891 | 2014-11-04 11:25:48 -0800 | [diff] [blame] | 975 | nav: navApi, |
Simon Hunt | bb282f5 | 2014-11-10 11:08:19 -0800 | [diff] [blame] | 976 | buildUi: buildOnosUi, |
| 977 | exported: exported |
Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 978 | }; |
| 979 | }; |
| 980 | |
Simon Hunt | db9eb07 | 2014-11-04 19:12:46 -0800 | [diff] [blame] | 981 | }(jQuery)); |