UPDATE: Structure

mapBuilder/templates/main.tpl

@@ -104,7 +104,7 @@
       <div id="layerStoreHolder">
         <div id="filterButtons" class="btn-group-toggle" data-toggle="buttons">
           <label class="btn btn-secondary btn-sm active"  id="filterButtonNo">
-            <input type="radio" autocomplete="off" checked> {@mapBuilder~dictionary.filter.button.no@}
+            <input type="radio" name="No" autocomplete="off" checked> {@mapBuilder~dictionary.filter.button.no@}
           </label>
           <label class="btn btn-secondary btn-sm" id="filterButtonExtent">
             <input type="radio" name="Extent" autocomplete="off"> {@mapBuilder~dictionary.filter.button.extent@}

mapBuilder/www/js/main.js

@@ -32,6 +32,9 @@ import {CustomProgress} from "./components/inkmap/ProgressBar";
 
 import {getJobStatus, queuePrint} from './dist/inkmap.js';
 
+// Filters
+import {ExtentFilter} from './modules/Filter/FilterExtent.js';
+
 // Extent on metropolitan France if not defined in mapBuilder.ini.php
 var originalCenter = [217806.92414447578, 5853470.637803803];
 var originalZoom = 6;
@@ -354,13 +357,11 @@ $(function() {
     // Filter if is active
     if (!document.getElementById("filterButtonNo").classList.contains("active")) {
 
-      const filterButtons = document.querySelectorAll('#filterButtons > label');
+      const filterInstance = new ExtentFilter(listTree);
 
-      for (let i = 1; i < filterButtons.length; i++) {
-        if (filterButtons[i].classList.contains("active")) {
-          filter(filterButtons[i].children[0].name);
-        }
-      }
+      filterInstance.filter().then(r => {
+        endFilter();
+      });
     }
   }
 
@@ -435,35 +436,35 @@ $(function() {
 
   listTree = layerStore.getTree();
 
-  // Carry all filter buttons except "no filter"
-  const listButtons = document.querySelectorAll('#filterButtons > label');
+  // Carry filter buttons
+  initFilterButtons();
 
-  for (let i = 1; i < listButtons.length; i++) {
-    let filterType = listButtons[i].children[0].name
-    listButtons[i].addEventListener("click", function() {
-      filter(filterType);
+  /**
+   * Initialize filter buttons.
+   */
+  function initFilterButtons() {
+    document.querySelectorAll('#filterButtons > label').forEach(button => {
+      const filterName = button.children[0].name;
+
+      button.addEventListener("click", async () => {
+        if (filterName === "No") {
+          listTree = layerStore.setAllVisible();
+        } else if (filterName === "Extent") {
+          const filterInstance = new ExtentFilter(listTree);
+          await filterInstance.filter();
+        }
+        layerStore.updateTree(listTree);
+      });
     });
   }
 
-  document.getElementById("filterButtonNo").addEventListener("click", function() {
-    listTree = layerStore.setAllVisible();
-    layerStore.updateTree(listTree);
-  });
-
   /**
-   * Filter the layers printed in the layer store
-   * It uses dynamic import for a better implementation
-   * @param {string} name - Name of the filter to apply
-   * @return {Promise<void>}
+   * End filter process by updating the tree.
    */
-  async function filter(name) {
-    const lib = await import(`./modules/Filter/Filter${name}.js`);
-    const filterInstance = new lib.Filter(listTree);
-
-    filterInstance.filter();
+  const endFilter = () => {
     layerStore.updateTree(listTree);
     listTree = layerStore.getTree();
-  }
+  };
 
   /**
    * Get the Layer node from its UUID

mapBuilder/www/js/modules/Filter/AbstractFilter.js

@@ -1,10 +1,5 @@
 import { LayerTreeFolder } from "../LayerTree/LayerTreeFolder";
 
-/**
- * Filter abstract class.
- * In order to create a new filter, you must extend this class like in the FilterExtent.js.
- * Then you need to add the button in the main template.
- */
 export class AbstractFilter {
 
   /**
@@ -24,7 +19,7 @@ export class AbstractFilter {
   /**
    * Filter the layer tree.
    */
-  filter() {
+  async filter() {
     for (let i = 0; i < this._layerTree.length; i++) {
       this._currentElement = this._layerTree[i];
       this.recFilter(this._layerTree[i]);

mapBuilder/www/js/modules/Filter/FilterExtent.js

@@ -2,7 +2,7 @@ import { intersects } from 'ol/extent';
 import { transformExtent } from "ol/proj";
 import { AbstractFilter } from "./AbstractFilter";
 
-export class Filter extends AbstractFilter {
+export class ExtentFilter extends AbstractFilter {
 
   /**
    * Filter the layer tree using extent of layers.