decidim-core 0.28.0 → 0.28.2

data/app/packs/src/decidim/editor/test/toolbar/shared/behaves_like_content.js

@@ -1,10 +1,10 @@
-import itBehavesLikeBasicToolbarStyling from "./behaves_like_basic_styling";
-import itBehavesLikeContentToolbarStyling from "./behaves_like_content_styling";
-import itBehavesLikeBasicToolbarFormatting from "./behaves_like_basic_formatting";
-import itBehavesLikeBasicToolbarList from "./behaves_like_basic_list";
-import itBehavesLikeBasicToolbarBlock from "./behaves_like_basic_block";
-import itBehavesLikeBasicToolbarLink from "./behaves_like_basic_link";
-import itBehavesLikeBasicToolbarIndent from "./behaves_like_basic_indent";
+import itBehavesLikeBasicToolbarStyling from "src/decidim/editor/test/toolbar/shared/behaves_like_basic_styling";
+import itBehavesLikeContentToolbarStyling from "src/decidim/editor/test/toolbar/shared/behaves_like_content_styling";
+import itBehavesLikeBasicToolbarFormatting from "src/decidim/editor/test/toolbar/shared/behaves_like_basic_formatting";
+import itBehavesLikeBasicToolbarList from "src/decidim/editor/test/toolbar/shared/behaves_like_basic_list";
+import itBehavesLikeBasicToolbarBlock from "src/decidim/editor/test/toolbar/shared/behaves_like_basic_block";
+import itBehavesLikeBasicToolbarLink from "src/decidim/editor/test/toolbar/shared/behaves_like_basic_link";
+import itBehavesLikeBasicToolbarIndent from "src/decidim/editor/test/toolbar/shared/behaves_like_basic_indent";
 
 export default (ctx) => {
   ctx.prosemirror = null;

data/app/packs/src/decidim/editor/test/toolbar/shared/behaves_like_content_styling.js

@@ -1,6 +1,6 @@
-import { selectContent } from "../../helpers";
+import { selectContent } from "src/decidim/editor/test/helpers";
 
-import contextHelpers from "./context";
+import contextHelpers from "src/decidim/editor/test/toolbar/shared/context";
 
 export default (ctx) => {
   const { getControl, setContent } = contextHelpers(ctx);

data/app/packs/src/decidim/editor/test/toolbar/shared/context.js

@@ -1,4 +1,4 @@
-import { updateContent } from "../../helpers";
+import { updateContent } from "src/decidim/editor/test/helpers";
 
 export default (ctx) => {
   return {

data/app/packs/src/decidim/editor/test/utilities/paste_transform.test.js

@@ -1,6 +1,6 @@
-import { transformMsDesktop, transformMsCould } from "../../utilities/paste_transform";
+import { transformMsDesktop, transformMsCould } from "src/decidim/editor/utilities/paste_transform";
 
-import "../helpers";
+import "src/decidim/editor/test/helpers";
 
 const uglifyHtml = (html) => html.replace(/[\r\n]+\s+/g, " ").replace(/>\s+</g, "><").trim();
 

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

@@ -1,5 +1,14 @@
 /* eslint-disable require-jsdoc */
 
+/**
+ * If you want to disable the warning but indicate that the link is an external
+ * link, please define the `data-external-link-warning="false"` attribute for
+ * the link,
+ * e.g. <a href="https://..." target="_blank" data-external-link="text-only" data-external-domain-link="false">...</a>
+ *
+ * @param {HTMLElement} element The element for which to replace the link href for.
+ * @returns {void} Nothing
+ */
 export default function updateExternalDomainLinks(element) {
   if (window.location.pathname === "/link") {
     return;
@@ -9,6 +18,10 @@ export default function updateExternalDomainLinks(element) {
     return;
   }
 
+  if (element.dataset.externalDomainLink === "false") {
+    return;
+  }
+
   const parts = element.href.match(/^(([a-z]+):)?\/\/([^/:]+)(:[0-9]*)?(\/.*)?$/) || null;
   if (!parts) {
     return;

data/app/packs/src/decidim/external_domain_warning.test.js

@@ -1,4 +1,4 @@
-import ExternalDomainLink from "./external_domain_warning";
+import ExternalDomainLink from "src/decidim/external_domain_warning";
 
 describe("ExternalDomainLink", () => {
   const content = `

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

@@ -1,28 +1,43 @@
 import icon from "src/decidim/icon"
 
+const DEFAULT_MESSAGES = {
+  externalLink: "External link",
+  opensInNewTab: "Opens in new tab"
+};
+let MESSAGES = DEFAULT_MESSAGES;
+
 /**
  * Appends an icon to distinguish those links pointing out of decidim.
  * It will apply to all a[target="_blank"] found in the document
  *
  * This behaviour can be omitted adding data-external-link="false" attribute to the anchor tag
  * e.g. <a href="https://..." target="_blank" data-external-link="false">...</a>
+ *
+ * If you do not want to display the external link indicator, you still need to indicate that
+ * the link opens in a new tab to the screen readers. This can be done by adding
+ * data-external-link="text-only" attribute to the anchor tag,
+ * e.g. <a href="https://..." target="_blank" data-external-link="text-only">...</a>
+ *
+ * In addition, if you want to disable the external link warning for the link, you can add the
+ * data-external-domain-link="false" attribute to the anchor tag,
+ * e.g. <a href="https://..." target="_blank" data-external-link="text-only" data-external-domain-link="false">...</a>
  */
 export default class ExternalLink {
   static configureMessages(messages) {
-    this.MESSAGES = { ...this.MESSAGES, ...messages };
+    MESSAGES = { ...DEFAULT_MESSAGES, ...messages };
   }
 
   constructor(node) {
-    this.MESSAGES = {
-      externalLink: "External link"
-    };
-
     if (node.closest(".editor-container")) {
       return;
     }
 
     if (!node.querySelector("span[data-external-link]")) {
-      this.setup(node);
+      if (node.dataset.externalLink === "text-only") {
+        this.setupTextOnly(node);
+      } else {
+        this.setup(node);
+      }
     }
   }
 
@@ -30,17 +45,41 @@ export default class ExternalLink {
     const span = document.createElement("span");
 
     span.dataset.externalLink = true;
-    span.innerHTML = `${this.generateIcon()}${this.generateScreenReaderLabel()}`
+    span.innerHTML = `${this.generateIcon()}${this.generateScreenReaderLabel(node)}`
     span.classList.add("inline-block", "mx-0.5");
 
     return node.appendChild(span);
   }
 
+  setupTextOnly(node) {
+    const dummy = document.createElement("span");
+    dummy.innerHTML = this.generateScreenReaderLabel(node);
+
+    return node.appendChild(dummy.firstChild);
+  }
+
   generateIcon() {
     return icon("external-link-line", { class: "fill-current" });
   }
 
-  generateScreenReaderLabel() {
-    return `<span class="sr-only">(${this.MESSAGES.externalLink})</span>`;
+  generateScreenReaderLabel(node) {
+    let text = MESSAGES.opensInNewTab;
+    if (this._isExternalLink(node)) {
+      text = MESSAGES.externalLink;
+    }
+
+    return `<span class="sr-only">(${text})</span>`;
+  }
+
+  _isExternalLink(node) {
+    const externalMatches = [
+      // Links to the internal link page /link?external_url=https%3A%2F%2Fdecidim.org
+      new RegExp("^/link\\?external_url="),
+      // Links starting with http/s and not to the current host
+      new RegExp(`^https?://((?!${location.host}).)+`)
+    ];
+
+    const href = node.getAttribute("href") || "";
+    return externalMatches.some(((regexp) => href.match(regexp)));
   }
 }

data/app/packs/src/decidim/external_link.test.js

@@ -1,6 +1,6 @@
 import $ from "jquery"; // eslint-disable-line id-length
 
-import ExternalLink from "./external_link";
+import ExternalLink from "src/decidim/external_link";
 
 describe("ExternalLink", () => {
   const content = `

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

@@ -1,5 +1,3 @@
-import { Keyboard } from "foundation-sites"
-
 const focusGuardClass = "focusguard";
 const focusableNodes = ["A", "IFRAME", "OBJECT", "EMBED"];
 const focusableDisableableNodes = ["BUTTON", "INPUT", "TEXTAREA", "SELECT"];
@@ -8,21 +6,13 @@ export default class FocusGuard {
   constructor(container) {
     this.container = container;
     this.guardedElement = null;
+    this.triggerElement = null;
   }
 
-  trap(element) {
-    if (this.guardedElement) {
-      Keyboard.releaseFocus($(this.guardedElement));
-    }
-
+  trap(element, trigger) {
     this.enable();
     this.guardedElement = element;
-
-    // Call the release focus first so that we do not accidentally add the
-    // keyboard trap twice. Note that the Foundation methods expect the elements
-    // to be jQuery elements which is why we pass them through jQuery.
-    Keyboard.releaseFocus($(element));
-    Keyboard.trapFocus($(element));
+    this.triggerElement = trigger;
   }
 
   enable() {
@@ -58,12 +48,11 @@ export default class FocusGuard {
     const guards = this.container.querySelectorAll(`:scope > .${focusGuardClass}`);
     guards.forEach((guard) => guard.remove());
 
-    if (this.guardedElement) {
-      // Note that the Foundation methods expect the elements to be jQuery
-      // elements which is why we pass them through jQuery.
-      Keyboard.releaseFocus($(this.guardedElement));
-      this.guardedElement.focus();
-      this.guardedElement = null;
+    this.guardedElement = null;
+
+    if (this.triggerElement) {
+      this.triggerElement.focus();
+      this.triggerElement = null;
     }
   }
 
@@ -89,7 +78,6 @@ export default class FocusGuard {
 
     let target = null;
     if (guard.dataset.position === "start") {
-
       // Focus at the start guard, so focus the first focusable element after that
       for (let ind = 0; ind < visibleNodes.length; ind += 1) {
         if (!this.isFocusGuard(visibleNodes[ind]) && this.isFocusable(visibleNodes[ind])) {

data/app/packs/src/decidim/form_filter.component_for_testing.js

@@ -1,6 +1,6 @@
 /* eslint no-undef: 0 */
 
-import FormFilterComponent from "./form_filter"
+import FormFilterComponent from "src/decidim/form_filter"
 
 // This module.exports is necessary for the tests to load
 // does not conflict with import/export

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

@@ -7,9 +7,9 @@
  * @augments Component
  */
 
-import delayed from "./delayed"
-import CheckBoxesTree from "./check_boxes_tree"
-import { registerCallback, unregisterCallback, pushState, replaceState, state } from "./history"
+import delayed from "src/decidim/delayed"
+import CheckBoxesTree from "src/decidim/check_boxes_tree"
+import { registerCallback, unregisterCallback, pushState, replaceState, state } from "src/decidim/history"
 
 export default class FormFilterComponent {
   constructor($form) {

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

@@ -1,5 +1,5 @@
 /* eslint-disable require-jsdoc */
-import getCoordinateInputName from "./coordinate_input"
+import getCoordinateInputName from "src/decidim/geocoding/coordinate_input"
 
 /**
  * You can use this method to "attach" front-end geocoding to any forms in the

data/app/packs/src/decidim/i18n.test.js

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

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

@@ -9,13 +9,16 @@ import "core-js/stable";
 import "regenerator-runtime/runtime";
 import "jquery"
 
+// REDESIGN_PENDING: deprecated
+import "foundation-sites";
+
 // external deps that require initialization
 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 "./vendor/modernizr"
+import "src/decidim/vendor/modernizr"
 
 /**
  * Local dependencies
@@ -47,6 +50,7 @@ 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"
 
 // local deps that require initialization
@@ -87,6 +91,33 @@ window.Decidim = window.Decidim || {
 
 window.morphdom = morphdom
 
+// REDESIGN_PENDING: deprecated
+window.initFoundation = (element) => {
+  $(element).foundation();
+
+  // Fix compatibility issue with the `a11y-accordion-component` package that
+  // uses the `data-open` attribute to indicate the open state for the accordion
+  // trigger.
+  //
+  // In Foundation, these listeners are initiated on the document node always,
+  // regardless of the element for which foundation is initiated. Therefore, we
+  // need the document node here instead of the `element` passed to this
+  // function.
+  const $document = $(document);
+
+  $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']");
+    if (accordion) {
+      return;
+    }
+
+    // Otherwise call the original implementation
+    Reflect.apply(window.Foundation.Triggers.Listeners.Basic.openListener, ev.currentTarget, [ev, ...restArgs]);
+  });
+};
+
 Rails.start()
 
 /**
@@ -101,7 +132,7 @@ const initializer = (element = document) => {
   window.focusGuard = window.focusGuard || new FocusGuard(document.body);
 
   // REDESIGN_PENDING: deprecated
-  $(element).foundation();
+  window.initFoundation(element);
 
   svg4everybody();
 

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

@@ -18,7 +18,7 @@ $(() => {
 
   /* eslint no-use-before-define: ["error", { "variables": false }]*/
   let remoteSearch = function(text, cb) {
-    $.post("/api", {query: `{hashtags(name:"${text}") {name}}`}).
+    $.post(window.Decidim.config.get("api_path"), {query: `{hashtags(name:"${text}") {name}}`}).
 
       then((response) => {
         let data = response.data.hashtags || {};

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

@@ -34,7 +34,7 @@ const mentionsInitializer = () => {
   /* 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("/api", {query: query}).
+    $.post(window.Decidim.config.get("api_path"), {query: query}).
       then((response) => {
         let data = response.data.users || {};
         cb(data)

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

@@ -42,7 +42,7 @@ $(() => {
   const autoComplete = new AutoComplete($searchInput[0], {
     dataMatchKeys: ["name", "nickname"],
     dataSource: (query, callback) => {
-      $.post("/api", {
+      $.post(window.Decidim.config.get("api_path"), {
         "query": `
           {
             users(filter:{wildcard:"${query}",excludeIds:[]})

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

@@ -1,3 +1,3 @@
-import "./loader"
-import "./a2hs"
-import "./push-permissions"
+import "src/decidim/sw/loader"
+import "src/decidim/sw/a2hs"
+import "src/decidim/sw/push-permissions"

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

@@ -1,4 +1,4 @@
-import PasswordToggler from "./password_toggler";
+import PasswordToggler from "src/decidim/password_toggler";
 
 $(() => {
   const $userRegistrationForm = $("#register-form");

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

@@ -19,7 +19,7 @@ $(() => {
     metricsParams.spaceId = $("#metrics #metrics-space_id").val() || null;
   }
 
-  const fetch = (metrics) => $.post("/api", query(metrics));
+  const fetch = (metrics) => $.post(window.Decidim.config.get("api_path"), query(metrics));
 
   const downloadMetricData = (event) => {
     event.preventDefault();

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

@@ -4,10 +4,10 @@
 
 [data-component="accordion"]
   [id*="comment"][class="comment-reply"][aria-hidden="true"] {
-  display: block;
+  display: none;
 }
 
 [data-component="accordion"]
   [id*="comment"][class="comment-reply"][aria-hidden="false"] {
-  display: none;
+  display: block;
 }

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

@@ -127,14 +127,14 @@
       @apply text-black text-2xl font-bold;
     }
 
-    &-time {
+    &-year {
       @apply text-black text-xs;
     }
 
     &-month,
     &-day,
-    &-time {
-      @apply inline-flex items-center justify-evenly empty:[&>span]:hidden;
+    &-year {
+      @apply inline-flex items-center justify-evenly empty:[&>div]:hidden;
     }
   }
 
@@ -143,7 +143,7 @@
   &__list-metadata {
     @apply mt-auto inline-flex flex-wrap gap-x-4 md:gap-0;
 
-    & > span {
+    & > div {
       @apply inline-flex items-center gap-1 px-0 md:px-6 border-gray-3 border-0 md:border-r first:pl-0 last:pr-0 last:border-r-0 text-sm text-gray-2;
 
       & > svg {

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

@@ -1,5 +1,5 @@
 [id*="dropdown-menu"] {
-  @apply flex flex-col py-3.5 md:py-0 mx-3.5 md:mx-0 border-t md:border-t-0 border-gray-3 cursor-pointer;
+  @apply flex flex-col py-0 mx-3.5 md:mx-0 border-t-0 border-gray-3 cursor-pointer;
 
   &[aria-hidden="true"] {
     @apply hidden md:flex;
@@ -34,7 +34,7 @@
 }
 
 .dropdown {
-  @apply absolute bg-white border-2 border-gray-3 rounded min-w-max p-4 drop-shadow-md text-left z-10;
+  @apply absolute border-2 border-gray-3 rounded min-w-max p-4 drop-shadow-md text-left z-10;
 
   & > * {
     @apply relative z-10 p-3.5 first:pt-1.5 last:pb-1.5;

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

@@ -6,7 +6,7 @@
   }
 
   [data-content] {
-    @apply min-h-[60vh] relative flex flex-col;
+    @apply relative flex flex-col;
   }
 }
 
@@ -31,14 +31,14 @@
 }
 
 .layout-2col {
-  @apply md:grid grid-cols-12 container grow min-h-[60vh];
+  @apply md:grid grid-cols-12 container grow auto-rows-max;
 
   &__aside {
     @apply col-span-4 lg:col-span-3 md:pr-16 py-6 md:py-12 gap-6 md:gap-12 flex flex-col justify-between items-start md:justify-start before:content-[''] before:absolute before:top-0 before:left-0 before:h-full before:w-1/2 before:-z-10 md:before:bg-background;
   }
 
   &__main {
-    @apply col-span-8 lg:col-span-9 bg-white md:pl-16 py-6 md:py-12;
+    @apply col-span-8 lg:col-span-9 bg-white md:pl-16 py-6 md:py-12 min-h-[60vh];
   }
 
   &__reverse &__aside {
@@ -51,18 +51,18 @@
 }
 
 .layout-item {
-  @apply container grid grid-cols-1 md:grid-cols-12 py-4 md:py-24 gap-12 md:gap-x-0;
+  @apply container grid grid-cols-1 lg:grid-cols-12 py-4 lg:py-24 gap-12 lg:gap-x-0;
 
   &__main {
-    @apply lg:col-start-2 md:col-span-8 lg:col-span-7 relative;
+    @apply xl:col-start-2 lg:col-span-8 xl:col-span-7 relative;
   }
 
   &__aside {
-    @apply md:col-start-10 lg:col-start-10 md:col-span-3 lg:col-span-2;
+    @apply lg:col-start-10 xl:col-start-10 lg:col-span-3 xl:col-span-2;
   }
 
   &__back {
-    @apply mb-4 md:mb-0 md:absolute md:-left-[1em] md:-top-8 md:-translate-y-full;
+    @apply mb-4 lg:mb-0 lg:absolute lg:-left-[1em] lg:-top-8 lg:-translate-y-full;
   }
 
   &__arrow {

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

@@ -28,9 +28,7 @@
           @apply w-24 flex-none flex justify-center;
         }
 
-        img:not([src^="data:image"]):not(
-            [src^="data:application/octet-stream"]
-          ) {
+        img[src="data:,"] {
           @apply hidden;
         }
 

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

@@ -78,6 +78,3 @@
 // This imports all the Decidim module stylesheet imports registered at
 // `config/assets.rb` of the module for the "app" group.
 @import "!decidim-style-imports[app]";
-
-// Application specific styles: https://docs.decidim.org/en/customize/styles/#_webpacker
-@import "stylesheets/decidim/decidim_application";

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

@@ -2,4 +2,8 @@
 // Notice that this file is included at the very end of the stylesheets packs to have
 // more priority
 //
+// Please note this file is only targeting the end user interface and not the admin interface.
+// To change the Tailwind CSS configuration, or to override the admin, system or design interface
+// styles follow the instructions in https://docs.decidim.org/en/customize/styles/
+//
 // By default this is empty.