[Time Conductor] Show appropriate arrow

...on info bubbles, when using bubbles shown via the
popupService.

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

@@ -0,0 +1,89 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is 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.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    function () {
+        "use strict";
+
+        /**
+         * A popup is an element that has been displayed at a particular
+         * location within the page.
+         * @constructor
+         * @memberof platform/commonUI/general
+         * @param element the jqLite-wrapped element
+         * @param {object} styles an object containing key-value pairs
+         *        of styles used to position the element.
+         */
+        function Popup(element, styles) {
+            this.styles = styles;
+            this.element = element;
+
+            element.css(styles);
+        }
+
+        /**
+         * Stop showing this popup.
+         */
+        Popup.prototype.dismiss = function () {
+            this.element.remove();
+        };
+
+        /**
+         * Check if this popup is positioned such that it appears to the
+         * left of its original location.
+         * @returns {boolean} true if the popup goes left
+         */
+        Popup.prototype.goesLeft = function () {
+            return !this.styles.left;
+        };
+
+        /**
+         * Check if this popup is positioned such that it appears to the
+         * right of its original location.
+         * @returns {boolean} true if the popup goes right
+         */
+        Popup.prototype.goesRight = function () {
+            return !this.styles.right;
+        };
+
+        /**
+         * Check if this popup is positioned such that it appears above
+         * its original location.
+         * @returns {boolean} true if the popup goes up
+         */
+        Popup.prototype.goesUp = function () {
+            return !this.styles.top;
+        };
+
+        /**
+         * Check if this popup is positioned such that it appears below
+         * its original location.
+         * @returns {boolean} true if the popup goes down
+         */
+        Popup.prototype.goesDown = function () {
+            return !this.styles.bottom;
+        };
+
+        return Popup;
+    }
+);

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

@@ -22,7 +22,8 @@
 /*global define*/
 
 define(
-    function () {
+    ['./Popup'],
+    function (Popup) {
         "use strict";
 
         /**
@@ -73,14 +74,14 @@ define(
          *        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
+         * @returns {platform/commonUI/general.Popup} the popup
-         *          dismiss the info bubble
          */
         PopupService.prototype.display = function (element, position, options) {
             var $document = this.$document,
                 $window = this.$window,
                 body = $document.find('body'),
                 winDim = [ $window.innerWidth, $window.innerHeight ],
+                styles = { position: 'absolute' },
                 margin,
                 offset,
                 bubble;
@@ -107,32 +108,23 @@ define(
 
             position = position.map(adjustNegatives);
 
-            // Position the element
-            element.css('position', 'absolute');
-
             if (position[0] > margin[0]) {
-                element.css('right', (winDim[0] - position[0] + offset[0]) + 'px');
+                styles.right = (winDim[0] - position[0] + offset[0]) + 'px';
-                applyClassOption('left');
             } else {
-                element.css('left', position[0] + offset[0] + 'px');
+                styles.left =  (position[0] + offset[0]) + 'px';
-                applyClassOption('right');
             }
 
             if (position[1] > margin[1]) {
-                element.css('bottom', (winDim[1] - position[1] + offset[1]) + 'px');
+                styles.bottom = (winDim[1] - position[1] + offset[1]) + 'px';
-                applyClassOption('up');
             } else {
-                element.css('top', position[1] + offset[1] + 'px');
+                styles.top = (position[1] + offset[1]) + 'px';
-                applyClassOption('down');
             }
 
             // Add the menu to the body
             body.append(element);
 
             // Return a function to dismiss the bubble
-            return function () {
+            return new Popup(element, styles);
-                element.remove();
-            };
         };
 
         return PopupService;

platform/commonUI/inspect/src/InfoConstants.js

@@ -32,17 +32,14 @@ define({
                 "bubble-title=\"{{bubbleTitle}}\" " +
                 "bubble-layout=\"{{bubbleLayout}}\" " +
                 "class=\"bubble-container\">" +
-                "<mct-include key=\"bubbleTemplate\" ng-model=\"bubbleModel\">" +
+                "<mct-include key=\"bubbleTemplate\" " +
+                "ng-model=\"bubbleModel\">" +
                 "</mct-include>" +
                 "</mct-container>",
     // Options and classes for bubble
     BUBBLE_OPTIONS: {
         offsetX: 0,
-        offsetY: -26,
+        offsetY: -26
-        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

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

@@ -60,7 +60,7 @@ define(
                 bubbleSpaceLR = InfoConstants.BUBBLE_MARGIN_LR +
                     InfoConstants.BUBBLE_MAX_WIDTH,
                 options,
-                dismissPopup,
+                popup,
                 bubble;
 
             // Pass model & container parameters into the scope
@@ -81,12 +81,18 @@ define(
                 options = {};
             }
 
-            dismissPopup =
+            popup = this.popupService.display(bubble, position, options);
-                this.popupService.display(bubble, position, options);
+
+            // Style the bubble according to how it was positioned
+            if (popup.goesLeft()) {
+                scope.bubbleLayout = 'arw-right';
+            } else if (popup.goesRight()) {
+                scope.bubbleLayout = 'arw-left';
+            }
 
             // Return a function to dismiss the info bubble
             return function dismiss() {
-                dismissPopup();
+                popup.dismiss();
                 scope.$destroy();
             };
         };