@mapsight/ui 7.1.0 → 7.2.1

package/src/js/helpers/i18n/en.ts

@@ -1,140 +0,0 @@
-import {
-	STATUS_ERROR,
-	STATUS_LOADING,
-} from "@mapsight/core/lib/feature-sources/selectors";
-
-import {
-	STATUS_ACTIVE,
-	STATUS_INACTIVE,
-} from "../../components/switcher/SwitcherEntry";
-import {
-	VIEW_DESKTOP,
-	VIEW_FULLSCREEN,
-	VIEW_MAP_ONLY,
-	VIEW_MOBILE,
-	ZOOM_IN,
-	ZOOM_OUT,
-} from "../../config/constants/app";
-
-/*  eslint quote-props: 0 */
-
-const en: Record<string, string> = {
-	open: "open",
-	close: "close",
-	reset: "reset",
-	show: "show",
-	from: "from",
-	nextEntry: "next entry",
-	prevEntry: "previous entry",
-
-	"ui.query-input.reset": "reset search",
-
-	"ui.feature-details.share-link.head": "share link ...",
-	"ui.feature-details.share-link.place": "link to choosen location:",
-	"ui.feature-details.share-link.close": "close dialog to share a link",
-
-	"ui.feature-details.content-inner.error": "error at loading details",
-	"ui.feature-details.content-inner.gotoPage": "jump to page",
-	"ui.feature-details.content-inner.loading": "loading details …",
-
-	"ui.main-panel.list-toggle.open": "open list",
-	"ui.main-panel.list-toggle.close": "close list",
-
-	"ui.feature-list.sorting.byDistance": "sort announcements by distance:",
-	"ui.feature-list.sorting.choose": "choose your location",
-	"ui.feature-list.sorting.own": "use device location",
-	"ui.feature-list.sorting.announcements": "sort announcements …",
-
-	"ui.feature-list.content.noListSelected": "no list selected",
-	"ui.feature-list.content.noEntries": "no entries in list",
-	"ui.feature-details.content.title": "title",
-	"ui.feature-details.content.description": "description",
-
-	"ui.feature-list.query-input.search": "text search in list below",
-	"ui.feature-list.query-input.placeholder": "search in list …",
-
-	"ui.time-filter.span": "set preview period", // FIXME prüfen
-
-	"ui.search.send": "search",
-
-	"ui.search.result.error": "error at loading search results",
-	"ui.search.result.empty": "no search results",
-
-	"ui.search.query-input.label": "street or location",
-	"ui.search.query-input.placeholder": "street or location ...",
-
-	"ui.feature-selection-info.close": "close information dialog",
-
-	"ui.map-overlay.search.open": "open search",
-	"ui.map-overlay.search.close": "close search",
-	"ui.map-overlay.search.modal.label": "Search function",
-	"ui.map-overlay.search.modal.headline": "Search",
-
-	"ui.map-overlay.logo.copyright": "The map is based on Mapsight",
-
-	"ui.map-overlay.info.modal.label": "Citations and Information",
-	"ui.map-overlay.info.modal.headline": "Citations and Information",
-	"ui.map-overlay.info.closeSources":
-		"Close Citations and Information dialog",
-	"ui.map-overlay.info.legend": "legend",
-	"ui.map-overlay.info.closeLegend": "close legend",
-	"ui.map-overlay.info.open":
-		"open source disclosures and further information",
-
-	"ui.map-overlay.layer-switcher.modal.label": "Layers",
-	"ui.map-overlay.layer-switcher.layers": "layers",
-	"ui.map-overlay.layer-switcher.closeLayers": "close layer picker",
-	"ui.map-overlay.layer-switcher.openLayers": "open layer picker",
-
-	"ui.map.usage.heading": "Keyboard shortcuts for map usage",
-	"ui.map.usage.html":
-		'<dl class="ms3-map-usage">' +
-		'<dt><kbd aria-label="Arrow right">→</kbd></dt><dd>move right</dd>' +
-		'<dt><kbd aria-label="Arrow left">←</kbd></dt><dd>move left</dd>' +
-		'<dt><kbd aria-label="Arrow down">↓</kbd></dt><dd>move down</dd>' +
-		'<dt><kbd aria-label="Arrow up">↑</kbd></dt><dd>move up</dd>' +
-		"<dt><kbd>+</kbd></dt><dd>zoom in</dd>" +
-		"<dt><kbd>-</kbd></dt><dd>zoom out</dd>" +
-		"</dl>",
-	"ui.map.visuallyhidden": "This part of the page shows a geographical map.",
-
-	[`ui.view-toggle-button.ariaLabel${VIEW_MAP_ONLY}`]: "show map only",
-	[`ui.view-toggle-button.ariaLabel${VIEW_FULLSCREEN}`]:
-		"switch to full screen",
-	[`ui.view-toggle-button.ariaLabel${VIEW_DESKTOP}`]: "close full screen",
-	[`ui.view-toggle-button.ariaLabel${VIEW_MOBILE}`]: "switch to list",
-
-	[`ui.view-toggle-button.label${VIEW_MAP_ONLY}`]: "map",
-	[`ui.view-toggle-button.label${VIEW_FULLSCREEN}`]: "full screen",
-	[`ui.view-toggle-button.label${VIEW_DESKTOP}`]: "full screen",
-	[`ui.view-toggle-button.label${VIEW_MOBILE}`]: "list",
-
-	[`ui.zoom-button.ariaLabel${ZOOM_OUT}`]: "zoom in",
-	[`ui.zoom-button.ariaLabel${ZOOM_IN}`]: "zoom out",
-
-	[`ui.zoom-button.label${ZOOM_OUT}`]: "zoom in",
-	[`ui.zoom-button.label${ZOOM_IN}`]: "zoom out",
-
-	[`ui.switcher.entry.label${STATUS_ERROR}`]: "error at loading",
-	[`ui.switcher.entry.label${STATUS_LOADING}`]: "loading",
-	[`ui.switcher.entry.label${STATUS_ACTIVE}`]: "active",
-	[`ui.switcher.entry.label${STATUS_INACTIVE}`]: "inactive",
-
-	"ui.user-geo-location-button.label": "jump to your location",
-	"ui.user-geo-location-button.ariaLabel": "jump to your location",
-
-	"ui.pagination.nextPage": ">",
-	"ui.pagination.prevPage": "<",
-	"ui.pagination.nextPageLabel": "Go to next page",
-	"ui.pagination.prevPageLabel": "Go to previous page",
-	"ui.pagination.goToSelectedPageLabel": "You are on page {page}",
-	"ui.pagination.goToPageLabel": "Go to page {page}",
-
-	"ui.share-position-link.title": "Share position",
-	"ui.share-position-link.instructions":
-		"Click on the map to share a position.",
-	"ui.share-position-link.shareTitle": "Share marked position",
-	"ui.share-position-link.shareButtonLabel": "Share marked position",
-};
-
-export default en;

