decidim-core 0.30.1 → 0.31.0.rc1

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

@@ -1,143 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import Tribute from "src/decidim/vendor/tribute"
-
-const mentionsInitializer = () => {
-  const $mentionContainer = $(".js-mentions");
-  const nodatafound = $mentionContainer.attr("data-noresults");
-
-  // The editor implements hashtags functionality by itself so it is not needed
-  // to attach tribute to the rich text editor.
-  if ($mentionContainer.parent().hasClass("editor")) {
-    return;
-  }
-
-  let noMatchTemplate = null
-  if (nodatafound) {
-    noMatchTemplate = () => `<li>${nodatafound}</li>`;
-  }
-
-  // Returns a function, that, as long as it continues to be invoked, will not
-  // be triggered. The function will be called after it stops being called for
-  // N milliseconds
-  /* eslint no-invalid-this: 0 */
-  /* eslint consistent-this: 0 */
-  /* eslint prefer-reflect: 0 */
-  const debounce = function(callback, wait) {
-    let timeout = null;
-    return (...args) => {
-      const context = this;
-      clearTimeout(timeout);
-      timeout = setTimeout(() => callback.apply(context, args), wait);
-    };
-  }
-
-  /* eslint no-use-before-define: ["error", { "variables": false }]*/
-  let remoteSearch = function(text, cb) {
-    let query = `{users(filter:{wildcard:"${text}"}){nickname,name,avatarUrl,__typename,...on UserGroup{membersCount}}}`;
-    $.post(window.Decidim.config.get("api_path"), {query: query}).
-      then((response) => {
-        let data = response.data.users || {};
-        cb(data)
-      }).fail(function() {
-        cb([])
-      }).always(() => {
-      // This function runs Tribute every single time you type something
-      // So we must evaluate DOM properties after each
-        const $parent = $(tribute.current.element).parent();
-        $parent.addClass("is-active");
-
-        // We need to move the container to the wrapper selected
-        const $tribute = $parent.find(".tribute-container");
-        // Remove the inline styles, relative to absolute positioning
-        $tribute.removeAttr("style");
-      })
-  };
-
-  // tribute.js docs - http://github.com/zurb/tribute
-  /* global Tribute*/
-  let tribute = new Tribute({
-    trigger: "@",
-    // avoid overloading the API if the user types too fast
-    values: debounce(function (text, cb) {
-      remoteSearch(text, (users) => cb(users));
-    }, 250),
-    positionMenu: true,
-    menuContainer: null,
-    allowSpaces: true,
-    menuItemLimit: 5,
-    fillAttr: "nickname",
-    selectClass: "highlight",
-    noMatchTemplate: noMatchTemplate,
-    lookup: (item) => item.nickname + item.name,
-    selectTemplate: function(item) {
-      if (typeof item === "undefined") {
-        return null;
-      }
-      return item.original.nickname;
-    },
-    menuItemTemplate: function(item) {
-      let svg = "";
-      if (window.Decidim && item.original.__typename === "UserGroup") {
-        const iconsPath =  window.Decidim.config.get("icons_path");
-
-        svg = `<span class="is-group">${item.original.membersCount}x <svg class="icon--members icon"><use href="${iconsPath}#ri-team-line"/></svg></span>`;
-      }
-      return `
-        <img src="${item.original.avatarUrl}" alt="author-avatar">
-        <strong>${item.original.nickname}</strong>
-        <small>${item.original.name}</small>
-        ${svg}
-      `;
-    }
-  });
-
-  let setupEvents = function($element) {
-    // DOM manipulation
-    $element.on("focusin", (event) => {
-      // Set the parent container relative to the current element
-      tribute.menuContainer = event.target.parentNode;
-    });
-    $element.on("focusout", (event) => {
-      let $parent = $(event.target).parent();
-
-      if ($parent.hasClass("is-active")) {
-        $parent.removeClass("is-active");
-      }
-    });
-    $element.on("input", (event) => {
-      let $parent = $(event.target).parent();
-
-      if (tribute.isActive) {
-        // We need to move the container to the wrapper selected
-        let $tribute = $(".tribute-container");
-        $tribute.appendTo($parent);
-
-        // Parent adaptation
-        $parent.addClass("is-active");
-      } else {
-        $parent.removeClass("is-active");
-      }
-    });
-  };
-
-  setupEvents($mentionContainer);
-
-  // This allows external libraries (like React) to use the component
-  // by simply firing and event targeting the element where to attach Tribute
-  $(document).on("attach-mentions-element", (event, element) => {
-    if (!element) {
-      return;
-    }
-    tribute.attach(element);
-    // Due a bug in Tribute, re-add menu to DOM if it has been removed
-    // See https://github.com/zurb/tribute/issues/140
-    if (tribute.menu && !document.body.contains(tribute.menu)) {
-      tribute.range.getDocument().body.appendChild(tribute.menu);
-    }
-    setupEvents($(element));
-  });
-
-  tribute.attach($mentionContainer);
-}
-
-$(() => mentionsInitializer());

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

