@mapsight/ui 7.0.0

package/src/js/components/time-filter.jsx

@@ -0,0 +1,187 @@
+import {mergeFilterOptions} from "@mapsight/core/lib/filter/actions";
+
+// TODO: Replace with generic tracking solution that does not rely on simplejs to be used globally
+import {trackEvent} from "@mapsight/lib-js/misc/piwik";
+
+// TODO: Make optional to reduce bundle size
+import flatpickr from "flatpickr";
+
+// TODO: Make optional to reduce bundle size
+// TODO: Support other languages
+import {German as flatpickrGermanLocale} from "flatpickr/dist/l10n/de";
+import { memo, useCallback, useEffect, useRef} from "react";
+import {useDispatch, useSelector} from "react-redux";
+import {TIME_FILTER} from "../config/constants/controllers";
+
+import {translate} from "../helpers/i18n";
+
+const ID_FROM = "ms3-timefilter__from";
+const ID_TO = "ms3-timefilter__to";
+
+const DATEPICKER_OPTIONS = {
+	// TODO: Support other languages
+	locale: flatpickrGermanLocale,
+	dateFormat: "d.m.Y", // TODO: i18n
+};
+
+const leftPad = (str, padding) => (padding + str).substring(str.length);
+
+const parseDate = (str) => {
+	const parts = str.replace(/\s/, "").match(/(\d+)/g);
+	try {
+		const date = new Date(parts[2], parts[1] - 1, parts[0]);
+
+		return !isNaN(date.getTime()) ? date : null;
+	} catch (_e) {
+		return null;
+	}
+};
+
+// FIXME i18n
+const formatDate = (date) => {
+	if (!date) {
+		return "";
+	}
+
+	const day = date.getDate();
+	const monthIndex = date.getMonth();
+	const year = date.getFullYear();
+
+	return day + "." + leftPad(monthIndex + 1, "00") + "." + year;
+};
+
+function fromDateSelector(state) {
+	return state[TIME_FILTER] && state[TIME_FILTER].fromDate;
+}
+
+function toDateSelector(state) {
+	return state[TIME_FILTER] && state[TIME_FILTER].toDate;
+}
+
+function TimeFilter() {
+	// FIXME: stop using hardcoded ids
+	// TODO: use react input fields
+
+	const dispatch = useDispatch();
+
+	const fromDate = useSelector(fromDateSelector);
+	const toDate = useSelector(toDateSelector);
+
+	const fromInputRef = useRef();
+	const toInputRef = useRef();
+
+	useEffect(() => {
+		// we need to use let because to and from reference each other
+
+		let to;
+
+		const from = flatpickr(fromInputRef.current, {
+			...DATEPICKER_OPTIONS,
+			onChange: function onChange(selectedDates) {
+				if (selectedDates.length) {
+					to.set("minDate", selectedDates[0]);
+					to.redraw();
+				}
+			},
+		});
+
+		to = flatpickr(toInputRef.current, {
+			...DATEPICKER_OPTIONS,
+			onChange: function onChange(selectedDates) {
+				if (selectedDates.length) {
+					from.set("maxDate", selectedDates[0]);
+					from.redraw();
+				}
+			},
+		});
+	}, []);
+
+	const onSubmit = useCallback(
+		/**
+		 * @param {MouseEvent<HTMLButtonElement>} e event
+		 */
+		(e) => {
+			e.preventDefault();
+
+			// get values
+			const myFromDate = parseDate(fromInputRef.current.value);
+			const myToDate = parseDate(toInputRef.current.value);
+
+			dispatch(
+				mergeFilterOptions(TIME_FILTER, {
+					fromDate: myFromDate && myFromDate.toISOString(),
+					toDate: myToDate && myToDate.toISOString(),
+				}),
+			);
+
+			trackEvent("Mapsight", "Filtered");
+		},
+		[dispatch],
+	);
+
+	const onReset = useCallback(
+		/**
+		 * @param {MouseEvent<HTMLButtonElement>} _e event
+		 */
+		(_e) => {
+			[fromInputRef.current, toInputRef.current].forEach((element) => {
+				element._flatpickr.clear();
+				element._flatpickr.set("minDate", undefined);
+				element._flatpickr.set("maxDate", undefined);
+			});
+
+			dispatch(
+				mergeFilterOptions(TIME_FILTER, {
+					fromDate: null,
+					toDate: null,
+				}),
+			);
+
+			trackEvent("Mapsight", "FilterCleared");
+		},
+		[dispatch],
+	);
+
+	return (
+		<form onSubmit={onSubmit} className="ms3-timefilter">
+			<h2>{translate("ui.time-filter.span")}</h2>
+			<p>
+				<label htmlFor={ID_FROM}>
+					<span className="ms3-visuallyhidden">
+						{translate("from")}
+					</span>
+					<input
+						id={ID_FROM}
+						name={ID_FROM}
+						defaultValue={formatDate(fromDate)}
+						ref={fromInputRef}
+					/>
+				</label>
+
+				<label htmlFor={ID_TO}>
+					-
+					<input
+						id={ID_TO}
+						name={ID_TO}
+						defaultValue={formatDate(toDate)}
+						ref={toInputRef}
+					/>
+				</label>
+
+				<button
+					type="button"
+					className="ms3-filter-button ms3-filter-button--secondary"
+					onClick={onReset}
+				>
+					{translate("reset")}
+				</button>
+
+				<button type="submit" className="ms3-filter-button">
+					{translate("show")}
+				</button>
+			</p>
+		</form>
+	);
+}
+
+export default memo(TimeFilter);

