decidim-decidim_awesome 0.6.5 → 0.7.2

data/app/assets/javascripts/decidim/decidim_awesome/editors/legacy_quill_editor.js.es6

@@ -0,0 +1,172 @@
+// = require image-upload.min
+// = require image-resize.min
+// = require inscrybmde.min.js
+// = require inline-attachment.js
+// = require codemirror-4.inline-attachment.js
+// = require jquery.inline-attachment.js
+// = require europa.min.js
+// = require_self
+
+((exports) => {
+  exports.DecidimAwesome = exports.DecidimAwesome || {};
+
+  // Redefines Quill editor with images
+  if(exports.DecidimAwesome.allow_images_in_full_editor  || exports.DecidimAwesome.allow_images_in_small_editor || exports.DecidimAwesome.use_markdown_editor) {
+
+    const quillFormats = ["bold", "italic", "link", "underline", "header", "list", "video", "image", "alt"];
+
+    const createQuillEditor = (container) => {
+      const toolbar = $(container).data("toolbar");
+      const disabled = $(container).data("disabled");
+
+      let quillToolbar = [
+        ["bold", "italic", "underline"],
+        [{ list: "ordered" }, { list: "bullet" }],
+        ["link", "clean"]
+      ];
+
+      let addImage = false;
+
+      if (toolbar === "full") {
+        quillToolbar = [
+          [{ header: [1, 2, 3, 4, 5, 6, false] }],
+          ...quillToolbar
+        ];
+          if(exports.DecidimAwesome.allow_images_in_full_editor) {
+            quillToolbar.push(["video", "image"]);
+            addImage = true;
+          } else {
+            quillToolbar.push(["video"]);
+          }
+      } else if (toolbar === "basic") {
+          if(exports.DecidimAwesome.allow_images_in_small_editor) {
+            quillToolbar.push(["video", "image"]);
+            addImage = true;
+          } else {
+            quillToolbar.push(["video"]);
+          }
+      } else if(exports.DecidimAwesome.allow_images_in_small_editor) {
+        quillToolbar.push(["image"]);
+        addImage = true;
+      }
+
+      let modules = {
+        toolbar: quillToolbar
+      };
+      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: exports.DecidimAwesome.editor_uploader_path, // server url. If the url is empty then the base64 returns
+          method: 'POST', // change query method, default 'POST'
+          name: 'image', // custom form name
+          withCredentials: false, // withCredentials
+          headers: { 'X-CSRF-Token': token }, // add custom headers, example { token: 'your-token'}
+          // personalize successful callback and call next function to insert new url to the editor
+          callbackOK: (serverResponse, next) => {
+            $(quill.getModule("toolbar").container).last().removeClass('editor-loading')
+            next(serverResponse.url);
+          },
+          // personalize failed callback
+          callbackKO: serverError => {
+            $(quill.getModule("toolbar").container).last().removeClass('editor-loading')
+            alert(serverError.message);
+          },
+          checkBeforeSend: (file, next) => {
+            $(quill.getModule("toolbar").container).last().addClass('editor-loading')
+            next(file); // go back to component and send to the server
+          }
+        }
+      }
+
+      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") {
+          $input.val("");
+        } else {
+          $input.val(quill.root.innerHTML);
+        }
+      });
+
+      if(addImage) {
+        const t = window.DecidimAwesome.texts["drag_and_drop_image"];
+        $(container).after(`<p class="help-text" style="margin-top:-1.5rem;">${t}</p>`);
+      }
+    };
+
+    const createMarkdownEditor = (container) => {
+      const t = window.DecidimAwesome.texts["drag_and_drop_image"];
+      const token = $( 'meta[name="csrf-token"]' ).attr( 'content' );
+      const $input = $(container).siblings('input[type="hidden"]');
+      const $faker = $('<input type="hidden" 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
+        }
+      });
+      $faker[0].InscrybMDE = inscrybmde;
+
+      // Allow image upload
+      if(window.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: window.DecidimAwesome.editor_uploader_path,
+          uploadFieldName: "image",
+          jsonFieldName: "url",
+          extraHeaders: { "X-CSRF-Token": token }
+        });
+      }
+
+      // convert to html on submit
+      $form.on("submit", () => {
+        $input.val(inscrybmde.markdown(inscrybmde.value()));
+      });
+    };
+
+    const quillEditor = () => {
+      $(".editor-container").each((idx, container) => {
+        if(exports.DecidimAwesome.use_markdown_editor) {
+          createMarkdownEditor(container);
+        } else {
+          createQuillEditor(container);
+        }
+      });
+    };
+
+    exports.Decidim = exports.Decidim || {};
+    exports.Decidim.quillEditor = quillEditor;
+    exports.Decidim.createQuillEditor = createQuillEditor;
+    exports.Decidim.createMarkdownEditor = createMarkdownEditor;
+
+  }
+})(window);

