decidim-core 0.29.2 → 0.30.0.rc1

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

@@ -101,7 +101,6 @@ export default class CheckBoxesTree {
     const indeterminateSiblings = totalCheckSiblings.filter((checkbox) => checkbox.indeterminate)
 
     if (checkedSiblings.length === 0 && indeterminateSiblings.length === 0) {
-      parentCheck.checked = false;
       parentCheck.indeterminate = false;
     } else if (checkedSiblings.length === totalCheckSiblings.length && indeterminateSiblings.length === 0) {
       parentCheck.checked = true;

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

@@ -21,7 +21,9 @@ import select from "select";
  *
  * Options through data attributes:
  * - `data-clipboard-copy` = The jQuery selector for the target input element
- *   where text will be copied from.
+ *   where text will be copied from. If this element does not contain any visible text (for instance is an image),
+ *   the selector indicated in here will be used to place the confirmation message.
+ * - `data-clipboard-content` = The text that will be copied. If empty or not present, the target input element will be used.
  * - `data-clipboard-copy-label` = The label that will be shown in the button
  *   after a succesful copy.
  * - `data-clipboard-copy-message` = The text that will be announced to screen
@@ -40,12 +42,17 @@ $(() => {
     }
 
     const $input = $($el.data("clipboard-copy"));
-    if ($input.length < 1 || !$input.is("input, textarea, select")) {
-      return;
+
+    let selectedText = $el.data("clipboard-content") || "";
+    if (selectedText === "" && $input.is("input, textarea, select")) {
+      selectedText = select($input[0]);
     }
 
+    let $msgEl = $el;
+    if ($msgEl.text() === "") {
+      $msgEl = $input;
+    }
     // Get the available text to clipboard.
-    const selectedText = select($input[0]);
     if (!selectedText || selectedText.length < 1) {
       return;
     }
@@ -83,16 +90,18 @@ $(() => {
       }
 
       if (!$el.data("clipboard-copy-label-original")) {
-        $el.data("clipboard-copy-label-original", $el.html());
+        $el.data("clipboard-copy-label-original", $msgEl.html());
       }
 
-      $el.html(label);
+      $msgEl.html(label);
+
       to = setTimeout(() => {
-        $el.html($el.data("clipboard-copy-label-original"));
+        $msgEl.html($el.data("clipboard-copy-label-original"));
         $el.removeData("clipboard-copy-label-original");
         $el.removeData("clipboard-copy-label-timeout");
       }, CLIPBOARD_COPY_TIMEOUT);
-      $el.data("clipboard-copy-label-timeout", to)
+
+      $el.data("clipboard-copy-label-timeout", to);
     }
 
     // Alert the screen reader what just happened (the link was copied).
@@ -107,7 +116,7 @@ $(() => {
         }
       } else {
         $msg = $('<div aria-role="alert" aria-live="assertive" aria-atomic="true" class="sr-only"></div>');
-        $el.after($msg);
+        $msgEl.append($msg);
         $el.data("clipboard-message-element", $msg);
       }
 

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

@@ -5,12 +5,14 @@
  * it to gain control over the confirm events BEFORE rails-ujs is loaded.
  */
 
-import Rails from "@rails/ujs"
+const { Rails } = window;
 
 class ConfirmDialog {
   constructor(sourceElement) {
     this.$modal = $("#confirm-modal");
-    this.$source = sourceElement;
+    if (sourceElement) {
+      this.$source = $(sourceElement);
+    }
     this.$content = $("[data-confirm-modal-content]", this.$modal);
     this.$buttonConfirm = $("[data-confirm-ok]", this.$modal);
     this.$buttonCancel = $("[data-confirm-cancel]", this.$modal);
@@ -29,22 +31,37 @@ class ConfirmDialog {
       this.$buttonConfirm.on("click", (ev) => {
         ev.preventDefault();
 
-        window.Decidim.currentDialogs["confirm-modal"].close()
-        resolve(true);
-        this.$source.focus();
+        this.close(() => resolve(true));
       });
 
       this.$buttonCancel.on("click", (ev) => {
         ev.preventDefault();
 
-        window.Decidim.currentDialogs["confirm-modal"].close()
-        resolve(false);
-        this.$source.focus();
+        this.close(() => resolve(false));
       });
     });
   }
+
+  close(afterClose) {
+    window.Decidim.currentDialogs["confirm-modal"].close()
+    afterClose();
+    if (this.$source) {
+      this.$source.focus();
+    }
+  }
 }
 
+const runConfirm = (message, sourceElement = null) => new Promise((resolve) => {
+  const dialog = new ConfirmDialog(sourceElement);
+  dialog.confirm(message).then((answer) => {
+    let completed = true;
+    if (sourceElement) {
+      completed = Rails.fire(sourceElement, "confirm:complete", [answer]);
+    }
+    resolve(answer && completed);
+  });
+});
+
 // Override the default confirm dialog by Rails
 // See:
 // https://github.com/rails/rails/blob/fba1064153d8e2f4654df7762a7d3664b93e9fc8/actionview/app/assets/javascripts/rails-ujs/features/confirm.coffee
@@ -64,37 +81,35 @@ const allowAction = (ev, element) => {
     return false;
   }
 
-  const dialog = new ConfirmDialog(
-    $(element)
-  );
-  dialog.confirm(message).then((answer) => {
-    const completed = Rails.fire(element, "confirm:complete", [answer]);
-    if (answer && completed) {
-      // Allow the event to propagate normally and re-dispatch it without
-      // the confirm data attribute which the Rails internal method is
-      // checking.
-      $(element).data("confirm", null);
-      $(element).removeAttr("data-confirm");
-
-      // The submit button click events will not do anything if they are
-      // dispatched as is. In these cases, just submit the underlying form.
-      if (ev.type === "click" &&
-        (
-          $(element).is('button[type="submit"]') ||
-          $(element).is('input[type="submit"]')
-        )
-      ) {
-        $(element).parents("form").submit();
-      } else {
-        let origEv = ev.originalEvent || ev;
-        let newEv = origEv;
-        if (typeof Event === "function") {
-          // Clone the event because otherwise some click events may not
-          // work properly when re-dispatched.
-          newEv = new origEv.constructor(origEv.type, origEv);
-        }
-        ev.target.dispatchEvent(newEv);
+  runConfirm(message, element).then((answer) => {
+    if (!answer) {
+      return;
+    }
+
+    // Allow the event to propagate normally and re-dispatch it without
+    // the confirm data attribute which the Rails internal method is
+    // checking.
+    $(element).data("confirm", null);
+    $(element).removeAttr("data-confirm");
+
+    // The submit button click events will not do anything if they are
+    // dispatched as is. In these cases, just submit the underlying form.
+    if (ev.type === "click" &&
+      (
+        $(element).is('button[type="submit"]') ||
+        $(element).is('input[type="submit"]')
+      )
+    ) {
+      $(element).parents("form").submit();
+    } else {
+      let origEv = ev.originalEvent || ev;
+      let newEv = origEv;
+      if (typeof Event === "function") {
+        // Clone the event because otherwise some click events may not
+        // work properly when re-dispatched.
+        newEv = new origEv.constructor(origEv.type, origEv);
       }
+      ev.target.dispatchEvent(newEv);
     }
   });
 
@@ -129,26 +144,31 @@ const handleDocumentEvent = (ev, matchSelectors) => {
   });
 };
 
-document.addEventListener("click", (ev) => {
-  return handleDocumentEvent(ev, [
-    Rails.linkClickSelector,
-    Rails.buttonClickSelector,
-    Rails.formInputClickSelector
-  ]);
-});
-document.addEventListener("change", (ev) => {
-  return handleDocumentEvent(ev, [Rails.inputChangeSelector]);
-});
-document.addEventListener("submit", (ev) => {
-  return handleDocumentEvent(ev, [Rails.formSubmitSelector]);
-});
+// Note that this needs to be run **before** Rails.start()
+export const initializeConfirm = () => {
+  document.addEventListener("click", (ev) => {
+    return handleDocumentEvent(ev, [
+      Rails.linkClickSelector,
+      Rails.buttonClickSelector,
+      Rails.formInputClickSelector
+    ]);
+  });
+  document.addEventListener("change", (ev) => {
+    return handleDocumentEvent(ev, [Rails.inputChangeSelector]);
+  });
+  document.addEventListener("submit", (ev) => {
+    return handleDocumentEvent(ev, [Rails.formSubmitSelector]);
+  });
 
-// This is needed for the confirm dialog to work with Foundation Abide.
-// Abide registers its own submit click listeners since Foundation 5.6.x
-// which will be handled before the document listeners above. This would
-// break the custom confirm functionality when used with Foundation Abide.
-document.addEventListener("DOMContentLoaded", function() {
-  $(Rails.formInputClickSelector).on("click.confirm", (ev) => {
-    handleConfirm(ev, getMatchingEventTarget(ev, Rails.formInputClickSelector));
+  // This is needed for the confirm dialog to work with Foundation Abide.
+  // Abide registers its own submit click listeners since Foundation 5.6.x
+  // which will be handled before the document listeners above. This would
+  // break the custom confirm functionality when used with Foundation Abide.
+  document.addEventListener("DOMContentLoaded", function() {
+    $(Rails.formInputClickSelector).on("click.confirm", (ev) => {
+      handleConfirm(ev, getMatchingEventTarget(ev, Rails.formInputClickSelector));
+    });
   });
-});
+};
+
+export default runConfirm;

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

@@ -0,0 +1 @@
+// This file is intentionally empty, because is the place for the defidim applications will add their JavaScript code.

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

@@ -1,4 +1,4 @@
-import Rails from "@rails/ujs";
+const { Rails } = window;
 
 // Make the remote form submit buttons disabled when the form is being
 // submitted to avoid multiple submits.

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

@@ -0,0 +1,60 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const info = (target, msg) => {
+    const label = target.closest("label");
+    label.querySelectorAll(".form-error").forEach((el) => el.remove());
+    if (msg) {
+      const error = document.createElement("span");
+      error.className = "form-error";
+      error.textContent = msg;
+      label.appendChild(error);
+      error.style.display = "block";
+    }
+  };
+
+  const setLocating = (button, enable) => {
+    if (enable) {
+      button.setAttribute("disabled", true);
+    } else {
+      button.removeAttribute("disabled");
+    }
+  };
+
+  document.querySelectorAll(".user-device-location button").forEach((button) => {
+    button.addEventListener("click", (event) => {
+      const target = event.target;
+      if (target.disabled) {
+        return;
+      }
+
+      const input = document.getElementById(target.dataset.input);
+      const errorNoLocation = target.dataset.errorNoLocation;
+      const errorUnsupported = target.dataset.errorUnsupported;
+      const url = target.dataset.url;
+
+      if (navigator.geolocation) {
+        setLocating(target, true);
+        navigator.geolocation.getCurrentPosition((position) => {
+          const coordinates = [position.coords.latitude, position.coords.longitude];
+
+          // reverse geolocation
+          $.post(url, { latitude: coordinates[0], longitude: coordinates[1] }, (data) => {
+            input.value = data.address;
+            $(input).trigger("geocoder-suggest-coordinates.decidim", [coordinates]);
+          }).fail((xhr, status, error) => {
+            info(input, `${errorNoLocation} ${error}`);
+          });
+
+          setLocating(target, false);
+
+        }, (evt) => {
+          info(input, `${errorNoLocation} ${evt.message}`);
+          target.removeAttribute("disabled");
+        }, {
+          enableHighAccuracy: true
+        });
+      } else {
+        info(input, errorUnsupported);
+      }
+    });
+  });
+});

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

@@ -15,7 +15,7 @@ $(() => {
     }, 1000);
 
     // Prevent reload when page is already unloading, otherwise it may cause infinite reloads.
-    window.addEventListener("beforeunload", () => {
+    window.addEventListener("pagehide", () => {
       clearInterval(exitInterval);
       return;
     });

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

@@ -8,6 +8,7 @@
 import "core-js/stable";
 import "regenerator-runtime/runtime";
 import "jquery"
+import "chartkick/chart.js"
 
 // REDESIGN_PENDING: deprecated
 import "foundation-sites";
@@ -41,7 +42,6 @@ import "src/decidim/vizzs"
 import "src/decidim/responsive_horizontal_tabs"
 import "src/decidim/security/selfxss_warning"
 import "src/decidim/session_timeouter"
-import "src/decidim/confirm"
 import "src/decidim/results_listing"
 import "src/decidim/impersonation"
 import "src/decidim/gallery"
@@ -50,9 +50,11 @@ import "src/decidim/data_consent"
 import "src/decidim/abide_form_validator_fixer"
 import "src/decidim/sw"
 import "src/decidim/sticky_header"
+import "src/decidim/sticky_footer"
 import "src/decidim/attachments"
 
 // local deps that require initialization
+import ConfirmDialog, { initializeConfirm } from "src/decidim/confirm"
 import formDatePicker from "src/decidim/datepicker/form_datepicker"
 import Configuration from "src/decidim/configuration"
 import ExternalLink from "src/decidim/external_link"
@@ -79,6 +81,7 @@ import {
   Dialogs
 } from "src/decidim/a11y"
 import changeReportFormBehavior from "src/decidim/change_report_form_behavior"
+import setOnboardingAction from "src/decidim/onboarding_pending_action"
 
 // bad practice: window namespace should avoid be populated as much as possible
 // rails-translations could be referenced through a single Decidim.I18n object
@@ -90,6 +93,7 @@ window.Decidim = window.Decidim || {
   addInputEmoji,
   EmojiButton,
   Dialogs,
+  ConfirmDialog,
   announceForScreenReader
 };
 
@@ -122,6 +126,8 @@ window.initFoundation = (element) => {
   });
 };
 
+// Confirm initialization needs to happen before Rails.start()
+initializeConfirm();
 Rails.start()
 
 /**
@@ -199,6 +205,10 @@ const initializer = (element = document) => {
   element.querySelectorAll("[data-remote-tooltip]").forEach((elem) => fetchRemoteTooltip(elem))
 
   element.querySelectorAll(".new_report").forEach((elem) => changeReportFormBehavior(elem))
+
+  element.querySelectorAll("[data-onboarding-action]").forEach((elem) => setOnboardingAction(elem))
+
+  document.dispatchEvent(new CustomEvent("decidim:loaded", { detail: { element } }));
 }
 
 // If no jQuery is used the Tribute feature used in comments to autocomplete

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

@@ -0,0 +1,24 @@
+import Cookies from "js-cookie";
+
+const ONBOARDING_COOKIE_EXPIRY = 365;
+
+// The same key is set in the Decidim::OnboardingManager class to retrieve the data from the cookie and store it in the extended data attribute
+const DATA_KEY = "onboarding";
+
+/**
+ * @param {DOMElement} element Element which provides the information for cookie about action to perform.
+ * @return {Void} Nothing
+ */
+export default function setOnboardingAction(element) {
+  // the dialog-open data attribute is stealing the click event
+  element.addEventListener("mousedown", () => {
+    const action = element.dataset.onboardingAction;
+    const model = element.dataset.onboardingModel;
+    const permissionsHolder = element.dataset.onboardingPermissionsHolder;
+    const redirectPath = element.dataset.onboardingRedirectPath;
+
+    Cookies.set(DATA_KEY, JSON.stringify({ action, model, permissionsHolder, redirectPath }), {
+      expires: ONBOARDING_COOKIE_EXPIRY
+    });
+  });
+}

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

@@ -127,7 +127,7 @@ $(() => {
     setTimer(timeoutInSeconds);
   });
 
-  window.addEventListener("beforeunload", () => {
+  window.addEventListener("pagehide", () => {
     clearInterval(exitInterval);
     return;
   });

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

@@ -0,0 +1,29 @@
+// This script add margin to the footer when the sticky CTA Buttons are shown on mobile devices,
+// so the footer is always visible.
+//
+// The sticky buttons show some of the main Call to Actions (CTAs) so that they remain accessible on the
+// screen as the participant scrolls through the detailed view of the Meetings, Proposals, Surveys, and Budgets
+// components.
+//
+
+const footer = document.querySelector("footer");
+const stickyButtons = document.querySelector("[data-sticky-buttons]");
+
+const adjustCtasButtons = () => {
+  if (!stickyButtons) {
+    return;
+  }
+
+  const marginBottom = stickyButtons.offsetHeight;
+  footer.style.marginBottom = `${marginBottom}px`;
+};
+
+if (stickyButtons) {
+  document.addEventListener("scroll", () => {
+    adjustCtasButtons();
+  });
+
+  document.addEventListener("on:toggle", () => {
+    adjustCtasButtons();
+  });
+}

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