Merge branch 'release/2.6.17'

azavea · May 23, 2019 · 691bb2c · 691bb2c
2 parents 33aab21 + a39494c
commit 691bb2c
Show file tree

Hide file tree

Showing 17 changed files with 2,340 additions and 2,889 deletions.
diff --git a/python/cac_tripplanner/templates/base.html b/python/cac_tripplanner/templates/base.html
@@ -113,7 +113,7 @@
     <script src="{% static 'scripts/vendor/moment.js' %}"></script>
     <script src="{% static 'scripts/vendor/moment-duration-format.js' %}"></script>
     <script src="{% static 'scripts/vendor/route.js' %}"></script>
-    <script src="{% static 'scripts/vendor/slick.js' %}"></script>
+    <script src="{% static 'scripts/vendor/tiny-slider.js' %}"></script>
 
     <script src="{% static 'scripts/main/cac/cac.js' %}"></script>
     <script src="{% static 'scripts/main/cac/utils.js' %}"></script>

diff --git a/python/cac_tripplanner/templates/event-detail.html b/python/cac_tripplanner/templates/event-detail.html
@@ -53,15 +53,18 @@ <h3>More great events around Philly</h3>
 {%block jspage %}
 <script type="text/javascript">
 jQuery(document).ready(function ($) {
-    $('.detail-image-carousel').slick({
-        arrows: false,
-        dots: true,
-        autoplay: true,
-        fade: true,
-        cssEase: 'linear',
-        mobileFirst: true,
-        lazyLoad: 'ondemand',
-        slidesToShow: 1,
+    tns({
+        container: '.detail-image-carousel',
+        autoplayButton: false,
+        autoplayButtonOutput: false,
+        autoplayPosition: 'top',
+        controls: false,
+        controlPosition: 'bottom',
+        items: 1,
+        nav: true,
+        navPosition: 'bottom',
+        slideBy: 'page',
+        autoplay: true
     });
 });
 </script>

diff --git a/python/cac_tripplanner/templates/partials/destination-detail.html b/python/cac_tripplanner/templates/partials/destination-detail.html
@@ -3,11 +3,13 @@
 <article class="info-article">
     <header class="info-article-header">
         {% if destination.extradestinationpicture_set.exists %}
-        <div class="detail-image-carousel">
-            <img data-lazy="{% cropped_thumbnail destination 'wide_image' %}">
-            {% for extra_image in destination.extradestinationpicture_set.all %}
-            <img data-lazy="{% cropped_thumbnail extra_image 'wide_image' %}">
-            {% endfor %}
+        <div class="detail-image-carousel-container">
+            <div class="detail-image-carousel">
+                <img src="{% cropped_thumbnail destination 'wide_image' %}">
+                {% for extra_image in destination.extradestinationpicture_set.all %}
+                <img src="{% cropped_thumbnail extra_image 'wide_image' %}">
+                {% endfor %}
+            </div>
         </div>
         {% else %}
         <div class="info-place-image-hero"

diff --git a/python/cac_tripplanner/templates/partials/event-detail.html b/python/cac_tripplanner/templates/partials/event-detail.html
@@ -5,11 +5,13 @@
     <header class="info-article-header">
 
         {% if event.extraeventpicture_set.exists %}
-        <div class="detail-image-carousel">
-            <img data-lazy="{% cropped_thumbnail event "wide_image" %}">
-            {% for extra_image in event.extraeventpicture_set.all %}
-            <img data-lazy="{% cropped_thumbnail extra_image 'wide_image' %}">
-            {% endfor %}
+        <div class="detail-image-carousel-container">
+            <div class="detail-image-carousel">
+                <img src="{% cropped_thumbnail event "wide_image" %}">
+                {% for extra_image in event.extraeventpicture_set.all %}
+                <img src="{% cropped_thumbnail extra_image 'wide_image' %}">
+                {% endfor %}
+            </div>
         </div>
         {% else %}
         <div class="info-place-image-hero"

diff --git a/python/cac_tripplanner/templates/place-detail.html b/python/cac_tripplanner/templates/place-detail.html
@@ -53,15 +53,18 @@ <h3>More great, green places around Philly</h3>
 {%block jspage %}
 <script type="text/javascript">
 jQuery(document).ready(function ($) {
-    $('.detail-image-carousel').slick({
-        arrows: false,
-        dots: true,
-        autoplay: true,
-        fade: true,
-        cssEase: 'linear',
-        mobileFirst: true,
-        lazyLoad: 'ondemand',
-        slidesToShow: 1,
+    tns({
+        container: '.detail-image-carousel',
+        autoplayButton: false,
+        autoplayButtonOutput: false,
+        autoplayPosition: 'top',
+        controls: false,
+        controlPosition: 'bottom',
+        items: 1,
+        nav: true,
+        navPosition: 'bottom',
+        slideBy: 'page',
+        autoplay: true
     });
 });
 </script>

diff --git a/python/cac_tripplanner/templates/service-worker.js b/python/cac_tripplanner/templates/service-worker.js
@@ -1,7 +1,7 @@
 // Service Worker to support functioning as a PWA
 // https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
 
-var CACHE_NAME = 'cac_tripplanner_v21';
+var CACHE_NAME = 'cac_tripplanner_v22';
 
 var cacheFiles = {{ cache_files | safe }};
 

diff --git a/src/app/scripts/cac/control/cac-control-itinerary-list.js b/src/app/scripts/cac/control/cac-control-itinerary-list.js
@@ -19,22 +19,6 @@ CAC.Control.ItineraryList = (function (_, $, MapTemplates) {
             hiddenClass: 'hidden',
             itineraryList: '.routes-list',
             itineraryItem: '.route-summary'
-        },
-        // Settings for 'slick' carousel for swiping itineraries on mobile and in detail views
-        slick: {
-            arrows: false,
-            dots: true,
-            infinite: false,
-            mobileFirst: true,
-            variableWidth: false,
-            adaptiveHeight: true,
-            responsive : [
-                {
-                    // Breakpoint must match 'xxs' in _breakpoints.scss
-                    breakpoint: 480,
-                    settings: 'unslick'
-                }
-            ]
         }
     };
     var options = {};
@@ -112,19 +96,40 @@ CAC.Control.ItineraryList = (function (_, $, MapTemplates) {
     }
 
     /**
-     * Enable 'slick' carousel for swiping itineraries on mobile
+     * Enable carousel for swiping itineraries on mobile
      * @param {[object]} itineraries An open trip planner itinerary object, as returned from the plan endpoint
      */
     function enableCarousel(itineraries) {
         if (itineraries.length < 2) {
             return;
         }
 
-        $(options.selectors.itineraryList)
-            .slick(options.slick)
-            .on('afterChange', function(event, slick, currentSlide) {
-                $(options.selectors.itineraryItem).eq(currentSlide).triggerHandler('mouseenter');
-            });
+        var slider = tns({
+            container: options.selectors.itineraryList,
+            autoplayButton: false,
+            autoplayButtonOutput: false,
+            autoplayPosition: 'top',
+            controls: false,
+            controlPosition: 'bottom',
+            items: 1,
+            nav: true,
+            navPosition: 'bottom',
+            slideBy: 'page',
+            autoplay: false,
+            autoHeight: true,
+            responsive: {
+                320: {disable: false, controls: false, nav: true, autoHeight: true},
+                481: {disable: true}
+            }
+        });
+
+        // Highlight route on map on itinerary carousel swipe
+        slider.events.on('indexChanged', function(info) {
+            var items = $(options.selectors.itineraryItem);
+            if (items && items.length > info.displayIndex) {
+                items.eq(info.displayIndex).triggerHandler('mouseenter');
+            }
+        });
     }
 
     function getItineraryById(id) {
@@ -151,15 +156,6 @@ CAC.Control.ItineraryList = (function (_, $, MapTemplates) {
 
     function show() {
         $container.removeClass(options.selectors.hiddenClass);
-        layoutCarousel();
-    }
-
-    function layoutCarousel() {
-        // necessary hack for when first itinerary is single-mode
-        // but subsequent itineraries are multi-modal (hence taller).
-        if (itineraries.length > 1) {
-            $(options.selectors.itineraryList).slick('setPosition');
-        }
     }
 
     /**

diff --git a/src/app/styles/components/_carousel-dots.scss b/src/app/styles/components/_carousel-dots.scss
@@ -0,0 +1,33 @@
+.tns-nav {
+    bottom: -16px;
+    margin-bottom: 4px;
+    margin-top: 4px;
+
+    text-align: center;
+
+    button {
+        width: 18px;
+        height: 18px;
+        margin: 0;
+    }
+
+    button {
+        width: 18px;
+        height: 18px;
+    }
+
+    button:before {
+        font-size: 18px;
+    }
+}
+
+.tns-nav > [aria-controls] {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  margin: 0 6px;
+  border-radius: 50%;
+  background: #ddd;
+  border: 0;
+}
+.tns-nav > .tns-nav-active { background: #999; }
diff --git a/src/app/styles/components/_slick-dots.scss b/src/app/styles/components/_slick-dots.scss
diff --git a/src/app/styles/layouts/_info.scss b/src/app/styles/layouts/_info.scss
@@ -80,7 +80,7 @@
             padding: 0 1rem;
         }
 
-        .detail-image-carousel {
+        .detail-image-carousel-container {
             margin-left: -4rem;
             margin-right: -4rem;
         }

diff --git a/src/app/styles/main.scss b/src/app/styles/main.scss
@@ -10,7 +10,6 @@
 // Vendors
 @import
 'vendors/inputrange',
-'vendors/slick-theme',
 'vendors/custom-select';
 
 
@@ -26,6 +25,7 @@
 'components/alerts',
 'components/app-header',
 'components/app-footer',
+'components/carousel-dots',
 'components/map',
 'components/map-marker',
 'components/map-marker-popup',
@@ -38,7 +38,6 @@
 'components/sidebar-banner',
 'components/modal',
 'components/spinner',
-'components/slick-dots',
 'components/privacy-tos';