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