diff --git a/platform/commonUI/inspect/bundle.json b/platform/commonUI/inspect/bundle.json index 74fb65260e..08e7d75cb2 100644 --- a/platform/commonUI/inspect/bundle.json +++ b/platform/commonUI/inspect/bundle.json @@ -39,7 +39,11 @@ { "key": "info", "implementation": "gestures/InfoGesture.js", - "depends": [ "infoService" ] + "depends": [ + "$timeout", + "infoService", + "INFO_HOVER_DELAY" + ] } ], "services": [ @@ -53,6 +57,12 @@ "$rootScope" ] } + ], + "constants": [ + { + "key": "INFO_HOVER_DELAY", + "value": 500 + } ] } } \ No newline at end of file diff --git a/platform/commonUI/inspect/res/bubble.html b/platform/commonUI/inspect/res/bubble.html index 89a25054cf..07395447b1 100644 --- a/platform/commonUI/inspect/res/bubble.html +++ b/platform/commonUI/inspect/res/bubble.html @@ -1,9 +1,9 @@
-
{{bubble.bubbleTitle}}
- +
\ No newline at end of file diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js index dadd81e93d..a1a83b92d8 100644 --- a/platform/commonUI/inspect/src/gestures/InfoGesture.js +++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js @@ -5,8 +5,10 @@ define( function () { "use strict"; - function InfoGesture(infoService, element, domainObject) { - var dismissBubble; + function InfoGesture($timeout, infoService, DELAY, element, domainObject) { + var dismissBubble, + pendingBubble, + mousePosition; function hideBubble() { if (dismissBubble) { @@ -14,20 +16,36 @@ define( element.off('mouseleave', hideBubble); dismissBubble = undefined; } + if (pendingBubble) { + $timeout.cancel(pendingBubble); + pendingBubble = undefined; + } + mousePosition = undefined; + } + + function trackPosition(event) { + mousePosition = [ event.clientX, event.clientY ]; } function showBubble(event) { - dismissBubble = infoService.display( - "info-table", - domainObject.getName(), - [ - { name: "ID", value: domainObject.getId() } - ], - [ event.clientX, event.clientY ] - ); + trackPosition(event); + + pendingBubble = $timeout(function () { + dismissBubble = infoService.display( + "info-table", + domainObject.getModel().name, + [ + { name: "ID", value: domainObject.getId() } + ], + mousePosition + ); + pendingBubble = undefined; + }, DELAY); + element.on('mouseleave', hideBubble); } + element.on('mousemove', trackPosition); element.on('mouseenter', showBubble); return { diff --git a/platform/commonUI/inspect/src/services/InfoService.js b/platform/commonUI/inspect/src/services/InfoService.js index f3ef365f7d..c2c0f996a7 100644 --- a/platform/commonUI/inspect/src/services/InfoService.js +++ b/platform/commonUI/inspect/src/services/InfoService.js @@ -5,20 +5,19 @@ define( function () { "use strict"; - var BUBBLE_TEMPLATE = "" + + "bubble-layout=\"{{bubbleLayout}}\">" + + "" + "" + - ""; + ""; /** * Displays informative content ("info bubbles") for the user. * @constructor */ function InfoService($compile, $document, $window, $rootScope) { - var template = $compile(BUBBLE_TEMPLATE); + var template; function display(templateKey, title, content, position) { var body = $document.find('body'), @@ -28,8 +27,12 @@ define( goUp = position[1] > (window[1] / 2), bubble; + // Lazily initialize template + template = template || $compile(BUBBLE_TEMPLATE); + // Pass model & container parameters into the scope scope.bubbleModel = content; + scope.bubbleTemplate = templateKey; scope.bubbleLayout = (goUp ? 'arw-btm' : 'arw-top') + ' ' + (goLeft ? 'arw-right' : 'arw-left'); scope.bubbleTitle = title;