decidim-decidim_awesome 0.10.2 → 0.11.2

data/app/packs/src/decidim/decidim_awesome/forms/custom_fields_renderer.js

@@ -1,9 +1,8 @@
-require("formBuilder/dist/form-render.min.js")
+import "formBuilder/dist/form-render.min.js";
 import "src/decidim/decidim_awesome/forms/rich_text_plugin"
 
 export default class CustomFieldsRenderer { // eslint-disable-line no-unused-vars
-  constructor(containerSelector) {
-    this.containerSelector = containerSelector || ".proposal_custom_field:last";
+  constructor() {
     this.lang = this.getLang(window.DecidimAwesome.currentLocale);
   }
 
@@ -56,13 +55,13 @@ export default class CustomFieldsRenderer { // eslint-disable-line no-unused-var
   */
   dataToXML(data) {
     const $dl = $("<dl/>");
-    let $dd = null, 
-        $div = null, 
-        $dt = null, 
-        datum = null, 
-        key = null, 
-        label = null, 
-        text = null, 
+    let $dd = null,
+        $div = null,
+        $dt = null,
+        datum = null,
+        key = null,
+        label = null,
+        text = null,
         val = null;
     $dl.attr("class", "decidim_awesome-custom_fields");
     $dl.attr("data-generator", "decidim_awesome");
@@ -113,21 +112,23 @@ export default class CustomFieldsRenderer { // eslint-disable-line no-unused-var
         $dl.append($dd);
       }
     }
+    // console.log("dataToXML", $dl[0].outerHTML);
     return `<xml>${$dl[0].outerHTML}</xml>`;
   }
 
   fixBuggyFields() {
-    if (!this.$container) {
+    if (!this.$element) {
       return false;
     }
 
     /**
     * Hack to fix required checkboxes being reset
-    * Issue: https://github.com/Platoniq/decidim-module-decidim_awesome/issues/82
+    * Issue: https://github.com/decidim-ice/decidim-module-decidim_awesome/issues/82
     */
-    this.$container.find(".formbuilder-checkbox-group").each((_key, group) => {
+    this.$element.find(".formbuilder-checkbox-group").each((_key, group) => {
       const inputs = $(".formbuilder-checkbox input", group);
-      const data = this.spec.find((obj) => obj.type === "checkbox-group");
+      const $label = $(group).find("label");
+      const data = this.spec.find((obj) => obj.type === "checkbox-group" && obj.name === $label.attr("for"));
       let values = data.userData;
       if (!inputs.length || !data || !values) {
         return;
@@ -164,9 +165,9 @@ export default class CustomFieldsRenderer { // eslint-disable-line no-unused-var
 
     /**
     * Hack to fix required radio buttons "other" value
-    * Issue: https://github.com/Platoniq/decidim-module-decidim_awesome/issues/133
+    * Issue: https://github.com/decidim-ice/decidim-module-decidim_awesome/issues/133
     */
-    this.$container.find(".formbuilder-radio input.other-val").on("input", (input) => {
+    this.$element.find(".formbuilder-radio input.other-val").on("input", (input) => {
       const $input = $(input.currentTarget);
       const $group = $input.closest(".formbuilder-radio-group");
       $group.find("input").each((_key, radio) => {
@@ -181,10 +182,10 @@ export default class CustomFieldsRenderer { // eslint-disable-line no-unused-var
 
   // Saves xml to the hidden input
   storeData() {
-    if (!this.$container) {
+    if (!this.$element) {
       return false;
     }
-    const $form = this.$container.closest("form");
+    const $form = this.$element.closest("form");
     const $body = $form.find(`input[name="${this.$element.data("name")}"]`);
     if ($body.length && this.instance) {
       this.spec = this.instance.userData;
@@ -198,18 +199,21 @@ export default class CustomFieldsRenderer { // eslint-disable-line no-unused-var
   init($element) {
     this.$element = $element;
     this.spec = $element.data("spec");
-    if (!this.$container) {
-      this.$container = $(this.containerSelector);
-    }
     // console.log("init", $element, "this", this)
-    // always use the last field (in case of multilang tabs we only render one form due a limitation of the library to handle several instances)
-    this.instance = this.$container.formRender({
+    // in case of multilang tabs we only render one form due a limitation in the library for handling several instances
+    this.instance = $element.formRender({
       i18n: {
         locale: this.lang,
-        location: "https://cdn.jsdelivr.net/npm/formbuilder-languages@1.1.0/"
+        location: window.DecidimAwesome.formBuilderLangsLocation
       },
       formData: this.spec,
-      render: true
+      render: true,
+      disableInjectedStyle: true,
+      controlConfig: {
+        "textarea.richtext": {
+          editorOptions: $element.data("editorOptions")
+        }
+      }
     });
     this.fixBuggyFields();
   }

data/app/packs/src/decidim/decidim_awesome/forms/rich_text_plugin.js

@@ -4,7 +4,8 @@
  *
  * Registers Decidim Richtext as a subtype for the textarea control
  */
-import {createQuillEditor} from "src/decidim/decidim_awesome/editors/editor"
+
+import createEditor from "src/decidim/decidim_awesome/editor";
 
 // configure the class for runtime loading
 if (!window.fbControls) {
@@ -40,7 +41,7 @@ window.fbControls.push(function(controlClass, allControlClasses) {
      * @return {void}
      */
     configure() {
-      window.fbEditors.richtext = {};
+      window.fbEditors.tiptap = {};
     }
 
     /**
@@ -60,19 +61,24 @@ window.fbControls.push(function(controlClass, allControlClasses) {
         value: (userData && userData[0]) || value || ""
       });
 
-      const css = this.markup(
-        "style",
-        `
-        #${attrs.id} { height: auto; min-height: 6rem; padding-left: 0; padding-right: 0; }
-        #${attrs.id} div.ql-container { height: ${attrs.rows || 1}rem; }
-        #${attrs.id} p.help-text { margin-top: .5rem; }
-        `,
-        { type: "text/css" }
-      );
-      const wrapperAttrs = {...attrs, "data-toolbar": "full" };
-      // console.log("build value", value, "userData", userData, "attrs", attrs, attrs.id, "wrapperAttrs", wrapperAttrs);
-      this.wrapper = this.markup("div", null, wrapperAttrs);
-      return this.markup("div", [css, this.input, this.wrapper], attrs);
+      this.editorInput = this.markup("div", null, {
+        style: "height: 25rem",
+        class: "editor-input"
+      });
+
+      const options = this.classConfig && this.classConfig.editorOptions || {"contentTypes": {image: ["image/jpeg", "image/png"]}};
+      const wrapperAttrs = {
+        "id": attrs.id, 
+        "name": attrs.name, 
+        "type": attrs.type, 
+        "className": "editor-container", 
+        "data-toolbar": "basic", 
+        "data-disabled": "false", 
+        "data-options": JSON.stringify(options)
+      };
+      // console.log("build value", value, "userData", userData, "attrs", attrs, attrs.id, "wrapperAttrs", wrapperAttrs,"this",this);
+      this.wrapper = this.markup("div", this.editorInput, wrapperAttrs);
+      return this.markup("div", [this.input, this.wrapper], {style: "margin-top: 1rem"});
     }
 
     /**
@@ -81,26 +87,15 @@ window.fbControls.push(function(controlClass, allControlClasses) {
      * @return {Object} evt - event
      */
     onRender(evt) {
-      // const value = this.config.value || '';
-      if (window.fbEditors.richtext[this.id]) {
-        // console.log("todo destroy", window.fbEditors.richtext[this.id]);
-        // window.fbEditors.richtext[this.id].richtext('destroy')
+      if (window.fbEditors.tiptap[this.id]) {
+        console.log("destroying editor", window.fbEditors.tiptap[this.id]);
+        window.fbEditors.tiptap[this.id].instance.destroy();
       }
 
-      window.fbEditors.quill[this.id] = {};
-      const editor = window.fbEditors.quill[this.id];
-      // createQuillEditor does all the job to update the hidden input wrapper
-      editor.instance = createQuillEditor(this.wrapper);
-      // editor.data = new Delta();
-      // if (value) {
-      //   editor.instance.setContents(window.JSON.parse(this.parsedHtml(value)));
-      // }
-      // editor.instance.on('text-change', function(delta) {
-      //   console.log("text-change", "delta", delta, "editor", editor);
-      // //   // editor.data = editor.data.compose(delta);
-      // });
+      window.fbEditors.tiptap[this.id] = {};
+      const editor = window.fbEditors.tiptap[this.id];
+      editor.instance = createEditor(this.wrapper);
 
-      // console.log("render! editor", editor, "this", this, "value", value);
       return evt;
     }
   }

data/app/packs/src/decidim/decidim_awesome/proposals/custom_fields.js

@@ -1,22 +1,38 @@
 import CustomFieldsRenderer from "src/decidim/decidim_awesome/forms/custom_fields_renderer"
 
-window.DecidimAwesome.CustomFieldsRenderer = window.DecidimAwesome.CustomFieldsRenderer || new CustomFieldsRenderer();
-
 $(() => {
+  window.DecidimAwesome.CustomFieldsRenderer = window.DecidimAwesome.CustomFieldsRenderer || new CustomFieldsRenderer();
+  window.DecidimAwesome.PrivateCustomFieldsRenderer = window.DecidimAwesome.PrivateCustomFieldsRenderer || new CustomFieldsRenderer();
+
   // use admin multilang specs if exists
-  let $el = $("proposal_custom_field:first", ".tabs-title.is-active");
-  if (!$el.length) {
-    $el = $(".proposal_custom_field:first");
+  const $public = $(".proposal_custom_field:first");
+  const $private = $(".proposal_custom_field.proposal_custom_field--private_body:first");
+  let $form = null;
+  if ($public.length) {
+    window.DecidimAwesome.CustomFieldsRenderer.init($public);
+    $form = window.DecidimAwesome.CustomFieldsRenderer.$element.closest("form");
   }
-  window.DecidimAwesome.CustomFieldsRenderer.init($el);
-
-  window.DecidimAwesome.CustomFieldsRenderer.$container.closest("form").on("submit", (evt) => {
-    if (evt.target.checkValidity()) {
-      // save current editor
-      window.DecidimAwesome.CustomFieldsRenderer.storeData();
-    } else {
-      evt.preventDefault();
-      evt.target.reportValidity();
+  if ($private.length) {
+    window.DecidimAwesome.PrivateCustomFieldsRenderer.init($private);
+    if (!$form) {
+      $form = window.DecidimAwesome.PrivateCustomFieldsRenderer.$element.closest("form");
     }
-  });
+  }
+
+  if ($form) {
+    $form.on("submit", (evt) => {
+      if (evt.target.checkValidity()) {
+        // save current editors
+        if ($public.length) {
+          window.DecidimAwesome.CustomFieldsRenderer.storeData();
+        }
+        if ($private.length) {
+          window.DecidimAwesome.PrivateCustomFieldsRenderer.storeData();
+        }
+      } else {
+        evt.preventDefault();
+        evt.target.reportValidity();
+      }
+    });
+  }
 });

data/app/packs/src/decidim/decidim_awesome/proposals/images.js

@@ -1,24 +1,30 @@
-$(() => {
+import { attach } from "inline-attacher";
+
+document.addEventListener("DOMContentLoaded", () => {
   window.DecidimAwesome = window.DecidimAwesome || {};
 
-  const token = $('meta[name="csrf-token"]').attr("content");
-  const $textarea = $("textarea#proposal_body");
-  const text = window.DecidimAwesome.texts.drag_and_drop_image;
+  const token = document.querySelector('meta[name="csrf-token"]') && document.querySelector('meta[name="csrf-token"]').getAttribute("content");
+  const textarea = document.querySelector("textarea#proposal_body");
 
-  if (!$textarea.length) {
+  if (!textarea) {
     return;
   }
 
   if (window.DecidimAwesome.allow_images_in_proposals) {
     // Add the capability to upload images only (they will be presented as links)
 
-    $textarea.after(`<p class="help-text">${text}</p>`);
-    $textarea.inlineattachment({
-      uploadUrl: window.DecidimAwesome.editor_uploader_path,
+    const span = document.createElement("span");
+    span.className = "input-character-counter__text";
+    span.innerHTML = window.DecidimAwesome.texts.dragAndDropImage;
+    textarea.parentNode.appendChild(span);
+    attach(textarea, {
+      uploadUrl: window.DecidimAwesome.editorUploaderPath,
       uploadFieldName: "image",
-      jsonFieldName: "url",
+      responseUrlKey: "url",
       progressText: "[Uploading file...]",
-      urlText: "{filename}",
+      urlText: (url, response) =>  {
+        return response.url;
+      },
       extraHeaders: { "X-CSRF-Token": token }
     });
   }

data/app/packs/src/decidim/decidim_awesome/voting/voting_cards.js

@@ -1,63 +1,72 @@
-$(() => {
-  if ($(".voting-voting_cards").length === 0 || $("#VotingCardsModalHelp").length === 0 || $(".sign-out-link").length === 0) {
+document.addEventListener("DOMContentLoaded", () => {
+  const votingCards = document.querySelector(".voting-voting_cards");
+  const modal = document.getElementById("voting-cards-modal-help");
+  const signOutLink = document.querySelector('[href="/users/sign_out"]');
+
+  if (!votingCards || !modal || !signOutLink) {
     return;
   }
 
-  const $modal = $("#VotingCardsModalHelp");
-  const $card = $modal.find(".current-choice .vote-card");
-  const $check = $("#voting_cards-skip_help");
+  const card = modal.querySelector(".current-choice .vote-card");
+  const check = document.getElementById("voting_cards-skip_help");
 
   const storage = () => {
-    return JSON.parse(localStorage.getItem("hideTreeFlagsModalHelp") || "{}")
+    return JSON.parse(localStorage.getItem("awesome_voting_cards_hide_modal") || "{}");
   };
 
   const isChecked = () => {
-    return storage()[$check.val()];
+    return storage()[check.value];
   };
 
   const saveState = (val) => {
     const show = storage();
-    show[$check.val()] = val;
-    localStorage.setItem("hideTreeFlagsModalHelp", JSON.stringify(show))
+    show[check.value] = val;
+    localStorage.setItem("awesome_voting_cards_hide_modal", JSON.stringify(show));
   };
 
   const showModal = () => {
-    if (isChecked()) {
-      return false;
-    }
-    if ($modal.is(":visible")) {
+    if (isChecked() || window.Decidim.currentDialogs[modal.id].isOpen) {
       return false;
     }
     return true;
   };
 
-  $check.on("change", () => {
-    saveState($check.is(":checked"))
-  });
+  const bindVoteActions = () => {
+    document.querySelectorAll(".awesome-voting-card .vote-action").forEach((el) => {
+      el.addEventListener("click", (evt) => {
+        if (showModal()) {
+          evt.stopPropagation();
+          evt.preventDefault();
+          check.checked = isChecked();
+          modal.action = evt.currentTarget;
+          card.classList = evt.currentTarget.classList;
+          if (evt.currentTarget.children.length > 1) {
+            card.innerHTML = `${evt.currentTarget.children[1].outerHTML}<span class="vote-label">${evt.currentTarget.children[1].children[0].textContent}</span>`;
+          } else if (card.classList.contains("button")) {
+            card.classList.remove("button");
+            card.innerHTML = `<span class="vote-label">${evt.currentTarget.title}</span>`;
+          } else {
+            card.innerHTML = `<span class="vote-label">${evt.currentTarget.textContent}</span>`;
+          }
+          window.Decidim.currentDialogs[modal.id].open();
+        } else {
+          evt.currentTarget.closest(".voting-voting_cards").classList.add("loading");
+        }
+      });
+    });
+  };
 
-  $modal.find(".vote-action").on("click", () => {
-    $modal.data("action").click();
-    $modal.foundation("close");
+  check.addEventListener("change", () => {
+    saveState(check.checked);
   });
 
-  $(".button--vote-button .voting-voting_cards").on("click", ".vote-action", (evt) => {
-    if (showModal()) {
-      evt.stopPropagation();
-      evt.preventDefault();
-      $check.prop("checked", isChecked());
-      $modal.data("action", evt.currentTarget);
-      $card[0].classList = evt.currentTarget.classList;
-      if (evt.currentTarget.children.length > 1) {
-        $card.html(`${evt.currentTarget.children[1].outerHTML}<p class="vote-label">${evt.currentTarget.children[1].children[0].textContent}</p>`);
-      } else if ($card[0].classList.contains("button")) {
-        $card[0].classList.remove("button");
-        $card.html(`<p class="vote-label">${evt.currentTarget.title}</p>`);
-      } else {
-        $card.html(`<p class="vote-label">${evt.currentTarget.textContent}</p>`);
-      }
-      $modal.foundation("open");
-    } else {
-      $(evt.currentTarget).closest(".voting-voting_cards").addClass("loading");
-    }
+  modal.querySelector(".vote-action").addEventListener("click", () => {
+    modal.action.click();
+    setTimeout(() => window.Decidim.currentDialogs[modal.id].close());
   });
+
+  bindVoteActions();
+
+  // re-bind vote actions after AJAX events (due the use of Rails helper remote=treu)
+  document.body.addEventListener("ajax:success", () => bindVoteActions());
 });

data/app/packs/stylesheets/decidim/decidim_awesome/admin/auto_edits.scss

@@ -1,16 +1,15 @@
-input.awesome-auto-edit {
-  display: inline-block;
-  width: auto;
-  margin: 0 2px;
-  padding: 1px;
-  line-height: 0;
-  height: auto;
+a.awesome-auto-edit {
+  @apply inline-block;
+}
+
+a.awesome-auto-delete {
+  @apply float-right button button__xs button__text-secondary;
+}
+
+.form-defaults input[type="text"].awesome-auto-edit {
+  @apply inline-block m-0 py-[2px] px-[4px] h-auto w-auto leading-none outline-1 text-xs;
 }
 
 span.awesome-auto-edit {
-  padding: 0 4px;
-  background-color: #f0f0f0;
-  border-radius: 5px;
-  margin: 0;
-  font-weight: 600;
+  @apply bg-background-4 px-2 rounded m-0 font-semibold;
 }

data/app/packs/stylesheets/decidim/decidim_awesome/admin/check_redirections.scss

@@ -4,6 +4,21 @@
     text-align: left !important;
   }
 
+  th a.check-custom-redirections {
+    color: white;
+  }
+
+  th a.check-custom-redirections.disabled,
+  th a.check-custom-redirections.disabled:hover {
+    color: gray;
+    border: 1px solid gray;
+    background-color: #eee;
+  }
+
+  th a.check-custom-redirections:hover {
+    text-decoration: none;
+  }
+
   td.redirect-status {
     font-family: monospace;
 

data/app/packs/stylesheets/decidim/decidim_awesome/admin/codemirror.scss

@@ -1,27 +1,39 @@
-@import "codemirror/lib/codemirror.css";
+/* Ensure the sticky save button is over codemirror */
+.item__edit-sticky {
+  z-index: 2;
+}
 
 .awesome-edit-config {
   .scoped_styles_container,
   .proposal_custom_fields_container {
+    @apply bg-background;
+
+    &.private {
+      @apply outline-2 outline-[#fca5a5] outline-dotted;
+    }
+
     .form-error {
       margin: 0;
     }
 
-    >.CodeMirror {
-      border-top-left-radius: 5px;
-      border-top-right-radius: 5px;
-      border-top: .5em solid #e0e0e0;
-      border-right: .5em solid #e0e0e0;
-      border-bottom: .5em solid #e0e0e0;
-      min-height: 6em;
+    > .CodeMirror {
+      border-radius: 4px;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      border: 5px solid #eee;
+      border-left: none;
+      min-height: 4em;
       height: auto;
-      max-height: 40em;
       resize: vertical;
       overflow: vertical !important;
+      padding: 0;
+      margin: 0;
+      width: 100%;
+      font-size: 0.9rem;
 
-      >.CodeMirror-scroll {
-        >.CodeMirror-gutters {
-          background: #e0e0e0;
+      > .CodeMirror-scroll {
+        > .CodeMirror-gutters {
+          background: #eee;
         }
       }
     }

data/app/packs/stylesheets/decidim/decidim_awesome/admin/constraints.scss

@@ -1,43 +1,59 @@
 .constraints-editor {
-  background: #f6f6f6;
-  padding: 1rem;
-  margin: -.5rem 0 2rem;
-  border-radius: 5px;
+  margin-top: 1rem;
 
-  .constraints-list {
-    padding: 0;
-    // margin:0 0 1em 0 ;
-    li {
-      margin: 0 1em 0 0;
-      padding: 0;
+  h5 {
+    font-weight: 600;
+    color: rgb(62 76 92 / var(--tw-text-opacity));
+    font-size: 14px;
+    line-height: 18px;
+  }
+
+  .label {
+    font-weight: normal;
+    font-size: 0.8rem;
+    padding: 1px 5px;
+
+    &.participatory_space_manifest {
+      background-color: #f7b230;
+      color: #000;
     }
 
-    .label {
-      &.participatory_space_manifest {
-        background-color: #f7b230;
-      }
+    &.participatory_space_slug {
+      background-color: #19b380;
+      color: #fff;
+    }
 
-      &.participatory_space_slug {
-        background-color: #19b380;
-      }
+    &.component_manifest {
+      background-color: #b31919;
+      color: #fff;
+    }
 
-      &.component_manifest {
-        background-color: #b31919;
-      }
+    &.component_id {
+      background-color: #ee449c;
+      color: #fff;
+    }
 
-      &.component_id {
-        background-color: #ee449c;
+    &.constraint {
+      &-none {
+        background-color: #ff3000;
+        color: #fff;
       }
+    }
+  }
 
-      &.constraint {
-        &-none {
-          background-color: #ff3000;
-        }
-      }
+  .constraints-list {
+    margin: 16px 20px;
+    padding: 0 20px 14px 33px;
+    list-style-type: disc;
+
+    .button__xs {
+      padding: 1px 5px;
+      font-size: 0.8rem;
     }
 
-    a {
-      margin-left: 1rem;
+    li {
+      margin: 0 1em 0 0;
+      padding: 0;
     }
 
     &.inactive {
@@ -46,4 +62,8 @@
       }
     }
   }
+
+  .flash[hidden] {
+    display: none;
+  }
 }