package/src/js/helpers/i18n/index.ts

@@ -1,41 +0,0 @@
-// TODO: https://www.npmjs.com/package/i18next ?
-import de from "./de";
-import en from "./en";
-
-const DEFAULT_LANGUAGE = "de";
-let documentLanguage =
-	(typeof document !== "undefined" &&
-		document.documentElement &&
-		document.documentElement.lang) ||
-	DEFAULT_LANGUAGE;
-
-const DICTIONARY: Record<string, Record<string, string>> = {de, en};
-
-// use this to make dictionary expandable/overwritable by clients
-export function getDictionary() {
-	return DICTIONARY;
-}
-
-export function setDocumentLanguage(value) {
-	documentLanguage = value;
-}
-
-export function getDocumentLanguage() {
-	return documentLanguage;
-}
-
-/**
- * @param key key
- * @param language language
- * @returns translation
- */
-export function translate(
-	key: string,
-	language: string = documentLanguage,
-): string {
-	return (
-		DICTIONARY[language]?.[key] ??
-		DICTIONARY[DEFAULT_LANGUAGE]?.[key] ??
-		key
-	);
-}

package/src/js/helpers/mod-classes.ts

@@ -1,47 +0,0 @@
-import {unreachableValue} from "@mapsight/lib-js/unreachable";
-
-/**
- * @param name Name of block or element
- * @param mods modifiers
- * @returns class string
- */
-export default function modClasses(
-	name: string,
-	mods:
-		| Record<string, boolean>
-		| Array<string | false | null | undefined>
-		| string
-		| false
-		| null
-		| undefined,
-): string {
-	const modsArr = (() => {
-		// string to array
-		if (typeof mods === "string") {
-			return [mods];
-		}
-
-		// object to array
-		if (mods !== null && typeof mods === "object" && !Array.isArray(mods)) {
-			return Object.entries(mods)
-				.filter(([_, val]) => val === true)
-				.map(([key, _]) => key);
-		}
-
-		if (Array.isArray(mods)) {
-			return mods.filter(isNotFalsy);
-		}
-
-		if (mods === null || mods === false || mods === undefined) {
-			return [];
-		}
-
-		unreachableValue(mods);
-	})();
-
-	return [name, ...modsArr.map((mod) => `${name}--${mod}`)].join(" ");
-}
-
-function isNotFalsy<T>(val: T | false | null | undefined): val is T {
-	return val !== false && val !== null && val !== undefined;
-}