@@ -1,115 +0,0 @@
-import AutoComplete from "src/decidim/autocomplete";
-import icon from "src/decidim/icon";
-
-const updateSubmitButton = ($fieldContainer, $selectedItems) => {
-  const $form = $fieldContainer.closest("form");
-  if ($form.length < 1) {
-    return;
-  }
-
-  const $submitButton = $form.find("button[type='submit']");
-  if ($selectedItems.children().length === 0) {
-    $submitButton.prop("disabled", true);
-  } else {
-    $submitButton.prop("disabled", false);
-  }
-}
-
-$(() => {
-  const $fieldContainer = $(".js-multiple-mentions");
-  if ($fieldContainer.length < 1) {
-    return;
-  }
-
-  const allMessages = window.Decidim.config.get("messages");
-  const messages = allMessages.mentionsModal || {};
-
-  const $searchInput = $("input", $fieldContainer);
-  const $selectedItems = $(`ul.${$searchInput.data().selected}`);
-  const options = $fieldContainer.data();
-  let selected = [];
-  const removeLabel = messages.removeRecipient || "Remove recipient %name%";
-
-  let emptyFocusElement = $fieldContainer[0].querySelector(".empty-list");
-  if (!emptyFocusElement) {
-    emptyFocusElement = document.createElement("div");
-    emptyFocusElement.tabIndex = "-1";
-    emptyFocusElement.className = "empty-list";
-    $selectedItems.before(emptyFocusElement);
-  }
-
-  updateSubmitButton($fieldContainer, $selectedItems);
-  const autoComplete = new AutoComplete($searchInput[0], {
-    dataMatchKeys: ["name", "nickname"],
-    dataSource: (query, callback) => {
-      $.post(window.Decidim.config.get("api_path"), {
-        "query": `
-          {
-            users(filter:{wildcard:"${query}",excludeIds:[]})
-              {
-                id,nickname,name,avatarUrl,__typename,...on UserGroup{membersCount},...on User{
-                  directMessagesEnabled
-                }
-              }
-          }`
-      }).then((response) => {
-        callback(response.data.users);
-      });
-    },
-    dataFilter: (list) => {
-      return list.filter(
-        (item) => !selected.includes(item.value.id)
-      );
-    },
-    modifyResult: (element, value) => {
-      $(element).html(`
-        <img src="${value.avatarUrl}" alt="${value.name}">
-        <span>${value.nickname}</span>
-        <small>${value.name}</small>
-      `);
-      if (value.directMessagesEnabled === "false") {
-        $(element).addClass("disabled");
-        $(element).append(`<small>${$searchInput.data().directMessagesDisabled}</small>`);
-      }
-      if (value.membersCount) {
-        $(element).append(`<small class="is-group">${value.membersCount}x ${icon("group-2-fill")}</small>`);
-      }
-    }
-  });
-
-  $searchInput.on("selection", (event) => {
-    const feedback = event.detail;
-    const selection = feedback.selection;
-    const id = selection.value.id;
-    if (selected.length >= 9 || selection.value.directMessagesEnabled === "false") {
-      return;
-    }
-
-    const label = removeLabel.replace("%name%", selection.value.name);
-    $selectedItems.append(`
-      <li tabindex="-1">
-        <input type="hidden" name="${options.name}" value="${id}">
-        <img src="${selection.value.avatarUrl}" alt="${selection.value.name}">
-        <span>${selection.value.name}</span>
-        <button type="button" data-remove="${id}" tabindex="0" aria-controls="0" aria-label="${label}">${icon("delete-bin-line")}</button>
-      </li>
-    `);
-
-    autoComplete.setInput("");
-    selected.push(id);
-    updateSubmitButton($fieldContainer, $selectedItems);
-
-    $selectedItems.find(`*[data-remove="${id}"]`).on("keypress click", (evt) => {
-      const target = evt.currentTarget.parentNode;
-      if (target.tagName === "LI") {
-        const focusElement = target.nextElementSibling || target.previousElementSibling || emptyFocusElement;
-
-        selected = selected.filter((identifier) => identifier !== id);
-        target.remove();
-
-        updateSubmitButton($fieldContainer, $selectedItems);
-        focusElement.focus();
-      }
-    })
-  })
-})

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

