decidim-forms 0.20.1 → 0.23.1

data/app/assets/javascripts/decidim/forms/admin/live_text_update.component.js.es6

@@ -0,0 +1,52 @@
+/**
+ * This component allows for an element's text value to be updated with the value
+ * of an input whenever this input's value is changed.
+ *
+ * @param {object} options
+ *
+ * Available options:
+ * {string} `inputSelector`:  The query selector to locate the input element
+ * {string} `targetSelector`: The query selector to locate the target element
+ * {number} `maxLength`: The maximum characters from the input value to be displayed in the target
+ * {string} `omission`: The string used to shorten the value to the given maxLength (e.g. "...")
+ * {string} `placeholder`: The string to be displayed in the target element when the input has no value
+ */
+((exports) => {
+  class LiveTextUpdateComponent {
+    constructor(options = {}) {
+      this.inputSelector = options.inputSelector;
+      this.targetSelector = options.targetSelector;
+      this.maxLength = options.maxLength;
+      this.omission = options.omission;
+      this.placeholder = options.placeholder;
+      this._bindEvent();
+      this._run();
+    }
+
+    _run() {
+      const $input = $(this.inputSelector);
+      const $target = $(this.targetSelector);
+
+      let text = $input.val() || this.placeholder;
+
+      // truncate string
+      if (text.length > this.maxLength) {
+        text = text.substring(0, this.maxLength - this.omission.length) + this.omission;
+      }
+
+      $target.text(text);
+    }
+
+    _bindEvent() {
+      const $input = $(this.inputSelector);
+      $input.on("change", this._run.bind(this));
+    }
+
+  }
+
+  exports.DecidimAdmin = exports.DecidimAdmin || {};
+  exports.DecidimAdmin.LiveTextUpdateComponent = LiveTextUpdateComponent;
+  exports.DecidimAdmin.createLiveTextUpdateComponent = (options) => {
+    return new LiveTextUpdateComponent(options);
+  }
+})(window);

data/app/assets/javascripts/decidim/forms/autosortable_checkboxes.component.js.es6

