decidim-core 0.29.5 → 0.30.0.rc1

data/app/packs/images/decidim/default-avatar.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" width="200" height="200" x="0" y="0" enable-background="new 0 0 200 200" version="1.1" viewBox="0 0 200 200" xml:space="preserve"><g><path fill="#908e8e" d="M200-0.5H0v200h26.099c2.885-35.293,24.07-64.381,52.419-74.319C64.372,117.596,54.75,102.674,54.75,85.5 c0-24.853,20.146-45,45-45c24.853,0,45,20.147,45,45c0,17.095-9.533,31.963-23.572,39.58c28.5,9.837,49.828,39.002,52.724,74.42 H200V-0.5z"/><path fill="#FFF" d="M121.178,125.08c14.039-7.617,23.572-22.485,23.572-39.58c0-24.853-20.147-45-45-45 c-24.854,0-45,20.147-45,45c0,17.174,9.622,32.096,23.768,39.681c-28.349,9.938-49.534,39.026-52.419,74.319h147.803 C171.006,164.082,149.678,134.917,121.178,125.08z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" width="200" height="200" x="0" y="0" enable-background="new 0 0 200 200" version="1.1" viewBox="0 0 200 200" xml:space="preserve"><g><path fill="#C5C5C5" d="M200-0.5H0v200h26.099c2.885-35.293,24.07-64.381,52.419-74.319C64.372,117.596,54.75,102.674,54.75,85.5 c0-24.853,20.146-45,45-45c24.853,0,45,20.147,45,45c0,17.095-9.533,31.963-23.572,39.58c28.5,9.837,49.828,39.002,52.724,74.42 H200V-0.5z"/><path fill="#FFF" d="M121.178,125.08c14.039-7.617,23.572-22.485,23.572-39.58c0-24.853-20.147-45-45-45 c-24.854,0-45,20.147-45,45c0,17.174,9.622,32.096,23.768,39.681c-28.349,9.938-49.534,39.026-52.419,74.319h147.803 C171.006,164.082,149.678,134.917,121.178,125.08z"/></g></svg>

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

@@ -4,18 +4,13 @@
  * reload without this.
  */
 