@@ -1,16 +0,0 @@
-/* eslint-disable camelcase */
-
-import TomSelect from "tom-select/dist/cjs/tom-select.popular";
-
-document.addEventListener("DOMContentLoaded", () => {
-  const tagContainers = document.querySelectorAll(".js-tags-container");
-  const config = {
-    plugins: ["remove_button"],
-    create: true,
-    render: {
-      no_results: null
-    }
-  };
-
-  tagContainers.forEach((container) => new TomSelect(container, config))
-});

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

@@ -1,40 +0,0 @@
-/**
- * This file handles the interactions of actions in notifications (if any)
- * @param {HTMLElement} node target node
- * @returns {void}
- */
-export default function(node = document) {
-  const actions = node.querySelectorAll("[data-notification-action]")
-  if (!actions.length) {
-    return;
-  }
-
-  const extractMessage = (detail) => {
-    return detail && detail.message || detail[0] && detail[0].message
-  };
-
-  const resolvePanel = (panel, message, klass) => {
-    panel.classList.remove("spinner-container");
-    if (message) {
-      panel.innerHTML = `<div class="callout ${klass}">${message}</div>`;
-    } else {
-      panel.innerHTML = "";
-    }
-  };
-
-  actions.forEach((action) => {
-    const panel = action.closest(".notification__snippet-actions")
-    action.addEventListener("ajax:beforeSend", () => {
-      panel.classList.add("spinner-container");
-      panel.querySelectorAll("[data-notification-action]").forEach((el) => {
-        el.disabled = true;
-      });
-    });
-    action.addEventListener("ajax:success", (event) => {
-      resolvePanel(panel, extractMessage(event.detail), "success");
-    });
-    action.addEventListener("ajax:error", (event) => {
-      resolvePanel(panel, extractMessage(event.detail) || window.Decidim.config.get("notifications").action_error, "alert");
-    });
-  });
-}

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

