Bri Prebilic Cole | 54d0938 | 2015-03-19 18:40:27 -0700 | [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 -- Tooltip Service |
| 19 | */ |
| 20 | |
| 21 | (function () { |
| 22 | 'use strict'; |
| 23 | |
| 24 | // injected references |
Bri Prebilic Cole | eef67ae | 2015-07-01 16:26:59 -0700 | [diff] [blame] | 25 | var $log, $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'); |
| 39 | tooltip.html(''); |
| 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', |
| 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, |
| 85 | style = tipStyle(mouseX, mouseY); |
Bri Prebilic Cole | 54d0938 | 2015-03-19 18:40:27 -0700 | [diff] [blame] | 86 | currElemId = elem.attr('id'); |
| 87 | |
| 88 | tooltip.transition() |
| 89 | .delay(hoverDelay) |
| 90 | .each('start', function () { |
| 91 | d3.select(this).style('display', 'none'); |
| 92 | }) |
| 93 | .each('end', function () { |
Bri Prebilic Cole | 6ffea6b | 2015-03-23 13:46:14 -0700 | [diff] [blame] | 94 | d3.select(this).style(style) |
Bri Prebilic Cole | 54d0938 | 2015-03-19 18:40:27 -0700 | [diff] [blame] | 95 | .text(msg); |
| 96 | }); |
| 97 | } |
| 98 | |
| 99 | function cancelTooltip(el) { |
| 100 | if (!el) { |
| 101 | return; |
| 102 | } |
| 103 | var elem = d3.select(el); |
| 104 | |
| 105 | if (elem.attr('id') === currElemId) { |
| 106 | tooltip.transition() |
| 107 | .delay(exitDelay) |
| 108 | .style({ |
| 109 | display: 'none' |
| 110 | }) |
| 111 | .text(''); |
| 112 | } |
| 113 | } |
| 114 | |
Bri Prebilic Cole | 8f07f0d | 2015-04-23 13:28:43 -0700 | [diff] [blame] | 115 | angular.module('onosWidget') |
Bri Prebilic Cole | 8f07f0d | 2015-04-23 13:28:43 -0700 | [diff] [blame] | 116 | |
Bri Prebilic Cole | eef67ae | 2015-07-01 16:26:59 -0700 | [diff] [blame] | 117 | .directive('tooltip', ['$rootScope', 'FnService', |
| 118 | function (_$rootScope_, _fs_) { |
| 119 | $rootScope = _$rootScope_; |
| 120 | fs = _fs_; |
Bri Prebilic Cole | 54d0938 | 2015-03-19 18:40:27 -0700 | [diff] [blame] | 121 | |
Bri Prebilic Cole | eef67ae | 2015-07-01 16:26:59 -0700 | [diff] [blame] | 122 | init(); |
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 | return { |
| 125 | restrict: 'A', |
| 126 | link: function (scope, elem, attrs) { |
| 127 | addTooltip(d3.select(elem[0]), scope[attrs.ttMsg]); |
| 128 | } |
| 129 | }; |
| 130 | }]) |
| 131 | |
| 132 | .factory('TooltipService', ['$log', '$rootScope', 'FnService', |
| 133 | function (_$log_, _$rootScope_, _fs_) { |
| 134 | $log = _$log_; |
| 135 | $rootScope = _$rootScope_; |
| 136 | fs = _fs_; |
| 137 | |
| 138 | init(); |
| 139 | |
| 140 | return { |
| 141 | addTooltip: addTooltip, |
| 142 | showTooltip: showTooltip, |
| 143 | cancelTooltip: cancelTooltip |
| 144 | }; |
| 145 | }]); |
Bri Prebilic Cole | 54d0938 | 2015-03-19 18:40:27 -0700 | [diff] [blame] | 146 | }()); |