decidim-decidim_awesome 0.8.0 → 0.12.0

data/app/packs/src/decidim/decidim_awesome/admin/auto_edit.js

@@ -1,82 +1,109 @@
-$(() => {
+document.addEventListener("DOMContentLoaded", () => {
   let CustomFieldsBuilders = window.CustomFieldsBuilders || [];
 
-  $("body").on("click", "a.awesome-auto-edit", (e) => {
-    e.preventDefault();
-    const $link = $(e.currentTarget);
-    const scope = $link.data("scope");
-    const $target = $(`span.awesome-auto-edit[data-scope="${scope}"]`);
-    const $constraints = $(`.constraints-editor[data-key="${scope}"]`);
-    if ($target.length == 0) {
-      return;
-    }
+  document.querySelectorAll("a.awesome-auto-edit").forEach((link) => {
+    link.addEventListener("click", (ev) => {
+      ev.preventDefault();
+      const scope = link.dataset.scope;
+      const target = document.querySelector(`span.awesome-auto-edit[data-scope="${scope}"]`);
+      const constraints = document.querySelector(`.constraints-editor[data-key="${scope}"]`);
 
-    const key = $target.data("key");
-    const attribute = $target.data("var");
-    const $hidden = $(`[name="config[${attribute}][${key}]"]`);
-    const $multiple = $(`[name="config[${attribute}][${key}][]"]`);
-    const $container = $(`.${attribute}_container[data-key="${key}"]`);
-    const $delete = $(".delete-box", $container);
-
-    const rebuildLabel = (text, withScope) => {
-      $target.text(text);
-      $target.attr("data-key", text);
-      $target.data("key", text);
-      if (withScope) {
-        $target.attr("data-scope", withScope);
-        $target.data("scope", withScope);
-        $link.attr("data-scope", withScope);
-        $link.data("scope", withScope);
+      if (!target) {
+        return;
       }
-      $link.show();
-    };
 
-    const rebuildHmtl = (result) => {
-      rebuildLabel(result.key, result.scope);
-      $constraints.replaceWith(result.html);
-      // update hidden input if exists
-      $hidden.attr("name", `config[${attribute}][${result.key}]`);
-      $multiple.attr("name", `config[${attribute}][${result.key}][]`);
-      $container.data("key", result.key);
-      $container.attr("data-key", result.key);
-      $delete.attr("href", $delete.attr("href").replace(`key=${key}`, `key=${result.key}`))
-      CustomFieldsBuilders.forEach((builder) => {
-        if (builder.key == key) {
-          builder.key = result.key;
+      const key = target.dataset.key;
+      const attribute = target.dataset.var;
+      const inputField = document.querySelector(`[name="config[${attribute}][${key}]"]`);
+      const multipleField = document.querySelector(`[name="config[${attribute}][${key}][]"]`);
+      const container = document.querySelector(`.js-box-container[data-key="${key}"]`);
+      const deleteBox = container.querySelector(".awesome-auto-delete");
+
+      const rebuildLabel = (text, withScope) => {
+        target.innerText = text;
+        target.dataset.key = text;
+        if (withScope) {
+          target.dataset.scope = withScope;
+          link.dataset.scope = withScope;
         }
-      });
-    };
+        link.style.display = "";
+      };
+
+      const rebuildHtml = (result) => {
+        rebuildLabel(result.key, result.scope);
+        constraints.outerHTML = result.html;
+        if (inputField) {
+          inputField.setAttribute("name", `config[${attribute}][${result.key}]`);
+        }
+        if (multipleField) {
+          multipleField.setAttribute("name", `config[${attribute}][${result.key}][]`);
+        }
+        container.dataset.key = result.key;
+        container.setAttribute("data-key", result.key);
+        deleteBox.setAttribute("href", deleteBox.getAttribute("href").replace(`key=${key}`, `key=${result.key}`));
+        CustomFieldsBuilders.forEach((builder) => {
+          if (builder.key === key) {
+            builder.key = result.key;
+          }
+        });
+        // Reinitialize Decidim DOM events
+        // console.log("Reinitializing Decidim DOM events", "constraints", constraints, "container", container);
+        // Remove existing dialogs
+        Reflect.deleteProperty(window.Decidim.currentDialogs, `edit-modal-${scope}`);
+        Reflect.deleteProperty(window.Decidim.currentDialogs, `new-modal-${scope}`);
+        const editModal = document.getElementById(`edit-modal-${result.scope}`);
+        const newModal = document.getElementById(`new-modal-${result.scope}`);
+        if (container) {
+          // reloads dialogs (modals)
+          document.dispatchEvent(new CustomEvent("ajax:loaded", { detail: container }));
+        }
+        // Rebuild the manual handling of remote modals
+        document.dispatchEvent(new CustomEvent("ajax:loaded:modals", { detail: [editModal, newModal] }));
+      };
 
-    $target.html(`<input class="awesome-auto-edit" data-scope="${scope}" type="text" value="${key}">`);
-    const $input = $(`input.awesome-auto-edit[data-scope="${scope}"]`);
-    $link.hide();
-    $input.select();
-    $input.on("keypress", (evt) => {
-      if (evt.code == "Enter" || evt.code == "13" || evt.code == "10") {
-        evt.preventDefault();
-        $.ajax(
-          {
-            type: "POST",
-            url: DecidimAwesome.rename_scope_label_path,
-            dataType: "json",
+      target.innerHTML = `<input class="awesome-auto-edit" data-scope="${scope}" type="text" size="${key.length}" value="${key}">`;
+      const input = target.querySelector(`input.awesome-auto-edit[data-scope="${scope}"]`);
+      link.style.display = "none";
+      input.focus();
+      let config = {};
+      config[attribute] = true;
+      let token = document.querySelector('meta[name="csrf-token"]');
+      input.addEventListener("keypress", (evt) => {
+        if (evt.key === "Enter" || evt.keyCode === 13 || evt.keyCode ===  10) {
+          if (key === input.value) {
+            rebuildLabel(key);
+            return;
+          }
+          // console.log("Saving key", key, "to", input.value, "with scope", scope);
+          evt.preventDefault();
+          fetch(window.DecidimAwesome.renameScopeLabelPath, {
+            method: "POST",
             headers: {
-              "X-CSRF-Token": $("meta[name=csrf-token]").attr("content")
+              "Accept": "application/json, text/plain, */*",
+              "Content-Type": "application/json",
+              "X-CSRF-Token": token && token.getAttribute("content")
             },
-            data: { key: key,
-              scope: scope,
-              attribute: attribute,
-              text: $input.val()
-            }
+            body: JSON.stringify({ key: key, scope: scope, attribute: attribute, text: input.value, config: config })
           }).
-          done((result) => rebuildHmtl(result)).
-          fail((err) => {
-            console.error("Error saving key", key, "ERR:", err);
-            rebuildLabel(key);
-          });
-      }
-    });
-    $input.on("blur", () => {
-      rebuildLabel(key);
+            then((response) => {
+              if (!response.ok) {
+                throw response;
+              }
+              return response.json()
+            }).
+            then((result) => {
+              rebuildHtml(result)
+            }).
+            catch((err) => {
+              console.error("Error saving key", key, "ERR:", err);
+              rebuildLabel(key);
+            });
+        }
+      });
+
+      input.addEventListener("blur", () => {
+        rebuildLabel(key);
+      });
     });
   });
 });

data/app/packs/src/decidim/decidim_awesome/admin/check_redirections.js

@@ -1,48 +1,53 @@
-$(() => {
-  $(".check-custom-redirections").on("click", (evt) => {
-    evt.preventDefault();
-    
-    if ($(evt.target).hasClass("disabled")) {
-      return;
-    }
-    
-    $(evt.target).addClass("disabled");
-
-    const getReport = (tr, response) => {
-      const item = $(tr).data("item");
-      const $td = $(tr).find(".redirect-status");
-
-      let type = response.type;
-      let status = response.status;
-      if (response.type == "opaqueredirect") {
-        type = "redirect";
-        status = "302";
+document.addEventListener("DOMContentLoaded", () => {
+  const checkCustomRedirections = document.querySelector(".check-custom-redirections");
+
+  if (checkCustomRedirections) {
+    checkCustomRedirections.addEventListener("click", (evt) => {
+      evt.preventDefault();
+
+      if (evt.target.classList.contains("disabled")) {
+        return;
       }
 
-      if (item.active) {
-        if (type ==  "redirect") {
-          $td.addClass("success");
+      evt.target.classList.add("disabled");
+
+      const getReport = (tr, response) => {
+        const item = JSON.parse(tr.dataset.item);
+        const td = tr.querySelector(".redirect-status");
+
+        let type = response.type;
+        let status = response.status;
+        if (response.type === "opaqueredirect") {
+          type = "redirect";
+          status = "302";
+        }
+
+        if (item.active) {
+          if (type === "redirect") {
+            td.classList.add("text-success");
+          } else {
+            td.classList.add("text-alert");
+          }
         } else {
-          $td.addClass("alert");
+          td.classList.add("text-gray");
         }
-      } else {
-        $td.addClass("muted");
-      }
 
-      return `${type} (${status})`;
-    };
-
-    $("tr.custom-redirection").each((index, tr) => {
-      const $td = $(tr).find(".redirect-status");
-      $td.html('<span class="loading-spinner" />');
-      fetch($(tr).data("origin"), {method: "HEAD", redirect: "manual"}).
-        then((response) => {
-          $td.html(getReport(tr, response))
-        }).
-        catch((error) => {
-          console.error("ERROR", error)  
-          $td.removeClass("loading");
-        });
+        return `${type} (${status})`;
+      };
+
+      document.querySelectorAll("tr.custom-redirection").forEach((tr) => {
+        const td = tr.querySelector(".redirect-status");
+        td.innerHTML = '<span class="loading-spinner"></span>';
+
+        fetch(tr.dataset.origin, { method: "HEAD", redirect: "manual" }).
+          then((response) => {
+            td.innerHTML = getReport(tr, response);
+          }).
+          catch((error) => {
+            console.error("ERROR", error);
+            td.classList.remove("loading");
+          });
+      });
     });
-  });
+  }
 });

data/app/packs/src/decidim/decidim_awesome/admin/codemirror.js

@@ -1,10 +1,10 @@
 import CodeMirror from "codemirror"
 import "codemirror/mode/css/css"
 import "codemirror/keymap/sublime"
-import "stylesheets/decidim/decidim_awesome/admin/codemirror.scss";
+import "codemirror/lib/codemirror.css";
 
-$(() => {
-  $(".awesome-edit-config .scoped_styles_container textarea").each((_idx, el) => {
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll(".awesome-edit-config .scoped_styles_container textarea").forEach((el) => {
     CodeMirror.fromTextArea(el, {
       lineNumbers: true,
       mode: "css",

data/app/packs/src/decidim/decidim_awesome/admin/constraint_form_events.js

@@ -0,0 +1,115 @@
+/* eslint no-use-before-define: "off" */
+
+// This script manually handles the "edit" button from the constraints editor by loading the content into the modal after the modal (operated by Dialog) is opened.
+// We don't use the RemoteModal class because it chaches the modal content and the "fetch" operation does not specify the "no-cache" headers.
+
+const fetchConstraints = (url, callback = () => {}) => {
+  fetch(url, { cache: "no-cache" }).
+    then((res) => {
+      if (!res.ok) {
+        throw res;
+      }
+      return res.text();
+    }).
+    then((text) => {
+      callback(text);
+    }).
+    catch((err) => {
+      console.error("dialog open failed", err);
+    });
+};
+
+const renderModal = (element, html) => {
+  element.innerHTML = html;
+  bindModalEvents(element)
+};
+
+const constraintChange = (modalId, data) => {
+  const modal = window.Decidim.currentDialogs[modalId];
+  const constraintsUrl = modal.openingTrigger.dataset.constraintsUrl;
+
+  // Prepare parameters to request the modal content again, but updated based on the user selections
+  const vars = data.map((setting) => `${setting.key}=${setting.value}`);
+  const url = `${constraintsUrl}&${vars.join("&")}`;
+
+  fetchConstraints(url, (res) => renderModal(modal.dialog, res));
+};
+
+const bindModalEvents = (detail) => {
+  const div = detail.querySelector("[id^=constraint-form]");
+  const spaceManifest = div.getElementsByTagName("select")[0];
+  const spaceSlug = div.getElementsByTagName("select")[1];
+  const componentManifest = div.getElementsByTagName("select")[2];
+  const componentId = div.getElementsByTagName("select")[3];
+
+  spaceManifest.addEventListener("change", (event) => {
+    constraintChange(detail.id, [{
+      key: "participatory_space_manifest",
+      value: event.target.value
+    }])
+  });
+
+  spaceSlug.addEventListener("change", (event) => {
+    constraintChange(detail.id, [{
+      key: "participatory_space_manifest",
+      value: spaceManifest.value
+    }, {
+      key: "participatory_space_slug",
+      value: event.target.value
+    }])
+  });
+
+  // Component manfiest and component id are mutually exclusive
+  componentManifest.addEventListener("change", (event) => {
+    if (event.target.value) {
+      componentId.value = "";
+    }
+  });
+
+  componentId.addEventListener("change", (event) => {
+    if (event.target.value) {
+      componentManifest.value = "";
+    }
+  });
+};
+
+
+const initializeDialog = (dialog) => {
+  dialog.addEventListener("open.dialog", async (el) => {
+    const currentDialog = window.Decidim.currentDialogs[el.target.id];
+    const button = currentDialog && currentDialog.openingTrigger;
+    const url = button.dataset.constraintsUrl;
+    // console.log("open.dialog", el, url, "currentDialog",currentDialog);
+    fetchConstraints(url, (res) => renderModal(el.target, res));
+  });
+};
+
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll("[data-constraint][data-dialog]").forEach((dialog) => {
+    initializeDialog(dialog);
+  });
+});
+
+document.addEventListener("ajax:loaded:modals", (event) => {
+  event.detail.forEach((modal) => initializeDialog(modal));
+});
+
+// Rails AJAX events, this will update the parent page constrains
+document.body.addEventListener("ajax:error", (responseText) => {
+  // console.log("ajax:error", responseText)
+  const container = document.querySelector(`.constraints-editor[data-key="${responseText.detail[0].key}"]`);
+  const callout = container.querySelector(".flash");
+  callout.hidden = false;
+  callout.classList.add("alert");
+  callout.getElementsByTagName("p")[0].innerHTML = `${responseText.detail[0].message}: <strong>${responseText.detail[0].error}</strong>`;
+});
+
+document.body.addEventListener("ajax:success", (responseText) => {
+  // console.log("ajax:success", responseText)
+  let container = document.querySelector(`.constraints-editor[data-key="${responseText.detail[0].key}"]`);
+  const callout = container.querySelector(".flash");
+  callout.hidden = false;
+  callout.classList.add("success");
+  callout.getElementsByTagName("p")[0].innerHTML = responseText.detail[0].message;
+  container.outerHTML = responseText.detail[0].html;
+});

data/app/packs/src/decidim/decidim_awesome/admin/custom_fields_builder.js

@@ -1,21 +1,26 @@
-require("formBuilder/dist/form-builder.min.js")
+import "formBuilder/dist/form-builder.min.js";
 import "src/decidim/decidim_awesome/forms/rich_text_plugin"
+// formBuilder uses jquery-ui-sortable which is a very dirty npm package with no neat source code available, and causes problems with the webpacker configuration of Decidim.
+// For the moment, we'll remove the sortable functionality with a dummy jQuery plugin until we find another sortable plugin (or keep it disabled for good)
+jQuery.fn.sortable = () => {}
 
 window.CustomFieldsBuilders = window.CustomFieldsBuilders || [];
 
 $(() => {
   $(".awesome-edit-config .proposal_custom_fields_editor").each((_idx, el) => {
     const key = $(el).closest(".proposal_custom_fields_container").data("key");
+    const configVar = $(el).closest(".proposal_custom_fields_container").data("var");
     // DOCS: https://formbuilder.online/docs
     window.CustomFieldsBuilders.push({
       el: el,
       key: key,
+      var: configVar,
       config: {
         i18n: {
           locale: "en-US",
           location: "https://cdn.jsdelivr.net/npm/formbuilder-languages@1.1.0/"
         },
-        formData: $(`input[name="config[proposal_custom_fields][${key}]"]`).val(),
+        formData: $(`input[name="config[${configVar}][${key}]"]`).val(),
         disableFields: ["button", "file"],
         disabledActionButtons: ["save", "data", "clear"],
         disabledAttrs: [
@@ -36,7 +41,8 @@ $(() => {
           "paragraph"
         ],
         disabledSubtypes: {
-          text: ["color"], // default color as it generate hashtags in decidim (TODO: fix hashtag generator with this)
+          // default color as it generate hashtags in decidim (TODO: fix hashtag generator with this)
+          text: ["color"],
           // disable default wysiwyg editors as they present problems
           textarea: ["tinymce", "quill"]
         }
@@ -45,21 +51,21 @@ $(() => {
     });
   });
 
-  $(document).on("formBuilder.create", (_event, i, list) => {
-    if (!list[i]) {
+  $(document).on("formBuilder.create", (_event, idx, list) => {
+    if (!list[idx]) {
       return;
     }
 
-    $(list[i].el).formBuilder(list[i].config).promise.then(function(res) {
-      list[i].instance = res;
+    $(list[idx].el).formBuilder(list[idx].config).promise.then(function(res) {
+      list[idx].instance = res;
       // Attach to DOM
-      list[i].el.FormBuilder = res;
+      list[idx].el.FormBuilder = res;
       // remove spinner
-      $(list[i].el).find(".loading-spinner").remove();
+      $(list[idx].el).find(".loading-spinner").remove();
       // for external use
-      $(document).trigger("formBuilder.created", [list[i]]);
-      if (i < list.length) {
-        $(document).trigger("formBuilder.create", [i + 1, list]);
+      $(document).trigger("formBuilder.created", [list[idx]]);
+      if (idx < list.length) {
+        $(document).trigger("formBuilder.create", [idx + 1, list]);
       }
     });
   });
@@ -70,8 +76,7 @@ $(() => {
 
   $("form.awesome-edit-config").on("submit", () => {
     window.CustomFieldsBuilders.forEach((builder) => {
-      $(`input[name="config[proposal_custom_fields][${builder.key}]"]`).val(builder.instance.actions.getData("json"));
+      $(`input[name="config[${builder.var}][${builder.key}]"]`).val(builder.instance.actions.getData("json"));
     });
   });
 });
-

data/app/packs/src/decidim/decidim_awesome/admin/form_exit_warn.js

@@ -1,21 +1,32 @@
-$(() => {
-  const $form = $("form.awesome-edit-config");
-  if ($form.length > 0) {
-    $form.find("input, textarea, select").on("change", () => {
-      $form.data("changed", true);
+document.addEventListener("DOMContentLoaded", () => {
+  const form = document.querySelector("form.awesome-edit-config");
+  if (form) {
+    form.querySelectorAll("input, textarea, select").forEach((el) => {
+      el.addEventListener("change", () => {
+        form.dataset.changed = true;
+      });
     });
 
-    const safePath = $form.data("safe-path").split("?")[0];
-    $(document).on("click", "a", (event) => {
-      window.exitUrl = event.currentTarget.href;
+    const safePath = form.dataset.safePath.split("?")[0];
+    document.querySelectorAll("a").forEach((el) => {
+      el.addEventListener("click", () => {
+        window.exitUrl = el.href;
+      });
     });
-    $(document).on("submit", "form", (event) => {
-      window.exitUrl = event.currentTarget.action;
+    document.querySelectorAll("form").forEach((el) => {
+      el.addEventListener("submit", () => {
+        window.exitUrl = el.action;
+      });
+    });
+    document.querySelectorAll('[type="submit"]').forEach((el) => {
+      el.addEventListener("click", () => {
+        window.exitUrl = el.form.action;
+      });
     });
 
     window.addEventListener("beforeunload", (event) => {
       const exitUrl = window.exitUrl;
-      const hasChanged = $form.data("changed");
+      const hasChanged = form.dataset.changed;
       window.exitUrl = null;
 
       if (!hasChanged || (exitUrl && exitUrl.includes(safePath))) {
@@ -23,6 +34,7 @@ $(() => {
       }
 
       event.returnValue = true;
+      return true;
     });
   }
 });

data/app/packs/src/decidim/decidim_awesome/admin/proposal_sortings.js

@@ -0,0 +1,26 @@
+/* eslint-disable no-new */
+
+import TomSelect from "tom-select/dist/cjs/tom-select.popular";
+
+document.addEventListener("DOMContentLoaded", () => {
+  const selectContainer = document.getElementById("config_additional_proposal_sortings");
+
+  if (!selectContainer) {
+    return;
+  }
+
+  new TomSelect(selectContainer, {
+    plugins: ["remove_button", "dropdown_input"],
+    create: false,
+    render: {
+      option: function (data, escape) {
+        return `<div>${escape(data.text)}</div>`;
+      }
+    }
+  });
+  
+  document.getElementById("additional_proposal_sortings-enable-all").addEventListener("click", (evt) => {
+    evt.preventDefault();
+    selectContainer.tomselect.setValue(Array.from(document.getElementById("config_additional_proposal_sortings").children).map((el) => el.value))
+  });
+});

data/app/packs/src/decidim/decidim_awesome/admin/tabs_change.js

@@ -0,0 +1,31 @@
+/**
+ * When switching tabs in i18n fields, autofocus on the markdown if exists
+ */
+$(() => {
+  const reloadCustomFields = ($input) => {
+    // saves current data to the hidden field for the lang
+    window.DecidimAwesome.CustomFieldsRenderer.storeData();
+    // init the current language
+    window.DecidimAwesome.CustomFieldsRenderer.init($input);
+  };
+
+  // Event launched by foundation using jQuery (still used in the admin in v0.28, probably removed in the future)
+  $("[data-tabs]").on("change.zf.tabs", (event) => {
+    const $container = $(event.target).closest(".label--tabs").next(".tabs-content").find(".tabs-panel.is-active");
+    // fix custom fields if present
+    const $input = $container.find(".proposal_custom_field:first");
+    if ($input.length > 0) {
+      reloadCustomFields($input);
+    }
+  });
+
+  // if more than 3 languages, a select is used
+  $("#proposal-body-tabs").on("change", (event) => {
+    const $container = $($(event.target).val());
+    // fix custom fields if present
+    const $input = $container.find(".proposal_custom_field:first");
+    if ($input.length > 0) {
+      reloadCustomFields($input);
+    }
+  });
+});

data/app/packs/src/decidim/decidim_awesome/admin/user_picker.js

@@ -1,24 +1,38 @@
-import "select2"
-import "stylesheets/decidim/decidim_awesome/admin/user_picker.scss"
+import TomSelect from "tom-select/dist/cjs/tom-select.popular";
 
-$(() => {
-  $("select.multiusers-select").each(function() {
-    const url = $(this).attr("data-url");
-    $(this).select2({
-      ajax: {
-        url: url,
-        delay: 100,
-        dataType: "json",
-        processResults: (data) => {
-          return {
-            results: data
-          }
-        }
+document.addEventListener("DOMContentLoaded", () => {
+  const tagContainers = document.querySelectorAll(".multiusers-select");
+  const config = (element) => ({
+    plugins: ["remove_button", "dropdown_input"],
+    create: false,
+    render: {
+      option: function (data, escape) {
+        return `<div>${escape(data.text)}</div>`;
       },
-      escapeMarkup: (markup) => markup,
-      templateSelection: (item) => `${item.text}`,
-      minimumInputLength: 1,
-      theme: "foundation"
-    });
+      item: function (data, escape) {
+        return Boolean(data.is_admin) || data.isAdmin === "true"
+          ? `<div class="is-admin">${escape(data.text)}</div>`
+          : `<div>${escape(data.text)}</div>`;
+      }
+    },
+    shouldLoad: function (query) {
+      return query.length > 1;
+    },
+    load: function (query, callback) {
+      const { url } = element.dataset;
+      const join = url.includes("?")
+        ? "&"
+        : "?";
+      const params = new URLSearchParams({
+        term: query
+      });
+
+      fetch(`${url}${join}${params}`).
+        then((response) => response.json()).
+        then((json) => callback(json)).
+        catch(() => callback());
+    }
   });
+
+  tagContainers.forEach((container) => new TomSelect(container, config(container)));
 });