Bri Prebilic Cole | 2e3f856 | 2015-02-17 17:21:31 -0800 | [diff] [blame] | 1 | /* |
| 2 | * Copyright 2015 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 -- 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 |
| 21 | |
| 22 | |
Bri Prebilic Cole | 2e3f856 | 2015-02-17 17:21:31 -0800 | [diff] [blame] | 23 | (function () { |
| 24 | 'use strict'; |
| 25 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 26 | // injected refs |
Bri Prebilic Cole | 5000a75 | 2015-02-23 17:20:53 -0800 | [diff] [blame] | 27 | var $log, fs, ps, bns, is; |
Bri Prebilic Cole | 2e3f856 | 2015-02-17 17:21:31 -0800 | [diff] [blame] | 28 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 29 | // configuration |
| 30 | var arrowSize = 10, |
| 31 | sepWidth = 6, |
Bri Prebilic Cole | 5000a75 | 2015-02-23 17:20:53 -0800 | [diff] [blame] | 32 | defaultSettings = { |
| 33 | edge: 'left', |
Bri Prebilic Cole | 258f046 | 2015-02-25 14:48:50 -0800 | [diff] [blame] | 34 | width: 20, |
Bri Prebilic Cole | be8b9a4 | 2015-02-24 12:12:00 -0800 | [diff] [blame] | 35 | margin: 0, |
| 36 | hideMargin: -20, |
Bri Prebilic Cole | d874546 | 2015-06-01 16:08:57 -0700 | [diff] [blame] | 37 | top: 'auto', |
| 38 | bottom: '10px', |
Bri Prebilic Cole | 258f046 | 2015-02-25 14:48:50 -0800 | [diff] [blame] | 39 | fade: false, |
| 40 | shown: false |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 41 | }; |
Bri Prebilic Cole | 08381ce | 2015-02-20 17:01:50 -0800 | [diff] [blame] | 42 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 43 | // internal state |
| 44 | var tbars = {}; |
| 45 | |
Bri Prebilic Cole | 751804e | 2015-02-18 15:44:28 -0800 | [diff] [blame] | 46 | |
Bri Prebilic Cole | 5000a75 | 2015-02-23 17:20:53 -0800 | [diff] [blame] | 47 | // === Helper functions -------------------------------------- |
| 48 | |
Bri Prebilic Cole | be8b9a4 | 2015-02-24 12:12:00 -0800 | [diff] [blame] | 49 | // translate uses 50 because the svg viewbox is 50 |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 50 | function rotateArrowLeft(adiv) { |
| 51 | adiv.select('g') |
Bri Prebilic Cole | 5000a75 | 2015-02-23 17:20:53 -0800 | [diff] [blame] | 52 | .attr('transform', 'translate(0 50) rotate(-90)'); |
| 53 | } |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 54 | function rotateArrowRight(adiv) { |
| 55 | adiv.select('g') |
Bri Prebilic Cole | be8b9a4 | 2015-02-24 12:12:00 -0800 | [diff] [blame] | 56 | .attr('transform', 'translate(50 0) rotate(90)'); |
Bri Prebilic Cole | 5000a75 | 2015-02-23 17:20:53 -0800 | [diff] [blame] | 57 | } |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 58 | |
| 59 | function createArrow(panel) { |
| 60 | var arrowDiv = panel.append('div') |
Bri Prebilic Cole | a1bb7a2 | 2015-08-04 16:54:08 -0700 | [diff] [blame^] | 61 | .classed('tbar-arrow', true); |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 62 | is.loadIcon(arrowDiv, 'triangleUp', arrowSize, true); |
| 63 | return arrowDiv; |
Bri Prebilic Cole | 5000a75 | 2015-02-23 17:20:53 -0800 | [diff] [blame] | 64 | } |
| 65 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 66 | function warn(msg, id) { |
| 67 | $log.warn('createToolbar: ' + msg + ': [' + id + ']'); |
| 68 | return null; |
Bri Prebilic Cole | 08381ce | 2015-02-20 17:01:50 -0800 | [diff] [blame] | 69 | } |
| 70 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 71 | // ================================== |
Bri Prebilic Cole | 5000a75 | 2015-02-23 17:20:53 -0800 | [diff] [blame] | 72 | |
| 73 | function createToolbar(id, opts) { |
Simon Hunt | d3bcef3 | 2015-02-27 18:36:42 -0800 | [diff] [blame] | 74 | if (!id) return warn('no ID given'); |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 75 | if (tbars[id]) return warn('duplicate ID given', id); |
Bri Prebilic Cole | 08381ce | 2015-02-20 17:01:50 -0800 | [diff] [blame] | 76 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 77 | var settings = angular.extend({}, defaultSettings, fs.isO(opts)), |
Simon Hunt | d3bcef3 | 2015-02-27 18:36:42 -0800 | [diff] [blame] | 78 | items = {}, |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 79 | tbid = 'toolbar-' + id, |
| 80 | panel = ps.createPanel(tbid, settings), |
| 81 | arrowDiv = createArrow(panel), |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 82 | currentRow = panel.append('div').classed('tbar-row', true), |
| 83 | tbWidth = arrowSize + 2, // empty toolbar width |
| 84 | maxWidth = panel.width(); |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 85 | |
| 86 | arrowDiv.on('click', toggle); |
| 87 | |
| 88 | // add a descriptor for this toolbar |
| 89 | tbars[id] = { |
| 90 | settings: settings, |
Simon Hunt | d3bcef3 | 2015-02-27 18:36:42 -0800 | [diff] [blame] | 91 | items: items, |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 92 | panel: panel, |
| 93 | panelId: tbid |
| 94 | }; |
| 95 | |
| 96 | panel.classed('toolbar', true) |
Bri Prebilic Cole | d874546 | 2015-06-01 16:08:57 -0700 | [diff] [blame] | 97 | .style('top', settings.top) |
| 98 | .style('bottom', settings.bottom); |
Bri Prebilic Cole | 5000a75 | 2015-02-23 17:20:53 -0800 | [diff] [blame] | 99 | |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 100 | // Helper functions |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 101 | |
Simon Hunt | d3bcef3 | 2015-02-27 18:36:42 -0800 | [diff] [blame] | 102 | function dupId(id, caller) { |
| 103 | if (items[id]) { |
| 104 | $log.warn(caller + ': duplicate ID:', id); |
| 105 | return true; |
| 106 | } |
| 107 | return false; |
| 108 | } |
| 109 | |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 110 | function adjustWidth(btnWidth) { |
Bri Prebilic Cole | 08d08d4 | 2015-04-01 14:37:02 -0700 | [diff] [blame] | 111 | if (fs.noPxStyle(currentRow, 'width') >= maxWidth) { |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 112 | tbWidth += btnWidth; |
| 113 | maxWidth = tbWidth; |
| 114 | } |
| 115 | panel.width(tbWidth); |
| 116 | } |
| 117 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 118 | // API functions |
| 119 | |
| 120 | function addButton(id, gid, cb, tooltip) { |
Simon Hunt | d3bcef3 | 2015-02-27 18:36:42 -0800 | [diff] [blame] | 121 | if (dupId(id, 'addButton')) return null; |
| 122 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 123 | var bid = tbid + '-' + id, |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 124 | btn = bns.button(currentRow, bid, gid, cb, tooltip); |
Simon Hunt | d3bcef3 | 2015-02-27 18:36:42 -0800 | [diff] [blame] | 125 | |
| 126 | items[id] = btn; |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 127 | adjustWidth(btn.width()); |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 128 | return btn; |
| 129 | } |
| 130 | |
| 131 | function addToggle(id, gid, initState, cb, tooltip) { |
Simon Hunt | d3bcef3 | 2015-02-27 18:36:42 -0800 | [diff] [blame] | 132 | if (dupId(id, 'addToggle')) return null; |
| 133 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 134 | var tid = tbid + '-' + id, |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 135 | tog = bns.toggle(currentRow, tid, gid, initState, cb, tooltip); |
Simon Hunt | d3bcef3 | 2015-02-27 18:36:42 -0800 | [diff] [blame] | 136 | |
| 137 | items[id] = tog; |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 138 | adjustWidth(tog.width()); |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 139 | return tog; |
| 140 | } |
| 141 | |
| 142 | function addRadioSet(id, rset) { |
Simon Hunt | d3bcef3 | 2015-02-27 18:36:42 -0800 | [diff] [blame] | 143 | if (dupId(id, 'addRadioSet')) return null; |
| 144 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 145 | var rid = tbid + '-' + id, |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 146 | rad = bns.radioSet(currentRow, rid, rset); |
Simon Hunt | d3bcef3 | 2015-02-27 18:36:42 -0800 | [diff] [blame] | 147 | |
| 148 | items[id] = rad; |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 149 | adjustWidth(rad.width()); |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 150 | return rad; |
| 151 | } |
| 152 | |
| 153 | function addSeparator() { |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 154 | currentRow.append('div') |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 155 | .classed('separator', true); |
| 156 | tbWidth += sepWidth; |
| 157 | } |
| 158 | |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 159 | function addRow() { |
Bri Prebilic Cole | db4b87b | 2015-03-25 09:18:42 -0700 | [diff] [blame] | 160 | if (currentRow.select('div').empty()) { |
| 161 | return null; |
| 162 | } else { |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 163 | panel.append('br'); |
| 164 | currentRow = panel.append('div').classed('tbar-row', true); |
| 165 | } |
| 166 | } |
| 167 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 168 | function show(cb) { |
| 169 | rotateArrowLeft(arrowDiv); |
| 170 | panel.show(cb); |
| 171 | } |
| 172 | |
| 173 | function hide(cb) { |
| 174 | rotateArrowRight(arrowDiv); |
| 175 | panel.hide(cb); |
| 176 | } |
| 177 | |
| 178 | function toggle(cb) { |
| 179 | if (panel.isVisible()) { |
| 180 | hide(cb); |
| 181 | } else { |
| 182 | show(cb); |
| 183 | } |
| 184 | } |
Bri Prebilic Cole | 08381ce | 2015-02-20 17:01:50 -0800 | [diff] [blame] | 185 | |
Bri Prebilic Cole | 08381ce | 2015-02-20 17:01:50 -0800 | [diff] [blame] | 186 | return { |
Bri Prebilic Cole | c440332 | 2015-02-23 10:29:22 -0800 | [diff] [blame] | 187 | addButton: addButton, |
| 188 | addToggle: addToggle, |
Bri Prebilic Cole | 08381ce | 2015-02-20 17:01:50 -0800 | [diff] [blame] | 189 | addRadioSet: addRadioSet, |
Bri Prebilic Cole | 5000a75 | 2015-02-23 17:20:53 -0800 | [diff] [blame] | 190 | addSeparator: addSeparator, |
Bri Prebilic Cole | 812f6c0 | 2015-03-24 17:10:33 -0700 | [diff] [blame] | 191 | addRow: addRow, |
Bri Prebilic Cole | 5000a75 | 2015-02-23 17:20:53 -0800 | [diff] [blame] | 192 | |
| 193 | show: show, |
| 194 | hide: hide, |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 195 | toggle: toggle |
| 196 | }; |
Bri Prebilic Cole | 08381ce | 2015-02-20 17:01:50 -0800 | [diff] [blame] | 197 | } |
Simon Hunt | 6925286 | 2015-02-26 11:26:08 -0800 | [diff] [blame] | 198 | |
Bri Prebilic Cole | 08381ce | 2015-02-20 17:01:50 -0800 | [diff] [blame] | 199 | function destroyToolbar(id) { |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 200 | var tb = tbars[id]; |
| 201 | delete tbars[id]; |
Bri Prebilic Cole | 5000a75 | 2015-02-23 17:20:53 -0800 | [diff] [blame] | 202 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 203 | if (tb) { |
| 204 | ps.destroyPanel(tb.panelId); |
Bri Prebilic Cole | 258f046 | 2015-02-25 14:48:50 -0800 | [diff] [blame] | 205 | } |
| 206 | } |
Bri Prebilic Cole | 2e3f856 | 2015-02-17 17:21:31 -0800 | [diff] [blame] | 207 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 208 | // === Module Definition === |
| 209 | |
Bri Prebilic Cole | 2e3f856 | 2015-02-17 17:21:31 -0800 | [diff] [blame] | 210 | angular.module('onosWidget') |
Simon Hunt | 6925286 | 2015-02-26 11:26:08 -0800 | [diff] [blame] | 211 | .factory('ToolbarService', |
| 212 | ['$log', 'FnService', 'PanelService', 'ButtonService', 'IconService', |
Bri Prebilic Cole | 2e3f856 | 2015-02-17 17:21:31 -0800 | [diff] [blame] | 213 | |
Simon Hunt | 6925286 | 2015-02-26 11:26:08 -0800 | [diff] [blame] | 214 | function (_$log_, _fs_, _ps_, _bns_, _is_) { |
| 215 | $log = _$log_; |
| 216 | fs = _fs_; |
| 217 | ps = _ps_; |
| 218 | bns = _bns_; |
| 219 | is = _is_; |
| 220 | |
Simon Hunt | df51001 | 2015-02-26 16:34:37 -0800 | [diff] [blame] | 221 | // this function is only used in testing |
| 222 | function init() { |
| 223 | tbars = {}; |
| 224 | } |
| 225 | |
Simon Hunt | 6925286 | 2015-02-26 11:26:08 -0800 | [diff] [blame] | 226 | return { |
| 227 | init: init, |
| 228 | createToolbar: createToolbar, |
| 229 | destroyToolbar: destroyToolbar |
| 230 | }; |
| 231 | }]); |
Bri Prebilic Cole | c440332 | 2015-02-23 10:29:22 -0800 | [diff] [blame] | 232 | }()); |