feat: global layer exclusivity

elements/layercontrol/src/main.js

@@ -60,6 +60,7 @@ export class EOxLayerControl extends LitElement {
     unstyled: { type: Boolean },
     styleOverride: { type: String },
     toolsAsList: { type: Boolean },
+    isGloballyExclusive: { type: Boolean },
   };
 
   /**
@@ -144,6 +145,13 @@ export class EOxLayerControl extends LitElement {
      * @type {Boolean}
      */
     this.toolsAsList = false;
+
+    /**
+     * Enable global exclusivity for layers that are not restricted to a group
+     *
+     * @type {Boolean}
+     */
+    this.isGloballyExclusive = false;
   }
 
   /**

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,43 @@ 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 }),

elements/layercontrol/src/methods/layercontrol/first-update.js

@@ -16,6 +16,20 @@ const firstUpdatedMethod = (EOxLayerControl) => {
     EOxLayerControl.map = foundElement.map;
   }
 
+  window.setTimeout(() => {
+    const radioButtons = EOxLayerControl.shadowRoot
+      .querySelector("eox-layercontrol-layer-list")
+      .querySelectorAll("input[type='radio']");
+
+    radioButtons.forEach((radioButton, index) => {
+      if (index === 0) {
+        radioButton.checked = true;
+      } else {
+        radioButton.checked = false;
+      }
+    });
+  }, 30);
+
   return foundElement;
 };
 

elements/layercontrol/stories/globally-exclusive-layers.js

@@ -0,0 +1,81 @@
+import { html } from "lit";
+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: "Wind 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, layerControlExclusive: true },
+      { ...STORIES_LAYER_SENTINEL_HUB.no2, layerControlExclusive: true },
+      STORIES_LAYER_REGION,
+    ],
+  },
+  {
+    type: "Group",
+    properties: {
+      id: "group1",
+      title: "Background Layers",
+      //layerControlExclusive: true,
+    },
+    layers: [
+      { ...STORIES_LAYER_S2, layerControlExclusive: true },
+      STORIES_LAYER_OSM,
+    ],
+  },
+];
+
+export const GloballyExclusiveLayers = {
+  args: {
+    idProperty: "id",
+    titleProperty: "title",
+    unstyled: false,
+  },
+  render: (args) => html`
+    <div style="display: flex">
+      <eox-layercontrol
+        .idProperty=${args.idProperty}
+        .titleProperty=${args.titleProperty}
+        .unstyled=${args.unstyled}
+        .isGloballyExclusive=${true}
+        for="eox-map"
+      ></eox-layercontrol>
+      <eox-map
+        .style=${STORIES_MAP_STYLE}
+        .zoom=${3}
+        .layers=${STORIES_MAIN_MAP_LAYERS}
+      ></eox-map>
+    </div>
+  `,
+};
+
+export default GloballyExclusiveLayers;

elements/layercontrol/stories/index.js

@@ -18,3 +18,4 @@ export { default as addExternalLayerStory } from "./add-external-layer";
 export { default as layerZoomStateStory } from "./layer-zoom-state";
 export { default as unstyledStory } from "./unstyled";
 export { default as toolsAsListStory } from "./tools-as-list";
+export { default as globallyExclusiveLayersStory } from "./globally-exclusive-layers";

elements/layercontrol/stories/layercontrol.stories.js

@@ -13,6 +13,7 @@ import {
   layerZoomStateStory,
   toolsAsListStory,
   layerLegendStory,
+  globallyExclusiveLayersStory,
 } from ".";
 
 export default {
@@ -110,3 +111,8 @@ export const Unstyled = unstyledStory;
  * Tools rendered as list instead of tabs
  */
 export const ToolsAsList = toolsAsListStory;
+
+/**
+ * Select a single radio button out of all available ones, not just on the same level.
+ */
+export const GloballyExclusiveLayers = globallyExclusiveLayersStory;