package/src/js/helpers/react.ts

@@ -1,14 +0,0 @@
-import type {ForwardedRef, RefObject} from "react";
-
-export function forwardRefValue<T>(
-	source: RefObject<T>,
-	dest: ForwardedRef<T>,
-): void {
-	if (dest !== null) {
-		if (typeof dest === "function") {
-			dest(source.current);
-		} else {
-			dest.current = source.current;
-		}
-	}
-}

package/src/js/helpers/scroll-to-element-top.ts

@@ -1,16 +0,0 @@
-export default function scrollToElementTop(
-	selector: string,
-	offsetTop: number = 0,
-	immediate: boolean = false,
-): void {
-	if (selector && typeof window !== "undefined") {
-		const element = window.document.querySelector(selector);
-		if (element) {
-			window.scrollBy({
-				left: 0,
-				top: element.getBoundingClientRect().top - offsetTop,
-				behavior: !immediate ? "smooth" : "auto",
-			});
-		}
-	}
-}

package/src/js/helpers/sort-features-by-distance.ts

@@ -1,102 +0,0 @@
-import {getDistance} from "ol/sphere";
-
-import type {
-	MapsightUiPlace,
-	MapsightUiPlaceGroup,
-	MapsightUiPlacesData,
-} from "../components/feature-list-sorting/feature-list-sorting";
-import type {MapsightUiFeature} from "../types";
-
-/**
- * @param feature feature object
- * @returns anchor
- */
-function defaultFeatureAnchorSelector(
-	feature: MapsightUiFeature,
-): [undefined | null | number, undefined | null | number] {
-	if (!feature) {
-		return [null, null];
-	}
-
-	// TODO: document/collect magic property names
-	const bbox = feature.bbox;
-
-	const x = bbox && bbox[0] && bbox[2] && (bbox[0] + bbox[2]) / 2;
-	const y = bbox && bbox[1] && bbox[3] && (bbox[1] + bbox[3]) / 2;
-
-	return [x, y];
-}
-
-/**
- * @param sorting sorting state
- * @param places places
- * @returns place to sort by or null
- */
-function findPlaceForSorting(
-	sorting: string,
-	places: MapsightUiPlacesData,
-): MapsightUiPlace | null {
-	const sortingKeys = sorting.split(",");
-
-	let placePointer:
-		| MapsightUiPlacesData
-		| MapsightUiPlace
-		| MapsightUiPlaceGroup = places;
-
-	for (const key of sortingKeys) {
-		if (!placePointer[key]) {
-			return null;
-		}
-
-		placePointer = placePointer[key];
-
-		if ("entries" in placePointer) {
-			placePointer = placePointer.entries;
-		}
-	}
-
-	if ("x" in placePointer && "y" in placePointer) {
-		return placePointer as MapsightUiPlace;
-	}
-
-	return null;
-}
-
-/**
- * sorts features by distance
- *
- * @param features features
- * @param places places
- * @param sorting sorting state
- * @param settings settings
- * @returns sorted features
- */
-export default function sortFeaturesByDistance(
-	features: Array<MapsightUiFeature>,
-	places: MapsightUiPlacesData,
-	sorting: null | undefined | string,
-	{
-		featureAnchorSelector = defaultFeatureAnchorSelector,
-	}: {
-		// featureAnchorSelector?(feature: MapsightUiFeature): Array<number>;
-		featureAnchorSelector?: (feature: MapsightUiFeature) => Array<any>;
-	} = {},
-): Array<MapsightUiFeature> {
-	if (!sorting) {
-		return features;
-	}
-
-	const placePointer = findPlaceForSorting(sorting, places);
-	if (placePointer) {
-		const placeCoords = [placePointer.x, placePointer.y];
-		return features
-			.slice()
-			.sort(
-				(a, b) =>
-					getDistance(placeCoords, featureAnchorSelector(a)) -
-					getDistance(placeCoords, featureAnchorSelector(b)),
-			);
-	}
-
-	return features;
-}

