ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-03 16:10:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Info Bubble] Tweak positioning

Browse Source 
Tweak positioning of info bubbles, WTD-884.
This commit is contained in:
Victor Woeltjen 2015-05-22 12:50:09 -07:00
parent 35f4032ae8
commit ab6a5afe93
1 changed files with 10 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
platform/commonUI/inspect/src/services/InfoService.js
View File

@ -5,31 +5,28 @@ define(
function () { function () {
"use strict"; "use strict";
var BUBBLE_TEMPLATE = "<div><mct-container key=\"bubble\" " + var BUBBLE_TEMPLATE = "<mct-container key=\"bubble\" " +
"bubble-title=\"{{bubbleTitle}}\" " + "bubble-title=\"{{bubbleTitle}}\" " +
"bubble-layout=\"{{bubbleLayout}}\">" + "bubble-layout=\"{{bubbleLayout}}\">" +
"<mct-include key=\"bubbleTemplate\" ng-model=\"bubbleModel\">" + "<mct-include key=\"bubbleTemplate\" ng-model=\"bubbleModel\">" +
"</mct-include>" + "</mct-include>" +
"</mct-container></div>"; "</mct-container>",
OFFSET = [ 0, 16 ]; // Pixel offset for bubble, to align arrow position
/** /**
* Displays informative content ("info bubbles") for the user. * Displays informative content ("info bubbles") for the user.
* @constructor * @constructor
*/ */
function InfoService($compile, $document, $window, $rootScope) { function InfoService($compile, $document, $window, $rootScope) {
var template;
function display(templateKey, title, content, position) { function display(templateKey, title, content, position) {
var body = $document.find('body'), var body = $document.find('body'),
scope = $rootScope.$new(), scope = $rootScope.$new(),
winDim = [$window.innerWidth, $window.innerHeight], winDim = [$window.innerWidth, $window.innerHeight],
goLeft = position[0] > (window[0] / 2), goLeft = position[0] > (winDim[0] / 2),
goUp = position[1] > (window[1] / 2), goUp = position[1] > (winDim[1] / 2),
bubble; bubble;
// Lazily initialize template
template = template || $compile(BUBBLE_TEMPLATE);
// Pass model & container parameters into the scope // Pass model & container parameters into the scope
scope.bubbleModel = content; scope.bubbleModel = content;
scope.bubbleTemplate = templateKey; scope.bubbleTemplate = templateKey;
@ -38,19 +35,19 @@ define(
scope.bubbleTitle = title; scope.bubbleTitle = title;
// Create the context menu // Create the context menu
bubble = template(scope); bubble = $compile(BUBBLE_TEMPLATE)(scope);
// Position the bubble // Position the bubble
bubble.css('position', 'absolute'); bubble.css('position', 'absolute');
if (goLeft) { if (goLeft) {
bubble.css('right', (winDim[0] - position[0]) + 'px'); bubble.css('right', (winDim[0] - position[0] + OFFSET[0]) + 'px');
} else { } else {
bubble.css('left', position[0] + 'px'); bubble.css('left', position[0] - OFFSET[0] + 'px');
} }
if (goUp) { if (goUp) {
bubble.css('bottom', (winDim[1] - position[1]) + 'px'); bubble.css('bottom', (winDim[1] - position[1] + OFFSET[1]) + 'px');
} else { } else {
bubble.css('top', position[1] + 'px'); bubble.css('top', position[1] - OFFSET[1] + 'px');
} }
// Add the menu to the body // Add the menu to the body