GUI --Base Tooltip Service created.
- tips will appear above the mouse when element is hovered over - tips disappear after mouse leaves element - positioning of tooltip is still WIP, testing of it was run in Sample View Change-Id: Ic3be1235bf8d2d4bbf473f965e3a1f8c79ce9fc6
Showing
7 changed files
with
228 additions
and
8 deletions
... | @@ -21,7 +21,7 @@ | ... | @@ -21,7 +21,7 @@ |
21 | 'use strict'; | 21 | 'use strict'; |
22 | 22 | ||
23 | // injected refs | 23 | // injected refs |
24 | - var $log, fs, is; | 24 | + var $log, fs, is, tts; |
25 | 25 | ||
26 | // configuration | 26 | // configuration |
27 | var btnSize = 25, | 27 | var btnSize = 25, |
... | @@ -49,6 +49,11 @@ | ... | @@ -49,6 +49,11 @@ |
49 | return btnSize + 2 * btnPadding; | 49 | return btnSize + 2 * btnPadding; |
50 | } | 50 | } |
51 | 51 | ||
52 | + function addTooltip(elem, tooltip) { | ||
53 | + elem.on('mouseover', function () { tts.showTooltip(this, tooltip); }); | ||
54 | + elem.on('mouseout', function () { tts.cancelTooltip(this); }); | ||
55 | + } | ||
56 | + | ||
52 | 57 | ||
53 | // === BUTTON ================================================= | 58 | // === BUTTON ================================================= |
54 | 59 | ||
... | @@ -64,6 +69,7 @@ | ... | @@ -64,6 +69,7 @@ |
64 | cbFnc = fs.isF(cb) || noop; | 69 | cbFnc = fs.isF(cb) || noop; |
65 | 70 | ||
66 | is.loadIcon(btnDiv, gid, btnSize, true); | 71 | is.loadIcon(btnDiv, gid, btnSize, true); |
72 | + if (tooltip) { addTooltip(btnDiv, tooltip); } | ||
67 | 73 | ||
68 | btnDiv.on('click', cbFnc); | 74 | btnDiv.on('click', cbFnc); |
69 | 75 | ||
... | @@ -91,6 +97,7 @@ | ... | @@ -91,6 +97,7 @@ |
91 | 97 | ||
92 | is.loadIcon(togDiv, gid, btnSize, true); | 98 | is.loadIcon(togDiv, gid, btnSize, true); |
93 | togDiv.classed('selected', sel); | 99 | togDiv.classed('selected', sel); |
100 | + if (tooltip) { addTooltip(togDiv, tooltip); } | ||
94 | 101 | ||
95 | function _toggle(b, nocb) { | 102 | function _toggle(b, nocb) { |
96 | sel = (b === undefined) ? !sel : !!b; | 103 | sel = (b === undefined) ? !sel : !!b; |
... | @@ -180,6 +187,7 @@ | ... | @@ -180,6 +187,7 @@ |
180 | rbdiv.classed('selected', initSel); | 187 | rbdiv.classed('selected', initSel); |
181 | rbdiv.on('click', rbclick); | 188 | rbdiv.on('click', rbclick); |
182 | is.loadIcon(rbdiv, btn.gid, btnSize, true); | 189 | is.loadIcon(rbdiv, btn.gid, btnSize, true); |
190 | + if (btn.tooltip) { addTooltip(rbdiv, btn.tooltip); } | ||
183 | angular.extend(btn, { | 191 | angular.extend(btn, { |
184 | el: rbdiv, | 192 | el: rbdiv, |
185 | id: rid, | 193 | id: rid, |
... | @@ -243,12 +251,13 @@ | ... | @@ -243,12 +251,13 @@ |
243 | 251 | ||
244 | angular.module('onosWidget') | 252 | angular.module('onosWidget') |
245 | .factory('ButtonService', | 253 | .factory('ButtonService', |
246 | - ['$log', 'FnService', 'IconService', | 254 | + ['$log', 'FnService', 'IconService', 'TooltipService', |
247 | 255 | ||
248 | - function (_$log_, _fs_, _is_) { | 256 | + function (_$log_, _fs_, _is_, _tts_) { |
249 | $log = _$log_; | 257 | $log = _$log_; |
250 | fs = _fs_; | 258 | fs = _fs_; |
251 | is = _is_; | 259 | is = _is_; |
260 | + tts = _tts_; | ||
252 | 261 | ||
253 | return { | 262 | return { |
254 | button: button, | 263 | button: button, | ... | ... |
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 -- Tooltip Service -- CSS file | ||
19 | + */ | ||
20 | + | ||
21 | +#tooltip { | ||
22 | + text-align: center; | ||
23 | + font-size: 80%; | ||
24 | + border: 1px solid; | ||
25 | + padding: 5px; | ||
26 | + position: absolute; | ||
27 | + z-index: 5000; | ||
28 | + display: none; | ||
29 | + pointer-events: none; | ||
30 | +} | ||
31 | + | ||
32 | +/* colors subject to change */ | ||
33 | + | ||
34 | +.light #tooltip { | ||
35 | + background-color: #ddd; | ||
36 | + color: #444; | ||
37 | + border-color: #ccc; | ||
38 | +} | ||
39 | + | ||
40 | +.dark #tooltip { | ||
41 | + background-color: #151515; | ||
42 | + color: #B2B2B2; | ||
43 | + border-color: #252525; | ||
44 | +} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
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 -- Tooltip Service | ||
19 | + */ | ||
20 | + | ||
21 | +(function () { | ||
22 | + 'use strict'; | ||
23 | + | ||
24 | + // injected references | ||
25 | + var $log, $timeout, fs; | ||
26 | + | ||
27 | + // constants | ||
28 | + var hoverHeight = 35, | ||
29 | + hoverDelay = 500, | ||
30 | + exitDelay = 100; | ||
31 | + | ||
32 | + // internal state | ||
33 | + var tooltip, currElemId; | ||
34 | + | ||
35 | + function init() { | ||
36 | + tooltip = d3.select('#tooltip'); | ||
37 | + tooltip.html(''); | ||
38 | + } | ||
39 | + | ||
40 | + // === API functions ------------------------------------------------ | ||
41 | + | ||
42 | + function showTooltip(el, msg) { | ||
43 | + if (!el || !msg) { | ||
44 | + return; | ||
45 | + } | ||
46 | + var elem = d3.select(el), | ||
47 | + mouseX = d3.event.pageX, | ||
48 | + mouseY = d3.event.pageY; | ||
49 | + currElemId = elem.attr('id'); | ||
50 | + | ||
51 | + tooltip.transition() | ||
52 | + .delay(hoverDelay) | ||
53 | + .each('start', function () { | ||
54 | + d3.select(this).style('display', 'none'); | ||
55 | + }) | ||
56 | + .each('end', function () { | ||
57 | + d3.select(this).style({ | ||
58 | + display: 'inline-block', | ||
59 | + left: mouseX + 'px', | ||
60 | + top: (mouseY - hoverHeight) + 'px' | ||
61 | + }) | ||
62 | + .text(msg); | ||
63 | + }); | ||
64 | + } | ||
65 | + | ||
66 | + function cancelTooltip(el) { | ||
67 | + if (!el) { | ||
68 | + return; | ||
69 | + } | ||
70 | + var elem = d3.select(el); | ||
71 | + | ||
72 | + if (elem.attr('id') === currElemId) { | ||
73 | + tooltip.transition() | ||
74 | + .delay(exitDelay) | ||
75 | + .style({ | ||
76 | + display: 'none' | ||
77 | + }) | ||
78 | + .text(''); | ||
79 | + } | ||
80 | + } | ||
81 | + | ||
82 | + angular.module('onosWidget') | ||
83 | + .factory('TooltipService', ['$log', '$timeout', 'FnService', | ||
84 | + | ||
85 | + function (_$log_, _$timeout_, _fs_) { | ||
86 | + $log = _$log_; | ||
87 | + $timeout = _$timeout_; | ||
88 | + fs = _fs_; | ||
89 | + | ||
90 | + init(); | ||
91 | + | ||
92 | + return { | ||
93 | + showTooltip: showTooltip, | ||
94 | + cancelTooltip: cancelTooltip | ||
95 | + }; | ||
96 | + }]); | ||
97 | +}()); |
... | @@ -86,16 +86,16 @@ | ... | @@ -86,16 +86,16 @@ |
86 | 86 | ||
87 | toolbar = tbs.createToolbar(tbid); | 87 | toolbar = tbs.createToolbar(tbid); |
88 | rset = [ | 88 | rset = [ |
89 | - { gid: 'checkMark', cb: checkFn }, | 89 | + { gid: 'checkMark', cb: checkFn, tooltip: 'rbtn tooltip' }, |
90 | { gid: 'xMark', cb: xMarkFn }, | 90 | { gid: 'xMark', cb: xMarkFn }, |
91 | - { gid: 'bird', cb: birdFn } | 91 | + { gid: 'bird', cb: birdFn, tooltip: 'hello' } |
92 | ]; | 92 | ]; |
93 | 93 | ||
94 | - toolbar.addButton('demo-button', 'crown', btnFn); | 94 | + toolbar.addButton('demo-button', 'crown', btnFn, 'yay a tooltip'); |
95 | - toolbar.addToggle('demo-toggle', 'chain', false, togFn); | 95 | + toolbar.addToggle('demo-toggle', 'chain', false, togFn, 'another tooltip'); |
96 | toolbar.addSeparator(); | 96 | toolbar.addSeparator(); |
97 | toolbar.addRadioSet('demo-radio', rset); | 97 | toolbar.addRadioSet('demo-radio', rset); |
98 | - toolbar.hide(); | 98 | + toolbar.show(); |
99 | 99 | ||
100 | checkFn(); | 100 | checkFn(); |
101 | 101 | ... | ... |
... | @@ -59,6 +59,7 @@ | ... | @@ -59,6 +59,7 @@ |
59 | <script src="app/fw/widget/widget.js"></script> | 59 | <script src="app/fw/widget/widget.js"></script> |
60 | <script src="app/fw/widget/table.js"></script> | 60 | <script src="app/fw/widget/table.js"></script> |
61 | <script src="app/fw/widget/toolbar.js"></script> | 61 | <script src="app/fw/widget/toolbar.js"></script> |
62 | + <script src="app/fw/widget/tooltip.js"></script> | ||
62 | <script src="app/fw/widget/button.js"></script> | 63 | <script src="app/fw/widget/button.js"></script> |
63 | 64 | ||
64 | <script src="app/fw/layer/layer.js"></script> | 65 | <script src="app/fw/layer/layer.js"></script> |
... | @@ -81,6 +82,7 @@ | ... | @@ -81,6 +82,7 @@ |
81 | <link rel="stylesheet" href="app/fw/nav/nav.css"> | 82 | <link rel="stylesheet" href="app/fw/nav/nav.css"> |
82 | <link rel="stylesheet" href="app/fw/widget/button.css"> | 83 | <link rel="stylesheet" href="app/fw/widget/button.css"> |
83 | <link rel="stylesheet" href="app/fw/widget/toolbar.css"> | 84 | <link rel="stylesheet" href="app/fw/widget/toolbar.css"> |
85 | + <link rel="stylesheet" href="app/fw/widget/tooltip.css"> | ||
84 | 86 | ||
85 | <!-- This is where contributed javascript will get injected --> | 87 | <!-- This is where contributed javascript will get injected --> |
86 | <!-- {INJECTED-JAVASCRIPT-START} --> | 88 | <!-- {INJECTED-JAVASCRIPT-START} --> |
... | @@ -124,6 +126,7 @@ | ... | @@ -124,6 +126,7 @@ |
124 | 126 | ||
125 | <div id="floatpanels"></div> | 127 | <div id="floatpanels"></div> |
126 | <div id="alerts"></div> | 128 | <div id="alerts"></div> |
129 | + <div id="tooltip"></div> | ||
127 | <div id="flash"></div> | 130 | <div id="flash"></div> |
128 | <div id="quickhelp"></div> | 131 | <div id="quickhelp"></div> |
129 | <div id="veil" | 132 | <div id="veil" | ... | ... |
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 -- Tooltip Service - Unit Tests | ||
19 | + */ | ||
20 | +describe('factory: fw/widget/tooltip.js', function () { | ||
21 | + var $log, fs, tts, d3Elem; | ||
22 | + | ||
23 | + beforeEach(module('onosWidget', 'onosUtil')); | ||
24 | + | ||
25 | + beforeEach(inject(function (_$log_, FnService, TooltipService) { | ||
26 | + $log = _$log_; | ||
27 | + fs = FnService; | ||
28 | + tts = TooltipService; | ||
29 | + })); | ||
30 | + | ||
31 | + beforeEach(function () { | ||
32 | + d3Elem = d3.select('body').append('div').attr('id', 'tooltip'); | ||
33 | + }); | ||
34 | + | ||
35 | + afterEach(function () { | ||
36 | + d3.select('#tooltip').remove(); | ||
37 | + }); | ||
38 | + | ||
39 | + it('should define TooltipService', function () { | ||
40 | + expect(tts).toBeDefined(); | ||
41 | + }); | ||
42 | + | ||
43 | + it('should define api functions', function () { | ||
44 | + expect(fs.areFunctions(tts, [ | ||
45 | + 'showTooltip', 'cancelTooltip' | ||
46 | + ])).toBeTruthy(); | ||
47 | + }); | ||
48 | + | ||
49 | + it('should not accept undefined arguments', function () { | ||
50 | + var btn = d3.select('body').append('div'); | ||
51 | + expect(tts.showTooltip()).toBeFalsy(); | ||
52 | + expect(tts.showTooltip(btn)).toBeFalsy(); | ||
53 | + | ||
54 | + expect(tts.cancelTooltip()).toBeFalsy(); | ||
55 | + }); | ||
56 | + | ||
57 | + // testing mouse events is tough | ||
58 | + | ||
59 | + xit('should show a tooltip', function () { | ||
60 | + var btn = d3.select('body').append('div').attr('id', 'foo'); | ||
61 | + // each is used to trigger a "mouse" event, providing this, d, and i | ||
62 | + btn.each(function () { | ||
63 | + tts.showTooltip(this, 'yay a tooltip'); | ||
64 | + }); | ||
65 | + }); | ||
66 | +}); |
-
Please register or login to post a comment