Issue #3262370: FRDW - needs cleaner JS Ajax integration with Views (core ajax)

js/datepicker.js

@@ -3,7 +3,7 @@
  * Provides the Range datepicker functionality.
  */
 
-(function ($) {
+(function ($, once) {
 
   'use strict';
 
@@ -11,28 +11,33 @@
 
   Drupal.behaviors.facet_datepicker = {
     attach: function (context, settings) {
-      $('.facets-widget-datepicker input[data-type=datepicker-min]', context).on('change', autoSubmit);
-      $('.facets-widget-range_datepicker input[data-type=datepicker-min]', context).on('change', autoRangeSubmit);
-      $('.facets-widget-range_datepicker input[data-type=datepicker-max]', context).on('change', autoRangeSubmit);
+      $(once('date_range', '.facets-widget-range_datepicker > ul', context)).each(function (e) {
+        $(this).addClass('js-facets-widget');
+        $(this).on('change', autoRangeSubmit);
+        Drupal.attachBehaviors(this.parentNode, Drupal.settings);
+      });
+      $(once('datepicker', '.facets-widget-datepicker > ul', context)).each(function (e) {
+        $(this).addClass('js-facets-widget');
+        $(this).on('change', autoSubmit);
+        Drupal.attachBehaviors(this.parentNode, Drupal.settings);
+      });
 
       function autoSubmit() {
         const $this = $(this);
-        const facetId = $this.parents('.facets-widget-datepicker').find('ul').attr('data-drupal-facet-id');
-        const facetUrl = settings.facets.datepicker[facetId].url;
+        const facetUrl = $this.attr('data-url');
         let datePickerValue = toTimestamp($this.parents('.facets-widget-datepicker').find('input[data-type=datepicker-min]').val());
         let redirectUrl = window.location.href;
         if (datePickerValue) {
           redirectUrl = facetUrl.replace('__datepicker_min__', datePickerValue);
         }
-        window.location.href = redirectUrl;
+        $this.trigger('facets_filter', [redirectUrl]);
       }
 
       function autoRangeSubmit() {
         const $this = $(this);
         const parentDiv = $this.parents('.facets-widget-range_datepicker');
-        const facetId = parentDiv.find('ul').attr('data-drupal-facet-id');
         // Get url from target facet.
-        const facetUrl = settings.facets.datepicker[facetId].url;
+        const facetUrl = $this.attr('data-url');
         let min = toTimestamp(parentDiv.find('input[data-type=datepicker-min]').val());
         let max = toTimestamp(parentDiv.find('input[data-type=datepicker-max]').val());
         let redirectUrl = window.location.href;
@@ -45,14 +50,22 @@
         else if (!min && max > 0) {
           redirectUrl = facetUrl.replace('__range_datepicker_min__', '').replace('__range_datepicker_max__', max);
         }
-        window.location.href = redirectUrl;
+        else {
+          redirectUrl = facetUrl.replace('__range_datepicker_min__', '').replace('__range_datepicker_max__', '');
+        }
+        $this.trigger('facets_filter', [redirectUrl]);
       }
 
       function toTimestamp(strDate) {
-        let datum = Date.parse(strDate);
-        return datum / 1000;
+        if (!strDate) {
+          return null;
+        }
+        const date = new Date(strDate);
+        const utc =  Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),
+          date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
+        return utc / 1000;
       }
     }
   };
 
-})(jQuery);
+})(jQuery, once);