decidim-core 0.27.8 → 0.28.0.rc4

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

@@ -0,0 +1,132 @@
+/**
+ * Returns 9 useful positions (page coordinates) of a HTMLElement regarding the window object
+ *
+ *    topLeft      topCenter      topRight
+ *           \ ________|________ /
+ *            |                 |
+ * middleLeft |   middleCenter  | middleRight
+ *            |_________________|
+ *           /         |         \
+ * bottomLeft     bottomCenter    bottomRight
+ *
+ * @param {HTMLElement} node target node
+ * @param {HTMLElement} relativeParent relative parent, instead of window
+ * @returns {Object} Nine pair of page coordinates
+ */
+const getAbsolutePosition = (node, relativeParent) => {
+  const { top, left, width, height } = node.getBoundingClientRect()
+
+  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])
+    const { topLeft: [parentX, parentY] } = getAbsolutePosition(relativeParent);
+    [pageX, pageY] = [pageX - parentX, pageY - parentY]
+  }
+
+  return {
+    topLeft: [pageX + left, pageY + top],
+    topCenter: [pageX + left + width / 2, pageY + top],
+    topRight: [pageX + left + width, pageY + top],
+    middleLeft: [pageX + left, pageY + top + height / 2],
+    middleCenter: [pageX + left + width / 2, pageY + top + height / 2],
+    middleRight: [pageX + left + width, pageY + top + height / 2],
+    bottomLeft: [pageX + left, pageY + top + height],
+    bottomCenter: [pageX + left + width / 2, pageY + top + height],
+    bottomRight: [pageX + left + width, pageY + top + height]
+  }
+}
+
+/**
+ * Initialize any tooltip in the same way, both plain texts or complex markup
+ *
+ * @param {HTMLElement} node trigger element who contains the tooltip
+ * @returns {void}
+ */
+export default function(node) {
+  const { tooltip: tooltipHtml } = node.dataset
+
+  const div = document.createElement("div")
+  div.innerHTML = tooltipHtml
+  const tooltip = div.firstElementChild
+
+  // only run this script when the tooltip content is html
+  if (!(tooltip instanceof HTMLElement)) {
+    return
+  }
+
+  // in case of javascript disabled, the tooltip could use the title attribute as default behaviour
+  // once arrives here, title is no longer necessary
+  node.removeAttribute("title")
+
+  tooltip.id = tooltip.id || `tooltip-${Math.random().toString(36).substring(7)}`
+  // append to dom hidden, to apply css transitions
+  tooltip.setAttribute("aria-hidden", true)
+
+  const append = () => {
+    // do nothing if the tooltip is already present at the DOM
+    if (tooltip.getAttribute("aria-hidden") === "false") {
+      return
+    }
+
+    // remove any previous tooltip from the DOM, in order to avoid overlaps
+    Array.from(document.body.children).map((child) => child.id.startsWith("tooltip") && child.remove())
+
+    document.body.appendChild(tooltip)
+
+    node.setAttribute("aria-describedby", tooltip.id)
+
+    // the position must be calculated once the event has been triggered
+    // in that way, we ensure the container position is that we want
+    // otherwise, the trigger could be hidden or misplaced
+    const { topCenter, bottomCenter, middleRight, middleLeft } = getAbsolutePosition(node)
+
+    let positionX = null;
+    let positionY = null;
+
+    if (tooltip.classList.contains("bottom")) {
+      [positionX, positionY] = bottomCenter
+    } else if (tooltip.classList.contains("left")) {
+      [positionX, positionY] = middleLeft
+    } else if (tooltip.classList.contains("right")) {
+      [positionX, positionY] = middleRight
+    } else if (tooltip.classList.contains("top")) {
+      [positionX, positionY] = topCenter
+    }
+
+    // when the node is placed at the left side of the screen
+    // we translate the tooltip's arrow in order to fit inside the viewport
+    if ((tooltip.classList.contains("top") || tooltip.classList.contains("bottom")) && positionX < Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0) * 0.5) {
+      tooltip.style.setProperty("--arrow-offset", "80%")
+    } else {
+      tooltip.style.removeProperty("--arrow-offset")
+    }
+
+    tooltip.style.top = `${positionY}px`
+    tooltip.style.left = `${positionX}px`
+
+    tooltip.setAttribute("aria-hidden", false)
+  }
+
+  // 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/user_registrations.js

