Treeview: handle item selected state

3liz · Jul 25, 2023 · a1f9d5e · a1f9d5e
1 parent f6d7c4a
commit a1f9d5e
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 10 deletions.
diff --git a/assets/src/components/Treeview.js b/assets/src/components/Treeview.js
@@ -6,6 +6,7 @@ import { when } from 'lit-html/directives/when.js';
 export default class Treeview extends HTMLElement {
     constructor() {
         super();
+        this._itemNameSelected;
     }
 
     connectedCallback() {
@@ -43,7 +44,7 @@ export default class Treeview extends HTMLElement {
                     ? html`<div class="expandable ${item.expanded ? 'expanded' : ''}" @click=${() => item.expanded = !item.expanded}></div>`
                     : ''
                 }
-                <div class="${item.checked ? 'checked' : ''} ${item.type}">
+                <div class="${item.checked ? 'checked' : ''} ${item.type} ${item.name === this._itemNameSelected ? 'selected' : ''}">
                     <div class="loading ${item.loading ? 'spinner' : ''}"></div>
                     <input class="${layerTreeGroupState.mutuallyExclusive ? 'rounded-checkbox' : ''}" type="checkbox" id="node-${item.name}" .checked=${item.checked} @click=${() => item.checked = !item.checked} >
                     <div class="node ${item.isFiltered ? 'filtered' : ''}">
@@ -63,7 +64,7 @@ export default class Treeview extends HTMLElement {
                                     </a>`
                                 : ''
                             }
-                            <i class="icon-info-sign" @click=${() => this._toggleMetadata(item.name, item.type)}></i>
+                            <i class="icon-info-sign" @click=${() => this.itemNameSelected = item.name}></i>
                         </div>
                     </div>
                 </div>
@@ -94,6 +95,20 @@ export default class Treeview extends HTMLElement {
         );
     }
 
+    set itemNameSelected(itemName) {
+        if (this._itemNameSelected === itemName) {
+            this._itemNameSelected = undefined;
+        } else {
+            this._itemNameSelected = itemName;
+        }
+
+        lizMap.events.triggerEvent("lizmapswitcheritemselected",
+            { 'name': itemName, 'selected': this._itemNameSelected !== undefined }
+        );
+
+        this._onChange();
+    }
+
     _createDocLink(layerName) {
         let url = lizMap.config.layers?.[layerName]?.link;
 
@@ -119,10 +134,4 @@ export default class Treeview extends HTMLElement {
             event.preventDefault();
         }
     }
-
-    _toggleMetadata (layerName, isGroup){
-        lizMap.events.triggerEvent("lizmapswitcheritemselected",
-          { 'name': layerName, 'type': isGroup ? "group" : "layer", 'selected': true}
-        )
-    }
 }
diff --git a/assets/src/legacy/switcher-layers-actions.js b/assets/src/legacy/switcher-layers-actions.js
@@ -46,7 +46,7 @@ var lizLayerActionButtons = function() {
                 { 'name': itemName, 'type': itemType, 'selected': false}
             );
 
-            $('#switcher tr.selected').removeClass('selected');
+            document.querySelector('lizmap-treeview').itemNameSelected = undefined;
         });
     }
 

diff --git a/assets/src/modules/BaseLayersMap.js b/assets/src/modules/BaseLayersMap.js
@@ -334,7 +334,7 @@ export default class BaseLayersMap extends olMap {
         mainLizmap.state.layersAndGroupsCollection.addListener(
             evt => {
                 const activeBaseLayer = this.getActiveBaseLayer();
-                if (activeBaseLayer.get("name") === evt.name) {
+                if (activeBaseLayer && activeBaseLayer.get("name") === evt.name) {
                     activeBaseLayer.setOpacity(evt.opacity);
                 } else {
                     this.getLayerOrGroupByName(evt.name).setOpacity(evt.opacity);

diff --git a/lizmap/www/assets/css/map.css b/lizmap/www/assets/css/map.css
@@ -3008,6 +3008,12 @@ lizmap-treeview li {
 
 lizmap-treeview li > div {
   display: flex;
+  border: 1px solid transparent;
+  padding-left: 4px;
+}
+
+lizmap-treeview li > div.selected {
+  border-color: #0094D6;
 }
 
 lizmap-treeview div.expandable{