decidim-core 0.28.6 → 0.29.0.rc1

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

@@ -17,9 +17,6 @@ import Rails from "@rails/ujs"
 import svg4everybody from "svg4everybody"
 import morphdom from "morphdom"
 
-// vendor customizated scripts (bad practice: these ones should be removed eventually)
-import "src/decidim/vendor/modernizr"
-
 /**
  * Local dependencies
  */
@@ -52,8 +49,11 @@ import "src/decidim/direct_uploads/upload_field"
 import "src/decidim/data_consent"
 import "src/decidim/abide_form_validator_fixer"
 import "src/decidim/sw"
+import "src/decidim/sticky_header"
+import "src/decidim/attachments"
 
 // local deps that require initialization
+import formDatePicker from "src/decidim/datepicker/form_datepicker"
 import Configuration from "src/decidim/configuration"
 import ExternalLink from "src/decidim/external_link"
 import updateExternalDomainLinks from "src/decidim/external_domain_warning"
@@ -65,22 +65,22 @@ import addInputEmoji, { EmojiButton } from "src/decidim/input_emoji"
 import FocusGuard from "src/decidim/focus_guard"
 import backToListLink from "src/decidim/back_to_list"
 import markAsReadNotifications from "src/decidim/notifications"
+import handleNotificationActions from "src/decidim/notifications_actions"
 import RemoteModal from "src/decidim/remote_modal"
 import selectActiveIdentity from "src/decidim/identity_selector_dialog"
 import createTooltip from "src/decidim/tooltips"
-// Temporary disabling this feature because we have a poor performance. See https://github.com/decidim/decidim/issues/14431
-// import fetchRemoteTooltip from "src/decidim/remote_tooltips"
 import createToggle from "src/decidim/toggle"
 import {
   createAccordion,
   createDialog,
   createDropdown,
+  announceForScreenReader,
   Dialogs
 } from "src/decidim/a11y"
 import changeReportFormBehavior from "src/decidim/change_report_form_behavior"
 
 // bad practice: window namespace should avoid be populated as much as possible
