[Time Conductor] Show appropriate arrow

...on info bubbles, when using bubbles shown via the
popupService.
This commit is contained in:
Victor Woeltjen
2015-10-01 16:59:12 -07:00
parent 6cbd3e5fae
commit dfe909d6b5
4 changed files with 111 additions and 27 deletions

View File

@ -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;
}
);

View File

@ -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;