@mapsight/ui 7.0.0

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

@@ -0,0 +1,81 @@
+import {observeState} from "@mapsight/lib-redux/observe-state";
+
+import type {View} from "../../config/constants/app.ts";
+import {viewSelector} from "../../store/selectors";
+import type {PluginInstance} from "../../types.ts";
+
+/**
+ * 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

@@ -0,0 +1,90 @@
+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 {viewSelector} from "../../store/selectors";
+import type {PluginInstance, UiState} from "../../types.ts";
+
+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: {app: UiState}) => {
+		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

@@ -0,0 +1,23 @@
+import {APP_EVENT_PARTIAL_CONTENT_CHANGED} from "../../components/helping/app-channel";
+import type {PluginInstance} from "../../types.ts";
+
+/**
+ * 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

@@ -0,0 +1,75 @@
+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.ts";
+
+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

@@ -0,0 +1,46 @@
+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.ts";
+
+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

@@ -0,0 +1,42 @@
+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.ts";
+
+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,
+				);
+			}
+		},
+	};
+}