package/src/js/components/view-toggle-button/desktop-button.jsx

@@ -0,0 +1,13 @@
+import ViewToggleButton from "./index";
+
+function DesktopViewToggleButton() {
+	return (
+		<ViewToggleButton
+			baseClass="ms3-map-overlay__button"
+			additionalClasses="ms3-map-overlay__button--with-icon ms3-map-overlay__button--desktop-view-toggle"
+			viewModifierClassPrefix="ms3-map-overlay__button--desktop-view-toggle--"
+		/>
+	);
+}
+
+export default DesktopViewToggleButton;

package/src/js/components/view-toggle-button/index.js

@@ -0,0 +1,39 @@
+import {connect} from "react-redux";
+
+import {createStructuredSelector} from "reselect";
+
+import {deselectAll} from "@mapsight/core/lib/feature-selections/actions";
+
+import {FEATURE_SELECTIONS} from "../../config/constants/controllers";
+import {FEATURE_SELECTION_SELECT} from "../../config/feature/selections";
+import {setView} from "../../store/actions.ts";
+import {
+	isMapOutOfViewportSelector,
+	isViewMobile,
+	viewSelector,
+	viewToggleOptionsSelector,
+} from "../../store/selectors.ts";
+import ViewToggleButton from "./view-toggle-button";
+
+export default connect(
+	createStructuredSelector({
+		view: viewSelector,
+		isMapOutOfViewport: isMapOutOfViewportSelector,
+		options: viewToggleOptionsSelector,
+	}),
+	null,
+	({options, ...stateProps}, {dispatch}, ownProps) => ({
+		...stateProps,
+		dispatch: dispatch,
+		changeView: (currentView, nextView) => {
+			dispatch(setView(nextView));
+
+			if (options.deselectFeaturesOnToggle && isViewMobile(currentView)) {
+				dispatch(
+					deselectAll(FEATURE_SELECTIONS, FEATURE_SELECTION_SELECT),
+				);
+			}
+		},
+		...ownProps,
+	}),
+)(ViewToggleButton);

package/src/js/components/view-toggle-button/mobile-button.jsx

@@ -0,0 +1,13 @@
+import ViewToggleButton from "./index";
+
+function MobileViewToggleButton() {
+	return (
+		<ViewToggleButton
+			baseClass="ms3-map-overlay__button"
+			additionalClasses="ms3-map-overlay__button--with-icon ms3-map-overlay__button--mobile-view-toggle"
+			viewModifierClassPrefix="ms3-map-overlay__button--mobile-view-toggle--"
+		/>
+	);
+}
+
+export default MobileViewToggleButton;

package/src/js/components/view-toggle-button/view-toggle-button.jsx

