@mapsight/ui 7.1.0 → 7.2.0

package/src/js/plugins/browser/feature-deep-link.ts

@@ -1,223 +0,0 @@
-import type {Store} from "@reduxjs/toolkit";
-
-import {
-	deselectAll,
-	selectExclusively,
-} from "@mapsight/core/lib/feature-selections/actions";
-import {createFeatureSelectionSelector} from "@mapsight/core/lib/feature-selections/selectors";
-import type {FeatureId} from "@mapsight/core/types";
-
-import getQueryStringParameter from "@mapsight/lib-js/string/get-query-string-parameter";
-import removeQueryStringParameter from "@mapsight/lib-js/string/remove-query-string-parameter";
-import {observeStateOnce} from "@mapsight/lib-redux/observe-state";
-
-import {VIEW_MAP_ONLY} from "../../config/constants/app";
-import * as c from "../../config/constants/controllers";
-import {FEATURE_SELECTION_SELECT} from "../../config/feature/selections";
-import {setView} from "../../store/actions";
-import type {RootStateSlice} from "../../store/selectors";
-import {isViewMobile, viewSelector} from "../../store/selectors";
-import type {PluginInstance} from "../../types";
-
-const defaultFeatureSelectionsController = c.FEATURE_SELECTIONS;
-const defaultFeatureSelection = FEATURE_SELECTION_SELECT;
-const defaultGetParameter = "feature";
-const defaultAutoRemoveParameters = [defaultGetParameter, "cHash"];
-
-function selectFeature(
-	store: Store,
-	featureSelectionsController: string,
-	featureSelection: string,
-	featureId: FeatureId,
-	setMapOnlyViewInMobile: boolean,
-) {
-	store.dispatch(
-		selectExclusively(
-			featureSelectionsController,
-			featureSelection,
-			featureId,
-		),
-	);
-
-	if (
-		setMapOnlyViewInMobile &&
-		isViewMobile(viewSelector(store.getState() as RootStateSlice))
-	) {
-		store.dispatch(setView(VIEW_MAP_ONLY));
-	}
-}
-
-/**
- * Hooks into global window.history[fn] to react to
- * history state changes from the app (as opposed to `window.onpopstate` which
- * triggers when a browser ui actions causes a history state change).
- *
- * @param fn function name to patch (e.g. "pushState" or "replaceState")
- * @param callback will get called _after_ that function has been called
- */
-function patchWindowHistoryFunction(
-	fn: "pushState" | "replaceState",
-	callback: (state: unknown) => void,
-) {
-	const originalFn = window.history[fn];
-
-	window.history[fn] = (state, ...rest) => {
-		const returnValue: unknown = originalFn.apply(window.history, [
-			state,
-			...rest,
-		]);
-		callback(state);
-		return returnValue;
-	};
-}
-
-/**
- * This plugin will select the feature identified by the defined get parameter and optionally remove parameters from the
- * window.location using the history API.
- *
- * @param [options] options
- * @param [options.featureSelectionsController] name of the feature selections controller, defaults to mapsight ui default
- * @param [options.featureSelection="select"] name of the feature selection to track
- * @param [options.getParameter="feature"] name get parameter identifying the feature
- * @param [options.setMapOnlyViewInMobile=true] will set MapOnly view on mobile if a feature has been linked
- * @param [options.autoRemoveParameters] list of get parameters to remove once the feature
- *                                            has been selected, defaults to ["feature", "cHash"]. Pass false to disable.
- * @param [options.clearMissingParameters] if set to true or an array clear if getParameter and the mentioned
- *                                            parameters are missing. don't clear if getParameter is missing, but one of the
- *                                            mentioned parameters is there. we keep this to be safe in race condition
- *                                            where ?feature is set but ?preselect is not where we want to keep the implicit
- *                                            preselect of the feature parameter
- *
- * @returns plugin instance
- */
-export default function createPlugin(
-	options: {
-		featureSelectionsController?: string;
-		featureSelection?: string;
-		getParameter?: string;
-		setMapOnlyViewInMobile?: boolean;
-		autoRemoveParameters?: string[] | false;
-		clearMissingParameters?: string[] | false;
-	} = {},
-): PluginInstance {
-	const {
-		featureSelectionsController = defaultFeatureSelectionsController,
-		featureSelection = defaultFeatureSelection,
-		getParameter = defaultGetParameter,
-		autoRemoveParameters = defaultAutoRemoveParameters,
-		setMapOnlyViewInMobile = true,
-		clearMissingParameters = null,
-	} = options;
-	const selectorSelectedFeatures = createFeatureSelectionSelector(
-		featureSelectionsController,
-		featureSelection,
-	);
-
-	let isHandled = false;
-	return {
-		afterRender: function handleFeatureDeepLink(context) {
-			if (isHandled) {
-				return;
-			}
-
-			isHandled = true;
-
-			const {store} = context;
-			if (!store) {
-				return;
-			}
-
-			// We always do this action even if we should already have done that
-			// by re-hydrating the state as it may not have had the dynamic get parameter passed along
-			const featureId = getQueryStringParameter(
-				window.location.search,
-				getParameter,
-			);
-			if (featureId) {
-				selectFeature(
-					store,
-					featureSelectionsController,
-					featureSelection,
-					featureId,
-					setMapOnlyViewInMobile,
-				);
-
-				if (autoRemoveParameters && autoRemoveParameters.length) {
-					// if we can, remove initial feature id from url
-					// when the selection changes (e.g. panel is closed/different feature is selected)
-					observeStateOnce(store, selectorSelectedFeatures, () => {
-						let newUrl = window.location.href;
-						autoRemoveParameters.forEach((key) => {
-							newUrl = removeQueryStringParameter(newUrl, key);
-						});
-						window.history.pushState(
-							null,
-							window.document.title,
-							newUrl,
-						);
-					});
-				}
-			} else {
-				if (clearMissingParameters) {
-					let found: string | null = null;
-					while (!found && clearMissingParameters[0]) {
-						found = getQueryStringParameter(
-							window.location.search,
-							clearMissingParameters.shift() as string,
-						);
-					}
-					if (!found) {
-						store.dispatch(
-							deselectAll(
-								featureSelectionsController,
-								featureSelection,
-							),
-						);
-					}
-				}
-				// handle select via state at relaod
-				if (
-					window.history.state &&
-					"featureId" in window.history.state &&
-					window.history.state.featureId
-				) {
-					selectFeature(
-						store,
-						featureSelectionsController,
-						featureSelection,
-						window.history.state.featureId,
-						setMapOnlyViewInMobile,
-					);
-				}
-			}
-
-			const handleHistoryStateChange = (state) => {
-				if (state && "featureId" in state) {
-					if (state.featureId) {
-						selectFeature(
-							store,
-							featureSelectionsController,
-							featureSelection,
-							state.featureId,
-							setMapOnlyViewInMobile,
-						);
-					} else if (state?.featureId === null) {
-						// test for null to inhibit action if featureId is simply omitted
-						store.dispatch(
-							deselectAll(
-								featureSelectionsController,
-								featureSelection,
-							),
-						);
-					}
-				}
-			};
-
-			patchWindowHistoryFunction("pushState", handleHistoryStateChange);
-			patchWindowHistoryFunction(
-				"replaceState",
-				handleHistoryStateChange,
-			);
-		},
-	};
-}