package/src/js/helpers/sticky.js

@@ -1,143 +0,0 @@
-const parentClass = "js-sticky-parent";
-const willStickClass = "js-will-stick";
-const stickyClass = "js-is-sticky";
-const stuckClass = "js-is-stuck";
-
-const DEFAULT_OPTIONS = {
-	offset: 0,
-	verticalPosition: "top",
-	onChange: (_state) => undefined,
-};
-
-function getStickPositionValue() {
-	const prefix = ["", "-webkit-"];
-	const test = document.head.style;
-	for (let i = 0; i < prefix.length; i += 1) {
-		test.position = `${prefix[i]}sticky`;
-	}
-	let stickyProp = "fixed";
-	if (typeof test.position !== "undefined") {
-		stickyProp = test.position;
-	}
-	test.position = "";
-	return stickyProp;
-}
-
-export default function makeSticky(
-	targetElement,
-	scrollElement = window,
-	options = {},
-) {
-	if (typeof window === "undefined") {
-		return () => undefined;
-	}
-
-	const positionValue = getStickPositionValue();
-	const useFixed = positionValue === "fixed";
-
-	options = {...DEFAULT_OPTIONS, ...options};
-
-	let state = "default";
-
-	if (options.verticalPosition === "top") {
-		targetElement.style[options.verticalPosition] = `${options.offset}px`;
-	}
-
-	if (!useFixed) {
-		targetElement.style.position = positionValue;
-	}
-
-	targetElement.classList.add(willStickClass);
-
-	const isWindow = scrollElement === window;
-	const delay = (isWindow && window.requestAnimationFrame) || ((f) => f());
-	const parentElement = targetElement.parentNode;
-	parentElement.className += ` ${parentClass}`;
-
-	const isFixedWithOffset = !isWindow && positionValue === "fixed";
-	const scrollElementOffset = isFixedWithOffset
-		? scrollElement.getBoundingClientRect().top
-		: 0;
-	const offset = scrollElementOffset + options.offset;
-	const parentOffset = parentElement.getBoundingClientRect().top;
-	const parentHeight = parentElement.offsetHeight;
-	const targetHeight = targetElement.offsetHeight;
-	const stickyStart = parentOffset - scrollElementOffset - offset;
-	const stickyStop =
-		parentOffset + parentHeight - scrollElementOffset - targetHeight;
-	const scrollListener = () => {
-		const scroll = isWindow
-			? window.scrollY || window.pageYOffset
-			: scrollElement.scrollTop;
-
-		const isBelow = scroll >= stickyStop;
-		if (isBelow && state === "sticky") {
-			state = "stuck";
-
-			delay(() => {
-				targetElement.classList.remove(stickyClass);
-				targetElement.classList.add(stuckClass);
-
-				if (useFixed) {
-					targetElement.style.top = "";
-					targetElement.style.bottom = "0";
-					targetElement.style.position = "absolute";
-				}
-
-				options.onChange(state);
-			});
-
-			return;
-		}
-
-		const isAbove = scroll <= stickyStart;
-		if (!isAbove && !isBelow) {
-			if (state !== "sticky") {
-				state = "sticky";
-
-				delay(() => {
-					targetElement.classList.remove(willStickClass);
-					targetElement.classList.remove(stuckClass);
-					targetElement.classList.add(stickyClass);
-					targetElement.style.position = positionValue;
-					targetElement.style.bottom = "";
-					targetElement.style[options.verticalPosition] =
-						`${options.offset}px`;
-
-					options.onChange(state);
-				});
-			}
-
-			return;
-		}
-
-		if (state !== "default") {
-			state = "default";
-
-			delay(() => {
-				targetElement.classList.remove(stickyClass);
-				targetElement.classList.remove(stuckClass);
-				targetElement.classList.add(willStickClass);
-
-				if (useFixed) {
-					targetElement.style.position = "";
-				}
-
-				options.onChange(state);
-			});
-		}
-	};
-	scrollElement.addEventListener("scroll", scrollListener, {passive: true});
-
-	return function cleanup() {
-		scrollElement.removeEventListener("scroll", scrollListener, {
-			passive: true,
-		});
-		targetElement.style.position = "";
-		targetElement.style[options.verticalPosition] = "";
-		targetElement.classList.remove(stickyClass);
-		targetElement.classList.remove(stuckClass);
-		targetElement.classList.remove(willStickClass);
-		targetElement.parentNode.classList.remove(parentClass);
-	};
-}

