decidim-core 0.27.9 → 0.28.0.rc4

data/app/packs/src/decidim/input_mentions.js

@@ -1,29 +1,21 @@
 /* eslint no-unused-vars: 0 */
 import Tribute from "src/decidim/vendor/tribute"
 
-$(() => {
+const mentionsInitializer = () => {
   const $mentionContainer = $(".js-mentions");
   const nodatafound = $mentionContainer.attr("data-noresults");
 
+  // The editor implements hashtags functionality by itself so it is not needed
+  // to attach tribute to the rich text editor.
+  if ($mentionContainer.parent().hasClass("editor")) {
+    return;
+  }
+
   let noMatchTemplate = null
   if (nodatafound) {
     noMatchTemplate = () => `<li>${nodatafound}</li>`;
   }
 
-  // Listener for the event triggered by quilljs
-  let cursor = "";
-  $mentionContainer.on("quill-position", (event) => {
-    if (event.detail !== null) {
-      // When replacing the text content after selecting a hashtag, we only need
-      // to know the hashtag's start position as that is the point which we want
-      // to replace.
-      let quill = event.target.__quill;
-      if (quill.getText(event.detail.index - 1, 1) === "@") {
-        cursor = event.detail.index;
-      }
-    }
-  });
-
   // 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
@@ -42,7 +34,7 @@ $(() => {
   /* eslint no-use-before-define: ["error", { "variables": false }]*/
   let remoteSearch = function(text, cb) {
     let query = `{users(filter:{wildcard:"${text}"}){nickname,name,avatarUrl,__typename,...on UserGroup{membersCount}}}`;
-    $.post(window.Decidim.config.get("api_path"), {query: query}).
+    $.post("/api", {query: query}).
       then((response) => {
         let data = response.data.users || {};
         cb(data)
@@ -81,30 +73,6 @@ $(() => {
       if (typeof item === "undefined") {
         return null;
       }
-      if (this.range.isContentEditable(this.current.element)) {
-        // Check quill.js
-        if ($(this.current.element).hasClass("ql-editor")) {
-          let editorContainer = $(this.current.element).parent().get(0);
-          let quill = editorContainer.__quill;
-          quill.insertText(cursor - 1, `${item.original.nickname} `, Quill.sources.API);
-          // cursor position + nickname length + "@" sign + space
-          let position = cursor + item.original.nickname.length + 2
-
-          let next = 0;
-          if (quill.getLength() > position) {
-            next = position
-          } else {
-            next = quill.getLength() - 1
-          }
-          // Workaround https://github.com/quilljs/quill/issues/731
-          setTimeout(function () {
-            quill.setSelection(next, 0);
-          }, 500);
-
-          return ""
-        }
-        return `<span contenteditable="false">${item.original.nickname}</span>`;
-      }
       return item.original.nickname;
     },
     menuItemTemplate: function(item) {
@@ -112,14 +80,14 @@ $(() => {
       if (window.Decidim && item.original.__typename === "UserGroup") {
         const iconsPath =  window.Decidim.config.get("icons_path");
 
-        svg = `<span class="is-group">${item.original.membersCount}x <svg class="icon--members icon"><use href="${iconsPath}#icon-members"/></svg></span>`;
+        svg = `<span class="is-group">${item.original.membersCount}x <svg class="icon--members icon"><use href="${iconsPath}#ri-team-line"/></svg></span>`;
       }
-      return `<div class="tribute-item ${item.original.__typename}">
-      <span class="author__avatar"><img src="${item.original.avatarUrl}" alt="author-avatar"></span>
+      return `
+        <img src="${item.original.avatarUrl}" alt="author-avatar">
         <strong>${item.original.nickname}</strong>
         <small>${item.original.name}</small>
         ${svg}
-      </div>`;
+      `;
     }
   });
 
@@ -169,20 +137,7 @@ $(() => {
     setupEvents($(element));
   });
 
-  // tribute.attach($mentionContainer);
-  // Tribute needs to be attached to the `.ql-editor` element as said at:
-  // https://github.com/quilljs/quill/issues/1816
-  //
-  // For this reason we need to wait a bit for quill to initialize itself.
-  setTimeout(function() {
-    $mentionContainer.each((index, item) => {
-      let $qlEditor = $(".ql-editor", item);
-      if ($qlEditor.length > 0) {
-        tribute.attach($qlEditor);
-      } else {
-        tribute.attach(item);
-      }
-    });
-  }, 1000);
-});
+  tribute.attach($mentionContainer);
+}
 
+$(() => mentionsInitializer());

data/app/packs/src/decidim/input_multiple_mentions.js

@@ -1,4 +1,5 @@
 import AutoComplete from "src/decidim/autocomplete";
+import icon from "src/decidim/icon";
 
 const updateSubmitButton = ($fieldContainer, $selectedItems) => {
   const $form = $fieldContainer.closest("form");
@@ -15,7 +16,7 @@ const updateSubmitButton = ($fieldContainer, $selectedItems) => {
 }
 
 $(() => {
-  const $fieldContainer = $(".multiple-mentions");
+  const $fieldContainer = $(".js-multiple-mentions");
   if ($fieldContainer.length < 1) {
     return;
   }
@@ -27,7 +28,6 @@ $(() => {
   const $selectedItems = $(`ul.${$searchInput.data().selected}`);
   const options = $fieldContainer.data();
   let selected = [];
-  const iconsPath = window.Decidim.config.get("icons_path");
   const removeLabel = messages.removeRecipient || "Remove recipient %name%";
 
   let emptyFocusElement = $fieldContainer[0].querySelector(".empty-list");
@@ -42,7 +42,7 @@ $(() => {
   const autoComplete = new AutoComplete($searchInput[0], {
     dataMatchKeys: ["name", "nickname"],
     dataSource: (query, callback) => {
-      $.post(window.Decidim.config.get("api_path"), {
+      $.post("/api", {
         "query": `
           {
             users(filter:{wildcard:"${query}",excludeIds:[]})
@@ -63,16 +63,16 @@ $(() => {
     },
     modifyResult: (element, value) => {
       $(element).html(`
-        <span class="author__avatar"><img src="${value.avatarUrl}" alt="${value.name}"></span>
-        <strong>${value.nickname}</strong>
+        <img src="${value.avatarUrl}" alt="${value.name}">
+        <span>${value.nickname}</span>
         <small>${value.name}</small>
       `);
       if (value.directMessagesEnabled === "false") {
         $(element).addClass("disabled");
-        $(element).append(`<span>${$searchInput.data().directMessagesDisabled}</span>`);
+        $(element).append(`<small>${$searchInput.data().directMessagesDisabled}</small>`);
       }
       if (value.membersCount) {
-        $(element).append(`<span class="is-group">${value.membersCount}x <svg class="icon--members icon"><use href="${iconsPath}#icon-members"/></svg></span>`);
+        $(element).append(`<small class="is-group">${value.membersCount}x ${icon("group-2-fill")}</small>`);
       }
     }
   });
@@ -89,9 +89,9 @@ $(() => {
     $selectedItems.append(`
       <li tabindex="-1">
         <input type="hidden" name="${options.name}" value="${id}">
-        <img src="${selection.value.avatarUrl}" class="author__avatar" alt="${selection.value.name}">
-        <b>${selection.value.name}</b>
-        <button type="button" class="float-right" data-remove="${id}" tabindex="0" aria-controls="0" aria-label="${label}">&times;</button>
+        <img src="${selection.value.avatarUrl}" alt="${selection.value.name}">
+        <span>${selection.value.name}</span>
+        <button type="button" data-remove="${id}" tabindex="0" aria-controls="0" aria-label="${label}">${icon("delete-bin-line")}</button>
       </li>
     `);
 
@@ -100,7 +100,7 @@ $(() => {
     updateSubmitButton($fieldContainer, $selectedItems);
 
     $selectedItems.find(`*[data-remove="${id}"]`).on("keypress click", (evt) => {
-      const target = evt.target.parentNode;
+      const target = evt.currentTarget.parentNode;
       if (target.tagName === "LI") {
         const focusElement = target.nextElementSibling || target.previousElementSibling || emptyFocusElement;
 

data/app/packs/src/decidim/input_tags.js

@@ -1,12 +1,16 @@
-import "bootstrap-tagsinput"
+/* eslint-disable camelcase */
 
-$(() => {
-  const $tagContainer = $(".js-tags-container");
+import TomSelect from "tom-select/dist/cjs/tom-select.popular";
 
-  // Initialize
-  $tagContainer.tagsinput({
-    tagClass: "input__tag",
-    trimValue: true
-  });
+document.addEventListener("DOMContentLoaded", () => {
+  const tagContainers = document.querySelectorAll(".js-tags-container");
+  const config = {
+    plugins: ["remove_button"],
+    create: true,
+    render: {
+      no_results: null
+    }
+  };
 
+  tagContainers.forEach((container) => new TomSelect(container, config))
 });

data/app/packs/src/decidim/map/controller/markers.js

@@ -42,10 +42,10 @@ export default class MapMarkersController extends MapController {
 
       $.tmpl(this.config.popupTemplateId, markerData).appendTo(node);
       marker.bindPopup(node, {
-        maxwidth: 640,
-        minWidth: 500,
+        // The popup width is equal to 80% of the map width
+        maxWidth: this.map.getSize().x * 0.8,
         keepInView: true,
-        className: "map-info"
+        closeButton: false
       }).openPopup();
 
       this.markerClusters.addLayer(marker);

data/app/packs/src/decidim/map/controller.js

@@ -11,7 +11,7 @@ export default class MapController {
     this.mapId = mapId;
     this.config = $.extend({
       popupTemplateId: "marker-popup",
-      markerColor: "#ef604d"
+      markerColor: "#e02d2d"
     }, config);
 
     this.map = null;
@@ -56,9 +56,12 @@ export default class MapController {
   }
 
   createIcon() {
-    return new L.DivIcon.SVGIcon.DecidimIcon({
-      fillColor: this.config.markerColor,
-      iconSize: L.point(28, 36)
+    const size = 36
+    return L.divIcon({
+      html: `
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${size}px" height="${size}px"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M18.364 17.364L12 23.728l-6.364-6.364a9 9 0 1 1 12.728 0zM12 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0-2a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>`,
+      iconAnchor: [0.5 * size, size],
+      popupAnchor: [0, -0.5 * size]
     });
   }
 

data/app/packs/src/decidim/map/factory.js

@@ -1,5 +1,3 @@
-import "src/decidim/map/icon"
-
 import MapMarkersController from "src/decidim/map/controller/markers"
 import MapStaticController from "src/decidim/map/controller/static"
 import MapDragMarkerController from "src/decidim/map/controller/drag_marker"
@@ -16,7 +14,7 @@ import MapDragMarkerController from "src/decidim/map/controller/drag_marker"
  *
  * An example how to use in the ERB view:
  *   <%= dynamic_map_for type: "custom" do %>
- *     <%= javascript_pack_tag "map_customization" %>
+ *     <%= append_javascript_pack_tag "map_customization" %>
  *   <% end %>
  *
  * And then the actual customization at `map_customization.js.es6`:

data/app/packs/src/decidim/map/legacy.js

@@ -33,7 +33,7 @@ const legacyMapSupport = ($map) => {
 
   let markerColor = getComputedStyle(document.documentElement).getPropertyValue("--primary");
   if (!markerColor || markerColor.length < 1) {
-    markerColor = "#ef604d";
+    markerColor = "#e02d2d";
   }
 
   // Configure the map element with the new style

data/app/packs/src/decidim/notifications.js

@@ -1,35 +1,47 @@
-$(() => {
-  const $notificationsBellIcon = $(".title-bar .topbar__notifications");
-  const $wrapper = $(".wrapper");
-  const $section = $wrapper.find("#notifications");
-  const $noNotificationsText = $(".empty-notifications");
-  const $pagination = $wrapper.find("ul.pagination");
-  const FADEOUT_TIME = 500;
-
-  const anyNotifications = () => $wrapper.find(".card--widget").length > 0;
+/**
+ * This file handles the interactions of the notifications site via javascript
+ * @param {HTMLElement} node target node
+ * @returns {void}
+ */
+export default function(node = document) {
+  const noNotificationsText = node.querySelector("#empty-notifications")
+  const handleRemove = ({ currentTarget }) => currentTarget.remove()
+  const handleFadeOut = (element) => {
+    if (element) {
+      element.addEventListener("transitionend", handleRemove)
+      element.style.opacity = 0
+    }
+  }
   const emptyNotifications = () => {
-    if (!anyNotifications()) {
-      $section.remove();
-      $noNotificationsText.removeClass("hide");
+    noNotificationsText.hidden = false
+
+    node.querySelector("#dropdown-menu-account [data-unread-notifications]").remove()
+    if (!node.querySelector(".main-bar__notification").dataset.unreadConversations) {
+      node.querySelector(".main-bar__notification").remove()
+    }
+  }
+  const handleClick = ({ currentTarget }) => {
+    handleFadeOut(currentTarget.closest("[data-notification]"))
+    if (!node.querySelector("[data-notification]:not([style])")) {
+      emptyNotifications()
     }
-  };
+  }
+  const hideReadAllButton = () => {
+    handleFadeOut(node.querySelector("[data-notification-read-all]"))
+  }
 
-  $section.on("click", ".mark-as-read-button", (event) => {
-    const $item = $(event.target).parents(".card--widget");
-    $item.fadeOut(FADEOUT_TIME, () => {
-      $item.remove();
-      emptyNotifications();
-    });
-  });
+  const notifications = node.querySelectorAll("[data-notification]")
 
-  $wrapper.on("click", ".mark-all-as-read-button", () => {
-    $section.fadeOut(FADEOUT_TIME, () => {
-      $pagination.remove();
-      $notificationsBellIcon.removeClass("is-active");
-      $wrapper.find(".card--widget").remove();
-      emptyNotifications();
-    });
-  });
+  if (notifications.length) {
+    notifications.forEach((btn) => btn.querySelector("[data-notification-read]").addEventListener("click", handleClick))
 
-  emptyNotifications();
-});
+    node.querySelector("[data-notification-read-all]").
+      addEventListener(
+        "click", () => {
+          notifications.forEach((notification) => handleFadeOut(notification))
+          emptyNotifications()
+          hideReadAllButton()
+        }
+      )
+  }
+}

data/app/packs/src/decidim/password_toggler.js

@@ -0,0 +1,104 @@
+import icon from "src/decidim/icon"
+
+export default class PasswordToggler {
+  constructor(password) {
+    this.password = password;
+    this.input = this.password.querySelector('input[type="password"]');
+    this.form = this.input.closest("form");
+    this.texts = {
+      showPassword: this.password.getAttribute("data-show-password") || "Show password",
+      hidePassword: this.password.getAttribute("data-hide-password") || "Hide password",
+      hiddenPassword: this.password.getAttribute("data-hidden-password") || "Your password is hidden",
+      shownPassword: this.password.getAttribute("data-shown-password") || "Your password is shown"
+    }
+    this.icons = {
+      show: icon("eye-line"),
+      hide: icon("eye-off-line")
+    }
+  }
+
+  // Call init() to hide the password confirmation and add a "view password" inline button
+  init() {
+    this.createControls();
+    this.button.addEventListener("click", (evt) => {
+      this.toggleVisibility(evt);
+    });
+    // to prevent browsers trying to use autocomplete, turn the type back to password before submitting
+    this.form.addEventListener("submit", () => {
+      this.hidePassword();
+    });
+  }
+
+  // Call destroy() to switch back to the original password box
+  destroy() {
+    this.button.removeEventListener("click");
+    this.input.removeEventListener("change");
+    this.form.removeEventListener("submit");
+    const input = this.input.detach();
+    this.inputGroup.replaceWith(input);
+  }
+
+  createControls() {
+    this.createButton();
+    this.createStatusText();
+    this.addInputGroupWrapperAsParent();
+  }
+
+  createButton() {
+    const button = document.createElement("button");
+    button.setAttribute("type", "button");
+    button.setAttribute("aria-controls", this.input.getAttribute("id"));
+    button.setAttribute("aria-label", this.texts.showPassword);
+    button.innerHTML = this.icons.show;
+    this.button = button;
+  }
+
+  createStatusText() {
+    const statusText = document.createElement("span");
+    statusText.classList.add("sr-only");
+    statusText.setAttribute("aria-live", "polite");
+    statusText.textContent = this.texts.hiddenPassword;
+    this.statusText = statusText;
+  }
+
+  addInputGroupWrapperAsParent() {
+    const inputGroupWrapper = document.createElement("div");
+    inputGroupWrapper.classList.add("input-group__password");
+
+    this.input.parentNode.replaceChild(inputGroupWrapper, this.input);
+    inputGroupWrapper.appendChild(this.input);
+    this.input.before(this.button);
+
+    const formError = this.password.querySelector(".form-error");
+    if (formError) {
+      this.input.after(formError);
+    }
+  }
+
+  toggleVisibility(evt) {
+    evt.preventDefault();
+    if (this.isText()) {
+      this.hidePassword();
+    } else {
+      this.showPassword();
+    }
+  }
+
+  showPassword() {
+    this.statusText.textContent = this.texts.shownPassword;
+    this.button.setAttribute("aria-label", this.texts.hidePassword);
+    this.button.innerHTML = this.icons.hide;
+    this.input.setAttribute("type", "text");
+  }
+
+  hidePassword() {
+    this.statusText.textContent = this.texts.hiddenPassword;
+    this.button.setAttribute("aria-label", this.texts.showPassword);
+    this.button.innerHTML = this.icons.show;
+    this.input.setAttribute("type", "password");
+  }
+
+  isText() {
+    return this.input.getAttribute("type") === "text"
+  }
+}

data/app/packs/src/decidim/remote_modal.js

@@ -0,0 +1,54 @@
+export default class RemoteModal {
+  constructor(element) {
+    if (!element) {
+      throw new Error("RemoteModal requires a DOM Element")
+    }
+
+    const { dialogRemoteUrl: url, dialogOpen } = element.dataset
+    this.url = url
+    this.modalTarget = dialogOpen
+
+    element.addEventListener("click", (event) => this.handleClick(event))
+  }
+
+  handleClick() {
+    fetch(this.url).
+      then((res) => {
+        if (!res.ok) {
+          throw res
+        }
+        return res.text()
+      }).
+      then((res) => this.handleSuccess(res)).
+      catch((err) => this.handleError(err));
+  }
+
+  handleSuccess(response) {
+    const node = document.getElementById(`${this.modalTarget}-content`)
+
+    // save the close button if exists (modal.closable = true)
+    const btn = node.querySelector("button")
+
+    // clear the modal contents
+    node.innerHTML = ""
+
+    if (btn) {
+      // append the close button
+      node.appendChild(btn)
+    }
+
+    // create a fake div to wrap the response, and then, iterate over its children
+    const div = document.createElement("div")
+    div.innerHTML = response
+    // in this way we do not append the parent element, useless
+    Array.from(div.children).forEach((child) => node.appendChild(child))
+
+    document.dispatchEvent(new CustomEvent("remote-modal:loaded", { detail: node }));
+  }
+
+  handleError(err) {
+    const node = document.getElementById(`${this.modalTarget}-content`)
+    node.innerHTML = `<h3>${err.status}</h3><p>${err.statusText}</p>`
+    document.dispatchEvent(new CustomEvent("remote-modal:failed", { detail: node }));
+  }
+}

data/app/packs/src/decidim/scroll_to_last_child.js

@@ -0,0 +1,14 @@
+/**
+ * Scroll smoothly to the last message automatically when the page is fully loaded.
+ * To apply this to a page, at least one element must have the class "scroll-to-last-message".
+ *
+ * @param {HTMLElement} node target node
+ * @returns {void}
+ */
+export default function(node = document) {
+  const element = node.querySelector("[data-scroll-last-child]")
+  if (element && element.children.length) {
+    const lastChild = [...element.children].pop()
+    window.scrollTo({ top: lastChild.offsetTop, behavior: "smooth" });
+  }
+}

data/app/packs/src/decidim/session_timeouter.js

@@ -18,7 +18,7 @@ $(() => {
 
   // Ajax request is made at timeout_modal.html.erb
   $continueSessionButton.on("click", () => {
-    $timeoutModal.foundation("close");
+    window.Decidim.currentDialogs.timeoutModal.close()
     // In admin panel we have to hide all overlays
     $(".reveal-overlay").css("display", "none");
     lastActivityCheck = dayjs();
@@ -72,8 +72,7 @@ $(() => {
   const exitInterval = setInterval(() => {
     const timeSinceLastActivityCheckInSeconds = Math.round((dayjs() - lastActivityCheck) / 1000);
 
-    const popupOpen = $("#timeoutModal").parent().css("display") === "block";
-    if (!popupOpen && timeSinceLastActivityCheckInSeconds >= activityCheckInterval) {
+    if (!window.Decidim.currentDialogs.timeoutModal.isOpen && timeSinceLastActivityCheckInSeconds >= activityCheckInterval) {
       lastActivityCheck = dayjs();
       if (userBeenActiveSince(activityCheckInterval)) {
         heartbeat();
@@ -100,7 +99,7 @@ $(() => {
       } else if (secondsUntilSessionExpires <= 90) {
         $timeoutModal.find("#reveal-hidden-sign-out")[0].click();
       } else if (secondsUntilSessionExpires <= 150) {
-        $timeoutModal.foundation("open");
+        window.Decidim.currentDialogs.timeoutModal.open()
       }
     });
   }, interval);

data/app/packs/src/decidim/sw/loader.js

@@ -13,6 +13,6 @@ window.addEventListener("load", async () => {
       mandatoryElements.classList.add("hide")
     }
   } else {
-    console.log("Your browser doesn't support service workers 🤷‍♀️");
+    console.log("Your browser does not support service workers 🤷‍♀️");
   }
 });

data/app/packs/src/decidim/sw/sw.js

@@ -17,7 +17,7 @@ self.__WB_DISABLE_DEV_LOGS = true
  *
  * The InjectManifest function requires the __WB_MANIFEST somewhere in this file,
  * however, we cannot add precacheAndRoute as the issue suggests,
- * as the other workbox-recipes won't work properly
+ * as the other workbox-recipes will not work properly
  *
  * See more: https://github.com/GoogleChrome/workbox/issues/2519#issuecomment-634164566
  */

data/app/packs/src/decidim/toggle.js

@@ -0,0 +1,37 @@
+/**
+ * Toggles the visibility of an HTML element (or elements),
+ * when the trigger is activated.
+ *
+ * @param {HTMLElement} component trigger element
+ * @returns {void}
+ */
+export default function createToggle(component) {
+  const { toggle } = component.dataset
+
+  if (!component.id) {
+    // when component has no id, we enforce to have it one
+    component.id = `toggle-${Math.random().toString(36).substring(7)}`
+  }
+
+  component.setAttribute("aria-controls", toggle);
+  toggle.split(" ").forEach((id) => {
+    const node = document.getElementById(id)
+
+    if (node) {
+      node.setAttribute("aria-labelledby", [node.getAttribute("aria-labelledby"), component.id].filter(Boolean).join(" "))
+    }
+  })
+
+  component.addEventListener("click", () => {
+    toggle.split(" ").forEach((id) => {
+      const node = document.getElementById(id)
+
+      if (node) {
+        node.hidden = !node.hidden
+        node.setAttribute("aria-expanded", !node.hidden);
+      }
+    });
+
+    document.dispatchEvent(new Event("on:toggle"));
+  })
+}