alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Time Conductor] Use popupService from infoService

Browse Source
This commit is contained in:
Victor Woeltjen
2015-10-01 16:25:33 -07:00
parent 3050b265fb
commit 6cbd3e5fae
5 changed files with 50 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
platform/commonUI/inspect/src/InfoConstants.js
View File

@@ -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
BUBBLE_OFFSET: [ 0, -26 ],
// Max width and margins allowed for bubbles; defined in /platform/commonUI/general/res/sass/_constants.scss
BUBBLE_MARGIN_LR: 10,
BUBBLE_MAX_WIDTH: 300
// Options and classes for bubble
BUBBLE_OPTIONS: {
offsetX: 0,
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
BUBBLE_MARGIN_LR: 10,
BUBBLE_MAX_WIDTH: 300
});

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

@@ -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 + InfoConstants.BUBBLE_MAX_WIDTH,
goLeft = position[0] > (winDim[0] - bubbleSpaceLR),
goUp = position[1] > (winDim[1] / 2),
bubbleSpaceLR = InfoConstants.BUBBLE_MARGIN_LR +
InfoConstants.BUBBLE_MAX_WIDTH,
options,
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
bubble.css('position', 'absolute');
options = Object.create(OPTIONS);
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');
bubble.css('left', '0px');
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');
}
position = MOBILE_POSITION;
options = {};
}
// Add the menu to the body
body.append(bubble);
dismissPopup =
this.popupService.display(bubble, position, options);
// Return a function to dismiss the bubble
return function () {
bubble.remove();
// Return a function to dismiss the info bubble
return function dismiss() {
dismissPopup();
scope.$destroy();
};
};