@@ -0,0 +1,74 @@
+import {memo, useCallback} from "react";
+import {useSelector} from "react-redux";
+
+import {
+	VIEW_DESKTOP,
+	VIEW_FULLSCREEN,
+	VIEW_MAP_ONLY,
+	VIEW_MOBILE,
+} from "../../config/constants/app";
+import {translate} from "../../helpers/i18n";
+import {viewSelector} from "../../store/selectors.ts";
+
+function getOtherView(view) {
+	switch (view) {
+		case VIEW_MAP_ONLY:
+			return VIEW_MOBILE;
+		case VIEW_FULLSCREEN:
+			return VIEW_DESKTOP;
+		case VIEW_DESKTOP:
+			return VIEW_FULLSCREEN;
+		case VIEW_MOBILE:
+		default:
+			return VIEW_MAP_ONLY;
+	}
+}
+
+function getAriaLabel(view) {
+	return translate("ui.view-toggle-button.ariaLabel" + view);
+}
+
+function getLabel(view) {
+	return translate("ui.view-toggle-button.label" + view);
+}
+
+function ViewToggleButton({
+	isMapOutOfViewport = false,
+	changeView,
+
+	additionalClasses = "",
+	baseClass = "button",
+	viewModifierClassPrefix = "button--",
+
+	style = {},
+}) {
+	const view = useSelector(viewSelector);
+	const otherView = getOtherView(view);
+
+	const onClick = useCallback(
+		function onClick(e) {
+			e.stopPropagation();
+			changeView(view, otherView);
+		},
+		[changeView, view, otherView],
+	);
+
+	let className = `${baseClass} ${viewModifierClassPrefix}${view} ${additionalClasses}`;
+	if (isMapOutOfViewport) {
+		className += ` ${viewModifierClassPrefix}map-out-of-view`;
+	}
+
+	return (
+		<button
+			type="button"
+			style={style}
+			className={className}
+			onClick={onClick}
+			aria-label={getAriaLabel(otherView)}
+		>
+			<span className={`${baseClass}__label`}>{getLabel(otherView)}</span>
+		</button>
+	);
+}
+
+export default memo(ViewToggleButton);

package/src/js/components/view-toggle-button/viewport-button.jsx

@@ -0,0 +1,13 @@
+import ViewToggleButton from "./index";
+
+function ViewportViewToggleButton() {
+	return (
+		<ViewToggleButton
+			baseClass="ms3-viewport-button"
+			additionalClasses="ms3-viewport-button--bottom-right ms3-viewport-button--mobile-view-toggle"
+			viewModifierClassPrefix="ms3-viewport-button--mobile-view-toggle--"
+		/>
+	);
+}
+
+export default ViewportViewToggleButton;

package/src/js/config/constants/app.ts

@@ -0,0 +1,16 @@
+export type View =
+	| typeof VIEW_DESKTOP
+	| typeof VIEW_MOBILE
+	| typeof VIEW_FULLSCREEN
+	| typeof VIEW_MAP_ONLY;
+
+export const VIEW_DESKTOP = "desktop";
+export const VIEW_MOBILE = "mobile";
+
+export const VIEW_FULLSCREEN = "fullscreen";
+export const VIEW_MAP_ONLY = "mapOnly";
+
+export const DETAILS_CONTENT_STATE_KEY = "featureItemDetailsContent";
+
+export const ZOOM_IN = "zoomIn";
+export const ZOOM_OUT = "zoomOut";

package/src/js/config/constants/controllers.ts

@@ -0,0 +1,11 @@
+export const FEATURE_SOURCES = "featureSources";
+export const FEATURE_SELECTIONS = "featureSelections";
+
+export const FEATURE_LIST = "list";
+export const MAP = "map";
+export const PROJECTIONS = "projections";
+
+export const USER_GEOLOCATION = "userGeolocation";
+
+export const TIME_FILTER = "timeFilter";
+export const TAG_FILTER = "tagFilter";

package/src/js/config/feature/selections.ts

@@ -0,0 +1,13 @@
+// ausgewähltes Feature für Detail-Ansicht
+export const FEATURE_SELECTION_SELECT = "select";
+// in Liste vorgewähltes Feature, ohne Detailansicht
+export const FEATURE_SELECTION_PRESELECT = "preselect";
+// in Liste und Karte hervorheben bei Mouse-Hover
+export const FEATURE_SELECTION_HIGHLIGHT = "highlight";
+
+// Attention! With respect to the map icon state this is an ordered collection. The map vector style will only correspond to that set state with the highest priority, ie. the one which has been mentioned first.
+export default {
+	[FEATURE_SELECTION_SELECT]: {max: 1},
+	[FEATURE_SELECTION_HIGHLIGHT]: {max: 1},
+	[FEATURE_SELECTION_PRESELECT]: {max: 1},
+};

