Feat: rework sidebar toggle to work with hasSidebar property and adde…

CHANGELOG.MD

@@ -12,6 +12,11 @@ All notable changes to this project will be documented in this file.
 -->
 ## [Unreleased]
 
+### Changed
+- Toggle sidebar functionality to work with hasSidebar property
+
+### Added
+- showSidebar property to set default visibility of sidebar
 
 ## [1.6.2] - 2022-11-14
 

README.md

@@ -129,8 +129,10 @@ class ExampleComponent {
     @Input() defaultZoom = 14;
     /* The initial map center on load. */
     @Input() mapCenter: Array<number> = [51.215, 4.425];
-    /* Show a sidebar next to the map leaflet. A sidebar can contain any additional info you like. */
+    /* Shows button to open sidebar if true. A sidebar can contain any additional info you like. */
     @Input() hasSidebar = false;
+    /* If hasSidebar is true this will show whether the sidebar should be visible from the start */
+    @Input() showSidebar = false;
     /* Shows layermangement inside the sidebar. Layermanagement is used to add or remove featurelayers. */
     @Input() showLayerManagement = true;
     /* Show selection tools */

projects/ngx-location-viewer/src/lib/components/layer-management/layer-management.component.html

@@ -1,34 +1,21 @@
-<div class="sidebar">
-    <div class="sidebar__header">
-        <button
-            class="a-button-transparent a-button--default has-icon sidebar__close-button"
-            aria-label="Sluiten"
-            (click)="toggleLayermanagement()"
-        >
-            <span class="fa fa-close" aria-hidden="true"></span>
-        </button>
+<h1 class="has-base-font u-text-bold h5">Lagen</h1>
+<div class="u-margin-left-xs">
+    <div *ngIf="operationalLayer" class="u-margin-top">
+        <h2 class="has-base-font u-text-bold h6">Operationele laag:</h2>
+        <aui-layer
+            *ngIf="operationalLayer"
+            [layer]="operationalLayer"
+            [layerType]="layerTypes.operational"
+            (layerVisibiltyChange)="onLayerVisibilityChange($event)"
+        ></aui-layer>
     </div>
-    <div class="sidebar__content">
-        <h1 class="has-base-font u-text-bold h5">Lagen</h1>
-        <div class="u-margin-left-xs">
-            <div *ngIf="operationalLayer" class="u-margin-top">
-                <h2 class="has-base-font u-text-bold h6">Operationele laag:</h2>
-                <aui-layer
-                    *ngIf="operationalLayer"
-                    [layer]="operationalLayer"
-                    [layerType]="layerTypes.operational"
-                    (layerVisibiltyChange)="onLayerVisibilityChange($event)"
-                ></aui-layer>
-            </div>
-            <div *ngIf="supportingLayers" class="u-margin-top">
-                <h2 class="has-base-font u-text-bold h6">Ondersteunende lagen:</h2>
-                <aui-layer
-                    *ngFor="let layer of supportingLayers"
-                    [layer]="layer"
-                    [layerType]="layerTypes.supporting"
-                    (layerVisibiltyChange)="onLayerVisibilityChange($event)"
-                ></aui-layer>
-            </div>
-        </div>
+    <div *ngIf="supportingLayers" class="u-margin-top">
+        <h2 class="has-base-font u-text-bold h6">Ondersteunende lagen:</h2>
+        <aui-layer
+            *ngFor="let layer of supportingLayers"
+            [layer]="layer"
+            [layerType]="layerTypes.supporting"
+            (layerVisibiltyChange)="onLayerVisibilityChange($event)"
+        ></aui-layer>
     </div>
 </div>

projects/ngx-location-viewer/src/lib/components/layer-management/layer-management.component.ts

@@ -4,15 +4,13 @@ import { Layer } from '../../types/layer.model';
 
 @Component({
   selector: 'aui-layer-management',
-  templateUrl: './layer-management.component.html',
-  styleUrls: ['./layer-management.component.scss'],
+  templateUrl: './layer-management.component.html'
 })
 export class LayerManagementComponent implements OnInit {
   @Input() operationalLayer: Layer;
   @Input() supportingLayers: Layer[];
 
   @Output() layerVisibilityChange = new EventEmitter<LayerTypes>();
-  @Output() layerManagementClosed = new EventEmitter<void>();
 
   layerTypes = LayerTypes;
   constructor() { }
@@ -22,8 +20,4 @@ export class LayerManagementComponent implements OnInit {
   onLayerVisibilityChange(layerType: LayerTypes) {
     this.layerVisibilityChange.emit(layerType);
   }
-
-  toggleLayermanagement() {
-    this.layerManagementClosed.emit();
-  }
 }

projects/ngx-location-viewer/src/lib/components/ngx-location-viewer.component.html

@@ -1,21 +1,24 @@
-<aui-leaflet [leafletMap]="leafletMap" [hasSidebar]="hasSidebar">
-    <div *ngIf="hasSidebar">
-        <ng-content></ng-content>
-    </div>
-    <div *ngIf="showLayerManagement">
-        <aui-layer-management [supportingLayers]="supportingLayers" [operationalLayer]="operationalLayer" (layerVisibilityChange)="handleLayerVisibilityChange($event)" (layerManagementClosed)="toggleLayermanagement()"></aui-layer-management>
+<aui-leaflet [leafletMap]="leafletMap" [hasSidebar]="showSidebar">
+    <div class="sidebar" *ngIf="hasSidebar && showSidebar">
+        <div class="sidebar__header">
+            <button class="a-button-transparent a-button--default has-icon sidebar__close-button" aria-label="Sluiten" (click)="toggleSidebar()"><span class="fa fa-close" aria-hidden="true"></span></button>
+        </div>
+        <div class="sidebar__content">
+            <ng-content></ng-content>
+            <aui-layer-management *ngIf="showLayerManagement" [supportingLayers]="supportingLayers" [operationalLayer]="operationalLayer" (layerVisibilityChange)="handleLayerVisibilityChange($event)" (layerManagementClosed)="toggleLayermanagement()"></aui-layer-management>
+        </div>
     </div>
     <div class="controls-top-left" controls top left>
         <button
-            *ngIf="showLayerManagement"
+            *ngIf="hasSidebar"
             type="button"
             class="a-button a-button--small has-icon a-button--block u-margin-bottom-xs"
             name="toggle-layermanagement"
-            [title]="hasSidebar ? 'Sluit lagenoverzicht' : 'Open lagenoverzicht'"
+            [title]="showSidebar? 'Sluit lagenoverzicht' : 'Open lagenoverzicht'"
             aria-label="Open/sluit lagenoverzicht"
-            (click)="toggleLayermanagement()"
+            (click)="toggleSidebar()"
         >
-            <span class="fa" [ngClass]="{ 'fa-angle-double-right': !hasSidebar, 'fa-angle-double-left': hasSidebar }"></span>
+            <span class="fa" [ngClass]="{ 'fa-angle-double-right': !showSidebar, 'fa-angle-double-left': showSidebar}"></span>
         </button>
         <div class="m-button-group m-button-group--vertical">
             <div *ngIf="leafletMap.operationalLayer && showSelectionTools" class="m-button-group m-button-group--horizontal">

projects/ngx-location-viewer/src/lib/components/ngx-location-viewer.component.scss

@@ -1,3 +1,5 @@
+@import '~@a-ui/core/dist/assets/styles/_quarks.scss';
+
 ::ng-deep {
     // styling of whatishere popup
     .whatishere-wrapper {
@@ -52,4 +54,14 @@
 
 .a-input__addon {
     padding-left: 0;
+}
+
+.sidebar__header {
+    position: relative;
+
+    .sidebar__close-button {
+        position: absolute;
+        right: -$spacer-xs;
+        top: -$spacer-xs
+    }
 }

projects/ngx-location-viewer/src/lib/components/ngx-location-viewer.component.ts

@@ -34,8 +34,10 @@ export class NgxLocationViewerComponent implements OnInit, OnChanges, OnDestroy
     @Input() defaultZoom = 14;
     /* The initial map center on load. */
     @Input() mapCenter: Array<number> = [51.215, 4.425];
-    /* Show a sidebar next to the map leaflet. A sidebar can contain any additional info you like. */
+    /* Shows button to open sidebar if true. A sidebar can contain any additional info you like. */
     @Input() hasSidebar = false;
+    /* If hasSidebar is true this will show whether the sidebar should be visible from the start */
+    @Input() showSidebar = false;
     /* Shows layermangement inside the sidebar. Layermanagement is used to add or remove featurelayers. */
     @Input() showLayerManagement = true;
     /* Show selection tools */
@@ -165,9 +167,13 @@ export class NgxLocationViewerComponent implements OnInit, OnChanges, OnDestroy
         this.leafletMap.zoomOut();
     }
 
-    toggleLayermanagement() {
-        this.hasSidebar = !this.hasSidebar;
-        this.hasSidebarChange.emit(this.hasSidebar);
+    toggleSidebar() {
+        this.showSidebar = !this.showSidebar;
+        this.hasSidebarChange.emit(this.showSidebar);
+        // recalculates leaflet map size
+        setTimeout(() => {
+            this.leafletMap.map.invalidateSize();
+        });
     }
 
     activeButtonChange(action: ButtonActions) {
@@ -308,6 +314,12 @@ export class NgxLocationViewerComponent implements OnInit, OnChanges, OnDestroy
             this.initiateOperationalLayer();
             this.initiateFilterLayers();
             this.initiateEvents();
+
+            // set hasSidebar true if showlayermanagement is true because this is inside the sidebar
+            if (this.showLayerManagement && !this.hasSidebar)
+            {
+                this.hasSidebar = true;
+            }
         });
     }