diff --git a/platform/commonUI/general/src/services/Popup.js b/platform/commonUI/general/src/services/Popup.js new file mode 100644 index 0000000000..6029ca29cb --- /dev/null +++ b/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; + } +); diff --git a/platform/commonUI/general/src/services/PopupService.js b/platform/commonUI/general/src/services/PopupService.js index 3c655c035b..a7680d3dbd 100644 --- a/platform/commonUI/general/src/services/PopupService.js +++ b/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 - * dismiss the info bubble + * @returns {platform/commonUI/general.Popup} the popup */ 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'); - applyClassOption('left'); + styles.right = (winDim[0] - position[0] + offset[0]) + 'px'; } else { - element.css('left', position[0] + offset[0] + 'px'); - applyClassOption('right'); + styles.left = (position[0] + offset[0]) + 'px'; } if (position[1] > margin[1]) { - element.css('bottom', (winDim[1] - position[1] + offset[1]) + 'px'); - applyClassOption('up'); + styles.bottom = (winDim[1] - position[1] + offset[1]) + 'px'; } else { - element.css('top', position[1] + offset[1] + 'px'); - applyClassOption('down'); + styles.top = (position[1] + offset[1]) + 'px'; } // Add the menu to the body body.append(element); // Return a function to dismiss the bubble - return function () { - element.remove(); - }; + return new Popup(element, styles); }; return PopupService; diff --git a/platform/commonUI/inspect/src/InfoConstants.js b/platform/commonUI/inspect/src/InfoConstants.js index 4475f58439..facf7ef103 100644 --- a/platform/commonUI/inspect/src/InfoConstants.js +++ b/platform/commonUI/inspect/src/InfoConstants.js @@ -32,17 +32,14 @@ define({ "bubble-title=\"{{bubbleTitle}}\" " + "bubble-layout=\"{{bubbleLayout}}\" " + "class=\"bubble-container\">" + - "" + + "" + "" + "", // Options and classes for bubble BUBBLE_OPTIONS: { offsetX: 0, - offsetY: -26, - leftClass: 'arw-left', - rightClass: 'arw-right', - topClass: 'arw-top', - bottomClss: 'arw-btm' + offsetY: -26 }, BUBBLE_MOBILE_POSITION: [ 0, -25 ], // Max width and margins allowed for bubbles; defined in /platform/commonUI/general/res/sass/_constants.scss diff --git a/platform/commonUI/inspect/src/services/InfoService.js b/platform/commonUI/inspect/src/services/InfoService.js index cd3fa4087b..e490171d08 100644 --- a/platform/commonUI/inspect/src/services/InfoService.js +++ b/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 = - this.popupService.display(bubble, position, options); + popup = 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(); }; };