decidim-decidim_awesome 0.8.0 → 0.12.0

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

@@ -1,10 +1,9 @@
-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(container_selector) {
-    this.container_selector = container_selector || ".proposal_custom_field:last";
-    this.lang = this.getLang($("html").attr("lang"));
+  constructor() {
+    this.lang = this.getLang(window.DecidimAwesome.currentLocale);
   }
 
   getLang(lang) {
@@ -56,14 +55,21 @@ export default class CustomFieldsRenderer { // eslint-disable-line no-unused-var
   */
   dataToXML(data) {
     const $dl = $("<dl/>");
-    let $dd, $div, $dt, key, l, label, text, val;
+    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");
     $dl.attr("data-version", window.DecidimAwesome.version);
-    for (key in data) {
+    for (key in data) { // eslint-disable-line guard-for-in
       // console.log("get the data!", key, data[key]);
       // Richtext plugin does not saves userdata, so we get it from the hidden input
-      if (data[key].type == "textarea" && data[key].subtype == "richtext") {
+      if (data[key].type === "textarea" && data[key].subtype === "richtext") {
         data[key].userData = [$(`#${data[key].name}-input`).val()];
       }
       if (data[key].userData && data[key].userData.length) {
@@ -72,25 +78,25 @@ export default class CustomFieldsRenderer { // eslint-disable-line no-unused-var
         $dt.attr("name", data[key].name);
         $dd = $("<dd/>");
         // console.log("data for", key, data[key].name, data[key])
-        for (val in data[key].userData) {
+        for (val in data[key].userData) { // eslint-disable-line guard-for-in
           $div = $("<div/>");
           label = data[key].userData[val];
           text = null;
           if (data[key].values) {
-            l = data[key].values.find((v) => v.value == label);
-            if (l) {
+            datum = data[key].values.find((obj) => obj.value === label); // eslint-disable-line no-loop-func
+            if (datum) { // eslint-disable-line max-depth
               text = label;
-              label = l.label;
+              label = datum.label;
             }
-          } else if (data[key].type == "date" && label) {
-            l = new Date(label).toLocaleDateString();
-            if (l) {
+          } else if (data[key].type === "date" && label) {
+            datum = new Date(label).toLocaleDateString();
+            if (datum) { // eslint-disable-line max-depth
               text = label;
-              label = l;
+              label = datum;
             }
           }
           // console.log("userData", text, "label", label, 'key', key, 'data', data)
-          if (data[key].type == "textarea" && data[key].subtype == "richtext") {
+          if (data[key].type === "textarea" && data[key].subtype === "richtext") {
             $div.html(label);
           } else {
             $div.text(label);
@@ -106,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((a) => a.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;
@@ -138,28 +146,28 @@ export default class CustomFieldsRenderer { // eslint-disable-line no-unused-var
       });
 
       // Fill "other" option
-      const other_option = $(".other-option", inputs.parent())[0];
-      const other_val = $(".other-val", inputs.parent())[0];
-      const other_text = values.join(" ");
+      const otherOption = $(".other-option", inputs.parent())[0];
+      const otherVal = $(".other-val", inputs.parent())[0];
+      const otherText = values.join(" ");
 
-      if (other_option) {
-        if (other_text) {
-          other_option.checked = true;
-          other_option.value = other_text;
-          other_val.value = other_text;
+      if (otherOption) {
+        if (otherText) {
+          otherOption.checked = true;
+          otherOption.value = otherText;
+          otherVal.value = otherText;
         } else {
-          other_option.checked = false;
-          other_option.value = "";
-          other_val.value = "";
+          otherOption.checked = false;
+          otherOption.value = "";
+          otherVal.value = "";
         }
       }
     });
 
     /**
     * 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) => {
@@ -169,14 +177,15 @@ export default class CustomFieldsRenderer { // eslint-disable-line no-unused-var
         }
       });
     });
+    return this;
   }
 
   // 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;
@@ -184,23 +193,27 @@ export default class CustomFieldsRenderer { // eslint-disable-line no-unused-var
       this.$element.data("spec", this.spec);
     }
     // console.log("storeData spec", this.spec, "$body", $body,"$form",$form,"this",this);
+    return this;
   }
 
   init($element) {
     this.$element = $element;
     this.spec = $element.data("spec");
-    if (!this.$container) {
-      this.$container = $(this.container_selector);
-    }
     // 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) {
@@ -24,7 +25,7 @@ window.fbControls.push(function(controlClass, allControlClasses) {
 
     /**
      * Class configuration - return the icons & label related to this control
-     * @returndefinition object
+     * @return {JSON} definition object
      */
     static get definition() {
       return {
@@ -37,9 +38,10 @@ window.fbControls.push(function(controlClass, allControlClasses) {
 
     /**
      * configure the richtext editor requirements
+     * @return {void}
      */
     configure() {
-      window.fbEditors.richtext = {};
+      window.fbEditors.tiptap = {};
     }
 
     /**
@@ -59,45 +61,41 @@ 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" }
-      );
-      // console.log("build value", value, "userData", userData, "attrs", attrs, attrs.id);
-      this.wrapper = this.markup("div", null, attrs);
-      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"});
     }
 
     /**
      * When the element is rendered into the DOM, execute the following code to initialise it
      * @param {Object} evt - event
+     * @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();
-
 $(() => {
-  // use admin multilang specs if exists
-  let $el = $("proposal_custom_field:first", ".tabs-title.is-active");
-  $el = $el.length
-    ? $el
-    : $(".proposal_custom_field:first");
-  window.DecidimAwesome.CustomFieldsRenderer.init($el);
+  window.DecidimAwesome.CustomFieldsRenderer = window.DecidimAwesome.CustomFieldsRenderer || new CustomFieldsRenderer();
+  window.DecidimAwesome.PrivateCustomFieldsRenderer = window.DecidimAwesome.PrivateCustomFieldsRenderer || new CustomFieldsRenderer();
 
-  window.DecidimAwesome.CustomFieldsRenderer.$container.closest("form").on("submit", (e) => {
-    if (e.target.checkValidity()) {
-      // save current editor
-      window.DecidimAwesome.CustomFieldsRenderer.storeData();
-    } else {
-      e.preventDefault();
-      e.target.reportValidity();
+  // use admin multilang specs if exists
+  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");
+  }
+  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 t = 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">${t}</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

@@ -0,0 +1,72 @@
+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 card = modal.querySelector(".current-choice .vote-card");
+  const check = document.getElementById("voting_cards-skip_help");
+
+  const storage = () => {
+    return JSON.parse(localStorage.getItem("awesome_voting_cards_hide_modal") || "{}");
+  };
+
+  const isChecked = () => {
+    return storage()[check.value];
+  };
+
+  const saveState = (val) => {
+    const show = storage();
+    show[check.value] = val;
+    localStorage.setItem("awesome_voting_cards_hide_modal", JSON.stringify(show));
+  };
+
+  const showModal = () => {
+    if (isChecked() || window.Decidim.currentDialogs[modal.id].isOpen) {
+      return false;
+    }
+    return true;
+  };
+
+  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");
+        }
+      });
+    });
+  };
+
+  check.addEventListener("change", () => {
+    saveState(check.checked);
+  });
+
+  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/admin_accountability.scss

@@ -0,0 +1,67 @@
+.filters__section {
+  @apply flex gap-4 items-start;
+
+  input {
+    @apply h-9;
+  }
+
+  .form-label {
+    @apply block;
+  }
+
+  .dropdown__container {
+    @apply flex flex-col items-start gap-0 py-0;
+
+    .form-label {
+      @apply block text-sm p-0;
+    }
+
+    .dropdown {
+      @apply flex items-center h-9;
+    }
+  }
+
+  .grid {
+    @apply flex gap-4 items-start;
+  }
+
+  .datepicker_field {
+    @apply flex flex-col;
+
+    .datepicker__datepicker-row {
+      @apply flex items-center gap-2 order-1;
+    }
+
+    .datepicker__help-text-container {
+      @apply order-2 w-full;
+    }
+
+    .help-text.datepicker__help-date {
+      @apply w-full;
+    }
+
+    .input-group-field {
+      @apply h-9 px-2;
+    }
+
+    .search-button-container button {
+      @apply h-9 w-9 flex items-center justify-center;
+    }
+  }
+
+  .row.column:last-child {
+    @apply flex items-center justify-center;
+  }
+
+  .search-button-container {
+    @apply flex flex-col items-start;
+
+    button {
+      @apply h-9 px-4 flex items-center justify-center;
+    }
+  }
+
+  .row.column.search-field {
+    @apply flex-grow;
+  }
+}

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