Bri Prebilic Cole | 54d0938 | 2015-03-19 18:40:27 -0700 | [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 | 54d0938 | 2015-03-19 18:40:27 -0700 | [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 -- Tooltip Service |
| 19 | */ |
Simon Hunt | 5c3ed73 | 2017-07-20 19:03:28 +0000 | [diff] [blame] | 20 | |
Bri Prebilic Cole | 54d0938 | 2015-03-19 18:40:27 -0700 | [diff] [blame] | 21 | (function () { |
| 22 | 'use strict'; |
| 23 | |
| 24 | // injected references |
Steven Burrows | 1c2a968 | 2017-07-14 16:52:46 +0100 | [diff] [blame] | 25 | var $rootScope, fs; |
Bri Prebilic Cole | 54d0938 | 2015-03-19 18:40:27 -0700 | [diff] [blame] | 26 | |
| 27 | // constants |
| 28 | var hoverHeight = 35, |
Bri Prebilic Cole | 9a5e006 | 2015-05-11 17:20:57 -0700 | [diff] [blame] | 29 | hoverDelay = 150, |
| 30 | exitDelay = 150; |
Bri Prebilic Cole | 54d0938 | 2015-03-19 18:40:27 -0700 | [diff] [blame] | 31 | |
| 32 | // internal state |
| 33 | var tooltip, currElemId; |
| 34 | |
Bri Prebilic Cole | 6ffea6b | 2015-03-23 13:46:14 -0700 | [diff] [blame] | 35 | // === Helper functions --------------------------------------------- |
| 36 | |
Bri Prebilic Cole | 54d0938 | 2015-03-19 18:40:27 -0700 | [diff] [blame] | 37 | function init() { |
| 38 | tooltip = d3.select('#tooltip'); |
Simon Hunt | 239f09e | 2017-05-18 13:10:09 -0700 | [diff] [blame] | 39 | tooltip.text(''); |
Bri Prebilic Cole | 54d0938 | 2015-03-19 18:40:27 -0700 | [diff] [blame] | 40 | } |
| 41 | |
Bri Prebilic Cole | 6ffea6b | 2015-03-23 13:46:14 -0700 | [diff] [blame] | 42 | function tipStyle(mouseX, mouseY) { |
| 43 | var winWidth = fs.windowSize().width, |
| 44 | winHeight = fs.windowSize().height, |
| 45 | style = { |
Bri Prebilic Cole | f5e48b1 | 2015-04-21 14:52:36 -0700 | [diff] [blame] | 46 | display: 'inline-block', |
| 47 | left: 'auto', |
Steven Burrows | 1c2a968 | 2017-07-14 16:52:46 +0100 | [diff] [blame] | 48 | right: 'auto', |
Bri Prebilic Cole | 6ffea6b | 2015-03-23 13:46:14 -0700 | [diff] [blame] | 49 | }; |
| 50 | |
| 51 | if (mouseX <= (winWidth / 2)) { |
| 52 | style.left = mouseX + 'px'; |
| 53 | } else { |
| 54 | style.right = (winWidth - mouseX) + 'px'; |
| 55 | } |
| 56 | |
| 57 | if (mouseY <= (winHeight / 2)) { |
| 58 | style.top = (mouseY + (hoverHeight - 10)) + 'px'; |
| 59 | } else { |
| 60 | style.top = (mouseY - hoverHeight) + 'px'; |
| 61 | } |
| 62 | |
| 63 | return style; |
| 64 | } |
| 65 | |
Bri Prebilic Cole | 54d0938 | 2015-03-19 18:40:27 -0700 | [diff] [blame] | 66 | // === API functions ------------------------------------------------ |
| 67 | |
Bri Prebilic Cole | eef67ae | 2015-07-01 16:26:59 -0700 | [diff] [blame] | 68 | function addTooltip(elem, tooltip) { |
| 69 | elem.on('mouseover', function () { showTooltip(this, tooltip); }); |
| 70 | elem.on('mouseout', function () { cancelTooltip(this); }); |
| 71 | $rootScope.$on('$routeChangeStart', function () { |
| 72 | cancelTooltip(elem.node()); |
| 73 | }); |
| 74 | } |
| 75 | |
Bri Prebilic Cole | 54d0938 | 2015-03-19 18:40:27 -0700 | [diff] [blame] | 76 | function showTooltip(el, msg) { |
Simon Hunt | d552ee9 | 2015-04-02 17:06:35 -0700 | [diff] [blame] | 77 | // tooltips don't make sense on mobile devices |
| 78 | if (!el || !msg || fs.isMobile()) { |
Bri Prebilic Cole | 54d0938 | 2015-03-19 18:40:27 -0700 | [diff] [blame] | 79 | return; |
| 80 | } |
Simon Hunt | d552ee9 | 2015-04-02 17:06:35 -0700 | [diff] [blame] | 81 | |
Bri Prebilic Cole | 54d0938 | 2015-03-19 18:40:27 -0700 | [diff] [blame] | 82 | var elem = d3.select(el), |
| 83 | mouseX = d3.event.pageX, |
Bri Prebilic Cole | 6ffea6b | 2015-03-23 13:46:14 -0700 | [diff] [blame] | 84 | mouseY = d3.event.pageY, |
Simon Hunt | 5989ddf | 2017-08-02 20:38:12 -0700 | [diff] [blame] | 85 | style = tipStyle(mouseX, mouseY), |
| 86 | ttMsg = fs.isF(msg) ? msg() : msg; |
| 87 | |
Bri Prebilic Cole | 54d0938 | 2015-03-19 18:40:27 -0700 | [diff] [blame] | 88 | currElemId = elem.attr('id'); |
| 89 | |
| 90 | tooltip.transition() |
| 91 | .delay(hoverDelay) |
| 92 | .each('start', function () { |
| 93 | d3.select(this).style('display', 'none'); |
| 94 | }) |
| 95 | .each('end', function () { |
Bri Prebilic Cole | 6ffea6b | 2015-03-23 13:46:14 -0700 | [diff] [blame] | 96 | d3.select(this).style(style) |
Simon Hunt | 5989ddf | 2017-08-02 20:38:12 -0700 | [diff] [blame] | 97 | .text(ttMsg); |
Bri Prebilic Cole | 54d0938 | 2015-03-19 18:40:27 -0700 | [diff] [blame] | 98 | }); |
| 99 | } |
| 100 | |
| 101 | function cancelTooltip(el) { |
| 102 | if (!el) { |
| 103 | return; |
| 104 | } |
| 105 | var elem = d3.select(el); |
| 106 | |
| 107 | if (elem.attr('id') === currElemId) { |
| 108 | tooltip.transition() |
| 109 | .delay(exitDelay) |
| 110 | .style({ |
Steven Burrows | 1c2a968 | 2017-07-14 16:52:46 +0100 | [diff] [blame] | 111 | display: 'none', |
Bri Prebilic Cole | 54d0938 | 2015-03-19 18:40:27 -0700 | [diff] [blame] | 112 | }) |
| 113 | .text(''); |
| 114 | } |
| 115 | } |
| 116 | |
Bri Prebilic Cole | 8f07f0d | 2015-04-23 13:28:43 -0700 | [diff] [blame] | 117 | angular.module('onosWidget') |
Bri Prebilic Cole | 8f07f0d | 2015-04-23 13:28:43 -0700 | [diff] [blame] | 118 | |
Bri Prebilic Cole | eef67ae | 2015-07-01 16:26:59 -0700 | [diff] [blame] | 119 | .directive('tooltip', ['$rootScope', 'FnService', |
| 120 | function (_$rootScope_, _fs_) { |
| 121 | $rootScope = _$rootScope_; |
| 122 | fs = _fs_; |
Bri Prebilic Cole | 54d0938 | 2015-03-19 18:40:27 -0700 | [diff] [blame] | 123 | |
Bri Prebilic Cole | eef67ae | 2015-07-01 16:26:59 -0700 | [diff] [blame] | 124 | init(); |
Bri Prebilic Cole | 54d0938 | 2015-03-19 18:40:27 -0700 | [diff] [blame] | 125 | |
Bri Prebilic Cole | eef67ae | 2015-07-01 16:26:59 -0700 | [diff] [blame] | 126 | return { |
| 127 | restrict: 'A', |
| 128 | link: function (scope, elem, attrs) { |
| 129 | addTooltip(d3.select(elem[0]), scope[attrs.ttMsg]); |
Steven Burrows | 1c2a968 | 2017-07-14 16:52:46 +0100 | [diff] [blame] | 130 | }, |
Bri Prebilic Cole | eef67ae | 2015-07-01 16:26:59 -0700 | [diff] [blame] | 131 | }; |
| 132 | }]) |
| 133 | |
Steven Burrows | 1c2a968 | 2017-07-14 16:52:46 +0100 | [diff] [blame] | 134 | .factory('TooltipService', ['$rootScope', 'FnService', |
| 135 | function (_$rootScope_, _fs_) { |
Bri Prebilic Cole | eef67ae | 2015-07-01 16:26:59 -0700 | [diff] [blame] | 136 | $rootScope = _$rootScope_; |
| 137 | fs = _fs_; |
| 138 | |
| 139 | init(); |
| 140 | |
| 141 | return { |
| 142 | addTooltip: addTooltip, |
| 143 | showTooltip: showTooltip, |
Steven Burrows | 1c2a968 | 2017-07-14 16:52:46 +0100 | [diff] [blame] | 144 | cancelTooltip: cancelTooltip, |
Bri Prebilic Cole | eef67ae | 2015-07-01 16:26:59 -0700 | [diff] [blame] | 145 | }; |
| 146 | }]); |
Bri Prebilic Cole | 54d0938 | 2015-03-19 18:40:27 -0700 | [diff] [blame] | 147 | }()); |