decidim-core 0.30.1 → 0.31.0.rc1

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

@@ -1,5 +1,3 @@
-/* eslint-disable max-lines */
-
 /**
  * External dependencies
  */
@@ -21,78 +19,44 @@ import morphdom from "morphdom"
 /**
  * Local dependencies
  */
+import updateExternalDomainLinks from "src/decidim/refactor/implementation/external_domain_warning"
+import ExternalLink from "src/decidim/refactor/implementation/external_link"
+import Configuration from "src/decidim/refactor/implementation/configuration"
+import setOnboardingAction from "src/decidim/refactor/integration/onboarding_pending_action"
 
 // local deps with no initialization
-import "src/decidim/input_tags"
-import "src/decidim/input_hashtags"
-import "src/decidim/input_mentions"
-import "src/decidim/input_multiple_mentions"
-import "src/decidim/input_autojump"
-import "src/decidim/history"
-import "src/decidim/callout"
-import "src/decidim/clipboard"
-import "src/decidim/append_elements"
-import "src/decidim/user_registrations"
-import "src/decidim/account_form"
+import "src/decidim/refactor/moved/history"
 import "src/decidim/append_redirect_url_to_modals"
 import "src/decidim/form_attachments"
 import "src/decidim/form_remote"
-import "src/decidim/delayed"
-import "src/decidim/vizzs"
-import "src/decidim/responsive_horizontal_tabs"
+import "src/decidim/refactor/moved/delayed"
 import "src/decidim/security/selfxss_warning"
 import "src/decidim/session_timeouter"
 import "src/decidim/results_listing"
-import "src/decidim/impersonation"
-import "src/decidim/gallery"
-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/sticky_footer"
 import "src/decidim/attachments"
+import "src/decidim/dropdown_menu"
+import "src/decidim/callout"
 
 // local deps that require initialization
 import ConfirmDialog, { initializeConfirm } from "src/decidim/confirm"
-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"
-import scrollToLastChild from "src/decidim/scroll_to_last_child"
-import InputCharacterCounter, { createCharacterCounter } from "src/decidim/input_character_counter"
-import FormValidator from "src/decidim/form_validator"
-import FormFilterComponent from "src/decidim/form_filter"
-import addInputEmoji, { EmojiButton } from "src/decidim/input_emoji"
-import FocusGuard from "src/decidim/focus_guard"
-import backToListLink from "src/decidim/back_to_list"
+import { initializeUploadFields } from "src/decidim/direct_uploads/upload_field"
+import { initializeReverseGeocoding } from "src/decidim/geocoding/reverse_geocoding"
+import FocusGuard from "src/decidim/refactor/moved/focus_guard"
 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"
