decidim-core 0.29.3 → 0.30.0.rc1

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"));
   });

data/app/packs/src/decidim/utilities/dom.js

@@ -0,0 +1,148 @@
+import confirmAction from "src/decidim/confirm"
+import { getMessages } from "src/decidim/i18n"
+
+const { Rails } = window;
+
+const createUnloadPreventer = () => {
+  const preventUnloadConditions = [];
+
+  const confirmMessage = getMessages("confirmUnload") || "Are you sure you want to leave this page?";
+
+  const canUnload = (event) => !preventUnloadConditions.some((condition) => condition(event));
+
+  // TLDR:
+  // The beforeunload event does not work during tests due to the deprecation of
+  // the unload event and ChromeDriver automatically accepting these dialogs.
+  // ---
+  //
+  // Even when there are custom listeners on links and forms, the beforeunload
+  // event is to ensure that the user does not accidentally reload the page or
+  // close the browser or the tab. Note that this does not work during the tests
+  // with ChromeDriver due to the deprecation of the unload event and
+  // ChromeDriver automatically accepting these dialogs. For the time being,
+  // this should work when a real user interacts with the browser along with the
+  // "Permissions-Policy" header set by the backend. For more information about
+  // the header, see Decidim::Headers::BrowserFeaturePermissions).
+  const unloadListener = (event) => {
+    if (canUnload(event)) {
+      return;
+    }
+
+    // According to:
+    // https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+    //
+    // > [...] best practice is to trigger the dialog by invoking
+    // > preventDefault() on the event object, while also setting returnValue to
+    // > support legacy cases.
+    event.preventDefault();
+    event.returnValue = true;
+  };
+
+  // The beforeunload event listener has to be registered AFTER a user
+  // interaction which is why it is wrapped around the next click event that
+  // happens after the first unload listener was registered. Otherwise it might
+  // not work due to the deprecation of the unload APIs in Chromium based
+  // browsers and possibly in the web standards in the future.
+  //
+  // According to:
+  // https://developer.chrome.com/docs/web-platform/page-lifecycle-api#the_beforeunload_event
+  //
+  // > Never add a beforeunload listener unconditionally or use it as an
+  // > end-of-session signal. Only add it when a user has unsaved work, and
+  // > remove it as soon as that work has been saved.
+  const registerBeforeUnload = () => {
+    window.removeEventListener("click", registerBeforeUnload);
+    window.addEventListener("beforeunload", unloadListener);
+  };
+
+  const disableBeforeUnload = () => {
+    window.removeEventListener("click", registerBeforeUnload);
+    window.removeEventListener("beforeunload", unloadListener);
+  };
+
+  const linkClickListener = (ev) => {
+    const link = ev.target?.closest("a");
+    if (!link) {
+      return;
+    }
+
+    if (canUnload(ev)) {
+      disableBeforeUnload();
+      document.removeEventListener("click", linkClickListener);
+      return;
+    }
+
+    window.exitUrl = link.href;
+
+    ev.preventDefault();
+    ev.stopPropagation();
+
+    confirmAction(confirmMessage, link).then((answer) => {
+      if (!answer) {
+        return;
+      }
+
+      disableBeforeUnload();
+      document.removeEventListener("click", linkClickListener);
+      link.click();
+    });
+  };
+
+  const formSubmitListener = (ev) => {
+    const source = ev.target?.closest("form");
+    if (!source) {
+      return;
+    }
+
+    if (canUnload(ev)) {
+      disableBeforeUnload();
+      document.removeEventListener("submit", formSubmitListener);
+      return;
+    }
+
+    const button = source.closest(Rails.formSubmitSelector);
+    if (!button) {
+      return;
+    }
+
+    ev.preventDefault();
+    ev.stopImmediatePropagation();
+    ev.stopPropagation();
+
+    confirmAction(confirmMessage, button).then((answer) => {
+      if (!answer) {
+        return;
+      }
+
+      disableBeforeUnload();
+      document.removeEventListener("submit", formSubmitListener);
+      source.submit();
+    });
+  };
+
+  const registerPreventUnloadListeners = () => {
+    window.addEventListener("click", registerBeforeUnload);
+    document.addEventListener("click", linkClickListener);
+    document.addEventListener("submit", formSubmitListener);
+  };
+
+  return {
+    addPreventCondition: (condition) => {
+      if (typeof condition !== "function") {
+        return;
+      }
+
+      if (preventUnloadConditions.length < 1) {
+        // The unload listeners are global, so only the first call to this
+        // function should result to registering these listeners.
+        registerPreventUnloadListeners();
+      }
+
+      preventUnloadConditions.push(condition);
+    }
+  };
+};
+
+const unloadPreventer = createUnloadPreventer();
+
+export const preventUnload = (condition) => unloadPreventer.addPreventCondition(condition);

