decidim-core 0.28.2 → 0.29.0.rc2

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/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/tooltips.js

@@ -19,7 +19,7 @@ const getAbsolutePosition = (node, relativeParent) => {
   let [pageX, pageY] = [window.pageXOffset, window.pageYOffset]
   if (relativeParent) {
     // in order to calculate the relative parent position, we reuse this function,
-    // using the parent regarding the window and substracting the topLeft corner (its relative position [0,0])
+    // using the parent regarding the window and subtracting the topLeft corner (its relative position [0,0])
     const { topLeft: [parentX, parentY] } = getAbsolutePosition(relativeParent);
     [pageX, pageY] = [pageX - parentX, pageY - parentY]
   }

data/app/packs/stylesheets/decidim/_datepicker.scss

@@ -0,0 +1,193 @@
+.sc-wc-datepicker-h {
+  @apply absolute w-80 h-96 left-0;
+}
+
+.wc-datepicker {
+  @apply absolute w-80 h-96 z-20 text-sm;
+
+  &__header {
+    @apply px-0 py-0 pb-0 gap-0 h-14;
+  }
+
+  &__month-select,
+  &__year-select {
+    @apply h-10 mb-4 leading-normal;
+  }
+
+  &__month-select {
+    @apply pr-3;
+  }
+
+  &__year-select {
+    @apply max-w-fit;
+  }
+
+  &__previous-month-button,
+  &__next-month-button,
+  &__previous-year-button,
+  &__next-year-button {
+    @apply h-10 text-secondary bg-transparent;
+  }
+
+  &__date:focus > * {
+    @apply outline-1 outline-gray;
+  }
+
+  &__date--selected > * {
+    @apply bg-secondary border-solid border-2 border-gray;
+  }
+
+  &__date--selected:hover > * {
+    @apply bg-secondary;
+  }
+}
+
+.datepicker {
+  &__container {
+    @apply absolute w-80 h-96;
+  }
+
+  &__datepicker-row {
+    @apply flex gap-4;
+  }
+
+  &__time-row {
+    @apply flex top-6 absolute w-full;
+  }
+
+  &__date-column,
+  &__time-column {
+    @apply flex-1 w-1/2 relative;
+
+    > input {
+      @apply h-9;
+    }
+  }
+
+  &__hour-column,
+  &__minute-column {
+    @apply flex-1 h-20 relative my-2 mx-8 rounded border border-solid border-gray;
+  }
+
+  &__period-column {
+    @apply w-28 h-8 top-1 right-10 my-2 mx-1 absolute;
+  }
+
+  &__calendar-button {
+    @apply h-8 rounded absolute top-4 mt-0.5 fill-gray-2 leading-3 right-2;
+  }
+
+  &__clock-button {
+    @apply h-8 rounded absolute top-4 mt-0.5 fill-gray-2 leading-3 right-2;
+  }
+
+  &__time-frame {
+    @apply w-52 max-w-lg h-40 bg-white absolute border border-solid border-[#f2f3f5] z-20;
+  }
+
+  &__hour-picker,
+  &__minute-picker {
+    @apply w-1/2 left-2.5 h-8 text-center text-sm absolute top-6;
+
+    &:hover {
+      @apply cursor-default;
+    }
+
+    &:focus-visible {
+      @apply outline-0;
+    }
+  }
+
+  &__close-calendar {
+    @apply absolute z-30 bottom-2 right-1;
+  }
+
+  &__pick-calendar {
+    @apply absolute z-30 bottom-2 right-16 mr-1;
+
+    &:disabled {
+      @apply bg-gray;
+    }
+  }
+
+  &__close-clock {
+    @apply absolute z-30 bottom-2 right-1;
+  }
+
+  &__reset-clock {
+    @apply absolute z-30 bottom-2 left-2;
+  }
+
+  &__select-clock {
+    @apply absolute z-30 bottom-2 right-16 mr-1;
+  }
+
+  &__hour-up {
+    @apply absolute rounded-t w-full h-6;
+
+    &:hover {
+      @apply bg-gray-3;
+    }
+  }
+
+  &__hour-down {
+    @apply absolute rounded-b w-full h-6 bottom-0;
+
+    &:hover {
+      @apply bg-gray-3;
+    }
+  }
+
+  &__minute-up {
+    @apply absolute rounded-t w-full h-6;
+
+    &:hover {
+      @apply bg-gray-3;
+    }
+  }
+
+  &__minute-down {
+    @apply absolute rounded-b w-full h-6 bottom-0;
+
+    &:hover {
+      @apply bg-gray-3;
+    }
+  }
+
+  &__period-am {
+    @apply ml-1 accent-secondary bg-secondary;
+  }
+
+  &__period-pm {
+    @apply ml-1;
+  }
+
+  &__label-row {
+    @apply absolute flex top-2 w-full text-sm font-semibold;
+  }
+
+  &__hour-label-container {
+    @apply flex-1 text-center;
+  }
+
+  &__minute-label-container {
+    @apply flex-1 text-center;
+  }
+
+  &__help-text-container {
+    @apply w-full h-10 relative;
+  }
+
+  &__help-date {
+    @apply w-1/2 relative inline-block;
+  }
+
+  &__help-time {
+    @apply w-1/2 relative inline-block left-2;
+  }
+}
+
+input[type="date"]::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}