package/src/js/plugins/browser/local-storage.ts

@@ -1,79 +0,0 @@
-import merge from "lodash/merge";
-
-import type {PathItem} from "@mapsight/core/lib/base/actions";
-import {mergeAll} from "@mapsight/core/lib/base/actions";
-import type {State} from "@mapsight/core/types";
-
-import pickPaths from "@mapsight/lib-js/object/pickPaths";
-import {createStorage} from "@mapsight/lib-redux/local-storage";
-
-import type {PluginInstance} from "../../types";
-
-const defaultLocalStorageKey = "mapsight--v3-ui";
-const defaultLocalStoragePaths = [
-	//['app', 'isFullscreen'],
-	//['app', 'view'],
-	["app", "userPreferenceListVisible"],
-];
-
-/**
- * This plugin will synchronize some paths of the store with the browser's local storage and restored on initialization.
- * See {CreateOptions.localStorageKey} and {CreateOptions.localStoragePaths} for configuration.
- *
- * @param [options] options
- * @param [options.localStorageKey="mapsight--v3-ui"] storage key
- * @param [options.localStoragePaths] paths to store
- * @returns plugin instance
- */
-export default function createPlugin({
-	localStorageKey = defaultLocalStorageKey,
-	localStoragePaths = defaultLocalStoragePaths,
-} = {}): PluginInstance {
-	if (typeof window === "undefined") {
-		console.error("This plugin will only work as intended in the browser!");
-	}
-
-	let restoredState: Partial<State>;
-	let isRestored = false;
-	let storage: ReturnType<typeof createStorage>;
-
-	return {
-		afterInit: function localStorageInitPlugin({
-			initialState,
-			isStateReHydrated,
-		}) {
-			storage = createStorage(localStorageKey);
-
-			// override initial state from local storage
-			const savedState = storage.getLocalStorageState();
-			restoredState = pickPaths(savedState, localStoragePaths);
-
-			// We cannot change the state before we have not at least rendered the
-			// dehydrated html at least once to prevent a mixed up DOM when server-side
-			// state and client-side determined state mismatch or has changed
-			// since page load. If the app is not re-hydrated but initially rendered
-			// in the client we can omit the additional render and set the restored
-			// state on creation (before render).
-			if (!isStateReHydrated) {
-				isRestored = true;
-				merge(initialState, restoredState);
-			}
-		},
-		afterCreate: function localStorageCreatePlugin({store}) {
-			// sync local storage
-			if (store && localStoragePaths) {
-				storage.synchronizePathsToLocalStorage(
-					store,
-					localStoragePaths,
-				);
-			}
-		},
-		afterRender: function localStorageAfterRenderPlugin({store}) {
-			if (store && !isRestored) {
-				store.dispatch(
-					mergeAll(restoredState as Record<PathItem, unknown>),
-				);
-			}
-		},
-	};
-}

