decidim-decidim_awesome 0.10.2 → 0.11.2

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

@@ -14,8 +14,8 @@ export default class Controller {
   }
 
   getLabel() {
-    let text = this.awesomeMap.config.menu.mergeComponents || this.component.name;
-    if (!text) {
+    let text = this.component.name;
+    if (!text || this.awesomeMap.config.menu.mergeComponents) {
       text = window.DecidimAwesome.texts[this.component.type];
     }
     return `<span class="awesome_map-component" id="awesome_map-component_${this.component.id}" title="0" data-layer="${this.component.type}">${text}</span>`
@@ -96,6 +96,7 @@ export default class Controller {
 
       }).setLatLng(marker.getLatLng()).setContent(dom);
       this.awesomeMap.map.addLayer(pop);
+      // console.log("marker click", node, "pop", pop, "marker", marker, "dom", dom, "templateId", this.templateId)
     });
     node.marker = marker;
     node.component = this.component;
@@ -110,7 +111,7 @@ export default class Controller {
         this.awesomeMap.layers[cat.id].group.addLayer(marker);
         this.awesomeMap.controls.showCategory(cat);
       } catch (evt) {
-        console.error("Failed category marker assignation", marker, evt.message);
+        console.error("Failed category marker assignation. category:", category, "marker:", marker, evt.message);
       }
     }
   }
@@ -121,7 +122,7 @@ export default class Controller {
       try {
         this.awesomeMap.controls.addHashtagsControls(hashtags, marker);
       } catch (evt) {
-        console.error("Failed hashtags marker assignation", marker, evt.message);
+        console.error("Failed hashtags marker assignation. hashtags:", hashtags, "marker:", marker, evt.message);
       }
     }
   }
@@ -132,14 +133,13 @@ export default class Controller {
     this.onFinished();
   }
 
