Merge branch 'DH3-collapse-sidebar' of github.com:NYCPlanning/labs-zo…

…la into DH3-collapse-sidebar

app/controllers/application.js

@@ -1,10 +1,10 @@
 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';
-import { tracked } from '@glimmer/tracking';
 
 const {
   defaultLayerGroupState,
@@ -71,7 +71,7 @@ export const mapQueryParams = new QueryParams(
     },
 
     'aerial-year': {
-      defaultValue: 'aerials-2016',
+      defaultValue: 'aerials-2022',
     },
 
     // TODO: After merge of params refactor, update print service based on this param.
@@ -92,6 +92,8 @@ export default class ApplicationController extends Controller.extend(
 
   @tracked leftSideMenuVisibilty = true;
 
+  @tracked layerGroupsStorage;
+
   // this action extracts query-param-friendly state of layer groups
   // for various paramable layers
   @action
@@ -103,6 +105,7 @@ export default class ApplicationController extends Controller.extend(
       .sort();
 
     this.set('layerGroups', visibleLayerGroups);
+    this.set('layerGroupsStorage', null);
   }
 
   @action
@@ -111,6 +114,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

@@ -41,7 +41,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}}
           />
         {{/if}}
       </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}}

app/templates/components/map-resource-search.hbs

@@ -3,6 +3,7 @@
     data-test-search="resource"
     @onSelect={{action "handleSearchSelect"}}
     @typeTitleLookup={{this.resourceTitleLookup}}
+    @useSearchHistory={{true}}
   />
   <LabsBblLookup
     data-test-search="bbl"

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',

package.json

@@ -41,7 +41,7 @@
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
     "@mapbox/mapbox-gl-draw": "^1.0.0",
-    "@nycplanning/ember": "^3.0.0",
+    "@nycplanning/ember": "^3.1.0",
     "@nycplanning/ember-cli-foundation-6-sass": "^0.1.0",
     "@nycplanning/ember-cli-nouislider": "^1.3.0",
     "@nycplanning/ember-mapbox-gl-draw": "^2.1.0",

yarn.lock

@@ -2216,10 +2216,10 @@
   dependencies:
     ember-cli-babel "^7.1.2"
 
-"@nycplanning/ember@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@nycplanning/ember/-/ember-3.0.0.tgz#8103d7ecae91218d0b91ac7eaf9350e3bf2cb4b6"
-  integrity sha512-qDRAWm3A+ubNjet9UTnEW6QzPDdG5OaTaZ0o8W3e9Oz8S0kvllCVEDNYml2U30DuUZ4zAGR1i7r9QSmfTAWTkA==
+"@nycplanning/ember@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@nycplanning/ember/-/ember-3.1.0.tgz#34523670fb9bb5216efcd428c9222a0b21d0d0a8"
+  integrity sha512-DBZV9RVJEgttRMeauf0owwI6hqvCK3VS58ftQvAa9EZppqHicu2fDHM+yVpl3kIY17GV/AnE0Z8HmdNfOTf2QA==
   dependencies:
     "@turf/union" "^6.0.0"
     ember-auto-import "^2.6.3"