@@ -1,6 +1,9 @@
+import PasswordToggler from "./password_toggler";
+
 $(() => {
   const $userRegistrationForm = $("#register-form");
   const $userGroupFields      = $userRegistrationForm.find(".user-group-fields");
+  const userPassword         =  document.querySelector(".user-password");
   const inputSelector         = 'input[name="user[sign_up_as]"]';
   const newsletterSelector    = 'input[type="checkbox"][name="user[newsletter]"]';
   const $newsletterModal      = $("#sign-up-newsletter-modal");
@@ -17,7 +20,7 @@ $(() => {
   const checkNewsletter = (check) => {
     $userRegistrationForm.find(newsletterSelector).prop("checked", check);
     $newsletterModal.data("continue", true);
-    $newsletterModal.foundation("close");
+    window.Decidim.currentDialogs["sign-up-newsletter-modal"].close()
     $userRegistrationForm.submit();
   }
 
@@ -34,12 +37,16 @@ $(() => {
     if (!$newsletterModal.data("continue")) {
       if (!newsletterChecked.prop("checked")) {
         event.preventDefault();
-        $newsletterModal.foundation("open");
+        window.Decidim.currentDialogs["sign-up-newsletter-modal"].open()
       }
     }
   });
 
-  $newsletterModal.find(".check-newsletter").on("click", (event) => {
+  $newsletterModal.find("[data-check]").on("click", (event) => {
     checkNewsletter($(event.target).data("check"));
   });
+
+  if (userPassword) {
+    new PasswordToggler(userPassword).init();
+  }
 });

data/app/packs/src/decidim/vendor/jquery-tmpl.js

@@ -339,7 +339,7 @@
                         target = unescape( target );
                         args = args ? ("," + unescape( args ) + ")") : (parens ? ")" : "");
                         // Support for target being things like a.toLowerCase();
-                        // In that case don't call with template item as 'this' pointer. Just evaluate...
+                        // In that case do not call with template item as 'this' pointer. Just evaluate...
                         expr = parens ? (target.indexOf(".") > -1 ? target + parens : ("(" + target + ").call($item" + args)) : target;
                         exprAutoFnDetect = parens ? expr : "(typeof(" + target + ")==='function'?(" + target + ").call($item):(" + target + "))";
                     } else {

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

@@ -130,7 +130,7 @@ L.TileLayer.HERE = L.TileLayer.extend({
     this._map.off('moveend zoomend resetview', this._findCopyrightBBox, this);
 
     //
-    // Call the prototype last, once we've tidied up our own changes
+    // Call the prototype last, once we have tidied up our own changes
     //
     L.TileLayer.prototype.onRemove.call(this, map);
   },

data/app/packs/src/decidim/vendor/tribute.js

@@ -242,12 +242,12 @@ function () {
     value: function showMenuFor(element, scrollTo) {
       var _this2 = this;
 
-      // Only proceed if menu isn't already shown for the current element & mentionText
+      // Only proceed if menu is not already shown for the current element & mentionText
       if (this.isActive && this.current.element === element && this.current.mentionText === this.currentMentionTextSnapshot) {
         return;
       }
 
-      this.currentMentionTextSnapshot = this.current.mentionText; // create the menu if it doesn't exist.
+      this.currentMentionTextSnapshot = this.current.mentionText; // create the menu if it does not exist.
 
       if (!this.menu) {
         this.menu = this.createMenu();
@@ -1711,7 +1711,7 @@ function () {
     value: function traverse(string, pattern, stringIndex, patternIndex, patternCache) {
       // if the pattern search at end
       if (pattern.length === patternIndex) {
-        // calculate score and copy the cache containing the indices where it's found
+        // calculate score and copy the cache containing the indices where it is found
         return {
           score: this.calculateScore(patternCache),
           cache: patternCache.slice()

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

@@ -1,9 +1,9 @@
-/* eslint-disable require-jsdoc, id-length, no-undefined, no-unused-vars, multiline-ternary, no-ternary, no-nested-ternary, no-invalid-this */
+/* eslint-disable require-jsdoc, id-length, no-undefined, no-unused-vars, multiline-ternary, no-nested-ternary, no-invalid-this */
 /* eslint prefer-reflect: ["error", { "exceptions": ["call"] }] */
 /* eslint dot-location: ["error", "property"] */
 /* eslint no-unused-vars: 0 */
 
-import { select, mouse } from "d3-selection";
+import { select, pointer } from "d3-selection";
 import { min, max, extent, ascending, bisector } from "d3-array";
 import { scaleTime, scaleLinear } from "d3-scale";
 import { axisLeft, axisBottom } from "d3-axis";
@@ -49,7 +49,7 @@ export default function areachart(opts = {}) {
 
   // set the dimensions and margins of the graph
   let margin = {
-    top: 0,
+    top: 40,
     right: 0,
     bottom: 0,
     left: 0
@@ -104,8 +104,7 @@ export default function areachart(opts = {}) {
       .style("display", "none")
 
     let tooltip = select("body").append("div")
-      .attr("id", `${container.node().id}-tooltip`)
-      .attr("class", "chart-tooltip")
+      .attr("id", `${container.node().id}-metric-tooltip`)
       .style("opacity", 0)
 
     svg
@@ -117,8 +116,8 @@ export default function areachart(opts = {}) {
         circle.style("display", "none")
         tooltip.style("opacity", 0)
       })
-      .on("mousemove", function() {
-        let x0 = x.invert(mouse(this)[0])
+      .on("mousemove", function(event) {
+        let x0 = x.invert(pointer(event)[0])
         let i = bisector((d) => d.key).left(data, x0, 1)
         let d0 = data[i - 1]
         let d1 = data[i]
@@ -131,7 +130,7 @@ export default function areachart(opts = {}) {
         }
 
         let tooltipContent = `
-          <div class="tooltip-content">
+          <div>
             ${timeFormat("%e %B %Y")(d.key)}<br />
             ${d.value.toLocaleString()} ${objectName}
           </div>`

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

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

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

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

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

@@ -0,0 +1,7 @@
+.actions__secondary {
+  @apply flex flex-row md:flex-col justify-center md:gap-y-4 gap-x-10 md:gap-x-0;
+
+  .button {
+    @apply justify-start;
+  }
+}

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

@@ -0,0 +1,49 @@
+.activity {
+  @apply grid grid-cols-[1fr_max-content] md:grid-cols-[calc(100%/6)_1fr_max-content] items-center md:items-start gap-2 md:gap-12 py-4 first:pt-0 last:pb-0;
+
+  &__container {
+    @apply divide-y divide-gray-3;
+  }
+
+  &__time {
+    @apply w-full flex-none text-sm text-gray-2;
+  }
+
+  &__content {
+    @apply col-span-2 md:col-span-1 order-first md:order-none space-y-2;
+
+    > span:first-child {
+      span {
+        @apply text-gray-2 text-sm;
+
+        svg {
+          @apply text-gray fill-current;
+        }
+      }
+
+      svg {
+        @apply inline-block;
+      }
+
+      a {
+        @apply text-secondary font-semibold hover:underline;
+      }
+    }
+
+    > span:last-child:not(:only-child) {
+      @apply flex items-center gap-1 text-gray-2 text-sm;
+
+      svg {
+        @apply w-3.5 h-3.5 text-gray fill-current;
+      }
+
+      a {
+        @apply underline;
+      }
+    }
+  }
+
+  &__author {
+    @apply ml-auto flex-none;
+  }
+}

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

@@ -0,0 +1,25 @@
+.address {
+  @apply space-y-2 text-gray-2;
+
+  &__container {
+    @apply flex items-start gap-1;
+
+    & > svg {
+      @apply flex-none text-gray fill-current mt-0.5;
+    }
+  }
+
+  &__location {
+    @apply text-md font-semibold;
+  }
+
+  &__address,
+  &__hints {
+    @apply text-sm break-words;
+
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+}

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

@@ -0,0 +1,74 @@
+.author {
+  @apply flex items-center [&>*:not(:first-child)]:pl-5 [&>*:not(:last-child)]:pr-6 divide-gray-3 divide-x text-sm text-gray-2;
+
+  &__container {
+    @apply flex items-center gap-2.5 first:[&>*]:flex-none;
+
+    > :last-child {
+      @apply flex flex-col [&>*]:grow;
+    }
+  }
+
+  &__avatar {
+    @apply w-full h-full object-cover;
+
+    &-container {
+      @apply rounded-full overflow-hidden inline-block w-6 h-6 align-top;
+    }
+
+    &-counter {
+      @apply -ml-4 rounded-full overflow-hidden inline-grid w-6 h-6 bg-background place-items-center text-secondary text-xs font-semibold;
+    }
+  }
+
+  &__container.is-compact &__avatar-container {
+    @apply w-8 h-8;
+  }
+
+  &__container.is-compact &__name {
+    @apply text-secondary font-semibold;
+  }
+
+  &__metadata {
+    @apply flex items-center gap-1 text-gray-2 text-sm;
+
+    > svg {
+      @apply text-gray fill-current flex-none;
+    }
+  }
+
+  &__tooltip {
+    @apply grid grid-cols-[1fr_max-content] gap-6 odd:[&>*]:place-self-start even:[&>*]:place-self-end z-50;
+
+    /* overwrite default styles */
+    &[role="tooltip"] {
+      @apply max-w-max;
+    }
+
+    &-links {
+      @apply flex flex-col items-end justify-evenly h-full whitespace-nowrap text-sm hover:[&>*]:underline;
+    }
+  }
+
+  &__tooltip &__avatar-container {
+    @apply w-10 h-10 border-2 border-white hover:border-tertiary;
+  }
+
+  &__tooltip &__name {
+    @apply text-white text-lg font-bold hover:underline;
+  }
+
+  &__coauthors {
+    @apply flex flex-wrap items-center gap-2;
+
+    &[aria-hidden="false"] + [id$="trigger"] span:last-child,
+    &[aria-hidden="true"] + [id$="trigger"] span:first-child {
+      @apply first-letter:lowercase block;
+    }
+
+    &[aria-hidden="false"] + [id$="trigger"] span:first-child,
+    &[aria-hidden="true"] + [id$="trigger"] span:last-child {
+      @apply hidden;
+    }
+  }
+}

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

@@ -0,0 +1,100 @@
+.button {
+  @apply inline-flex items-center justify-center font-semibold text-center border border-transparent rounded transition cursor-pointer [&>svg]:flex-none [&>svg]:fill-current [&>span]:text-center [&>span]:break-words focus:outline focus:outline-2 focus:outline-offset-2;
+
+  &__xs {
+    @apply text-sm [&:not([class*="button\\_\\_text"])]:px-3 [&:not([class*="button\\_\\_text"])]:py-1 gap-1;
+  }
+
+  &__sm {
+    @apply text-sm [&:not([class*="button\\_\\_text"])]:px-4 [&:not([class*="button\\_\\_text"])]:py-1.5 gap-1.5;
+  }
+
+  &__lg {
+    @apply text-lg [&:not([class*="button\\_\\_text"])]:px-6 [&:not([class*="button\\_\\_text"])]:py-3 gap-2;
+  }
+
+  &__xl {
+    @apply text-xl [&:not([class*="button\\_\\_text"])]:px-8 [&:not([class*="button\\_\\_text"])]:py-4 gap-4;
+  }
+
+  &__primary {
+    @apply bg-primary text-white focus:outline-primary;
+  }
+
+  &__secondary {
+    @apply bg-secondary text-white focus:outline-secondary;
+  }
+
+  &__tertiary {
+    @apply bg-tertiary text-white focus:outline-tertiary;
+  }
+
+  &__transparent {
+    @apply bg-transparent text-white border border-white;
+
+    &-primary {
+      @apply border bg-white border-primary text-primary focus:outline-primary;
+    }
+
+    &-secondary {
+      @apply border bg-white border-secondary text-secondary focus:outline-secondary;
+    }
+
+    &-tertiary {
+      @apply border bg-white border-tertiary text-tertiary focus:outline-tertiary;
+    }
+  }
+
+  &__text {
+    @apply bg-transparent border-0 p-0 hover:underline text-black;
+
+    &-primary {
+      @apply bg-transparent border-0 p-0 hover:underline text-primary;
+    }
+
+    &-secondary {
+      @apply bg-transparent border-0 p-0 hover:underline text-secondary;
+    }
+
+    &-tertiary {
+      @apply bg-transparent border-0 p-0 hover:underline text-tertiary;
+    }
+  }
+
+  &[disabled],
+  &.disabled {
+    @apply text-gray-2 bg-background-3 border border-gray-2 cursor-not-allowed;
+  }
+
+  &.is-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)),
+      theme("colors.secondary");
+  }
+
+  &__pill {
+    @apply bg-gray-5 text-secondary mx-0 rounded;
+  }
+
+  &__pill:not(:last-child) {
+    @apply rounded-r-none;
+  }
+
+  &__pill + &__pill {
+    @apply rounded-r rounded-l-none;
+  }
+
+  &__pill--active {
+    @apply bg-secondary text-white;
+
+    .button__pill--count {
+      @apply bg-white text-secondary;
+    }
+  }
+
+  &__pill--count {
+    @apply rounded-full bg-secondary text-white inline-grid place-items-center h-[18px] w-[18px] ml-2 text-xs;
+  }
+}

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

@@ -0,0 +1,55 @@
+.callout {
+  @apply rounded p-4 border-l-4 border-secondary bg-secondary/5 space-y-2;
+
+  &.success {
+    @apply border-success bg-success/5;
+  }
+
+  &.alert {
+    @apply border-alert bg-alert/5;
+  }
+
+  &.warning {
+    @apply border-warning bg-warning/5;
+  }
+
+  & + * {
+    @apply mt-4;
+  }
+
+  a {
+    @apply text-secondary;
+  }
+
+  &[data-component="accordion"] {
+    [id*="panel"][aria-hidden="true"] {
+      @apply block max-h-14 overflow-hidden relative before:content-[''] before:absolute before:inset-0 before:h-full before:w-full before:bg-gradient-to-b before:from-transparent before:to-white after:content-[''] after:absolute after:inset-0 after:h-full after:w-full after:bg-gradient-to-b after:from-transparent after:to-secondary/5;
+    }
+
+    &.success [id*="panel"][aria-hidden="true"] {
+      @apply after:to-success/5;
+    }
+
+    &.alert [id*="panel"][aria-hidden="true"] {
+      @apply after:to-alert/5;
+    }
+
+    &.warning [id*="panel"][aria-hidden="true"] {
+      @apply after:to-warning/5;
+    }
+
+    [aria-expanded="false"] > svg:last-of-type,
+    [aria-expanded="false"] > span:last-of-type,
+    [aria-expanded="true"] > span:first-of-type,
+    [aria-expanded="true"] > svg:first-of-type {
+      @apply hidden;
+    }
+
+    [aria-expanded="true"] > svg:last-of-type,
+    [aria-expanded="true"] > span:last-of-type,
+    [aria-expanded="false"] > span:first-of-type,
+    [aria-expanded="false"] > svg:first-of-type {
+      @apply block;
+    }
+  }
+}