From 431db5495e511044a152f2a8fcb83b2a8ff5ef10 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Mon, 1 Aug 2016 12:12:47 -0400
Subject: [PATCH] (js) Improve sg-calendar-scroll-view directive

---
 .../sgCalendarScrollView.directive.js         | 60 ++++++++++---------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarScrollView.directive.js b/UI/WebServerResources/js/Scheduler/sgCalendarScrollView.directive.js
index 90b045638..77f08ea0e 100644
--- a/UI/WebServerResources/js/Scheduler/sgCalendarScrollView.directive.js
+++ b/UI/WebServerResources/js/Scheduler/sgCalendarScrollView.directive.js
@@ -25,34 +25,24 @@
       },
       controller: sgCalendarScrollViewController,
       link: function(scope, element, attrs, controller) {
-        var view, type, deregisterDragStart, deregisterDragStop;
+        var view, type;
 
         view = null;
         type = scope.type; // multiday, multiday-allday, monthly, unknown?
 
-        // Listen to dragstart and dragend events
-        deregisterDragStart = $rootScope.$on('calendar:dragstart', onDragStart);
-        deregisterDragStop = $rootScope.$on('calendar:dragend', onDragEnd);
-
         // Update the "view" object literal once the Angular template has been transformed
         $timeout(initView);
 
         // Deregister listeners when destroying the view
         scope.$on('$destroy', function() {
-          deregisterDragStart();
-          deregisterDragStop();
           if (view) {
-            element.off('mouseover', view.updateFromPointerHandler);
-            angular.element($window).off('resize', view.updateCoordinates);
+            view.$destroy();
           }
         });
 
         function initView() {
           view = new sgScrollView(element, type);
 
-          // Compute coordinates of view element; recompute it on window resize
-          angular.element($window).on('resize', view.updateCoordinates);
-
           if (type != 'monthly')
             // Scroll to the day start hour defined in the user's defaults
             Preferences.ready().then(function() {
@@ -66,19 +56,6 @@
             });
         }
 
-        function onDragStart() {
-          if (view) {
-            element.on('mouseover', view.updateFromPointerHandler);
-            view.updateCoordinates();
-            view.updateFromPointerHandler();
-          }
-        }
-
-        function onDragEnd() {
-          element.off('mouseover', view.updateFromPointerHandler);
-          Calendar.$view = null;
-        }
-
         /**
          * sgScrollView
          */
@@ -91,11 +68,37 @@
           this.dayNumbers = this.getDayNumbers();
           this.maxX = this.getMaxColumns();
 
+          // Listen to dragstart and dragend events
+          this.deregisterDragStart = $rootScope.$on('calendar:dragstart', angular.bind(this, this.onDragStart));
+          this.deregisterDragStop = $rootScope.$on('calendar:dragend', angular.bind(this, this.onDragEnd));
+
+          this.bindedUpdateCoordinates = angular.bind(this, this.updateCoordinates);
+          this.bindedUpdateFromPointerHandler = angular.bind(this, this.updateFromPointerHandler);
+
+          // Compute coordinates of view element; recompute it on window resize
           this.updateCoordinates();
+          angular.element($window).on('resize', this.bindedUpdateCoordinates);
         }
 
         sgScrollView.prototype = {
 
+          $destroy: function() {
+            this.deregisterDragStart();
+            this.deregisterDragStop();
+            this.$element.off('mousemove', this.bindedUpdateFromPointerHandler);
+            angular.element($window).off('resize', this.bindedUpdateCoordinates);
+          },
+
+          onDragStart: function() {
+            this.$element.on('mousemove', this.bindedUpdateFromPointerHandler);
+            this.updateCoordinates();
+            this.updateFromPointerHandler();
+          },
+
+          onDragEnd: function() {
+            this.$element.off('mousemove', this.bindedUpdateFromPointerHandler);
+            Calendar.$view = null;
+          },
 
           getQuarterHeight: function() {
             var hour0, hour23, height = null;
@@ -183,11 +186,10 @@
 
           // From SOGoScrollController.updateFromPointerHandler
           updateFromPointerHandler: function() {
-            var scrollStep, pointerHandler, pointerCoordinates, now, scrollY, minY, delta;
+            var pointerHandler, pointerCoordinates, now, scrollY, minY, delta;
 
             pointerHandler = Component.$ghost.pointerHandler;
             if (this.coordinates && pointerHandler) {
-              scrollStep = this.scrollStep;
               pointerCoordinates = pointerHandler.getContainerBasedCoordinates(this);
 
               if (pointerCoordinates) {
@@ -196,7 +198,7 @@
                 now = new Date().getTime();
                 if (!this.lastScroll || now > this.lastScroll + 100) {
                   this.lastScroll = now;
-                  scrollY = pointerCoordinates.y - scrollStep;
+                  scrollY = pointerCoordinates.y - this.scrollStep;
                   if (scrollY < 0) {
                     minY = -this.element.scrollTop;
                     if (scrollY < minY)
@@ -204,7 +206,7 @@
                     this.element.scrollTop += scrollY;
                   }
                   else {
-                    scrollY = pointerCoordinates.y + scrollStep;
+                    scrollY = pointerCoordinates.y + this.scrollStep;
                     delta = scrollY - this.element.clientHeight;
                     if (delta > 0) {
                       this.element.scrollTop += delta;