FIX: Linters

mapBuilder/templates/main.tpl

@@ -102,7 +102,7 @@
         <span id="layers-loading"></span>
       </div>
       <div id="layer-store-holder">
-        <div id="filterButtons" class="btn-group-toggle" data-toggle="buttons">
+        <div id="filter-buttons" class="btn-group-toggle" data-toggle="buttons">
           <label class="btn btn-secondary btn-sm active"  id="filterButtonNo">
             <input type="radio" name="No" autocomplete="off" checked> {@mapBuilder~dictionary.filter.button.no@}
           </label>

mapBuilder/www/css/main.css

@@ -460,14 +460,14 @@ custom-slider .thumb {
 
 /* CSS for filtering buttons */
 
-#filterButtons {
+#filter-buttons {
     display: flex;
     justify-content: space-around;
     margin-bottom: 12px;
     flex-wrap: wrap;
     gap: 10px;
 }
 
-#filterButtons > label:first-child {
+#filter-buttons > label:first-child {
     width: 100%;
 }

mapBuilder/www/js/components/LayerStore.js

@@ -43,11 +43,11 @@ export class LayerStore extends HTMLElement {
      * @returns {TemplateResult<1>|null} The template of the folder or null if the folder shouldn't be visible.
      */
     folderTemplate(element) {
-    if (!element.isVisible()) {
-      // We use 'null' value because "html``" is not really empty
-      return null;
-    }
-    //Check if the folder will have to load children from a project.
+        if (!element.isVisible()) {
+            // We use 'null' value because "html``" is not really empty
+            return null;
+        }
+        //Check if the folder will have to load children from a project.
         let tagLazy = element.isLazy() ? "lazy" : "";
 
         let icoSpan;
@@ -88,17 +88,17 @@ export class LayerStore extends HTMLElement {
                     childTemplate = this.folderTemplate(value);
                 } else {
                     childTemplate = this.layerTemplate(value);
-        }
+                }
                 if (childTemplate !== null) {
-          allChildTemplate = html`
+                    allChildTemplate = html`
             ${allChildTemplate}
             ${childTemplate}
         `;
-        }
-      });
-      // Prevent empty 'ul' tag which are not well displayed
-      if (allChildTemplate.strings[0] !== "") {
-        template = html`
+                }
+            });
+            // Prevent empty 'ul' tag which are not well displayed
+            if (allChildTemplate.strings[0] !== "") {
+                template = html`
             ${template}
             <ul class="layer-store-tree"
                 @mouseover='${(event) => {
@@ -111,7 +111,7 @@ export class LayerStore extends HTMLElement {
                 ${allChildTemplate}
             </ul>
         `;
-      }
+            }
         }
         return template;
     }
