decidim-core 0.20.0 → 0.23.1.rc1

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

@@ -3,24 +3,26 @@
  */
 ((exports) => {
   class DataPicker {
-    constructor(elements) {
+    constructor(pickers) {
       this.modal = this._createModalContainer();
       this.modal.appendTo($("body"));
       this.current = null;
 
-      elements.each((_index, element) => {
-        this.activate(element);
+      pickers.each((_index, picker) => {
+        this.activate(picker);
       });
     }
 
     activate(picker) {
-      let $element = $(picker);
+      let $picker = $(picker);
+
+      this._setCurrentPicker($picker, null);
+
       let input = "hidden",
-          name = $element.data("picker-name"),
-          values = $(".picker-values", $element);
+          name = this.current.name,
+          values = this.current.values;
 
-      if ($element.hasClass("picker-multiple")) {
-        input = "checkbox";
+      if (this.current.multiple) {
         name += "[]";
       }
 
@@ -29,17 +31,27 @@
         $(div).prepend($(`<input type="${input}" checked name="${name}" value="${value}"/>`));
       });
 
-      $element.on("click", "a", (event) => {
+      $picker.on("click", "a", (event) => {
         event.preventDefault();
-        if ($element.hasClass("disabled")) {
+        if ($picker.hasClass("disabled")) {
           return;
         }
-        this._openPicker($element, event.target.parentNode);
+        const isMultiPicker = $picker.hasClass("picker-multiple");
+
+        if ($(this._targetFromEvent(event)).hasClass("picker-prompt") || !isMultiPicker) {
+          this._openPicker($picker, this._targetFromEvent(event));
+        } else {
+          this._removeValue($picker, this._targetFromEvent(event));
+        }
       });
 
-      $element.on("click", "input", (event) => {
-        this._removeValue($element, event.target.parentNode);
+      $picker.on("click", "input", (event) => {
+        this._removeValue($picker, this._targetFromEvent(event));
       });
+
+      if (this.current.autosort) {
+        this._sort();
+      }
     }
 
     enabled(picker, value) {
@@ -65,34 +77,43 @@
     load(picker, savedData) {
       this._setCurrentPicker($(picker), null);
       $.each(savedData, (_index, data) => {
-        this._choose(data, false);
+        this._choose(data, { interactive: false, modify: false });
       });
+      if (this.current.autosort) {
+        this._sort();
+      }
     }
 
     _createModalContainer() {
-      return $(`<div class="small reveal" id="data_picker-modal" aria-hidden="true" role="dialog" aria-labelledby="data_picker-title" data-reveal data-multiple-opened="true">
-                <div class="data_picker-modal-content"></div>
+      // Add a header because we are referencing the title element with
+      // `aria-labelledby`. If the title doesn't exist, the "labelled by"
+      // reference is incorrect.
+      const headerHtml = '<div class="scope-picker picker-header"><h6 id="data_picker-title" class="h2"></h6></div>';
+
+      return $(`<div class="small reveal" id="data_picker-modal" aria-hidden="true" aria-live="assertive" role="dialog" aria-labelledby="data_picker-title" data-reveal data-multiple-opened="true">
+                <div class="data_picker-modal-content">${headerHtml}</div>
                 <button class="close-button" data-close type="button" data-reveal-id="data_picker-modal"><span aria-hidden="true">&times;</span></button>
               </div>`);
     }
 
-    _openPicker($picker, div) {
-      this._setCurrentPicker($picker, div);
-      this._load($("a", div).attr("href"));
+    _openPicker($picker, target) {
+      this._setCurrentPicker($picker, target);
+      this._load($("a", target).attr("href"));
     }
 
-    _setCurrentPicker($picker, div) {
-      let currentDiv = false;
-      if (div && !$(div).hasClass("picker-prompt")) {
-        currentDiv = $(div);
+    _setCurrentPicker($picker, target) {
+      let $target = false;
+      if (target && !$(target).hasClass("picker-prompt")) {
+        $target = $(target);
       }
 
       this.current = {
-        multiple: $picker.hasClass("picker-multiple"),
         picker: $picker,
         name: $picker.data("picker-name"),
         values: $picker.find(".picker-values"),
-        div: currentDiv
+        multiple: $picker.hasClass("picker-multiple"),
+        autosort: $picker.hasClass("picker-multiple") && $picker.hasClass("picker-autosort"),
+        target: $target
       };
     }
 
@@ -101,6 +122,7 @@
         let modalContent = $(".data_picker-modal-content", this.modal);
         modalContent.html(resp);
         this._handleLinks(modalContent);
+        this._handleCheckboxes(modalContent);
         this.modal.foundation("open");
       });
     }
@@ -119,61 +141,109 @@
             if (typeof $link.data("picker-choose") === "undefined") {
               this._load(chooseUrl);
             } else {
-              this._choose({ url: chooseUrl, value: $link.data("picker-value") || "", text: $link.data("picker-text") || "" });
+              this._choose(
+                { url: chooseUrl, value: $link.data("picker-value") || "", text: $link.data("picker-text") || "" }
+              );
             }
           }
         });
       });
     }
 
-    _choose(data, user = true) {
-      // Prevent choosing is nothing has been selected. This would otherwise
-      // cause an empty checkbox to appear in the selected values list.
-      if (!data.value || data.value.length < 1) {
-        return;
-      }
+    _handleCheckboxes(content) {
+      $("input[type=checkbox][data-picker-choose]", content).each((_index, checkbox) => {
+        const $checkbox = $(checkbox);
+        checkbox.checked = this._targetFromValue($checkbox.val()) !== null;
+      }).change((event) => {
+        const $checkbox = $(event.target);
+        if (event.target.checked) {
+          this._choose(
+            { url: $checkbox.data("picker-url"), value: $checkbox.val() || "", text: $checkbox.data("picker-text") || "" },
+            { modify: false, close: false }
+          );
+        }
+        else {
+          this._removeValue(this.current.picker, this._targetFromValue($checkbox.val()));
+        }
+      });
+    }
+
+    _choose(data, opts = {}) {
+      const options = Object.assign({ interactive: true, modify: true, close: true }, opts);
 
       let dataText = this._escape(data.text);
+      let choosenOption = null;
+
+      if (!this.current.target && options.modify) {
+        this.current.target = this._targetFromValue(data.value);
+      }
 
       // Add or update value appearance
-      if (this.current.div) {
-        let link = $("a", this.current.div);
+      if (this.current.target && options.modify) {
+        let link = $("a", this.current.target);
         link.data("picker-value", data.value);
         link.attr("href", data.url);
-        link.text(dataText);
+        choosenOption = this.current.target;
+        if (this.current.multiple) {
+          link.html(`&times;&nbsp;${dataText}`);
+        } else {
+          link.text(dataText);
+        }
       } else {
         let input = "hidden",
             name = this.current.name;
 
         if (this.current.multiple) {
-          input = "checkbox";
           name += "[]";
+          choosenOption = $(`<div><input type="${input}" checked name="${name}"/><a href="${data.url}" data-picker-value="${data.value}" class="label primary">&times;&nbsp;${dataText}</a></div>`);
+        } else {
+          choosenOption = $(`<div><input type="${input}" checked name="${name}"/><a href="${data.url}" data-picker-value="${data.value}">${dataText}</a></div>`);
+        }
+        choosenOption.appendTo(this.current.values);
+
+        if (!this.current.target) {
+          this.current.target = choosenOption;
         }
-        this.current.div = $(`<div><input type="${input}" checked name="${name}"/><a href="${data.url}" data-picker-value="${data.value}">${dataText}</a></div>`);
-        this.current.div.appendTo(this.current.values);
       }
 
       // Set input value
-      let $input = $("input", this.current.div);
+      let $input = $("input", choosenOption);
       $input.attr("value", data.value);
 
-      // Raise changed event
-      if (user) {
+      if (this.current.autosort) {
+        this._sort();
+      }
+
+      if (options.interactive) {
+        // Raise changed event
         $input.trigger("change");
         this._removeErrors();
-        this.modal.foundation("close");
+
+        if (options.close) {
+          this._close();
+        }
       }
+    }
 
-      // Unselect updated value and close modal
-      this.current.div = null;
+    _sort() {
+      const values = $(".picker-values", this.current.picker);
+      values.children().sort((item1, item2) => $("input", item1).val() - $("input", item2).val()).detach().appendTo(values);
     }
 
-    _removeValue($picker, div) {
-      this._setCurrentPicker($picker, div);
-      this.current.div.fadeOut(500, () => {
-        this.current.div.remove();
-        this.current.div = null;
-      });
+    _close() {
+      // Close modal and unset target element
+      this.modal.foundation("close");
+      this.current.target = null;
+    }
+
+    _removeValue($picker, target) {
+      if (target) {
+        this._setCurrentPicker($picker, target);
+        this.current.target.fadeOut(500, () => {
+          this.current.target.remove();
+          this.current.target = null;
+        });
+      }
     }
 
     _removeErrors() {
@@ -188,6 +258,14 @@
         return `&#${char.charCodeAt(0)};`;
       });
     }
+
+    _targetFromEvent(event) {
+      return event.target.parentNode;
+    }
+
+    _targetFromValue(value) {
+      return $(`[data-picker-value=${value}]`, this.current.picker).parent()[0] || null;
+    }
   }
 
   exports.Decidim = exports.Decidim || {};

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

@@ -0,0 +1,26 @@
+((exports) => {
+
+  /**
+   * Returns a function, that, as long as it continues to be invoked, will not
+   * be triggered. The function will be called after it stops being called for
+   * N milliseconds.
+   * @param {Object} context - the context for the called function.
+   * @param {Function} func - the function to be executed.
+   * @param {int} wait - number of milliseconds to wait before executing the function.
+   * @private
+   * @returns {Void} - Returns nothing.
+   */
+  exports.delayed = (context, func, wait) => {
+    let timeout = null;
+
+    return function(...args) {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+      timeout = setTimeout(() => {
+        timeout = null;
+        Reflect.apply(func, context, args);
+      }, wait);
+    }
+  }
+})(window);

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

@@ -1,16 +1,49 @@
 $(() => {
+  const $allDiffViews = $(".row.diff_view");
+
   $(document).on("click", ".diff-view-by a.diff-view-mode", (event) => {
     event.preventDefault();
-    const $target = $(event.target);
-    $target.parents(".is-dropdown-submenu-parent").find("#diff-view-selected").text($target.text());
+    const $target = $(event.target)
+    let type = "escaped";
+    const $selected = $target.parents(".is-dropdown-submenu-parent").find("#diff-view-selected");
+    if ($selected.text().trim() === $target.text().trim()) {
+      return;
+    }
+
+    $selected.text($target.text());
 
     if ($target.attr("id") === "diff-view-unified") {
-      $(".row#diff_split").addClass("hide");
-      $(".row#diff_unified").removeClass("hide");
+      if ($(".row.diff_view_split_escaped").hasClass("hide")) {
+        type = "unescaped";
+      }
+
+      $allDiffViews.addClass("hide");
+      $(`.row.diff_view_unified_${type}`).removeClass("hide");
     }
     if ($target.attr("id") === "diff-view-split") {
-      $(".row#diff_unified").addClass("hide");
-      $(".row#diff_split").removeClass("hide");
+      if ($(".row.diff_view_unified_escaped").hasClass("hide")) {
+        type = "unescaped";
+      }
+
+      $allDiffViews.addClass("hide");
+      $(`.row.diff_view_split_${type}`).removeClass("hide");
+    }
+  })
+
+  $(document).on("click", ".diff-view-by a.diff-view-html", (event) => {
+    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(1, -1).join("_");
+    const $visibleDiffViews = $allDiffViews.filter(`[id*=${$visibleDiffViewsId}]`)
+
+    if ($target.attr("id") === "escaped-html") {
+      $visibleDiffViews.filter("[id$=_unescaped]").addClass("hide");
+      $visibleDiffViews.filter("[id$=_escaped]").removeClass("hide");
+    }
+    if ($target.attr("id") === "unescaped-html") {
+      $visibleDiffViews.filter("[id$=_escaped]").addClass("hide");
+      $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/editor.js.es6

@@ -28,6 +28,8 @@
     }
 
     const $input = $(container).siblings('input[type="hidden"]');
+    container.innerHTML = $input.val() || "";
+
     const quill = new Quill(container, {
       modules: {
         toolbar: quillToolbar
@@ -56,12 +58,10 @@
         $input.val(quill.root.innerHTML);
       }
     });
-
-    quill.root.innerHTML = $input.val() || "";
   };
 
   const quillEditor = () => {
-    $(".editor-container").each((idx, container) => {
+    $(".editor-container").each((_idx, container) => {
       createQuillEditor(container);
     });
   };

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);