diff --git a/app/controllers/application.js b/app/controllers/application.js index f42ae2e3..13991f9f 100644 --- a/app/controllers/application.js +++ b/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 || {}; 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 c929e8df..108f2169 100644 --- a/app/templates/application.hbs +++ b/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}} /> 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/config/environment.js b/config/environment.js index b53f5a00..d07f879b 100644 --- a/config/environment.js +++ b/config/environment.js @@ -382,6 +382,7 @@ module.exports = function (environment) { 'circle', 'dot-circle', 'square', + 'circle-xmark', ], 'free-solid-svg-icons': [ 'angle-up', diff --git a/config/icons.js b/config/icons.js index 7100ffd1..434edf8a 100644 --- a/config/icons.js +++ b/config/icons.js @@ -5,6 +5,7 @@ module.exports = function () { 'circle', 'dot-circle', 'square', + 'circle-xmark', ], 'free-solid-svg-icons': [ 'angle-up',