-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
 window.Decidim = window.Decidim || {
   config: new Configuration(),
   ExternalLink,
-  InputCharacterCounter,
-  FormValidator,
-  addInputEmoji,
-  EmojiButton,
   Dialogs,
   ConfirmDialog,
   announceForScreenReader
@@ -100,6 +64,95 @@ window.Decidim = window.Decidim || {
 
 window.morphdom = morphdom
 
+// eslint-disable-next-line max-params
+const deprecate = (element, targetController, oldSyntax) => {
+  if (element.hasAttribute("data-controller") && element.getAttribute("data-controller").includes(targetController)) {
+    return;
+  }
+
+  console.warn(element)
+  console.warn(`[Decidim] ${oldSyntax} is deprecated. Please use the new version of this component - data-controller="${targetController}" - ${window.location.href}`)
+  // eslint-disable-next-line no-alert
+  alert(`[Decidim] ${oldSyntax} is deprecated. Please use the new version of this component - data-controller="${targetController}"`)
+}
+
+const deprecationMessage = (element, oldSyntax, newSyntax) => {
+  console.warn(`[Decidim] ${oldSyntax} is deprecated. Please use the new version of this component - ${newSyntax}`)
+  // eslint-disable-next-line no-alert
+  alert(`[Decidim] ${oldSyntax} is deprecated. Please use the new version of this component - ${newSyntax}`)
+}
+
+window.deprecate = deprecate;
+window.deprecationMessage = deprecationMessage;
+
+document.addEventListener("turbo:load", () => {
+  document.querySelectorAll("[data-sticky-buttons]").forEach((container) =>
+    deprecate(container, "sticky-buttons", "[data-sticky-buttons]"));
+  document.querySelectorAll("[data-clipboard-copy]").forEach((container) =>
+    deprecate(container, "clipboard", "[data-clipboard-copy]"));
+  document.querySelectorAll('[data-component="accordion"]').forEach((container) =>
+    deprecate(container, "accordion", "data-component='accordion'"));
+  document.querySelectorAll('[data-component="dropdown"]').forEach((container) =>
+    deprecate(container, "dropdown", "data-component='dropdown'"));
+  document.querySelectorAll("[data-scroll-last-child]").forEach((container) =>
+    deprecate(container, "scroll-to-last", "data-scroll-last-child"));
+  document.querySelectorAll(".editor-container").forEach((container) =>
+    deprecate(container, "editor", ".editor-container"));
+  document.querySelectorAll(".new_report").forEach((container) =>
+    deprecate(container, "report-form", ".new_report"));
+  document.querySelectorAll(".user-password").forEach((container) =>
+    deprecate(container, "password-toggler", ".user-password"));
+  document.querySelectorAll(".api-user-secret").forEach((container) =>
+    deprecate(container, "password-toggler", ".api-user-secret"));
+  document.querySelectorAll("[data-input-emoji]").forEach((container) =>
+    deprecate(container, "emoji", "[data-input-emoji]"));
+  document.querySelectorAll(".js-mentions").forEach((container) =>
+    deprecate(container, "mention", ".js-mentions"));
+  document.querySelectorAll(".js-multiple-mentions").forEach((container) =>
+    deprecate(container, "multiple-mentions", ".js-multiple-mentions"))
+  document.querySelectorAll("[data-tooltip]").forEach((elem) =>
+    deprecate(elem, "tooltip", "[data-tooltip]"))
+  document.querySelectorAll(".delete-account").forEach((container) =>
+    deprecate(container, "delete-account-form", ".delete-account"))
+  document.querySelectorAll("[data-notification-action]").forEach((elem) =>
+    deprecate(elem, "notification-action", "[data-notification-action]"))
+  document.querySelectorAll("#register-from").forEach((elem) =>
+    deprecate(elem, "user-registration-form", "#register-from"))
+  document.querySelectorAll("#omniauth-register-from").forEach((elem) =>
+    deprecate(elem, "user-registration-form", "#omniauth-register-from"))
+  document.querySelectorAll(".js-tags-container").forEach((container) =>
+    deprecate(container, "input-tags", ".js-tags-container"))
+  document.querySelectorAll("[data-toggle]").forEach((elem) =>
+    deprecate(elem, "toggle", "[data-toggle]"))
+  document.querySelectorAll("[data-impersonation-warning]").forEach((container) =>
+    deprecate(container, "impersonation-warning", "[data-impersonation-warning]"))
+  document.querySelectorAll("#panel-password.user-password").forEach((container) =>
+    deprecate(container, "account-form", "#panel-password"))
+  document.querySelectorAll(".slug").forEach((container) =>
+    deprecate(container, ".slug", "slug"))
+  document.querySelectorAll("textarea[maxlength], textarea[minlength]").forEach((container) =>
+    deprecate(container, "character-counter", "textarea[maxlength], textarea[minlength]"))
+  document.querySelectorAll("input[type='text'][maxlength], input[type='text'][minlength]").forEach((container) =>
+    deprecate(container, "character-counter", "input[type='text'][maxlength], input[type='text'][minlength]"))
+  document.querySelectorAll(".editor>input[type='hidden'][maxlength], .editor>input[type='hidden'][minlength]").forEach((container) =>
+    deprecate(container, "character-counter", ".editor>input[type='hidden'][maxlength], .editor>input[type='hidden'][minlength]"))
+
+  document.querySelectorAll('input[type="datetime-local"]').forEach((container) =>
+    deprecate(container, "date-picker", 'input[type="datetime-local"]'));
+  document.querySelectorAll('input[type="date"]').forEach((container) =>
+    deprecate(container, "date-picker", 'input[type="date"]'));
+
+  document.querySelectorAll("form.new_filter").forEach((container) =>
+    deprecate(container, "form-filter", "form.new_filter"))
+
+  document.querySelectorAll(".responsive-tab-block").forEach((container) =>
+    deprecationMessage(container, ".responsive-tab-block", "NEEDS TO BE REMOVED"));
+  document.querySelectorAll('.callout[role="alert"]').forEach((container) =>
+    deprecationMessage(container, '.callout[role="alert"]', '.flash[role="alert"]'));
+  document.querySelectorAll(".js-back-to-list").forEach((container) =>
+    deprecationMessage(container, ".js-back-to-list", "NEEDS TO BE REMOVED"));
+})
+
 // REDESIGN_PENDING: deprecated
 window.initFoundation = (element) => {
   $(element).foundation();
@@ -117,7 +170,7 @@ window.initFoundation = (element) => {
   $document.off("click.zf.trigger", window.Foundation.Triggers.Listeners.Basic.openListener);
   $document.on("click.zf.trigger", "[data-open]", (ev, ...restArgs) => {
     // Do not apply for the accordion triggers.
-    const accordion = ev.currentTarget?.closest("[data-component='accordion']");
+    const accordion = ev.currentTarget?.closest("[data-controller='accordion']");
     if (accordion) {
       return;
     }
@@ -147,28 +200,6 @@ 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
-  $("input[type='text'], textarea, .editor>input[type='hidden']", element).each((_i, elem) => {
-    const $input = $(elem);
-
-    if (!$input.is("[minlength]") && !$input.is("[maxlength]")) {
-      return;
-    }
-
-    createCharacterCounter($input);
-  });
-
-  $("form.new_filter", element).each(function () {
-    // eslint-disable-next-line no-invalid-this
-    const formFilter = new FormFilterComponent($(this));
-
-    formFilter.mountComponent();
-  })
-
   element.querySelectorAll("a[target=\"_blank\"]:not([data-external-link=\"false\"])").forEach((elem) => {
     // both functions (updateExternalDomainLinks and ExternalLink) are related, so if we disable one, the other also
     updateExternalDomainLinks(elem)
@@ -176,52 +207,42 @@ const initializer = (element = document) => {
     return new ExternalLink(elem)
   })
 
-  addInputEmoji(element)
-
-  backToListLink(element.querySelectorAll(".js-back-to-list"));
-
   markAsReadNotifications(element)
-  handleNotificationActions(element)
-
-  scrollToLastChild(element)
-
-  element.querySelectorAll('[data-component="accordion"]').forEach((component) => createAccordion(component))
-
-  element.querySelectorAll('[data-component="dropdown"]').forEach((component) => createDropdown(component))
 
   element.querySelectorAll("[data-dialog]").forEach((component) => createDialog(component))
 
   // Initialize available remote modals (ajax-fetched contents)
   element.querySelectorAll("[data-dialog-remote-url]").forEach((elem) => new RemoteModal(elem))
 
-  // Add event listeners to identity modal
-  element.querySelectorAll("[data-user-identity]").forEach((elem) => selectActiveIdentity(elem))
-
-  // Initialize data-tooltips
-  element.querySelectorAll("[data-tooltip]").forEach((elem) => createTooltip(elem))
-
-  // 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))
+  // https://github.com/tremend-cofe/decidim-js/pull/6
+  element.querySelectorAll("[data-controller='onboarding']").forEach((elem) => setOnboardingAction(elem));
+  element.querySelectorAll("[data-onboarding-action]").forEach((elem) => {
+    console.error(`${window.location.href} Using data-onboarding-action. Please switch to data-controller="onboarding" data-onboarding-action-value="$action".`);
+    setOnboardingAction(elem);
+  })
 
-  element.querySelectorAll(".new_report").forEach((elem) => changeReportFormBehavior(elem))
+  initializeUploadFields(element.querySelectorAll("button[data-upload]"));
+  initializeReverseGeocoding()
 
-  element.querySelectorAll("[data-onboarding-action]").forEach((elem) => setOnboardingAction(elem))
+  element.querySelectorAll("[data-controller='accordion']").forEach((accordion) => {
+    accordion.dispatchEvent(new CustomEvent("accordion:reconnect", { detail: { collapse: true } }));
+  });
 
   document.dispatchEvent(new CustomEvent("decidim:loaded", { detail: { element } }));
 }
 
 // If no jQuery is used the Tribute feature used in comments to autocomplete
 // mentions stops working
-// document.addEventListener("DOMContentLoaded", () => {
 $(() => initializer());
 
 // Run initializer action over the new DOM elements
 document.addEventListener("remote-modal:loaded", ({ detail }) => initializer(detail));
 document.addEventListener("ajax:loaded", ({ detail }) => initializer(detail));
 
+window.addEventListener("DOMContentLoaded", () => {
+  document.dispatchEvent(new CustomEvent("turbo:load", { detail: { document } }));
+});
+
 // Run initializer action over the new DOM elements (for example after comments polling)
 document.addEventListener("comments:loaded", (event) => {
   const commentsIds = event.detail.commentsIds;
@@ -234,3 +255,15 @@ document.addEventListener("comments:loaded", (event) => {
     });
   }
 });
+
+import { Application } from "@hotwired/stimulus"
+import { definitionsFromContext } from "src/decidim/refactor/support/stimulus"
+
+const application = Application.start()
+application.debug = true
+
+const context = require.context("./controllers", true, /controller\.js$/)
+application.load(definitionsFromContext(context))
+
+window.definitionsFromContext = definitionsFromContext
+window.Stimulus = application

data/app/packs/src/decidim/map/integration/forms.js

@@ -1,4 +1,4 @@
-$(() => {
+document.addEventListener("turbo:load", () => {
   $("[data-decidim-map]").on("ready.decidim", (ev, _map, mapConfig) => {
     const $map = $(ev.target);
     const ctrl = $map.data("map-controller");

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

@@ -71,7 +71,7 @@ const loadMap = (mapId, markersData) => {
   return map;
 };
 
-$(() => {
+document.addEventListener("turbo:load", () => {
   const $map = $("#map");
   if ($map.length > 0) {
     loadMap($map.attr("id"), $map.data("markers-data"));

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

@@ -6,7 +6,7 @@ import "leaflet"
  * the map is initialized. The document.ready handler set by this script has to
  * be registered before decidim/map registers its own.
  */
-$(() => {
+document.addEventListener("turbo:load", () => {
   $("[data-decidim-map]").on("configure.decidim", (_ev, map, mapConfig) => {
     const tilesConfig = mapConfig.tileLayer;
     L.tileLayer(tilesConfig.url, tilesConfig.options).addTo(map);

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

@@ -7,7 +7,7 @@ import "leaflet-tilelayer-here"
  * the map is initialized. The document.ready handler set by this script has to
  * be registered before decidim/map registers its own.
  */
-$(() => {
+document.addEventListener("turbo:load", () => {
   $("[data-decidim-map]").on("configure.decidim", (_ev, map, mapConfig) => {
     L.tileLayer.here(mapConfig.tileLayer).addTo(map);
   });

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

@@ -1,6 +1,6 @@
 import "src/decidim/map/factory"
 
-$(() => {
+document.addEventListener("turbo:load", () => {
   // Load the map controller factory method in the document.ready handler to
   // allow overriding it by any script that is loaded before the document is
   // ready.

data/app/packs/src/decidim/{external_link.js → refactor/implementation/external_link.js}

@@ -1,4 +1,4 @@
-import icon from "src/decidim/icon"
+import icon from "src/decidim/refactor/moved/icon"
 
 const DEFAULT_MESSAGES = {
   externalLink: "External link",

data/app/packs/src/decidim/{onboarding_pending_action.js → refactor/integration/onboarding_pending_action.js}

@@ -12,10 +12,10 @@ const DATA_KEY = "onboarding";
 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;
+    const action = element.dataset.onboardingActionValue;
+    const model = element.dataset.onboardingModelValue;
+    const permissionsHolder = element.dataset.onboardingPermissionsHolderValue;
+    const redirectPath = element.dataset.onboardingRedirectPathValue;
 
     Cookies.set(DATA_KEY, JSON.stringify({ action, model, permissionsHolder, redirectPath }), {
       expires: ONBOARDING_COOKIE_EXPIRY

data/app/packs/src/decidim/{check_boxes_tree.js → refactor/moved/check_boxes_tree.js}

@@ -22,12 +22,18 @@ export default class CheckBoxesTree {
   /**
    * Set checkboxes as checked if included in given values
    * @public
-   * @param {Array} checkboxes - array of checkboxes to check
+   * @param {NodeList|Array|HTMLElement[]} checkboxes - array of checkboxes to check
    * @param {Array} values - values of checkboxes that should be checked
    * @returns {Void} - Returns nothing.
    */
   updateChecked(checkboxes, values) {
-    checkboxes.each((_idx, checkbox) => {
+    // Handle both NodeList/Array and jQuery-like objects
+    // eslint-disable-next-line no-undefined
+    const checkboxArray = checkboxes.length === undefined
+      ? [checkboxes]
+      : Array.from(checkboxes);
+
+    checkboxArray.forEach((checkbox) => {
       if ((checkbox.value === "" && values.length === 1) || (checkbox.value !== "" && values.includes(checkbox.value))) {
         checkbox.checked = true;
         this.checkTheCheckBoxes(checkbox);
@@ -39,21 +45,30 @@ export default class CheckBoxesTree {
   /**
    * Set the container form(s) for the component, to disable ignored filters before submitting them
    * @public
-   * @param {query} theForm - form or forms where the component will be used
+   * @param {HTMLElement} theForm - form element where the component will be used
    * @returns {Void} - Returns nothing.
    */
   setContainerForm(theForm) {
-    theForm.on("submit ajax:before", () => {
-      theForm.find(".ignore-filters input, input.ignore-filter").each((_idx, elem) => {
+    // Handle both jQuery objects and DOM elements
+    const form = theForm;
+
+    const handleBeforeSubmit = () => {
+      const ignoredInputs = form.querySelectorAll(".ignore-filters input, input.ignore-filter");
+      ignoredInputs.forEach((elem) => {
         elem.disabled = true;
       });
-    });
+    };
 
-    theForm.on("ajax:send", () => {
-      theForm.find(".ignore-filters input, input.ignore-filter").each((_idx, elem) => {
+    const handleAfterSubmit = () => {
+      const ignoredInputs = form.querySelectorAll(".ignore-filters input, input.ignore-filter");
+      ignoredInputs.forEach((elem) => {
         elem.disabled = false;
       });
-    });
+    };
+
+    form.addEventListener("submit", handleBeforeSubmit);
+    form.addEventListener("ajax:before", handleBeforeSubmit);
+    form.addEventListener("ajax:send", handleAfterSubmit);
   }
 
   /**

data/app/packs/src/decidim/{i18n.test.js → refactor/moved/i18n.test.js}

@@ -1,4 +1,4 @@
-import * as i18n from "src/decidim/i18n";
+import * as i18n from "src/decidim/refactor/moved/i18n";
 
 const config = {
   messages: {

data/app/packs/src/decidim/{icon.js → refactor/moved/icon.js}

@@ -20,6 +20,8 @@ export default function icon(iconKey, attributes = {}) {
     const newKey = key.replace(/([A-Z])/g, (ucw) => `-${ucw[0].toLowerCase()}`);
     if (typeof htmlAttributes[key] === "undefined") {
       htmlAttributes[newKey] = iconAttributes[key];
+    } else if (iconAttributes[key] === null) {
+      Reflect.deleteProperty(htmlAttributes, newKey);
     } else {
       htmlAttributes[newKey] = `${htmlAttributes[newKey]} ${iconAttributes[key]}`;
     }

data/app/packs/src/decidim/refactor/support/stimulus.js

@@ -0,0 +1,39 @@
+/*
+  Stimulus Webpack Helpers 1.0.0
+  Copyright © 2021 Basecamp, LLC
+  This is just a copy of @hotwired/stimulus-webpack-helpers functionality.
+  In order to have our own structure, we need to replace the Regex from identifierForContextKey method
+ */
+
+const identifierForContextKey = function(key) {
+  const logicalName = (key.match(/^(?:\.\/)?(.+)(?:\/controller\..+?)$/) || [])[1];
+
+  if (logicalName) {
+    return logicalName.replace(/_/g, "-").replace(/\//g, "--");
+  }
+  return null;
+}
+
+const definitionForModuleAndIdentifier = function(module, identifier) {
+  const controllerConstructor = module.default;
+  if (typeof controllerConstructor === "function") {
+    return { identifier, controllerConstructor };
+  }
+  return null;
+}
+
+const definitionForModuleWithContextAndKey = function(context, key) {
+  const identifier = identifierForContextKey(key);
+  if (identifier) {
+    return definitionForModuleAndIdentifier(context(key), identifier);
+  }
+  return null;
+}
+
+const definitionsFromContext = function(context) {
+  return context.keys().
+    map((key) => definitionForModuleWithContextAndKey(context, key)).
+    filter((value) => value);
+}
+
+export { definitionForModuleAndIdentifier, definitionForModuleWithContextAndKey, definitionsFromContext, identifierForContextKey };