package/src/js/config/feature/sources.ts

@@ -0,0 +1,77 @@
+import type {FeatureSourceState} from "@mapsight/core/lib/feature-sources/types";
+
+export {TIME_FILTER, TAG_FILTER} from "../constants/controllers";
+
+/**
+ * Create an empty feature source that can be filled using actions
+ * and cannot not load features itself.
+ *
+ * @returns config for a plain feature source
+ */
+export function plain(): FeatureSourceState {
+	return {
+		type: "noop" as const,
+		data: null,
+		lastUpdate: null,
+		lastActionType: null,
+	};
+}
+
+/**
+ * Create a feature source that loads data from a remote url.
+ *
+ * @param url url to fetch data from
+ * @returns config for a xhr json feature source
+ */
+export function xhrJson(url: string): FeatureSourceState {
+	return {
+		type: "xhr-json" as const,
+		url: url,
+		data: null,
+		lastUpdate: null,
+		lastActionType: null,
+	};
+}
+
+/**
+ * Create a feature source that fetches data from a remote url.
+ *
+ * Additionally, it will fetch the data every {timer} milliseconds.
+ *
+ * @param url url to fetch data from
+ * @param timer time in milliseconds to fetch new data
+ * @returns config for a xhr json feature source that will refresh regularly
+ */
+export function xhrJsonRefreshing(
+	url: string,
+	timer: number,
+): FeatureSourceState {
+	return {
+		type: "xhr-json" as const,
+		url: url,
+		doRefresh: true,
+		timer: timer,
+		data: null,
+		lastUpdate: null,
+		lastActionType: null,
+	};
+}
+
+/**
+ * add a filter to the definition of a feature source.
+ *
+ * may be used iteratively.
+ *
+ * @param featureSource definition to extend by filterName
+ * @param filterName name of filter to add to the filter collection. The feature filter will be applied when using the appropriate feature source selectors.
+ * @returns extended definition of feature source
+ */
+export function withFilter(
+	featureSource: Partial<FeatureSourceState>,
+	filterName: string,
+): Partial<FeatureSourceState> {
+	return {
+		...featureSource,
+		filters: [...(featureSource.filters || []), filterName],
+	};
+}

package/src/js/config/index.ts

