@swr-data-lab/components 1.12.5 → 1.13.1

package/src/maplibre/WithLinkLocation/WithLinkLocation.svelte

@@ -1,83 +0,0 @@
-<script lang="ts">
-	import { onMount, setContext, type Snippet } from 'svelte';
-	import { MaptilerGeocoderAPI } from '../GeocoderControl/GeocoderAPIs';
-	import {
-		type GeocodingCountry,
-		type GeocodingLanguage,
-		type GeocodingService,
-		type Location
-	} from '../types';
-
-	import type {
-		MaplibreGeocoderApi,
-		MaplibreGeocoderApiConfig
-	} from '@maplibre/maplibre-gl-geocoder';
-
-	interface WithLinkLocationProps {
-		service?: GeocodingService;
-		/**
-		 * API key for selected geocoding `service`
-		 */
-		key: string;
-		/**
-		 * Limit search to one or more countries
-		 */
-		countries?: GeocodingLanguage | GeocodingCountry[];
-		languages?: GeocodingLanguage | GeocodingLanguage[];
-		urlParameter?: string;
-		children: Snippet;
-	}
-
-	const {
-		key,
-		service = 'maptiler',
-		countries = 'de',
-		languages = 'de',
-		urlParameter = 'location',
-		children
-	}: WithLinkLocationProps = $props();
-
-	const countriesArr = Array.isArray(countries) ? countries : [countries];
-	const languagesArr = Array.isArray(languages) ? languages : [languages];
-
-	let geocoder: MaplibreGeocoderApi;
-	if (service === 'maptiler') {
-		geocoder = new MaptilerGeocoderAPI(key);
-	}
-
-	let location: Location | boolean | undefined = $state();
-
-	function bboxToArea(bbox: [number, number, number, number]) {
-		return (bbox[2] - bbox[0]) * (bbox[3] - bbox[1]);
-	}
-
-	onMount(async () => {
-		const params = new URLSearchParams(window.location.search);
-		if (params.has(urlParameter)) {
-			const config: MaplibreGeocoderApiConfig = {
-				countries: countriesArr.join(','),
-				language: languagesArr.join(','),
-				query: params.get(urlParameter)?.toString(),
-				limit: 1
-			};
-			const res = await geocoder.forwardGeocode(config);
-			if (res.features[0].bbox && res.features[0].geometry.type === 'Point') {
-				location = {
-					lat: res.features[0].geometry.coordinates[1],
-					lng: res.features[0].geometry.coordinates[0],
-					zoom: 11 - bboxToArea(res.features[0].bbox) * 5.5
-				};
-			}
-		} else {
-			location = false;
-		}
-	});
-
-	$effect.pre(() => {
-		setContext('initialLocation', location);
-	});
-</script>
-
-{#if location !== undefined}
-	{@render children?.()}
-{/if}

package/src/maplibre/context.svelte.ts

@@ -1,89 +0,0 @@
-import type { Map as MapLibre, Marker, LayerSpecification } from 'maplibre-gl';
-import { getContext, setContext } from 'svelte';
-
-const MAP_CONTEXT_KEY = Symbol.for('map-context');
-const SOURCE_CONTEXT_KEY = Symbol.for('source-context');
-const LAYER_CONTEXT_KEY = Symbol.for('layer-context');
-const POPUP_TARGET_KEY = Symbol.for('popup-target');
-
-export class Box<T> {
-	value = $state() as T;
-
-	constructor(initialValue: T) {
-		this.value = initialValue;
-	}
-}
-
-export class MapContext {
-	_map = $state(null) as MapLibre | null;
-	minzoom = $state(0);
-	maxzoom = $state(24);
-	styleLoaded = $state(false);
-	private _listener?: maplibregl.Listener = undefined;
-
-	get map() {
-		return this._map;
-	}
-
-	set map(value: maplibregl.Map | null) {
-		// Unbind any old event listeners
-		if (this._listener) {
-			this._map?.off('styledata', this._listener);
-			this._listener = undefined;
-		}
-		// Set new map instance and bind new event listeners
-		this._map = value;
-		if (this._map) {
-			this._listener = this._onstyledata.bind(this);
-			this._map.on('styledata', this._listener);
-		}
-	}
-
-	private _onstyledata(e: maplibregl.MapStyleDataEvent) {
-		this.styleLoaded = true;
-	}
-}
-
-export class SourceContext {
-	_source = $state();
-	loaded = $state(false);
-	minzoom = $state(0);
-	maxzoom = $state(24);
-
-	get source() {
-		return this._source;
-	}
-}
-export class LayerContext {
-	layer = $state() as LayerSpecification;
-}
-
-export function setPopupTarget(value: Box<Marker | string | undefined>) {
-	setContext(POPUP_TARGET_KEY, value);
-}
-
-export function getPopupTarget(): Box<Marker | string> | undefined {
-	return getContext(POPUP_TARGET_KEY);
-}
-
-export function createMapContext(): MapContext {
-	return setContext(MAP_CONTEXT_KEY, new MapContext());
-}
-export function getMapContext(): MapContext {
-	return getContext(MAP_CONTEXT_KEY);
-}
-
-export function createSourceContext(): SourceContext {
-	return setContext(SOURCE_CONTEXT_KEY, new SourceContext());
-}
-export function getSourceContext(): SourceContext {
-	return getContext(SOURCE_CONTEXT_KEY);
-}
-
-export function getLayerContext(): LayerContext {
-	return getContext(LAYER_CONTEXT_KEY);
-}
-
-export function setLayerContext(value: string) {
-	setContext(LAYER_CONTEXT_KEY, value);
-}

package/src/maplibre/utils.ts

@@ -1,52 +0,0 @@
-// Source: https://github.com/MIERUNE/svelte-maplibre-gl/blob/main/src/lib/maplibre/utils.ts
-
-import type { Evented, Listener, Map, MapLayerEventType, Popup } from 'maplibre-gl';
-
-export function resetEventListener(
-	evented: Evented | null | undefined,
-	type: string,
-	listener: Listener | undefined
-) {
-	if (listener) {
-		evented?.on(type, listener);
-	}
-	const prevListener = listener;
-	return () => {
-		if (prevListener) {
-			evented?.off(type, prevListener);
-		}
-	};
-}
-
-export function resetLayerEventListener(
-	map: Map | null,
-	type: keyof MapLayerEventType,
-	layer: string,
-	listener: Listener | undefined
-) {
-	if (listener) {
-		map?.on(type, layer, listener);
-	}
-	const prevListener = listener;
-	return () => {
-		if (prevListener) {
-			map?.off(type, layer, prevListener);
-		}
-	};
-}
-
-export function resetPopupEventListener(
-	popup: Popup | null,
-	type: 'open' | 'close',
-	listener: Listener | undefined
-) {
-	if (listener) {
-		popup?.on(type, listener);
-	}
-	const prevListener = listener;
-	return () => {
-		if (prevListener) {
-			popup?.off(type, prevListener);
-		}
-	};
-}

package/src/utils/formatDate.js

@@ -1,17 +0,0 @@
-import { timeFormat } from "d3-time-format"
-
-const formats = {
-  dayMonthYear: "%-d.%-m.%Y",
-  dayMonth: "%-d.%-m.",
-  dayMonthYearShort: "%-d.%-m.%y",
-  dayMonthHourMinute: "%-d.%-m., %-H.%M Uhr",
-  dayMonthYearHourMinute: "%-d.%-m.%Y, %-H.%M Uhr",
-  hourMinuteSophora: "%-H:%M Uhr",
-  hourMinute: "%-H.%M",
-}
-
-const formatDate = ({ date, format = "dayMonthYear" }) => {
-  return timeFormat(formats[format] || format)(new Date(date))
-}
-
-export default formatDate

package/src/utils/getColorsBetween.js

@@ -1,25 +0,0 @@
-import Color from 'color';
-import { range } from 'd3-array';
-
-/**
- * Get color range of n colors
- * @param {*} from
- * @param {*} to
- * @param {*} props
- * @returns
- */
-const getColorsBetween = (from, to, props = { n: 1, includeFromTo: false }) => {
-  const step = 1 / (props.n + 1);
-  const fromColor = Color(from);
-  const toColor = Color(to);
-  const colorsBetween = range(1, props.n + 1)
-    .map((i) => fromColor.mix(toColor, i * step))
-    .map((c) => c.hex().toString());
-  if (props.includeFromTo) {
-    return [from, ...colorsBetween, to];
-  } else {
-    return colorsBetween;
-  }
-};
-
-export default getColorsBetween;

package/src/utils/getComparisonDiffs.js

@@ -1,9 +0,0 @@
-const getComparisonDiffs = (a, b) => {
-  return {
-    diff: a - b,
-    diffRel: (a / b - 1) * 100,
-    diffTag: a > b ? 'higher' : a === b ? 'equal' : 'smaller'
-  };
-};
-
-export default getComparisonDiffs;

package/src/utils/getEmbedContext.js

@@ -1,28 +0,0 @@
-/**
- * Get current url params or - if on production - params from embed url.
- * @param {object} embed root dom element
- * @returns {object} url params
- */
-
-const getEmbedContext = (target) => {
-  let url;
-  if (
-    import.meta.env.DEV ||
-    window.location.origin === 'https://d.swr.de' ||
-    window.location.origin === 'https://static.datenhub.net' ||
-    window.location.href.includes('apidata.googleusercontent.com') ||
-    window.location.href.includes('storage.googleapis.com')
-  ) {
-    url = window.location.href;
-  } else {
-    const parent = target.parentNode || target.parentNode.parentNode;
-    url = parent.dataset.url;
-  }
-  const data = {};
-  for (const [key, value] of new URL(url).searchParams) {
-    data[key] = value;
-  }
-  return data;
-};
-
-export default getEmbedContext;

package/src/utils/getLaenderFromTopo.js

@@ -1,35 +0,0 @@
-import { merge } from 'topojson-client';
-import { range } from 'd3-array';
-
-/**
- * Calc laender borders from kreis or gemeinden topojson
- * @param {object} topojson
- * @returns geojson
- */
-const getLaenderFromTopo = (topo) => {
-  const states = [];
-  const stateIds = range(1, 17).map((n) => String(n).padStart(2, '0'));
-  const key = Object.keys(topo.objects)[0];
-
-  stateIds.forEach((id) => {
-    const state = {
-      geometry: merge(
-        topo,
-        topo.objects[key].geometries.filter(
-          (g) => g.properties.id && g.properties.id.startsWith(id)
-        )
-      ),
-      id,
-      type: 'Feature',
-      properties: { id }
-    };
-    states.push(state);
-  });
-
-  return {
-    type: 'FeatureCollection',
-    features: states
-  };
-};
-
-export default getLaenderFromTopo;

package/src/utils/getLaenderNicenameFromAgs.js

@@ -1,27 +0,0 @@
-const map = {
-  "01": "Schleswig-Holstein",
-  "02": "Hamburg",
-  "03": "Niedersachsen",
-  "04": "Bremen",
-  "05": "Nordrhein-Westfalen",
-  "06": "Hessen",
-  "07": "Rheinland-Pfalz",
-  "08": "Baden-Württemberg",
-  "09": "Bayern",
-  10: "Saarland",
-  11: "Berlin",
-  12: "Brandenburg",
-  13: "Mecklenburg-Vorpommern",
-  14: "Sachsen",
-  15: "Sachsen-Anhalt",
-  16: "Thüringen",
-}
-
-/**
- * Get nicename for land ags
- * @param {string} ags
- * @returns {string} nicename
- */
-const getLaenderNicenameFromAgs = (ags) => map[ags]
-
-export default getLaenderNicenameFromAgs

package/src/utils/prepareSophoraModel.js

@@ -1,31 +0,0 @@
-const SELECTORS = {
-  showScrollUp: "a.back-to-top",
-  showPlayerbar: "#playerbar",
-  showSharing: ".sharing",
-  showAuthors: ".meta-top .meta-authors",
-  allowZoom: "meta[name=viewport]",
-}
-
-const IS_MOBILE = window.innerWidth < 768
-
-const prepareSophoraModel = (config) => {
-  console.log("###SWRDATA### updating dom with following config: ", config)
-  Object.entries(config).forEach(([k, v], _) => {
-    const element = document.querySelector(SELECTORS[k])
-    // show/hide elements
-    if (k.startsWith("show")) {
-      if ((v === "none" || (v === "mobile" && IS_MOBILE) || (v === "desktop" && !IS_MOBILE)) && element) {
-        element.style.display = "none"
-        element.style.visibility = "hidden"
-      }
-    }
-    // enable/disable zoom
-    if (k === "allowZoom") {
-      if (!v && element) {
-        element.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0")
-      }
-    }
-  })
-}
-
-export default prepareSophoraModel

package/src/utils/slugify.ts

@@ -1,12 +0,0 @@
-// Source: https://svelte.dev/playground/b130be5e485441a1842ae97e4ce4f244?version=5.20.0
-
-export default function slugify(str: string): string {
-  return str
-    .replace(/\s+/g, '-')
-    .replace(/-+/g, '-')
-    .trim()
-    .normalize('NFKD')
-    .replace(/[\u0300-\u036f]/g, '')
-    .toLowerCase()
-    .replace(/[^a-z0-9 -]/g, '')
-}

package/svelte.config.js

@@ -1,18 +0,0 @@
-import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
-	// for more information about preprocessors
-	preprocess: vitePreprocess(),
-
-	kit: {
-		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
-		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
-	}
-};
-
-export default config;