-// rails-translations could be referrenced through a single Decidim.I18n object
+// rails-translations could be referenced through a single Decidim.I18n object
 window.Decidim = window.Decidim || {
   config: new Configuration(),
   ExternalLink,
@@ -88,7 +88,8 @@ window.Decidim = window.Decidim || {
   FormValidator,
   addInputEmoji,
   EmojiButton,
-  Dialogs
+  Dialogs,
+  announceForScreenReader
 };
 
 window.morphdom = morphdom
@@ -138,6 +139,8 @@ const initializer = (element = document) => {
 
   svg4everybody();
 
+  element.querySelectorAll('input[type="datetime-local"],input[type="date"]').forEach((elem) => formDatePicker(elem))
+
   element.querySelectorAll(".editor-container").forEach((container) => window.createEditor(container));
 
   // initialize character counter
@@ -170,6 +173,7 @@ const initializer = (element = document) => {
   backToListLink(element.querySelectorAll(".js-back-to-list"));
 
   markAsReadNotifications(element)
+  handleNotificationActions(element)
 
   scrollToLastChild(element)
 
@@ -191,9 +195,6 @@ const initializer = (element = document) => {
   // Initialize data-toggles
   element.querySelectorAll("[data-toggle]").forEach((elem) => createToggle(elem))
 
-  // Temporary disabling this feature because we have a poor performance. See https://github.com/decidim/decidim/issues/14431
-  // element.querySelectorAll("[data-remote-tooltip]").forEach((elem) => fetchRemoteTooltip(elem))
-
   element.querySelectorAll(".new_report").forEach((elem) => changeReportFormBehavior(elem))
 }
 

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

@@ -74,7 +74,7 @@ export default class InputCharacterCounter {
 
       // If input is a hidden for WYSIWYG editor add it at the end
       if (this.$input.parent().is(".editor")) {
-        this.$input.parent().append(container);
+        this.$input.parent().after(this.$target);
       } else {
         const wrapper = document.createElement("span")
         wrapper.className = "input-character-counter"
@@ -232,7 +232,7 @@ export default class InputCharacterCounter {
       } else if (this.maxCharacters - srLength === this.announceThreshold) {
         return this.announcedAt || currentLength;
       // The third branch checks that when deleting characters, we should
-      // announce the next threshold to get accurate annoucement. E.g. when we
+      // announce the next threshold to get accurate announcement. E.g. when we
       // have 750 characters left and the user deletes 100 characters at once,
       // we should announce "700 characters left" after that deletion.
       } else if (srLength < currentLength) {

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

@@ -1,56 +1,150 @@
-import { createPopup } from "@picmo/popup-picker";
-import { screens } from "tailwindcss/defaultTheme"
-import { SUPPORTED_LOCALES } from "emojibase";
+import data from "@emoji-mart/data"
+import i18nEn from "@emoji-mart/data/i18n/en.json"
+import { Picker } from "emoji-mart"
 
 import * as i18n from "src/decidim/i18n";
+import { screens } from "tailwindcss/defaultTheme"
 
-let I18N_CONFIG = null;
-
-export class EmojiButton {
-  static i18n() {
-    if (I18N_CONFIG) {
-      return I18N_CONFIG;
+class EmojiI18n {
+  static isObject(item) {
+    return (item && typeof item === "object" && !Array.isArray(item));
+  }
+  static deepMerge(target, ...sources) {
+    if (!sources.length) {
+      return target;
     }
-
-    let dict = i18n.getMessages("emojis") || null;
-    const buttonText = dict.button;
-    if (dict) {
-      Reflect.deleteProperty(dict, "button");
-      dict = i18n.createDictionary(dict);
+    const source = sources.shift();
+
+    if (this.isObject(target) && this.isObject(source)) {
+      for (const key in source) {
+        if (this.isObject(source[key])) {
+          if (!target[key]) {
+            Object.assign(target, { [key]: {} });
+          }
+          this.deepMerge(target[key], source[key]);
+        } else {
+          Object.assign(target, { [key]: source[key] });
+        }
+      }
     }
 
-    // dictionary = the messages dictionary passed to Picmo
-    // messages = local "extra" messages
-    I18N_CONFIG = {
-      dictionary: dict,
-      messages: { buttonText }
-    }
-    return I18N_CONFIG;
+    return this.deepMerge(target, ...sources);
   }
 
-  // Get the current locale used for the emoji database
-  //
-  // @returns {string} the current locale if it is supported by emoji base, or english as the fallback locale
   static locale() {
-    let emojiLocale = document.documentElement.getAttribute("lang");
+    return document.documentElement.getAttribute("lang");
+  }
 
-    if (!SUPPORTED_LOCALES.includes(emojiLocale)) {
-      const secondaryLocale = emojiLocale?.split("-")[0];
-      if (SUPPORTED_LOCALES.includes(secondaryLocale)) {
-        emojiLocale = secondaryLocale;
-      } else {
-        emojiLocale = "en";
-      }
+  static i18n() {
+    return this.deepMerge(i18nEn, i18n.getMessages("emojis"));
+  }
+}
+class EmojiPopUp {
+
+  constructor(pickerOptions, handlerElement) {
+    this.popUp = this.createContainer();
+    this.popUp.appendChild(this.createCloseButton());
+    this.popUp.appendChild(this.addStyles());
+
+    let container = document.createElement("div");
+
+    this.picker = new Picker({
+      parent: container,
+      i18n: EmojiI18n.i18n(),
+      locale: EmojiI18n.locale(),
+      data: data,
+      perLine: 8,
+      theme: "light",
+      emojiButtonSize: 41,
+      emojiSize: 30,
+      ...(window.matchMedia(`(max-width: ${screens.sm})`).matches && { emojiButtonSize: 36 }),
+      ...(window.matchMedia(`(max-width: ${screens.sm})`).matches && { emojiSize: 30 }),
+      ...pickerOptions
+    });
+
+    this.popUp.appendChild(container);
+
+    this.setCoordinates(handlerElement);
+  }
+
+  createCloseButton() {
+    let closeButton = document.createElement("button");
+    closeButton.type = "button";
+    closeButton.classList.add("emoji-picker__closeButton");
+    closeButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>';
+    closeButton.addEventListener("click", () => {
+      this.close();
+    });
+    return closeButton;
+  }
+
+  addStyles() {
+    let style = document.createElement("style");
+    style.innerHTML = `
+    em-emoji-picker {
+    --color-border: rgb(204, 204, 204);
+    --rgb-background: 249, 250, 251;
+    --rgb-color: 0,0,0;
+    --rgb-accent: var(--primary-rgb);
+    --shadow: 5px 5px 15px -8px rgba(0,0,0,0.75);
+    --color-border-over: rgba(0, 0, 0, 0.1);
+    --rgb-input: 235, 235, 235;
+    --background-rgb: var(--primary-rgb);
+    --category-icon-size: 24px;
+
+    border: 1px solid var(--color-border);
+  }
+  `;
+
+    return style;
+  }
+
+  createContainer() {
+    const container = document.createElement("div");
+
+    container.classList.add("emoji-picker__popupContainer");
+    container.classList.add("emoji__decidim");
+    container.id = "picker"
+
+    container.style.position = "absolute";
+    container.style.zIndex = "1000";
+
+    document.body.appendChild(container);
+
+    return container;
+  }
+
+  setCoordinates(handlerElement) {
+    let rect = handlerElement.getBoundingClientRect();
+
+    let leftPosition = window.scrollX + rect.x;
+    let topPosition = window.scrollY + rect.y;
+
+    topPosition -= this.popUp.offsetHeight;
+    leftPosition -= this.popUp.offsetWidth;
+
+    let popUpWidth = window.matchMedia(`(max-width: ${screens.sm})`).matches
+      ? 41 * 9
+      : 36 * 8;
+    // Emoji picker min-width of 352px set in styles.scss in emoji-mart
+    leftPosition -= popUpWidth;
+
+    if (leftPosition < 0) {
+      leftPosition = parseInt((window.screen.availWidth - popUpWidth) / 2, 10) + 30;
     }
 
-    return emojiLocale;
+    this.popUp.style.top = `${topPosition}px`;
+    this.popUp.style.left = `${leftPosition}px`;
   }
 
-  constructor(elem) {
-    const i18nConfig = EmojiButton.i18n();
-    const i18nDictionary = i18nConfig.dictionary;
-    const buttonText = i18nConfig.messages.buttonText;
+  close() {
+    this.popUp.remove();
+  }
+}
 
+export class EmojiButton {
+
+  constructor(elem) {
     const wrapper = document.createElement("span");
     wrapper.className = "emoji__container"
     const btnContainer = document.createElement("span");
@@ -58,7 +152,7 @@ export class EmojiButton {
     const btn = document.createElement("button");
     btn.className = "emoji__button"
     btn.type = "button"
-    btn.setAttribute("aria-label", buttonText)
+    btn.setAttribute("aria-label", EmojiI18n.i18n().button)
     btn.innerHTML = '<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="smile" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"></path></svg>'
     const referenceElement = document.createElement("span");
     referenceElement.className = "emoji__reference";
@@ -74,39 +168,8 @@ export class EmojiButton {
     // belong to for Foundation Abide to show them automatically.
     parent.querySelectorAll(".form-error").forEach((el) => wrapper.appendChild(el));
 
-    const picker = createPopup({
-      autoFocus: "search",
-      locale: EmojiButton.locale(),
-      i18n: i18nDictionary,
-      // shrink the size of the emoji when mobile
-      ...(window.matchMedia(`(max-width: ${screens.sm})`).matches && { emojiSize: "1.5rem" })
-    }, {
-      position: "bottom-end",
-      triggerElement: btn,
-      className: "emoji__decidim",
-      referenceElement
-    });
-
-    // Prevent the picker close button to submit the comment form
-    picker.closeButton.type = "button";
-
-    let handlerPicker = () => {
-      picker.toggle();
-    }
-
-    btn.addEventListener("click", handlerPicker);
-
-    elem.addEventListener("characterCounter", (event) => {
-      if (event.detail.remaining >= 4) {
-        btn.addEventListener("click", handlerPicker);
-        btn.removeAttribute("style");
-      } else {
-        btn.removeEventListener("click", handlerPicker);
-        btn.setAttribute("style", "color:lightgrey");
-      }
-    });
-
-    picker.addEventListener("emoji:select", ({emoji}) => {
+    let emojiSelectHandler = (emojidata) => {
+      let emoji = emojidata.native;
       if (elem.contentEditable === "true") {
         if (elem.editor) {
           elem.editor.chain().insertContent(` ${emoji} `).focus().run();
@@ -124,6 +187,42 @@ export class EmojiButton {
 
       const event = new Event("emoji.added");
       elem.dispatchEvent(event);
+    }
+
+    let handlerPicker = () => {
+      let popUp = document.getElementById("picker");
+      if (popUp) {
+        // We close the picker
+        popUp.remove();
+        return;
+      }
+
+      let pickerOptions = {
+        onEmojiSelect: (emoji) => emojiSelectHandler(emoji),
+        onClickOutside: (event) => {
+          if (event.target.parentNode === btn) {
+            return;
+          }
+          handlerPicker();
+        }
+      }
+
+      // eslint-disable-next-line no-new
+      new EmojiPopUp(pickerOptions, btn);
+    }
+
+    btn.addEventListener("click", handlerPicker);
+
+    elem.addEventListener("emoji.added", handlerPicker);
+
+    elem.addEventListener("characterCounter", (event) => {
+      if (event.detail.remaining >= 4) {
+        btn.addEventListener("click", handlerPicker);
+        btn.removeAttribute("style");
+      } else {
+        btn.removeEventListener("click", handlerPicker);
+        btn.setAttribute("style", "color:lightgrey");
+      }
     });
   }
 }

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

@@ -27,7 +27,7 @@ $(() => {
         cb([])
       }).always(() => {
       // This function runs Tribute every single time you type something
-      // So we must evalute DOM properties after each
+      // So we must evaluate DOM properties after each
         const $parent = $(tribute.current.element).parent()
         $parent.addClass("is-active")
 

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

@@ -42,7 +42,7 @@ const mentionsInitializer = () => {
         cb([])
       }).always(() => {
       // This function runs Tribute every single time you type something
-      // So we must evalute DOM properties after each
+      // So we must evaluate DOM properties after each
         const $parent = $(tribute.current.element).parent();
         $parent.addClass("is-active");
 

data/app/packs/src/decidim/map/provider/here.js

@@ -1,5 +1,5 @@
 import "leaflet"
-import "leaflet-tilelayer-here"
+import "src/decidim/vendor/leaflet-tilelayer-here"
 
 /**
  * NOTE:

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

@@ -0,0 +1,40 @@
+/**
+ * This file handles the interactions of actions in notifications (if any)
+ * @param {HTMLElement} node target node
+ * @returns {void}
+ */
+export default function(node = document) {
+  const actions = node.querySelectorAll("[data-notification-action]")
+  if (!actions.length) {
+    return;
+  }
+
+  const extractMessage = (detail) => {
+    return detail && detail.message || detail[0] && detail[0].message
+  };
+
+  const resolvePanel = (panel, message, klass) => {
+    panel.classList.remove("spinner-container");
+    if (message) {
+      panel.innerHTML = `<div class="callout ${klass}">${message}</div>`;
+    } else {
+      panel.innerHTML = "";
+    }
+  };
+
+  actions.forEach((action) => {
+    const panel = action.closest(".notification__snippet-actions")
+    action.addEventListener("ajax:beforeSend", () => {
+      panel.classList.add("spinner-container");
+      panel.querySelectorAll("[data-notification-action]").forEach((el) => {
+        el.disabled = true;
+      });
+    });
+    action.addEventListener("ajax:success", (event) => {
+      resolvePanel(panel, extractMessage(event.detail), "success");
+    });
+    action.addEventListener("ajax:error", (event) => {
+      resolvePanel(panel, extractMessage(event.detail) || window.Decidim.config.get("notifications").action_error, "alert");
+    });
+  });
+}

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

@@ -0,0 +1,87 @@
+// This script implements the sticky header and the sticky buttons. The sticky header hides when participants scroll down and shows when they scroll up.
+// Sticky headers allow users to quickly access the navigation, search, and utility-navigation elements without scrolling up to the top of the page. They increase the discoverability of the elements in the header.
+// The sticky buttons in the other hand, those are some of the main Call to Actions (CTAs) that remain accessible on the screen as the user scrolls through the detailed view of the Meetings, Proposals, Surveys, and Budgets components.
+
+import { screens } from "tailwindcss/defaultTheme"
+
+let prevScroll = window.scrollY;
+const stickyHeader = document.querySelector("[data-sticky-header]");
+const footer = document.querySelector("footer");
+const stickyButtons = document.querySelectorAll("[data-sticky-buttons]");
+
+const isElementInViewport = (element) => {
+  const rect = element.getBoundingClientRect();
+  return rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight);
+};
+
+const adjustCtasButtons = () => {
+  if (!stickyButtons || !stickyButtons.length) {
+    return;
+  }
+
+  let visibleButtons = Array.from(stickyButtons).filter(isElementInViewport);
+
+  if (visibleButtons.length > 0) {
+    const marginBottom = Math.max(...visibleButtons.map((ctasButton) => ctasButton.offsetHeight));
+    footer.style.marginBottom = `${marginBottom}px`;
+  } else {
+    footer.style.marginBottom = 0;
+  }
+};
+
+// Fix the menu bar container margin top when there are multiple elements in the sticky header
+// As there could be different heights and we cannot know beforehand, we need to adjust this in a dynamic way
+// For instance we could have the omnipresent banner, the admin bar and the offline banner
+const fixMenuBarContainerMargin = () => {
+  if (!stickyHeader) {
+    return;
+  }
+
+  const isMaxScreenSize = (key) => {
+    return window.matchMedia(`(max-width: ${screens[key]})`).matches;
+  }
+
+  const menuBarContainer = document.querySelector("#menu-bar-container");
+  const marginTop = isMaxScreenSize("md")
+    ? stickyHeader.offsetHeight
+    : 0;
+
+  menuBarContainer.style.marginTop = `${marginTop}px`;
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  fixMenuBarContainerMargin();
+});
+
+window.addEventListener("resize", () => {
+  fixMenuBarContainerMargin();
+});
+
+if (stickyHeader) {
+  document.addEventListener("scroll", () => {
+    fixMenuBarContainerMargin();
+
+    // if a subelement is not visible it has no offsetParent
+    const header = document.getElementById("main-bar").offsetParent;
+
+    if (header && window.getComputedStyle(stickyHeader).position === "fixed") {
+      let currentScroll = window.scrollY;
+      let goingDown = prevScroll > currentScroll;
+      let change = Math.abs(prevScroll - currentScroll);
+      if (change > 5) {
+        if (goingDown || currentScroll < stickyHeader.offsetHeight) {
+          stickyHeader.style.top = 0;
+        } else {
+          stickyHeader.style.top = `-${stickyHeader.offsetHeight}px`;
+        }
+        prevScroll = currentScroll;
+      }
+
+      adjustCtasButtons();
+    }
+  });
+
+  document.addEventListener("on:toggle", () => {
+    adjustCtasButtons();
+  });
+};

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

@@ -8,9 +8,8 @@ import { NetworkFirst, NetworkOnly } from "workbox-strategies";
 import { CacheableResponsePlugin } from "workbox-cacheable-response";
 import { ExpirationPlugin } from "workbox-expiration";
 
-
 // https://developers.google.com/web/tools/workbox/guides/troubleshoot-and-debug#debugging_workbox
-self.__WB_DISABLE_DEV_LOGS = true
+self.__WB_DISABLE_DEV_LOGS = true;
 
 /**
  * This is a workaround to bypass a webpack compilation error
@@ -35,10 +34,12 @@ self.addEventListener("notificationclick", (event) => {
   // Get all the Window clients
   event.waitUntil(
     self.clients.matchAll({ type: "window" }).then((clientsArr) => {
-      const windowToFocus = clientsArr.find((windowClient) => windowClient.url === event.notification.data.url);
+      const windowToFocus = clientsArr.find(
+        (windowClient) => windowClient.url === event.notification.data.url
+      );
       if (windowToFocus) {
         // If a Window tab matching the targeted URL already exists, focus that
-        windowToFocus.focus()
+        windowToFocus.focus();
       } else {
         // Otherwise, open a new tab to the applicable URL and focus it
         self.clients.
@@ -51,7 +52,8 @@ self.addEventListener("notificationclick", (event) => {
 
 // avoid caching admin or users paths
 registerRoute(
-  ({ url }) => ["/admin/", "/users/"].some((path) => url.pathname.startsWith(path)),
+  ({ url }) =>
+    ["/admin/", "/users/"].some((path) => url.pathname.startsWith(path)),
   new NetworkOnly()
 );
 
@@ -69,7 +71,7 @@ registerRoute(
         maxAgeSeconds: 60 * 60
       })
     ]
-  }),
+  })
 );
 
 // common recipes

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

@@ -9,7 +9,7 @@ export default function createToggle(component) {
   const { toggle } = component.dataset
 
   if (!component.id) {
-    // when component has no id, we enforce it to have one
+    // when component has no id, we enforce to have it one
     component.id = `toggle-${Math.random().toString(36).substring(7)}`
   }