Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -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 | /* |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 18 | ONOS GUI -- Quick Help Layer |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 19 | |
| 20 | Defines the key-map layer for the UI. Used to give user a list of |
| 21 | key bindings; both global, and for the current view. |
| 22 | |
| 23 | @author Simon Hunt |
| 24 | */ |
| 25 | |
| 26 | (function (onos){ |
| 27 | 'use strict'; |
| 28 | |
| 29 | // API's |
| 30 | var api = onos.api; |
| 31 | |
| 32 | // Config variables |
| 33 | var w = '100%', |
| 34 | h = '80%', |
Simon Hunt | 209155e | 2014-11-21 12:16:09 -0800 | [diff] [blame] | 35 | fade = 500, |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 36 | vb = '-200 0 400 400'; |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 37 | |
| 38 | // State variables |
| 39 | var data = []; |
| 40 | |
| 41 | // DOM elements and the like |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 42 | var qhdiv = d3.select('#quickhelp'), |
| 43 | svg = qhdiv.select('svg'), |
| 44 | pane, |
| 45 | rect, |
Simon Hunt | 8751434 | 2014-11-24 16:41:27 -0800 | [diff] [blame] | 46 | items, |
| 47 | keyAgg; |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 48 | |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 49 | // General functions |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 50 | function isA(a) { |
| 51 | return $.isArray(a) ? a : null; |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 52 | } |
| 53 | |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 54 | var keyDisp = { |
| 55 | equals: '=', |
| 56 | dash: '-', |
| 57 | slash: '/', |
Simon Hunt | 41effbe | 2014-12-04 09:41:44 -0800 | [diff] [blame] | 58 | backSlash: '\\', |
Thomas Vachuska | 1e68bdd | 2014-11-29 13:53:10 -0800 | [diff] [blame] | 59 | backQuote: '`', |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 60 | leftArrow: 'L-arrow', |
| 61 | upArrow: 'U-arrow', |
| 62 | rightArrow: 'R-arrow', |
| 63 | downArrow: 'D-arrow' |
| 64 | }; |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 65 | |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 66 | function cap(s) { |
| 67 | return s.replace(/^[a-z]/, function (m) { return m.toUpperCase(); }); |
| 68 | } |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 69 | |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 70 | function mkKeyDisp(id) { |
| 71 | var v = keyDisp[id] || id; |
| 72 | return cap(v); |
| 73 | } |
| 74 | |
| 75 | // layout configuration |
| 76 | var pad = 8, |
| 77 | offy = 45, |
Thomas Vachuska | 6810b788 | 2014-12-03 00:37:25 -0800 | [diff] [blame] | 78 | dy = 10, |
Simon Hunt | 8751434 | 2014-11-24 16:41:27 -0800 | [diff] [blame] | 79 | offDesc = 8; |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 80 | |
| 81 | // D3 magic |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 82 | function updateKeyItems() { |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 83 | var keyItems = items.selectAll('.keyItem') |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 84 | .data(data); |
| 85 | |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 86 | var entering = keyItems.enter() |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 87 | .append('g') |
| 88 | .attr({ |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 89 | id: function (d) { return d.id; }, |
| 90 | class: 'keyItem' |
| 91 | }); |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 92 | |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 93 | entering.each(function (d, i) { |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 94 | var el = d3.select(this), |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 95 | y = offy + dy * i; |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 96 | |
Simon Hunt | 8751434 | 2014-11-24 16:41:27 -0800 | [diff] [blame] | 97 | if (d.id[0] === '_') { |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 98 | el.append('line') |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 99 | .attr({ x1: 0, y1: y, x2: 1, y2: y}); |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 100 | } else { |
| 101 | el.append('text') |
| 102 | .text(d.key) |
| 103 | .attr({ |
| 104 | class: 'key', |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 105 | x: 0, |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 106 | y: y |
| 107 | }); |
Simon Hunt | 8751434 | 2014-11-24 16:41:27 -0800 | [diff] [blame] | 108 | // NOTE: used for sizing column width... |
| 109 | keyAgg.append('text').text(d.key).attr('class', 'key'); |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 110 | |
| 111 | el.append('text') |
| 112 | .text(d.desc) |
| 113 | .attr({ |
| 114 | class: 'desc', |
| 115 | x: offDesc, |
| 116 | y: y |
| 117 | }); |
| 118 | } |
| 119 | }); |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 120 | |
Simon Hunt | 8751434 | 2014-11-24 16:41:27 -0800 | [diff] [blame] | 121 | var kbox = keyAgg.node().getBBox(); |
| 122 | items.selectAll('.desc').attr('x', kbox.width + offDesc); |
| 123 | |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 124 | var box = items.node().getBBox(), |
| 125 | paneW = box.width + pad * 2, |
| 126 | paneH = box.height + offy; |
| 127 | |
Simon Hunt | 8751434 | 2014-11-24 16:41:27 -0800 | [diff] [blame] | 128 | items.selectAll('line').attr('x2', box.width); |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 129 | items.attr('transform', translate(-paneW/2, -pad)); |
| 130 | rect.attr({ |
| 131 | width: paneW, |
| 132 | height: paneH, |
| 133 | transform: translate(-paneW/2-pad, 0) |
| 134 | }); |
| 135 | } |
| 136 | |
| 137 | function translate(x, y) { |
| 138 | return 'translate(' + x + ',' + y + ')'; |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 139 | } |
| 140 | |
| 141 | function aggregateData(bindings) { |
Simon Hunt | a1162d8 | 2014-12-03 14:34:43 -0800 | [diff] [blame] | 142 | var hf = '_helpFormat', |
| 143 | gmap = d3.map(bindings.globalKeys), |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 144 | vmap = d3.map(bindings.viewKeys), |
Simon Hunt | a1162d8 | 2014-12-03 14:34:43 -0800 | [diff] [blame] | 145 | fmt = vmap.get(hf), |
Simon Hunt | 8751434 | 2014-11-24 16:41:27 -0800 | [diff] [blame] | 146 | vgest = bindings.viewGestures, |
Simon Hunt | a1162d8 | 2014-12-03 14:34:43 -0800 | [diff] [blame] | 147 | gkeys = gmap.keys(), |
| 148 | vkeys, |
Simon Hunt | 8751434 | 2014-11-24 16:41:27 -0800 | [diff] [blame] | 149 | sep = 0; |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 150 | |
Simon Hunt | a1162d8 | 2014-12-03 14:34:43 -0800 | [diff] [blame] | 151 | // filter out help format entry |
| 152 | vmap.remove(hf); |
| 153 | vkeys = vmap.keys(), |
| 154 | |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 155 | gkeys.sort(); |
| 156 | vkeys.sort(); |
| 157 | |
| 158 | data = []; |
| 159 | gkeys.forEach(function (k) { |
Simon Hunt | 8751434 | 2014-11-24 16:41:27 -0800 | [diff] [blame] | 160 | addItem('glob', k, gmap.get(k)); |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 161 | }); |
Simon Hunt | 8751434 | 2014-11-24 16:41:27 -0800 | [diff] [blame] | 162 | addItem('sep'); |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 163 | vkeys.forEach(function (k) { |
| 164 | addItem('view', k, vmap.get(k)); |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 165 | }); |
Simon Hunt | 8751434 | 2014-11-24 16:41:27 -0800 | [diff] [blame] | 166 | addItem('sep'); |
| 167 | vgest.forEach(function (g) { |
| 168 | if (g.length === 2) { |
| 169 | addItem('gest', g[0], g[1]); |
| 170 | } |
| 171 | }); |
| 172 | |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 173 | |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 174 | function addItem(type, k, d) { |
| 175 | var id = type + '-' + k, |
| 176 | a = isA(d), |
| 177 | desc = a && a[1]; |
Simon Hunt | 8751434 | 2014-11-24 16:41:27 -0800 | [diff] [blame] | 178 | |
| 179 | if (type === 'sep') { |
| 180 | data.push({ |
| 181 | id: '_' + sep++, |
| 182 | type: type |
| 183 | }); |
| 184 | } else if (type === 'gest') { |
| 185 | data.push({ |
| 186 | id: id, |
| 187 | type: type, |
| 188 | key: k, |
| 189 | desc: d |
| 190 | }); |
| 191 | } else if (desc) { |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 192 | data.push( |
| 193 | { |
| 194 | id: id, |
| 195 | type: type, |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 196 | key: mkKeyDisp(k), |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 197 | desc: desc |
| 198 | } |
| 199 | ); |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 200 | } |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 201 | } |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 202 | } |
| 203 | |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 204 | function popBind(bindings) { |
| 205 | pane = svg.append('g') |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 206 | .attr({ |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 207 | class: 'help', |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 208 | opacity: 0 |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 209 | }); |
| 210 | |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 211 | rect = pane.append('rect') |
| 212 | .attr('rx', 8); |
| 213 | |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 214 | pane.append('text') |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 215 | .text('Quick Help') |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 216 | .attr({ |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 217 | class: 'title', |
| 218 | dy: '1.2em', |
| 219 | transform: translate(-pad,0) |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 220 | }); |
| 221 | |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 222 | items = pane.append('g'); |
Simon Hunt | 8751434 | 2014-11-24 16:41:27 -0800 | [diff] [blame] | 223 | keyAgg = pane.append('g').style('visibility', 'hidden'); |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 224 | |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 225 | aggregateData(bindings); |
| 226 | updateKeyItems(); |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 227 | |
| 228 | _fade(1); |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 229 | } |
| 230 | |
| 231 | function fadeBindings() { |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 232 | _fade(0); |
| 233 | } |
| 234 | |
| 235 | function _fade(o) { |
| 236 | svg.selectAll('g.help') |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 237 | .transition() |
| 238 | .duration(fade) |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 239 | .attr('opacity', o); |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 240 | } |
| 241 | |
| 242 | function addSvg() { |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 243 | svg = qhdiv.append('svg') |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 244 | .attr({ |
| 245 | width: w, |
| 246 | height: h, |
| 247 | viewBox: vb |
| 248 | }); |
| 249 | } |
| 250 | |
| 251 | function removeSvg() { |
| 252 | svg.transition() |
| 253 | .delay(fade + 20) |
| 254 | .remove(); |
| 255 | } |
| 256 | |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 257 | function showQuickHelp(bindings) { |
| 258 | svg = qhdiv.select('svg'); |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 259 | if (svg.empty()) { |
| 260 | addSvg(); |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 261 | popBind(bindings); |
Simon Hunt | 56ef0fe | 2014-11-21 08:24:43 -0800 | [diff] [blame] | 262 | } else { |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 263 | hideQuickHelp(); |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 264 | } |
| 265 | } |
| 266 | |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 267 | function hideQuickHelp() { |
| 268 | svg = qhdiv.select('svg'); |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 269 | if (!svg.empty()) { |
| 270 | fadeBindings(); |
| 271 | removeSvg(); |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 272 | return true; |
| 273 | } |
| 274 | return false; |
| 275 | } |
| 276 | |
Simon Hunt | 5cef906 | 2014-11-24 15:24:35 -0800 | [diff] [blame] | 277 | onos.ui.addLib('quickHelp', { |
| 278 | show: showQuickHelp, |
| 279 | hide: hideQuickHelp |
Simon Hunt | 988c6fc | 2014-11-20 17:43:03 -0800 | [diff] [blame] | 280 | }); |
| 281 | }(ONOS)); |