decidim-decidim_awesome 0.7.2 → 0.8.0

data/app/packs/src/decidim/decidim_awesome/awesome_map/controls_ui.js

@@ -0,0 +1,221 @@
+import * as L from "leaflet";
+
+export default class ControlsUI {
+  constructor(awesomeMap) {
+    this.awesomeMap = awesomeMap;
+
+    this.main = L.control.layers(null, null, {
+      position: "topleft",
+      sortLayers: false,
+      collapsed: this.awesomeMap.config.collapsedMenu
+      // hideSingleBase: true
+    });
+
+    if (this.awesomeMap.config.hideControls) {
+      $(this.main.getContainer()).hide();
+    }
+
+    this.$loading = $("#awesome-map .loading-spinner");
+    this.onHashtag = this._orderHashtags;
+
+    this.awesomeMap.map.on("overlayadd", () => {
+      this.removeHiddenCategories();
+    });
+  }
+
+  attach() {
+    // legends
+    this.main.addTo(this.awesomeMap.map);
+
+    this.addSearchControls();
+    if (this.awesomeMap.config.menu.categories) {
+      this.addCategoriesControls();
+    }
+
+    // sub-layer hashtag title toggle
+    $("#awesome-map").on("click", ".awesome_map-title-control", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      $("#awesome_map-categories-control").toggleClass("active");
+      $("#awesome_map-hashtags-control").toggleClass("active");
+    });
+
+    // hashtag events
+    $("#awesome-map").on("change", ".awesome_map-hashtags-selector", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const tag = $(e.target).closest("label").data("layer");
+      // console.log("changed, layer", tag, "checked", e.target.checked, e);
+      if (tag) {
+        this.updateHashtagLayers();
+      }
+    });
+
+    // select/deselect all tags
+    $("#awesome-map").on("click", ".awesome_map-toggle_all_tags", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      $("#awesome-map .awesome_map-hashtags-selector").prop("checked", $("#awesome-map .awesome_map-hashtags-selector:checked").length < $("#awesome-map .awesome_map-hashtags-selector").length);
+      this.updateHashtagLayers();
+    });
+  }
+
+  addSearchControls() {
+    $(this.main.getContainer()).contents("form").append(`<div id="awesome_map-categories-control" class="active"><b class="awesome_map-title-control">${window.DecidimAwesome.texts.categories}</b><div class="categories-container"></div></div>
+    <div id="awesome_map-hashtags-control"><b class="awesome_map-title-control">${window.DecidimAwesome.texts.hashtags}</b><div class="hashtags-container"></div><a href="#" class="awesome_map-toggle_all_tags">${window.DecidimAwesome.texts.select_deselect_all}</a></div>`);
+  }
+
+  addCategoriesControls() {
+    this.awesomeMap.categories.forEach((category) => {
+      // add control layer for this category
+      const label = `<i class="awesome_map-category_${category.id}"></i> ${category.name}`;
+      this.awesomeMap.layers[category.id] = {
+        label: label,
+        group: L.featureGroup.subGroup(this.awesomeMap.cluster)
+      };
+      this.awesomeMap.layers[category.id].group.addTo(this.awesomeMap.map);
+      $("#awesome_map-categories-control .categories-container").append(`<label data-layer="${category.id}" class="awesome_map-category-${category.id}${category.parent
+        ? " subcategory"
+        : ""}" data-parent="${category.parent}"><input type="checkbox" class="awesome_map-categories-selector" checked><span>${label}</span></label>`);
+    })
+
+    // category events
+    $("#awesome-map").on("change", ".awesome_map-categories-selector", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const id = $(e.target).closest("label").data("layer");
+      const cat = this.awesomeMap.getCategory(id);
+      // console.log("changed, layer", id, "cat", cat, "checked", e.target.checked, e);
+      if (cat) {
+        const layer = this.awesomeMap.layers[cat.id];
+        if (e.target.checked) {
+          // show group of markers
+          this.awesomeMap.map.addLayer(layer.group);
+        } else {
+          // hide group of markers
+          this.awesomeMap.map.removeLayer(layer.group);
+          // cat.children().forEach((c) => {
+          //   let $el = $(`.awesome_map-category-${c.id}`);
+          //   if($el.contents("input").prop("checked")) {
+          //     $el.click();
+          //   }
+          // });
+        }
+        // if it's a children, put the parent to indeterminate
+        this._indeterminateParentInput(cat);
+        // sync tags
+        this.updateHashtagLayers();
+      }
+    });
+  }
+
+  // Hashtags are collected directly from proposals (this is different than categories)
+  addHashtagsControls(hashtags, marker) {
+    // show hashtag layer
+    if (hashtags && hashtags.length) {
+      $("#awesome_map-hashtags-control").show();
+      hashtags.forEach((hashtag) => {
+        // Add layer if not exists, otherwise just add the marker to the group
+        if (!this.awesomeMap.layers[hashtag.tag]) {
+          this.awesomeMap.layers[hashtag.tag] = {
+            label: hashtag.name,
+            group: new L.FeatureGroup.SubGroup(this.awesomeMap.cluster)
+          };
+          this.awesomeMap.layers[hashtag.tag].group.addTo(this.awesomeMap.map);
+          $("#awesome_map-hashtags-control .hashtags-container").append(`<label data-layer="${hashtag.tag}" class="awesome_map-hashtag-${hashtag.tag}"><input type="checkbox" class="awesome_map-hashtags-selector" checked><span>${hashtag.name}</span></label>`);
+          // Call a trigger, might be in service for customizations
+          this.onHashtag(hashtag, $("#awesome_map-hashtags-control .hashtags-container"));
+        }
+        marker.addTo(this.awesomeMap.layers[hashtag.tag].group);
+
+        const $label = $(`label.awesome_map-hashtag-${hashtag.tag}`);
+        // update number of items
+        $label.attr("title", `${parseInt($label.attr("title") || 0) + 1} ${window.DecidimAwesome.texts.items}`);
+      });
+    }
+  }
+
+  showCategory(cat) {
+    $("#awesome_map-categories-control").show();
+    // show category if hidden
+    const $label = $(`label.awesome_map-category-${cat.id}`);
+    const $parent = $(`label.awesome_map-category-${cat.parent}`);
+    $label.show();
+    // update number of items
+    $label.attr("title", `${parseInt($label.attr("title") || 0) + 1} ${window.DecidimAwesome.texts.items}`);
+    // show parent if apply
+    $parent.show();
+    $parent.attr("title", `${parseInt($parent.attr("title") || 0) + 1} ${window.DecidimAwesome.texts.items}`);
+  }
+
+  removeHiddenComponents() {
+    $(".awesome_map-component").each((_idx, el) => {
+      const layer = this.awesomeMap.layers[$(el).data("layer")];
+      const $input = $(el).closest("div").find("input:not(:checked)");
+      if (layer && $input.length) {
+        this.awesomeMap.map.addLayer(layer.group);
+        this.awesomeMap.map.removeLayer(layer.group);
+      }
+    });
+  }
+
+  removeHiddenCategories() {
+    $(".awesome_map-categories-selector:not(:checked)").each((_idx, el) => {
+      const layer = this.awesomeMap.layers[$(el).closest("label").data("layer")];
+      if (layer) {
+        this.awesomeMap.map.addLayer(layer.group);
+        this.awesomeMap.map.removeLayer(layer.group);
+      }
+    });
+  }
+
+  updateHashtagLayers() {
+    // hide all
+    $(".awesome_map-hashtags-selector").each((_idx, el) => {
+      const layer = this.awesomeMap.layers[$(el).closest("label").data("layer")];
+      if (layer) {
+        this.awesomeMap.map.removeLayer(layer.group);
+      }
+    });
+    // show selected only
+    $(".awesome_map-hashtags-selector:checked").each((_idx, el) => {
+      const layer = this.awesomeMap.layers[$(el).closest("label").data("layer")];
+      if (layer) {
+        this.awesomeMap.map.addLayer(layer.group);
+      }
+    });
+    // hide non-selected categories
+    this.removeHiddenComponents();
+    this.removeHiddenCategories();
+  }
+
+  updateStats(uid, total) {
+    // update component stats
+    const $component = $(`#awesome_map-${uid}`);
+    $component.attr("title", `${total} ${window.DecidimAwesome.texts.items}`);
+  }
+
+  _indeterminateParentInput(cat) {
+    if (cat.parent) {
+      let $input = $(`.awesome_map-category-${cat.parent}`).contents("input");
+      let $subcats = $(`[class^="awesome_map-category-"][data-parent="${cat.parent}"]:visible`);
+      let num_checked = $subcats.contents("input:checked").length;
+      $input.prop("indeterminate", num_checked != $subcats.length && num_checked != 0);
+    }
+  }
+
+  // order hashtags alphabetically
+  _orderHashtags(_hashtag, $div) {
+    let $last = $div.contents("label:last");
+    if ($last.prev("label").length) {
+      // move the label to order it alphabetically
+      $div.contents("label").each((_idx, el) => {
+        if ($(el).text().localeCompare($last.text()) > 0) {
+          $(el).before($last);
+          return false;
+        }
+      });
+    }
+  }
+}

