[Code Style] Use prototypes in inspection bundle

WTD-1482

platform/commonUI/inspect/src/gestures/InfoGesture.js

@@ -32,89 +32,103 @@ 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) {
+        function InfoGesture($timeout, infoService, delay, element, domainObject) {
-            var dismissBubble,
+            var self = this;
-                pendingBubble,
-                mousePosition,
-                scopeOff;
 
-            function trackPosition(event) {
+            // Callback functions to preserve the "this" pointer (in the
-                // Record mouse position, so bubble can be shown at latest
+            // absence of Function.prototype.bind)
-                // mouse position (not just where the mouse entered)
+            this.showBubbleCallback = function (event) {
-                mousePosition = [ event.clientX, event.clientY ];
+                self.showBubble(event);
-            }
+            };
-
+            this.hideBubbleCallback = function (event) {
-            function hideBubble() {
+                self.hideBubble(event);
-                // If a bubble is showing, dismiss it
+            };
-                if (dismissBubble) {
+            this.trackPositionCallback = function (event) {
-                    dismissBubble();
+                self.trackPosition(event);
-                    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);
 
             // 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);
+
+            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);
+        };
 
-            return {
         /**
          * Detach any event handlers associated with this gesture.
-                 * @memberof InfoGesture
          * @method
-                 * @memberof platform/commonUI/inspect.InfoGesture#
          */
-                destroy: function () {
+        InfoGesture.prototype.destroy = function () {
             // Dismiss any active bubble...
-                    hideBubble();
+            this.hideBubble();
             // ...and detach listeners
-                    element.off('mouseenter', showBubble);
+            this.element.off('mouseenter', this.showBubbleCallback);
-                    scopeOff();
+            this.scopeOff();
-                }
         };
-        }
 
         return InfoGesture;
 

platform/commonUI/inspect/src/services/InfoService.js

@@ -35,9 +35,29 @@ 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'),
+         * 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,
@@ -75,23 +95,6 @@ define(
             return function () { bubble.remove(); };
         }
 
-            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
-            };
-        }
-
         return InfoService;
     }
 );