| /* |
| * Copyright 2015-present Open Networking Laboratory |
| * |
| * Licensed under the Apache License, Version 2.0 (the "License"); |
| * you may not use this file except in compliance with the License. |
| * You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| |
| /* |
| ONOS GUI -- Widget -- Tooltip Service |
| */ |
| |
| (function () { |
| 'use strict'; |
| |
| // injected references |
| var $log, $rootScope, fs; |
| |
| // constants |
| var hoverHeight = 35, |
| hoverDelay = 150, |
| exitDelay = 150; |
| |
| // internal state |
| var tooltip, currElemId; |
| |
| // === Helper functions --------------------------------------------- |
| |
| function init() { |
| tooltip = d3.select('#tooltip'); |
| tooltip.html(''); |
| } |
| |
| function tipStyle(mouseX, mouseY) { |
| var winWidth = fs.windowSize().width, |
| winHeight = fs.windowSize().height, |
| style = { |
| display: 'inline-block', |
| left: 'auto', |
| right: 'auto' |
| }; |
| |
| if (mouseX <= (winWidth / 2)) { |
| style.left = mouseX + 'px'; |
| } else { |
| style.right = (winWidth - mouseX) + 'px'; |
| } |
| |
| if (mouseY <= (winHeight / 2)) { |
| style.top = (mouseY + (hoverHeight - 10)) + 'px'; |
| } else { |
| style.top = (mouseY - hoverHeight) + 'px'; |
| } |
| |
| return style; |
| } |
| |
| // === API functions ------------------------------------------------ |
| |
| function addTooltip(elem, tooltip) { |
| elem.on('mouseover', function () { showTooltip(this, tooltip); }); |
| elem.on('mouseout', function () { cancelTooltip(this); }); |
| $rootScope.$on('$routeChangeStart', function () { |
| cancelTooltip(elem.node()); |
| }); |
| } |
| |
| function showTooltip(el, msg) { |
| // tooltips don't make sense on mobile devices |
| if (!el || !msg || fs.isMobile()) { |
| return; |
| } |
| |
| var elem = d3.select(el), |
| mouseX = d3.event.pageX, |
| mouseY = d3.event.pageY, |
| style = tipStyle(mouseX, mouseY); |
| currElemId = elem.attr('id'); |
| |
| tooltip.transition() |
| .delay(hoverDelay) |
| .each('start', function () { |
| d3.select(this).style('display', 'none'); |
| }) |
| .each('end', function () { |
| d3.select(this).style(style) |
| .text(msg); |
| }); |
| } |
| |
| function cancelTooltip(el) { |
| if (!el) { |
| return; |
| } |
| var elem = d3.select(el); |
| |
| if (elem.attr('id') === currElemId) { |
| tooltip.transition() |
| .delay(exitDelay) |
| .style({ |
| display: 'none' |
| }) |
| .text(''); |
| } |
| } |
| |
| angular.module('onosWidget') |
| |
| .directive('tooltip', ['$rootScope', 'FnService', |
| function (_$rootScope_, _fs_) { |
| $rootScope = _$rootScope_; |
| fs = _fs_; |
| |
| init(); |
| |
| return { |
| restrict: 'A', |
| link: function (scope, elem, attrs) { |
| addTooltip(d3.select(elem[0]), scope[attrs.ttMsg]); |
| } |
| }; |
| }]) |
| |
| .factory('TooltipService', ['$log', '$rootScope', 'FnService', |
| function (_$log_, _$rootScope_, _fs_) { |
| $log = _$log_; |
| $rootScope = _$rootScope_; |
| fs = _fs_; |
| |
| init(); |
| |
| return { |
| addTooltip: addTooltip, |
| showTooltip: showTooltip, |
| cancelTooltip: cancelTooltip |
| }; |
| }]); |
| }()); |