diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json index 82a1ccfbe8..8e367cc060 100644 --- a/platform/commonUI/general/bundle.json +++ b/platform/commonUI/general/bundle.json @@ -12,7 +12,7 @@ { "key": "popupService", "implementation": "services/PopupService.js", - "depends": [ "$window", "$document" ] + "depends": [ "$document", "$window" ] } ], "runs": [ diff --git a/platform/commonUI/general/src/services/PopupService.js b/platform/commonUI/general/src/services/PopupService.js index 61ec1d11d4..3c655c035b 100644 --- a/platform/commonUI/general/src/services/PopupService.js +++ b/platform/commonUI/general/src/services/PopupService.js @@ -69,7 +69,8 @@ define( * * @param element the jqLite-wrapped DOM element to pop up * @param {number[]} position x,y position of the element, in - * pixel coordinates. + * pixel coordinates. Negative values are interpreted as + * 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 @@ -90,6 +91,10 @@ define( } } + function adjustNegatives(value, index) { + return value < 0 ? (value + winDim[index]) : value; + } + // Defaults options = options || {}; offset = [ @@ -97,9 +102,10 @@ define( options.offsetY !== undefined ? options.offsetY : 0 ]; margin = [ options.marginX, options.marginY ].map(function (m, i) { - return m === undefined ? (winDim[i] / 2) : - m < 0 ? (m + winDim[i]) : m; - }); + return m === undefined ? (winDim[i] / 2) : m; + }).map(adjustNegatives); + + position = position.map(adjustNegatives); // Position the element element.css('position', 'absolute'); diff --git a/platform/commonUI/inspect/bundle.json b/platform/commonUI/inspect/bundle.json index bafeb851ef..ed6858f13e 100644 --- a/platform/commonUI/inspect/bundle.json +++ b/platform/commonUI/inspect/bundle.json @@ -45,13 +45,12 @@ "implementation": "services/InfoService.js", "depends": [ "$compile", - "$document", - "$window", "$rootScope", + "popupService", "agentService" ] } - ], + ], "constants": [ { "key": "INFO_HOVER_DELAY", @@ -66,4 +65,4 @@ } ] } -} \ No newline at end of file +} diff --git a/platform/commonUI/inspect/src/InfoConstants.js b/platform/commonUI/inspect/src/InfoConstants.js index 4927de870f..4475f58439 100644 --- a/platform/commonUI/inspect/src/InfoConstants.js +++ b/platform/commonUI/inspect/src/InfoConstants.js @@ -31,13 +31,21 @@ define({ BUBBLE_TEMPLATE: "" + + "class=\"bubble-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 }); diff --git a/platform/commonUI/inspect/src/services/InfoService.js b/platform/commonUI/inspect/src/services/InfoService.js index ff6d23cb56..cd3fa4087b 100644 --- a/platform/commonUI/inspect/src/services/InfoService.js +++ b/platform/commonUI/inspect/src/services/InfoService.js @@ -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(); }; };