decidim-decidim_awesome 0.6.6 → 0.8.0

data/app/packs/src/decidim/decidim_awesome/editors/editor.js

@@ -0,0 +1,190 @@
+/* eslint-disable require-jsdoc */
+
+/*
+* Since version 0.25 we follow a different strategy and opt to destroy and override completely the original editor
+* That's because editors are instantiated directly instead of creating a global function to instantiate them
+*/
+
+import lineBreakButtonHandler from "src/decidim/editor/linebreak_module"
+import InscrybMDE from "inscrybmde"
+import Europa from "europa"
+import "inline-attachment/src/inline-attachment";
+import "inline-attachment/src/codemirror-4.inline-attachment";
+import "inline-attachment/src/jquery.inline-attachment";
+import hljs from "highlight.js";
+import "highlight.js/styles/github.css";
+
+// In 0.26 these files come with Decidim in the folder src/decidim/vendor so the awesome one's could be removed
+import "src/vendor/image-resize.min"
+import "src/vendor/image-upload.min"
+
+const DecidimAwesome = window.DecidimAwesome || {};
+const quillFormats = ["bold", "italic", "link", "underline", "header", "list", "video", "image", "alt", "break", "width", "style", "code", "blockquote", "indent"];
+
+// A tricky way to destroy the quill editor
+export function destroyQuillEditor(container) {
+  if (container) {
+    const content = $(container).find(".ql-editor").html();
+    $(container).html(content);
+    $(container).siblings(".ql-toolbar").remove();
+    $(container).find("*[class*='ql-']").removeClass((index, class_name) => (class_name.match(/(^|\s)ql-\S+/g) || []).join(" "));
+    $(container).removeClass((index, class_name) => (class_name.match(/(^|\s)ql-\S+/g) || []).join(" "));
+    if ($(container).next().is("p.help-text")) {
+      $(container).next().remove();
+    }
+  }
+  else {
+    console.error(`editor [${container}] not exists`);
+  }
+}
+
+export function createQuillEditor(container) {
+  const toolbar = $(container).data("toolbar");
+  const disabled = $(container).data("disabled");
+
+  let quillToolbar = [
+    ["bold", "italic", "underline", "linebreak"],
+    [{ list: "ordered" }, { list: "bullet" }],
+    ["link", "clean"],
+    ["code", "blockquote"],
+    [{ "indent": "-1"}, { "indent": "+1" }]
+  ];
+
+  let addImage = false;
+
+  if (toolbar === "full") {
+    quillToolbar = [
+      [{ header: [2, 3, 4, 5, 6, false] }],
+      ...quillToolbar
+    ];
+    if (DecidimAwesome.allow_images_in_full_editor) {
+      quillToolbar.push(["video", "image"]);
+      addImage = true;
+    } else {
+      quillToolbar.push(["video"]);
+    }
+  } else if (toolbar === "basic") {
+    if (DecidimAwesome.allow_images_in_small_editor) {
+      quillToolbar.push(["video", "image"]);
+      addImage = true;
+    } else {
+      quillToolbar.push(["video"]);
+    }
+  } else if (DecidimAwesome.allow_images_in_small_editor) {
+    quillToolbar.push(["image"]);
+    addImage = true;
+  }
+
+  let modules = {
+    linebreak: {},
+    toolbar: {
+      container: quillToolbar,
+      handlers: {
+        "linebreak": lineBreakButtonHandler
+      }
+    }
+  };
+  const $input = $(container).siblings('input[type="hidden"]');
+  container.innerHTML = $input.val() || "";
+  const token = $('meta[name="csrf-token"]').attr("content");
+  if (addImage) {
+    modules.imageResize = {
+      modules: ["Resize", "DisplaySize"]
+    }
+    modules.imageUpload = {
+      url: $(container).data("uploadImagesPath") || DecidimAwesome.editor_uploader_path,
+      method: "POST",
+      name: "image",
+      withCredentials: false,
+      headers: { "X-CSRF-Token": token },
+      callbackOK: (serverResponse, next) => {
+        $("div.ql-toolbar").last().removeClass("editor-loading")
+        next(serverResponse.url);
+      },
+      callbackKO: (serverError) => {
+        $("div.ql-toolbar").last().removeClass("editor-loading")
+        console.error(`Image upload error: ${serverError.message}`);
+      },
+      checkBeforeSend: (file, next) => {
+        $("div.ql-toolbar").last().addClass("editor-loading")
+        next(file);
+      }
+    }
+  }
+  const quill = new Quill(container, {
+    modules: modules,
+    formats: quillFormats,
+    theme: "snow"
+  });
+
+  if (disabled) {
+    quill.disable();
+  }
+
+  quill.on("text-change", () => {
+    const text = quill.getText();
+
+    // Triggers CustomEvent with the cursor position
+    // It is required in input_mentions.js
+    let event = new CustomEvent("quill-position", {
+      detail: quill.getSelection()
+    });
+    container.dispatchEvent(event);
+
+    if (text === "\n" || text === "\n\n") {
+      $input.val("");
+    } else {
+      $input.val(quill.root.innerHTML);
+    }
+  });
+  // After editor is ready, linebreak_module deletes two extraneous new lines
+  quill.emitter.emit("editor-ready");
+
+  if (addImage) {
+    const text = $(container).data("dragAndDropHelpText") || DecidimAwesome.texts.drag_and_drop_image;
+    $(container).after(`<p class="help-text" style="margin-top:-1.5rem;">${text}</p>`);
+  }
+
+  // After editor is ready, linebreak_module deletes two extraneous new lines
+  quill.emitter.emit("editor-ready");
+
+  return quill;
+}
+
+export function createMarkdownEditor(container) {
+  const t = DecidimAwesome.texts.drag_and_drop_image;
+  const token = $('meta[name="csrf-token"]').attr("content");
+  const $input = $(container).siblings('input[type="hidden"]');
+  const $faker = $('<textarea name="faker-inscrybmde"/>');
+  const $form = $(container).closest("form");
+  const europa = new Europa();
+  $faker.val(europa.convert($input.val()));
+  $faker.insertBefore($(container));
+  $(container).hide();
+  const inscrybmde = new InscrybMDE({
+    element: $faker[0],
+    spellChecker: false,
+    renderingConfig: {
+      codeSyntaxHighlighting: true,
+      hljs: hljs
+    }
+  });
+  $faker[0].InscrybMDE = inscrybmde;
+
+  // Allow image upload
+  if (DecidimAwesome.allow_images_in_markdown_editor) {
+    $(inscrybmde.gui.statusbar).prepend(`<span class="help-text" style="float:left;margin:0;text-align:left;">${t}</span>`);
+    inlineAttachment.editors.codemirror4.attach(inscrybmde.codemirror, {
+      uploadUrl: DecidimAwesome.editor_uploader_path,
+      uploadFieldName: "image",
+      jsonFieldName: "url",
+      extraHeaders: { "X-CSRF-Token": token }
+    });
+  }
+
+  // convert to html on submit
+  $form.on("submit", () => {
+    // e.preventDefault();
+    $input.val(inscrybmde.markdown(inscrybmde.value()));
+  });
+}