package/tsconfig.json

@@ -1,19 +0,0 @@
-{
-	"extends": "./.svelte-kit/tsconfig.json",
-	"compilerOptions": {
-		"allowJs": true,
-		"checkJs": true,
-		"esModuleInterop": true,
-		"forceConsistentCasingInFileNames": true,
-		"resolveJsonModule": true,
-		"skipLibCheck": true,
-		"sourceMap": true,
-		"strict": true,
-		"moduleResolution": "bundler"
-	}
-	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
-	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
-	//
-	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-	// from the referenced tsconfig.json - TypeScript does not merge them in
-}

package/vite.config.ts

@@ -1,6 +0,0 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-	plugins: [sveltekit()]
-});

package/vitest.workspace.ts

@@ -1,32 +0,0 @@
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-import { defineWorkspace } from 'vitest/config';
-
-import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
-
-const dirname =
-	typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
-
-// More info at: https://storybook.js.org/docs/writing-tests/test-addon
-export default defineWorkspace([
-	'vite.config.ts',
-	{
-		extends: 'vite.config.ts',
-		plugins: [
-			// The plugin will run tests for the stories defined in your Storybook config
-			// See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest
-			storybookTest({ configDir: path.join(dirname, '.storybook') })
-		],
-		test: {
-			name: 'storybook',
-			browser: {
-				enabled: true,
-				headless: true,
-				name: 'chromium',
-				provider: 'playwright'
-			},
-			setupFiles: ['.storybook/vitest.setup.ts']
-		}
-	}
-]);