data/app/packs/src/decidim/vendor/leaflet-tilelayer-here.js

@@ -0,0 +1,212 @@
+/* eslint-disable */
+
+// 🍂class TileLayer.HERE
+// Tile layer for HERE maps tiles.
+L.TileLayer.HERE = L.TileLayer.extend({
+
+  options: {
+    subdomains: '1234',
+    minZoom: 2,
+    maxZoom: 18,
+
+    // 🍂option scheme: String = 'normal.day'
+    // The "map scheme", as documented in the HERE API.
+    scheme: 'normal.day',
+
+    // 🍂option resource: String = 'maptile'
+    // The "map resource", as documented in the HERE API.
+    resource: 'maptile',
+
+    // 🍂option mapId: String = 'newest'
+    // Version of the map tiles to be used, or a hash of an unique map
+    mapId: 'newest',
+
+    // 🍂option format: String = 'png8'
+    // Image format to be used (`png8`, `png`, or `jpg`)
+    format: 'png8',
+
+    // 🍂option appId: String = ''
+    // Required option. The `app_id` provided as part of the HERE credentials
+    appId: '',
+
+    // 🍂option appCode: String = ''
+    // Required option. The `app_code` provided as part of the HERE credentials
+    appCode: '',
+
+    // 🍂option useCIT: boolean = false
+    // Whether to use the CIT when loading the here-maptiles
+    useCIT: false,
+
+    // 🍂option useHTTPS: boolean = true
+    // Whether to use HTTPS when loading the here-maptiles
+    useHTTPS: true,
+
+    // 🍂option language: String = ''
+    // The language of the descriptions on the maps that are loaded
+    language: '',
+
+    // 🍂option language: String = ''
+    // The second language of the descriptions on the maps that are loaded
+    language2: '',
+  },
+
+
+  initialize: function initialize(options) {
+    options = L.setOptions(this, options);
+
+    // Decide if this scheme uses the aerial servers or the basemap servers
+    var schemeStart = options.scheme.split('.')[0];
+    options.tileResolution = 256;
+
+    // {Base URL}{Path}/{resource (tile type)}/{map id}/{scheme}/{zoom}/{column}/{row}/{size}/{format}
+    // ?apiKey={YOUR_API_KEY}
+    // &{param}={value}
+
+    var params = [
+      'apiKey=' + encodeURIComponent(options.apiKey)
+    ];
+    // Fallback to old app_id,app_code if no apiKey passed
+    if(!options.apiKey) {
+      params = [
+        'app_id=' + encodeURIComponent(options.appId),
+        'app_code=' + encodeURIComponent(options.appCode),
+      ];
+    }
+    if(options.language) {
+      params.push('lg=' + encodeURIComponent(options.language));
+    }
+    if(options.language2) {
+      params.push('lg2=' + encodeURIComponent(options.language2));
+    }
+    var urlQuery = '?' + params.join('&');
+
+    var path = '/maptile/2.1/{resource}/{mapId}/{scheme}/{z}/{x}/{y}/{tileResolution}/{format}' + urlQuery;
+    var attributionPath = '/maptile/2.1/copyright/{mapId}?apiKey={apiKey}';
+
+    var baseUrl = 'maps.ls.hereapi.com';
+
+    // Old style with apiId/apiCode for compatibility
+    if(!options.apiKey) {
+      // make sure the CIT-url can be used
+      baseUrl = 'maps' + (options.useCIT ? '.cit' : '') + '.api.here.com';
+      attributionPath = '/maptile/2.1/copyright/{mapId}?app_id={appId}&app_code={appCode}';
+    }
+
+    var tileServer = 'base.' + baseUrl;
+    if (schemeStart == 'satellite' || schemeStart == 'terrain' || schemeStart == 'hybrid') {
+      tileServer = 'aerial.' + baseUrl;
+    }
+    if (options.scheme.indexOf('.traffic.') !== -1) {
+      tileServer = 'traffic' + baseUrl;
+    }
+
+    var protocol = 'http' + (options.useHTTPS ? 's' : '');
+    var tileUrl = protocol + '://{s}.' + tileServer + path;
+
+    this._attributionUrl = L.Util.template(protocol + '://1.' + tileServer + attributionPath, this.options);
+
+    L.TileLayer.prototype.initialize.call(this, tileUrl, options);
+
+    this._attributionText = '';
+
+  },
+
+  onAdd: function onAdd(map) {
+    L.TileLayer.prototype.onAdd.call(this, map);
+
+    if (!this._attributionBBoxes) {
+      this._fetchAttributionBBoxes();
+    }
+  },
+
+  onRemove: function onRemove(map) {
+    //
+    // Remove the attribution text, and clear the cached text so it will be recalculated
+    // if/when we are shown again.
+    //
+    this._map.attributionControl.removeAttribution(this._attributionText);
+    this._attributionText = '';
+
+    this._map.off('moveend zoomend resetview', this._findCopyrightBBox, this);
+
+    //
+    // Call the prototype last, once we have tidied up our own changes
+    //
+    L.TileLayer.prototype.onRemove.call(this, map);
+  },
+
+  _fetchAttributionBBoxes: function _onMapMove() {
+    var xmlhttp = new XMLHttpRequest();
+    xmlhttp.onreadystatechange = L.bind(function(){
+      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+        this._parseAttributionBBoxes(JSON.parse(xmlhttp.responseText));
+      }
+    }, this);
+    xmlhttp.open("GET", this._attributionUrl, true);
+    xmlhttp.send();
+  },
+
+  _parseAttributionBBoxes: function _parseAttributionBBoxes(json) {
+    if (!this._map) { return; }
+    var providers = json[this.options.scheme.split('.')[0]] || json.normal;
+    for (var i=0; i<providers.length; i++) {
+      if (providers[i].boxes) {
+        for (var j=0; j<providers[i].boxes.length; j++) {
+          var box = providers[i].boxes[j];
+          providers[i].boxes[j] = L.latLngBounds( [ [box[0], box[1]], [box[2], box[3]] ]);
+        }
+      }
+    }
+
+    this._map.on('moveend zoomend resetview', this._findCopyrightBBox, this);
+
+    this._attributionProviders = providers;
+
+    this._findCopyrightBBox();
+  },
+
+  _findCopyrightBBox: function _findCopyrightBBox() {
+    if (!this._map) { return; }
+    var providers = this._attributionProviders;
+    var visibleProviders = [];
+    var zoom = this._map.getZoom();
+    var visibleBounds = this._map.getBounds();
+
+    for (var i=0; i<providers.length; i++) {
+      if (providers[i].minLevel <= zoom && providers[i].maxLevel >= zoom) {
+
+        if (!providers[i].boxes) {
+          // No boxes = attribution always visible
+          visibleProviders.push(providers[i]);
+        } else {
+          for (var j=0; j<providers[i].boxes.length; j++) {
+            var box = providers[i].boxes[j];
+            if (visibleBounds.intersects(box)) {
+              visibleProviders.push(providers[i]);
+              break;
+            }
+          }
+        }
+      }
+    }
+
+    var attributions = ['<a href="https://legal.here.com/en-gb/terms" target="_blank" rel="noopener noreferrer">HERE maps</a>'];
+    for (var i=0; i<visibleProviders.length; i++) {
+      var provider = visibleProviders[i];
+      attributions.push('<abbr title="' + provider.alt + '">' + provider.label + '</abbr>');
+    }
+
+    var attributionText = '© ' + attributions.join(', ') + '. ';
+
+    if (attributionText !== this._attributionText) {
+      this._map.attributionControl.removeAttribution(this._attributionText);
+      this._map.attributionControl.addAttribution(this._attributionText = attributionText);
+    }
+  },
+
+});
+
+
+L.tileLayer.here = function(opts){
+  return new L.TileLayer.HERE(opts);
+}

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

