diff --git a/src/map-app/app/map-ui.ts b/src/map-app/app/map-ui.ts index c714d222..f8a24697 100644 --- a/src/map-app/app/map-ui.ts +++ b/src/map-app/app/map-ui.ts @@ -48,7 +48,7 @@ export class MapUI { }); }; - EventBus.Directory.initiativeClicked.sub(initiative => this.onInitiativeClickedInSidebar(initiative)); + EventBus.Map.initiativeClicked.sub(initiative => this.onInitiativeClicked(initiative)); EventBus.Map.resetSearch.sub(() => this.resetSearch()); } @@ -143,23 +143,18 @@ export class MapUI { } isSelected(initiative: Initiative): boolean { - // Currently unimplemented - I can see an sea-initiative-active class - // being applied if a test was true, but it makes no sense in the current - // context AFAICT. The test was: - // initiative === this.contextStack.current()?.initiatives[0] - - // The main thing is seemed to do is highlight an initiative (or - // initiatives) in the directory pop-out list of initiatives in a - // category. - - // For now, just return false always. We may re-implement this later. - return false; + const selectedInitiatives = this.mapPresenter?.getSelectedInitiatives() ?? []; + return selectedInitiatives.includes(initiative); } toggleSelectInitiative(initiative: Initiative) { - // Currently unimplemented. + const selectedInitiatives = this.mapPresenter?.getSelectedInitiatives() ?? []; - // EventBus.Markers.needToShowLatestSelection.pub(lastContent.initiatives); + if (selectedInitiatives.includes(initiative)) { + EventBus.Markers.needToShowLatestSelection.pub(selectedInitiatives.filter(i => i !== initiative)); + } else { + EventBus.Markers.needToShowLatestSelection.pub([...selectedInitiatives, initiative]); + } } performSearch(text: string) { @@ -195,21 +190,35 @@ export class MapUI { }); } - private notifyMapNeedsToNeedsToBeZoomedAndPannedOneInitiative(initiative: Initiative) { - const data = EventBus.Map.mkSelectAndZoomData([initiative]); - EventBus.Map.needsToBeZoomedAndPanned.pub(data); + private notifyMapNeedsToNeedsToSelectAndZoomOnInitiative(initiative: Initiative) { + const maxZoom = this.config.getMaxZoomOnOne(); + const defaultPos = this.config.getDefaultLatLng(); + + const data = EventBus.Map.mkSelectAndZoomData([initiative], { maxZoom, defaultPos }); + EventBus.Map.selectAndZoomOnInitiative.pub(data); } - private onInitiativeClickedInSidebar(initiative?: Initiative) { - if (!initiative) - return; + private onInitiativeClicked(initiative?: Initiative) { + console.log('Clicked', initiative); - //this.parent.mapui.stateManager.append(new SearchResults([initiative])); - //console.log(this.parent.mapui.stateManager.current()); + 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( + initiative, + this.markers.getInitiativeContent(initiative) ?? '' + ); + }); + } + else { + // User has deselected + EventBus.Markers.needToShowLatestSelection.pub([]); + } - this.notifyMapNeedsToNeedsToBeZoomedAndPannedOneInitiative(initiative); this.refreshSidebar(); - EventBus.Initiative.searchedInitiativeClicked.pub(initiative); } currentItem() { diff --git a/src/map-app/app/presenter/map.ts b/src/map-app/app/presenter/map.ts index 0d7c3b08..67e650f0 100644 --- a/src/map-app/app/presenter/map.ts +++ b/src/map-app/app/presenter/map.ts @@ -8,7 +8,7 @@ import { MapUI } from '../map-ui'; export class MapPresenter extends BasePresenter { readonly view: MapView; - private previouslySelected: Initiative[] = []; + private currentlySelected: Initiative[] = []; constructor(readonly mapUI: MapUI) { super(); @@ -49,7 +49,7 @@ export class MapPresenter extends BasePresenter { } onInitiativeClicked() { - EventBus.Directory.initiativeClicked.pub(undefined); + EventBus.Map.initiativeClicked.pub(undefined); } onLoad() { @@ -96,11 +96,11 @@ export class MapPresenter extends BasePresenter { } onMarkersNeedToShowLatestSelection(selected: Initiative[]) { - this.previouslySelected.forEach((initiative) => { + this.currentlySelected.forEach((initiative) => { this.mapUI.markers.setUnselected(initiative); }); - this.previouslySelected = selected; + this.currentlySelected = selected; //zoom in and then select selected.forEach((initiative) => { @@ -144,4 +144,7 @@ export class MapPresenter extends BasePresenter { this.view.selectAndZoomOnInitiative(data); } + getSelectedInitiatives(): Initiative[] { + return this.currentlySelected; + } } diff --git a/src/map-app/app/presenter/sidebar.ts b/src/map-app/app/presenter/sidebar.ts index 384cf8b1..f20eb933 100644 --- a/src/map-app/app/presenter/sidebar.ts +++ b/src/map-app/app/presenter/sidebar.ts @@ -1,6 +1,7 @@ import { Dictionary } from '../../common-types'; import { EventBus } from '../../eventbus'; import { MapUI } from '../map-ui'; +import { Initiative } from '../model/initiative'; import { SidebarView } from '../view/sidebar'; import { BasePresenter } from './base'; import { AboutSidebarPresenter } from './sidebar/about'; @@ -97,6 +98,10 @@ export class SidebarPresenter extends BasePresenter { this.view.hideInitiativeSidebar(); } + populateInitiativeSidebar(initiative: Initiative, initiativeContent: string) { + this.view.populateInitiativeSidebar(initiative, initiativeContent); + } + showInitiativeList() { this.view.showInitiativeList(); } diff --git a/src/map-app/app/presenter/sidebar/base.ts b/src/map-app/app/presenter/sidebar/base.ts index 31b322b9..a6616cd8 100644 --- a/src/map-app/app/presenter/sidebar/base.ts +++ b/src/map-app/app/presenter/sidebar/base.ts @@ -87,7 +87,7 @@ export abstract class BaseSidebarPresenter extends BasePresenter { } onInitiativeClicked(initiative: Initiative): void { - EventBus.Directory.initiativeClicked.pub(initiative); + EventBus.Map.initiativeClicked.pub(initiative); } onInitiativeMouseoverInSidebar(initiative: Initiative): void { diff --git a/src/map-app/app/presenter/sidebar/directory.ts b/src/map-app/app/presenter/sidebar/directory.ts index 3ac90f0c..2cb475c0 100644 --- a/src/map-app/app/presenter/sidebar/directory.ts +++ b/src/map-app/app/presenter/sidebar/directory.ts @@ -18,18 +18,6 @@ export class DirectorySidebarPresenter extends BaseSidebarPresenter { //todo reload new ones inside instead (without closing) EventBus.Sidebar.hideInitiativeList.pub(); }); - EventBus.Directory.initiativeClicked.sub(initiative => this.initiativeClicked(initiative)); - } - - notifyMapNeedsToNeedsToSelectInitiative(initiatives: Initiative[]): void { - if (initiatives.length == 0) - return; - - const maxZoom = initiatives.length === 1? this.parent.mapui.config.getMaxZoomOnGroup() : undefined; - const defaultPos = this.parent.mapui.config.getDefaultLatLng(); - - const data = EventBus.Map.mkSelectAndZoomData(initiatives, { maxZoom, defaultPos }); - EventBus.Map.selectAndZoomOnInitiative.pub(data); } onInitiativeMouseoverInSidebar(initiative: Initiative): void { @@ -39,30 +27,6 @@ export class DirectorySidebarPresenter extends BaseSidebarPresenter { EventBus.Map.needToHideInitiativeTooltip.pub(initiative); } - initiativeClicked(initiative?: Initiative): void { - if (initiative) { - //this.parent.contentStack.append(new SearchResults([initiative])); - // Move the window to the right position first - this.notifyMapNeedsToNeedsToSelectInitiative([initiative]); - - // Populate the sidebar and highlight the intiative in the directory - this.view.populateInitiativeSidebar( - initiative, - this.parent.mapui.markers.getInitiativeContent(initiative) ?? '' - ); - - } - else { - // User has deselected - // TODO: This probably shouldn\t be here - EventBus.Markers.needToShowLatestSelection.pub([]); - // Deselect the sidebar and hoghlight the iitiative in the directory - this.view.deselectInitiativeSidebar(); - - //doesn't do much? - } - } - // 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 88a17c65..2e674c16 100644 --- a/src/map-app/app/presenter/sidebar/initiatives.ts +++ b/src/map-app/app/presenter/sidebar/initiatives.ts @@ -10,7 +10,6 @@ export class InitiativesSidebarPresenter extends BaseSidebarPresenter { _eventbusRegister(): void { EventBus.Marker.selectionToggled.sub(initiative => this.onMarkerSelectionToggled(initiative)); - EventBus.Initiative.searchedInitiativeClicked.sub(initiative => this.searchedInitiativeClicked(_toString(initiative.uri, undefined))); } constructor(readonly parent: SidebarPresenter) { @@ -54,10 +53,6 @@ export class InitiativesSidebarPresenter extends BaseSidebarPresenter { this.view.refresh(); } - searchedInitiativeClicked(uri?: string) { - if (uri) this.view.onInitiativeClicked(uri); - } - performSearch(text: string) { this.parent.mapui.performSearch(text); } diff --git a/src/map-app/app/view/map.ts b/src/map-app/app/view/map.ts index f75385aa..4c4afafd 100644 --- a/src/map-app/app/view/map.ts +++ b/src/map-app/app/view/map.ts @@ -188,7 +188,7 @@ export class MapView extends BaseView { this.map.zoomControl.setPosition("bottomright"); - this.map.on('click', (e) => this.onInitiativeClicked(e)); + this.map.on('click', (e) => this.onMapClicked(e)); this.map.on('load', (e) => this.onLoad(e)); this.map.on('resize', (e) => this.onResize(e)); @@ -221,7 +221,7 @@ export class MapView extends BaseView { } } - private onInitiativeClicked(me: leaflet.LeafletMouseEvent): void { + private onMapClicked(me: leaflet.LeafletMouseEvent): void { // Deselect any selected markers if (me.originalEvent.ctrlKey && me.latlng) { MapView.copyTextToClipboard(me.latlng.lat + "," + me.latlng.lng); diff --git a/src/map-app/app/view/map/marker.ts b/src/map-app/app/view/map/marker.ts index ca5efb44..7108f7a6 100644 --- a/src/map-app/app/view/map/marker.ts +++ b/src/map-app/app/view/map/marker.ts @@ -119,15 +119,13 @@ export class MapMarkerView extends BaseView { this.presenter.notifySelectionToggled(this.presenter.initiative); } else { console.log(this.presenter.initiative); - EventBus.Directory.initiativeClicked.pub(this.presenter.initiative); + EventBus.Map.initiativeClicked.pub(this.presenter.initiative); } } setUnselected(initiative: Initiative) { //close pop-up this.presenter.mapUI.map?.closePopup(); - //close information on the left hand side (for smaller screens) - EventBus.Sidebar.hideInitiative.pub(); //reset the map vars and stop the zoom event from triggering selectInitiative ({target}) method //change the color of an initiative with a location @@ -209,7 +207,7 @@ export class MapMarkerView extends BaseView { let deselectInitiative = (e: leaflet.LeafletEvent) => { if (factory.geoClusterGroup.getVisibleParent(marker) !== marker) { this.setUnselected(initiative); - EventBus.Directory.initiativeClicked.pub(undefined); // deselects + EventBus.Map.initiativeClicked.pub(undefined); // deselects factory.geoClusterGroup.off("animationend", deselectInitiative); } } diff --git a/src/map-app/app/view/sidebar.ts b/src/map-app/app/view/sidebar.ts index 355f15f2..7aa5ea26 100644 --- a/src/map-app/app/view/sidebar.ts +++ b/src/map-app/app/view/sidebar.ts @@ -4,6 +4,7 @@ import * as d3 from 'd3'; import { SidebarPresenter } from '../presenter/sidebar'; import { BaseView } from './base'; import { getViewportWidth } from '../../utils'; +import { Initiative } from '../model/initiative'; export class SidebarView extends BaseView { @@ -231,5 +232,37 @@ export class SidebarView extends BaseView { .classed("sea-sidebar-list-initiatives", false); d3.select(".w3-btn").attr("title", this.presenter.mapui.labels.hideDirectory); - } + } + + 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" + ); + initiativeContentElement + .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)) + .append("i") + .attr("class", "fa " + "fa-times"); + initiativeContentElement + .append("div") + .html(initiativeContent); + initiativeSidebar.classed("sea-initiative-sidebar-open", true); + + 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/directory.ts b/src/map-app/app/view/sidebar/directory.ts index a4bda370..00a4e3d4 100644 --- a/src/map-app/app/view/sidebar/directory.ts +++ b/src/map-app/app/view/sidebar/directory.ts @@ -7,7 +7,6 @@ import { DirectorySidebarPresenter } from "../../presenter/sidebar/directory"; import { d3Selection } from "../d3-utils"; import { BaseSidebarView } from "./base"; import { propDefToVocabUri } from "../../model/data-services"; -import { getViewportWidth } from "../../../utils"; function uriToTag(uri: string) { return uri.toLowerCase().replace(/^.*[:\/]/, ""); @@ -165,42 +164,4 @@ export class DirectorySidebarView extends BaseSidebarView { if (values) addItems(directoryPropName, values); } - - 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" - ); - initiativeContentElement - .append("button") - .attr("class", "w3-button w3-border-0 ml-auto sidebar-button") - .attr("title", `${this.presenter.parent.mapui.labels.close} ${initiative.name}`) - .on("click", () => EventBus.Directory.initiativeClicked.pub(undefined)) - .append("i") - .attr("class", "fa " + "fa-times"); - initiativeContentElement - .append("div") - .html(initiativeContent); - initiativeSidebar.classed("sea-initiative-sidebar-open", true); - - if (getViewportWidth() <= 800) - EventBus.Sidebar.showSidebar.pub(); - } - - deselectInitiativeSidebar() { - d3.select(".sea-initiative-active").classed("sea-initiative-active", false); - let initiativeSidebar = d3.select("#sea-initiative-sidebar"); - // let initiativeContentElement = d3.select("#sea-initiative-sidebar-content"); - // initiativeContentElement.html(initiativeContent); - initiativeSidebar.classed("sea-initiative-sidebar-open", false); - d3.select(".sea-search-initiative-active") - .classed("sea-search-initiative-active", false); - } - } diff --git a/src/map-app/app/view/sidebar/initiatives.ts b/src/map-app/app/view/sidebar/initiatives.ts index d879b4fa..e74f4909 100644 --- a/src/map-app/app/view/sidebar/initiatives.ts +++ b/src/map-app/app/view/sidebar/initiatives.ts @@ -40,17 +40,6 @@ export class InitiativesSidebarView extends BaseSidebarView { this.createApplyFiltersButton(container); } - onInitiativeClicked(id: string) { - d3.select(".sea-search-initiative-active") - .classed("sea-search-initiative-active", false); - - d3.select('[data-uid="' + id + '"]') - .classed( - "sea-search-initiative-active", - true - ); - } - getSearchText(): string { return d3.select("#search-box").property("value"); } diff --git a/src/map-app/eventbus.ts b/src/map-app/eventbus.ts index 19a89e5e..0b03311e 100644 --- a/src/map-app/eventbus.ts +++ b/src/map-app/eventbus.ts @@ -18,7 +18,6 @@ export namespace EventBus { //export const filterDataset = new PostalEvent("Datasets.filterDataset"); } export namespace Directory { - export const initiativeClicked = new PostalTopic("Directory.initiativeClicked"); // deselected if undefined } export namespace Initiatives { export interface DatasetError { error: Error; dataset?: string; } @@ -31,8 +30,6 @@ export namespace EventBus { export namespace Initiative { export const created = new PostalTopic("Initiative.created"); export const refreshed = new PostalTopic("Initiative.refreshed"); - export const searchedInitiativeClicked = new PostalTopic("Initiative.searchedInitiativeClicked"); - //export const selected = new PostalTopic("Initiative.selected"); } export namespace Map { export interface ZoomOptions { @@ -76,6 +73,7 @@ export namespace EventBus { export const needToShowInitiativeTooltip = new PostalTopic("Map.needToShowInitiativeTooltip"); export const needsToBeZoomedAndPanned = new PostalTopic("Map.needsToBeZoomedAndPanned"); export const selectAndZoomOnInitiative = new PostalTopic("Map.selectAndZoomOnInitiative"); + export const initiativeClicked = new PostalTopic("Map.initiativeClicked"); export const setActiveArea = new PostalTopic("Map.setActiveArea"); export const resetSearch = new PostalTopic("Map.resetSearch"); } @@ -87,7 +85,6 @@ export namespace EventBus { export const needToShowLatestSelection = new PostalTopic("Markers.needToShowLatestSelection"); } export namespace Sidebar { - export const hideInitiative = new PostalTopic("Sidebar.hideInitiative"); export const showInitiativeList = new PostalTopic("Sidebar.showInitiativeList"); export const hideInitiativeList = new PostalTopic("Sidebar.hideInitiativeList"); export const hideInitiativeSidebar = new PostalTopic("Sidebar.hideInitiativeSidebar"); diff --git a/src/map-app/styles/style.css b/src/map-app/styles/style.css index db93545e..810a4da5 100644 --- a/src/map-app/styles/style.css +++ b/src/map-app/styles/style.css @@ -128,8 +128,7 @@ body { /* All */ .sea-initiatives-list-sidebar, -.sea-initiatives-list-sidebar-content, -.sea-field-active { +.sea-initiatives-list-sidebar-content { background: var(--dark) !important; } @@ -588,11 +587,6 @@ input[type="search"] { background-color: white; } -.sea-search-initiative-active { - color: white; - background-color: var(--dark); -} - .ml-auto { margin-left: auto; }