Bri Prebilic Cole | 2e3f856 | 2015-02-17 17:21:31 -0800 | [diff] [blame] | 1 | /* |
Brian O'Connor | a09fe5b | 2017-08-03 21:12:30 -0700 | [diff] [blame] | 2 | * Copyright 2015-present Open Networking Foundation |
Bri Prebilic Cole | 2e3f856 | 2015-02-17 17:21:31 -0800 | [diff] [blame] | 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 -- Widget -- Toolbar Service |
| 19 | */ |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 20 | // TODO: Augment service to allow toolbars to exist on right edge of screen |
Simon Hunt | 8d22c4b | 2015-08-06 16:24:43 -0700 | [diff] [blame] | 21 | // TODO: also - make toolbar more object aware (rows etc.) |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 22 | |
| 23 | |
Bri Prebilic Cole | 2e3f856 | 2015-02-17 17:21:31 -0800 | [diff] [blame] | 24 | (function () { |
| 25 | 'use strict'; |
| 26 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 27 | // injected refs |
Bri Prebilic Cole | 5000a75 | 2015-02-23 17:20:53 -0800 | [diff] [blame] | 28 | var $log, fs, ps, bns, is; |
Bri Prebilic Cole | 2e3f856 | 2015-02-17 17:21:31 -0800 | [diff] [blame] | 29 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 30 | // configuration |
| 31 | var arrowSize = 10, |
| 32 | sepWidth = 6, |
Bri Prebilic Cole | 5000a75 | 2015-02-23 17:20:53 -0800 | [diff] [blame] | 33 | defaultSettings = { |
| 34 | edge: 'left', |
Bri Prebilic Cole | 258f046 | 2015-02-25 14:48:50 -0800 | [diff] [blame] | 35 | width: 20, |
Bri Prebilic Cole | be8b9a4 | 2015-02-24 12:12:00 -0800 | [diff] [blame] | 36 | margin: 0, |
| 37 | hideMargin: -20, |
Bri Prebilic Cole | d874546 | 2015-06-01 16:08:57 -0700 | [diff] [blame] | 38 | top: 'auto', |
| 39 | bottom: '10px', |
Bri Prebilic Cole | 258f046 | 2015-02-25 14:48:50 -0800 | [diff] [blame] | 40 | fade: false, |
Steven Burrows | 1c2a968 | 2017-07-14 16:52:46 +0100 | [diff] [blame] | 41 | shown: false, |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 42 | }; |
Bri Prebilic Cole | 08381ce | 2015-02-20 17:01:50 -0800 | [diff] [blame] | 43 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 44 | // internal state |
| 45 | var tbars = {}; |
| 46 | |
Bri Prebilic Cole | 751804e | 2015-02-18 15:44:28 -0800 | [diff] [blame] | 47 | |
Bri Prebilic Cole | 5000a75 | 2015-02-23 17:20:53 -0800 | [diff] [blame] | 48 | // === Helper functions -------------------------------------- |
| 49 | |
Bri Prebilic Cole | be8b9a4 | 2015-02-24 12:12:00 -0800 | [diff] [blame] | 50 | // translate uses 50 because the svg viewbox is 50 |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 51 | function rotateArrowLeft(adiv) { |
| 52 | adiv.select('g') |
Bri Prebilic Cole | 5000a75 | 2015-02-23 17:20:53 -0800 | [diff] [blame] | 53 | .attr('transform', 'translate(0 50) rotate(-90)'); |
| 54 | } |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 55 | function rotateArrowRight(adiv) { |
| 56 | adiv.select('g') |
Bri Prebilic Cole | be8b9a4 | 2015-02-24 12:12:00 -0800 | [diff] [blame] | 57 | .attr('transform', 'translate(50 0) rotate(90)'); |
Bri Prebilic Cole | 5000a75 | 2015-02-23 17:20:53 -0800 | [diff] [blame] | 58 | } |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 59 | |
| 60 | function createArrow(panel) { |
| 61 | var arrowDiv = panel.append('div') |
Bri Prebilic Cole | dd80557 | 2015-08-04 16:54:08 -0700 | [diff] [blame] | 62 | .classed('tbar-arrow', true); |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 63 | is.loadIcon(arrowDiv, 'triangleUp', arrowSize, true); |
| 64 | return arrowDiv; |
Bri Prebilic Cole | 5000a75 | 2015-02-23 17:20:53 -0800 | [diff] [blame] | 65 | } |
| 66 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 67 | function warn(msg, id) { |
| 68 | $log.warn('createToolbar: ' + msg + ': [' + id + ']'); |
| 69 | return null; |
Bri Prebilic Cole | 08381ce | 2015-02-20 17:01:50 -0800 | [diff] [blame] | 70 | } |
| 71 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 72 | // ================================== |
Bri Prebilic Cole | 5000a75 | 2015-02-23 17:20:53 -0800 | [diff] [blame] | 73 | |
| 74 | function createToolbar(id, opts) { |
Simon Hunt | d3bcef3 | 2015-02-27 18:36:42 -0800 | [diff] [blame] | 75 | if (!id) return warn('no ID given'); |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 76 | if (tbars[id]) return warn('duplicate ID given', id); |
Bri Prebilic Cole | 08381ce | 2015-02-20 17:01:50 -0800 | [diff] [blame] | 77 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 78 | var settings = angular.extend({}, defaultSettings, fs.isO(opts)), |
Simon Hunt | d3bcef3 | 2015-02-27 18:36:42 -0800 | [diff] [blame] | 79 | items = {}, |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 80 | tbid = 'toolbar-' + id, |
| 81 | panel = ps.createPanel(tbid, settings), |
| 82 | arrowDiv = createArrow(panel), |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 83 | currentRow = panel.append('div').classed('tbar-row', true), |
Steven Burrows | 1c2a968 | 2017-07-14 16:52:46 +0100 | [diff] [blame] | 84 | rowButtonIds = [], // for removable buttons |
| 85 | tbWidth = arrowSize + 2, // empty toolbar width |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 86 | maxWidth = panel.width(); |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 87 | |
| 88 | arrowDiv.on('click', toggle); |
| 89 | |
| 90 | // add a descriptor for this toolbar |
| 91 | tbars[id] = { |
| 92 | settings: settings, |
Simon Hunt | d3bcef3 | 2015-02-27 18:36:42 -0800 | [diff] [blame] | 93 | items: items, |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 94 | panel: panel, |
Steven Burrows | 1c2a968 | 2017-07-14 16:52:46 +0100 | [diff] [blame] | 95 | panelId: tbid, |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 96 | }; |
| 97 | |
| 98 | panel.classed('toolbar', true) |
Bri Prebilic Cole | d874546 | 2015-06-01 16:08:57 -0700 | [diff] [blame] | 99 | .style('top', settings.top) |
| 100 | .style('bottom', settings.bottom); |
Bri Prebilic Cole | 5000a75 | 2015-02-23 17:20:53 -0800 | [diff] [blame] | 101 | |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 102 | // Helper functions |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 103 | |
Simon Hunt | d3bcef3 | 2015-02-27 18:36:42 -0800 | [diff] [blame] | 104 | function dupId(id, caller) { |
| 105 | if (items[id]) { |
| 106 | $log.warn(caller + ': duplicate ID:', id); |
| 107 | return true; |
| 108 | } |
| 109 | return false; |
| 110 | } |
| 111 | |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 112 | function adjustWidth(btnWidth) { |
Simon Hunt | a976134 | 2016-06-10 18:02:53 -0700 | [diff] [blame] | 113 | // 0.1 fudge for rounding error |
| 114 | if (fs.noPxStyle(currentRow, 'width') + 0.1 >= maxWidth) { |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 115 | tbWidth += btnWidth; |
| 116 | maxWidth = tbWidth; |
| 117 | } |
| 118 | panel.width(tbWidth); |
| 119 | } |
| 120 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 121 | // API functions |
| 122 | |
| 123 | function addButton(id, gid, cb, tooltip) { |
Simon Hunt | d3bcef3 | 2015-02-27 18:36:42 -0800 | [diff] [blame] | 124 | if (dupId(id, 'addButton')) return null; |
| 125 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 126 | var bid = tbid + '-' + id, |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 127 | btn = bns.button(currentRow, bid, gid, cb, tooltip); |
Simon Hunt | d3bcef3 | 2015-02-27 18:36:42 -0800 | [diff] [blame] | 128 | |
| 129 | items[id] = btn; |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 130 | adjustWidth(btn.width()); |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 131 | return btn; |
| 132 | } |
| 133 | |
| 134 | function addToggle(id, gid, initState, cb, tooltip) { |
Simon Hunt | d3bcef3 | 2015-02-27 18:36:42 -0800 | [diff] [blame] | 135 | if (dupId(id, 'addToggle')) return null; |
| 136 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 137 | var tid = tbid + '-' + id, |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 138 | tog = bns.toggle(currentRow, tid, gid, initState, cb, tooltip); |
Simon Hunt | d3bcef3 | 2015-02-27 18:36:42 -0800 | [diff] [blame] | 139 | |
| 140 | items[id] = tog; |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 141 | adjustWidth(tog.width()); |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 142 | return tog; |
| 143 | } |
| 144 | |
| 145 | function addRadioSet(id, rset) { |
Simon Hunt | d3bcef3 | 2015-02-27 18:36:42 -0800 | [diff] [blame] | 146 | if (dupId(id, 'addRadioSet')) return null; |
| 147 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 148 | var rid = tbid + '-' + id, |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 149 | rad = bns.radioSet(currentRow, rid, rset); |
Simon Hunt | d3bcef3 | 2015-02-27 18:36:42 -0800 | [diff] [blame] | 150 | |
| 151 | items[id] = rad; |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 152 | adjustWidth(rad.width()); |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 153 | return rad; |
| 154 | } |
| 155 | |
| 156 | function addSeparator() { |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 157 | currentRow.append('div') |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 158 | .classed('separator', true); |
| 159 | tbWidth += sepWidth; |
| 160 | } |
| 161 | |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 162 | function addRow() { |
Bri Prebilic Cole | db4b87b | 2015-03-25 09:18:42 -0700 | [diff] [blame] | 163 | if (currentRow.select('div').empty()) { |
| 164 | return null; |
| 165 | } else { |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 166 | panel.append('br'); |
| 167 | currentRow = panel.append('div').classed('tbar-row', true); |
Simon Hunt | 8d22c4b | 2015-08-06 16:24:43 -0700 | [diff] [blame] | 168 | |
| 169 | // return API to allow caller more access to the row |
| 170 | return { |
| 171 | clear: rowClear, |
| 172 | setText: rowSetText, |
| 173 | addButton: rowAddButton, |
Steven Burrows | 1c2a968 | 2017-07-14 16:52:46 +0100 | [diff] [blame] | 174 | classed: rowClassed, |
Simon Hunt | 8d22c4b | 2015-08-06 16:24:43 -0700 | [diff] [blame] | 175 | }; |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 176 | } |
| 177 | } |
| 178 | |
Simon Hunt | 8d22c4b | 2015-08-06 16:24:43 -0700 | [diff] [blame] | 179 | function rowClear() { |
| 180 | currentRow.selectAll('*').remove(); |
| 181 | rowButtonIds.forEach(function (bid) { |
| 182 | delete items[bid]; |
| 183 | }); |
| 184 | rowButtonIds = []; |
| 185 | } |
| 186 | |
| 187 | // installs a div with text into the button row |
| 188 | function rowSetText(text) { |
| 189 | rowClear(); |
| 190 | currentRow.append('div').classed('tbar-row-text', true) |
Simon Hunt | 239f09e | 2017-05-18 13:10:09 -0700 | [diff] [blame] | 191 | .text(text); |
Simon Hunt | 8d22c4b | 2015-08-06 16:24:43 -0700 | [diff] [blame] | 192 | } |
| 193 | |
| 194 | function rowAddButton(id, gid, cb, tooltip) { |
| 195 | var b = addButton(id, gid, cb, tooltip); |
| 196 | if (b) { |
| 197 | rowButtonIds.push(id); |
| 198 | } |
| 199 | } |
| 200 | |
| 201 | function rowClassed(classes, bool) { |
| 202 | currentRow.classed(classes, bool); |
| 203 | } |
| 204 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 205 | function show(cb) { |
| 206 | rotateArrowLeft(arrowDiv); |
| 207 | panel.show(cb); |
| 208 | } |
| 209 | |
| 210 | function hide(cb) { |
| 211 | rotateArrowRight(arrowDiv); |
| 212 | panel.hide(cb); |
| 213 | } |
| 214 | |
| 215 | function toggle(cb) { |
| 216 | if (panel.isVisible()) { |
| 217 | hide(cb); |
| 218 | } else { |
| 219 | show(cb); |
| 220 | } |
| 221 | } |
Bri Prebilic Cole | 08381ce | 2015-02-20 17:01:50 -0800 | [diff] [blame] | 222 | |
Thomas Vachuska | 0af2691 | 2016-03-21 21:37:30 -0700 | [diff] [blame] | 223 | function isVisible() { |
| 224 | return panel.isVisible(); |
| 225 | } |
| 226 | |
Bri Prebilic Cole | 08381ce | 2015-02-20 17:01:50 -0800 | [diff] [blame] | 227 | return { |
Bri Prebilic Cole | c440332 | 2015-02-23 10:29:22 -0800 | [diff] [blame] | 228 | addButton: addButton, |
| 229 | addToggle: addToggle, |
Bri Prebilic Cole | 08381ce | 2015-02-20 17:01:50 -0800 | [diff] [blame] | 230 | addRadioSet: addRadioSet, |
Bri Prebilic Cole | 5000a75 | 2015-02-23 17:20:53 -0800 | [diff] [blame] | 231 | addSeparator: addSeparator, |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 232 | addRow: addRow, |
Bri Prebilic Cole | 5000a75 | 2015-02-23 17:20:53 -0800 | [diff] [blame] | 233 | |
| 234 | show: show, |
| 235 | hide: hide, |
Thomas Vachuska | 0af2691 | 2016-03-21 21:37:30 -0700 | [diff] [blame] | 236 | toggle: toggle, |
Steven Burrows | 1c2a968 | 2017-07-14 16:52:46 +0100 | [diff] [blame] | 237 | isVisible: isVisible, |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 238 | }; |
Bri Prebilic Cole | 08381ce | 2015-02-20 17:01:50 -0800 | [diff] [blame] | 239 | } |
Simon Hunt | 6925286 | 2015-02-26 11:26:08 -0800 | [diff] [blame] | 240 | |
Bri Prebilic Cole | 08381ce | 2015-02-20 17:01:50 -0800 | [diff] [blame] | 241 | function destroyToolbar(id) { |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 242 | var tb = tbars[id]; |
| 243 | delete tbars[id]; |
Bri Prebilic Cole | 5000a75 | 2015-02-23 17:20:53 -0800 | [diff] [blame] | 244 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 245 | if (tb) { |
| 246 | ps.destroyPanel(tb.panelId); |
Bri Prebilic Cole | 258f046 | 2015-02-25 14:48:50 -0800 | [diff] [blame] | 247 | } |
| 248 | } |
Bri Prebilic Cole | 2e3f856 | 2015-02-17 17:21:31 -0800 | [diff] [blame] | 249 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 250 | // === Module Definition === |
| 251 | |
Bri Prebilic Cole | 2e3f856 | 2015-02-17 17:21:31 -0800 | [diff] [blame] | 252 | angular.module('onosWidget') |
Simon Hunt | 6925286 | 2015-02-26 11:26:08 -0800 | [diff] [blame] | 253 | .factory('ToolbarService', |
| 254 | ['$log', 'FnService', 'PanelService', 'ButtonService', 'IconService', |
Bri Prebilic Cole | 2e3f856 | 2015-02-17 17:21:31 -0800 | [diff] [blame] | 255 | |
Simon Hunt | 6925286 | 2015-02-26 11:26:08 -0800 | [diff] [blame] | 256 | function (_$log_, _fs_, _ps_, _bns_, _is_) { |
| 257 | $log = _$log_; |
| 258 | fs = _fs_; |
| 259 | ps = _ps_; |
| 260 | bns = _bns_; |
| 261 | is = _is_; |
| 262 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 263 | // this function is only used in testing |
| 264 | function init() { |
| 265 | tbars = {}; |
| 266 | } |
| 267 | |
Simon Hunt | 6925286 | 2015-02-26 11:26:08 -0800 | [diff] [blame] | 268 | return { |
| 269 | init: init, |
| 270 | createToolbar: createToolbar, |
Steven Burrows | 1c2a968 | 2017-07-14 16:52:46 +0100 | [diff] [blame] | 271 | destroyToolbar: destroyToolbar, |
Simon Hunt | 6925286 | 2015-02-26 11:26:08 -0800 | [diff] [blame] | 272 | }; |
| 273 | }]); |
Bri Prebilic Cole | c440332 | 2015-02-23 10:29:22 -0800 | [diff] [blame] | 274 | }()); |