@@ -11,3 +11,33 @@
   [id*="comment"][class="comment-reply"][aria-hidden="false"] {
   display: block;
 }
+
+.card-accordion {
+  @apply border-b border-gray-3 mt-6;
+
+  &-title {
+    @apply text-primary font-semibold text-xl inline-block;
+  }
+
+  &-divider-button {
+    @apply flex items-center justify-between items-end w-full;
+
+    svg {
+      @apply inline-block w-6 h-6 fill-primary;
+    }
+
+    &[aria-expanded="true"] {
+      svg {
+        @apply rotate-180 transition-transform;
+      }
+    }
+  }
+
+  &-section {
+    @apply pb-8;
+
+    ul {
+      @apply mb-0;
+    }
+  }
+}

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

@@ -98,3 +98,22 @@
     @apply rounded-full bg-secondary text-white inline-grid place-items-center h-[18px] w-[18px] ml-2 text-xs;
   }
 }
+
+.layout-main__buttons {
+  .button {
+    &__sm {
+      @apply text-2xl [&:not([class*="button\\_\\_text"])]:px-1.5 [&:not([class*="button\\_\\_text"])]:py-1.5 gap-1.5
+      lg:text-sm lg:[&:not([class*="button\\_\\_text"])]:px-4;
+
+      span {
+        @apply hidden lg:flex;
+      }
+    }
+
+    &__transparent {
+      &-secondary {
+        @apply p-0 border-0 lg:border lg:border-secondary;
+      }
+    }
+  }
+}

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

