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