Merge pull request #1181 from NYCPlanning/DH4-toggle-all-layers-off

Dh4 toggle all layers off

Author: dhochbaum-dcp

app/controllers/application.js

@@ -1,6 +1,7 @@
 import Controller from '@ember/controller';
 import { assign } from '@ember/polyfills';
 import { computed, action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import QueryParams from '@nycplanning/ember-parachute';
 import config from 'labs-zola/config/environment';
@@ -87,6 +88,10 @@ export default class ApplicationController extends Controller.extend(
 
   @service mainMap;
 
+  @service metrics;
+
+  @tracked layerGroupsStorage;
+
   // this action extracts query-param-friendly state of layer groups
   // for various paramable layers
   @action
@@ -98,6 +103,7 @@ export default class ApplicationController extends Controller.extend(
       .sort();
 
     this.set('layerGroups', visibleLayerGroups);
+    this.set('layerGroupsStorage', null);
   }
 
   @action
@@ -106,6 +112,74 @@ export default class ApplicationController extends Controller.extend(
     this.handleLayerGroupChange();
   }
 
+  @action
+  setAllLayerVisibilityToFalse() {
+    // save them so we can be able to reset them
+    const tempStorage = this.model.layerGroups
+      .filter(({ visible }) => visible)
+      .map(({ id }) => id)
+      .sort();
+
+    this.model.layerGroups
+      .filter(({ visible }) => visible)
+      .forEach((model) => this.toggleLayerVisibilityToFalse(model));
+    this.handleLayerGroupChange();
+
+    this.set('layerGroupsStorage', tempStorage);
+
+    gtag('event', 'search', {
+      event_category: 'Toggle Layer',
+      event_action: 'Toggle All Layers Off',
+    });
+
+    // GA
+    this.metrics.trackEvent('MatomoTagManager', {
+      category: 'Toggle Layer',
+      action: 'Toggle All Layers Off',
+      name: 'Toggle All Layers Off',
+    });
+  }
+
+  @action
+  undoSetAllLayerVisibilityToFalse() {
+    this.model.layerGroups.forEach((lg) => {
+      if (this.layerGroupsStorage.includes(lg.id)) {
+        lg.set('visible', true);
+      }
+    });
+
+    this.set('layerGroupsStorage', null);
+    this.handleLayerGroupChange();
+
+    gtag('event', 'search', {
+      event_category: 'Toggle Layer',
+      event_action: 'Undo Toggle All Layers Off',
+    });
+
+    // GA
+    this.metrics.trackEvent('MatomoTagManager', {
+      category: 'Toggle Layer',
+      action: 'Undo Toggle All Layers Off',
+      name: 'Undo Toggle All Layers Off',
+    });
+  }
+
+  @action
+  toggleLayerVisibilityToFalse(layer) {
+    layer.visible = false;
+  }
+
+  @computed('layerGroupsStorage', 'model.layerGroups')
+  get showToggleLayersBackOn() {
+    if (
+      this.model.layerGroups.filter(({ visible }) => visible).length === 0 &&
+      this.layerGroupsStorage
+    ) {
+      return true;
+    }
+    return false;
+  }
+
   @computed('queryParamsState')
   get isDefault() {
     const state = this.queryParamsState || {};

app/styles/modules/_m-layer-palette.scss

@@ -131,6 +131,13 @@ $layer-palette-hover-color: rgba($dark-gray,0.08);
   width: calc(100% - #{$layer-palette-padding*4});
 }
 
+//
+// "Toggle All Map Layers Off" button
+// --------------------------------------------------
+.no-layers-button {
+  margin: $layer-palette-padding*3 $layer-palette-padding*2 $layer-palette-padding*2 $layer-palette-padding*2;
+  width: calc(100% - #{$layer-palette-padding*4});
+}
 
 //
 // Indeterminate hider (hides element alongside unchecked checkbox)

app/templates/application.hbs

@@ -30,7 +30,10 @@
           @layerGroups={{this.model.layerGroupsObject}}
           @isDefault={{this.isDefault}}
           @resetQueryParams={{action this.setModelsToDefault}}
+          @setAllLayerVisibilityToFalse={{action this.setAllLayerVisibilityToFalse}}
+          @undoSetAllLayerVisibilityToFalse={{action this.undoSetAllLayerVisibilityToFalse}}
           @handleLayerGroupChange={{action this.handleLayerGroupChange}}
+          @showToggleLayersBackOn={{this.showToggleLayersBackOn}}
         />
       </div>
     </div>

app/templates/components/layer-palette.hbs

@@ -9,6 +9,23 @@
   {{/if}}
 </button>
 <div id="layers-menu" class="{{if this.closed "show-for-medium"}}">
+  {{#if this.showToggleLayersBackOn}}
+    <a
+      class="button gray small no-layers-button hide-for-print"
+      onclick={{action this.undoSetAllLayerVisibilityToFalse}}
+      data-test-reset-query-params="true">
+      <FaIcon @icon="undo" />
+      Toggle Layers Back On
+    </a>
+  {{else}}
+    <a
+      class="button gray small no-layers-button hide-for-print"
+      onclick={{action this.setAllLayerVisibilityToFalse}}
+      data-test-reset-query-params="true">
+      <FaIcon @icon="circle-xmark" @prefix="far" />
+      Toggle All Map Layers Off
+    </a>
+  {{/if}}
   <LabsUiOverrides::LayerGroupsContainer
     @handleToggle={{action this.handleLayerGroupToggle}}
     @title="Zoning and Land Use" as |container|
@@ -323,13 +340,5 @@
       </ul>
     </container.layer-group-toggle>
   </LabsUiOverrides::LayerGroupsContainer>
-  <a
-    class="button gray small reset-map-button hide-for-print"
-    disabled={{this.isDefault}}
-    onclick={{action this.resetQueryParams}}
-    data-test-reset-query-params="true">
-    <FaIcon @icon="undo" />
-    Reset Map Layers
-  </a>
 </div>
 {{yield}}

config/environment.js

@@ -382,6 +382,7 @@ module.exports = function (environment) {
           'circle',
           'dot-circle',
           'square',
+          'circle-xmark',
         ],
         'free-solid-svg-icons': [
           'angle-up',

config/icons.js

@@ -5,6 +5,7 @@ module.exports = function () {
       'circle',
       'dot-circle',
       'square',
+      'circle-xmark',
     ],
     'free-solid-svg-icons': [
       'angle-up',