Skip to content

Commit

Permalink
chore(Poi Maps): always show navigation controls in popup
Browse files Browse the repository at this point in the history
  • Loading branch information
@KevinFabre-ods
KevinFabre-ods committed Jan 16, 2024
1 parent 4c58673 commit 4610afa
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 29 deletions.
44 changes: 30 additions & 14 deletions packages/visualizations/src/components/MapPoi/Map.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,18 @@ import maplibregl, {
} from 'maplibre-gl';

import {
POPUP_CONTENT,
POPUP_LOADING_CONTENT,
POPUP_FEATURE_CONTENT,
POPUP_FEATURE_CONTENT_LOADING,
POPUP_DISPLAY_CLASSNAME_MODIFIER,
POPUP_NAVIGATION_CONTROLS_CLASSNAME,
POPUP_NAVIGATION_ARROWS_WRAPPER_CLASSNAME,
POPUP_NAVIGATION_ARROW_BUTTON_CLASSNAME,
POPUP_NAVIGATION_ARROW_BUTTON_ICON_CLASSNAME,
POPUP_NAVIGATION_CLOSE_BUTTON_CLASSNAME,
POPUP_NAVIGATION_CLOSE_BUTTON_ICON_CLASSNAME,
POPUP_OPTIONS,
POPUP_WIDTH,
POPUP_NAVIGATION_CONTROLS_OFFSET_CLASSNAME,
} from './constants';
import type {
PopupConfigurationByLayers,
Expand Down Expand Up @@ -272,25 +274,24 @@ export default class MapPOI {

private renderFeaturesNavigationControls() {
const popupNavigationDiv = document.createElement('div');
popupNavigationDiv.classList.add(POPUP_NAVIGATION_CONTROLS_CLASSNAME);
const availableFeaturesTotal = this.availableFeaturesOnClick.length;
let arrows = '';
if (availableFeaturesTotal > 1) {
const activeFeatureHumanIndex =
this.availableFeaturesOnClick.indexOf(this.activeFeature) + 1;
arrows = `<button class="${POPUP_NAVIGATION_ARROW_BUTTON_CLASSNAME}" id="prevButton" ${
arrows = `<div class="${POPUP_NAVIGATION_CONTROLS_OFFSET_CLASSNAME}"></div><div class="${POPUP_NAVIGATION_ARROWS_WRAPPER_CLASSNAME}"><button class="${POPUP_NAVIGATION_ARROW_BUTTON_CLASSNAME}" id="prevButton" ${
activeFeatureHumanIndex === 1 ? 'disabled' : ''
}><span class="${POPUP_NAVIGATION_ARROW_BUTTON_ICON_CLASSNAME}"></span></button>
<div class="feature-count">${activeFeatureHumanIndex} / ${availableFeaturesTotal}</div>
<button class="${POPUP_NAVIGATION_ARROW_BUTTON_CLASSNAME}" id="nextButton" ${
activeFeatureHumanIndex === availableFeaturesTotal ? 'disabled' : ''
}><span class="${POPUP_NAVIGATION_ARROW_BUTTON_ICON_CLASSNAME}"></span></button>`;
}><span class="${POPUP_NAVIGATION_ARROW_BUTTON_ICON_CLASSNAME}"></span></button></div>`;
}

popupNavigationDiv.innerHTML = `
<div class="${POPUP_NAVIGATION_CONTROLS_CLASSNAME}">
${arrows}
<button class="${POPUP_NAVIGATION_CLOSE_BUTTON_CLASSNAME}"><span class="${POPUP_NAVIGATION_CLOSE_BUTTON_ICON_CLASSNAME}"></span></button>
</div>
`;

const prevButton = popupNavigationDiv.querySelector('#prevButton');
Expand All @@ -306,7 +307,13 @@ export default class MapPOI {
return popupNavigationDiv;
}

/** Update popup content. First add a loading state, then replace it with content */
/**
* Update popup content.
* - First add a loading state,
* - Then replace it with content
*
* Navigation controls element is always displayed
*/
private updatePopupContent() {
if (!this.activeFeature) return;
const {
Expand All @@ -318,17 +325,26 @@ export default class MapPOI {
if (!popupLayerConfiguration) return;
const { getLoadingContent, getContent } = popupLayerConfiguration;

this.popup.setHTML(`<div class="${POPUP_LOADING_CONTENT}">${getLoadingContent()}</div>`);
const controlsDiv = this.renderFeaturesNavigationControls();

const loadingWrapper = document.createElement('div');

const popupFeatureContentLoading = document.createElement('div');
popupFeatureContentLoading.classList.add(POPUP_FEATURE_CONTENT_LOADING);
popupFeatureContentLoading.innerHTML = getLoadingContent();

loadingWrapper.append(controlsDiv, popupFeatureContentLoading);
this.popup.setDOMContent(loadingWrapper);

getContent(id, properties).then((content) => {
const popupContainerDiv = document.createElement('div');
const controlsDiv = this.renderFeaturesNavigationControls();
const wrapper = document.createElement('div');

const popupContentDiv = document.createElement('div');
popupContentDiv.innerHTML = `<div class="${POPUP_CONTENT}">${content}</div>`;
popupContainerDiv.append(controlsDiv, popupContentDiv);
const popupFeatureContent = document.createElement('div');
popupFeatureContent.classList.add(POPUP_FEATURE_CONTENT);
popupFeatureContent.innerHTML = content;

this.popup.setDOMContent(popupContainerDiv);
wrapper.append(controlsDiv, popupFeatureContent);
this.popup.setDOMContent(wrapper);
});
}

Expand Down
38 changes: 25 additions & 13 deletions packages/visualizations/src/components/MapPoi/MapRender.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,8 +185,8 @@
box-sizing: border-box;
box-shadow: 0 6px 13px 0 rgba(0, 0, 0, 0.26);
}
.map-card :global(.poi-map__popup .poi-map__popup-content),
.map-card :global(.poi-map__popup .poi-map__popup-content--loading) {
.map-card :global(.poi-map__popup .poi-map__popup-feature-content),
.map-card :global(.poi-map__popup .poi-map__popup-feature-content--loading) {
margin: 13px;
}
/* Add a more opacity and blur effect on map when cooperative gesture is shown */
Expand All @@ -196,27 +196,42 @@
}
/* --- POPUP CLOSE BUTTON --- */
/* Hide close button when its display is as a tooltip */
.map-card :global(.poi-map__popup--as-tooltip .poi-map__popup-navigation-close-button) {
/* Hide close button and offset when its display is as a tooltip
* Hidden offset allow to center the arrows wrapper
*/
.map-card :global(.poi-map__popup--as-tooltip .poi-map__popup-navigation-close-button),
.map-card :global(.poi-map__popup--as-tooltip .poi-map__popup-navigation-controls-offset) {
display: none;
}
/* --- POPUP NAVIGATION CONTROLS --- */
.map-card :global(.poi-map__popup-navigation-controls) {
--navigation-button-size: 36px;
position: relative;
display: flex;
justify-content: end;
gap: 6px;
margin: 6px;
max-height: var(--navigation-button-size);
}
.map-card :global(.poi-map__popup-arrows-wrapper) {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
margin: 6px 6px 0px 6px;
}
.map-card :global(.poi-map__popup-navigation-controls-offset) {
width: var(--navigation-button-size);
flex-shrink: 0;
}
.map-card :global(.poi-map__popup-navigation-arrow-button) {
display: flex;
align-items: center;
justify-content: center;
padding: 0px;
width: 36px;
height: 36px;
width: var(--navigation-button-size);
height: var(--navigation-button-size);
background: none;
border: none;
cursor: pointer;
Expand Down Expand Up @@ -251,16 +266,13 @@
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
width: var(--navigation-button-size);
height: var(--navigation-button-size);
padding: 0px;
border: none;
background: none;
cursor: pointer;
position: absolute;
top: 0;
bottom: 0;
right: 0;
flex-shrink: 0;
}
.map-card :global(.poi-map__popup-navigation-close-button-icon) {
position: relative;
Expand Down
7 changes: 5 additions & 2 deletions packages/visualizations/src/components/MapPoi/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,12 @@ export const POPUP_WIDTH = 300;

// Update styles in ./MapRender.svelte if one of these classnames must change.
const POPUP_CLASSNAME = 'poi-map__popup';
export const POPUP_CONTENT = 'poi-map__popup-content';
export const POPUP_LOADING_CONTENT = 'poi-map__popup-content--loading';
export const POPUP_FEATURE_CONTENT = 'poi-map__popup-feature-content';
export const POPUP_FEATURE_CONTENT_LOADING = 'poi-map__popup-feature-content--loading';
export const POPUP_NAVIGATION_CONTROLS_CLASSNAME = 'poi-map__popup-navigation-controls';
export const POPUP_NAVIGATION_CONTROLS_OFFSET_CLASSNAME =
'poi-map__popup-navigation-controls-offset';
export const POPUP_NAVIGATION_ARROWS_WRAPPER_CLASSNAME = 'poi-map__popup-arrows-wrapper';
export const POPUP_NAVIGATION_ARROW_BUTTON_CLASSNAME = 'poi-map__popup-navigation-arrow-button';
export const POPUP_NAVIGATION_ARROW_BUTTON_ICON_CLASSNAME =
'poi-map__popup-navigation-arrow-button-icon';
Expand Down

0 comments on commit 4610afa

Please sign in to comment.