feat(wip): implement global layer exclusivity as a global flag

EOX-A · Sep 3, 2024 · 8106bbe · 8106bbe
1 parent 492d972
commit 8106bbe
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 1 deletion.
diff --git a/elements/layercontrol/src/main.js b/elements/layercontrol/src/main.js
@@ -56,6 +56,7 @@ export class EOxLayerControl extends LitElement {
     addExternalLayers: { attribute: false },
     unstyled: { type: Boolean },
     styleOverride: { type: String },
+    isGloballyExclusive: { type: Boolean },
   };
 
   /**
@@ -133,6 +134,13 @@ export class EOxLayerControl extends LitElement {
      * @type {String}
      */
     this.styleOverride = "";
+
+    /**
+     * Enable global exclusivity for layers that is not restricted to a group
+     *
+     * @type {Boolean}
+     */
+    this.isGloballyExclusive = false;
   }
 
   /**

diff --git a/elements/layercontrol/src/methods/layer/input-click.js b/elements/layercontrol/src/methods/layer/input-click.js
@@ -7,6 +7,8 @@
 const inputClickMethod = (evt, EOxLayerControlLayer) => {
   const layer = EOxLayerControlLayer.layer; // The layer instance associated with the control.
 
+  console.log(layer);
+
   // Set the visibility of the layer based on the input's checked state.
   layer.setVisible(evt.target.checked);
 
@@ -31,6 +33,41 @@ const inputClickMethod = (evt, EOxLayerControlLayer) => {
     });
   }
 
+  //console.log(document.querySelector("eox-layercontrol").isGloballyExclusive);
+
+  // Handle globally exclusive layers
+  let layerControl = document.querySelector("eox-layercontrol");
+
+  if (evt.target.checked
+        && layer.get("layerControlExclusive")
+        && layerControl.isGloballyExclusive) {
+    console.log("Globally exclusive layer");
+    // *:has(> .layers > ul) { /* styles to apply to the tag */ }      
+
+    // Find all exclusive layers across all groups
+    const allLayers = layerControl
+      .shadowRoot
+      .querySelectorAll("eox-layercontrol-layer");
+
+    const allExclusiveLayers = Array.from(allLayers)
+      .filter((layer) => layer.layer.get("layerControlExclusive"));
+
+    console.log("allExclusiveLayers", allExclusiveLayers);
+
+    /*allExclusiveLayers.forEach((exclusiveLayerElement) => {
+      const exclusiveLayer = exclusiveLayerElement.layer;
+
+      console.log("exclusiveLayer", exclusiveLayer);
+
+      // Ensure we don't hide the currently checked layer
+      if (exclusiveLayer !== layer) {
+        exclusiveLayer.setVisible(false);
+        exclusiveLayerElement.closest("eox-layercontrol-layer").requestUpdate();
+      }
+    });*/
+  }
+
+
   // Dispatch a 'changed' event to signal a change in the layer's state.
   EOxLayerControlLayer.dispatchEvent(
     new CustomEvent("changed", { bubbles: true, detail: layer })

diff --git a/elements/layercontrol/stories/primary.js b/elements/layercontrol/stories/primary.js
@@ -1,5 +1,59 @@
 import { html } from "lit";
-import { STORIES_MAIN_MAP_LAYERS, STORIES_MAP_STYLE } from "../src/enums";
+import {
+  /*STORIES_MAIN_MAP_LAYERS,*/
+  STORIES_MAP_STYLE,
+  STORIES_LAYER_SENTINEL_HUB,
+  STORIES_LAYER_REGION,
+  STORIES_LAYER_S2,
+  STORIES_LAYER_OSM,
+} from "../src/enums";
+
+const STORIES_MAIN_MAP_LAYERS = [
+  {
+    type: "Group",
+    properties: {
+      id: "group3",
+      title: "Data Layers",
+      layerControlExpand: true,
+      layerControlExclusive: true,
+      description: "# Hello world",
+    },
+    layers: [
+      { ...STORIES_LAYER_SENTINEL_HUB.wind, layerControlGloballyExclusive: true },
+    ],
+  },
+  {
+    type: "Group",
+    properties: {
+      id: "group2",
+      title: "Data Layers",
+      layerControlExpand: true,
+      layerControlExclusive: true,
+      description: "# Hello world",
+    },
+    layers: [
+      //{ ...STORIES_LAYER_SENTINEL_HUB.wind, layerControlGloballyExclusive: true },
+      { ...STORIES_LAYER_SENTINEL_HUB.no2, layerControlGloballyExclusive: true },
+      STORIES_LAYER_REGION,
+    ],
+  },
+  {
+    type: "Group",
+    properties: {
+      id: "group1",
+      title: "Background Layers",
+      //layerControlExclusive: true,
+    },
+    layers: [
+      { ...STORIES_LAYER_S2, layerControlGloballyExclusive: true },
+      STORIES_LAYER_OSM,
+    ],
+  },
+];
+
+
+
+// layerControlExclusive
 
 export const Primary = {
   args: {
@@ -13,6 +67,7 @@ export const Primary = {
         .idProperty=${args.idProperty}
         .titleProperty=${args.titleProperty}
         .unstyled=${args.unstyled}
+        .isGloballyExclusive=${true}
         for="eox-map"
       ></eox-layercontrol>
       <eox-map