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