data/app/packs/src/decidim/decidim_awesome/editors/tabs_focus.js

@@ -0,0 +1,22 @@
+/**
+ * When switching tabs in i18n fields, autofocus on the markdown if exists
+ */
+$(() => {
+  // Event launched by foundation
+  $("[data-tabs]").on("change.zf.tabs", (event) => {
+    const $container = $(event.target).closest(".label--tabs").next(".tabs-content").find(".tabs-panel.is-active");
+    // fix inscrybmde if present
+    let $input = $container.find('[name="faker-inscrybmde"]');
+    if ($input.length > 0) {
+      $input[0].InscrybMDE.codemirror.refresh();
+    }
+    // fix custom fields if present
+    $input = $container.find(".proposal_custom_field:first");
+    if ($input.length > 0) {
+      // saves current data to the hidden field for the lang
+      window.DecidimAwesome.CustomFieldsRenderer.storeData();
+      // init the current language
+      window.DecidimAwesome.CustomFieldsRenderer.init($input);
+    }
+  });
+});

data/app/{assets/javascripts/decidim/decidim_awesome/forms/autosave.js.es6 → packs/src/decidim/decidim_awesome/forms/autosave.js}

@@ -1,5 +1,4 @@
-// = require form-storage.js
-// = require_self
+import FormStorage from "form-storage"
 
 $(() => {
   window.DecidimAwesome = window.DecidimAwesome || {};
@@ -15,10 +14,10 @@ $(() => {
 
   const storeId = `awesome_autosave:${questionnaireId}`;
   const storeCheckboxesId = `awesome_autosave:checkboxes:${questionnaireId}`;
-  const $form = $('form.answer-questionnaire');
+  const $form = $("form.answer-questionnaire");
 
   if (!$form.length) {
-    if(window.DecidimAwesome.questionnaire_answered) {
+    if (window.DecidimAwesome.questionnaire_answered) {
       // console.log("Questionnaire already answered, remove any data saved");
       window.localStorage.removeItem(storeId);
       window.localStorage.removeItem(storeCheckboxesId);
@@ -27,21 +26,25 @@ $(() => {
     return;
   }
 
-  const store = new FormStorage(`#${$form.attr('id')}`, {
+  const store = new FormStorage(`#${$form.attr("id")}`, {
     name: storeId,
     ignores: [
       // '[type="hidden"]',
       '[name="utf8"]',
       '[name="authenticity_token"]',
-      '[disabled]',
+      "[disabled]",
       '[type="checkbox"]' // there are problems with matrix questions
-    ],
+    ]
   });
 
   const showMsg = (msg, error = false, default_time = 700) => {
-    const time = error ? 5000 : default_time;
-    const $div = $(`<div class="awesome_autosave-notice${error ? ' error' : ''}">${msg}</div>`)
-      .appendTo($form);
+    const time = error
+      ? 5000
+      : default_time;
+    const $div = $(`<div class="awesome_autosave-notice${error
+      ? " error"
+      : ""}">${msg}</div>`).
+      appendTo($form);
     setTimeout(() => {
       $div.fadeOut(500, () => {
         $div.remove();
@@ -54,7 +57,7 @@ $(() => {
     return;
   }
 
-  if(window.localStorage.getItem(storeId)) {
+  if (window.localStorage.getItem(storeId)) {
     showMsg(window.DecidimAwesome.texts.autosaved_retrieved, false, 5000);
   }
 
@@ -63,14 +66,14 @@ $(() => {
   // restore checkboxes
   try {
     let checkboxes = JSON.parse(window.localStorage.getItem(storeCheckboxesId));
-    for(let id in checkboxes) {
-      $("#" + id).prop("checked", checkboxes[id]);
+    for (let id in checkboxes) {
+      $(`#${id}`).prop("checked", checkboxes[id]);
     }
-  } catch(e){
+  } catch (e) {
     console.log("No checkboxes found");
   }
-  // fire change items
-  $form.find('input, textarea, select').change();
+  // this trigger the "change" event, it seems that it is too much
+  // $form.find('input, textarea, select').change();
 
   const save = () => {
     store.save();
@@ -84,7 +87,7 @@ $(() => {
   };
 
   // save changes when modifications
-  $form.find('input, textarea, select').on('change', () => {
+  $form.find("input, textarea, select").on("change", () => {
     save();
   });
 });

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

@@ -0,0 +1,207 @@
+require("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"));
+  }
+
+  getLang(lang) {
+    const langs = {
+      // ar: 'ar-SA', // Not in decidim yet
+      "ar": "ar-TN",
+      "ca": "ca-ES",
+      "cs": "cs-CZ",
+      "da": "da-DK",
+      "de": "de-DE",
+      "el": "el-GR",
+      "en": "en-US",
+      "es": "es-ES",
+      "fa": "fa-IR",
+      "fi": "fi-FI",
+      "fr": "fr-FR",
+      "he": "he-IL",
+      "hu": "hu-HU",
+      "it": "it-IT",
+      "ja": "ja-JP",
+      "my": "my-MM",
+      "nb": "nb-NO",
+      "nl": "nl-NL",
+      "pl": "pl-PL",
+      "pt": "pt-BR",
+      "qz": "qz-MM",
+      "ro": "ro-RO",
+      "ru": "ru-RU",
+      "sl": "sl-SI",
+      "th": "th-TH",
+      "tr": "tr-TR",
+      "uk": "uk-UA",
+      "vi": "vi-VN",
+      "zh-TW": "zh-TW",
+      "zh": "zh-CN"
+    };
+    if (langs[lang]) {
+      return langs[lang];
+    }
+    if (langs[lang.substr(0, 2)]) {
+      return langs[lang.substr(0, 2)];
+    }
+    return "en-US";
+  }
+
+  /*
+  * Creates an XML document with a subset of html-compatible dl/dd/dt elements
+  * to store the custom fields answers
+  */
+  dataToXML(data) {
+    const $dl = $("<dl/>");
+    let $dd, $div, $dt, key, l, label, text, val;
+    $dl.attr("class", "decidim_awesome-custom_fields");
+    $dl.attr("data-generator", "decidim_awesome");
+    $dl.attr("data-version", window.DecidimAwesome.version);
+    for (key in data) {
+      // 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") {
+        data[key].userData = [$(`#${data[key].name}-input`).val()];
+      }
+      if (data[key].userData && data[key].userData.length) {
+        $dt = $("<dt/>");
+        $dt.text(data[key].label);
+        $dt.attr("name", data[key].name);
+        $dd = $("<dd/>");
+        // console.log("data for", key, data[key].name, data[key])
+        for (val in data[key].userData) {
+          $div = $("<div/>");
+          label = data[key].userData[val];
+          text = null;
+          if (data[key].values) {
+            l = data[key].values.find((v) => v.value == label);
+            if (l) {
+              text = label;
+              label = l.label;
+            }
+          } else if (data[key].type == "date" && label) {
+            l = new Date(label).toLocaleDateString();
+            if (l) {
+              text = label;
+              label = l;
+            }
+          }
+          // console.log("userData", text, "label", label, 'key', key, 'data', data)
+          if (data[key].type == "textarea" && data[key].subtype == "richtext") {
+            $div.html(label);
+          } else {
+            $div.text(label);
+          }
+          if (text) {
+            $div.attr("alt", text);
+          }
+          $dd.append($div);
+        }
+        $dd.attr("id", data[key].name);
+        $dd.attr("name", data[key].type);
+        $dl.append($dt);
+        $dl.append($dd);
+      }
+    }
+    return `<xml>${$dl[0].outerHTML}</xml>`;
+  }
+
+  fixBuggyFields() {
+    if (!this.$container) {
+      return false;
+    }
+
+    /**
+    * Hack to fix required checkboxes being reset
+    * Issue: https://github.com/Platoniq/decidim-module-decidim_awesome/issues/82
+    */
+    this.$container.find(".formbuilder-checkbox-group").each((_key, group) => {
+      const inputs = $(".formbuilder-checkbox input", group);
+      const data = this.spec.find((a) => a.type == "checkbox-group");
+      let values = data.userData;
+      if (!inputs.length || !data || !values) {
+        return;
+      }
+
+      inputs.each((_idx, input) => {
+        let index = values.indexOf(input.value);
+        if (index >= 0) {
+          values.splice(index, 1)
+          // setting checked=true do not makes the browser aware that the form is valid if the field is required
+          if (!input.checked)
+          {$(input).click();}
+        } else if (input.checked)
+        {$(input).click();}
+      });
+
+      // Fill "other" option
+      const other_option = $(".other-option", inputs.parent())[0];
+      const other_val = $(".other-val", inputs.parent())[0];
+      const other_text = values.join(" ");
+
+      if (other_option) {
+        if (other_text) {
+          other_option.checked = true;
+          other_option.value = other_text;
+          other_val.value = other_text;
+        } else {
+          other_option.checked = false;
+          other_option.value = "";
+          other_val.value = "";
+        }
+      }
+    });
+
+    /**
+    * Hack to fix required radio buttons "other" value
+    * Issue: https://github.com/Platoniq/decidim-module-decidim_awesome/issues/133
+    */
+    this.$container.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) => {
+        const name = $(radio).attr("name");
+        if (name && name.endsWith("[]")) {
+          $(radio).attr("name", name.slice(0, -2));
+        }
+      });
+    });
+  }
+
+  // Saves xml to the hidden input
+  storeData() {
+    if (!this.$container) {
+      return false;
+    }
+    const $form = this.$container.closest("form");
+    const $body = $form.find(`input[name="${this.$element.data("name")}"]`);
+    if ($body.length && this.instance) {
+      this.spec = this.instance.userData;
+      $body.val(this.dataToXML(this.spec));
+      this.$element.data("spec", this.spec);
+    }
+    // console.log("storeData spec", this.spec, "$body", $body,"$form",$form,"this",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({
+      i18n: {
+        locale: this.lang,
+        location: "https://cdn.jsdelivr.net/npm/formbuilder-languages@1.1.0/"
+      },
+      formData: this.spec,
+      render: true
+    });
+    this.fixBuggyFields();
+  }
+}

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

@@ -0,0 +1,107 @@
+/**
+ * Decidim rich text editor control plugin
+ * Renders standard Decidim WYSIWYG editor
+ *
+ * Registers Decidim Richtext as a subtype for the textarea control
+ */
+import {createQuillEditor} from "src/decidim/decidim_awesome/editors/editor"
+
+// configure the class for runtime loading
+if (!window.fbControls) {
+  window.fbControls = []
+}
+window.fbControls.push(function(controlClass, allControlClasses) {
+  const controlTextarea = allControlClasses.textarea
+
+  /**
+   * DecidimRichtext control class
+   *
+   * NOTE: I haven't found a way to set the userData value using this plugin
+   *       For this reason the value of the field must be collected manually
+   *       from the hidden input name same as the field with the suffix '-input'
+   */
+  class controlRichtext extends controlTextarea {
+
+    /**
+     * Class configuration - return the icons & label related to this control
+     * @returndefinition object
+     */
+    static get definition() {
+      return {
+        icon: "📝",
+        i18n: {
+          default: "Rich Text Editor"
+        }
+      }
+    }
+
+    /**
+     * configure the richtext editor requirements
+     */
+    configure() {
+      window.fbEditors.richtext = {};
+    }
+
+    /**
+     * build a div DOM element & convert to a richtext editor
+     * @return {DOMElement} DOM Element to be injected into the form.
+     */
+    build() {
+      const { value, userData, ...attrs } = this.config;
+
+      // hidden input for storing the current HTML value of the div
+      this.inputId = `${this.id}-input`;
+      // console.log("build plugin: this",this)
+      this.input = this.markup("input", null, {
+        name: name,
+        id: this.inputId,
+        type: "hidden",
+        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);
+    }
+
+    /**
+     * When the element is rendered into the DOM, execute the following code to initialise it
+     * @param {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')
+      }
+
+      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);
+      // });
+
+      // console.log("render! editor", editor, "this", this, "value", value);
+      return evt;
+    }
+  }
+
+  // register Decidim richtext as a richtext control
+  controlTextarea.register("richtext", controlRichtext, "textarea");
+})

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

@@ -0,0 +1,22 @@
+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.$container.closest("form").on("submit", (e) => {
+    if (e.target.checkValidity()) {
+      // save current editor
+      window.DecidimAwesome.CustomFieldsRenderer.storeData();
+    } else {
+      e.preventDefault();
+      e.target.reportValidity();
+    }
+  });
+});

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

@@ -0,0 +1,25 @@
+$(() => {
+  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;
+
+  if (!$textarea.length) {
+    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,
+      uploadFieldName: "image",
+      jsonFieldName: "url",
+      progressText: "[Uploading file...]",
+      urlText: "{filename}",
+      extraHeaders: { "X-CSRF-Token": token }
+    });
+  }
+});