From de291ad3b1f4c14e7ef392eb166a28ef318c7ccc Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 11 Aug 2015 10:00:56 -0700 Subject: [PATCH] [Code Style] Use prototypes in inspection bundle WTD-1482 --- .../inspect/src/gestures/InfoGesture.js | 156 ++++++++++-------- .../inspect/src/services/InfoService.js | 101 ++++++------ 2 files changed, 137 insertions(+), 120 deletions(-) diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js index a22c4515fa..271857a592 100644 --- a/platform/commonUI/inspect/src/gestures/InfoGesture.js +++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js @@ -32,90 +32,104 @@ define( * * @memberof platform/commonUI/inspect * @constructor + * @implements {Gesture} * @param $timeout Angular's `$timeout` * @param {InfoService} infoService a service which shows info bubbles - * @param {number} DELAY delay, in milliseconds, before bubble appears + * @param {number} delay delay, in milliseconds, before bubble appears * @param element jqLite-wrapped DOM element * @param {DomainObject} domainObject the domain object for which to * show information */ - function InfoGesture($timeout, infoService, DELAY, element, domainObject) { - var dismissBubble, - pendingBubble, - mousePosition, - scopeOff; + function InfoGesture($timeout, infoService, delay, element, domainObject) { + var self = this; - function trackPosition(event) { - // Record mouse position, so bubble can be shown at latest - // mouse position (not just where the mouse entered) - mousePosition = [ event.clientX, event.clientY ]; - } - - function hideBubble() { - // If a bubble is showing, dismiss it - if (dismissBubble) { - dismissBubble(); - element.off('mouseleave', hideBubble); - dismissBubble = undefined; - } - // If a bubble will be shown on a timeout, cancel that - if (pendingBubble) { - $timeout.cancel(pendingBubble); - element.off('mousemove', trackPosition); - element.off('mouseleave', hideBubble); - pendingBubble = undefined; - } - // Also clear mouse position so we don't have a ton of tiny - // arrays allocated while user mouses over things - mousePosition = undefined; - } - - function showBubble(event) { - trackPosition(event); - - // Also need to track position during hover - element.on('mousemove', trackPosition); - - // Show the bubble, after a suitable delay (if mouse has - // left before this time is up, this will be canceled.) - pendingBubble = $timeout(function () { - dismissBubble = infoService.display( - "info-table", - domainObject.getModel().name, - domainObject.useCapability('metadata'), - mousePosition - ); - element.off('mousemove', trackPosition); - pendingBubble = undefined; - }, DELAY); - - element.on('mouseleave', hideBubble); - } - - // Show bubble (on a timeout) on mouse over - element.on('mouseenter', showBubble); + // Callback functions to preserve the "this" pointer (in the + // absence of Function.prototype.bind) + this.showBubbleCallback = function (event) { + self.showBubble(event); + }; + this.hideBubbleCallback = function (event) { + self.hideBubble(event); + }; + this.trackPositionCallback = function (event) { + self.trackPosition(event); + }; // Also make sure we dismiss bubble if representation is destroyed // before the mouse actually leaves it - scopeOff = element.scope().$on('$destroy', hideBubble); + this.scopeOff = element.scope().$on('$destroy', this.hideBubbleCallback); - return { - /** - * Detach any event handlers associated with this gesture. - * @memberof InfoGesture - * @method - * @memberof platform/commonUI/inspect.InfoGesture# - */ - destroy: function () { - // Dismiss any active bubble... - hideBubble(); - // ...and detach listeners - element.off('mouseenter', showBubble); - scopeOff(); - } - }; + this.element = element; + this.$timeout = $timeout; + this.infoService = infoService; + this.delay = delay; + this.domainObject = domainObject; + + // Show bubble (on a timeout) on mouse over + element.on('mouseenter', this.showBubbleCallback); } + InfoGesture.prototype.trackPosition = function (event) { + // Record mouse position, so bubble can be shown at latest + // mouse position (not just where the mouse entered) + this.mousePosition = [ event.clientX, event.clientY ]; + }; + + InfoGesture.prototype.hideBubble = function () { + // If a bubble is showing, dismiss it + if (this.dismissBubble) { + this.dismissBubble(); + this.element.off('mouseleave', this.hideBubbleCallback); + this.dismissBubble = undefined; + } + // If a bubble will be shown on a timeout, cancel that + if (this.pendingBubble) { + this.$timeout.cancel(this.pendingBubble); + this.element.off('mousemove', this.trackPositionCallback); + this.element.off('mouseleave', this.hideBubbleCallback); + this.pendingBubble = undefined; + } + // Also clear mouse position so we don't have a ton of tiny + // arrays allocated while user mouses over things + this.mousePosition = undefined; + }; + + InfoGesture.prototype.showBubble = function (event) { + var self = this; + + this.trackPosition(event); + + // Also need to track position during hover + this.element.on('mousemove', this.trackPositionCallback); + + // Show the bubble, after a suitable delay (if mouse has + // left before this time is up, this will be canceled.) + this.pendingBubble = this.$timeout(function () { + self.dismissBubble = self.infoService.display( + "info-table", + self.domainObject.getModel().name, + self.domainObject.useCapability('metadata'), + self.mousePosition + ); + self.element.off('mousemove', self.trackPositionCallback); + self.pendingBubble = undefined; + }, this.delay); + + this.element.on('mouseleave', this.hideBubbleCallback); + }; + + /** + * Detach any event handlers associated with this gesture. + * @method + */ + InfoGesture.prototype.destroy = function () { + // Dismiss any active bubble... + this.hideBubble(); + // ...and detach listeners + this.element.off('mouseenter', this.showBubbleCallback); + this.scopeOff(); + }; + return InfoGesture; } diff --git a/platform/commonUI/inspect/src/services/InfoService.js b/platform/commonUI/inspect/src/services/InfoService.js index ed5bbfaa48..2f9fe62eab 100644 --- a/platform/commonUI/inspect/src/services/InfoService.js +++ b/platform/commonUI/inspect/src/services/InfoService.js @@ -35,61 +35,64 @@ define( * @constructor */ function InfoService($compile, $document, $window, $rootScope) { + this.$compile = $compile; + this.$document = $document; + this.$window = $window; + this.$rootScope = $rootScope; + } - function display(templateKey, title, content, position) { - var 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), - bubble; + /** + * Display an info bubble at the specified location. + * @param {string} templateKey template to place in bubble + * @param {string} title title for the bubble + * @param {*} content content to pass to the template, via + * `ng-model` + * @param {number[]} x,y position of the info bubble, in + * pixel coordinates. + * @returns {Function} a function that may be invoked to + * dismiss the info bubble + */ + 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), + 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; + // 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); + // Create the context menu + bubble = $compile(BUBBLE_TEMPLATE)(scope); - // Position the bubble - bubble.css('position', 'absolute'); - 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'); - } - - // Add the menu to the body - body.append(bubble); - - // Return a function to dismiss the bubble - return function () { bubble.remove(); }; + // Position the bubble + bubble.css('position', 'absolute'); + 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'); } - return { - /** - * Display an info bubble at the specified location. - * @param {string} templateKey template to place in bubble - * @param {string} title title for the bubble - * @param {*} content content to pass to the template, via - * `ng-model` - * @param {number[]} x,y position of the info bubble, in - * pixel coordinates. - * @returns {Function} a function that may be invoked to - * dismiss the info bubble - * @memberof platform/commonUI/inspect.InfoService# - */ - display: display - }; + // Add the menu to the body + body.append(bubble); + + // Return a function to dismiss the bubble + return function () { bubble.remove(); }; } return InfoService;