@mapsight/ui 7.0.0

package/src/js/types.ts

@@ -0,0 +1,381 @@
+import type {Store, StoreEnhancer} from "redux";
+
+import type {BaseController} from "@mapsight/core/lib/base/controller";
+import type {EnhancedStore, Feature, State} from "@mapsight/core/types";
+
+import type {MapsightStyleFunction} from "@mapsight/lib-ol/style/styleFunction";
+
+import type {MapsightUiPlacesData} from "./components/feature-list-sorting/feature-list-sorting.tsx";
+import type {View} from "./config/constants/app.ts";
+import type {MapsightUiComponents} from "./helpers/components";
+
+// helper type https://stackoverflow.com/a/61132308
+export type DeepPartial<T> = T extends object
+	? {
+			[P in keyof T]?: DeepPartial<T[P]>;
+		}
+	: T;
+
+export type MapsightUiStore = EnhancedStore<{app: UiState}>;
+
+/**
+ * We keep a context object for each mapsight ui instance holding all the information
+ * plugins will be passed this object and may manipulate it's properties
+ */
+export type MapsightUiContext = {
+	/** indicates if the instance has been rendered at least once (available after init) */
+	hasRendered: boolean;
+	/** the container element the instance should be rendered into (available after init) */
+	container: HTMLElement | null;
+	/** the mapsight core vector style function (see @mapsight/core) (available after init) */
+	styleFunction: MapsightStyleFunction;
+	/** base mapsight config (available after init) TODO: document further */
+	baseMapsightConfig: Partial<State>;
+	/** options on how to create the mapsight app (available after init) */
+	createOptions: CreateOptions;
+	/** array of app channel listener definitions (available after init) */
+	appChannelListeners: AppChannelListenerDefinition[];
+	/** initial state (available after init) TODO: document further */
+	initialState?: DeepPartial<{app: UiState}>;
+	/** indicates if the instance has been re-hydrated (available after init) */
+	isStateReHydrated?: boolean;
+	/** map of controllers (available after init) */
+	controllers?: Record<string, BaseController>;
+	/** redux store enhancer (available after create) */
+	storeEnhancer?: StoreEnhancer;
+	/** redux store (available after create) */
+	store?: MapsightUiStore;
+	/**
+	 * Function to render the app (available after create). Render without waiting for plugins
+	 * (for e.g. waiting on external data).
+	 */
+	render?: MapsightUiRenderFunction<any>;
+	/**
+	 * Function to render the app async (available after create). Render allowing plugins to
+	 * delay render (for e.g. waiting on external data).
+	 */
+	renderAsync?: MapsightUiAsyncRenderFunction<any>;
+	/** indicates whether the render is delayed by a promise returned by the plugin function
+	 * (available before render) */
+	canPluginsDelayRender?: boolean;
+	/** props to be rendered (available after render) */
+	rendererProps?: ExternalMapsightUiRendererProps;
+	/** the reference that may have been returned by the renderer (available after render)*/
+	renderRef?: any;
+};
+
+/**
+ * plugin function that gets called
+ */
+export type PluginFunction = (
+	context: MapsightUiContext,
+) => // TODO: return `Promise<unknown> | unknown`?
+Promise<unknown> | void;
+
+export type PluginPhase =
+	| "afterInit"
+	| "afterCreate"
+	| "beforeRender"
+	| "afterRender";
+
+/**
+ * plugin instance
+ */
+export type PluginInstance = {
+	/** optional plugin to be called after initialization */
+	afterInit?: PluginFunction;
+	/** optional plugin to be called after creation */
+	afterCreate?: PluginFunction;
+	/** optional plugin to be called after rendering */
+	beforeRender?: PluginFunction;
+	/** optional plugin to be called after rendering */
+	afterRender?: PluginFunction;
+};
+
+export type PluginDefinition = [string, null | PluginInstance];
+
+export type InternalMapsightUiRendererProps = {
+	store: Store<State>;
+	components: MapsightUiComponents;
+	appChannelListeners: AppChannelListenerDefinition[];
+};
+
+export type ExternalMapsightUiRendererProps = {
+	requestUrlSearch?: string;
+	title?: string;
+};
+
+export type MapsightUiRendererProps = ExternalMapsightUiRendererProps &
+	InternalMapsightUiRendererProps;
+
+/**
+ * @param container the container element the instance should be rendered into
+ * @param props props to render
+ * @param hydrate whether to hydrate existing render target, default: false
+ * @returns may return a value depending on the renderer
+ */
+export type MapsightUiRenderer<R = undefined> = (
+	container: null | HTMLElement,
+	props: MapsightUiRendererProps,
+	hydrate: boolean | undefined,
+) => R;
+
+/**
+ * @param rendererProps props to render
+ * @returns may return a value depending on the renderer
+ */
+export type MapsightUiRenderFunction<R> = (
+	rendererProps: ExternalMapsightUiRendererProps,
+) => R;
+
+/**
+ * @param rendererProps props to render
+ * @returns may return a value depending on the renderer
+ */
+export type MapsightUiAsyncRenderFunction<R> = (
+	rendererProps: ExternalMapsightUiRendererProps,
+) => Promise<R>;
+
+export type MapsightUiView = View;
+
+export type FullUiState = {
+	isFullscreen: boolean;
+
+	regions: Record<
+		string,
+		{
+			label: string;
+			bounds: [number, number, number, number];
+		}
+	>;
+	selectedRegion: string;
+
+	places: MapsightUiPlacesData;
+
+	embeddedMap: boolean;
+
+	title: string;
+
+	metaTags: Array<{
+		name: string | undefined;
+		property: string | undefined;
+		content: string;
+	}>;
+
+	searchInMap: boolean;
+	searchQuery: string;
+	searchResult: {
+		url: string;
+		status: "error" | "loading" | "success" | null;
+		data: unknown;
+		error: unknown;
+		lastUpdate: number | null;
+	};
+	searchResultSelectionFeatures: MapsightUiFeature[];
+
+	view: MapsightUiView;
+	viewDefaultDesktop: "desktop" | "fullscreen";
+	viewDefaultMobile: "mobile" | "mapOnly";
+	viewBreakpoints: MapsightUiView[];
+	mapIsOutOfViewport: boolean;
+
+	isOverlayModalVisible: boolean;
+
+	userPreferenceListVisible: boolean;
+	listSorting: string;
+	listQuery: string;
+	listPage: number;
+	lastListScrollPosition: number;
+
+	featureSelectionInfo: {
+		stuckHeaderHeight: number;
+		stickyHeader: boolean;
+	};
+	pageTitle: {
+		show: boolean;
+	};
+	list: {
+		show: boolean;
+		selectOnClick: true | false | "mainAndIcon";
+		showVaryingListInfoOnly: boolean;
+		cyclingControl: boolean;
+		deselectOnClick: boolean;
+		filterControl: boolean;
+		paginationControl: boolean;
+		selectionBehavior: {
+			desktop: "scrollToMap" | null;
+			mobile: "expandInList" | "scrollToMap" | "showInMapOnlyView" | null;
+		};
+		selectionBehaviorSelection: "select" | "preselect";
+		scrollToItemOnPreselect: boolean;
+		showSelectedOnly: boolean;
+		itemsPerPage: number;
+		stickyHeader: boolean;
+		highlightOnMouse: boolean;
+		sortControl: boolean;
+		detailsInList: boolean;
+		integratedList: boolean;
+		renderAs: string;
+		renderGroupAs: string;
+	};
+	viewToggle: {
+		show: boolean;
+		deselectFeaturesOnToggle: boolean;
+	};
+	layerSwitcher: {
+		show: {
+			internal: boolean;
+			external: boolean;
+		};
+		internal: {
+			grouped: boolean;
+			layerIdsSelector: (state: object) => string[];
+		};
+		external: {
+			grouped: boolean;
+			layerIdsSelector: (state: object) => string[];
+		};
+	};
+	tagSwitcher: {
+		show: boolean;
+		featureSourceId: string;
+		featureSourcesControllerName: string;
+		sortTags: boolean;
+		toggleableGroups: boolean;
+	};
+	map: {
+		show: boolean;
+	};
+	timeFilter: {
+		show: boolean;
+	};
+	tagFilter: {
+		show: boolean;
+		featureSourceId: string;
+	};
+	miniLegendLayer: string;
+};
+
+export type UiState = DeepPartial<FullUiState>;
+
+export type AppChannelListenerDefinition = [string, EventListener];
+
+export type SiteConfig = {
+	baseUrl: string;
+	imagesUrl: string;
+	searchUrl: string;
+	searchQueryParameter: string;
+	topOffsetForView: (view: string) => number;
+	lang?: string;
+};
+
+export type MapsightUiReHydrationState = {
+	app: UiState;
+	[x: string | number | symbol]: unknown; // TODO: add type defs in @mapsight/core for state
+};
+
+// TODO: Move these to @mapsight/core types
+export type MapsightCoreAction = import("redux").AnyAction &
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	import("redux-thunk").ThunkAction<any, any, any, any> &
+	import("redux-batched-actions").BatchAction;
+export type MapsightCoreState =
+	| string
+	| number
+	| Array<MapsightCoreState | null | undefined>
+	| object;
+export type MapsightCoreReducer<
+	T extends MapsightCoreState = MapsightCoreState,
+	U extends MapsightCoreAction = MapsightCoreAction,
+> = import("redux").Reducer<T, U>;
+
+export type MapsightUiAppReducer = MapsightCoreReducer<UiState>;
+
+export type CreateOptions = {
+	// store
+	storeEnhancer?: import("redux").StoreEnhancer;
+	reducers?: {
+		[x: string]: undefined | MapsightCoreReducer;
+		app?: MapsightUiAppReducer;
+	};
+	uiState?: UiState;
+
+	// functionality
+	plugins?: PluginDefinition[];
+	controllers?: Record<
+		string,
+		import("@mapsight/core/lib/base/controller").BaseController
+	>;
+
+	// rendering
+	components?: MapsightUiComponents;
+	renderer?: MapsightUiRenderer<any>;
+	dehydratedStateAttributeName?: string;
+	reHydratedState?: MapsightUiReHydrationState;
+	renderBreakpoints?: Record<string, [number, number]>;
+	partialChangeHandler?: EventListener;
+
+	appChannelListeners?: AppChannelListenerDefinition[];
+} & Partial<SiteConfig>;
+
+export type MapsightUiFeatureProperty =
+	| "title"
+	| "description"
+	| "listInformation"
+	| "detailsUrl"
+	| "group"
+	| "mapsightIconId"
+	| "listName"
+	| "name"
+	| "tooltip"
+	| "tagGroups"
+	| "permanentLink"
+	| "overrideListHtml"
+	| "isIncompleteSuggest";
+
+export type MapsightUiFeatureId = string | number;
+
+export type MapsightUiFeature = Feature & {
+	id: MapsightUiFeatureId;
+	// TODO: Why are we using `object` here instead of the default `Geometry` type?
+	geometry: object;
+	properties: Record<MapsightUiFeatureProperty, any> & {
+		id: MapsightUiFeatureId;
+	};
+	bbox?: [number, number, number, number];
+};
+
+export type MainPanelPosition = "left" | "below";
+export type MainPanelContentType = "selectionInfo" | "list" | null;
+
+export type MainPanelContextOptions = {
+	showSelectionInfo: boolean;
+	showList: boolean;
+	collapsible: boolean;
+	panelPosition: MainPanelPosition;
+};
+
+export type MainPanelContextState = {
+	feature: MapsightUiFeature | null;
+	contentType: MainPanelContentType;
+	collapsed: boolean;
+};
+
+export type MainPanelContextValue = MainPanelContextOptions &
+	MainPanelContextState;
+
+export type FeatureListProps<T extends import("react").ElementType = "div"> = {
+	additionalClasses?: string | null;
+	as?: T;
+	attributes?: import("react").HTMLAttributes<T>;
+	headerAs?: null | import("react").ElementType;
+	contentAs?: null | import("react").ElementType;
+	footerAs?: null | import("react").ElementType;
+	itemAs?: import("react").ElementType;
+	enableKeyboardControl?: boolean;
+	autoloadFeatureSource?: boolean;
+};
+
+export type SelectFeatureActionOptions = {
+	keyboard?: boolean;
+};

