From e4da6a8eec283616188cc17dc909a45af266bc87 Mon Sep 17 00:00:00 2001 From: David Hochbaum Date: Tue, 12 Mar 2024 11:06:23 -0400 Subject: [PATCH 1/5] Added Toggle All Map Layers Off button to bottom of sidebar --- app/controllers/application.js | 13 +++++++++++++ app/styles/modules/_m-layer-palette.scss | 7 +++++++ app/templates/application.hbs | 1 + app/templates/components/layer-palette.hbs | 7 +++++++ config/environment.js | 1 + config/icons.js | 1 + 6 files changed, 30 insertions(+) diff --git a/app/controllers/application.js b/app/controllers/application.js index f42ae2e3..14c58c00 100644 --- a/app/controllers/application.js +++ b/app/controllers/application.js @@ -106,6 +106,19 @@ export default class ApplicationController extends Controller.extend( this.handleLayerGroupChange(); } + @action + setAllLayerVisibilityToFalse() { + this.model.layerGroups + .filter(({ visible }) => visible) + .forEach((model) => this.toggleLayerVisibilityToFalse(model)); + this.handleLayerGroupChange(); + } + + @action + toggleLayerVisibilityToFalse(layer) { + layer.visible = 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..4f7afacb 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*0 $layer-palette-padding*2 $layer-palette-padding*3 $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..6e690409 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -30,6 +30,7 @@ @layerGroups={{this.model.layerGroupsObject}} @isDefault={{this.isDefault}} @resetQueryParams={{action this.setModelsToDefault}} + @setAllLayerVisibilityToFalse={{action this.setAllLayerVisibilityToFalse}} @handleLayerGroupChange={{action this.handleLayerGroupChange}} /> diff --git a/app/templates/components/layer-palette.hbs b/app/templates/components/layer-palette.hbs index 263b3572..978e72d7 100644 --- a/app/templates/components/layer-palette.hbs +++ b/app/templates/components/layer-palette.hbs @@ -331,5 +331,12 @@ Reset Map Layers + + + Toggle All Map Layers Off + {{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', From 6007b447cc63d30f685ee225dc3a3447246cb173 Mon Sep 17 00:00:00 2001 From: David Hochbaum Date: Tue, 12 Mar 2024 11:14:02 -0400 Subject: [PATCH 2/5] Added analytics to track toggle all off clicks --- app/controllers/application.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/app/controllers/application.js b/app/controllers/application.js index 14c58c00..173e71d8 100644 --- a/app/controllers/application.js +++ b/app/controllers/application.js @@ -87,6 +87,8 @@ export default class ApplicationController extends Controller.extend( @service mainMap; + @service metrics; + // this action extracts query-param-friendly state of layer groups // for various paramable layers @action @@ -112,6 +114,18 @@ export default class ApplicationController extends Controller.extend( .filter(({ visible }) => visible) .forEach((model) => this.toggleLayerVisibilityToFalse(model)); this.handleLayerGroupChange(); + + 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 From 8757d6e814c6a526bc6a3ce19a4c17ded844f3f2 Mon Sep 17 00:00:00 2001 From: David Hochbaum Date: Fri, 15 Mar 2024 11:11:37 -0400 Subject: [PATCH 3/5] Moved button to top --- app/styles/modules/_m-layer-palette.scss | 2 +- app/templates/components/layer-palette.hbs | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/styles/modules/_m-layer-palette.scss b/app/styles/modules/_m-layer-palette.scss index 4f7afacb..cd4d8a82 100644 --- a/app/styles/modules/_m-layer-palette.scss +++ b/app/styles/modules/_m-layer-palette.scss @@ -135,7 +135,7 @@ $layer-palette-hover-color: rgba($dark-gray,0.08); // "Toggle All Map Layers Off" button // -------------------------------------------------- .no-layers-button { - margin: $layer-palette-padding*0 $layer-palette-padding*2 $layer-palette-padding*3 $layer-palette-padding*2; + margin: $layer-palette-padding*3 $layer-palette-padding*2 $layer-palette-padding*2 $layer-palette-padding*2; width: calc(100% - #{$layer-palette-padding*4}); } diff --git a/app/templates/components/layer-palette.hbs b/app/templates/components/layer-palette.hbs index 978e72d7..3e9abc07 100644 --- a/app/templates/components/layer-palette.hbs +++ b/app/templates/components/layer-palette.hbs @@ -9,6 +9,13 @@ {{/if}}
+ + + Toggle All Map Layers Off + Reset Map Layers - - - Toggle All Map Layers Off -
{{yield}} From 5b52a31fb0a6b49f0d5641d14b3546eb8d13fdc2 Mon Sep 17 00:00:00 2001 From: David Hochbaum Date: Tue, 26 Mar 2024 19:01:09 -0400 Subject: [PATCH 4/5] Removed reset button, added undo toggle functionality --- app/controllers/application.js | 47 ++++++++++++++++++++++ app/templates/application.hbs | 2 + app/templates/components/layer-palette.hbs | 32 ++++++++------- 3 files changed, 66 insertions(+), 15 deletions(-) diff --git a/app/controllers/application.js b/app/controllers/application.js index 173e71d8..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'; @@ -89,6 +90,8 @@ export default class ApplicationController extends Controller.extend( @service metrics; + @tracked layerGroupsStorage; + // this action extracts query-param-friendly state of layer groups // for various paramable layers @action @@ -100,6 +103,7 @@ export default class ApplicationController extends Controller.extend( .sort(); this.set('layerGroups', visibleLayerGroups); + this.set('layerGroupsStorage', null); } @action @@ -110,11 +114,19 @@ export default class ApplicationController extends Controller.extend( @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', @@ -128,11 +140,46 @@ export default class ApplicationController extends Controller.extend( }); } + @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/templates/application.hbs b/app/templates/application.hbs index 6e690409..108f2169 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -31,7 +31,9 @@ @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 3e9abc07..791fb613 100644 --- a/app/templates/components/layer-palette.hbs +++ b/app/templates/components/layer-palette.hbs @@ -9,13 +9,23 @@ {{/if}}
- - - Toggle All Map Layers Off - + {{#if this.showToggleLayersBackOn}} + + + Toggle Layers Back On + + {{else}} + + + Toggle All Map Layers Off + + {{/if}} - - - Reset Map Layers -
{{yield}} From daf2a7b55fcb3ece3966a887a33d5443338629e5 Mon Sep 17 00:00:00 2001 From: David Hochbaum Date: Thu, 28 Mar 2024 11:28:09 -0400 Subject: [PATCH 5/5] Changed icon for re-implementing layers to undo --- app/templates/components/layer-palette.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/templates/components/layer-palette.hbs b/app/templates/components/layer-palette.hbs index 791fb613..628d9151 100644 --- a/app/templates/components/layer-palette.hbs +++ b/app/templates/components/layer-palette.hbs @@ -14,7 +14,7 @@ class="button gray small no-layers-button hide-for-print" onclick={{action this.undoSetAllLayerVisibilityToFalse}} data-test-reset-query-params="true"> - + Toggle Layers Back On {{else}}