@@ -1,104 +0,0 @@
-import icon from "src/decidim/icon"
-
-export default class PasswordToggler {
-  constructor(password) {
-    this.password = password;
-    this.input = this.password.querySelector('input[type="password"]');
-    this.form = this.input.closest("form");
-    this.texts = {
-      showPassword: this.password.getAttribute("data-show-password") || "Show password",
-      hidePassword: this.password.getAttribute("data-hide-password") || "Hide password",
-      hiddenPassword: this.password.getAttribute("data-hidden-password") || "Your password is hidden",
-      shownPassword: this.password.getAttribute("data-shown-password") || "Your password is shown"
-    }
-    this.icons = {
-      show: icon("eye-line"),
-      hide: icon("eye-off-line")
-    }
-  }
-
-  // Call init() to hide the password confirmation and add a "view password" inline button
-  init() {
-    this.createControls();
-    this.button.addEventListener("click", (evt) => {
-      this.toggleVisibility(evt);
-    });
-    // to prevent browsers trying to use autocomplete, turn the type back to password before submitting
-    this.form.addEventListener("submit", () => {
-      this.hidePassword();
-    });
-  }
-
-  // Call destroy() to switch back to the original password box
-  destroy() {
-    this.button.removeEventListener("click");
-    this.input.removeEventListener("change");
-    this.form.removeEventListener("submit");
-    const input = this.input.detach();
-    this.inputGroup.replaceWith(input);
-  }
-
-  createControls() {
-    this.createButton();
-    this.createStatusText();
-    this.addInputGroupWrapperAsParent();
-  }
-
-  createButton() {
-    const button = document.createElement("button");
-    button.setAttribute("type", "button");
-    button.setAttribute("aria-controls", this.input.getAttribute("id"));
-    button.setAttribute("aria-label", this.texts.showPassword);
-    button.innerHTML = this.icons.show;
-    this.button = button;
-  }
-
-  createStatusText() {
-    const statusText = document.createElement("span");
-    statusText.classList.add("sr-only");
-    statusText.setAttribute("aria-live", "polite");
-    statusText.textContent = this.texts.hiddenPassword;
-    this.statusText = statusText;
-  }
-
-  addInputGroupWrapperAsParent() {
-    const inputGroupWrapper = document.createElement("div");
-    inputGroupWrapper.classList.add("input-group__password");
-
-    this.input.parentNode.replaceChild(inputGroupWrapper, this.input);
-    inputGroupWrapper.appendChild(this.input);
-    this.input.before(this.button);
-
-    const formError = this.password.querySelector(".form-error");
-    if (formError) {
-      this.input.after(formError);
-    }
-  }
-
-  toggleVisibility(evt) {
-    evt.preventDefault();
-    if (this.isText()) {
-      this.hidePassword();
-    } else {
-      this.showPassword();
-    }
-  }
-
-  showPassword() {
-    this.statusText.textContent = this.texts.shownPassword;
-    this.button.setAttribute("aria-label", this.texts.hidePassword);
-    this.button.innerHTML = this.icons.hide;
-    this.input.setAttribute("type", "text");
-  }
-
-  hidePassword() {
-    this.statusText.textContent = this.texts.hiddenPassword;
-    this.button.setAttribute("aria-label", this.texts.showPassword);
-    this.button.innerHTML = this.icons.show;
-    this.input.setAttribute("type", "password");
-  }
-
-  isText() {
-    return this.input.getAttribute("type") === "text"
-  }
-}

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

@@ -1,38 +0,0 @@
-import createTooltip from "src/decidim/tooltips"
-
-/**
- * Given the following HTML structure,
- * <span data-remote-tooltip="true" tooltip-url="some url" data-author="true">
- *   <span></span>
- * </span>
- *
- * This function will check if the HTMLElement where is attached to has a child, and will add a data tooltip attribute
- * to the respective child in order to attach the fetched HTML content fetched under a json key as the content of the
- * HTML tooltip. The DOM structure is expected to be like follows:
- *
- * <span data-remote-tooltip="true" tooltip-url="some url" data-author="true">
- *   <span data-tooltip="HTML content from json data field"></span>
- * </span>
- *
- * @param {HTMLElement} node The element holding the initialization data
- * @returns {void}
- */
-export default async function(node) {
-  const container = node.firstElementChild;
-
-  if (container) {
-    const response = await fetch(node.dataset.tooltipUrl, {
-      headers: {
-        "Content-Type": "application/json"
-      }
-    });
-    if (response.ok) {
-      const json = await response.json();
-
-      container.dataset.tooltip = json.data;
-      createTooltip(container);
-    } else {
-      console.error(response.status, response.statusText);
-    }
-  }
-}

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

@@ -1,12 +0,0 @@
-$(() => {
-  const $responsiveTabBlock = $(".responsive-tab-block");
-
-  $responsiveTabBlock.click((event) => {
-    if (event.target.closest(".is-active") !== null) {
-      event.preventDefault();
-      if (window.innerWidth <= 639) {
-        $responsiveTabBlock.toggleClass("expanded");
-      }
-    }
-  });
-});

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

@@ -1,14 +0,0 @@
-/**
- * Scroll smoothly to the last message automatically when the page is fully loaded.
- * To apply this to a page, at least one element must have the class "scroll-to-last-message".
- *
- * @param {HTMLElement} node target node
- * @returns {void}
- */
-export default function(node = document) {
-  const element = node.querySelector("[data-scroll-last-child]")
-  if (element && element.children.length) {
-    const lastChild = [...element.children].pop()
-    window.scrollTo({ top: lastChild.offsetTop, behavior: "smooth" });
-  }
-}

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

