decidim-core 0.21.0 → 0.22.0

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

@@ -1,5 +1,5 @@
 $(() => {
-  const $allDiffViews = $(".row[id^=diff_view_]");
+  const $allDiffViews = $(".row.diff_view");
 
   $(document).on("click", ".diff-view-by a.diff-view-mode", (event) => {
     event.preventDefault();
@@ -8,11 +8,11 @@ $(() => {
 
     if ($target.attr("id") === "diff-view-unified") {
       $allDiffViews.addClass("hide");
-      $(".row#diff_view_unified_escaped").removeClass("hide");
+      $(".row.diff_view_unified_escaped").removeClass("hide");
     }
     if ($target.attr("id") === "diff-view-split") {
       $allDiffViews.addClass("hide");
-      $(".row#diff_view_split_escaped").removeClass("hide");
+      $(".row.diff_view_split_escaped").removeClass("hide");
     }
   })
 
@@ -20,8 +20,8 @@ $(() => {
     event.preventDefault();
     const $target = $(event.target);
     $target.parents(".is-dropdown-submenu-parent").find("#diff-view-selected").text($target.text());
-    const $visibleDiffViewsId = $allDiffViews.not(".hide").first().attr("id").split("_").slice(0, -1).join("_");
-    const $visibleDiffViews = $allDiffViews.filter(`[id^=${$visibleDiffViewsId}]`)
+    const $visibleDiffViewsId = $allDiffViews.not(".hide").first().attr("id").split("_").slice(1, -1).join("_");
+    const $visibleDiffViews = $allDiffViews.filter(`[id*=${$visibleDiffViewsId}]`)
 
     if ($target.attr("id") === "escaped-html") {
       $visibleDiffViews.filter("[id$=_unescaped]").addClass("hide");
@@ -32,6 +32,4 @@ $(() => {
       $visibleDiffViews.filter("[id$=_unescaped]").removeClass("hide");
     }
   })
-
-
 });

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

@@ -0,0 +1,32 @@
+((exports) => {
+  // This will apply some fixes for the Foundation dropdown menu element
+  // according to W3C instructions at:
+  // https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html
+  //
+  // NOTE:
+  // This needs to run AFTER Foundation has been initialized because those
+  // initializers will affect the drop down menu elements.
+  const fixDropdownMenus = () => {
+    exports.$("[data-dropdown-menu]").each((_i, element) => {
+      // This will break navigation on macOS VoiceOver app since it will let the
+      // user to focus on the li element instead of the <a> element where we
+      // actually need the focus to be in.
+      $("li.is-dropdown-submenu-parent", element).removeAttr("aria-haspopup").removeAttr("aria-label");
+      // Foundation marks the wrong role for the submenu elements
+      $("ul.is-dropdown-submenu", element).attr("role", "menu");
+    })
+  }
+
+  // Ensure the first element is always focused when a dropdown is opened as
+  // this would not always happen when using a screen reader. If this is not
+  // done, the screen reader will stay quiet when the menu opens which can lead
+  // to the blind user not understanding the menu has opened.
+  exports.$(() => {
+    exports.$("[data-dropdown-menu]").on("show.zf.dropdownMenu", (_i, element) => {
+      exports.$("li:first > a", element).focus();
+    });
+  });
+
+  exports.Decidim = exports.Decidim || {};
+  exports.Decidim.fixDropdownMenus = fixDropdownMenus;
+})(window);

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

@@ -0,0 +1,69 @@
+((exports) => {
+  const { icon } = exports.Decidim;
+
+  const EXCLUDE_CLASSES = [
+    "card--list__data__icon",
+    "footer-social__icon",
+    "logo-cityhall"
+  ];
+  const EXCLUDE_REL = ["license", "decidim"];
+
+  const DEFAULT_MESSAGES = {
+    externalLink: "External link"
+  };
+  let MESSAGES = DEFAULT_MESSAGES;
+
+  class ExternalLink {
+    static configureMessages(messages) {
+      MESSAGES = exports.$.extend(DEFAULT_MESSAGES, messages);
+    }
+
+    constructor(link) {
+      this.$link = link;
+
+      this.setup();
+    }
+
+    setup() {
+      if (EXCLUDE_CLASSES.some((cls) => this.$link.hasClass(cls))) {
+        return;
+      }
+      if (
+        EXCLUDE_REL.some((rel) => {
+          const linkRels = `${this.$link.attr("rel")}`.split(" ");
+          return linkRels.indexOf(rel) > -1;
+        })
+      ) {
+        return;
+      }
+
+      this.$link.addClass("external-link-container");
+      this.$link.append(` ${this.generateElement()}`);
+    }
+
+    generateElement() {
+      let content = `${this.generateIcon()}${this.generateScreenReaderLabel()}`;
+
+      return `<span class="external-link-indicator">${content}</span>`;
+    }
+
+    generateIcon() {
+      return icon("external-link");
+    }
+
+    generateScreenReaderLabel() {
+      return `<span class="show-for-sr">(${MESSAGES.externalLink})</span>`;
+    }
+  }
+
+  exports.Decidim = exports.Decidim || {};
+  exports.Decidim.ExternalLink = ExternalLink;
+
+  $(document).ready(function() {
+    $('a[target="_blank"]').each((_i, elem) => {
+      const $link = $(elem);
+
+      $link.data("external-link", new ExternalLink($link));
+    });
+  });
+})(window);

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

@@ -48,7 +48,7 @@
       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) => {

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

@@ -22,10 +22,10 @@ describe("FormFilterComponent", () => {
           <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">
@@ -44,7 +44,7 @@ describe("FormFilterComponent", () => {
         <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" is_root_check_box="true" value="" type="checkbox" name="filter[state][]" id="filter_state_all" class="ignore-filter">
+            <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 ">
@@ -102,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", () => {

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/icon.js.es6

@@ -0,0 +1,42 @@
+((exports) => {
+  const DEFAULT_ATTRIBUTES = {
+    role: "none presentation"
+  };
+
+  /**
+   * Generates a Decidim icon element and returns it as a string.
+   * @param {String} iconKey - the key of the icon to be generated
+   * @param {Object} attributes - extra attributes to define for the icon SVG
+   * @param {int} wait - number of milliseconds to wait before executing the function.
+   * @private
+   * @returns {Void} - Returns nothing.
+   */
+  exports.Decidim.icon = (iconKey, attributes = {}) => {
+    const iconAttributes = exports.$.extend(DEFAULT_ATTRIBUTES, attributes);
+    const title = iconAttributes.title || iconAttributes.ariaLabel;
+    Reflect.deleteProperty(iconAttributes, "title");
+
+    const htmlAttributes = {
+      "class": `icon icon--${iconKey}`
+    };
+    Object.keys(iconAttributes).forEach((key) => {
+      // Convert the key to dash-format.
+      const newKey = key.replace(/([A-Z])/g, (ucw) => `-${ucw[0].toLowerCase()}`);
+      if (typeof htmlAttributes[key] === "undefined") {
+        htmlAttributes[newKey] = iconAttributes[key];
+      } else {
+        htmlAttributes[newKey] = `${htmlAttributes[newKey]} ${iconAttributes[key]}`;
+      }
+    });
+
+    const iconsPath = exports.Decidim.config.get("icons_path");
+    const elHtml = `<svg><use href="${iconsPath}#icon-${iconKey}"></use></svg>`;
+    const $el = $(elHtml);
+    if (title) {
+      $el.prepend(`<title>${title}</title>`);
+    }
+    $el.attr(htmlAttributes);
+
+    return $("<div />").append($el).html();
+  };
+})(window);

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

@@ -0,0 +1,61 @@
+/**
+ * Makes the #select-identity-button to open a popup for the user to
+ * select with which identity he wants to perform an action.
+ *
+ */
+$(document).ready(function () {
+
+  let button = $("#select-identity-button"),
+      identitiesUrl = null,
+      userIdentitiesDialog = $("#user-identities");
+
+  if (userIdentitiesDialog.length) {
+    identitiesUrl = userIdentitiesDialog.data("reveal-identities-url");
+
+    button.click(function () {
+      $.ajax(identitiesUrl).done(function(response) {
+        userIdentitiesDialog.html(response).foundation("open");
+        button.trigger("ajax:success")
+      });
+    });
+  }
+});
+
+
+/**
+ * Manage the identity selector for endorsements.
+ *
+ */
+$(document).ready(function () {
+  $("#select-identity-button").on("ajax:success", function() {
+    // once reveal popup has been rendered register event callbacks
+    $("#user-identities ul.reveal__list li").each(function(index, elem) {
+      let liTag = $(elem)
+      liTag.on("click", function() {
+        let method = liTag.data("method"),
+            urlDataAttr = null;
+        if (method === "POST") {
+          urlDataAttr = "create_url";
+        } else {
+          urlDataAttr = "destroy_url";
+        }
+        $.ajax({
+          url: liTag.data(urlDataAttr),
+          method: method,
+          dataType: "script",
+          success: function() {
+            if (liTag.hasClass("selected")) {
+              liTag.removeClass("selected")
+              liTag.find(".icon--circle-check").addClass("invisible")
+              liTag.data("method", "POST")
+            } else {
+              liTag.addClass("selected")
+              liTag.find(".icon--circle-check").removeClass("invisible")
+              liTag.data("method", "DELETE")
+            }
+          }
+        })
+      })
+    });
+  });
+})

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

@@ -0,0 +1,115 @@
+((exports) => {
+  const COUNT_KEY = "%count%";
+  const DEFAULT_MESSAGES = {
+    charactersAtLeast: {
+      one: `at least ${COUNT_KEY} character`,
+      other: `at least ${COUNT_KEY} characters`
+    },
+    charactersLeft: {
+      one: `${COUNT_KEY} character left`,
+      other: `${COUNT_KEY} characters left`
+    }
+  };
+  let MESSAGES = DEFAULT_MESSAGES;
+
+  class InputCharacterCounter {
+    static configureMessages(messages) {
+      MESSAGES = exports.$.extend(DEFAULT_MESSAGES, messages);
+    }
+
+    constructor(input) {
+      this.$input = input;
+      this.$target = exports.$(this.$input.data("remaining-characters"));
+      this.minCharacters = parseInt(this.$input.attr("minlength"), 10);
+      this.maxCharacters = parseInt(this.$input.attr("maxlength"), 10);
+
+      if (this.$target.length < 1) {
+        let targetId = null;
+        if (this.$input.attr("id") && this.$input.attr("id").length > 0) {
+          targetId = `${this.$input.attr("id")}_characters`;
+        } else {
+          targetId = `characters_${Math.random().toString(36).substr(2, 9)}`;
+        }
+
+        this.$target = $(`<span id="${targetId}" class="form-input-extra-before" />`)
+
+        // If input is a hidden for WYSIWYG editor add it at the end
+        if (this.$input.parent().is(".editor")) {
+          this.$input.parent().after(this.$target);
+        }
+        // Prefix and suffix columns are wrapped in columns, so put the
+        // character counter before that.
+        else if (
+          this.$input.parent().is(".columns") &&
+          this.$input.parent().parent().is(".row")
+        ) {
+          this.$input.parent().parent().after(this.$target);
+        } else {
+          this.$input.after(this.$target);
+        }
+      }
+
+      if (this.$target.length > 0 && (this.maxCharacters > 0 || this.minCharacters > 0)) {
+        this.bindEvents();
+      }
+    }
+
+    bindEvents() {
+      // In WYSIWYG editors (Quill) we need to find the active editor from the
+      // DOM node. Quill has the experimental "find" method that should work
+      // fine in this case
+      if (Quill && this.$input.parent().is(".editor")) {
+        // Wait until the next javascript loop so Quill editors are created
+        setTimeout(() => {
+          const editor = Quill.find(this.$input.siblings(".editor-container")[0]);
+          editor.on("text-change", () => {
+            this.updateStatus();
+          });
+        })
+      }
+      this.$input.on("keyup", () => {
+        this.updateStatus();
+      });
+      this.updateStatus();
+    }
+
+    updateStatus() {
+      const numCharacters = this.$input.val().length;
+      const showMessages = [];
+
+      if (this.minCharacters > 0) {
+        let message = MESSAGES.charactersAtLeast.other;
+        if (this.minCharacters === 1) {
+          message = MESSAGES.charactersAtLeast.one;
+        }
+        showMessages.push(message.replace(COUNT_KEY, this.minCharacters));
+      }
+
+      if (this.maxCharacters > 0) {
+        const remaining = this.maxCharacters - numCharacters;
+        let message = MESSAGES.charactersLeft.other;
+        if (remaining === 1) {
+          message = MESSAGES.charactersLeft.one;
+        }
+        showMessages.push(message.replace(COUNT_KEY, remaining));
+      }
+
+      this.$target.text(showMessages.join(", "));
+    }
+  }
+
+  exports.Decidim = exports.Decidim || {};
+  exports.Decidim.InputCharacterCounter = InputCharacterCounter;
+
+  exports.$(() => {
+    exports.$("input[type='text'], textarea, .editor>input[type='hidden']").each((_i, elem) => {
+      const $input = exports.$(elem);
+
+      if (!$input.is("[minlength]") && !$input.is("[maxlength]")) {
+        return;
+      }
+
+      $input.data("remaining-characters-counter", new InputCharacterCounter($input));
+    });
+  });
+})(window);