decidim-core 0.20.1 → 0.23.1

data/app/assets/javascripts/decidim/floating_help.js.es6

@@ -28,6 +28,13 @@ $(function() {
   $(".floating-helper-container").each((_index, elem) => {
     let id = $(elem).data("help-id");
 
+    $(
+      ".floating-helper__trigger, .floating-helper__content-close",
+      elem
+    ).on("click", (ev) => {
+      ev.preventDefault();
+    });
+
     if (!dismissedHelpers.includes(id)) {
       $(".floating-helper", elem).foundation("toggle");
       $(".floating-helper__wrapper", elem).foundation("toggle");

data/app/assets/javascripts/decidim/form_filter.component.js.es6

@@ -11,8 +11,10 @@
       this.$form = $form;
       this.id = this.$form.attr("id") || this._getUID();
       this.mounted = false;
+      this.changeEvents = true;
 
-      this._onFormChange = this._onFormChange.bind(this);
+      this._updateInitialState();
+      this._onFormChange = exports.delayed(this, this._onFormChange.bind(this));
       this._onPopState = this._onPopState.bind(this);
 
       if (window.Decidim.PopStateHandler) {
@@ -45,7 +47,18 @@
     mountComponent() {
       if (this.$form.length > 0 && !this.mounted) {
         this.mounted = true;
-        this.$form.on("change", "input, select", this._onFormChange);
+
+        this.$form.on("change", "input:not([data-disable-dynamic-change]), select:not([data-disable-dynamic-change])", this._onFormChange);
+
+        this.currentFormRequest = null;
+        this.$form.on("ajax:beforeSend", (e) => {
+          if (this.currentFormRequest) {
+            this.currentFormRequest.abort();
+          }
+          this.currentFormRequest = e.originalEvent.detail[0];
+        });
+
+        exports.theCheckBoxesTree.setContainerForm(this.$form);
 
         exports.Decidim.History.registerCallback(`filters-${this.id}`, (state) => {
           this._onPopState(state);
@@ -54,27 +67,36 @@
     }
 
     /**
-     * Finds the current location.
+     * Sets path in the browser history with the initial filters state, to allow to restoring it when using browser history.
      * @private
-     * @returns {String} - Returns the current location.
+     * @returns {Void} - Returns nothing.
      */
-    _getLocation() {
-      return exports.location.toString();
+    _updateInitialState() {
+      const [initialPath, initialState] = this._currentStateAndPath();
+      initialState._path = initialPath
+      exports.Decidim.History.replaceState(null, initialState);
     }
 
     /**
-     * Finds the values of the location params that match the given regexp.
+     * Finds the current location.
+     * @param {boolean} withHost - include the host part in the returned location
      * @private
-     * @param {Regexp} regex - a Regexp to match the params.
-     * @returns {String[]} - An array of values of the params that match the regexp.
+     * @returns {String} - Returns the current location.
      */
-    _getLocationParams(regex) {
-      const location = decodeURIComponent(this._getLocation());
-      let values = location.match(regex);
-      if (values) {
-        values = values.map((val) => val.match(/=(.*)/)[1]);
+    _getLocation(withHost = true) {
+      const state = exports.Decidim.History.state();
+      let path = "";
+
+      if (state && state._path) {
+        path = state._path;
+      } else {
+        path = exports.location.pathname + exports.location.search + exports.location.hash;
       }
-      return values;
+
+      if (withHost) {
+        return exports.location.origin + path;
+      }
+      return path;
     }
 
     /**
@@ -132,7 +154,9 @@
      * @returns {Void} - Returns nothing.
      */
     _clearForm() {
-      this.$form.find("input[type=checkbox]").attr("checked", false);
+      this.$form.find("input[type=checkbox]").each((index, element) => {
+        element.checked = element.indeterminate = false;
+      });
       this.$form.find("input[type=radio]").attr("checked", false);
       this.$form.find(".data-picker").each((_index, picker) => {
         exports.theDataPicker.clear(picker);
@@ -153,6 +177,7 @@
      * @returns {Void} - Returns nothing.
      */
     _onPopState(state) {
+      this.changeEvents = false;
       this._clearForm();
 
       const filterParams = this._parseLocationFilterValues();
@@ -164,23 +189,25 @@
         const fieldIds = Object.keys(filterParams);
 
         // Iterate the filter params and set the correct form values
-        fieldIds.forEach((fieldId) => {
-          let field = null;
+        fieldIds.forEach((fieldName) => {
+          let value = filterParams[fieldName];
 
-          // Since we are using Ruby on Rails generated forms the field ids for a
-          // checkbox or a radio button has the following form: filter_${key}_${value}
-          field = this.$form.find(`input#filter_${fieldId}_${filterParams[fieldId]}`);
-
-          if (field.length > 0) {
-            field[0].checked = true;
+          if (Array.isArray(value)) {
+            let checkboxes = this.$form.find(`input[type=checkbox][name="filter[${fieldName}][]"]`);
+            window.theCheckBoxesTree.updateChecked(checkboxes, value);
           } else {
-            // If the field is not a checkbox neither a radio it means is a input or a select.
-            // Ruby on Rails ensure the ids are constructed like this: filter_${key}
-            field = this.$form.find(`input#filter_${fieldId},select#filter_${fieldId}`);
-
-            if (field.length > 0) {
-              field.val(filterParams[fieldId]);
-            }
+            this.$form.find(`*[name="filter[${fieldName}]"]`).each((index, element) => {
+              switch (element.type) {
+              case "hidden":
+                break;
+              case "radio":
+              case "checkbox":
+                element.checked = value === element.value;
+                break;
+              default:
+                element.value = value;
+              }
+            });
           }
         });
       }
@@ -197,6 +224,8 @@
       if (this.popStateSubmiter) {
         exports.Rails.fire(this.$form[0], "submit");
       }
+
+      this.changeEvents = true;
     }
 
     /**
@@ -205,26 +234,45 @@
      * @returns {Void} - Returns nothing.
      */
     _onFormChange() {
-      const formAction = this.$form.attr("action");
-      const params = this.$form.serialize();
+      if (!this.changeEvents) {
+        return;
+      }
 
-      let newUrl = "";
-      let newState = {};
+      const [newPath, newState] = this._currentStateAndPath();
+      const path = this._getLocation(false);
+
+      if (newPath === path) {
+        return;
+      }
 
       exports.Rails.fire(this.$form[0], "submit");
+      exports.Decidim.History.pushState(newPath, newState);
+    }
+
+    /**
+     * Calculates the path and the state associated to the filters inputs.
+     * @private
+     * @returns {Array} - Returns an array with the path and the state for the current filters state.
+     */
+    _currentStateAndPath() {
+      const formAction = this.$form.attr("action");
+      const params = this.$form.find(":not(.ignore-filters)").find("select:not(.ignore-filter), input:not(.ignore-filter)").serialize();
+
+      let path = "";
+      let state = {};
 
       if (formAction.indexOf("?") < 0) {
-        newUrl = `${formAction}?${params}`;
+        path = `${formAction}?${params}`;
       } else {
-        newUrl = `${formAction}&${params}`;
+        path = `${formAction}&${params}`;
       }
 
       // Stores picker information for selected values (value, text and link) in the state object
       $(".data-picker", this.$form).each((_index, picker) => {
-        newState[picker.id] = exports.theDataPicker.save(picker);
+        state[picker.id] = exports.theDataPicker.save(picker);
       })
 
-      exports.Decidim.History.pushState(newUrl, newState);
+      return [path, state];
     }
 
     /**

data/app/assets/javascripts/decidim/form_filter.component.test.js

@@ -2,8 +2,10 @@
 /* eslint-disable id-length */
 window.$ = require("jquery");
 
+require("./delayed.js.es6");
 require("./history.js.es6");
 require("./data_picker.js.es6");
+require("./check_boxes_tree.js.es6");
 require("./form_filter.component.js.es6");
 
 const { Decidim: { FormFilterComponent } } = window;
@@ -11,19 +13,19 @@ const { Decidim: { FormFilterComponent } } = window;
 describe("FormFilterComponent", () => {
   const selector = "form#new_filter";
   let subject = null;
-  let scopesPickerState = {filter_scope_id: [{ url: "picker_url_3", value: 3, text: "Scope 3"}, { url: "picker_url_4", value: 4, text: "Scope 4"}]} // eslint-disable-line camelcase
+  let scopesPickerState = {filter_somerandomid_scope_id: [{ url: "picker_url_3", value: 3, text: "Scope 3"}, { url: "picker_url_4", value: 4, text: "Scope 4"}]} // eslint-disable-line camelcase
 
   beforeEach(() => {
     let form = `
       <form id="new_filter" action="/filters" method="get">
         <fieldset>
-          <div id="filter_scope_id" class="data-picker picker-multiple" data-picker-name="filter[scope_id]">
+          <div id="filter_somerandomid_scope_id" class="data-picker picker-multiple" data-picker-name="filter[scope_id]">
             <div class="picker-values">
               <div>
-                <a href="picker_url_1" data-picker-value="1">Scope 1</a>
+                <a href="picker_url_1" data-picker-value="3">Scope 1</a>
               </div>
               <div>
-                <a href="picker_url_2" data-picker-value="1">Scope 2</a>
+                <a href="picker_url_2" data-picker-value="4">Scope 2</a>
               </div>
             </div>
             <div class="picker-prompt">
@@ -33,16 +35,43 @@ describe("FormFilterComponent", () => {
         </fieldset>
 
         <fieldset>
-          <select id="filter_category_id" name="filter[category_id]">
+          <select id="filter_somerandomid_category_id" name="filter[category_id]">
             <option value="1">Category 1</option>
             <option value="2">Category 2</option>
           </select>
         </fieldset>
+
+        <fieldset>
+          <input type="hidden" name="filter[state][]" id="filter_state_" value="">
+          <label data-global-checkbox="" for="filter_state_all">
+            <input data-checkboxes-tree="state-options" value="" type="checkbox" name="filter[state][]" id="filter_state_all" class="ignore-filter">
+            All
+          </label>
+          <div id="state-options" class="filters__subfilters ">
+            <label data-children-checkbox="" for="filter_state_accepted">
+              <input value="accepted" type="checkbox" name="filter[state][]" id="filter_state_accepted" class="ignore-filter">
+              Accepted
+            </label>
+            <label data-children-checkbox="" for="filter_state_evaluating">
+              <input value="evaluating" type="checkbox" name="filter[state][]" id="filter_state_evaluating" class="ignore-filter">
+              Evaluating
+            </label>
+            <label data-children-checkbox="" for="filter_state_not_answered">
+              <input value="not_answered" type="checkbox" name="filter[state][]" id="filter_state_not_answered" class="ignore-filter">
+              Not answered
+            </label>
+            <label data-children-checkbox="" for="filter_state_rejected">
+              <input value="rejected" type="checkbox" name="filter[state][]" id="filter_state_rejected" class="ignore-filter">
+              Rejected
+            </label>
+          </div>
+        </fieldset>
       </form>
     `;
     $("body").append(form);
 
     window.theDataPicker = new window.Decidim.DataPicker($(".data-picker"));
+    window.theCheckBoxesTree = new window.Decidim.CheckBoxesTree();
     subject = new FormFilterComponent($(document).find("form"));
   });
 
@@ -73,7 +102,7 @@ describe("FormFilterComponent", () => {
     });
 
     it("binds the form change event", () => {
-      expect(subject.$form.on).toHaveBeenCalledWith("change", "input, select", subject._onFormChange);
+      expect(subject.$form.on).toHaveBeenCalledWith("change", "input:not([data-disable-dynamic-change]), select:not([data-disable-dynamic-change])", subject._onFormChange);
     });
 
     describe("onpopstate event", () => {
@@ -90,13 +119,18 @@ describe("FormFilterComponent", () => {
       });
 
       it("sets the correct form fields based on the current location", () => {
-        spyOn(subject, "_getLocation").and.returnValue("/filters?filter[scope_id][]=3&filter[scope_id][]=4&filter[category_id]=2");
+        const path = "/filters?filter[scope_id][]=3&filter[scope_id][]=4&filter[category_id]=2&filter[state][]=&filter[state][]=accepted&filter[state][]=evaluating";
+        spyOn(subject, "_getLocation").and.returnValue(path);
         window.onpopstate({ isTrusted: true, state: scopesPickerState});
 
-        expect($(selector).find("select#filter_category_id").val()).toEqual("2");
-        expect($(`${selector} #filter_scope_id .picker-values div input`).map(function(_index, input) {
+        expect($(selector).find("select#filter_somerandomid_category_id").val()).toEqual("2");
+        expect($(`${selector} #filter_somerandomid_scope_id .picker-values div input`).map(function(_index, input) {
           return $(input).val();
         }).get()).toEqual(["3", "4"]);
+
+        let checked = Array.from($(`${selector} input[name="filter[state][]"]:checked`));
+        expect(checked.map((input) => input.value)).toEqual(["", "accepted", "evaluating"]);
+        expect(checked.filter((input) => input.indeterminate).map((input) => input.value)).toEqual([""]);
       });
     });
   });

data/app/assets/javascripts/decidim/form_validator.es6

@@ -0,0 +1,61 @@
+((exports) => {
+  const DEFAULT_MESSAGES = {
+    correctErrors: "There are errors on the form, please correct them."
+  };
+  let MESSAGES = DEFAULT_MESSAGES;
+
+  class FormValidator {
+    static configureMessages(messages) {
+      MESSAGES = exports.$.extend(DEFAULT_MESSAGES, messages);
+    }
+
+    constructor(form) {
+      this.$form = form;
+
+      this.$form.on("form-error.decidim", () => {
+        this.handleError();
+      });
+    }
+
+    handleError() {
+      this.announceFormError();
+
+      $(".is-invalid-input:first", this.$form).focus();
+    }
+
+    /**
+     * This announces immediately to the screen reader that there are errors on
+     * the form that need to be fixed. Does not work on all screen readers but
+     * works e.g. in Windows+Firefox+NVDA and macOS+Safari+VoiceOver
+     * combinations.
+     *
+     * @returns {undefined}
+     */
+    announceFormError() {
+      let $announce = $(".sr-announce", this.$form);
+      if ($announce.length > 0) {
+        $announce.remove();
+      }
+      $announce = $("<div />");
+      $announce.attr("class", "sr-announce show-for-sr");
+      $announce.attr("aria-live", "assertive");
+      this.$form.prepend($announce);
+
+      exports.setTimeout(() => {
+        $announce.text(MESSAGES.correctErrors);
+      }, 100);
+    }
+  }
+
+  exports.Decidim = exports.Decidim || {};
+  exports.Decidim.FormValidator = FormValidator;
+
+  exports.$(() => {
+    exports.$("form").each((_i, el) => {
+      exports.$(el).data("form-validator", new FormValidator(exports.$(el)));
+    });
+    exports.$(document).on("forminvalid.zf.abide", function(_ev, form) {
+      form.trigger("form-error.decidim");
+    })
+  });
+})(window);

data/app/assets/javascripts/decidim/foundation.js.es6

@@ -1,28 +1,28 @@
-// = require foundation.core.js
-// = require foundation.util.box.js
-// = require foundation.util.imageLoader.js
-// = require foundation.util.keyboard.js
-// = require foundation.util.mediaQuery.js
-// = require foundation.util.motion.js
-// = require foundation.util.nest.js
-// = require foundation.util.timer.js
-// = require foundation.util.touch.js
-// = require foundation.util.triggers.js
-// = require foundation.abide.js
-// = require foundation.accordion.js
-// = require foundation.accordionMenu.js
-// = require foundation.drilldown.js
-// = require foundation.dropdown.js
-// = require foundation.dropdownMenu.js
-// = require foundation.equalizer.js
-// = require foundation.interchange.js
-// = require foundation.magellan.js
-// = require foundation.offcanvas.js
-// = require foundation.responsiveMenu.js
-// = require foundation.responsiveToggle.js
-// = require foundation.reveal.js
-// = require foundation.sticky.js
-// = require foundation.tabs.js
-// = require foundation.toggler.js
-// = require foundation.tooltip.js
-// = require foundation.responsiveAccordionTabs.js
+// = require plugins/foundation.core.js
+// = require plugins/foundation.util.box.js
+// = require plugins/foundation.util.imageLoader.js
+// = require plugins/foundation.util.keyboard.js
+// = require plugins/foundation.util.mediaQuery.js
+// = require plugins/foundation.util.motion.js
+// = require plugins/foundation.util.nest.js
+// = require plugins/foundation.util.timer.js
+// = require plugins/foundation.util.touch.js
+// = require plugins/foundation.util.triggers.js
+// = require plugins/foundation.abide.js
+// = require plugins/foundation.accordion.js
+// = require plugins/foundation.accordionMenu.js
+// = require plugins/foundation.drilldown.js
+// = require plugins/foundation.dropdown.js
+// = require plugins/foundation.dropdownMenu.js
+// = require plugins/foundation.equalizer.js
+// = require plugins/foundation.interchange.js
+// = require plugins/foundation.magellan.js
+// = require plugins/foundation.offcanvas.js
+// = require plugins/foundation.responsiveMenu.js
+// = require plugins/foundation.responsiveToggle.js
+// = require plugins/foundation.reveal.js
+// = require plugins/foundation.sticky.js
+// = require plugins/foundation.tabs.js
+// = require plugins/foundation.toggler.js
+// = require plugins/foundation.tooltip.js
+// = require plugins/foundation.responsiveAccordionTabs.js

data/app/assets/javascripts/decidim/geocoding.js.es6

@@ -0,0 +1,60 @@
+// = require tribute
+// = require decidim/geocoding/format_address
+
+((exports) => {
+  const $ = exports.$; // eslint-disable-line
+  const Tribute = exports.Tribute;
+
+  $(() => {
+    $("[data-decidim-geocoding]").each((_i, el) => {
+      const $input = $(el);
+      const $fieldContainer = $input.parent();
+
+      $fieldContainer.addClass("has-tribute");
+
+      const tribute = new Tribute(
+        {
+          autocompleteMode: true,
+          // autocompleteSeparator: / \+ /, // See below, requires Tribute update
+          allowSpaces: true,
+          positionMenu: false,
+          replaceTextSuffix: "",
+          menuContainer: $fieldContainer.get(0),
+          noMatchTemplate: null,
+          values: (text, cb) => {
+            $input.trigger("geocoder-suggest.decidim", [text, cb]);
+          }
+        }
+      );
+
+      // Port https://github.com/zurb/tribute/pull/406
+      // This changes the autocomplete separator from space to " + " so that
+      // we can do searches such as "streetname 4" including a space. Otherwise
+      // this would do two separate searches for "streetname" and "4".
+      tribute.range.getLastWordInText = (text) => {
+        const final = text.replace(/\u00A0/g, " ");
+        const wordsArray = final.split(/ \+ /);
+        const worldsCount = wordsArray.length - 1;
+
+        return wordsArray[worldsCount].trim();
+      };
+
+      tribute.attach($input.get(0));
+
+      $input.on("tribute-replaced", function(ev) {
+        const selectedItem = ev.detail.item.original;
+        $input.trigger("geocoder-suggest-select.decidim", [selectedItem]);
+
+        // Not all geocoding autocomplete APIs include the coordinates in the
+        // suggestions response. Therefore, some APIs may require additional
+        // query for the coordinates, which should trigger this event for the
+        // input element.
+        if (selectedItem.coordinates) {
+          $input.trigger("geocoder-suggest-coordinates.decidim", [selectedItem.coordinates]);
+        }
+      });
+
+      $input.data("geocoder-tribute", tribute);
+    });
+  });
+})(window);