data/app/assets/javascripts/decidim/decidim_awesome/editors/quill_editor.js.es6

@@ -4,6 +4,8 @@
 // = require inline-attachment.js
 // = require codemirror-4.inline-attachment.js
 // = require jquery.inline-attachment.js
+// = require europa.min.js
+// = require decidim/editor/linebreak_module.js
 // = require_self
 
 ((exports) => {
@@ -12,14 +14,14 @@
   // Redefines Quill editor with images
   if(exports.DecidimAwesome.allow_images_in_full_editor  || exports.DecidimAwesome.allow_images_in_small_editor || exports.DecidimAwesome.use_markdown_editor) {
 
-    const quillFormats = ["bold", "italic", "link", "underline", "header", "list", "video", "image", "alt"];
+    const quillFormats = ["bold", "italic", "link", "underline", "header", "list", "video", "image", "alt", "break"];
 
     const createQuillEditor = (container) => {
       const toolbar = $(container).data("toolbar");
       const disabled = $(container).data("disabled");
 
       let quillToolbar = [
-        ["bold", "italic", "underline"],
+        ["bold", "italic", "underline", "linebreak"],
         [{ list: "ordered" }, { list: "bullet" }],
         ["link", "clean"]
       ];
@@ -50,7 +52,13 @@
       }
 
       let modules = {
-        toolbar: quillToolbar
+        linebreak: {},
+        toolbar: {
+          container: quillToolbar,
+          handlers: {
+            "linebreak": exports.Decidim.Editor.lineBreakButtonHandler
+          }
+        }
       };
       const $input = $(container).siblings('input[type="hidden"]');
       container.innerHTML = $input.val() || "";
@@ -103,31 +111,42 @@
         });
         container.dispatchEvent(event);
 
-        if (text === "\n") {
+        if (text === "\n" || text === "\n\n") {
           $input.val("");
         } else {
           $input.val(quill.root.innerHTML);
         }
       });
-     
+
       if(addImage) {
         const t = window.DecidimAwesome.texts["drag_and_drop_image"];
-        $(container).after(`<p class="help-text" style="margin-top:-1.5rem;">${t}</p>`);
+        $(container).after(`<p class="help-text">${t}</p>`);
       }
+
+      // After editor is ready, linebreak_module deletes two extraneous new lines
+      quill.emitter.emit("editor-ready");
+
+      return quill;
     };
 
     const createMarkdownEditor = (container) => {
-      $(container).hide();
       const t = window.DecidimAwesome.texts["drag_and_drop_image"];
       const token = $( 'meta[name="csrf-token"]' ).attr( 'content' );
       const $input = $(container).siblings('input[type="hidden"]');
+      const $faker = $('<input type="hidden" 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: $input[0],
+        element: $faker[0],
         spellChecker: false,
         renderingConfig: {
           codeSyntaxHighlighting: true
         }
       });
+      $faker[0].InscrybMDE = inscrybmde;
 
       // Allow image upload
       if(window.DecidimAwesome.allow_images_in_markdown_editor) {
@@ -139,6 +158,12 @@
           extraHeaders: { "X-CSRF-Token": token }
         });
       }
+
+      // convert to html on submit
+      $form.on("submit", () => {
+        // e.preventDefault();
+        $input.val(inscrybmde.markdown(inscrybmde.value()));
+      });
     };
 
     const quillEditor = () => {
@@ -157,4 +182,4 @@
     exports.Decidim.createMarkdownEditor = createMarkdownEditor;
 
   }
-})(window);
+})(window);

data/app/assets/javascripts/decidim/decidim_awesome/editors/tabs_focus.js.es6