@@ -1,59 +1,79 @@
+/* eslint-disable no-ternary */
+
 ((exports) => {
   class AutosortableCheckboxesComponent {
     constructor(options = {}) {
       this.wrapperField = options.wrapperField;
       this._bindEvent();
-      this._run();
+      this._order();
+      this._normalize();
     }
 
-    _run() {
-      $(this.wrapperField).find("input[type=checkbox]").each((idx, el) => {
-        const $parentLabel = $(el).parents("label");
-
-        if ($(el).is(":checked")) {
-          const $lastSorted = this.wrapperField.find("label.sorted").last();
-
-          if ($lastSorted.length > 0) {
-            $lastSorted.removeClass("last-sorted");
-            $parentLabel.insertAfter($lastSorted);
-          } else {
-            $parentLabel.insertBefore(this.wrapperField.find("label:first-child"));
-          }
+    // Order by position
+    _order() {
+      const max = $(this.wrapperField).find(".collection-input").length;
+      $(this.wrapperField).find(".collection-input").each((idx, el) => {
+        const $positionField = $(el).find("input[name$=\\[position\\]]");
+        const position = $positionField.val()
+          ? parseInt($positionField.val(), 10)
+          : max;
 
-          $parentLabel.addClass("sorted");
-          $parentLabel.addClass("last-sorted");
-        } else {
-          const $lastUnsorted = this.wrapperField.find("label:not(.sorted)").last();
+        let $next = $(el).next();
+        while ($next.length > 0) {
+          const $nextPositionField = $next.find("input[name$=\\[position\\]]");
+          const nextPosition = $nextPositionField.val()
+            ? parseInt($nextPositionField.val(), 10)
+            : max;
 
-          if ($lastUnsorted.length > 0) {
-            $parentLabel.insertBefore($lastUnsorted);
-          } else {
-            $parentLabel.insertAfter(this.wrapperField.find("label:last-child"));
+          if (position > nextPosition) {
+            $next.insertBefore($(el));
           }
-
-          $parentLabel.removeClass("sorted");
+          $next = $next.next();
         }
       });
+    }
 
-      $(this.wrapperField).find("label").each((idx, el) => {
-        const $positionSelector = $(el).find(".position");
+    _findLastPosition() {
+      let lastPosition = 0;
+      $(this.wrapperField).find(".collection-input").each((idx, el) => {
         const $positionField = $(el).find("input[name$=\\[position\\]]");
+        const position = parseInt($positionField.val(), 10);
+        if (position > lastPosition) {
+          lastPosition = position;
+        }
+      });
+      return lastPosition;
+    }
 
-        if ($(el).hasClass("sorted")) {
+    _normalize() {
+      $(this.wrapperField).find(".collection-input .position").each((idx, el) => {
+        const $positionField = $(el).parent().find("input[name$=\\[position\\]]");
+        if ($positionField.val()) {
           $positionField.val(idx);
           $positionField.prop("disabled", false);
-          $positionSelector.html(`${idx + 1}. `);
-        } else {
-          $positionField.val("");
-          $positionField.prop("disabled", true);
-          $positionSelector.html("");
+          $(el).html(`${idx + 1}. `);
         }
       });
     }
 
     _bindEvent() {
-      $(this.wrapperField).find("input[type=checkbox]").on("change", () => {
-        this._run();
+      $(this.wrapperField).find("input[type=checkbox]").on("change", (el) => {
+        const $parentLabel = $(el.target).parents("label");
+        const $positionSelector = $parentLabel.find(".position");
+        const $positionField = $parentLabel.find("input[name$=\\[position\\]]");
+        const lastPosition = this._findLastPosition();
+
+        if (el.target.checked) {
+          $positionField.val(lastPosition + 1);
+          $positionField.prop("disabled", false);
+          $positionSelector.html(lastPosition + 1);
+        } else {
+          $positionField.val("");
+          $positionField.prop("disabled", true);
+          $positionSelector.html("");
+        }
+        this._order();
+        this._normalize();
       });
     }
   }

data/app/assets/javascripts/decidim/forms/display_conditions.component.js.es6

@@ -0,0 +1,203 @@
+/* eslint-disable no-ternary, no-plusplus */
+
+((exports) => {
+  class DisplayCondition {
+    constructor(options = {}) {
+      this.wrapperField = options.wrapperField;
+      this.type = options.type;
+      this.conditionQuestion = options.conditionQuestion;
+      this.answerOption = options.answerOption;
+      this.mandatory = options.mandatory;
+      this.value = options.value;
+      this.onFulfilled = options.onFulfilled;
+      this.bindEvent();
+    }
+
+    bindEvent() {
+      this.checkCondition();
+      this.getInputsToListen().on("change", this.checkCondition.bind(this));
+    }
+
+    getInputValue() {
+      const $conditionWrapperField = $(`.question[data-question-id='${this.conditionQuestion}']`);
+      const $textInput = $conditionWrapperField.find("textarea, input[type='text']:not([name$=\\[custom_body\\]])");
+
+      if ($textInput.length) {
+        return $textInput.val();
+      }
+
+      let multipleInput = [];
+
+      $conditionWrapperField.find(".radio-button-collection, .check-box-collection").find(".collection-input").each((idx, el) => {
+        const $input = $(el).find("input[name$=\\[body\\]]");
+        const checked = $input.is(":checked");
+
+        if (checked) {
+          const text = $(el).find("input[name$=\\[custom_body\\]]").val();
+          const value = $input.val();
+          const id = $(el).find("input[name$=\\[answer_option_id\\]]").val();
+
+          multipleInput.push({ id, value, text });
+        }
+      });
+
+      return multipleInput;
+    }
+
+    getInputsToListen() {
+      const $conditionWrapperField = $(`.question[data-question-id='${this.conditionQuestion}']`);
+      const $textInput = $conditionWrapperField.find("textarea, input[type='text']:not([name$=\\[custom_body\\]])");
+
+      if ($textInput.length) {
+        return $textInput;
+      }
+
+      return $conditionWrapperField.find(".collection-input").find("input:not([type='hidden'])");
+    }
+
+    checkAnsweredCondition(value) {
+      if (typeof (value) !== "object") {
+        return Boolean(value);
+      }
+
+      return Boolean(value.some((it) => it.value));
+    }
+
+    checkNotAnsweredCondition(value) {
+      return !this.checkAnsweredCondition(value);
+    }
+
+    checkEqualCondition(value) {
+      if (value.length) {
+        return value.some((it) => it.id === this.answerOption.toString());
+      }
+      return false;
+    }
+
+    checkNotEqualCondition(value) {
+      if (value.length) {
+        return value.every((it) => it.id !== this.answerOption.toString());
+      }
+      return false;
+    }
+
+    checkMatchCondition(value) {
+      let regexp = new RegExp(this.value, "i");
+
+      if (typeof (value) !== "object") {
+        return Boolean(value.match(regexp));
+      }
+
+      return value.some(function (it) {
+        return it.text
+          ? it.text.match(regexp)
+          : it.value.match(regexp)
+      });
+    }
+
+    checkCondition() {
+      const value = this.getInputValue();
+      let fulfilled = false;
+
+      switch (this.type) {
+      case "answered":
+        fulfilled = this.checkAnsweredCondition(value);
+        break;
+      case "not_answered":
+        fulfilled = this.checkNotAnsweredCondition(value);
+        break;
+      case "equal":
+        fulfilled = this.checkEqualCondition(value);
+        break;
+      case "not_equal":
+        fulfilled = this.checkNotEqualCondition(value);
+        break;
+      case "match":
+        fulfilled = this.checkMatchCondition(value);
+        break;
+      default:
+        fulfilled = false;
+        break;
+      }
+
+      this.onFulfilled(fulfilled);
+    }
+  }
+
+  class DisplayConditionsComponent {
+    constructor(options = {}) {
+      this.wrapperField = options.wrapperField;
+      this.conditions = {};
+      this.showCount = 0;
+      this.initializeConditions();
+    }
+
+    initializeConditions() {
+      const $conditionElements = this.wrapperField.find(".display-condition");
+
+      $conditionElements.each((idx, el) => {
+        const $condition = $(el);
+        const id = $condition.data("id");
+        this.conditions[id] = {};
+
+        this.conditions[id] = new DisplayCondition({
+          wrapperField: this.wrapperField,
+          type: $condition.data("type"),
+          conditionQuestion: $condition.data("condition"),
+          answerOption: $condition.data("option"),
+          mandatory: $condition.data("mandatory"),
+          value: $condition.data("value"),
+          onFulfilled: (fulfilled) => {
+            this.onFulfilled(id, fulfilled);
+          }
+        });
+      });
+    }
+
+    mustShow() {
+      const conditions = Object.values(this.conditions);
+      const mandatoryConditions = conditions.filter((condition) => condition.mandatory);
+      const nonMandatoryConditions = conditions.filter((condition) => !condition.mandatory);
+
+      if (mandatoryConditions.length) {
+        return mandatoryConditions.every((condition) => condition.fulfilled);
+      }
+
+      return nonMandatoryConditions.some((condition) => condition.fulfilled);
+
+    }
+
+    onFulfilled(id, fulfilled) {
+      this.conditions[id].fulfilled = fulfilled;
+
+      if (this.mustShow()) {
+        this.showQuestion();
+      }
+      else {
+        this.hideQuestion();
+      }
+    }
+
+    showQuestion() {
+      this.wrapperField.fadeIn();
+      this.wrapperField.find("input, textarea").prop("disabled", null);
+      this.showCount++;
+    }
+
+    hideQuestion() {
+      if (this.showCount) {
+        this.wrapperField.fadeOut();
+      }
+      else {
+        this.wrapperField.hide();
+      }
+
+      this.wrapperField.find("input, textarea").prop("disabled", "disabled");
+    }
+  }
+
+  exports.Decidim = exports.Decidim || {};
+  exports.Decidim.createDisplayConditions = (options) => {
+    return new DisplayConditionsComponent(options);
+  };
+})(window);

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

@@ -1,8 +1,10 @@
 // = require ./option_attached_inputs.component
 // = require ./autosortable_checkboxes.component
+// = require ./display_conditions.component
+// = require ./max_choices_alert.component
 
 ((exports) => {
-  const { createOptionAttachedInputs, createAutosortableCheckboxes } = exports.Decidim;
+  const { createOptionAttachedInputs, createAutosortableCheckboxes, createMaxChoicesAlertComponent, createDisplayConditions } = exports.Decidim;
 
   $(".radio-button-collection, .check-box-collection").each((idx, el) => {
     createOptionAttachedInputs({
@@ -12,9 +14,55 @@
     });
   });
 
+  $.unique($(".check-box-collection").parents(".answer")).each((idx, el) => {
+    const maxChoices = $(el).data("max-choices");
+    if (maxChoices) {
+      createMaxChoicesAlertComponent({
+        wrapperField: $(el),
+        controllerFieldSelector: "input[type=checkbox]",
+        controllerCollectionSelector: ".check-box-collection",
+        alertElement: $(el).find(".max-choices-alert"),
+        maxChoices: maxChoices
+      });
+    }
+  });
+
   $(".sortable-check-box-collection").each((idx, el) => {
     createAutosortableCheckboxes({
       wrapperField: $(el)
     })
   });
+
+  $(".answer-questionnaire .question[data-conditioned='true']").each((idx, el) => {
+    createDisplayConditions({
+      wrapperField: $(el)
+    });
+  });
+
+  const $form = $("form.answer-questionnaire");
+  if ($form.length > 0) {
+    $form.find("input, textarea, select").on("change", () => {
+      $form.data("changed", true);
+    });
+
+    const safePath = $form.data("safe-path").split("?")[0];
+    $(document).on("click", "a", (event) => {
+      window.exitUrl = event.currentTarget.href;
+    });
+    $(document).on("submit", "form", (event) => {
+      window.exitUrl = event.currentTarget.action;
+    });
+
+    window.onbeforeunload = () => {
+      const exitUrl = window.exitUrl;
+      const hasChanged = $form.data("changed");
+      window.exitUrl = null;
+
+      if (!hasChanged || (exitUrl && exitUrl.includes(safePath))) {
+        return null;
+      }
+
+      return "";
+    }
+  }
 })(window);

data/app/assets/javascripts/decidim/forms/max_choices_alert.component.js.es6

@@ -0,0 +1,44 @@
+((exports) => {
+  class MaxChoicesAlertComponent {
+    constructor(options = {}) {
+      this.wrapperField = options.wrapperField;
+      this.alertElement = options.alertElement;
+      this.controllerFieldSelector = options.controllerFieldSelector;
+      this.controllerCollectionSelector = options.controllerCollectionSelector;
+      this.maxChoices = options.maxChoices;
+      this.controllerSelector = this.wrapperField.find(this.controllerFieldSelector);
+      this._bindEvent();
+      this._run();
+    }
+
+    _run() {
+      const rows = this.wrapperField.find(this.controllerCollectionSelector);
+
+      let alert = false;
+
+      rows.each((rowIdx, row) => {
+        const checked = $(row).find(this.controllerFieldSelector).filter((checkboxIdx, checkbox) => $(checkbox).is(":checked"));
+
+        alert = alert || checked.length > this.maxChoices;
+      });
+
+      if (alert) {
+        this.alertElement.show();
+      }
+      else {
+        this.alertElement.hide();
+      }
+    }
+
+    _bindEvent() {
+      this.controllerSelector.on("change", () => {
+        this._run();
+      });
+    }
+  }
+
+  exports.Decidim = exports.Decidim || {};
+  exports.Decidim.createMaxChoicesAlertComponent = (options) => {
+    return new MaxChoicesAlertComponent(options);
+  };
+})(window);