[Time Conductor] Use popupService from infoService

platform/commonUI/general/bundle.json

@@ -12,7 +12,7 @@
             {
                 "key": "popupService",
                 "implementation": "services/PopupService.js",
-                "depends": [ "$window", "$document" ]
+                "depends": [ "$document", "$window" ]
             }
         ],
         "runs": [

platform/commonUI/general/src/services/PopupService.js

@@ -69,7 +69,8 @@ define(
          *
          * @param element the jqLite-wrapped DOM element to pop up
          * @param {number[]} position x,y position of the element, in
-         *        pixel coordinates.
+         *        pixel coordinates. Negative values are interpreted as
+         *        relative to the right or bottom of the window.
          * @param {PopupOptions} [options] additional options to control
          *        positioning of the popup
          * @returns {Function} a function that may be invoked to
@@ -90,6 +91,10 @@ define(
                 }
             }
 
+            function adjustNegatives(value, index) {
+                return value < 0 ? (value + winDim[index]) : value;
+            }
+
             // Defaults
             options = options || {};
             offset = [
@@ -97,9 +102,10 @@ define(
                 options.offsetY !== undefined ? options.offsetY : 0
             ];
             margin = [ options.marginX, options.marginY ].map(function (m, i) {
-                return m === undefined ? (winDim[i] / 2) :
+                return m === undefined ? (winDim[i] / 2) : m;
-                        m < 0 ? (m + winDim[i]) : m;
+            }).map(adjustNegatives);
-            });
+
+            position = position.map(adjustNegatives);
 
             // Position the element
             element.css('position', 'absolute');

platform/commonUI/inspect/bundle.json

@@ -45,13 +45,12 @@
                 "implementation": "services/InfoService.js",
                 "depends": [
                     "$compile",
-                    "$document",
-                    "$window",
                     "$rootScope",
+                    "popupService",
                     "agentService"
                 ]
             }
-        ],  
+        ],
         "constants": [
             {
                 "key": "INFO_HOVER_DELAY",
@@ -66,4 +65,4 @@
             }
         ]
     }
-}
+}

platform/commonUI/inspect/src/InfoConstants.js

@@ -31,13 +31,21 @@ define({
     BUBBLE_TEMPLATE: "<mct-container key=\"bubble\" " +
                 "bubble-title=\"{{bubbleTitle}}\" " +
                 "bubble-layout=\"{{bubbleLayout}}\" " +
-	            "class=\"bubble-container\">" +
+                "class=\"bubble-container\">" +
                 "<mct-include key=\"bubbleTemplate\" ng-model=\"bubbleModel\">" +
                 "</mct-include>" +
                 "</mct-container>",
-    // Pixel offset for bubble, to align arrow position
+    // Options and classes for bubble
-    BUBBLE_OFFSET: [ 0, -26 ],
+    BUBBLE_OPTIONS: {
-	// Max width and margins allowed for bubbles; defined in /platform/commonUI/general/res/sass/_constants.scss
+        offsetX: 0,
-	BUBBLE_MARGIN_LR: 10,
+        offsetY: -26,
-	BUBBLE_MAX_WIDTH: 300
+        leftClass: 'arw-left',
+        rightClass: 'arw-right',
+        topClass: 'arw-top',
+        bottomClss: 'arw-btm'
+    },
+    BUBBLE_MOBILE_POSITION: [ 0, -25 ],
+    // Max width and margins allowed for bubbles; defined in /platform/commonUI/general/res/sass/_constants.scss
+    BUBBLE_MARGIN_LR: 10,
+    BUBBLE_MAX_WIDTH: 300
 });

platform/commonUI/inspect/src/services/InfoService.js

@@ -27,18 +27,18 @@ define(
         "use strict";
 
         var BUBBLE_TEMPLATE = InfoConstants.BUBBLE_TEMPLATE,
-            OFFSET = InfoConstants.BUBBLE_OFFSET;
+            MOBILE_POSITION = InfoConstants.BUBBLE_MOBILE_POSITION,
+            OPTIONS = InfoConstants.BUBBLE_OPTIONS;
 
         /**
          * Displays informative content ("info bubbles") for the user.
          * @memberof platform/commonUI/inspect
          * @constructor
          */
-        function InfoService($compile, $document, $window, $rootScope, agentService) {
+        function InfoService($compile, $rootScope, popupService, agentService) {
             this.$compile = $compile;
-            this.$document = $document;
-            this.$window = $window;
             this.$rootScope = $rootScope;
+            this.popupService = popupService;
             this.agentService = agentService;
         }
 
@@ -55,53 +55,39 @@ define(
          */
         InfoService.prototype.display = function (templateKey, title, content, position) {
             var $compile = this.$compile,
-                $document = this.$document,
-                $window = this.$window,
                 $rootScope = this.$rootScope,
-                body = $document.find('body'),
                 scope = $rootScope.$new(),
-                winDim = [$window.innerWidth, $window.innerHeight],
+                bubbleSpaceLR = InfoConstants.BUBBLE_MARGIN_LR +
-                bubbleSpaceLR = InfoConstants.BUBBLE_MARGIN_LR + InfoConstants.BUBBLE_MAX_WIDTH,
+                    InfoConstants.BUBBLE_MAX_WIDTH,
-                goLeft = position[0] > (winDim[0] - bubbleSpaceLR),
+                options,
-                goUp = position[1] > (winDim[1] / 2),
+                dismissPopup,
                 bubble;
-            
+
             // 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;
 
             // Create the context menu
             bubble = $compile(BUBBLE_TEMPLATE)(scope);
 
-            // Position the bubble
+            options = Object.create(OPTIONS);
-            bubble.css('position', 'absolute');
+            options.marginX = -bubbleSpaceLR;
+
+            // On a phone, bubble takes up more screen real estate,
+            // so position it differently (toward the bottom)
             if (this.agentService.isPhone(navigator.userAgent)) {
-                bubble.css('right', '0px');
+                position = MOBILE_POSITION;
-                bubble.css('left', '0px');
+                options = {};
-                bubble.css('top', 'auto');
-                bubble.css('bottom', '25px');
-            } else {
-                if (goLeft) {
-                    bubble.css('right', (winDim[0] - position[0] + OFFSET[0]) + 'px');
-                } else {
-                    bubble.css('left', position[0] + OFFSET[0] + 'px');
-                }
-                if (goUp) {
-                    bubble.css('bottom', (winDim[1] - position[1] + OFFSET[1]) + 'px');
-                } else {
-                    bubble.css('top', position[1] + OFFSET[1] + 'px');
-                }
             }
 
-            // Add the menu to the body
+            dismissPopup =
-            body.append(bubble);
+                this.popupService.display(bubble, position, options);
 
-            // Return a function to dismiss the bubble
+            // Return a function to dismiss the info bubble
-            return function () {
+            return function dismiss() {
-                bubble.remove();
+                dismissPopup();
+                scope.$destroy();
             };
         };