package/src/js/plugins/browser/native-fullscreen.ts

@@ -1,81 +0,0 @@
-import {observeState} from "@mapsight/lib-redux/observe-state";
-
-import type {View} from "../../config/constants/app";
-import {viewSelector} from "../../store/selectors";
-import type {PluginInstance} from "../../types";
-
-/**
- * This plugin will request native fullscreen when entering one of the
- * specified views.
- *
- * @param [options] options
- * @param [options.views=['fullscreen']] views to enable native fullscreen on
- * @param [options.checkInitially=true] if set the view will be checked on init and depending on the specified list may request native fullscreen
- * @returns plugin
- */
-export default function createNativeFullscreenPlugin(
-	options: {
-		elementSelector?: string;
-		views?: View[];
-		checkInitially?: boolean;
-	} = {},
-): PluginInstance {
-	if (typeof window === "undefined") {
-		throw new Error(
-			"Cannot use native fullscreen plugin outside of browser!",
-		);
-	}
-
-	const {
-		elementSelector = ".ms3-wrapper",
-		views = ["fullscreen"],
-		checkInitially = true,
-	} = options;
-
-	let reqFS: string;
-	let exitFS: string;
-	let fSElement: string;
-	if ("requestFullscreen" in document.documentElement) {
-		reqFS = "requestFullscreen";
-		exitFS = "exitFullscreen";
-		fSElement = "fullscreenElement";
-	} else if ("webkitRequestFullscreen" in document.documentElement) {
-		reqFS = "webkitRequestFullscreen";
-		exitFS = "webkitExitFullscreen";
-		fSElement = "webkitFullscreenElement";
-	} else {
-		return {}; // nothing to do
-	}
-
-	const handleState = (view) => {
-		const element = document.querySelector(elementSelector);
-		if (!element) {
-			return;
-		}
-
-		const elementIsFullscreen = document[fSElement]
-			? element === document[fSElement]
-			: false;
-		const viewIsFullscreen = views.includes(view);
-
-		if (elementIsFullscreen !== viewIsFullscreen) {
-			if (viewIsFullscreen) {
-				element[reqFS]();
-			} else {
-				document[exitFS]();
-			}
-		}
-	};
-
-	return {
-		afterCreate: function nativeFullscreenPlugin({store}) {
-			if (!store) return;
-
-			if (checkInitially) {
-				handleState(viewSelector(store.getState()));
-			}
-
-			observeState(store, viewSelector, handleState);
-		},
-	};
-}

package/src/js/plugins/browser/no-scroll.ts

