decidim-core 0.29.4 → 0.30.0.rc1

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/_cards.scss

@@ -159,7 +159,7 @@
   /* shared styles */
   &__highlight-metadata,
   &__grid-metadata {
-    @apply mt-auto flex items-center justify-between flex-wrap w-full text-sm text-gray-2 [&>*]:flex [&>*]:items-center [&>*]:gap-1 first:[&>*]:w-4/5;
+    @apply mt-auto flex items-center justify-between flex-wrap text-sm text-gray-2 [&>*]:flex [&>*]:items-center [&>*]:gap-1 first:[&>*]:flex-none;
 
     svg {
       @apply flex-none text-gray fill-current;

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 {
@@ -334,6 +334,10 @@ header {
       &__dropdown-trigger {
         @apply flex items-center justify-between text-white;
 
+        span {
+          @apply flex flex-wrap md:flex-nowrap gap-x-2.5 overflow-hidden text-white;
+        }
+
         svg {
           @apply w-6 h-6 fill-current;
         }
@@ -369,63 +373,15 @@ header {
       @apply absolute top-full left-0 bg-white rounded w-full bg-gray-5;
     }
 
-    &__dropdown-menu {
-      @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;
-      }
-
-      a {
-        @apply flex items-center justify-start gap-1 font-semibold text-lg text-white;
-
-        span {
-          @apply min-w-0 truncate;
-        }
-
-        svg {
-          @apply flex-none fill-current;
-        }
-      }
-    }
-
     &__main-dropdown {
-      @apply bg-white flex flex-row rounded-b shadow-lg text-black w-full lg:w-[1280px] h-screen md:h-auto;
-
-      &__left {
-        @apply flex flex-col justify-between p-4 md:p-8 space-y-5 hidden md:block md:w-3/4;
-
-        &-top {
-          @apply border-b-4 border-gray-3 pb-3;
-        }
-      }
+      @apply bg-white divide-y divide-gray-3 rounded-b shadow-lg text-black w-full lg:w-[1280px] h-screen md:h-auto;
 
+      &__bottom,
       &__top {
-        @apply w-full px-4;
-
-        &-menu {
-          @apply w-full md:w-1/2 mt-0 grid md:grid-cols-2 gap-x-6 text-secondary;
-
-          > * {
-            @apply py-3 md:py-3.5 border-b last:border-0 border-gray-3;
-
-            /* since the grid has 2 columns, remove the border for these last 2 columns */
-            &:nth-last-child(-n + 2) {
-              @apply md:border-0;
-            }
-          }
+        @apply flex flex-col md:flex-row justify-between p-4 md:p-8 gap-x-8;
 
-          a {
-            @apply flex items-center justify-start gap-1 font-semibold text-lg text-secondary;
-
-            span {
-              @apply min-w-0 truncate;
-            }
-
-            svg {
-              @apply flex-none fill-current;
-            }
-          }
+        &-right {
+          @apply hidden md:block md:w-1/2;
         }
       }
 
@@ -440,6 +396,31 @@ header {
       &__subtitle {
         @apply hidden text-md md:flex md:text-lg text-gray-2 mt-5;
       }
+
+      &__menu {
+        @apply w-full md:w-1/2 mt-0 grid md:grid-cols-2 gap-x-6 text-secondary;
+
+        > * {
+          @apply py-3 md:py-3.5 border-b last:border-0 border-gray-3;
+
+          /* since the grid has 2 columns, remove the border for these last 2 columns */
+          &:nth-last-child(-n + 2) {
+            @apply md:border-0;
+          }
+        }
+
+        a {
+          @apply flex items-center justify-start gap-1 font-semibold text-lg text-secondary;
+
+          span {
+            @apply min-w-0 truncate;
+          }
+
+          svg {
+            @apply flex-none fill-current;
+          }
+        }
+      }
     }
 
     &__secondary-dropdown {
@@ -453,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;
@@ -478,7 +455,7 @@ header {
       }
 
       &__metadata {
-        @apply flex items-center text-sm space-x-6 pb-6;
+        @apply flex items-center text-sm space-x-6 py-8;
 
         > span {
           @apply flex items-center space-x-2;