data/app/packs/src/decidim/decidim_awesome/awesome_map/load_map.js

@@ -0,0 +1,51 @@
+import AwesomeMap from "src/decidim/decidim_awesome/awesome_map/awesome_map"
+
+$(() => {
+  const sanitizeCenter = (string) => {
+    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];
+        }
+      }
+    }
+  };
+
+  const config = {
+    length: $("#awesome-map").data("truncate") || 254,
+    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"),
+      categories: $("#awesome-map").data("menu-categories"),
+      hashtags: $("#awesome-map").data("menu-hashtags"),
+      mergeComponents: $("#awesome-map").data("menu-merge-components")
+    },
+    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")
+    },
+    hideControls: $("#awesome-map").data("hide-controls"),
+    collapsedMenu: $("#awesome-map").data("collapsed"),
+    components: $("#awesome-map").data("components")
+  };
+
+  // build awesome map (if exist)
+  $("#awesome-map .google-map").on("ready.decidim", (evt, map) => {
+    // bindPopup doesn't work for some unknown cause and these handler neither so we're cancelling them
+    map.off("popupopen");
+    map.off("popupclose");
+
+    // console.log("ready map", map);
+
+    window.AwesomeMap = new AwesomeMap(map, config);
+    window.AwesomeMap.loadControllers();
+  });
+});

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/{assets/javascripts/decidim/decidim_awesome/editors/tabs_focus.js.es6 → packs/src/decidim/decidim_awesome/editors/tabs_focus.js}

@@ -1,5 +1,3 @@
-// = require_self
-
 /**
  * When switching tabs in i18n fields, autofocus on the markdown if exists
  */
@@ -7,18 +5,18 @@ $(() => {
   // 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
+    // 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) {
+    if ($input.length > 0) {
       // saves current data to the hidden field for the lang
-      DecidimAwesome.FormRenderBuilder.storeData();
+      window.DecidimAwesome.CustomFieldsRenderer.storeData();
       // init the current language
-      DecidimAwesome.FormRenderBuilder.init($input);
+      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();
   });
 });