feat(draggableAutoScroll): allow the auto scroll value thats passed t…

…o interact to be customised

Closes #578

README.md

@@ -218,6 +218,9 @@ $templateCache.put('my-custom-template.html', 'Custom month view template here')
 ### template-scope
 An object containing a set of variables that will be available in a custom template as `vm.templateScope`
 
+### draggable-auto-scroll
+Passed to the [autoScroll](http://interactjs.io/docs/#autoscroll) option of interactjs. Unlike interact this defaults to `true` if not set.
+
 ## Configuring the calendar default config
 
 You can easily customise the date formats and i18n strings used throughout the calendar by using the `calendarConfig` value. Please note that these example formats are those used by moment.js and these won't work if using angular as the date formatter. Example usage:

src/directives/mwlCalendar.js

@@ -139,6 +139,7 @@ angular
         cellAutoOpenDisabled: '=?',
         slideBoxDisabled: '=?',
         customTemplateUrls: '=?',
+        draggableAutoScroll: '=?',
         onEventClick: '&',
         onEventTimesChanged: '&',
         onTimespanClick: '&',

src/directives/mwlCalendarDay.js

@@ -110,7 +110,8 @@ angular
         customTemplateUrls: '=?',
         cellModifier: '=',
         templateScope: '=',
-        dayViewTimePosition: '='
+        dayViewTimePosition: '=',
+        draggableAutoScroll: '='
       },
       controller: 'MwlCalendarDayCtrl as vm',
       bindToController: true

src/directives/mwlCalendarMonth.js

@@ -178,6 +178,7 @@ angular
         slideBoxDisabled: '=',
         customTemplateUrls: '=?',
         templateScope: '=',
+        draggableAutoScroll: '='
       },
       controller: 'MwlCalendarMonthCtrl as vm',
       link: function(scope, element, attrs, calendarCtrl) {

src/directives/mwlCalendarSlideBox.js

@@ -37,7 +37,8 @@ angular
         onEventClick: '=',
         cell: '=',
         customTemplateUrls: '=?',
-        templateScope: '='
+        templateScope: '=',
+        draggableAutoScroll: '='
       },
       bindToController: true
     };

src/directives/mwlCalendarWeek.js

@@ -99,7 +99,8 @@ angular
         onDateRangeSelect: '=',
         customTemplateUrls: '=?',
         cellModifier: '=',
-        templateScope: '='
+        templateScope: '=',
+        draggableAutoScroll: '='
       },
       controller: 'MwlCalendarWeekCtrl as vm',
       link: function(scope, element, attrs, calendarCtrl) {

src/directives/mwlDraggable.js

@@ -27,8 +27,13 @@ angular
         .css('transform', transformValue);
     }
 
+    var autoScroll = $parse($attrs.autoScroll)($scope);
+    if (typeof autoScroll === 'undefined') {
+      autoScroll = true;
+    }
+
     interact($element[0]).draggable({
-      autoScroll: true,
+      autoScroll: autoScroll,
       snap: snap,
       onstart: function(event) {
         angular.element(event.target).addClass('dragging-active');

src/templates/calendar.html

@@ -35,6 +35,7 @@
     custom-template-urls="vm.customTemplateUrls"
     template-scope="vm.templateScope"
     cell-auto-open-disabled="vm.cellAutoOpenDisabled"
+    draggable-auto-scroll="vm.draggableAutoScroll"
     ng-switch-when="month">
   </mwl-calendar-month>
 
@@ -52,6 +53,7 @@
     custom-template-urls="vm.customTemplateUrls"
     cell-modifier="vm.cellModifier"
     template-scope="vm.templateScope"
+    draggable-auto-scroll="vm.draggableAutoScroll"
     ng-switch-when="week">
   </mwl-calendar-week>
 
@@ -71,6 +73,7 @@
     cell-modifier="vm.cellModifier"
     template-scope="vm.templateScope"
     day-view-time-position="vm.dayViewTimePosition || 'default'"
+    draggable-auto-scroll="vm.draggableAutoScroll"
     ng-class="{
       'time-on-side' : vm.dayViewTimePosition === 'side',
       'time-hidden' : vm.dayViewTimePosition === 'hidden'

src/templates/calendarDayView.html

@@ -60,6 +60,7 @@
       snap-grid="{y: vm.dayViewEventChunkSize || 30, x: 50}"
       on-drag="vm.eventDragged(dayEvent.event, y / 30)"
       on-drag-end="vm.eventDragComplete(dayEvent.event, y / 30)"
+      auto-scroll="vm.draggableAutoScroll"
       mwl-resizable="dayEvent.event.resizable === true && dayEvent.event.endsAt"
       resize-edges="{top: true, bottom: true}"
       on-resize="vm.eventResized(dayEvent.event, edge, y / 30)"

src/templates/calendarMonthCellEvents.html

@@ -11,6 +11,7 @@
     tooltip-append-to-body="true"
     uib-tooltip-html="vm.calendarEventTitle.monthViewTooltip(event) | calendarTrustAsHtml"
     mwl-draggable="event.draggable === true"
-    drop-data="{event: event, draggedFromDate: day.date.toDate()}">
+    drop-data="{event: event, draggedFromDate: day.date.toDate()}"
+    auto-scroll="vm.draggableAutoScroll">
   </a>
 </div>

src/templates/calendarMonthView.html

@@ -27,7 +27,8 @@
       on-event-click="vm.onEventClick"
       cell="vm.view[vm.openDayIndex]"
       custom-template-urls="vm.customTemplateUrls"
-      template-scope="vm.templateScope">
+      template-scope="vm.templateScope"
+      draggable-auto-scroll="vm.draggableAutoScroll">
     </mwl-calendar-slide-box>
 
   </div>

src/templates/calendarSlideBox.html

@@ -6,7 +6,8 @@
         ng-repeat="event in vm.events | orderBy:'startsAt' track by event.calendarEventId"
         ng-class="event.cssClass"
         mwl-draggable="event.draggable === true"
-        drop-data="{event: event}">
+        drop-data="{event: event}"
+        auto-scroll="vm.draggableAutoScroll">
         <span class="pull-left event" ng-style="{backgroundColor: event.color.primary}"></span>
         &nbsp;
         <a

src/templates/calendarWeekView.html

@@ -65,6 +65,7 @@
               mwl-draggable="eventRow.event.draggable === true"
               axis="vm.showTimes ? 'xy' : 'x'"
               snap-grid="vm.showTimes ? {x: vm.dayColumnDimensions.width, y: vm.dayViewEventChunkSize || 30} : {x: vm.dayColumnDimensions.width}"
+              auto-scroll="vm.draggableAutoScroll"
               on-drag="vm.tempTimeChanged(eventRow.event, y / 30)"
               on-drag-end="vm.weekDragged(eventRow.event, x / vm.dayColumnDimensions.width, y / 30)"
               mwl-resizable="eventRow.event.resizable === true && eventRow.event.endsAt && !vm.showTimes"