package/src/scss/_reset.scss

@@ -0,0 +1,205 @@
+@use "variables";
+
+// Reset css in .ms3-wrapper scope with zero added specificity (https://developer.mozilla.org/en-US/docs/Web/CSS/:where)
+:where(.ms3-wrapper) {
+	*,
+	::before,
+	::after {
+		box-sizing: border-box; // Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+
+		// Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+		border-width: 0;
+		border-style: solid;
+		border-color: variables.$ms3-borderColor;
+	}
+
+	abbr:where([title]) {
+		text-decoration: underline dotted; // Add the correct text decoration in Chrome, Edge, and Safari.
+	}
+
+	// Remove the default font size and weight for headings.
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-size: inherit;
+		font-weight: inherit;
+	}
+
+	// Reset links to optimize for opt-in styling instead of opt-out
+	a {
+		color: inherit;
+		text-decoration: inherit;
+	}
+
+	// Add the correct font weight in Edge and Safari
+	b,
+	strong {
+		font-weight: bolder;
+	}
+
+	small {
+		font-size: variables.$ms3-fontSizeSmaller;
+	}
+
+	// Prevent `sub` and `sup` elements from affecting the line height in all browsers
+	sub,
+	sup {
+		font-size: 75%;
+		line-height: 0;
+		position: relative;
+		vertical-align: baseline;
+	}
+
+	sub {
+		bottom: -0.25em;
+	}
+
+	sup {
+		top: -0.5em;
+	}
+
+	table {
+		text-indent: 0; // Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+		border-color: inherit; // Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+		border-collapse: collapse; // Remove gaps between table borders by default.
+	}
+
+	button,
+	input,
+	optgroup,
+	select,
+	textarea {
+		font-family: inherit;
+		font-size: 100%;
+		line-height: inherit;
+		color: inherit;
+		margin: 0;
+		padding: 0;
+	}
+
+	button,
+	select {
+		text-transform: none;
+	}
+
+	button,
+	[type="button"],
+	[type="reset"],
+	[type="submit"] {
+		-webkit-appearance: button;
+		background-color: transparent;
+		background-image: none;
+	}
+
+	:-moz-focusring {
+		outline: auto;
+	}
+
+	:-moz-ui-invalid {
+		box-shadow: none;
+	}
+
+	progress {
+		vertical-align: baseline;
+	}
+
+	::-webkit-inner-spin-button,
+	::-webkit-outer-spin-button {
+		height: auto;
+	}
+
+	[type="search"] {
+		-webkit-appearance: textfield;
+		outline-offset: -2px;
+	}
+
+	::-webkit-search-decoration {
+		-webkit-appearance: none;
+	}
+
+	::-webkit-file-upload-button {
+		-webkit-appearance: button;
+		font: inherit;
+	}
+
+	summary {
+		display: list-item;
+	}
+
+	blockquote,
+	dl,
+	dd,
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	hr,
+	figure,
+	p,
+	pre {
+		margin: 0;
+	}
+
+	fieldset {
+		margin: 0;
+		padding: 0;
+	}
+
+	legend {
+		padding: 0;
+	}
+
+	ol,
+	ul,
+	menu {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	textarea {
+		resize: vertical;
+	}
+
+	input::placeholder,
+	textarea::placeholder {
+		opacity: 1;
+		color: variables.$ms3-secondaryColor;
+	}
+
+	button,
+	[role="button"] {
+		cursor: pointer;
+	}
+
+	:disabled {
+		cursor: default;
+	}
+
+	img,
+	svg,
+	video,
+	canvas,
+	audio,
+	iframe,
+	embed,
+	object {
+		display: block;
+		vertical-align: middle;
+	}
+
+	img,
+	video {
+		max-width: 100%;
+		height: auto;
+	}
+
+	[hidden] {
+		display: none;
+	}
+}