@@ -0,0 +1,133 @@
+import type {Coordinate} from "ol/coordinate";
+import type {Extent} from "ol/extent";
+import type {ProjectionLike} from "ol/proj";
+
+import type {FeatureSourceState} from "@mapsight/core/lib/feature-sources/types";
+import type {FeatureInteractions} from "@mapsight/core/lib/map/lib/WithFeatureInteractions";
+import type {LayerDefinition} from "@mapsight/core/lib/map/lib/WithLayers";
+import type {Options} from "@mapsight/core/lib/map/types";
+
+import {
+	FEATURE_LIST,
+	FEATURE_SELECTIONS,
+	FEATURE_SOURCES,
+	MAP,
+	PROJECTIONS,
+	TIME_FILTER,
+} from "./constants/controllers";
+import featureSelections, {
+	FEATURE_SELECTION_HIGHLIGHT,
+	FEATURE_SELECTION_SELECT,
+} from "./feature/selections";
+import createFeatureInteractions from "./map/featureInteractions";
+import mapInteractions from "./map/interactions";
+
+export const defaultProjections: Array<ProjectionLike> = [];
+
+export function mapViewCenter(x: number, y: number): Coordinate {
+	return [x, y];
+}
+
+export function mapViewExtent(
+	minx: number,
+	miny: number,
+	maxx: number,
+	maxy: number,
+): Extent {
+	return [minx, miny, maxx, maxy];
+}
+
+export function mapView(
+	center: Coordinate,
+	extent: Extent,
+	zoom = 13,
+	minZoom = 5,
+	maxZoom = 18,
+): Options {
+	return {
+		center: center,
+		extent: extent,
+		zoom: zoom,
+		minZoom: minZoom,
+		maxZoom: maxZoom,
+	};
+}
+
+// FIXME need function for layers
+
+export function map(
+	layers: Record<string, LayerDefinition>,
+	view: Options,
+	projections = defaultProjections,
+	visible = false,
+	featureInteractions: FeatureInteractions = createFeatureInteractions(),
+) {
+	if (!projections) {
+		projections = defaultProjections;
+	}
+
+	return {
+		[MAP]: {
+			layers: layers,
+			moveTolerance: 2,
+			interactions: mapInteractions,
+			featureInteractions: featureInteractions,
+			view: view,
+			visible: visible,
+		},
+		[PROJECTIONS]: projections,
+	};
+}
+
+export function features(
+	featureSources: Record<string, Partial<FeatureSourceState>>,
+) {
+	return {
+		[FEATURE_SELECTIONS]: featureSelections,
+		[FEATURE_SOURCES]: featureSources,
+	};
+}
+
+// TODO derzeit ist nur eine Liste erlaubt!
+export function featureList(featureSourceName: string, visible = false) {
+	return {
+		[FEATURE_LIST]: {
+			visible: visible,
+			featureSource: featureSourceName,
+			featureSelectionHighlight: FEATURE_SELECTION_HIGHLIGHT,
+			featureSelectionSelect: FEATURE_SELECTION_SELECT,
+		},
+	};
+}
+
+export function timeFilter(visible = false) {
+	return {
+		[TIME_FILTER]: {
+			// TODO dies gehört nicht in diese js/config und nicht in die
+			//  Eigenschaften des TimeFilter-FilterController, sondern in den uiState
+			visible: visible,
+		},
+	};
+}
+
+export function defaultTopOffsetForView(_view: string) {
+	return 0;
+}
+
+/** @type {import('../types').SiteConfig} */
+export const siteConfig = {
+	/** base url of app. this must be set for server-side rendering and is not used when run in browser */
+	baseUrl: "//set this for server based rendering//",
+
+	/** images base url */
+	imagesUrl: "/images/",
+
+	/** search api url for feature search */
+	searchUrl: "/poi-search-api/",
+
+	/** search api query parameter for feature search */
+	searchQueryParameter: "query",
+
+	/** function to get top offset for the given view */
+	topOffsetForView: defaultTopOffsetForView,
+};

package/src/js/config/map/featureInteractions.ts

@@ -0,0 +1,53 @@
+import type {FeatureInteractions} from "@mapsight/core/lib/map/lib/WithFeatureInteractions";
+
+export default function createFeatureInteractions({
+	hitTolerance = 5,
+	deselectUncontrolledOnClick = null,
+}: {
+	hitTolerance?: number;
+	deselectUncontrolledOnClick?: Array<string> | null;
+} = {}): FeatureInteractions {
+	return {
+		mouseover: {
+			selection: "mouseover",
+			options: {
+				// mouse event button
+				main: true,
+				auxiliary: false,
+				secondary: false,
+				fourth: false,
+				fifth: false,
+
+				// options
+				cursor: "pointer",
+				deselectUncontrolled: null,
+				hitTolerance: hitTolerance,
+			},
+		},
+
+		mousedown: {
+			selection: "mousedown",
+			options: {
+				// mouse event button
+				main: true,
+				auxiliary: false,
+				secondary: false,
+				fourth: false,
+				fifth: false,
+
+				// options
+				deselectUncontrolled: deselectUncontrolledOnClick,
+				hitTolerance: hitTolerance,
+			},
+		},
+
+		touch: {
+			selection: "touch",
+			options: {
+				// options
+				deselectUncontrolled: deselectUncontrolledOnClick,
+				hitTolerance: hitTolerance,
+			},
+		},
+	};
+}

package/src/js/config/map/interactions.ts

@@ -0,0 +1,15 @@
+import type {Description} from "@mapsight/core/ol-proxy";
+
+const INTERACTIONS: Record<string, Description> = {
+	DragPan: {
+		type: "DragPanInteraction",
+		options: {kinetic: [-0.005, 0.05, 100]},
+	},
+	PinchZoom: {type: "PinchZoomInteraction"},
+	DoubleClickZoom: {type: "DoubleClickZoomInteraction"},
+	MouseWheelZoom: {type: "MouseWheelZoomInteraction"},
+	KeyboardPan: {type: "KeyboardPanInteraction"},
+	KeyboardZoom: {type: "KeyboardZoomInteraction"},
+};
+
+export default INTERACTIONS;