@@ -1,91 +0,0 @@
-import type {State} from "@mapsight/core/types";
-
-import {getAndObserveState} from "@mapsight/lib-redux/observe-state";
-
-import {VIEW_FULLSCREEN, VIEW_MAP_ONLY} from "../../config/constants/app";
-import type {RootStateSlice} from "../../store/selectors";
-import {viewSelector} from "../../store/selectors";
-import type {PluginInstance} from "../../types";
-
-function onTouchMoveNoScroll(e: TouchEvent) {
-	e.preventDefault();
-}
-
-/**
- * create a no-scroll-handler
- *
- * @param selector redux store selector to test if scroll should be inhibited
- * @param [noScrollCssClass] class to set, default = 'ms3--map-no-scroll'
- * @returns function to update no-scroll state.
- */
-export function createNoScrollHandler(
-	selector: (state: unknown) => boolean,
-	noScrollCssClass = "ms3--map-no-scroll",
-) {
-	return (state: State, forceAllow: boolean) => {
-		const isNoScroll = !forceAllow && selector(state);
-		if (isNoScroll) {
-			window.document.documentElement.classList.add(noScrollCssClass);
-			window.document.addEventListener("touchmove", onTouchMoveNoScroll);
-		} else {
-			window.document.documentElement.classList.remove(noScrollCssClass);
-			window.document.removeEventListener(
-				"touchmove",
-				onTouchMoveNoScroll,
-			);
-		}
-
-		return isNoScroll;
-	};
-}
-
-export const defaultNoScrollHandler = createNoScrollHandler(
-	(state: RootStateSlice) => {
-		const view = viewSelector(state);
-		return view === VIEW_MAP_ONLY || view === VIEW_FULLSCREEN;
-	},
-);
-export const defaultNoScrollObserveSelector = viewSelector;
-
-/**
- * This plugin will observe the state for changes to the view (default) and will call the defined handler.
- * By default, this will disable scrolling the document and add a class to the document element
- * when the view is in either "mapOnly" or "fullscreen" view.
- *
- * @param [options] options
- * @param [options.noScrollHandler] handler to call (will be passed the current state)
- * @param [options.noScrollObserveSelector] selector to observe state with
- * @returns {import('../../types').PluginInstance} plugin instance
- */
-export default function createPlugin(
-	options: {
-		noScrollCssClass?: string;
-		noScrollObserveSelector?: (state: State) => unknown;
-		noScrollHandler?: (state: State, forceAllow: boolean) => void;
-	} = {},
-): PluginInstance {
-	const {
-		noScrollHandler = defaultNoScrollHandler,
-		noScrollObserveSelector = defaultNoScrollObserveSelector,
-	} = options;
-
-	if (typeof window === "undefined") {
-		console.info(
-			"This plugin might not work as intended, if not run in the browser!",
-		);
-	}
-
-	return {
-		afterCreate: function noScrollPlugin(context) {
-			const {store} = context;
-
-			if (store) {
-				getAndObserveState<State>(
-					store,
-					noScrollObserveSelector,
-					(_old, _new, state) => noScrollHandler(state, false),
-				);
-			}
-		},
-	};
-}

package/src/js/plugins/browser/partial-content-changed-event.ts

@@ -1,23 +0,0 @@
-import {APP_EVENT_PARTIAL_CONTENT_CHANGED} from "../../components/helping/app-channel";
-import type {PluginInstance} from "../../types";
-
-/**
- * This plugin will call the partialChangeHandler (@see {CreateOptions.partialChangeHandler}) when some partial content
- * has changed in the mapsight ui controlled dom, allowing for manipulation of the changed dom (e.g. displaying charts in the
- * feature selection info)
- *
- * @param [_options] options currently not used
- * @returns plugin instance
- */
-export default function createPlugin(_options = {}): PluginInstance {
-	return {
-		afterCreate: function partialContentChangedEventPlugin(context) {
-			if (context.createOptions.partialChangeHandler) {
-				context.appChannelListeners.push([
-					APP_EVENT_PARTIAL_CONTENT_CHANGED,
-					context.createOptions.partialChangeHandler,
-				]);
-			}
-		},
-	};
-}

package/src/js/plugins/browser/piwik-track-feature-selection-event.ts

