@mapka/maplibre-gl-sdk 0.9.0 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,81 +0,0 @@
1
- /** biome-ignore-all lint/correctness/noUnusedImports: <explanation> */
2
- import { h, Fragment } from "preact";
3
- import { useState } from "preact/hooks";
4
- function HeartIcon({ filled }) {
5
- return (h("svg", { viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", class: "mapka-tooltip-icon" },
6
- h("path", { d: "M16 28c7-4.73 14-10 14-17a6.98 6.98 0 0 0-7-7c-1.8 0-3.58.68-4.95 2.05L16 8.1l-2.05-2.05a6.98 6.98 0 0 0-9.9 0A6.98 6.98 0 0 0 2 11c0 7 7 12.27 14 17z", fill: filled ? "currentColor" : "none", stroke: "currentColor", "stroke-width": "2" })));
7
- }
8
- function CloseIcon() {
9
- return (h("svg", { viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", class: "mapka-tooltip-icon" },
10
- h("path", { d: "m6 6 20 20M26 6 6 26", fill: "none", stroke: "currentColor", "stroke-width": "3" })));
11
- }
12
- function ChevronLeftIcon() {
13
- return (h("svg", { viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", class: "mapka-tooltip-icon mapka-tooltip-icon-sm" },
14
- h("path", { d: "M20 28 8.7 16.7a1 1 0 0 1 0-1.4L20 4", fill: "none", stroke: "currentColor", "stroke-width": "4" })));
15
- }
16
- function ChevronRightIcon() {
17
- return (h("svg", { viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", class: "mapka-tooltip-icon mapka-tooltip-icon-sm" },
18
- h("path", { d: "m12 4 11.3 11.3a1 1 0 0 1 0 1.4L12 28", fill: "none", stroke: "currentColor", "stroke-width": "4" })));
19
- }
20
- function StarIcon() {
21
- return (h("svg", { viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", class: "mapka-tooltip-icon mapka-tooltip-icon-star" },
22
- h("path", { d: "M15.094 1.579l-4.124 8.885-9.86 1.27a1 1 0 0 0-.542 1.736l7.293 6.565-1.965 9.852a1 1 0 0 0 1.483 1.061L16 25.951l8.625 4.997a1 1 0 0 0 1.482-1.06l-1.965-9.853 7.293-6.565a1 1 0 0 0-.541-1.735l-9.86-1.271-4.127-8.885a1 1 0 0 0-1.814 0z", fill: "currentColor" })));
23
- }
24
- function ImageCarousel({ imageUrls, title, onFavorite, id, onClose, }) {
25
- const [currentIndex, setCurrentIndex] = useState(0);
26
- const handlePrev = (e) => {
27
- e.stopPropagation();
28
- setCurrentIndex((prev) => (prev === 0 ? imageUrls.length - 1 : prev - 1));
29
- };
30
- const handleNext = (e) => {
31
- e.stopPropagation();
32
- setCurrentIndex((prev) => (prev + 1) % imageUrls.length);
33
- };
34
- const handleFavoriteClick = (e) => {
35
- e.stopPropagation();
36
- if (onFavorite && id) {
37
- onFavorite(id);
38
- }
39
- };
40
- const handleCloseClick = (e) => {
41
- e.stopPropagation();
42
- onClose?.();
43
- };
44
- return (h("div", { class: "mapka-tooltip-carousel" },
45
- h("div", { class: "mapka-tooltip-carousel-track", style: { transform: `translateX(-${currentIndex * 100}%)` } }, imageUrls.map((url, index) => (h("img", { key: index, src: url, alt: title || `Image ${index + 1}`, class: "mapka-tooltip-carousel-image" })))),
46
- h("div", { class: "mapka-tooltip-carousel-actions" },
47
- onFavorite && (h("button", { type: "button", class: "mapka-tooltip-action-btn", onClick: handleFavoriteClick, "aria-label": "Add to favorites" },
48
- h(HeartIcon, null))),
49
- h("button", { type: "button", class: "mapka-tooltip-action-btn", onClick: handleCloseClick, "aria-label": "Close" },
50
- h(CloseIcon, null))),
51
- imageUrls.length > 1 && (h(Fragment, null,
52
- h("button", { type: "button", class: "mapka-tooltip-carousel-btn mapka-tooltip-carousel-prev", onClick: handlePrev, "aria-label": "Previous image" },
53
- h(ChevronLeftIcon, null)),
54
- h("button", { type: "button", class: "mapka-tooltip-carousel-btn mapka-tooltip-carousel-next", onClick: handleNext, "aria-label": "Next image" },
55
- h(ChevronRightIcon, null)),
56
- h("div", { class: "mapka-tooltip-dots" }, imageUrls.map((_, index) => (h("button", { key: index, type: "button", class: `mapka-tooltip-dot ${index === currentIndex ? "mapka-tooltip-dot-active" : ""}`, onClick: (e) => {
57
- e.stopPropagation();
58
- setCurrentIndex(index);
59
- }, "aria-label": `Go to image ${index + 1}` }))))))));
60
- }
61
- export function Tooltip({ id, title, rating, description, subtitle, price, imageUrls, onFavorite, onClose, }) {
62
- const hasImages = imageUrls && imageUrls.length > 0;
63
- return (h("div", { class: "mapka-tooltip" },
64
- hasImages && (h(ImageCarousel, { imageUrls: imageUrls, title: title, onFavorite: onFavorite, id: id, onClose: onClose })),
65
- h("div", { class: "mapka-tooltip-content" },
66
- (title || rating) && (h("div", { class: "mapka-tooltip-header" },
67
- title && h("h3", { class: "mapka-tooltip-title" }, title),
68
- rating && (h("div", { class: "mapka-tooltip-rating" },
69
- h(StarIcon, null),
70
- h("span", { class: "mapka-tooltip-rating-value" }, rating.value.toFixed(2).replace(".", ",")),
71
- h("span", { class: "mapka-tooltip-rating-count" },
72
- "(",
73
- rating.count,
74
- ")"))))),
75
- description && h("p", { class: "mapka-tooltip-description" }, description),
76
- subtitle && h("p", { class: "mapka-tooltip-subtitle" }, subtitle),
77
- price && (h("div", { class: "mapka-tooltip-price" },
78
- price.original && h("span", { class: "mapka-tooltip-price-original" }, price.original),
79
- h("span", { class: "mapka-tooltip-price-current" }, price.current),
80
- price.suffix && h("span", { class: "mapka-tooltip-price-suffix" }, price.suffix))))));
81
- }
@@ -1,15 +0,0 @@
1
- import { Popup } from "maplibre-gl";
2
- import type { MapkaTooltipOptions } from "../types/marker.js";
3
- /**
4
- * Shows a tooltip for a marker
5
- */
6
- export declare function showTooltip(marker: maplibregl.Marker, options: MapkaTooltipOptions, map: maplibregl.Map): void;
7
- /**
8
- * Hides the current tooltip
9
- */
10
- export declare function hideTooltip(): void;
11
- /**
12
- * Gets the current visible popup
13
- */
14
- export declare function getCurrentTooltip(): Popup | null;
15
- //# sourceMappingURL=tooltip.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/modules/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGpC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAI9D;;GAEG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,UAAU,CAAC,MAAM,EACzB,OAAO,EAAE,mBAAmB,EAC5B,GAAG,EAAE,UAAU,CAAC,GAAG,QAmBpB;AAED;;GAEG;AACH,wBAAgB,WAAW,SAK1B;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,KAAK,GAAG,IAAI,CAEhD"}
@@ -1,39 +0,0 @@
1
- // biome-ignore lint/correctness/noUnusedImports: <explanation>
2
- import { h } from "preact";
3
- import { Popup } from "maplibre-gl";
4
- import { render } from "preact";
5
- import { Tooltip } from "../components/Tooltip.js";
6
- let currentPopup = null;
7
- /**
8
- * Shows a tooltip for a marker
9
- */
10
- export function showTooltip(marker, options, map) {
11
- hideTooltip();
12
- const container = document.createElement("div");
13
- render(h(Tooltip, { ...options, onClose: hideTooltip }), container);
14
- const popup = new Popup({
15
- closeButton: false,
16
- closeOnClick: false,
17
- maxWidth: "320px",
18
- offset: 12,
19
- })
20
- .setLngLat(marker.getLngLat())
21
- .setDOMContent(container)
22
- .addTo(map);
23
- currentPopup = popup;
24
- }
25
- /**
26
- * Hides the current tooltip
27
- */
28
- export function hideTooltip() {
29
- if (currentPopup) {
30
- currentPopup.remove();
31
- currentPopup = null;
32
- }
33
- }
34
- /**
35
- * Gets the current visible popup
36
- */
37
- export function getCurrentTooltip() {
38
- return currentPopup;
39
- }
@@ -1,52 +0,0 @@
1
- // biome-ignore lint/correctness/noUnusedImports: <explanation>
2
- import { h } from "preact";
3
- import { Popup } from "maplibre-gl";
4
- import { render } from "preact";
5
- import { Tooltip } from "../components/Tooltip.js";
6
- import type { MapkaTooltipOptions } from "../types/marker.js";
7
-
8
- let currentPopup: maplibregl.Popup | null = null;
9
-
10
- /**
11
- * Shows a tooltip for a marker
12
- */
13
- export function showTooltip(
14
- marker: maplibregl.Marker,
15
- options: MapkaTooltipOptions,
16
- map: maplibregl.Map,
17
- ) {
18
- hideTooltip();
19
-
20
- const container = document.createElement("div");
21
-
22
- render(<Tooltip {...options} onClose={hideTooltip} />, container);
23
-
24
- const popup = new Popup({
25
- closeButton: false,
26
- closeOnClick: false,
27
- maxWidth: "320px",
28
- offset: 12,
29
- })
30
- .setLngLat(marker.getLngLat())
31
- .setDOMContent(container)
32
- .addTo(map);
33
-
34
- currentPopup = popup;
35
- }
36
-
37
- /**
38
- * Hides the current tooltip
39
- */
40
- export function hideTooltip() {
41
- if (currentPopup) {
42
- currentPopup.remove();
43
- currentPopup = null;
44
- }
45
- }
46
-
47
- /**
48
- * Gets the current visible popup
49
- */
50
- export function getCurrentTooltip(): Popup | null {
51
- return currentPopup;
52
- }