decidim-decidim_awesome 0.8.0 → 0.12.0

data/app/packs/src/decidim/decidim_awesome/awesome_map/controllers/proposals_controller.js

@@ -2,14 +2,6 @@ import * as L from "leaflet";
 import Controller from "src/decidim/decidim_awesome/awesome_map/controllers/controller";
 import ProposalsFetcher from "src/decidim/decidim_awesome/awesome_map/api/proposals_fetcher";
 
-const ProposalIcon = L.DivIcon.SVGIcon.DecidimIcon.extend({
-  options: {
-    fillColor: "#ef604d",
-    fillOpacity: 0.8,
-    strokeWidth: 1,
-    strokeOpcacity: 1
-  }
-});
 export default class ProposalsController extends Controller {
   constructor(awesomeMap, component) {
     super(awesomeMap, component)
@@ -36,12 +28,13 @@ export default class ProposalsController extends Controller {
     // for each proposal, create a marker with an associated popup
     this.fetcher.onNode = (proposal) => {
       let marker = new L.Marker([proposal.coordinates.latitude, proposal.coordinates.longitude], {
-        icon: this.createIcon(ProposalIcon, this.awesomeMap.getCategory(proposal.category).color),
+        icon: this.createIcon(this.awesomeMap.getCategory(proposal.category).color),
         title: proposal.title.translation
       });
 
       // Check if it has amendments, add it to a list
       // also assign parent's proposal categories to it
+      // console.log("onNode proposal", proposal, "amendment:", proposal.amendments)
       if (proposal.amendments && proposal.amendments.length) {
         proposal.amendments.forEach((amendment) => {
           this.amendments[amendment.emendation.id] = proposal;
@@ -57,26 +50,26 @@ export default class ProposalsController extends Controller {
 
   _onFinished() {
     const iterableAmendments = Object.entries(this.amendments);
-    this.awesomeMap.controls.updateStats(`component_${this.component.id}`, this.allMarkers.length - iterableAmendments.length);
+    this.awesomeMap.controls.updateStats(`component_${this.component.id}`, this.allNodes.length - iterableAmendments.length);
     this.awesomeMap.controls.updateStats(`amendments_${this.component.id}`, iterableAmendments.length);
 
     // Process all amendments
     iterableAmendments.forEach((amendment) => {
-      const marker = this.allMarkers.find((item) => item.node.id == amendment[0]);
+      const marker = this.allNodes.find((node) => node.id === amendment[0]);
       const parent = amendment[1];
       // console.log("marker", marker, "parent proposal", parent)
       // add marker to amendments layers and remove it from proposals
       if (marker) {
-        try { 
-          marker.marker.removeFrom(this.controls.group) 
-        } catch (e) { 
-          console.error("error removeFrom marker", marker, "layer", this.controls.group,  e);
+        try {
+          marker.marker.removeFrom(this.controls.group)
+        } catch (evt) {
+          console.error("error removeFrom marker", marker, "layer", this.controls.group,  evt);
         }
         if (this.awesomeMap.config.menu.amendments) {
           marker.marker.addTo(this.awesomeMap.layers.amendments.group);
           // mimic parent category (amendments doesn't have categories)
           if (parent.category) {
-            marker.marker.setIcon(this.createIcon(ProposalIcon, this.awesomeMap.getCategory(parent.category).color));
+            marker.marker.setIcon(this.createIcon("text-secondary"));
             this.addMarkerCategory(marker.marker, parent.category)
           }
         }

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

@@ -1,3 +1,5 @@
+/* eslint-disable no-ternary, multiline-ternary */
+
 import * as L from "leaflet";
 
 export default class ControlsUI {
@@ -12,10 +14,10 @@ export default class ControlsUI {
     });
 
     if (this.awesomeMap.config.hideControls) {
-      $(this.main.getContainer()).hide();
+      this.main.getContainer().style.display = "none";
     }
 
-    this.$loading = $("#awesome-map .loading-spinner");
+    this.loading = document.querySelector("#awesome-map .loading-spinner");
     this.onHashtag = this._orderHashtags;
 
     this.awesomeMap.map.on("overlayadd", () => {
@@ -33,36 +35,58 @@ export default class ControlsUI {
     }
 
     // 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");
+    $("#awesome-map").on("click", ".awesome_map-title-control", (evt) => {
+      evt.preventDefault();
+      evt.stopPropagation();
+      const categories = document.getElementById("awesome_map-categories-control");
+      const hashtags = document.getElementById("awesome_map-hashtags-control");
+      if (categories) {
+        categories.classList.toggle("active");
+      }
+      if (hashtags) {
+        hashtags.classList.toggle("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);
+    $("#awesome-map").on("change", ".awesome_map-hashtags-selector", (evt) => {
+      evt.preventDefault();
+      evt.stopPropagation();
+      const tag = $(evt.target).closest("label").data("layer");
+      // console.log("changed, layer", tag, "checked", evt.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").on("click", ".awesome_map-toggle_all_tags", (evt) => {
+      evt.preventDefault();
+      evt.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();
     });
+
+    this.awesomeMap.map.on("popupopen", () => {
+      // console.log("popup open");
+      // hide Controls
+      document.querySelector(".leaflet-control-layers.leaflet-control").style.display = "none";
+    });
+    this.awesomeMap.map.on("popupclose", () => {
+      // console.log("popup close");
+      // restore controls
+      document.querySelector(".leaflet-control-layers.leaflet-control").style.display = "block";
+    });
   }
 
   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>`);
+    const section = this.main.getContainer().querySelector(".leaflet-control-layers-list");
+    if (section) {
+      section.insertAdjacentHTML("beforeend", `<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.selectDeselectAll}</a></div>`);
+    } else {
+      console.error("Can't find the section to insert the controls");
+    }
   }
 
   addCategoriesControls() {
@@ -71,25 +95,28 @@ export default class ControlsUI {
       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)
+        group: new 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>`);
+      const categories = document.querySelector("#awesome_map-categories-control .categories-container");
+      if (categories) {
+        categories.insertAdjacentHTML("beforeend", `<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>`);
+      } else {
+        console.error("Can't find the section to insert the categories");
+      }
     })
 
     // category events
-    $("#awesome-map").on("change", ".awesome_map-categories-selector", (e) => {
-      e.preventDefault();
-      e.stopPropagation();
+    $("#awesome-map").on("change", ".awesome_map-categories-selector", (evt) => {
+      evt.preventDefault();
+      evt.stopPropagation();
 
-      const id = $(e.target).closest("label").data("layer");
+      const id = $(evt.target).closest("label").data("layer");
       const cat = this.awesomeMap.getCategory(id);
-      // console.log("changed, layer", id, "cat", cat, "checked", e.target.checked, e);
+      // console.log("changed, layer", id, "cat", cat, "checked", evt.target.checked, e);
       if (cat) {
         const layer = this.awesomeMap.layers[cat.id];
-        if (e.target.checked) {
+        if (evt.target.checked) {
           // show group of markers
           this.awesomeMap.map.addLayer(layer.group);
         } else {
@@ -114,7 +141,7 @@ export default class ControlsUI {
   addHashtagsControls(hashtags, marker) {
     // show hashtag layer
     if (hashtags && hashtags.length) {
-      $("#awesome_map-hashtags-control").show();
+      document.getElementById("awesome_map-hashtags-control").style.display = "block";
       hashtags.forEach((hashtag) => {
         // Add layer if not exists, otherwise just add the marker to the group
         if (!this.awesomeMap.layers[hashtag.tag]) {
@@ -122,31 +149,35 @@ export default class ControlsUI {
             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>`);
+          this.awesomeMap.map.addLayer(this.awesomeMap.layers[hashtag.tag].group);
+          document.querySelector("#awesome_map-hashtags-control .hashtags-container").insertAdjacentHTML("beforeend", `<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);
+        this.awesomeMap.layers[hashtag.tag].group.addLayer(marker);
 
-        const $label = $(`label.awesome_map-hashtag-${hashtag.tag}`);
+        const label = document.querySelector(`label.awesome_map-hashtag-${hashtag.tag}`);
         // update number of items
-        $label.attr("title", `${parseInt($label.attr("title") || 0) + 1} ${window.DecidimAwesome.texts.items}`);
+        label.setAttribute("title", `${parseInt(label.title || 0, 10) + 1} ${window.DecidimAwesome.texts.items}`);
       });
     }
   }
 
   showCategory(cat) {
-    $("#awesome_map-categories-control").show();
+    document.getElementById("awesome_map-categories-control").style.display = "block";
     // 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}`);
+    const label = document.querySelector(`label.awesome_map-category-${cat.id}`);
+    const parent = document.querySelector(`label.awesome_map-category-${cat.parent}`);
+    if (label) {      
+      label.style.display = "block";
+      // update number of items
+      label.setAttribute("title", `${parseInt(label.title || 0, 10) + 1} ${window.DecidimAwesome.texts.items}`);
+    }
+    if (parent) {
+      // show parent if apply
+      parent.style.display = "block"
+      parent.setAttribute("title", `${parseInt(parent.title || 0, 10) + 1} ${window.DecidimAwesome.texts.items}`);
+    }
   }
 
   removeHiddenComponents() {
@@ -200,8 +231,8 @@ export default class ControlsUI {
     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);
+      let numChecked = $subcats.contents("input:checked").length;
+      $input.prop("indeterminate", numChecked !== $subcats.length && numChecked !== 0);
     }
   }
 
@@ -213,7 +244,6 @@ export default class ControlsUI {
       $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

@@ -1,6 +1,6 @@
 import AwesomeMap from "src/decidim/decidim_awesome/awesome_map/awesome_map"
 
-$(() => {
+document.addEventListener("DOMContentLoaded", () => {
   const sanitizeCenter = (string) => {
     if (string) {
       const parts = string.split(",")
@@ -12,33 +12,43 @@ $(() => {
         }
       }
     }
+    return null;
   };
 
+  const parse = (string) => {
+    if (!string) {
+      return null;
+    }
+    return JSON.parse(string);
+  }
+
+  const dataset = document.getElementById("awesome-map").dataset;
   const config = {
-    length: $("#awesome-map").data("truncate") || 254,
-    center: sanitizeCenter($("#awesome-map").data("map-center")),
-    zoom: $("#awesome-map").data("map-zoom"),    
+    length: parse(dataset.truncate) || 254,
+    center: sanitizeCenter(parse(dataset.mapCenter)),
+    zoom: parse(dataset.mapZoom),    
     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")
+      amendments: parse(dataset.menuAmendments),
+      meetings: parse(dataset.menuMeetings),
+      categories: parse(dataset.menuCategories),
+      hashtags: parse(dataset.menuHashtags),
+      mergeComponents: parse(dataset.menuMergeComponents)
     },
     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")
+      withdrawn: parse(dataset.showWithdrawn),
+      accepted: parse(dataset.showAccepted),
+      evaluating: parse(dataset.showEvaluating),
+      notAnswered: parse(dataset.showNotAnswered),
+      rejected: parse(dataset.showRejected)
     },
-    hideControls: $("#awesome-map").data("hide-controls"),
-    collapsedMenu: $("#awesome-map").data("collapsed"),
-    components: $("#awesome-map").data("components")
+    hideControls: parse(dataset.hideCcontrols),
+    collapsedMenu: parse(dataset.collapsed),
+    components: parse(dataset.components)
   };
 
   // build awesome map (if exist)
-  $("#awesome-map .google-map").on("ready.decidim", (evt, map) => {
+  // This event is still launched using JQuery in version 0.28
+  $("#awesome-map .dynamic-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");

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

@@ -0,0 +1,94 @@
+/* eslint-disable require-jsdoc */
+
+import { Editor } from "@tiptap/core";
+
+import DecidimKit from "src/decidim/editor/extensions/decidim_kit";
+
+import createEditorToolbar from "src/decidim/editor/toolbar";
+import { uniqueId } from "src/decidim/editor/common/helpers";
+
+/**
+ * Creates a new rich text editor instance and takes into account Awesome configuration for it (so user can upload images if configured)
+ *
+ * @param {HTMLElement} container The element that contains the editor.
+ * @return {Editor} The rich text editor instance.
+ */
+
+export default function createEditor(container) {
+  const DecidimAwesome = window.DecidimAwesome || {};
+  console.log("Using DecidimAwesome createEditor")
+  const input = container.parentElement.querySelector("input[type=hidden]");
+  const label = container.parentElement.querySelector("label");
+  const editorContainer = container.querySelector(".editor-input");
+
+  const editorAttributes = { role: "textbox", "aria-multiline": true };
+  if (label) {
+    const labelId = uniqueId("editorlabel");
+    label.setAttribute("id", labelId);
+    editorAttributes["aria-labelledby"] = labelId;
+  }
+
+  /**
+   * Toolbar features can be one of:
+   *
+   * - basic = only basic controls without headings
+   * - content = basic + headings
+   * - full = basic + headings + image + video
+   */
+  const features = container.dataset?.toolbar || "basic";
+  const options = JSON.parse(container.dataset.options);
+  // console.log("options for this editor", options, "container", container, "editorContainer", editorContainer, "input", input, "label", label)
+  const { context, contentTypes } = options;
+
+  const decidimOptions = {};
+
+  if (context !== "participant") {
+    decidimOptions.link = { allowTargetControl: true };
+  }
+
+  if (input.hasAttribute("maxlength")) {
+    decidimOptions.characterCount = { limit: parseInt(input.getAttribute("maxlength"), 10) };
+  }
+
+  if (features === "basic") {
+    decidimOptions.heading = false;
+  }
+
+  if (features === "full" || DecidimAwesome.allow_videos_in_editors) {
+    decidimOptions.videoEmbed = true;
+  }
+
+  if (features === "full" || DecidimAwesome.allow_images_in_editors) {
+    const { uploadImagesPath, uploadDialogSelector } = options;
+    decidimOptions.image = {
+      uploadDialogSelector,
+      contentTypes: contentTypes.image,
+      uploadImagesPath
+    };
+  }
+
+  if (container.classList.contains("js-hashtags")) {
+    decidimOptions.hashtag = true;
+  }
+  if (container.classList.contains("js-mentions")) {
+    decidimOptions.mention = true;
+  }
+  if (container.classList.contains("js-emojis")) {
+    decidimOptions.emoji = true;
+  }
+
+  const editor = new Editor({
+    element: editorContainer,
+    editorProps: { attributes: editorAttributes },
+    content: input.value,
+    editable: !input.disabled,
+    extensions: [DecidimKit.configure(decidimOptions)]
+  });
+
+  const toolbar = createEditorToolbar(editor);
+  container.insertBefore(toolbar, editorContainer);
+
+  editor.on("update", () => (input.value = editor.getHTML()));
+
+  return editor;
+}

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

@@ -1,6 +1,6 @@
-import FormStorage from "form-storage"
+import FormStorage from "form-storage";
 
-$(() => {
+document.addEventListener("DOMContentLoaded", () => {
   window.DecidimAwesome = window.DecidimAwesome || {};
   if (!window.DecidimAwesome.auto_save_forms) {
     return;
@@ -14,9 +14,9 @@ $(() => {
 
   const storeId = `awesome_autosave:${questionnaireId}`;
   const storeCheckboxesId = `awesome_autosave:checkboxes:${questionnaireId}`;
-  const $form = $("form.answer-questionnaire");
+  const form = document.querySelector("form.answer-questionnaire");
 
-  if (!$form.length) {
+  if (!form) {
     if (window.DecidimAwesome.questionnaire_answered) {
       // console.log("Questionnaire already answered, remove any data saved");
       window.localStorage.removeItem(storeId);
@@ -26,68 +26,69 @@ $(() => {
     return;
   }
 
-  const store = new FormStorage(`#${$form.attr("id")}`, {
+  const store = new FormStorage(`#${form.id}`, {
     name: storeId,
     ignores: [
       // '[type="hidden"]',
       '[name="utf8"]',
       '[name="authenticity_token"]',
       "[disabled]",
-      '[type="checkbox"]' // there are problems with matrix questions
+      // there are problems with matrix questions
+      '[type="checkbox"]'
     ]
   });
 
-  const showMsg = (msg, error = false, default_time = 700) => {
+  const showMsg = (msg, error = false, defaultTime = 700) => {
     const time = error
       ? 5000
-      : default_time;
-    const $div = $(`<div class="awesome_autosave-notice${error
+      : defaultTime;
+    const div = document.createElement("div");
+    div.className = `awesome_autosave-notice${error
       ? " error"
-      : ""}">${msg}</div>`).
-      appendTo($form);
+      : ""}`;
+    div.innerHTML = msg;
+    form.appendChild(div);
+    // console.log("showMsg", "form", form, "div", div, "msg", msg, "error", error, "defaultTime", defaultTime, "time", time);
     setTimeout(() => {
-      $div.fadeOut(500, () => {
-        $div.remove();
-      });
+      div.remove();
     }, time);
   };
 
   if (!window.localStorage) {
-    showMsg(window.DecidimAwesome.texts.autosaved_error, true);
+    showMsg(window.DecidimAwesome.texts.autosavedError, true);
     return;
   }
 
   if (window.localStorage.getItem(storeId)) {
-    showMsg(window.DecidimAwesome.texts.autosaved_retrieved, false, 5000);
+    showMsg(window.DecidimAwesome.texts.autosavedRetrieved, false, 5000);
   }
 
   // restore if available
-  store.apply();
+  store.apply(); // eslint-disable-line prefer-reflect
   // restore checkboxes
   try {
     let checkboxes = JSON.parse(window.localStorage.getItem(storeCheckboxesId));
-    for (let id in checkboxes) {
-      $(`#${id}`).prop("checked", checkboxes[id]);
-    }
-  } catch (e) {
+    Object.keys(checkboxes).forEach((id) => {
+      if (Object.prototype.hasOwnProperty.call(checkboxes, id)) {// eslint-disable-line prefer-reflect
+        document.getElementById(id).checked = checkboxes[id];
+      }
+    });
+  } catch (evt) {
     console.log("No checkboxes found");
   }
-  // this trigger the "change" event, it seems that it is too much
-  // $form.find('input, textarea, select').change();
 
   const save = () => {
     store.save();
     // save checkbox manually
     let checkboxes = {};
-    $form.find('input[type="checkbox"]').each((index, el) => {
+    form.querySelectorAll('input[type="checkbox"]').forEach((el) => {
       checkboxes[el.id] = el.checked;
     });
     window.localStorage.setItem(storeCheckboxesId, JSON.stringify(checkboxes));
-    showMsg(window.DecidimAwesome.texts.autosaved_success);
+    showMsg(window.DecidimAwesome.texts.autosavedSuccess);
   };
 
   // save changes when modifications
-  $form.find("input, textarea, select").on("change", () => {
-    save();
-  });
+  form.addEventListener("change", save);
 });
+