@@ -1,75 +0,0 @@
-import {
-	createFeatureSelectionSelector,
-	getFilteredFeatures,
-} from "@mapsight/core/lib/feature-selections/selectors";
-
-import {trackEvent} from "@mapsight/lib-js/misc/piwik";
-import {observeState} from "@mapsight/lib-redux/observe-state";
-
-import * as c from "../../config/constants/controllers";
-import {FEATURE_SELECTION_SELECT} from "../../config/feature/selections";
-import type {PluginInstance} from "../../types";
-
-const defaultCategory = "Mapsight";
-const defaultAction = "SelectedFeature";
-
-const defaultFeatureSelectionsController = c.FEATURE_SELECTIONS;
-const defaultFeatureSelection = FEATURE_SELECTION_SELECT;
-
-/**
- * This plugin will track piwik actions when the a feature is selected
- *
- * @see `@mapsight/lib-js/misc/piwik`
- *
- * @param [options] options
- * @param [options.featureSelectionsController] name of the feature selections controller, defaults to mapsight ui default
- * @param [options.featureSelection="select"] name of the feature selection to track
- * @param [options.category="Mapsight"] piwik category to track
- * @param [options.action="SelectedFeature"]  piwik action to track
- * @returns plugin instance
- */
-export default function createPlugin(
-	options: {
-		featureSelectionsController?: string;
-		featureSelection?: string;
-		category?: string;
-		action?: string;
-	} = {},
-): PluginInstance {
-	const {
-		featureSelectionsController = defaultFeatureSelectionsController,
-		featureSelection = defaultFeatureSelection,
-		category = defaultCategory,
-		action = defaultAction,
-	} = options;
-
-	return {
-		afterCreate: function piwikTrackFullscreenToggleEvent(context) {
-			const {store} = context;
-			if (!store) return;
-
-			observeState(
-				store,
-				createFeatureSelectionSelector(
-					featureSelectionsController,
-					featureSelection,
-				),
-				(selection) => {
-					const filteredFeatures = getFilteredFeatures(selection);
-					if (!filteredFeatures) return;
-
-					const hasFeatures = !!filteredFeatures.length;
-
-					if (hasFeatures) {
-						trackEvent(
-							category,
-							action,
-							featureSelection,
-							JSON.stringify(filteredFeatures),
-						);
-					}
-				},
-			); // TODO: Check!
-		},
-	};
-}

package/src/js/plugins/browser/piwik-track-fullscreen-toggle-event.ts

@@ -1,46 +0,0 @@
-import {trackEvent} from "@mapsight/lib-js/misc/piwik";
-import {observeState} from "@mapsight/lib-redux/observe-state";
-
-import {isFullscreenSelector} from "../../store/selectors";
-import type {PluginInstance} from "../../types";
-
-const defaultCategory = "Mapsight";
-const defaultActionEnabled = "FullscreenEnabled";
-const defaultActionDisabled = "FullscreenDisabled";
-
-/**
- * This plugin will track piwik actions when the fullscreen mode is en-/disabled.
- *
- * @see `@mapsight/lib-js/misc/piwik`
- *
- * @param [options] options
- * @param [options.category="Mapsight"] piwik category to track
- * @param [options.actionEnabled="FullscreenEnabled"]  piwik action to track when enabling fullscreen
- * @param [options.actionDisabled="FullscreenDisabled"]  piwik action to track when disabling fullscreen
- * @returns plugin instance
- */
-export default function createPlugin(
-	options: {
-		category?: string;
-		actionEnabled?: string;
-		actionDisabled?: string;
-	} = {},
-): PluginInstance {
-	const {
-		category = defaultCategory,
-		actionEnabled = defaultActionEnabled,
-		actionDisabled = defaultActionDisabled,
-	} = options;
-
-	return {
-		afterCreate: function piwikTrackFullscreenToggleEvent(context) {
-			const {store} = context;
-			if (!store) return;
-
-			// track fullscreen toggles
-			observeState(store, isFullscreenSelector, (newValue) =>
-				trackEvent(category, newValue ? actionEnabled : actionDisabled),
-			);
-		},
-	};
-}

package/src/js/plugins/browser/search.ts

@@ -1,42 +0,0 @@
-import {FeatureSourcesController} from "@mapsight/core/lib/feature-sources/controller";
-
-import * as c from "../../config/constants/controllers";
-import {searchResultSelectionFeatureSourceSelector} from "../../store/selectors";
-import type {PluginInstance} from "../../types";
-
-const defaultFeatureSourceId = "searchResult";
-const defaultFeatureSourcesControllerName = c.FEATURE_SOURCES;
-
-/**
- * This plugin will bind the search result feature source to the mapsight ui state
- *
- * @param [options] options
- * @param [options.featureSourceId] name of the feature source, default = "searchResult"
- * @param [options.featureSourcesControllerName] name of the feature sources controller, defaults to mapsight ui default
- * @returns plugin instance
- */
-export default function createPlugin(
-	options: {
-		featureSourceId?: string;
-		featureSourcesControllerName?: string;
-	} = {},
-): PluginInstance {
-	const {
-		featureSourceId = defaultFeatureSourceId,
-		featureSourcesControllerName = defaultFeatureSourcesControllerName,
-	} = options;
-
-	return {
-		afterCreate: function searchPlugin(context) {
-			const controller =
-				context.controllers?.[featureSourcesControllerName];
-
-			if (controller && controller instanceof FeatureSourcesController) {
-				controller.bindFeatureSourceToStore(
-					featureSourceId,
-					searchResultSelectionFeatureSourceSelector,
-				);
-			}
-		},
-	};
-}