@@ -27,10 +27,6 @@
         @apply block;
       }
     }
-
-    > h3:not([class~="not-prose"]) {
-      @apply mb-[-0.4rem] pt-4 pb-2;
-    }
   }
 
   &__span {

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

@@ -19,7 +19,7 @@
   }
 
   > svg {
-    @apply w-8 h-8 flex-none text-secondary fill-current;
+    @apply w-6 h-6 flex-none text-secondary fill-current;
   }
 
   &[aria-expanded="false"] > svg:last-of-type,

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

@@ -2,44 +2,50 @@
   @apply space-y-3 opacity-0 -translate-y-full invisible transition-all absolute;
 
   &__text {
-    @apply text-sm text-gray-2;
+    @apply text-md text-gray-2 ml-4 leading-normal;
+
+    a {
+      @apply text-md;
+    }
   }
 
   &__grid {
     @apply flex flex-wrap gap-y-3;
   }
 
-  &__avatar,
-  &__counter {
+  &__avatar {
     @apply rounded-full overflow-hidden border border-white inline-grid w-6 h-6;
   }
 
-  &__counter {
-    @apply bg-background place-items-center text-secondary text-xs font-semibold transition;
-  }
-
   &__button {
     @apply block ml-auto text-right text-xs text-secondary cursor-pointer;
   }
 
-  &__trigger {
-    @apply flex justify-start -space-x-4;
-  }
-
-  &__trigger:hover &__counter,
-  &__trigger[aria-expanded="true"] &__counter {
-    @apply text-white bg-secondary border-secondary;
-  }
-
-  &__trigger[data-target*="dropdown"] {
-    @apply p-0 w-auto;
+  &__container {
+    @apply w-full flex justify-start -space-x-4 p-0 gap-2;
 
     > span {
       @apply inline-grid;
     }
   }
 
-  &[id*="dropdown-menu"][aria-hidden="false"] {
-    @apply opacity-100 visible translate-y-0 transition-all relative;
+  &__modal {
+    .list-item__author {
+      @apply flex w-full justify-between;
+
+      .author__avatar-container {
+        @apply w-8 h-8;
+      }
+
+      .button {
+        @apply [&>svg]:hidden;
+      }
+    }
+
+    .list-item__author + .list-item__author {
+      --vertical-spacing: 1rem;
+
+      @apply mt-[var(--vertical-spacing)];
+    }
   }
 }

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

@@ -79,10 +79,10 @@
 }
 
 .form__wrapper {
-  @apply flex flex-col py-10 gap-10 last:pb-0;
+  @apply flex flex-col pt-10 pb-4 gap-10 last:pb-0;
 
   &-block {
-    @apply py-10 last:pb-0 border-t-2 border-background flex flex-col gap-4 only:[&_*]:ml-auto [&_p]:text-gray-2;
+    @apply py-10 last:pb-0 border-background flex flex-col gap-4 [&_p]:text-gray-2;
   }
 
   &-checkbox-label {

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

@@ -167,7 +167,7 @@ header {
       }
 
       &__item {
-        @apply flex relative;
+        @apply relative;
       }
 
       &__search {
@@ -434,12 +434,8 @@ header {
         @apply h4 md:h3;
       }
 
-      nav {
-        @apply w-full md:w-1/4;
-      }
-
       &__menu {
-        @apply w-full bg-primary px-4 md:px-8 pt-0 pb-3 md:py-3 divide-y divide-gray-3 text-white;
+        @apply w-full md:w-1/4 bg-primary px-4 md:px-8 pt-0 pb-3 md:py-3 divide-y divide-gray-3 text-white;
 
         > * {
           @apply py-3 md:py-3.5;