decidim-core 0.28.6 → 0.29.0.rc1

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

@@ -19,7 +19,7 @@ const getAbsolutePosition = (node, relativeParent) => {
   let [pageX, pageY] = [window.pageXOffset, window.pageYOffset]
   if (relativeParent) {
     // in order to calculate the relative parent position, we reuse this function,
-    // using the parent regarding the window and substracting the topLeft corner (its relative position [0,0])
+    // using the parent regarding the window and subtracting the topLeft corner (its relative position [0,0])
     const { topLeft: [parentX, parentY] } = getAbsolutePosition(relativeParent);
     [pageX, pageY] = [pageX - parentX, pageY - parentY]
   }
@@ -63,32 +63,9 @@ export default function(node) {
   // append to dom hidden, to apply css transitions
   tooltip.setAttribute("aria-hidden", true)
 
-  // used to detect if the user is on a mobile device by checking the user agent
-  const useMobile = (/Mobi|Android/i).test(navigator.userAgent);
-
-  // used not to collapse tooltip
-  let removeTooltip = () => {
-    tooltip.setAttribute("aria-hidden", "true");
-  }
-
-  // used to allow clicks outside the tooltip to take place on the page or device
-  const OutsideClick = (event) => {
-    if (!tooltip.contains(event.target) && event.target !== node) {
-      removeTooltip();
-    }
-  }
-
-  // function called again to allow clicks outside the tooltip to collapse the tooltip
-  removeTooltip = () => {
-    tooltip.setAttribute("aria-hidden", "true");
-    document.removeEventListener("click", OutsideClick)
-  }
-
-  const toggleTooltip = (event) => {
-    event.preventDefault();
-    // if the tooltip is visible in the DOM, hide it otherwise display
+  const append = () => {
+    // do nothing if the tooltip is already present at the DOM
     if (tooltip.getAttribute("aria-hidden") === "false") {
-      tooltip.setAttribute("aria-hidden", "true");
       return
     }
 
@@ -129,24 +106,27 @@ export default function(node) {
     tooltip.style.left = `${positionX}px`
 
     tooltip.setAttribute("aria-hidden", false)
-
-    // sleep time before hiding the element from the DOM
-    setTimeout(() => document.addEventListener("click", OutsideClick))
   }
 
-  if (useMobile) {
-    // mobile use to click and toggle the tooltip
-    node.addEventListener("click", toggleTooltip);
-    window.addEventListener("keydown", (event) => event.key === "Escape" && removeTooltip())
-  } else {
-    // desktop use for hover and blur over tooltip
-    node.addEventListener("mouseenter", toggleTooltip)
-    node.addEventListener("mouseleave", removeTooltip)
-    node.addEventListener("focus", toggleTooltip)
-    node.addEventListener("blur", removeTooltip)
-
-    // tooltip hover listeners to prevent hiding when hovered
-    tooltip.addEventListener("mouseenter", () => tooltip.setAttribute("aria-hidden", false))
-    tooltip.addEventListener("mouseleave", removeTooltip)
+  // in order to revoke the remove event when the mouse is over the trigger/tooltip
+  let cancelRemove = false
+
+  const remove = () => {
+    cancelRemove = false
+    // give some sleep time before hiding the element from the DOM
+    setTimeout(() => !cancelRemove && tooltip.setAttribute("aria-hidden", true), 500);
   }
+
+  // keyboard listener is at root-level
+  window.addEventListener("keydown", (event) => event.key === "Escape" && remove())
+
+  node.addEventListener("mouseenter", append)
+  node.addEventListener("mouseleave", remove)
+  node.addEventListener("focus", append)
+  node.addEventListener("blur", remove)
+  tooltip.addEventListener("mouseenter", () => tooltip.setAttribute("aria-hidden", false))
+  tooltip.addEventListener("mouseleave", remove)
+
+  node.addEventListener("mouseover", () => (cancelRemove = true))
+  tooltip.addEventListener("mouseover", () => (cancelRemove = true))
 }

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

@@ -67,7 +67,7 @@
   }
 
   &.is-hover,
-  &:not([disabled]):not([class*="button__text"]):not(label):hover {
+  &:not([disabled]):not([class*="button__text"]):hover {
     @apply text-white;
 
     background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),

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

@@ -0,0 +1,193 @@
+.sc-wc-datepicker-h {
+  @apply absolute w-80 h-96 left-0;
+}
+
+.wc-datepicker {
+  @apply absolute w-80 h-96 z-20 text-sm;
+
+  &__header {
+    @apply px-0 py-0 pb-0 gap-0 h-14;
+  }
+
+  &__month-select,
+  &__year-select {
+    @apply h-10 mb-4 leading-normal;
+  }
+
+  &__month-select {
+    @apply pr-3;
+  }
+
+  &__year-select {
+    @apply max-w-fit;
+  }
+
+  &__previous-month-button,
+  &__next-month-button,
+  &__previous-year-button,
+  &__next-year-button {
+    @apply h-10 text-secondary bg-transparent;
+  }
+
+  &__date:focus > * {
+    @apply outline-1 outline-gray;
+  }
+
+  &__date--selected > * {
+    @apply bg-secondary border-solid border-2 border-gray;
+  }
+
+  &__date--selected:hover > * {
+    @apply bg-secondary;
+  }
+}
+
+.datepicker {
+  &__container {
+    @apply absolute w-80 h-96;
+  }
+
+  &__datepicker-row {
+    @apply flex gap-4;
+  }
+
+  &__time-row {
+    @apply flex top-6 absolute w-full;
+  }
+
+  &__date-column,
+  &__time-column {
+    @apply flex-1 w-1/2 relative;
+
+    > input {
+      @apply h-9;
+    }
+  }
+
+  &__hour-column,
+  &__minute-column {
+    @apply flex-1 h-20 relative my-2 mx-8 rounded border border-solid border-gray;
+  }
+
+  &__period-column {
+    @apply w-28 h-8 top-1 right-10 my-2 mx-1 absolute;
+  }
+
+  &__calendar-button {
+    @apply h-8 rounded absolute top-4 mt-0.5 fill-gray-2 leading-3 right-2;
+  }
+
+  &__clock-button {
+    @apply h-8 rounded absolute top-4 mt-0.5 fill-gray-2 leading-3 right-2;
+  }
+
+  &__time-frame {
+    @apply w-52 max-w-lg h-40 bg-white absolute border border-solid border-[#f2f3f5] z-20;
+  }
+
+  &__hour-picker,
+  &__minute-picker {
+    @apply w-1/2 left-2.5 h-8 text-center text-sm absolute top-6;
+
+    &:hover {
+      @apply cursor-default;
+    }
+
+    &:focus-visible {
+      @apply outline-0;
+    }
+  }
+
+  &__close-calendar {
+    @apply absolute z-30 bottom-2 right-1;
+  }
+
+  &__pick-calendar {
+    @apply absolute z-30 bottom-2 right-16 mr-1;
+
+    &:disabled {
+      @apply bg-gray;
+    }
+  }
+
+  &__close-clock {
+    @apply absolute z-30 bottom-2 right-1;
+  }
+
+  &__reset-clock {
+    @apply absolute z-30 bottom-2 left-2;
+  }
+
+  &__select-clock {
+    @apply absolute z-30 bottom-2 right-16 mr-1;
+  }
+
+  &__hour-up {
+    @apply absolute rounded-t w-full h-6;
+
+    &:hover {
+      @apply bg-gray-3;
+    }
+  }
+
+  &__hour-down {
+    @apply absolute rounded-b w-full h-6 bottom-0;
+
+    &:hover {
+      @apply bg-gray-3;
+    }
+  }
+
+  &__minute-up {
+    @apply absolute rounded-t w-full h-6;
+
+    &:hover {
+      @apply bg-gray-3;
+    }
+  }
+
+  &__minute-down {
+    @apply absolute rounded-b w-full h-6 bottom-0;
+
+    &:hover {
+      @apply bg-gray-3;
+    }
+  }
+
+  &__period-am {
+    @apply ml-1 accent-secondary bg-secondary;
+  }
+
+  &__period-pm {
+    @apply ml-1;
+  }
+
+  &__label-row {
+    @apply absolute flex top-2 w-full text-sm font-semibold;
+  }
+
+  &__hour-label-container {
+    @apply flex-1 text-center;
+  }
+
+  &__minute-label-container {
+    @apply flex-1 text-center;
+  }
+
+  &__help-text-container {
+    @apply w-full h-10 relative;
+  }
+
+  &__help-date {
+    @apply w-1/2 relative inline-block;
+  }
+
+  &__help-time {
+    @apply w-1/2 relative inline-block left-2;
+  }
+}
+
+input[type="date"]::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}

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

@@ -33,18 +33,45 @@
   }
 }
 
+[data-target="dropdown-menu-language-chooser"] {
+  & > span {
+    @apply block font-semibold text-black text-xs;
+  }
+
+  > svg {
+    @apply w-5 h-6 flex-none text-xs font-normal text-black fill-current;
+  }
+
+  & > ul {
+    @apply w-6 bg-gray;
+
+    > li {
+      @apply w-6 bg-gray;
+    }
+  }
+}
+
+[data-target="dropdown-menu-language-chooser-mobile"] {
+  & > span {
+    @apply block text-black font-normal text-sm;
+  }
+
+  > svg {
+    @apply w-5 h-6 flex-none text-xs font-normal text-black fill-current;
+  }
+
+  & > ul {
+    @apply w-6 bg-gray;
+
+    > li {
+      @apply w-6 bg-gray;
+    }
+  }
+}
+
 .dropdown {
   @apply absolute border-2 border-gray-3 rounded min-w-max p-4 drop-shadow-md text-left z-10;
 
-  /*
-    NOTE: the calculated value is the sum of the arrow offset position plus the half of the arrow size:
-    - offset position: 20%
-    - arrow size: 1.5rem
-  */
-  --arrow-offset: 20%;
-  --arrow-size: 1.5rem;
-  --arrow-visible-size: var(--arrow-size) * 0.5;
-
   & > * {
     @apply relative z-10 p-3.5 first:pt-1.5 last:pb-1.5;
   }
@@ -63,6 +90,15 @@
     }
   }
 
+  /*
+    NOTE: the calculated value is the sum of the arrow offset position plus the half of the arrow size:
+    - offset position: 20%
+    - arrow size: 1.5rem
+  */
+  --arrow-offset: 20%;
+  --arrow-size: 1.5rem;
+  --arrow-visible-size: var(--arrow-size) * 0.5;
+
   &__bottom {
     @apply top-full right-0 mt-3 translate-x-[calc(var(--arrow-offset)-var(--arrow-visible-size))] before:content-[''] before:absolute before:right-[var(--arrow-offset)] before:-top-2 before:w-[var(--arrow-size)] before:h-[var(--arrow-size)] before:rotate-45 before:bg-white before:rounded before:border-2 before:border-gray-3 after:content-[''] after:absolute after:left-0 after:top-0 after:w-full after:h-full after:bg-white;
   }

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

@@ -0,0 +1,36 @@
+.emoji-picker {
+  &__popupContainer {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+
+    & .emoji-picker__closeButton {
+      position: absolute;
+      border: none;
+      z-index: 1;
+      right: 0;
+      top: 0;
+      cursor: pointer;
+      padding: 4px;
+      align-self: flex-end;
+      transform: translate(50%, -50%);
+      background: #999;
+      width: 1.5rem;
+      height: 1.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+
+      &:hover {
+        background: #4f46e5;
+      }
+
+      & svg {
+        fill: white;
+        width: 1.25rem;
+        height: 1.25rem;
+      }
+    }
+  }
+}

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

@@ -1,5 +1,7 @@
 .filter {
-  @apply flex items-center gap-2 p-1.5 rounded cursor-pointer relative;
+  label {
+    @apply flex items-center gap-2 p-1.5 rounded cursor-pointer relative;
+  }
 
   &-container {
     @apply rounded border-4 border-background md:border-0;
@@ -69,7 +71,7 @@
   }
 
   &-search {
-    @apply w-full relative;
+    @apply w-full relative bg-gray;
 
     input {
       @apply w-full;

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

@@ -12,9 +12,9 @@
   }
 
   &__message {
-    @apply text-black font-semibold text-md;
+    @apply text-black font-medium text-md flex-col;
 
-    a {
+    a:not(.button) {
       @apply underline text-secondary;
 
       svg {

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

@@ -1,11 +1,9 @@
 footer {
-  @apply mb-16 lg:mb-0;
-
   .main-footer {
     @apply bg-gray-4;
 
     &__top {
-      @apply flex flex-col lg:flex-row gap-8 container py-10;
+      @apply hidden flex flex-col lg:flex-row lg:block gap-8 container py-10;
     }
 
     &__down {

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

@@ -1,3 +1,11 @@
+#form-search-mobile {
+  @apply py-1.5 px-4 bg-gray-5 rounded-lg border border-gray outline outline-1 outline-transparent;
+
+  input[type="text"] {
+    @apply bg-gray-5;
+  }
+}
+
 .form-defaults {
   /* text-like inputs */
   input[type="date"],
@@ -45,16 +53,16 @@
   }
 
   select {
+    &:not(.reset-defaults) {
+      @apply pr-8;
+    }
+
     @apply appearance-none;
 
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 12 8'%3e%3cpath fill='%233E4C5C' d='M5.99962 4.97656L10.1246 0.851562L11.303 2.0299L5.99962 7.33323L0.696289 2.0299L1.87462 0.851562L5.99962 4.97656Z'/%3e%3c/svg%3e");
     background-position: right 1rem center;
     background-repeat: no-repeat;
     background-size: 0.75rem;
-
-    &:not(.reset-defaults) {
-      @apply pr-8;
-    }
   }
 }
 
@@ -154,7 +162,7 @@
   }
 
   button {
-    @apply absolute right-2 top-8;
+    @apply absolute ltr:right-2 rtl:left-2 top-8;
   }
 }