@@ -122,10 +122,10 @@ export class LayerStore extends HTMLElement {
      * @returns {TemplateResult<1>|null} The template of the layer or null if the layer element shouldn't be visible.
      */
     layerTemplate(element) {
-    if (!element.isVisible()) {
-      // We use 'null' value because "html``" is not really empty
-      return null;
-    }
+        if (!element.isVisible()) {
+            // We use 'null' value because "html``" is not really empty
+            return null;
+        }
 
         var styleOption = html``;
         element.getStyle().forEach(function (style) {
@@ -400,42 +400,42 @@ export class LayerStore extends HTMLElement {
         return this.tree;
     }
 
-  /**
-   * Update the tree.
-   * @param {[LayerTreeElement]} tree - The new tree.
-   */
-  updateTree(tree) {
-    this.tree = tree;
-    this.render();
-  }
-
-  /**
-   * Set visibility of layers from layerStore to true.
-   * Allow the layerStore to print all layers.
-   * Call a recursive function to set all layers visible.
-   * @return {[LayerTreeElement]} - The tree.
-   */
-  setAllVisible() {
-    for (let i = 0; i < this.tree.length; i++) {
-      this.recSetVisible(this.tree[i]);
+    /**
+     * Update the tree.
+     * @param {[LayerTreeElement]} tree - The new tree.
+     */
+    updateTree(tree) {
+        this.tree = tree;
+        this.render();
     }
-    return this.tree;
-  }
-
-  /**
-   * Recursive function to set all layers visible.
-   * @param {LayerTreeFolder|LayerTreeLayer} treeElement - Layer tree element to change visibility.
-   */
-  recSetVisible(treeElement) {
-    treeElement.setVisible(true);
-    if (treeElement instanceof LayerTreeLayer) {
-      return;
+
+    /**
+     * Set visibility of layers from layerStore to true.
+     * Allow the layerStore to print all layers.
+     * Call a recursive function to set all layers visible.
+     * @returns {[LayerTreeElement]} - The tree.
+     */
+    setAllVisible() {
+        for (let i = 0; i < this.tree.length; i++) {
+            this.recSetVisible(this.tree[i]);
+        }
+        return this.tree;
     }
-    let children = treeElement.getChildren();
-    for (let i = 0; i < children.length; i++) {
-      this.recSetVisible(children[i]);
+
+    /**
+     * Recursive function to set all layers visible.
+     * @param {LayerTreeFolder|LayerTreeLayer} treeElement - Layer tree element to change visibility.
+     */
+    recSetVisible(treeElement) {
+        treeElement.setVisible(true);
+        if (treeElement instanceof LayerTreeLayer) {
+            return;
+        }
+        let children = treeElement.getChildren();
+        for (let i = 0; i < children.length; i++) {
+            this.recSetVisible(children[i]);
+        }
     }
-  }
 }
 
 customElements.define('lizmap-layer-store', LayerStore);

mapBuilder/www/js/main.js

@@ -361,23 +361,23 @@ $(function() {
         if(document.querySelector(".ol-drag-zoom").classList.contains("active")){
             document.querySelector(".ol-drag-zoom.active").classList.remove("active");
 
-      evt.map.getInteractions().forEach(function(interaction) {
-        if(interaction instanceof DragZoom){
-          interaction.condition_ = shiftKeyOnlyCondition;
+            evt.map.getInteractions().forEach(function(interaction) {
+                if(interaction instanceof DragZoom){
+                    interaction.condition_ = shiftKeyOnlyCondition;
+                }
+            });
         }
-      });
-    }
 
-    // Filter if is active
-    if (!document.getElementById("filterButtonNo").classList.contains("active")) {
+        // Filter if is active
+        if (!document.getElementById("filterButtonNo").classList.contains("active")) {
 
-      const filterInstance = new ExtentFilter(listTree);
+            const filterInstance = new ExtentFilter(listTree);
 
-      filterInstance.filter().then(r => {
-        endFilter();
-      });
+            filterInstance.filter().then(() => {
+                endFilter();
+            });
+        }
     }
-  }
 
     mapBuilder.map.on('moveend', onMoveEnd);
 
@@ -450,35 +450,35 @@ $(function() {
 
     listTree = layerStore.getTree();
 
-  // Carry filter buttons
-  initFilterButtons();
-
-  /**
-   * 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);
-      });
-    });
-  }
+    // Carry filter buttons
+    initFilterButtons();
 
-  /**
-   * End filter process by updating the tree.
-   */
-  const endFilter = () => {
-    layerStore.updateTree(listTree);
-    listTree = layerStore.getTree();
-  };
+    /**
+     * Initialize filter buttons.
+     */
+    function initFilterButtons() {
+        document.querySelectorAll('#filter-buttons > 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);
+            });
+        });
+    }
+
+    /**
+     * End filter process by updating the tree.
+     */
+    const endFilter = () => {
+        layerStore.updateTree(listTree);
+        listTree = layerStore.getTree();
+    };
 
     /* Handle custom addLayerButton clicks */
     document.querySelector('#layer-store-holder').addEventListener('click', function (e) {

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

@@ -2,58 +2,53 @@ import { LayerTreeFolder } from "../LayerTree/LayerTreeFolder";
 
 export class AbstractFilter {
 
-  /**
-   * @type {LayerTreeFolder} Layer currently filtered.
-   * @private
-   */
-  _currentElement;
-
-  /**
-   * Filter the layer tree.
-   * @param {LayerTreeFolder[]} layerTree - Layer tree to filter.
-   */
-  constructor(layerTree) {
-    this._layerTree = layerTree;
-  }
+    /**
+     * Filter the layer tree.
+     * @param {LayerTreeFolder[]} layerTree - Layer tree to filter.
+     */
+    constructor(layerTree) {
+        this._layerTree = layerTree;
+    }
 
-  /**
-   * Filter the layer tree.
-   */
-  async filter() {
-    for (let i = 0; i < this._layerTree.length; i++) {
-      this._currentElement = this._layerTree[i];
-      this.recFilter(this._layerTree[i]);
+    /**
+     * Filter the layer tree.
+     */
+    async filter() {
+        for (let i = 0; i < this._layerTree.length; i++) {
+            this._currentElement = this._layerTree[i];
+            this.recFilter(this._layerTree[i]);
+        }
     }
-  }
 
-  /**
-   * Recursive function to filter a layer.
-   * @param {LayerTreeFolder|LayerTreeLayer} layerTreeElement - Layer tree element to filter.
-   */
-  recFilter(layerTreeElement) {
-    throw new Error("Method 'recFilter()' must be implemented.");
-  }
+    /**
+     * Recursive function to filter a layer.
+     * @param {import("../LayerTree/LayerTreeFolder").LayerTreeFolder|import("../LayerTree/LayerTreeLayer").LayerTreeLayer} layerTreeElement - Layer tree element to filter.
+     */
+    // eslint-disable-next-line no-unused-vars
+    recFilter(layerTreeElement) {
+        throw new Error("Method 'recFilter()' must be implemented.");
+    }
 
-  /**
-   * Set a layer to a decided visibility.
-   * @param {boolean} visibility - Visibility of the layer.
-   */
-  switchAllVisible(visibility) {
-    this.recSwitchAllVisible(this._currentElement, visibility);
-  }
+    /**
+     * Set a layer to a decided visibility.
+     * @param {boolean} visibility - Visibility of the layer.
+     */
+    switchAllVisible(visibility) {
+        this.recSwitchAllVisible(this._currentElement, visibility);
+    }
 
-  /**
-   * Recursive function to set a layer to a decided visibility.
-   * @param {LayerTreeFolder|LayerTreeLayer} layerTreeElement - Layer tree element to set invisible.
-   * @param {boolean} visibility - Visibility of the layer.
-   */
-  recSwitchAllVisible(layerTreeElement, visibility) {
-    if (layerTreeElement instanceof LayerTreeFolder) {
-      let children = layerTreeElement.getChildren();
-      for (let i = 0; i < children.length; i++) {
-        this.recSwitchAllVisible(children[i], visibility);
-      }
+    /**
+     * Recursive function to set a layer to a decided visibility.
+     * @param {import("../LayerTree/LayerTreeFolder").LayerTreeFolder|import("../LayerTree/LayerTreeLayer").LayerTreeLayer} layerTreeElement - Layer tree element to set invisible.
+     * @param {boolean} visibility - Visibility of the layer.
+     */
+    recSwitchAllVisible(layerTreeElement, visibility) {
+        if (layerTreeElement instanceof LayerTreeFolder) {
+            let children = layerTreeElement.getChildren();
+            for (let i = 0; i < children.length; i++) {
+                this.recSwitchAllVisible(children[i], visibility);
+            }
+        }
+        layerTreeElement.setVisible(visibility);
     }
-    layerTreeElement.setVisible(visibility);
-  }
 }