diff --git a/src/map-app/app/map-ui.ts b/src/map-app/app/map-ui.ts index 80d17ed8..7f771740 100644 --- a/src/map-app/app/map-ui.ts +++ b/src/map-app/app/map-ui.ts @@ -100,6 +100,7 @@ export class MapUI { onNewInitiatives() { const loadedInitiatives = this.dataServices.getAggregatedData().loadedInitiatives; this.stateManager.reset(loadedInitiatives); + this.refreshSidebar(); } createPresenter(): MapPresenter { @@ -186,7 +187,7 @@ export class MapUI { private refreshSidebar() { this.getSidebarPresenter(this).then((presenter) => { - presenter.changeSidebar(); + presenter.refreshSidebar(); }); } @@ -204,7 +205,6 @@ export class MapUI { if (initiative) { // Move the window to the right position first this.notifyMapNeedsToNeedsToSelectAndZoomOnInitiative(initiative); - this.refreshSidebar(); // Populate the sidebar and highlight the intiative in the directory this.getSidebarPresenter(this).then((presenter) => { presenter.populateInitiativeSidebar( @@ -220,8 +220,6 @@ export class MapUI { presenter.hideInitiativeSidebar(); }); } - - this.refreshSidebar(); } currentItem() { diff --git a/src/map-app/app/presenter/map.ts b/src/map-app/app/presenter/map.ts index 67e650f0..6e238370 100644 --- a/src/map-app/app/presenter/map.ts +++ b/src/map-app/app/presenter/map.ts @@ -88,7 +88,7 @@ export class MapPresenter extends BasePresenter { console.log("onInitiativeComplete"); // Call this last so map will have bounds set (else error!) - this.mapUI.onNewInitiatives(); + this.mapUI.onNewInitiatives(); } private onInitiativeLoadMessage(error?: EventBus.Initiatives.DatasetError) { diff --git a/src/map-app/app/presenter/sidebar.ts b/src/map-app/app/presenter/sidebar.ts index 4cc831b2..3bdbc768 100644 --- a/src/map-app/app/presenter/sidebar.ts +++ b/src/map-app/app/presenter/sidebar.ts @@ -48,10 +48,10 @@ export class SidebarPresenter extends BasePresenter { this.children.datasets = new DatasetsSidebarPresenter(this); } - // Changes or refreshes the sidebar - // - // @param name - the sidebar to change (needs to be one of the keys - // of this.sidebar) + /** + * Changes the sidebar + * @param name the sidebar to change (needs to be one of the keys of this.sidebar) + */ changeSidebar(name?: string) { if (name !== undefined) { // Validate name @@ -71,19 +71,39 @@ export class SidebarPresenter extends BasePresenter { // If nothing is showing, show the first. Or nothing, if none. if (!this.sidebarName) { const names = Object.keys(this.children); - if (names.length > 0) + if (names.length > 0) { this.sidebarName = names[0]; - else + this.children[this.sidebarName]?.refreshView(true); + } else { + console.warn('No sidebars to show'); return; // No sidebars? Can't do anything. + } + } else { + this.children[this.sidebarName]?.refreshView(false); } - - this.children[this.sidebarName]?.refreshView(false); + } + } + + /** + * Fully refresh the sidebar + */ + refreshSidebar() { + if (!this.sidebarName) { + // If no sidebar is set, pick the first one + const names = Object.keys(this.children); + if (names.length > 0) { + this.sidebarName = names[0]; + this.children[this.sidebarName]?.refreshView(true); + } else { + console.warn('No sidebars to show'); + return; // No sidebars? Can't do anything. + } + } else { + this.children[this.sidebarName]?.refreshView(true); } } showSidebar() { - // Refresh the view before showing - this.children[this.sidebarName ?? 'undefined']?.refreshView(true); this.view.showSidebar(); } @@ -137,7 +157,6 @@ export class SidebarPresenter extends BasePresenter { this.changeSidebar(); this.hideInitiativeList(); }); - EventBus.Initiatives.loadComplete.sub(() => this.changeSidebar()); } } diff --git a/src/map-app/app/view/sidebar.ts b/src/map-app/app/view/sidebar.ts index 6da1b57d..46f97616 100644 --- a/src/map-app/app/view/sidebar.ts +++ b/src/map-app/app/view/sidebar.ts @@ -102,25 +102,26 @@ export class SidebarView extends BaseView { showSidebar() { const sidebar = d3.select("#map-app-sidebar"); - sidebar.on( - "transitionend", - (event: TransitionEvent) => { - const target = event.target as HTMLElement|undefined; // Seems to need coercion - if (!target || target?.className === "w3-btn") return; - if (event.propertyName === "transform") { - d3.select("#map-app-sidebar-button").on("click", () => this.hideSidebar()); - } - this.updateSidebarWidth(); - }, - false - ) - .classed("sea-sidebar-open", true); + + if (!sidebar.classed("sea-sidebar-open")) { + sidebar.on( + "transitionend", + (event: TransitionEvent) => { + const target = event.target as HTMLElement|undefined; // Seems to need coercion + if (!target || target?.className === "w3-btn") return; + if (event.propertyName === "transform") { + d3.select("#map-app-sidebar-button").on("click", () => this.hideSidebar()); + } + this.updateSidebarWidth(); + }, + false + ) + .classed("sea-sidebar-open", true); + } if (!sidebar.classed("sea-sidebar-list-initiatives")) d3.select(".w3-btn").attr("title", this.presenter.mapui.labels.hideDirectory); d3.select("#map-app-sidebar i").attr("class", "fa fa-angle-left"); - - this.presenter.changeSidebar(); // Refresh the content of the sidebar } updateSidebarWidth() { @@ -224,7 +225,7 @@ export class SidebarView extends BaseView { .append("button") .attr("class", "w3-button w3-border-0 ml-auto sidebar-button") .attr("title", `${this.presenter.mapui.labels.close} ${initiative.name}`) - .on("click", () => EventBus.Map.initiativeClicked.pub(undefined)) + .on("click", this.hideInitiativeSidebar) .append("i") .attr("class", "fa " + "fa-times"); initiativeContentElement diff --git a/src/map-app/app/view/sidebar/base.ts b/src/map-app/app/view/sidebar/base.ts index d9dcbf9f..7a32f36a 100644 --- a/src/map-app/app/view/sidebar/base.ts +++ b/src/map-app/app/view/sidebar/base.ts @@ -1,4 +1,4 @@ -// Set up the various sidebars +import * as d3 from 'd3'; import { BaseSidebarPresenter, NavigationCallback } from '../../presenter/sidebar/base'; import { BaseView } from '../base'; import { d3DivSelection, d3Selection } from '../d3-utils'; @@ -133,7 +133,13 @@ export abstract class BaseSidebarView extends BaseView { .attr("data-uid", _toString(initiative.uri)) .classed(activeClass, true) .classed(nongeoClass, true) - .on("click", ()=> this.presenter.onInitiativeClicked(initiative)) + .on("click", () => { + // Highlight the selected initiative in the list + d3.select(".sea-initiative-active").classed("sea-initiative-active", false); + d3.select('[data-uid="' + initiative.uri + '"]').classed("sea-initiative-active", true); + + this.presenter.onInitiativeClicked(initiative); + }) .on("mouseover", () => this.presenter.onInitiativeMouseoverInSidebar(initiative)) .on("mouseout", () => this.presenter.onInitiativeMouseoutInSidebar(initiative)); } @@ -143,16 +149,19 @@ export abstract class BaseSidebarView extends BaseView { const labels = this.presenter.parent.mapui.labels; if (this.presenter.parent.showingDirectory()) { + const _this = this; container .append("button") // mobile only since these buttons already exist in the sidebar on larger screens .attr("class", "w3-button w3-border-0 mobile-only") .attr("title", labels.showDirectory) .on("click", function () { - EventBus.Map.clearFiltersAndSearch.pub(); + if (_this.title !== labels.directory) { + EventBus.Map.clearFiltersAndSearch.pub(); + EventBus.Markers.needToShowLatestSelection.pub([]); + } EventBus.Sidebar.hideInitiativeList.pub(); EventBus.Sidebar.showDirectory.pub(); - EventBus.Markers.needToShowLatestSelection.pub([]); }) .append("i") .attr("class", "fa fa-bars");