@@ -1,9 +0,0 @@
-$(() => {
-  const $wrapper = $(".slug");
-  const $input = $wrapper.find("input");
-  const $target = $wrapper.find("span.slug-url-value");
-
-  $input.on("keyup", (event) => {
-    $target.html(event.target.value);
-  });
-});

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

@@ -1,48 +0,0 @@
-// 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]");
-import { screens } from "tailwindcss/defaultTheme"
-
-/**
- * Checks if a key is in the current viewport
- *
- * @param {('sm'|'md'|'lg'|'xl'|'2xl')} key - The key to check the screen size.
- * @returns {boolean} - Returns true if the screen size corresponds with the key
- */
-const isScreenSize = (key) => {
-  return window.matchMedia(`(min-width: ${screens[key]})`).matches;
-}
-const adjustCtasButtons = () => {
-  if (!stickyButtons) {
-    return;
-  }
-
-  if (isScreenSize("md")) {
-    footer.style.marginBottom = "0px";
-    return;
-  }
-
-  const marginBottom = stickyButtons.offsetHeight;
-  footer.style.marginBottom = `${marginBottom}px`;
-};
-
-if (stickyButtons) {
-  document.addEventListener("scroll", () => {
-    adjustCtasButtons();
-  });
-
-  document.addEventListener("on:toggle", () => {
-    adjustCtasButtons();
-  });
-
-  window.addEventListener("resize", () => {
-    adjustCtasButtons();
-  });
-}

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

@@ -1,62 +0,0 @@
-// 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]");
-
-// 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
-// For instance we could have the omnipresent banner, the admin bar and the offline banner
-const fixMenuBarContainerMargin = () => {
-  if (!stickyHeader) {
-    return;
-  }
-
-  const isMaxScreenSize = (key) => {
-    return window.matchMedia(`(max-width: ${screens[key]})`).matches;
-  }
-
-  const menuBarContainer = document.querySelector("#menu-bar-container");
-  const marginTop = isMaxScreenSize("md")
-    ? stickyHeader.offsetHeight
-    : 0;
-
-  menuBarContainer.style.marginTop = `${marginTop}px`;
-}
-
-document.addEventListener("DOMContentLoaded", () => {
-  fixMenuBarContainerMargin();
-});
-
-window.addEventListener("resize", () => {
-  fixMenuBarContainerMargin();
-});
-
-if (stickyHeader) {
-  document.addEventListener("scroll", () => {
-    fixMenuBarContainerMargin();
-
-    // if a subelement is not visible it has no offsetParent
-    const header = document.getElementById("main-bar").offsetParent;
-
-    if (header && window.getComputedStyle(stickyHeader).position === "fixed") {
-      let currentScroll = window.scrollY;
-      let goingDown = prevScroll > currentScroll;
-      let change = Math.abs(prevScroll - currentScroll);
-      if (change > 5) {
-        if (goingDown || currentScroll < stickyHeader.offsetHeight) {
-          stickyHeader.style.top = 0;
-        } else {
-          stickyHeader.style.top = `-${stickyHeader.offsetHeight}px`;
-        }
-        prevScroll = currentScroll;
-      }
-    }
-  });
-};

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

@@ -1,37 +0,0 @@
-/**
- * Toggles the visibility of an HTML element (or elements),
- * when the trigger is activated.
- *
- * @param {HTMLElement} component trigger element
- * @returns {void}
- */
-export default function createToggle(component) {
-  const { toggle } = component.dataset
-
-  if (!component.id) {
-    // when component has no id, we enforce it to have one
-    component.id = `toggle-${Math.random().toString(36).substring(7)}`
-  }
-
-  component.setAttribute("aria-controls", toggle);
-  toggle.split(" ").forEach((id) => {
-    const node = document.getElementById(id)
-
-    if (node) {
-      node.setAttribute("aria-labelledby", [node.getAttribute("aria-labelledby"), component.id].filter(Boolean).join(" "))
-    }
-  })
-
-  component.addEventListener("click", () => {
-    toggle.split(" ").forEach((id) => {
-      const node = document.getElementById(id)
-
-      if (node) {
-        node.hidden = !node.hidden
-        node.setAttribute("aria-expanded", !node.hidden);
-      }
-    });
-
-    document.dispatchEvent(new Event("on:toggle"));
-  })
-}