@@ -0,0 +1,24 @@
+// = require_self
+
+/**
+ * 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 inscrybemde 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
+      DecidimAwesome.FormRenderBuilder.storeData();
+      // init the current language
+      DecidimAwesome.FormRenderBuilder.init($input);
+    }
+  });
+});

data/app/assets/javascripts/decidim/decidim_awesome/forms/custom_fields_builder.js.es6

@@ -0,0 +1,211 @@
+// = require form-render.min
+// = require decidim/decidim_awesome/forms/rich_text_plugin
+
+class CustomFieldsBuilder { // 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 doc = $.parseXML("<xml/>");
+    const xml = doc.getElementsByTagName("xml")[0];
+    const dl = doc.createElement("dl");
+    let key, dt, dd, div, val, text, label, l;
+    xml.appendChild(dl);
+    $(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 = doc.createElement("dt");
+        $(dt).text(data[key].label);
+        $(dt).attr("name", data[key].name);
+        dd = doc.createElement("dd");
+        // console.log("data for", key, data[key].name, data[key])
+        for(val in data[key].userData) {
+          div = doc.createElement("div");
+          label = data[key].userData[val];
+          text = null;
+          if(data[key].values) {
+            l = data[key].values.find((v) => v["value"] == data[key].userData[val]);
+            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.appendChild(div);
+        }
+        $(dd).attr("id", data[key].name);
+        $(dd).attr("name", data[key].type);
+        dl.appendChild(dt);
+        dl.appendChild(dd);
+      }
+    }
+    return xml.outerHTML;
+  }
+
+  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((_key, 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", this.spec, "xml", $body.val());
+  }
+
+  init($element) {
+    this.$element = $element;
+    this.spec = $element.data("spec");
+    if(!this.$container) {
+      this.$container = $(this.container_selector);
+    }
+    // console.log("init", $element, "data", data)
+    // TODO: save current data to the hidden field
+    // 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/assets/javascripts/decidim/decidim_awesome/forms/rich_text_plugin.js.es6

@@ -0,0 +1,106 @@
+/**
+ * 
+ * NOTE: For some reason, this seems to throw an error while transpiling
+ * For this reason a rich_text_plugin.js is provided using the online transpiler https://babeljs.io/repl
+ * Hopefully, this situation will change when webpacker is updated in the v0.25 of Decidim
+ * 
+ * Decidim rich text editor control plugin
+ * Renders standard Decidim WYSIWYG editor
+ *
+ * Registers Decidim Richtext as a subtype for the textarea control
+ */
+
+// 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'
+      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; 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 = window.Decidim.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/assets/javascripts/decidim/decidim_awesome/legacy_admin.js

@@ -0,0 +1,7 @@
+// = require decidim/decidim_awesome/admin/constraints
+// = require decidim/decidim_awesome/editors/legacy_quill_editor
+// = require decidim/decidim_awesome/admin/legacy_form_builder
+// = require decidim/decidim_awesome/editors/tabs_focus
+// = require decidim/decidim_awesome/admin/codemirror
+// = require decidim/decidim_awesome/admin/user_picker.js
+// = require decidim/decidim_awesome/admin/auto_edit.js

data/app/assets/javascripts/decidim/decidim_awesome/legacy_application.js

@@ -0,0 +1,3 @@
+// = require decidim/decidim_awesome/proposals/images
+// = require decidim/decidim_awesome/editors/legacy_quill_editor
+// = require decidim/decidim_awesome/forms/autosave

data/app/assets/javascripts/decidim/decidim_awesome/proposals/custom_fields.js.es6

@@ -0,0 +1,21 @@
+// = require decidim/decidim_awesome/forms/custom_fields_builder
+// = require_self
+
+window.DecidimAwesome.FormRenderBuilder = window.DecidimAwesome.FormRenderBuilder || new CustomFieldsBuilder();
+
+$(() => {
+  // use admin multilang specs if exists
+  let $el = $("proposal_custom_field:first", ".tabs-title.is-active");
+  $el = $el.length ? $el : $(".proposal_custom_field:first");
+  DecidimAwesome.FormRenderBuilder.init($el);
+
+  DecidimAwesome.FormRenderBuilder.$container.closest("form").on("submit", (e) => {
+    if(e.target.checkValidity()) {
+      // save current editor
+      DecidimAwesome.FormRenderBuilder.storeData();
+    } else {
+      e.preventDefault();
+      e.target.reportValidity();
+    }
+  });
+});

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

@@ -0,0 +1,15 @@
+input.awesome-auto-edit {
+  display: inline-block;
+  width: auto;
+  margin: 0 2px;
+  padding: 1px;
+  line-height: 0;
+  height: auto;
+}
+span.awesome-auto-edit {
+  padding: 0 4px;
+  background-color: #f0f0f0;
+  border-radius: 5px;
+  margin: 0;
+  font-weight: 600;
+}