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;