From f78c4b272f7bde985e8ea76c33e907057a5b9228 Mon Sep 17 00:00:00 2001 From: rogup Date: Tue, 16 Apr 2024 20:51:56 +0100 Subject: [PATCH] Fix highlighting of directory categories --- src/map-app/app/presenter/sidebar.ts | 6 +++-- src/map-app/app/presenter/sidebar/base.ts | 19 ++++++++++----- .../app/presenter/sidebar/directory.ts | 8 ------- .../app/presenter/sidebar/initiatives.ts | 24 +------------------ src/map-app/app/view/sidebar.ts | 13 +--------- src/map-app/app/view/sidebar/base.ts | 10 +++++--- src/map-app/app/view/sidebar/directory.ts | 11 ++++++++- 7 files changed, 36 insertions(+), 55 deletions(-) diff --git a/src/map-app/app/presenter/sidebar.ts b/src/map-app/app/presenter/sidebar.ts index f20eb933..09891574 100644 --- a/src/map-app/app/presenter/sidebar.ts +++ b/src/map-app/app/presenter/sidebar.ts @@ -64,7 +64,7 @@ export class SidebarPresenter extends BasePresenter { if (name !== undefined) { // If name is set, change the current sidebar and then refresh this.sidebarName = name; - this.children[this.sidebarName]?.refreshView(); + this.children[this.sidebarName]?.refreshView(true); } else { // Just refresh the currently showing sidebar. @@ -77,11 +77,13 @@ export class SidebarPresenter extends BasePresenter { return; // No sidebars? Can't do anything. } - this.children[this.sidebarName]?.refreshView(); + this.children[this.sidebarName]?.refreshView(false); } } showSidebar() { + // Refresh the view before showing + this.children[this.sidebarName ?? 'undefined']?.refreshView(true); this.view.showSidebar(); } diff --git a/src/map-app/app/presenter/sidebar/base.ts b/src/map-app/app/presenter/sidebar/base.ts index a6616cd8..a9fa3afc 100644 --- a/src/map-app/app/presenter/sidebar/base.ts +++ b/src/map-app/app/presenter/sidebar/base.ts @@ -17,10 +17,12 @@ export abstract class BaseSidebarPresenter extends BasePresenter { super(); } - // If the sidebar wants to do something more than to get its view to refresh when the history buttons have been used, then - // it should override this definition with its own: + /** + * If the sidebar wants to do something more than to get its view to refresh when the history + * buttons have been used, then it should override this definition with its own. + */ historyButtonsUsed(): void { - this.view.refresh(); + this.view.refresh(false); } deselectInitiatives(): void { @@ -49,9 +51,14 @@ export abstract class BaseSidebarPresenter extends BasePresenter { this.historyButtonsUsed(); } - /// Refreshes the view - refreshView() { - this.view.refresh(); + /** + * Refreshes the sidebar view + * + * @param changed true if we changed to this sidebar, false if it was already showing and we're + * just refreshing it. + */ + refreshView(changed: boolean) { + this.view.refresh(changed); } clearLatestSelection() { diff --git a/src/map-app/app/presenter/sidebar/directory.ts b/src/map-app/app/presenter/sidebar/directory.ts index 2cb475c0..293ea173 100644 --- a/src/map-app/app/presenter/sidebar/directory.ts +++ b/src/map-app/app/presenter/sidebar/directory.ts @@ -1,7 +1,6 @@ import { EventBus } from '../../../eventbus'; import { DirectorySidebarView } from '../../view/sidebar/directory'; import { BaseSidebarPresenter } from './base'; -import { Initiative } from '../../model/initiative'; import { SidebarPresenter } from '../sidebar'; export class DirectorySidebarPresenter extends BaseSidebarPresenter { @@ -20,13 +19,6 @@ export class DirectorySidebarPresenter extends BaseSidebarPresenter { }); } - onInitiativeMouseoverInSidebar(initiative: Initiative): void { - EventBus.Map.needToShowInitiativeTooltip.pub(initiative); - } - onInitiativeMouseoutInSidebar(initiative: Initiative): void { - EventBus.Map.needToHideInitiativeTooltip.pub(initiative); - } - // This gets the localised 'allEntries' label in all cases. // // It used to facilitate a hack as per issue #177. Leaving here as a diff --git a/src/map-app/app/presenter/sidebar/initiatives.ts b/src/map-app/app/presenter/sidebar/initiatives.ts index 2e674c16..23b58a2c 100644 --- a/src/map-app/app/presenter/sidebar/initiatives.ts +++ b/src/map-app/app/presenter/sidebar/initiatives.ts @@ -25,32 +25,10 @@ export class InitiativesSidebarPresenter extends BaseSidebarPresenter { changeFilters(propName: string, value?: string) { this.parent.mapui.changeFilters(propName, value); } - - notifyShowInitiativeTooltip(initiative: Initiative) { - EventBus.Map.needToShowInitiativeTooltip.pub(initiative); - } - notifyHideInitiativeTooltip(initiative: Initiative) { - EventBus.Map.needToHideInitiativeTooltip.pub(initiative); - } - - historyButtonsUsed() { - //console.log("sidebar/initiatives historyButtonsUsed"); - //console.log(lastContent); - //this.notifyMarkersNeedToShowNewSelection(lastContent); - this.view.refresh(); - } - onInitiativeMouseoverInSidebar(initiative: Initiative) { - this.notifyShowInitiativeTooltip(initiative); - } - - onInitiativeMouseoutInSidebar(initiative: Initiative) { - this.notifyHideInitiativeTooltip(initiative); - } - onMarkerSelectionToggled(initiative: Initiative) { this.parent.mapui.toggleSelectInitiative(initiative); - this.view.refresh(); + this.view.refresh(false); } performSearch(text: string) { diff --git a/src/map-app/app/view/sidebar.ts b/src/map-app/app/view/sidebar.ts index 7aa5ea26..a944cca8 100644 --- a/src/map-app/app/view/sidebar.ts +++ b/src/map-app/app/view/sidebar.ts @@ -23,7 +23,7 @@ export class SidebarView extends BaseView { .attr("class", "w3-btn") .attr("style","background-color: " + this.sidebarButtonColour) .attr("title", this.presenter.mapui.labels.showDirectory) - .on("click", () => this.showSidebar()) + .on("click", () => this.presenter.showSidebar()) .append("i") .attr("class", "fa fa-angle-right"); } @@ -235,12 +235,6 @@ export class SidebarView extends BaseView { } populateInitiativeSidebar(initiative: Initiative, initiativeContent: string) { - // Highlight the correct initiative in the directory - // d3.select(".sea-initiative-active").classed("sea-initiative-active", false); - // d3.select('[data-uid="' + initiative.uri + '"]').classed( - // "sea-initiative-active", - // true - // ); let initiativeSidebar = d3.select("#sea-initiative-sidebar"); let initiativeContentElement = this.d3selectAndClear( "#sea-initiative-sidebar-content" @@ -260,9 +254,4 @@ export class SidebarView extends BaseView { if (getViewportWidth() <= 800) EventBus.Sidebar.showSidebar.pub(); } - - // deselectInitiativeSidebar() { - // d3.select(".sea-initiative-active").classed("sea-initiative-active", false); - // d3.select("#sea-initiative-sidebar").classed("sea-initiative-sidebar-open", false); - // } } diff --git a/src/map-app/app/view/sidebar/base.ts b/src/map-app/app/view/sidebar/base.ts index 901f40ba..ecbd3f4d 100644 --- a/src/map-app/app/view/sidebar/base.ts +++ b/src/map-app/app/view/sidebar/base.ts @@ -13,8 +13,6 @@ export abstract class BaseSidebarView extends BaseView { static readonly accordionClasses = "w3-bar-item w3-tiny w3-light-grey w3-padding-small" + BaseSidebarView.hoverColour; static readonly sectionClasses = "w3-bar-item w3-small w3-white w3-padding-small"; - - abstract readonly presenter: BaseSidebarPresenter; @@ -85,7 +83,13 @@ export abstract class BaseSidebarView extends BaseView { } } - refresh() { + /** + * Refreshes the sidebar view + * + * @param changed true if we changed to this sidebar, false if it was already showing and we're + * just refreshing it. + */ + refresh(changed: boolean) { this.loadFixedSection(); this.loadHistoryNavigation(); // back and forward buttons this.loadScrollableSection(); diff --git a/src/map-app/app/view/sidebar/directory.ts b/src/map-app/app/view/sidebar/directory.ts index 00a4e3d4..8fc60af1 100644 --- a/src/map-app/app/view/sidebar/directory.ts +++ b/src/map-app/app/view/sidebar/directory.ts @@ -27,9 +27,18 @@ export class DirectorySidebarView extends BaseSidebarView { this.title = presenter.parent.mapui.labels.directory; } + refresh(changed: boolean) { + this.loadHistoryNavigation(); + if (changed) { + // only need to load these if we changed to the directory sidebar + this.loadFixedSection(); + this.loadScrollableSection(); + } + this.refreshSearchResults(); + } - populateFixedSelection(selection: d3Selection): void { + populateFixedSelection(selection: d3Selection): void { const that = this; let sidebarTitle = this.title; const container = selection