diff --git a/app/controllers/application.js b/app/controllers/application.js index 61d6ae84..08d04f03 100644 --- a/app/controllers/application.js +++ b/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 || {}; diff --git a/app/styles/modules/_m-layer-palette.scss b/app/styles/modules/_m-layer-palette.scss index 5655eebe..cd4d8a82 100644 --- a/app/styles/modules/_m-layer-palette.scss +++ b/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) diff --git a/app/templates/application.hbs b/app/templates/application.hbs index 141ade0f..cbf29b3b 100644 --- a/app/templates/application.hbs +++ b/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}} diff --git a/app/templates/components/layer-palette.hbs b/app/templates/components/layer-palette.hbs index 263b3572..628d9151 100644 --- a/app/templates/components/layer-palette.hbs +++ b/app/templates/components/layer-palette.hbs @@ -9,6 +9,23 @@ {{/if}}
+ {{#if this.showToggleLayersBackOn}} + + + Toggle Layers Back On + + {{else}} + + + Toggle All Map Layers Off + + {{/if}} - - - Reset Map Layers -
{{yield}} diff --git a/app/templates/components/map-resource-search.hbs b/app/templates/components/map-resource-search.hbs index a44ba2f3..ff617235 100644 --- a/app/templates/components/map-resource-search.hbs +++ b/app/templates/components/map-resource-search.hbs @@ -3,6 +3,7 @@ data-test-search="resource" @onSelect={{action "handleSearchSelect"}} @typeTitleLookup={{this.resourceTitleLookup}} + @useSearchHistory={{true}} />