-  createIcon(Builder, color) {
-    return new Builder({
-      color: "#000000",
-      fillColor: color,
-      circleFillColor: color,
-      weight: 1,
-      stroke: color,
-      fillOpacity: 0.9
+  createIcon(color) {
+    const size = 36;
+    return L.divIcon({
+      html: `
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${size}px" height="${size}px" class="text-secondary" style="color: ${color}"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M18.364 17.364L12 23.728l-6.364-6.364a9 9 0 1 1 12.728 0zM12 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0-2a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>`,
+      iconAnchor: [0.5 * size, size],
+      popupAnchor: [0, -0.5 * size]
     });
   }
 }

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

@@ -2,12 +2,6 @@ import * as L from "leaflet";
 import Controller from "src/decidim/decidim_awesome/awesome_map/controllers/controller";
 import MeetingsFetcher from "src/decidim/decidim_awesome/awesome_map/api/meetings_fetcher";
 
-const MeetingIcon = L.DivIcon.SVGIcon.DecidimIcon.extend({
-  _createPathDescription: function() {
-    return "M 15.991543,4 C 7.3956015,4 2.9250351,10.5 3.000951,16.999999 3.1063486,26.460968 12.747693,30.000004 15.991543,43 19.242091,30.000004 29,26.255134 29,16.999999 29,10.5 23.951131,4 15.996007,4 m -0.153508,2.6000001 a 2.1720294,2.1076698 0 0 1 2.330514,2.1124998 2.177008,2.1125006 0 0 1 -4.354016,0 2.1720294,2.1076698 0 0 1 2.023502,-2.1124998 m -2.651707,4.8056679 h 5.610202 l 3.935584,7.569899 -1.926038,0.934266 -2.009546,-3.859265 v 14.557403 h -2.484243 v -9.126003 h -0.642162 v 9.126003 H 13.190347 V 16.050568 l -2.009545,3.859265 -1.926036,-0.934266 3.935581,-7.569899";
-  }
-});
-
 export default class MeetingsController extends Controller {
   constructor(awesomeMap, component) {
     super(awesomeMap, component)
@@ -19,7 +13,7 @@ export default class MeetingsController extends Controller {
     // for each meeting, create a marker with an associated popup
     this.fetcher.onNode = (meeting) => {
       let marker = new L.Marker([meeting.coordinates.latitude, meeting.coordinates.longitude], {
-        icon: this.createIcon(MeetingIcon, this.awesomeMap.getCategory(meeting.category).color),
+        icon: this.createIcon(this.awesomeMap.getCategory(meeting.category).color),
         title: meeting.title.translation
       });
       // console.log("new meeting", meeting, marker)
@@ -28,4 +22,14 @@ export default class MeetingsController extends Controller {
 
     this.fetcher.fetch();
   }
+
+  createIcon(color) {
+    const size = 36;
+    return L.divIcon({
+      html: `
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="${size}px" height="${size}px" class="text-primary" style="color: ${color}"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M 15.991543,4 C 7.3956015,4 2.9250351,10.5 3.000951,16.999999 3.1063486,26.460968 12.747693,30.000004 15.991543,43 19.242091,30.000004 29,26.255134 29,16.999999 29,10.5 23.951131,4 15.996007,4 m -0.153508,2.6000001 a 2.1720294,2.1076698 0 0 1 2.330514,2.1124998 2.177008,2.1125006 0 0 1 -4.354016,0 2.1720294,2.1076698 0 0 1 2.023502,-2.1124998 m -2.651707,4.8056679 h 5.610202 l 3.935584,7.569899 -1.926038,0.934266 -2.009546,-3.859265 v 14.557403 h -2.484243 v -9.126003 h -0.642162 v 9.126003 H 13.190347 V 16.050568 l -2.009545,3.859265 -1.926036,-0.934266 3.935581,-7.569899"/></svg>`,
+      iconAnchor: [0.5 * size, size],
+      popupAnchor: [0, -0.5 * size]
+    });
+  }
 }

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;
@@ -67,16 +60,16 @@ export default class ProposalsController extends Controller {
       // 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 (evt) { 
+        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

@@ -14,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", () => {
@@ -38,8 +38,14 @@ export default class ControlsUI {
     $("#awesome-map").on("click", ".awesome_map-title-control", (evt) => {
       evt.preventDefault();
       evt.stopPropagation();
-      $("#awesome_map-categories-control").toggleClass("active");
-      $("#awesome_map-hashtags-control").toggleClass("active");
+      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
@@ -60,11 +66,27 @@ export default class ControlsUI {
       $("#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() {
@@ -76,7 +98,12 @@ export default class ControlsUI {
         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
@@ -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]) {
@@ -123,30 +150,34 @@ export default class ControlsUI {
             group: new L.FeatureGroup.SubGroup(this.awesomeMap.cluster)
           };
           this.awesomeMap.map.addLayer(this.awesomeMap.layers[hashtag.tag].group);
-          $("#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>`);
+          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"));
         }
         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, 10) + 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, 10) + 1} ${window.DecidimAwesome.texts.items}`);
-    // show parent if apply
-    $parent.show();
-    $parent.attr("title", `${parseInt($parent.attr("title") || 0, 10) + 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() {

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(",")
@@ -15,31 +15,40 @@ $(() => {
     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,7 +26,7 @@ $(() => {
     return;
   }
 
-  const store = new FormStorage(`#${$form.attr("id")}`, {
+  const store = new FormStorage(`#${form.id}`, {
     name: storeId,
     ignores: [
       // '[type="hidden"]',
@@ -34,27 +34,33 @@ $(() => {
       '[name="authenticity_token"]',
       "[disabled]",
       // there are problems with matrix questions
-      '[type="checkbox"]' 
+      '[type="checkbox"]'
     ]
   });
 
   const showMsg = (msg, error = false, defaultTime = 700) => {
-    const time = error ? 5000 : defaultTime; // eslint-disable-line no-ternary, multiline-ternary
-    const $div = $(`<div class="awesome_autosave-notice${error ? " error" : ""}">${msg}</div>`).appendTo($form); // eslint-disable-line no-ternary, multiline-ternary
+    const time = error
+      ? 5000
+      : defaultTime;
+    const div = document.createElement("div");
+    div.className = `awesome_autosave-notice${error
+      ? " error"
+      : ""}`;
+    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
@@ -62,28 +68,27 @@ $(() => {
   // restore checkboxes
   try {
     let checkboxes = JSON.parse(window.localStorage.getItem(storeCheckboxesId));
-    for (let id in checkboxes) { // eslint-disable-line guard-for-in
-      $(`#${id}`).prop("checked", checkboxes[id]);
-    }
+    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);
 });
+