package/src/js/hooks/useCallbackRef.ts

@@ -1,14 +0,0 @@
-import {useEffect, useMemo, useRef} from "react";
-
-export default function useCallbackRef<
-	T extends (...args: unknown[]) => unknown,
->(callback: T | undefined): T {
-	const ref = useRef(callback);
-
-	useEffect(() => {
-		ref.current = callback;
-	});
-
-	// See https://github.com/facebook/react/issues/19240#issuecomment-652945246
-	return useMemo(() => ((...args) => ref.current?.(...args)) as T, []);
-}

package/src/js/hooks/useControllableState.ts

@@ -1,50 +0,0 @@
-import type {Dispatch, SetStateAction} from "react";
-import {useCallback, useEffect, useState} from "react";
-
-import useCallbackRef from "./useCallbackRef";
-import usePrevious from "./usePrevious";
-
-const noop = () => {
-	// empty
-};
-
-export default function useControllableState<T>({
-	prop,
-	defaultProp,
-	onChange = noop,
-}: {
-	prop?: T | undefined;
-	defaultProp?: T | undefined;
-	onChange?: (state: T) => void;
-}) {
-	const [state, setState] = useState<T | undefined>(defaultProp);
-	const handleChange = useCallbackRef(onChange);
-
-	const prevState = usePrevious(state);
-	useEffect(() => {
-		if (prevState !== state) {
-			handleChange(state as T);
-		}
-	}, [state, prevState, handleChange]);
-
-	const isControlled = prop !== undefined;
-	const value = isControlled ? prop : state;
-
-	const setValue: Dispatch<SetStateAction<T | undefined>> = useCallback(
-		(nextValue) => {
-			if (isControlled) {
-				const controlledValue =
-					typeof nextValue === "function"
-						? (nextValue as (prevState?: T) => T)(prop)
-						: nextValue;
-				if (controlledValue !== prop)
-					handleChange(controlledValue as T);
-			} else {
-				setState(nextValue);
-			}
-		},
-		[isControlled, prop, setState, handleChange],
-	);
-
-	return [value, setValue] as const;
-}