-document.addEventListener("turbo:load", () => {
-  const callout = document.querySelector(".flash[role='alert']");
-  if (!callout) {
-    return;
+$(() => {
+  const $callout = $('.callout[role="alert"]:first');
+  if ($callout.length > 0) {
+    setTimeout(() => {
+      // The content insertion is to try to hint some of the screen readers
+      // that the alert content has changed and needs to be announced.
+      $callout.attr("tabindex", "0").focus().html(`${$callout.html()} `);
+    }, 500);
   }
-
-  setTimeout(() => {
-    callout.setAttribute("tabindex", "0");
-    callout.focus();
-
-    // The content insertion is to try to hint some of the screen readers
-    // that the alert content has changed and needs to be announced.
-    callout.innerHTML += " ";
-  }, 500);
 });

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

@@ -101,7 +101,6 @@ export default class CheckBoxesTree {
     const indeterminateSiblings = totalCheckSiblings.filter((checkbox) => checkbox.indeterminate)
 
     if (checkedSiblings.length === 0 && indeterminateSiblings.length === 0) {
-      parentCheck.checked = false;
       parentCheck.indeterminate = false;
     } else if (checkedSiblings.length === totalCheckSiblings.length && indeterminateSiblings.length === 0) {
       parentCheck.checked = true;

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

@@ -21,7 +21,9 @@ import select from "select";
  *
  * Options through data attributes:
  * - `data-clipboard-copy` = The jQuery selector for the target input element
- *   where text will be copied from.
+ *   where text will be copied from. If this element does not contain any visible text (for instance is an image),
+ *   the selector indicated in here will be used to place the confirmation message.
+ * - `data-clipboard-content` = The text that will be copied. If empty or not present, the target input element will be used.
  * - `data-clipboard-copy-label` = The label that will be shown in the button
  *   after a succesful copy.
  * - `data-clipboard-copy-message` = The text that will be announced to screen
@@ -40,12 +42,17 @@ $(() => {
     }
 
     const $input = $($el.data("clipboard-copy"));
-    if ($input.length < 1 || !$input.is("input, textarea, select")) {
-      return;
+
+    let selectedText = $el.data("clipboard-content") || "";
+    if (selectedText === "" && $input.is("input, textarea, select")) {
+      selectedText = select($input[0]);
     }
 
+    let $msgEl = $el;
+    if ($msgEl.text() === "") {
+      $msgEl = $input;
+    }
     // Get the available text to clipboard.
-    const selectedText = select($input[0]);
     if (!selectedText || selectedText.length < 1) {
       return;
     }
@@ -83,16 +90,18 @@ $(() => {
       }
 
       if (!$el.data("clipboard-copy-label-original")) {
-        $el.data("clipboard-copy-label-original", $el.html());
+        $el.data("clipboard-copy-label-original", $msgEl.html());
       }
 
-      $el.html(label);
+      $msgEl.html(label);
+
       to = setTimeout(() => {
-        $el.html($el.data("clipboard-copy-label-original"));
+        $msgEl.html($el.data("clipboard-copy-label-original"));
         $el.removeData("clipboard-copy-label-original");
         $el.removeData("clipboard-copy-label-timeout");
       }, CLIPBOARD_COPY_TIMEOUT);
-      $el.data("clipboard-copy-label-timeout", to)
+
+      $el.data("clipboard-copy-label-timeout", to);
     }
 
     // Alert the screen reader what just happened (the link was copied).
@@ -107,7 +116,7 @@ $(() => {
         }
       } else {
         $msg = $('<div aria-role="alert" aria-live="assertive" aria-atomic="true" class="sr-only"></div>');
-        $el.after($msg);
+        $msgEl.append($msg);
         $el.data("clipboard-message-element", $msg);
       }
 

data/app/packs/src/decidim/datepicker/datepicker_functions.js

@@ -29,12 +29,12 @@ export const formatInputDate = (date, formats) => {
   const month = dateList[1];
   const day = dateList[2];
 
-  if (formats.order === "m-d-y") {
-    return `${month}${formats.separator}${day}${formats.separator}${year}`;
+  if (formats.order === "d-m-y") {
+    return `${day}${formats.separator}${month}${formats.separator}${year}`;
   } else if (formats.order === "y-m-d") {
     return `${year}${formats.separator}${month}${formats.separator}${day}`;
   };
-  return `${day}${formats.separator}${month}${formats.separator}${year}`;
+  return `${month}${formats.separator}${day}${formats.separator}${year}`;
 };
 
 export const formatInputTime = (time, format, input) => {

data/app/packs/src/decidim/datepicker/generate_datepicker.js

@@ -13,13 +13,11 @@ export default function generateDatePicker(input, row, formats) {
   const date = document.createElement("input");
   date.setAttribute("id", `${input.id}_date`);
   date.setAttribute("type", "text");
-  date.setAttribute("aria-label", input.dataset.dateLabel);
 
   const calendar = document.createElement("button");
   calendar.innerHTML = icon("calendar-line");
   calendar.setAttribute("class", "datepicker__calendar-button");
   calendar.setAttribute("type", "button");
-  calendar.setAttribute("aria-label", input.dataset.buttonDateLabel);
 
   dateColumn.appendChild(date);
   dateColumn.appendChild(calendar);

data/app/packs/src/decidim/datepicker/generate_timepicker.js

@@ -13,13 +13,11 @@ export default function generateTimePicker(input, row, formats) {
   const time = document.createElement("input");
   time.setAttribute("id", `${input.id}_time`);
   time.setAttribute("type", "text");
-  time.setAttribute("aria-label", input.dataset.timeLabel);
 
   const clock = document.createElement("button");
   clock.innerHTML = icon("time-line")
   clock.setAttribute("class", "datepicker__clock-button");
   clock.setAttribute("type", "button");
-  clock.setAttribute("aria-label", input.dataset.buttonTimeLabel);
 
   timeColumn.appendChild(time);
   timeColumn.appendChild(clock);

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

@@ -0,0 +1 @@
+// This file is intentionally empty, because is the place for the defidim applications will add their JavaScript code.

data/app/packs/src/decidim/direct_uploads/upload_field.js

@@ -1,4 +1,5 @@
 import UploadModal from "src/decidim/direct_uploads/upload_modal";
+import { truncateFilename } from "src/decidim/direct_uploads/upload_utility";
 import { escapeHtml, escapeQuotes } from "src/decidim/utilities/text";
 
 const updateModalTitle = (modal) => {
@@ -29,7 +30,7 @@ const updateActiveUploads = (modal) => {
   const [removeFiles, addFiles] = [modal.items.filter(({ removable }) => removable), modal.items.filter(({ removable }) => !removable)]
 
   addFiles.forEach((file, ix) => {
-    let title = file.name
+    let title = truncateFilename(file.name, 19)
 
     let hidden = ""
     if (file.hiddenField) {
@@ -78,8 +79,8 @@ const updateActiveUploads = (modal) => {
 
     const template = `
       <div ${attachmentIdOrHiddenField} data-filename="${escapeQuotes(file.name)}" data-title="${escapeQuotes(title)}">
-        ${(/image/).test(file.type) && "<div><img src=\"data:,\" role=\"presentation\" /></div>" || ""}
-        <span>${escapeHtml(title)}</span>
+        ${(/image/).test(file.type) && `<div><img src="data:," alt="${escapeQuotes(file.name)}" /></div>` || ""}
+        <span>${escapeHtml(title)} (${escapeHtml(truncateFilename(file.name))})</span>
         ${hidden}
       </div>
     `

data/app/packs/src/decidim/direct_uploads/upload_modal.js

@@ -1,5 +1,6 @@
 import { Uploader } from "src/decidim/direct_uploads/uploader";
 import icon from "src/decidim/icon";
+import { truncateFilename } from "src/decidim/direct_uploads/upload_utility";
 import { escapeHtml, escapeQuotes } from "src/decidim/utilities/text";
 
 const STATUS = {
@@ -41,7 +42,7 @@ export default class UploadModal {
 
     this.emptyItems = this.modal.querySelector("[data-dropzone-no-items]");
     this.uploadItems = this.modal.querySelector("[data-dropzone-items]");
-    this.input = this.dropZone.querySelector("input[type=file]");
+    this.input = this.dropZone.querySelector("input");
     this.items = []
 
     this.attachmentCounter = 0;
@@ -170,29 +171,29 @@ export default class UploadModal {
 
   createUploadItem(file, errors, opts = {}) {
     const okTemplate = `
-      <img src="data:,", role="presentation" />
-      <span class="upload-modal__span">${escapeHtml(file.name)}</span>
+      <img src="data:," alt="${escapeQuotes(file.name)}" />
+      <span>${escapeHtml(truncateFilename(file.name))}</span>
     `
 
     const errorTemplate = `
       <div>${icon("error-warning-line")}</div>
       <div>
-        <span class="upload-modal__span">${escapeHtml(file.name)}</span>
+        <span>${escapeHtml(truncateFilename(file.name))}</span>
         <span>${this.locales.validation_error}</span>
         <ul>${errors.map((error) => `<li>${error}</li>`).join("\n")}</ul>
       </div>
     `
 
     const titleTemplate = `
-      <img src="data:," role="presentation" />
+      <img src="data:," alt="${escapeQuotes(file.name)}" />
       <div>
         <div>
           <label>${this.locales.filename}</label>
-          <span class="upload-modal__span">${escapeHtml(file.name)}</span>
+          <span>${escapeHtml(truncateFilename(file.name))}</span>
         </div>
         <div>
-          <label for="${file.name}">${this.locales.title}</label>
-          <input class="sm" type="text" value="${escapeQuotes(opts.title || file.name)}" id="${file.name}" />
+          <label>${this.locales.title}</label>
+          <input class="sm" type="text" value="${escapeQuotes(opts.title || truncateFilename(file.name))}" />
         </div>
       </div>
     `

data/app/packs/src/decidim/editor/common/suggestion.js

@@ -98,17 +98,7 @@ export const createSuggestionRenderer = (node, { itemConverter } = {}) => () =>
       suggestionItem.textContent = label;
       suggestion.append(suggestionItem);
 
-      suggestionItem.addEventListener("click", (ev) => {
-        ev.preventDefault();
-
-        if (currentRange) {
-          // Increase the current range by 1 since the ENTER key would do the
-          // same when doing the selection through keyboard.
-          currentRange.to += 1;
-        }
-
-        selectItem(idx);
-      });
+      suggestionItem.addEventListener("click", () => selectItem(idx));
     });
   }
 

data/app/packs/src/decidim/geocoding/reverse_geocoding.js

@@ -0,0 +1,60 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const info = (target, msg) => {
+    const label = target.closest("label");
+    label.querySelectorAll(".form-error").forEach((el) => el.remove());
+    if (msg) {
+      const error = document.createElement("span");
+      error.className = "form-error";
+      error.textContent = msg;
+      label.appendChild(error);
+      error.style.display = "block";
+    }
+  };
+
+  const setLocating = (button, enable) => {
+    if (enable) {
+      button.setAttribute("disabled", true);
+    } else {
+      button.removeAttribute("disabled");
+    }
+  };
+
+  document.querySelectorAll(".user-device-location button").forEach((button) => {
+    button.addEventListener("click", (event) => {
+      const target = event.target;
+      if (target.disabled) {
+        return;
+      }
+
+      const input = document.getElementById(target.dataset.input);
+      const errorNoLocation = target.dataset.errorNoLocation;
+      const errorUnsupported = target.dataset.errorUnsupported;
+      const url = target.dataset.url;
+
+      if (navigator.geolocation) {
+        setLocating(target, true);
+        navigator.geolocation.getCurrentPosition((position) => {
+          const coordinates = [position.coords.latitude, position.coords.longitude];
+
+          // reverse geolocation
+          $.post(url, { latitude: coordinates[0], longitude: coordinates[1] }, (data) => {
+            input.value = data.address;
+            $(input).trigger("geocoder-suggest-coordinates.decidim", [coordinates]);
+          }).fail((xhr, status, error) => {
+            info(input, `${errorNoLocation} ${error}`);
+          });
+
+          setLocating(target, false);
+
+        }, (evt) => {
+          info(input, `${errorNoLocation} ${evt.message}`);
+          target.removeAttribute("disabled");
+        }, {
+          enableHighAccuracy: true
+        });
+      } else {
+        info(input, errorUnsupported);
+      }
+    });
+  });
+});

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

@@ -8,6 +8,7 @@
 import "core-js/stable";
 import "regenerator-runtime/runtime";
 import "jquery"
+import "chartkick/chart.js"
 
 // REDESIGN_PENDING: deprecated
 import "foundation-sites";
@@ -49,8 +50,8 @@ import "src/decidim/data_consent"
 import "src/decidim/abide_form_validator_fixer"
 import "src/decidim/sw"
 import "src/decidim/sticky_header"
+import "src/decidim/sticky_footer"
 import "src/decidim/attachments"
-import "src/decidim/dropdown_menu"
 
 // local deps that require initialization
 import ConfirmDialog, { initializeConfirm } from "src/decidim/confirm"
@@ -70,8 +71,7 @@ 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 fetchRemoteTooltip from "src/decidim/remote_tooltips"
 import createToggle from "src/decidim/toggle"
 import {
   createAccordion,
@@ -81,6 +81,7 @@ import {
   Dialogs
 } from "src/decidim/a11y"
 import changeReportFormBehavior from "src/decidim/change_report_form_behavior"
+import setOnboardingAction from "src/decidim/onboarding_pending_action"
 
 // bad practice: window namespace should avoid be populated as much as possible
 // rails-translations could be referenced through a single Decidim.I18n object
@@ -201,10 +202,13 @@ 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("[data-remote-tooltip]").forEach((elem) => fetchRemoteTooltip(elem))
 
   element.querySelectorAll(".new_report").forEach((elem) => changeReportFormBehavior(elem))
+
+  element.querySelectorAll("[data-onboarding-action]").forEach((elem) => setOnboardingAction(elem))
+
+  document.dispatchEvent(new CustomEvent("decidim:loaded", { detail: { element } }));
 }
 
 // If no jQuery is used the Tribute feature used in comments to autocomplete

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

@@ -93,7 +93,7 @@ export default class InputCharacterCounter {
       this.$srTarget = $(`#${screenReaderId}`);
       if (!this.$srTarget.length) {
         this.$srTarget = $(
-          `<span role="status" id="${screenReaderId}" class="sr-only remaining-character-count-sr" aria-hidden="true"/>`
+          `<span role="status" id="${screenReaderId}" class="sr-only remaining-character-count-sr" />`
         );
         this.$target.before(this.$srTarget);
       }

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

@@ -0,0 +1,24 @@
+import Cookies from "js-cookie";
+
+const ONBOARDING_COOKIE_EXPIRY = 365;
+
+// The same key is set in the Decidim::OnboardingManager class to retrieve the data from the cookie and store it in the extended data attribute
+const DATA_KEY = "onboarding";
+
+/**
+ * @param {DOMElement} element Element which provides the information for cookie about action to perform.
+ * @return {Void} Nothing
+ */
+export default function setOnboardingAction(element) {
+  // the dialog-open data attribute is stealing the click event
+  element.addEventListener("mousedown", () => {
+    const action = element.dataset.onboardingAction;
+    const model = element.dataset.onboardingModel;
+    const permissionsHolder = element.dataset.onboardingPermissionsHolder;
+    const redirectPath = element.dataset.onboardingRedirectPath;
+
+    Cookies.set(DATA_KEY, JSON.stringify({ action, model, permissionsHolder, redirectPath }), {
+      expires: ONBOARDING_COOKIE_EXPIRY
+    });
+  });
+}

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

@@ -0,0 +1,29 @@
+// This script add margin to the footer when the sticky CTA Buttons are shown on mobile devices,
+// so the footer is always visible.
+//
+// The sticky buttons show some of the main Call to Actions (CTAs) so that they remain accessible on the
+// screen as the participant scrolls through the detailed view of the Meetings, Proposals, Surveys, and Budgets
+// components.
+//
+
+const footer = document.querySelector("footer");
+const stickyButtons = document.querySelector("[data-sticky-buttons]");
+
+const adjustCtasButtons = () => {
+  if (!stickyButtons) {
+    return;
+  }
+
+  const marginBottom = stickyButtons.offsetHeight;
+  footer.style.marginBottom = `${marginBottom}px`;
+};
+
+if (stickyButtons) {
+  document.addEventListener("scroll", () => {
+    adjustCtasButtons();
+  });
+
+  document.addEventListener("on:toggle", () => {
+    adjustCtasButtons();
+  });
+}

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

@@ -1,33 +1,14 @@
-// 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.
+// This script implements the sticky header on mobile devices.
+//
+// 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.
+//
 
 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
@@ -76,12 +57,6 @@ if (stickyHeader) {
         }
         prevScroll = currentScroll;
       }
-
-      adjustCtasButtons();
     }
   });
-
-  document.addEventListener("on:toggle", () => {
-    adjustCtasButtons();
-  });
 };

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

@@ -2,6 +2,7 @@ import PasswordToggler from "src/decidim/password_toggler";
 
 $(() => {
   const $userRegistrationForm = $("#register-form");
+  const $userOmniauthRegistrationForm = $("#omniauth-register-form");
   const $userGroupFields      = $userRegistrationForm.find(".user-group-fields");
   const userPassword         =  document.querySelector(".user-password");
   const inputSelector         = 'input[name="user[sign_up_as]"]';
@@ -19,9 +20,11 @@ $(() => {
 
   const checkNewsletter = (check) => {
     $userRegistrationForm.find(newsletterSelector).prop("checked", check);
+    $userOmniauthRegistrationForm.find(newsletterSelector).prop("checked", check);
     $newsletterModal.data("continue", true);
     window.Decidim.currentDialogs["sign-up-newsletter-modal"].close()
     $userRegistrationForm.submit();
+    $userOmniauthRegistrationForm.submit();
   }
 
   setGroupFieldsVisibility($userRegistrationForm.find(`${inputSelector}:checked`).val());
@@ -42,6 +45,16 @@ $(() => {
     }
   });
 
+  $userOmniauthRegistrationForm.on("submit", (event) => {
+    const newsletterChecked = $userOmniauthRegistrationForm.find(newsletterSelector);
+    if (!$newsletterModal.data("continue")) {
+      if (!newsletterChecked.prop("checked")) {
+        event.preventDefault();
+        window.Decidim.currentDialogs["sign-up-newsletter-modal"].open()
+      }
+    }
+  });
+
   $newsletterModal.find("[data-check]").on("click", (event) => {
     checkNewsletter($(event.target).data("check"));
   });