decidim-decidim_awesome 0.7.0 → 0.7.2

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

@@ -80,7 +80,7 @@
         result.component.proposals.edges.forEach((element) => {
           if(!element.node) return;
 
-          if(element.node.coordinates) {
+          if(element.node.coordinates && element.node.coordinates.latitude && element.node.coordinates.longitude) {
             element.node.link = component.url + '/proposals/' + element.node.id;
             createMarker(element.node, callback);
           }

data/app/assets/javascripts/decidim/decidim_awesome/awesome_map/utilities.js.es6

@@ -1,48 +1,57 @@
 //= require jquery.truncate
 
 ((exports) => {
+  const $ = exports.$; // eslint-disable-line
+
   const sanitizeCenter = (string) => {
-    const parts = string.split(",")
-    if (parts.length >= 2) {
-      const lat = parseFloat(parts[0]);
-      const lng = parseFloat(parts[1]);
-      if(lat && lng) {
-        return [lat, lng];
+    if(string) {
+      const parts = string.split(",")
+      if (parts.length >= 2) {
+        const lat = parseFloat(parts[0]);
+        const lng = parseFloat(parts[1]);
+        if(lat && lng) {
+          return [lat, lng];
+        }
       }
     }
     return null
   };
-
-  const options = {
-    length: $("#awesome-map").data("truncate") || 255,
-    center: sanitizeCenter($("#awesome-map").data("map-center")),
-    zoom: $("#awesome-map").data("map-zoom"),
-    menu: {
-      amendments: $("#awesome-map").data("menu-amendments"),
-      meetings: $("#awesome-map").data("menu-meetings"),
-      hashtags: $("#awesome-map").data("menu-hashtags")
+  const options = () => {
+    return {
+      length: $("#awesome-map").data("truncate") || 255,
+      center: sanitizeCenter($("#awesome-map").data("map-center")),
+      zoom: $("#awesome-map").data("map-zoom"),
+      menu: {
+        amendments: $("#awesome-map").data("menu-amendments"),
+        meetings: $("#awesome-map").data("menu-meetings"),
+        hashtags: $("#awesome-map").data("menu-hashtags")
+      }
     }
   };
 
   const truncate = (string) => {
-    return $.truncate(string, options);
+    return $.truncate(string, options());
   };
 
-  const show = {
-    withdrawn: $("#awesome-map").data("show-withdrawn"),
-    accepted: $("#awesome-map").data("show-accepted"),
-    evaluating: $("#awesome-map").data("show-evaluating"),
-    notAnswered: $("#awesome-map").data("show-not-answered"),
-    rejected: $("#awesome-map").data("show-rejected")
+  const show = () => {
+    return {
+      withdrawn: $("#awesome-map").data("show-withdrawn"),
+      accepted: $("#awesome-map").data("show-accepted"),
+      evaluating: $("#awesome-map").data("show-evaluating"),
+      notAnswered: $("#awesome-map").data("show-not-answered"),
+      rejected: $("#awesome-map").data("show-rejected")
+    }
   };
 
-  const collapsedMenu = $("#awesome-map").data("collapsed");
-  const components = $("#awesome-map").data("components");
+  const hideControls = () => $("#awesome-map").data("hide-controls");
+  const collapsedMenu = () => $("#awesome-map").data("collapsed");
+  const components = () => $("#awesome-map").data("components");
 
   exports.AwesomeMap = exports.AwesomeMap || {};
   exports.AwesomeMap.truncate = truncate;
   exports.AwesomeMap.options = options;
   exports.AwesomeMap.show = show;
   exports.AwesomeMap.collapsedMenu = collapsedMenu;
+  exports.AwesomeMap.hideControls = hideControls;
   exports.AwesomeMap.components = components;
 })(window);

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

@@ -4,6 +4,7 @@
 // = require inline-attachment.js
 // = require codemirror-4.inline-attachment.js
 // = require jquery.inline-attachment.js
+// = require europa.min.js
 // = require_self
 
 ((exports) => {
@@ -117,17 +118,23 @@
     };
 
     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 +146,11 @@
           extraHeaders: { "X-CSRF-Token": token }
         });
       }
+
+      // convert to html on submit
+      $form.on("submit", () => {
+        $input.val(inscrybmde.markdown(inscrybmde.value()));
+      });
     };
 
     const quillEditor = () => {

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) => {
@@ -109,7 +111,7 @@
         });
         container.dispatchEvent(event);
 
-        if (text === "\n") {
+        if (text === "\n" || text === "\n\n") {
           $input.val("");
         } else {
           $input.val(quill.root.innerHTML);
@@ -118,7 +120,7 @@
 
       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
@@ -128,17 +130,23 @@
     };
 
     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) {
@@ -150,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 = () => {

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

@@ -1,3 +1,7 @@
 // = require decidim/decidim_awesome/admin/constraints
-// = require decidim/decidim_awesome/admin/codemirror
 // = 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

@@ -1,4 +1,3 @@
 // = require decidim/decidim_awesome/proposals/images
 // = require decidim/decidim_awesome/editors/legacy_quill_editor
-// = require decidim/decidim_awesome/editors/markdown_view
 // = 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;
+}

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

@@ -1,16 +1,27 @@
 .awesome-edit-config{
-  .scoped-style{
-    .form-error {
+  .scoped_styles_container,
+  .proposal_custom_fields_container{
+    .form-error{
       margin: 0;
     }
+
     >.CodeMirror{
-      border-top: .5em solid #f6f6f6;
-      border-right: .5em solid #f6f6f6;
+      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;
       height: auto;
       max-height: 40em;
       resize: vertical;
       overflow: vertical !important;
+
+      >.CodeMirror-scroll{
+        >.CodeMirror-gutters{
+          background: #e0e0e0;
+        }
+      }
     }
   }
 }

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

@@ -28,10 +28,22 @@
       &.component_id{
         background-color: #ee449c;
       }
+
+      &.constraint{
+        &-none{
+          background-color: #ff3000;
+        }
+      }
     }
 
     a{
       margin-left: 1rem;
     }
+
+    &.inactive{
+      .label:not(.constraint-none){
+        filter: saturate(10%);
+      }
+    }
   }
 }