package/src/scss/_variables.scss

@@ -0,0 +1,94 @@
+@use "sass:math";
+
+// paths
+$ms3-iconPath: "../Images/" !default;
+
+// colors
+$ms3-primaryColor: #222 !default; // default color
+$ms3-invertedPrimaryColor: white !default;
+$ms3-secondaryColor: #636567 !default;
+$ms3-tertiaryColor: #545454;
+
+$ms3-themeColorA: #0e78ad !default;
+$ms3-themeColorB: #cc0000 !default;
+
+// typography
+$ms3-rem-px-ratio: 10 !default;
+$ms3-fontSizeBase: math.div(14, $ms3-rem-px-ratio) * 1rem !default;
+$ms3-fontSizeSmaller: math.div(13, $ms3-rem-px-ratio) * 1rem !default;
+$ms3-fontSizeSmallest: math.div(12, $ms3-rem-px-ratio) * 1rem !default;
+$ms3-fontSizeHeadline: math.div(16, $ms3-rem-px-ratio) * 1rem !default;
+$ms3-fontSizeInput: math.div(16, $ms3-rem-px-ratio) * 1rem !default; // >= 16px to prevent auto zoom in iOS @see https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
+
+// background colors
+$ms3-backgroundColor: white !default;
+$ms3-backgroundColorOffset: #f2f2f2 !default;
+$ms3-backgroundColorOffset2: #dadada !default;
+$ms3-pageBackgroundColor: white !default;
+$ms3-backgroundHighlightColor: #f2f2f2 !default;
+$ms3-foregroundColor: black !default;
+
+// options
+$ms3-option-mapOverlayButtonsShowLabel: true !default;
+$ms3-option-listInfoShowInFullscreen: true !default;
+$ms3-option-featureSelectionInfoOverflowScrollContent: true !default;
+
+$ms3-option-showFeatureCountsInTagSwitcherGroups: never !default; // available options: never, always, moreThanOne
+$ms3-option-showFeatureCountsInTagSwitcherEntries: never !default; // available options: never, always, moreThanOne
+
+// transitions/animations
+$ms3-easing-default: ease-in-out;
+$ms3-transition-fast: 200ms;
+
+// other colors
+$ms3-tableLineColor: #ccc !default;
+$ms3-borderColor: #ccc !default;
+$ms3-dotsShadowColor: rgba(0, 0, 0, 0.5) !default;
+
+// component specific colors
+$ms3-tooltipBackgroundColor: white !default;
+$ms3-tooltipBorderColor: #333 !default;
+$ms3-attributionsBackgroundColor: rgba(255, 255, 255, 0.5) !default;
+$ms3-backgroundColorAppOverlay: rgba(9, 15, 21, 0.75) !default;
+$ms3-mapBackgroundColor: #efece5 !default;
+
+// special sizes
+$ms3-listIconWidth: 20px !default;
+$ms3-searchHeight: 33px !default;
+$ms3-searchResultMaxHeight: 300px !default;
+$ms3-borderRadius: 3px !default;
+$ms3-fullscreen-top: 0px !default; // NOTE: 0px instead of just 0 so we can use the value in calc()
+$ms3-mapOverlayPadding: 10px !default;
+$ms3-mapMaxHeightDefault: 33vh !default;
+$ms3-mapMinHeightDesktop: 500px !default;
+$ms3-mobileFeatureSelectInfoHeight: 240px !default;
+$ms3-verticalPanelPadding: 0px !default;
+$ms3-verticalPanelBorderRadius: 0 !default;
+$ms3-verticalPanelWidth: 330px !default;
+$ms3-verticalPanelContentWidth: $ms3-verticalPanelWidth -
+	(2 * $ms3-verticalPanelPadding) !default;
+$ms3-marginalGap: 2% !default;
+
+// hint.css tooltips
+$ms3-hintPrefix: "ms3-hint--" !default;
+$ms3-hintFontFamily: PTSansRegular, Helvetica, Arial, sans-serif !default;
+$ms3-hintDefaultColor: #165a7e !default;
+
+// z indexes
+$ms3-zIndexListToggleButton: 1000 !default;
+$ms3-zIndexAppOverlay: 500 !default;
+$ms3-zIndexViewportButton: 300 !default;
+$ms3-zIndexListHeader: 200 !default;
+
+$ms3-zIndexWrapper: 0 !default;
+$ms3-fullscreen-zIndexWrapper: 2 !default;
+
+// breakpoints NOTE: Keep in sync with mapsight ui create options in javascript!
+//  - Mobile
+//  - Desktop
+$ms3-step1: 768px !default;
+
+// calculated variables (no !default)
+$ms3-uiIconPath: $ms3-iconPath + "mapsight-ui/"; // kein default, soll nicht direkt geändert werden
+$ms3-breakpoint-mobile: 0 ($ms3-step1 - 1px);
+$ms3-breakpoint-desktop: $ms3-step1;

package/src/scss/blocks/_additional-container.scss

@@ -0,0 +1,25 @@
+@use "../variables";
+
+/*
+	Also see _marginal.scss!
+	Structure:
+		<div class="ms3-additional-container">
+			<div class="ms3-marginal ms3-marginal--left"> … </div>
+			<div class="ms3-additional-container__content"> … </div>
+			<div class="ms3-marginal ms3-marginal--right"> … </div>
+		</div>
+ */
+
+.ms3-additional-container {
+	display: flex;
+	flex-direction: row;
+
+	&__content {
+		flex-grow: 1;
+	}
+
+	.ms3-wrapper--mapOnly &,
+	.ms3-wrapper--fullscreen & {
+		display: none;
+	}
+}