package/src/js/hooks/useDebounce.ts

@@ -1,32 +0,0 @@
-import {useEffect, useState} from "react";
-
-// https://usehooks.com/useDebounce/
-/**
- * @param value value to debounce
- * @param delay debounce delay
- * @returns debounced value
- */
-export default function useDebounce<T>(value: T, delay: number): T {
-	// State and setters for debounced value
-	const [debouncedValue, setDebouncedValue] = useState(value);
-
-	useEffect(
-		() => {
-			// Update debounced value after delay
-			const handler = setTimeout(() => {
-				setDebouncedValue(value);
-			}, delay);
-
-			// Cancel the timeout if value changes (also on delay change or unmount)
-			// This is how we prevent debounced value from updating if value is changed ...
-			// .. within the delay period. Timeout gets cleared and restarted.
-			return () => {
-				clearTimeout(handler);
-			};
-		},
-		// Only re-call effect if value or delay changes
-		[value, delay],
-	);
-
-	return debouncedValue;
-}

package/src/js/hooks/useHandleEscapeKeyDown.ts

@@ -1,27 +0,0 @@
-import type {RefObject} from "react";
-import {useEffect} from "react";
-
-import {isEventWithNoModKeys} from "../helpers/events";
-
-export default function useHandleEscapeKeyDown(
-	ref: RefObject<HTMLElement>,
-	onEscape: () => void,
-): void {
-	useEffect(() => {
-		const elem = ref.current;
-		if (elem === null) {
-			return;
-		}
-
-		const handleEsc = (ev: KeyboardEvent): void => {
-			if (isEventWithNoModKeys(ev) && ev.key === "Escape") {
-				onEscape();
-			}
-		};
-
-		elem.addEventListener("keydown", handleEsc);
-		return () => {
-			elem.removeEventListener("keydown", handleEsc);
-		};
-	}, [ref.current, onEscape]);
-}

package/src/js/hooks/useMapsightPanel.ts

@@ -1,40 +0,0 @@
-import type {RefObject} from "react";
-import {useEffect, useRef} from "react";
-import {useDispatch} from "react-redux";
-
-import {setViewportAnchor} from "@mapsight/core/lib/map/actions";
-
-import {MAP} from "../config/constants/controllers";
-import type {MainPanelPosition} from "../types";
-import useUpdateMapSizeOnTransitionEnd from "./useUpdateMapSizeOnTransitionEnd";
-
-function useMapsightPanel(
-	containerRef: RefObject<Element | null>,
-	panelPosition: MainPanelPosition,
-	collapsed: boolean,
-) {
-	const previousPositionRef = useRef<MainPanelPosition | null>(null);
-	const previousCollapsedRef = useRef<boolean>(false);
-	const dispatch = useDispatch();
-
-	useEffect(() => {
-		if (
-			previousPositionRef.current &&
-			(previousPositionRef.current !== panelPosition ||
-				previousCollapsedRef.current !== collapsed)
-		) {
-			dispatch(setViewportAnchor(MAP, "right"));
-		}
-
-		previousPositionRef.current = panelPosition;
-		previousCollapsedRef.current = collapsed;
-	}, [collapsed, dispatch, panelPosition]);
-
-	useUpdateMapSizeOnTransitionEnd(
-		containerRef.current ?? undefined,
-		dispatch,
-		previousPositionRef,
-	);
-}
-
-export default useMapsightPanel;