Merge pull request #1157 from flibbertigibbet/feature/kak/drag-tour-destinations#1112

Feature/kak/drag tour destinations#1112

Author: flibbertigibbet

python/cac_tripplanner/templates/base.html

@@ -100,6 +100,8 @@
     {% endif %}
     <script src="{% static 'scripts/vendor/index.js' %}"></script>
     <script src="{% static 'scripts/vendor/jquery.js' %}"></script>
+    <script src="{% static 'scripts/vendor/Sortable.js' %}"></script>
+    <script src="{% static 'scripts/vendor/jquery-sortable.js' %}"></script>
     <script src="{% static 'scripts/vendor/cartodb.uncompressed.js' %}"></script>
     <script src="{% static 'scripts/vendor/leaflet.awesome-markers.js' %}"></script>
     <script src="{% static 'scripts/vendor/js.storage.js' %}"></script>

src/app/scripts/cac/control/cac-control-directions.js

@@ -6,9 +6,12 @@ CAC.Control.Directions = (function (_, $, moment, Control, Places, Routing, User
 
     'use strict';
 
-    // Number of millis to wait on input changes before sending directions request
+    // Number of milliseconds to wait on input changes before sending directions request
     var DIRECTION_THROTTLE_MILLIS = 750;
 
+    // Number of milliseconds to wait on destination list reorder before requerying directions
+    var REORDER_TOUR_THROTTLE_MILLIS = 1000;
+
     var defaults = {
         selectors: {
             directions: '.directions-results',
@@ -119,6 +122,11 @@ CAC.Control.Directions = (function (_, $, moment, Control, Places, Routing, User
                     $(options.selectors.spinner).addClass(options.selectors.hiddenClass);
                 }
         });
+
+        tourListControl.events.on(tourListControl.eventNames.destinationsReordered,
+            function(e, destinations) {
+                reorderTourDestinations(destinations);
+        });
     }
 
     DirectionsControl.prototype = {
@@ -248,6 +256,17 @@ CAC.Control.Directions = (function (_, $, moment, Control, Places, Routing, User
         });
     }, DIRECTION_THROTTLE_MILLIS, {leading: true, trailing: true});
 
+    /**
+     * Reorder tour destination waypoints and end point and requery for directions.
+     * Throttled to cut down on requests.
+     */
+    var reorderTourDestinations = _.debounce(function(destinations) {  // jshint ignore:line
+        tour.destinations = destinations;
+        itineraryControl.clearItineraries();
+        mapControl.setDirectionsMarkers(null, null, true);
+        onTypeaheadSelectDone('destination', destinations);
+    }, REORDER_TOUR_THROTTLE_MILLIS, {leading: false, trailing: true});
+
     return DirectionsControl;
 
     function onTabShown(event, tabId) {

src/app/scripts/cac/control/cac-control-tour-list.js

@@ -27,11 +27,13 @@ CAC.Control.TourList = (function (_, $, MapTemplates) {
     var events = $({});
     var eventNames = {
         destinationClicked: 'cac:control:tourlist:destinationclicked',
-        destinationHovered: 'cac:control:tourlist:destinationhovered'
+        destinationHovered: 'cac:control:tourlist:destinationhovered',
+        destinationsReordered: 'cac:control:tourlist:destinationsreordered'
     };
 
     var $container = null;
     var destinations = [];
+    var tourId = null;
 
     function TourListControl(params) {
         options = $.extend({}, defaults, params);
@@ -52,16 +54,57 @@ CAC.Control.TourList = (function (_, $, MapTemplates) {
     return TourListControl;
 
     function setTourDestinations(tour) {
-        destinations = tour.destinations;
+        if (tour.id !== tourId) {
+            tourId = tour.id;
+            destinations = tour.destinations;
+        } else {
+            // tour unchanged; preserve user assigned destination order
+            tour.destinations = destinations;
+        }
 
         // Show the directions div and populate with tour destinations
         var html = MapTemplates.tourDestinationList(tour);
         $container.html(html);
 
         $(options.selectors.destinationDirectionsButton).on('click', onTourDestinationClicked);
         $(options.selectors.destinationItem).on('mouseenter', onTourDestinationHovered);
-
         $(options.selectors.destinationItem).on('mouseleave', onTourDestinationHoveredOut);
+
+        var $destinationList = $(options.selectors.destinationList);
+
+        // First remove sortable if already initialized
+        if ($destinationList.sortable('widget')) {
+            $destinationList.sortable('destroy');
+        }
+
+        // Set up sortable list for tours (not events)
+        if (tour.is_tour) {
+            var $sortableList = $destinationList.sortable({
+                animation: 150,
+                direction: 'vertical',
+                draggable: options.selectors.destinationItem,
+                // Allow scrolling while dragging by not using native HTML5
+                // See: https://github.com/SortableJS/Sortable/issues/935
+                forceFallback: true,
+                sort: true,
+                onUpdate: onDestinationListReordered
+            });
+        }
+    }
+
+    // Called when Sortable list of destinations gets updated
+    function onDestinationListReordered(e) {
+        var kids = e.to.children;
+        // First list item is the header; skip it
+        for (var i = 1; i < kids.length; i++) {
+            var k = kids[i];
+            var originalIndex = k.getAttribute('data-tour-place-index');
+            // assign property with new order
+            destinations[originalIndex].userOrder = i;
+        }
+
+        destinations = _.sortBy(destinations, 'userOrder');
+        events.trigger(eventNames.destinationsReordered, [destinations]);
     }
 
     /**

src/gulpfile.js

@@ -67,11 +67,22 @@ var scriptOrder = [
     '**/*.js',
 ];
 
+// Load jQuery and Sortable dependencies before the plugin
+var vendorScriptOrder = [
+    '**/jquery.js',
+    '**/Sortable*.js',
+    '**/jquery-sortable*.js',
+    '**/*.js'
+];
+
 // Helper for copying over dependency files
 var copyNpmFiles = function() {
-    return gulp.src(mainNPM({
-        showWarnings: true
-    }), {allowEmpty: true, ignore: '**/*gulpfile*'});
+    return pump([
+        gulp.src(mainNPM({
+            showWarnings: true
+        }), {allowEmpty: true, ignore: '**/*gulpfile*'}),
+        order(vendorScriptOrder)
+    ]);
 };
 
 gulp.task('collectstatic', function (done) {

src/karma/karma-coverage.conf.js

@@ -18,6 +18,8 @@ module.exports = function(config) {
       // console polyfills
       '/srv/cac/scripts/vendor/index.js',
       '/srv/cac/scripts/vendor/jquery.js',
+      '/srv/cac/scripts/vendor/Sortable.js',
+      '/srv/cac/scripts/vendor/jquery-sortable.js',
       '/srv/cac/scripts/vendor/lodash.js',
       // load moment before other vendor scripts; is requirement for bootstrap datetime picker
       '/srv/cac/scripts/vendor/moment.js',

src/karma/karma-dev.conf.js

@@ -18,6 +18,8 @@ module.exports = function(config) {
       // console polyfills
       '/srv/cac/scripts/vendor/index.js',
       '/srv/cac/scripts/vendor/jquery.js',
+      '/srv/cac/scripts/vendor/Sortable.js',
+      '/srv/cac/scripts/vendor/jquery-sortable.js',
       '/srv/cac/scripts/vendor/lodash.js',
       '/srv/cac/scripts/vendor/handlebars.js',
       // load moment before other vendor scripts; is requirement for bootstrap datetime picker