@rsltda/components 1.0.12 → 1.0.14
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.
- package/README.md +6 -0
- package/dist/PuntosMapas_gasgas_0-CjccjpQ8.js +300 -0
- package/dist/PuntosMapas_gasgas_0-CjccjpQ8.js.map +1 -0
- package/dist/PuntosMapas_gasgas_1-inakGBZ_.js +321 -0
- package/dist/PuntosMapas_gasgas_1-inakGBZ_.js.map +1 -0
- package/dist/PuntosMapas_hqv_0-OSIxCcrz.js +300 -0
- package/dist/PuntosMapas_hqv_0-OSIxCcrz.js.map +1 -0
- package/dist/PuntosMapas_hqv_1-Cr9cIOs3.js +5 -0
- package/dist/PuntosMapas_hqv_1-Cr9cIOs3.js.map +1 -0
- package/dist/PuntosMapas_ktm_0-ChWkcgec.js +330 -0
- package/dist/PuntosMapas_ktm_0-ChWkcgec.js.map +1 -0
- package/dist/PuntosMapas_ktm_1-DCq6GRnp.js +5 -0
- package/dist/PuntosMapas_ktm_1-DCq6GRnp.js.map +1 -0
- package/dist/PuntosMapas_voge_0-DL0EWJWf.js +198 -0
- package/dist/PuntosMapas_voge_0-DL0EWJWf.js.map +1 -0
- package/dist/PuntosMapas_voge_1-Clawdtrj.js +5 -0
- package/dist/PuntosMapas_voge_1-Clawdtrj.js.map +1 -0
- package/dist/components/rs-map.d.ts +3 -0
- package/dist/rs-components.es.js +360 -335
- package/dist/rs-components.es.js.map +1 -1
- package/dist/rs-components.iife.js +4 -4
- package/dist/rs-components.iife.js.map +1 -1
- package/package.json +2 -2
package/dist/rs-components.es.js
CHANGED
|
@@ -1,15 +1,24 @@
|
|
|
1
1
|
var D = Object.defineProperty;
|
|
2
|
-
var q = (
|
|
3
|
-
var
|
|
4
|
-
function U(
|
|
5
|
-
customElements.get(
|
|
2
|
+
var q = (p, _, t) => _ in p ? D(p, _, { enumerable: !0, configurable: !0, writable: !0, value: t }) : p[_] = t;
|
|
3
|
+
var r = (p, _, t) => q(p, typeof _ != "symbol" ? _ + "" : _, t);
|
|
4
|
+
function U(p, _) {
|
|
5
|
+
customElements.get(p) || customElements.define(p, _);
|
|
6
6
|
}
|
|
7
|
-
const
|
|
7
|
+
const O = /* @__PURE__ */ Object.assign({
|
|
8
|
+
"../json/PuntosMapas_gasgas_0.json": () => import("./PuntosMapas_gasgas_0-CjccjpQ8.js").then((p) => p.default),
|
|
9
|
+
"../json/PuntosMapas_gasgas_1.json": () => import("./PuntosMapas_gasgas_1-inakGBZ_.js").then((p) => p.default),
|
|
10
|
+
"../json/PuntosMapas_hqv_0.json": () => import("./PuntosMapas_hqv_0-OSIxCcrz.js").then((p) => p.default),
|
|
11
|
+
"../json/PuntosMapas_hqv_1.json": () => import("./PuntosMapas_hqv_1-Cr9cIOs3.js").then((p) => p.default),
|
|
12
|
+
"../json/PuntosMapas_ktm_0.json": () => import("./PuntosMapas_ktm_0-ChWkcgec.js").then((p) => p.default),
|
|
13
|
+
"../json/PuntosMapas_ktm_1.json": () => import("./PuntosMapas_ktm_1-DCq6GRnp.js").then((p) => p.default),
|
|
14
|
+
"../json/PuntosMapas_voge_0.json": () => import("./PuntosMapas_voge_0-DL0EWJWf.js").then((p) => p.default),
|
|
15
|
+
"../json/PuntosMapas_voge_1.json": () => import("./PuntosMapas_voge_1-Clawdtrj.js").then((p) => p.default)
|
|
16
|
+
}), I = "#1e88e5", S = "/assets/fontawesome/css/all.min.css", F = "https://cdn.rsltda.cl/logos/marker/", B = "https://ap2.rs-shop.cl/web/PuntosMapas", R = {
|
|
8
17
|
ktm: "#ff6600"
|
|
9
|
-
},
|
|
18
|
+
}, z = {
|
|
10
19
|
sucursal: 0,
|
|
11
20
|
distribuidor: 1
|
|
12
|
-
},
|
|
21
|
+
}, j = ["norte", "rm", "centro", "sur"], $ = {
|
|
13
22
|
norte: "Zona Norte",
|
|
14
23
|
rm: "RM",
|
|
15
24
|
centro: "Zona Centro",
|
|
@@ -17,7 +26,7 @@ const I = "#1e88e5", L = "/assets/fontawesome/css/all.min.css", F = "https://cdn
|
|
|
17
26
|
}, N = {
|
|
18
27
|
0: "Sucursales",
|
|
19
28
|
1: "Distribuidores"
|
|
20
|
-
}, T = 720 * 60 * 60 * 1e3, G = "rs-map-cache",
|
|
29
|
+
}, T = 720 * 60 * 60 * 1e3, G = "rs-map-cache", E = "points", Z = {
|
|
21
30
|
"region de arica y parinacota": "norte",
|
|
22
31
|
"arica y parinacota": "norte",
|
|
23
32
|
"region de tarapaca": "norte",
|
|
@@ -55,55 +64,56 @@ const I = "#1e88e5", L = "/assets/fontawesome/css/all.min.css", F = "https://cdn
|
|
|
55
64
|
aysen: "sur",
|
|
56
65
|
"region de magallanes y la antartica chilena": "sur",
|
|
57
66
|
magallanes: "sur"
|
|
58
|
-
},
|
|
67
|
+
}, u = class u extends HTMLElement {
|
|
59
68
|
constructor() {
|
|
60
69
|
super();
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
70
|
+
r(this, "root");
|
|
71
|
+
r(this, "mapEl");
|
|
72
|
+
r(this, "map");
|
|
73
|
+
r(this, "markers", []);
|
|
74
|
+
r(this, "marca", "");
|
|
75
|
+
r(this, "marcaKey", "default");
|
|
76
|
+
r(this, "tipo", "");
|
|
77
|
+
r(this, "tipoCode", null);
|
|
78
|
+
r(this, "pointsController");
|
|
79
|
+
r(this, "points", []);
|
|
80
|
+
r(this, "pointsByZone", {
|
|
72
81
|
norte: [],
|
|
73
82
|
rm: [],
|
|
74
83
|
centro: [],
|
|
75
84
|
sur: []
|
|
76
85
|
});
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
86
|
+
r(this, "initialViewApplied", !1);
|
|
87
|
+
r(this, "zonesContainer");
|
|
88
|
+
r(this, "componentMessageEl");
|
|
89
|
+
r(this, "mapLayoutEl");
|
|
90
|
+
r(this, "zoneButtons", []);
|
|
91
|
+
r(this, "nearestButton");
|
|
92
|
+
r(this, "panelTitleEl");
|
|
93
|
+
r(this, "activeZone", "all");
|
|
94
|
+
r(this, "mapHeight", "");
|
|
95
|
+
r(this, "googleMapsApiKey", "");
|
|
96
|
+
r(this, "pointsApiUrl", B);
|
|
97
|
+
r(this, "markerIconBaseUrl", F);
|
|
98
|
+
r(this, "defaultMarkerIconUrl", "");
|
|
99
|
+
r(this, "pointsCacheTtlMs", T);
|
|
100
|
+
r(this, "panAnimationFrame", null);
|
|
101
|
+
r(this, "highlightTimeout", null);
|
|
102
|
+
r(this, "isSyncingInitialAttributes", !1);
|
|
103
|
+
r(this, "refreshQueued", !1);
|
|
104
|
+
r(this, "localPointsRequests", /* @__PURE__ */ new Map());
|
|
105
|
+
r(this, "handleZoneButtonClick", (t) => {
|
|
106
|
+
const n = t.currentTarget.dataset.zone;
|
|
97
107
|
n && (this.setActiveZone(n), this.scrollToZoneSection(n));
|
|
98
108
|
});
|
|
99
|
-
|
|
109
|
+
r(this, "handleNearestClick", () => {
|
|
100
110
|
if (!navigator.geolocation) {
|
|
101
111
|
alert("La geolocalizacion no esta soportada en este navegador.");
|
|
102
112
|
return;
|
|
103
113
|
}
|
|
104
114
|
navigator.geolocation.getCurrentPosition(
|
|
105
|
-
(
|
|
106
|
-
const { latitude:
|
|
115
|
+
(t) => {
|
|
116
|
+
const { latitude: e, longitude: n } = t.coords, a = this.findNearestPoint(e, n);
|
|
107
117
|
a ? (this.centerMapOnPoint(Number(a.lat), Number(a.lng)), this.scrollToPointCard(a.id)) : alert("No hay puntos disponibles para calcular la tienda cercana.");
|
|
108
118
|
},
|
|
109
119
|
() => {
|
|
@@ -111,8 +121,8 @@ const I = "#1e88e5", L = "/assets/fontawesome/css/all.min.css", F = "https://cdn
|
|
|
111
121
|
}
|
|
112
122
|
);
|
|
113
123
|
});
|
|
114
|
-
|
|
115
|
-
<link rel="stylesheet" href="${
|
|
124
|
+
u.ensureFontAwesome(), this.root = this.attachShadow({ mode: "open" }), this.root.innerHTML = `
|
|
125
|
+
<link rel="stylesheet" href="${S}" />
|
|
116
126
|
<style>
|
|
117
127
|
:host {
|
|
118
128
|
display: block;
|
|
@@ -535,116 +545,116 @@ const I = "#1e88e5", L = "/assets/fontawesome/css/all.min.css", F = "https://cdn
|
|
|
535
545
|
];
|
|
536
546
|
}
|
|
537
547
|
connectedCallback() {
|
|
538
|
-
this.mapEl = this.root.querySelector("#map"), this.panelTitleEl = this.root.querySelector("[data-panel-title]"), this.zonesContainer = this.root.querySelector("[data-zone-container]"), this.componentMessageEl = this.root.querySelector("[data-component-message]"), this.mapLayoutEl = this.root.querySelector("[data-map-layout]"), this.zoneButtons = Array.from(this.root.querySelectorAll("[data-zone]")), this.nearestButton = this.root.querySelector('[data-action="nearest"]'), this.zoneButtons.forEach((
|
|
548
|
+
this.mapEl = this.root.querySelector("#map"), this.panelTitleEl = this.root.querySelector("[data-panel-title]"), this.zonesContainer = this.root.querySelector("[data-zone-container]"), this.componentMessageEl = this.root.querySelector("[data-component-message]"), this.mapLayoutEl = this.root.querySelector("[data-map-layout]"), this.zoneButtons = Array.from(this.root.querySelectorAll("[data-zone]")), this.nearestButton = this.root.querySelector('[data-action="nearest"]'), this.zoneButtons.forEach((t) => t.addEventListener("click", this.handleZoneButtonClick)), this.nearestButton && this.nearestButton.addEventListener("click", this.handleNearestClick), this.updateZoneButtons(), this.setMapHeight(this.getAttribute("height")), this.setComponentState("loading"), this.syncAttributesToState();
|
|
539
549
|
}
|
|
540
550
|
disconnectedCallback() {
|
|
541
|
-
var
|
|
542
|
-
(
|
|
551
|
+
var t;
|
|
552
|
+
(t = this.pointsController) == null || t.abort(), this.zoneButtons.forEach((e) => e.removeEventListener("click", this.handleZoneButtonClick)), this.nearestButton && this.nearestButton.removeEventListener("click", this.handleNearestClick);
|
|
543
553
|
}
|
|
544
|
-
attributeChangedCallback(
|
|
545
|
-
|
|
554
|
+
attributeChangedCallback(t, e, n) {
|
|
555
|
+
t === "marca" ? this.setMarca(n != null ? n : "") : t === "tipo" ? this.setTipo(n != null ? n : "") : t === "height" ? this.setMapHeight(n) : t === "google-maps-key" ? this.setGoogleMapsKey(n) : t === "points-api-url" ? this.setPointsApiUrl(n) : t === "cache-days" ? this.setCacheDays(n) : t === "marker-icon-base" ? this.setMarkerIconBase(n) : t === "marker-icon-default" && this.setDefaultMarkerIcon(n);
|
|
546
556
|
}
|
|
547
557
|
loadGoogleMaps() {
|
|
548
558
|
return window._rsGoogleMapsLoaded ? Promise.resolve().then(() => {
|
|
549
559
|
this.initMap();
|
|
550
|
-
}) : this.googleMapsApiKey ? (
|
|
560
|
+
}) : this.googleMapsApiKey ? (u.googleMapsLoaderPromise || (u.googleMapsLoaderPromise = new Promise((t, e) => {
|
|
551
561
|
const n = document.querySelector('script[data-rs-google-maps="true"]');
|
|
552
562
|
if (n) {
|
|
553
|
-
n.addEventListener("load", () =>
|
|
563
|
+
n.addEventListener("load", () => t(), { once: !0 }), n.addEventListener(
|
|
554
564
|
"error",
|
|
555
|
-
() =>
|
|
565
|
+
() => e(new Error("Error al cargar la API de Google Maps")),
|
|
556
566
|
{ once: !0 }
|
|
557
567
|
);
|
|
558
568
|
return;
|
|
559
569
|
}
|
|
560
|
-
const a = document.createElement("script"),
|
|
570
|
+
const a = document.createElement("script"), s = new URLSearchParams({
|
|
561
571
|
key: this.googleMapsApiKey,
|
|
562
572
|
v: "weekly"
|
|
563
573
|
});
|
|
564
|
-
a.src = `https://maps.googleapis.com/maps/api/js?${
|
|
565
|
-
window._rsGoogleMapsLoaded = !0,
|
|
574
|
+
a.src = `https://maps.googleapis.com/maps/api/js?${s.toString()}`, a.async = !0, a.defer = !0, a.dataset.rsGoogleMaps = "true", a.onload = () => {
|
|
575
|
+
window._rsGoogleMapsLoaded = !0, t();
|
|
566
576
|
}, a.onerror = () => {
|
|
567
|
-
|
|
577
|
+
u.googleMapsLoaderPromise = null, e(new Error("Error al cargar la API de Google Maps"));
|
|
568
578
|
}, document.head.appendChild(a);
|
|
569
|
-
})),
|
|
579
|
+
})), u.googleMapsLoaderPromise.then(() => {
|
|
570
580
|
window._rsGoogleMapsLoaded = !0, this.initMap();
|
|
571
|
-
}).catch((
|
|
572
|
-
console.error(
|
|
581
|
+
}).catch((t) => {
|
|
582
|
+
console.error(t instanceof Error ? t.message : "Error al cargar la API de Google Maps");
|
|
573
583
|
})) : (console.error('Falta la clave de Google Maps. Define el atributo "google-maps-key" en <rs-map>.'), Promise.resolve());
|
|
574
584
|
}
|
|
575
585
|
initMap() {
|
|
576
|
-
const
|
|
577
|
-
if (!
|
|
586
|
+
const t = window.google;
|
|
587
|
+
if (!t) {
|
|
578
588
|
console.error("Google Maps aun no esta disponible.");
|
|
579
589
|
return;
|
|
580
590
|
}
|
|
581
|
-
const
|
|
582
|
-
this.map = new
|
|
583
|
-
center:
|
|
591
|
+
const e = this.getInitialCenter();
|
|
592
|
+
this.map = new t.maps.Map(this.mapEl, {
|
|
593
|
+
center: e,
|
|
584
594
|
zoom: 14,
|
|
585
595
|
mapTypeId: "roadmap"
|
|
586
596
|
}), this.points.length && this.updateMarkers(this.points);
|
|
587
597
|
}
|
|
588
598
|
getInitialCenter() {
|
|
589
|
-
const
|
|
590
|
-
return
|
|
599
|
+
const t = this.getFirstValidPoint();
|
|
600
|
+
return t || { lat: -33.4489, lng: -70.6693 };
|
|
591
601
|
}
|
|
592
602
|
getFirstValidPoint() {
|
|
593
|
-
for (const
|
|
594
|
-
const
|
|
595
|
-
if (Number.isFinite(
|
|
596
|
-
return { lat:
|
|
603
|
+
for (const t of this.points) {
|
|
604
|
+
const e = Number(t.lat), n = Number(t.lng);
|
|
605
|
+
if (Number.isFinite(e) && Number.isFinite(n))
|
|
606
|
+
return { lat: e, lng: n };
|
|
597
607
|
}
|
|
598
608
|
return null;
|
|
599
609
|
}
|
|
600
610
|
syncAttributesToState() {
|
|
601
|
-
var
|
|
602
|
-
this.isSyncingInitialAttributes = !0, this.setMarca((
|
|
611
|
+
var t, e;
|
|
612
|
+
this.isSyncingInitialAttributes = !0, this.setMarca((t = this.getAttribute("marca")) != null ? t : ""), this.setTipo((e = this.getAttribute("tipo")) != null ? e : ""), this.setGoogleMapsKey(this.getAttribute("google-maps-key")), this.setPointsApiUrl(this.getAttribute("points-api-url")), this.setCacheDays(this.getAttribute("cache-days")), this.setMarkerIconBase(this.getAttribute("marker-icon-base")), this.setDefaultMarkerIcon(this.getAttribute("marker-icon-default")), this.isSyncingInitialAttributes = !1, this.queueRefreshPoints();
|
|
603
613
|
}
|
|
604
|
-
setMapHeight(
|
|
605
|
-
const
|
|
606
|
-
if (!
|
|
614
|
+
setMapHeight(t) {
|
|
615
|
+
const e = (t != null ? t : "").trim();
|
|
616
|
+
if (!e) {
|
|
607
617
|
this.mapHeight = "", this.style.removeProperty("--map-height");
|
|
608
618
|
return;
|
|
609
619
|
}
|
|
610
|
-
this.mapHeight =
|
|
620
|
+
this.mapHeight = e, this.style.setProperty("--map-height", e);
|
|
611
621
|
}
|
|
612
|
-
setGoogleMapsKey(
|
|
613
|
-
this.googleMapsApiKey = (
|
|
622
|
+
setGoogleMapsKey(t) {
|
|
623
|
+
this.googleMapsApiKey = (t != null ? t : "").trim(), this.googleMapsApiKey && this.isConnected && this.loadGoogleMaps();
|
|
614
624
|
}
|
|
615
|
-
setPointsApiUrl(
|
|
616
|
-
const
|
|
617
|
-
this.pointsApiUrl =
|
|
625
|
+
setPointsApiUrl(t) {
|
|
626
|
+
const e = (t != null ? t : "").trim();
|
|
627
|
+
this.pointsApiUrl = e || B, this.pointsApiUrl && this.isConnected && !this.isSyncingInitialAttributes && this.queueRefreshPoints();
|
|
618
628
|
}
|
|
619
|
-
setCacheDays(
|
|
620
|
-
const
|
|
621
|
-
if (!
|
|
629
|
+
setCacheDays(t) {
|
|
630
|
+
const e = (t != null ? t : "").trim();
|
|
631
|
+
if (!e) {
|
|
622
632
|
this.pointsCacheTtlMs = T;
|
|
623
633
|
return;
|
|
624
634
|
}
|
|
625
|
-
const n = Number(
|
|
635
|
+
const n = Number(e);
|
|
626
636
|
if (!Number.isFinite(n) || n < 0) {
|
|
627
637
|
this.pointsCacheTtlMs = T;
|
|
628
638
|
return;
|
|
629
639
|
}
|
|
630
640
|
this.pointsCacheTtlMs = n * 24 * 60 * 60 * 1e3;
|
|
631
641
|
}
|
|
632
|
-
setMarkerIconBase(
|
|
633
|
-
const
|
|
634
|
-
if (!
|
|
642
|
+
setMarkerIconBase(t) {
|
|
643
|
+
const e = (t != null ? t : "").trim();
|
|
644
|
+
if (!e) {
|
|
635
645
|
this.markerIconBaseUrl = F;
|
|
636
646
|
return;
|
|
637
647
|
}
|
|
638
|
-
this.markerIconBaseUrl =
|
|
648
|
+
this.markerIconBaseUrl = e.endsWith("/") ? e : `${e}/`;
|
|
639
649
|
}
|
|
640
|
-
setDefaultMarkerIcon(
|
|
641
|
-
this.defaultMarkerIconUrl = (
|
|
650
|
+
setDefaultMarkerIcon(t) {
|
|
651
|
+
this.defaultMarkerIconUrl = (t != null ? t : "").trim();
|
|
642
652
|
}
|
|
643
|
-
setMarca(
|
|
644
|
-
this.marca =
|
|
653
|
+
setMarca(t) {
|
|
654
|
+
this.marca = t.trim(), this.marcaKey = this.normalizeBrandKey(this.marca), this.applyBrandColor(), this.isSyncingInitialAttributes || this.queueRefreshPoints();
|
|
645
655
|
}
|
|
646
|
-
setTipo(
|
|
647
|
-
this.tipo =
|
|
656
|
+
setTipo(t) {
|
|
657
|
+
this.tipo = t.trim(), this.tipoCode = this.normalizeTipo(this.tipo), this.updatePanelTitle(), this.isSyncingInitialAttributes || this.queueRefreshPoints();
|
|
648
658
|
}
|
|
649
659
|
queueRefreshPoints() {
|
|
650
660
|
this.refreshQueued || (this.refreshQueued = !0, queueMicrotask(() => {
|
|
@@ -660,105 +670,120 @@ const I = "#1e88e5", L = "/assets/fontawesome/css/all.min.css", F = "https://cdn
|
|
|
660
670
|
updatePanelTitle() {
|
|
661
671
|
if (!this.panelTitleEl)
|
|
662
672
|
return;
|
|
663
|
-
const
|
|
664
|
-
this.panelTitleEl.textContent =
|
|
673
|
+
const t = this.getTipoLabel();
|
|
674
|
+
this.panelTitleEl.textContent = t != null ? t : "Puntos del mapa";
|
|
665
675
|
}
|
|
666
676
|
getTipoLabel() {
|
|
667
677
|
if (this.tipoCode !== null && this.tipoCode in N)
|
|
668
678
|
return N[this.tipoCode];
|
|
669
|
-
const
|
|
670
|
-
return
|
|
679
|
+
const t = this.tipo.trim().toLowerCase(), e = t && t in z ? z[t] : null;
|
|
680
|
+
return e !== null && e in N ? N[e] : null;
|
|
671
681
|
}
|
|
672
682
|
applyBrandColor() {
|
|
673
|
-
var
|
|
674
|
-
const
|
|
675
|
-
this.style.setProperty("--rs-map-accent",
|
|
683
|
+
var e;
|
|
684
|
+
const t = (e = R[this.marcaKey]) != null ? e : I;
|
|
685
|
+
this.style.setProperty("--rs-map-accent", t);
|
|
676
686
|
}
|
|
677
|
-
normalizeTipo(
|
|
678
|
-
if (!
|
|
687
|
+
normalizeTipo(t) {
|
|
688
|
+
if (!t)
|
|
679
689
|
return null;
|
|
680
|
-
const
|
|
681
|
-
if (
|
|
682
|
-
return
|
|
683
|
-
const n = Number(
|
|
690
|
+
const e = t.trim().toLowerCase();
|
|
691
|
+
if (e in z)
|
|
692
|
+
return z[e];
|
|
693
|
+
const n = Number(e);
|
|
684
694
|
return Number.isFinite(n) && (n === 0 || n === 1) ? n : null;
|
|
685
695
|
}
|
|
686
696
|
async refreshPoints() {
|
|
687
|
-
var
|
|
697
|
+
var g;
|
|
688
698
|
if (!this.isConnected || !this.marca || this.tipoCode === null)
|
|
689
699
|
return;
|
|
690
700
|
if (!this.pointsApiUrl) {
|
|
691
701
|
console.error('Falta la URL de la API de puntos. Define el atributo "points-api-url" en <rs-map>.'), this.setComponentState("error");
|
|
692
702
|
return;
|
|
693
703
|
}
|
|
694
|
-
(
|
|
695
|
-
const
|
|
696
|
-
this.pointsController =
|
|
697
|
-
const
|
|
704
|
+
(g = this.pointsController) == null || g.abort();
|
|
705
|
+
const t = new AbortController();
|
|
706
|
+
this.pointsController = t;
|
|
707
|
+
const e = new URLSearchParams({
|
|
698
708
|
marca: this.marca,
|
|
699
709
|
tipo: String(this.tipoCode)
|
|
700
|
-
}), n = this.pointsApiUrl.includes("?"), a = n && !/[?&]$/.test(this.pointsApiUrl),
|
|
710
|
+
}), n = this.pointsApiUrl.includes("?"), a = n && !/[?&]$/.test(this.pointsApiUrl), s = n ? a ? "&" : "" : "?", c = `${this.pointsApiUrl}${s}${e.toString()}`, i = this.getPointsCacheKey(c), l = await this.readPointsCache(i), d = l && Date.now() - l.timestamp < this.pointsCacheTtlMs, h = l ? null : await this.getLocalPointsFallback(this.marca, this.tipoCode);
|
|
701
711
|
if (l) {
|
|
702
712
|
if (this.applyPointsPayload(l.data), this.setComponentState("ready"), d)
|
|
703
713
|
return;
|
|
704
|
-
} else
|
|
705
|
-
this.setComponentState("loading");
|
|
714
|
+
} else h ? (this.applyPointsPayload(h), this.setComponentState("ready")) : this.setComponentState("loading");
|
|
706
715
|
try {
|
|
707
|
-
const
|
|
708
|
-
signal:
|
|
716
|
+
const m = await fetch(c, {
|
|
717
|
+
signal: t.signal
|
|
709
718
|
});
|
|
710
|
-
if (!
|
|
711
|
-
throw new Error(`Respuesta ${
|
|
712
|
-
const
|
|
713
|
-
if (!Array.isArray(
|
|
719
|
+
if (!m.ok)
|
|
720
|
+
throw new Error(`Respuesta ${m.status}`);
|
|
721
|
+
const y = await m.json();
|
|
722
|
+
if (!Array.isArray(y))
|
|
714
723
|
throw new Error("La respuesta de puntos no es valida.");
|
|
715
|
-
const
|
|
716
|
-
await this.writePointsCache(i,
|
|
717
|
-
} catch (
|
|
718
|
-
if (
|
|
724
|
+
const o = y;
|
|
725
|
+
await this.writePointsCache(i, o), this.applyPointsPayload(o), this.setComponentState("ready");
|
|
726
|
+
} catch (m) {
|
|
727
|
+
if (m instanceof DOMException && m.name === "AbortError")
|
|
719
728
|
return;
|
|
720
|
-
if (l) {
|
|
721
|
-
console.warn("Se mantienen puntos
|
|
729
|
+
if (l || h) {
|
|
730
|
+
console.warn("Se mantienen puntos locales por error al refrescar el mapa", m);
|
|
722
731
|
return;
|
|
723
732
|
}
|
|
724
|
-
console.error("No se pudieron cargar los puntos del mapa",
|
|
733
|
+
console.error("No se pudieron cargar los puntos del mapa", m), this.setComponentState("error");
|
|
725
734
|
}
|
|
726
735
|
}
|
|
727
|
-
applyPointsPayload(
|
|
728
|
-
this.points = this.transformPoints(
|
|
736
|
+
applyPointsPayload(t) {
|
|
737
|
+
this.points = this.transformPoints(t), this.renderPoints(this.points), this.initialViewApplied = !1, this.updateMarkers(this.points);
|
|
738
|
+
}
|
|
739
|
+
getPointsCacheKey(t) {
|
|
740
|
+
return `rs-map:points:${t}`;
|
|
729
741
|
}
|
|
730
|
-
|
|
731
|
-
|
|
742
|
+
async getLocalPointsFallback(t, e) {
|
|
743
|
+
const a = `../json/PuntosMapas_${this.normalizeBrandKey(t)}_${e}.json`, s = this.localPointsRequests.get(a);
|
|
744
|
+
if (s)
|
|
745
|
+
return s;
|
|
746
|
+
const c = O[a];
|
|
747
|
+
if (!c)
|
|
748
|
+
return null;
|
|
749
|
+
const i = c().then((l) => {
|
|
750
|
+
const d = this.parseLocalPointsPayload(l);
|
|
751
|
+
return d != null && d.length ? d : null;
|
|
752
|
+
}).catch(() => null);
|
|
753
|
+
return this.localPointsRequests.set(a, i), i;
|
|
732
754
|
}
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
755
|
+
parseLocalPointsPayload(t) {
|
|
756
|
+
return Array.isArray(t) ? t : null;
|
|
757
|
+
}
|
|
758
|
+
async readPointsCache(t) {
|
|
759
|
+
const e = await this.readPointsCacheFromIndexedDb(t);
|
|
760
|
+
if (e)
|
|
761
|
+
return e;
|
|
737
762
|
try {
|
|
738
|
-
const n = window.localStorage.getItem(
|
|
763
|
+
const n = window.localStorage.getItem(t);
|
|
739
764
|
if (!n)
|
|
740
765
|
return null;
|
|
741
766
|
const a = JSON.parse(n);
|
|
742
|
-
return !a || !Array.isArray(a.data) || !Number.isFinite(a.timestamp) ? (window.localStorage.removeItem(
|
|
767
|
+
return !a || !Array.isArray(a.data) || !Number.isFinite(a.timestamp) ? (window.localStorage.removeItem(t), null) : a;
|
|
743
768
|
} catch {
|
|
744
769
|
return null;
|
|
745
770
|
}
|
|
746
771
|
}
|
|
747
|
-
async writePointsCache(
|
|
772
|
+
async writePointsCache(t, e) {
|
|
748
773
|
const n = {
|
|
749
774
|
timestamp: Date.now(),
|
|
750
|
-
data:
|
|
775
|
+
data: e
|
|
751
776
|
};
|
|
752
|
-
await this.writePointsCacheToIndexedDb(
|
|
777
|
+
await this.writePointsCacheToIndexedDb(t, n);
|
|
753
778
|
try {
|
|
754
|
-
window.localStorage.setItem(
|
|
779
|
+
window.localStorage.setItem(t, JSON.stringify(n));
|
|
755
780
|
} catch {
|
|
756
781
|
}
|
|
757
782
|
}
|
|
758
|
-
async readPointsCacheFromIndexedDb(
|
|
759
|
-
const
|
|
760
|
-
return
|
|
761
|
-
const c =
|
|
783
|
+
async readPointsCacheFromIndexedDb(t) {
|
|
784
|
+
const e = await u.openPointsCacheDb();
|
|
785
|
+
return e ? new Promise((n) => {
|
|
786
|
+
const c = e.transaction(E, "readonly").objectStore(E).get(t);
|
|
762
787
|
c.onsuccess = () => {
|
|
763
788
|
const i = c.result;
|
|
764
789
|
if (!i || !Array.isArray(i.data) || !Number.isFinite(i.timestamp)) {
|
|
@@ -772,214 +797,214 @@ const I = "#1e88e5", L = "/assets/fontawesome/css/all.min.css", F = "https://cdn
|
|
|
772
797
|
}, c.onerror = () => n(null);
|
|
773
798
|
}) : null;
|
|
774
799
|
}
|
|
775
|
-
async writePointsCacheToIndexedDb(
|
|
776
|
-
const n = await
|
|
800
|
+
async writePointsCacheToIndexedDb(t, e) {
|
|
801
|
+
const n = await u.openPointsCacheDb();
|
|
777
802
|
n && await new Promise((a) => {
|
|
778
|
-
const i = n.transaction(
|
|
779
|
-
key:
|
|
780
|
-
timestamp:
|
|
781
|
-
data:
|
|
803
|
+
const i = n.transaction(E, "readwrite").objectStore(E).put({
|
|
804
|
+
key: t,
|
|
805
|
+
timestamp: e.timestamp,
|
|
806
|
+
data: e.data
|
|
782
807
|
});
|
|
783
808
|
i.onsuccess = () => a(), i.onerror = () => a();
|
|
784
809
|
});
|
|
785
810
|
}
|
|
786
811
|
static openPointsCacheDb() {
|
|
787
|
-
return typeof window == "undefined" || !("indexedDB" in window) ? Promise.resolve(null) : (
|
|
788
|
-
const
|
|
789
|
-
|
|
790
|
-
const n =
|
|
791
|
-
n.objectStoreNames.contains(
|
|
792
|
-
},
|
|
793
|
-
})),
|
|
812
|
+
return typeof window == "undefined" || !("indexedDB" in window) ? Promise.resolve(null) : (u.pointsCacheDbPromise || (u.pointsCacheDbPromise = new Promise((t) => {
|
|
813
|
+
const e = window.indexedDB.open(G, 1);
|
|
814
|
+
e.onupgradeneeded = () => {
|
|
815
|
+
const n = e.result;
|
|
816
|
+
n.objectStoreNames.contains(E) || n.createObjectStore(E, { keyPath: "key" });
|
|
817
|
+
}, e.onsuccess = () => t(e.result), e.onerror = () => t(null);
|
|
818
|
+
})), u.pointsCacheDbPromise);
|
|
794
819
|
}
|
|
795
|
-
transformPoints(
|
|
796
|
-
return
|
|
797
|
-
...
|
|
798
|
-
zone: this.getZoneForPoint(
|
|
820
|
+
transformPoints(t) {
|
|
821
|
+
return t.map((e) => ({
|
|
822
|
+
...e,
|
|
823
|
+
zone: this.getZoneForPoint(e)
|
|
799
824
|
}));
|
|
800
825
|
}
|
|
801
|
-
renderPoints(
|
|
826
|
+
renderPoints(t) {
|
|
802
827
|
if (!this.zonesContainer)
|
|
803
828
|
return;
|
|
804
|
-
const
|
|
805
|
-
this.pointsByZone =
|
|
829
|
+
const e = this.groupPoints(t);
|
|
830
|
+
this.pointsByZone = e, this.updateZoneButtonCounts();
|
|
806
831
|
const n = document.createDocumentFragment();
|
|
807
|
-
|
|
808
|
-
const
|
|
809
|
-
|
|
832
|
+
j.forEach((a) => {
|
|
833
|
+
const s = document.createElement("section");
|
|
834
|
+
s.className = "zone-section", s.dataset.zoneSection = a;
|
|
810
835
|
const c = document.createElement("div");
|
|
811
836
|
c.className = "zone-section__header";
|
|
812
837
|
const i = document.createElement("span");
|
|
813
|
-
if (i.textContent = $[a], c.appendChild(i),
|
|
838
|
+
if (i.textContent = $[a], c.appendChild(i), s.appendChild(c), e[a].length === 0) {
|
|
814
839
|
const l = document.createElement("p");
|
|
815
|
-
l.className = "zone-section__empty", l.textContent = "Sin puntos en esta zona.",
|
|
840
|
+
l.className = "zone-section__empty", l.textContent = "Sin puntos en esta zona.", s.appendChild(l);
|
|
816
841
|
} else {
|
|
817
842
|
const l = document.createElement("div");
|
|
818
|
-
l.className = "zone-section__list",
|
|
843
|
+
l.className = "zone-section__list", e[a].forEach((d) => {
|
|
819
844
|
l.appendChild(this.createPointCard(d));
|
|
820
|
-
}),
|
|
845
|
+
}), s.appendChild(l);
|
|
821
846
|
}
|
|
822
|
-
n.appendChild(
|
|
847
|
+
n.appendChild(s);
|
|
823
848
|
}), this.zonesContainer.replaceChildren(n), this.updateZoneVisibility();
|
|
824
849
|
}
|
|
825
|
-
groupPoints(
|
|
826
|
-
const
|
|
850
|
+
groupPoints(t) {
|
|
851
|
+
const e = {
|
|
827
852
|
norte: [],
|
|
828
853
|
rm: [],
|
|
829
854
|
centro: [],
|
|
830
855
|
sur: []
|
|
831
856
|
};
|
|
832
|
-
return
|
|
833
|
-
|
|
834
|
-
}),
|
|
857
|
+
return t.forEach((n) => {
|
|
858
|
+
e[n.zone].push(n);
|
|
859
|
+
}), e;
|
|
835
860
|
}
|
|
836
|
-
createPointCard(
|
|
861
|
+
createPointCard(t) {
|
|
837
862
|
var y;
|
|
838
|
-
const
|
|
839
|
-
|
|
863
|
+
const e = document.createElement("article");
|
|
864
|
+
e.className = "point-card", e.dataset.pointId = String(t.id);
|
|
840
865
|
const n = document.createElement("h3");
|
|
841
|
-
n.className = "point-card__title", n.textContent =
|
|
866
|
+
n.className = "point-card__title", n.textContent = t.titulo || "Sin nombre", e.appendChild(n);
|
|
842
867
|
const a = document.createElement("div");
|
|
843
868
|
a.className = "point-card__address-block";
|
|
844
|
-
const
|
|
845
|
-
if (
|
|
869
|
+
const s = document.createElement("p");
|
|
870
|
+
if (s.className = "point-card__address", s.textContent = t.direccion || "Sin direccion", a.appendChild(s), t.comuna_name) {
|
|
846
871
|
const o = document.createElement("p");
|
|
847
|
-
o.className = "point-card__meta", o.textContent =
|
|
872
|
+
o.className = "point-card__meta", o.textContent = t.comuna_name, a.appendChild(o);
|
|
848
873
|
}
|
|
849
|
-
if (
|
|
874
|
+
if (t.provincia_name) {
|
|
850
875
|
const o = document.createElement("p");
|
|
851
|
-
o.className = "point-card__meta", o.textContent =
|
|
876
|
+
o.className = "point-card__meta", o.textContent = t.provincia_name, a.appendChild(o);
|
|
852
877
|
}
|
|
853
|
-
if (
|
|
878
|
+
if (t.region_name) {
|
|
854
879
|
const o = document.createElement("p");
|
|
855
|
-
o.className = "point-card__meta", o.textContent =
|
|
880
|
+
o.className = "point-card__meta", o.textContent = t.region_name, a.appendChild(o);
|
|
856
881
|
}
|
|
857
|
-
|
|
882
|
+
e.appendChild(a);
|
|
858
883
|
let c = null;
|
|
859
|
-
const i = Number(
|
|
884
|
+
const i = Number(t.lat), l = Number(t.lng);
|
|
860
885
|
if (Number.isFinite(i) && Number.isFinite(l)) {
|
|
861
886
|
c = document.createElement("button"), c.type = "button", c.className = "point-card__focus";
|
|
862
887
|
const o = this.createIconElement("fa-solid fa-location-crosshairs");
|
|
863
888
|
c.appendChild(o), c.appendChild(document.createTextNode(" Ver en el mapa")), c.addEventListener("click", () => {
|
|
864
|
-
this.focusPointWithZoom(i, l), this.scrollToPointCard(
|
|
889
|
+
this.focusPointWithZoom(i, l), this.scrollToPointCard(t.id);
|
|
865
890
|
});
|
|
866
891
|
}
|
|
867
892
|
const d = document.createElement("div");
|
|
868
893
|
d.className = "point-card__details", d.hidden = !0;
|
|
869
894
|
let h = !1;
|
|
870
|
-
const
|
|
871
|
-
|
|
872
|
-
let
|
|
873
|
-
if (
|
|
895
|
+
const g = document.createElement("div");
|
|
896
|
+
g.className = "point-card__actions";
|
|
897
|
+
let m = null;
|
|
898
|
+
if (t.url && t.url !== "#") {
|
|
874
899
|
const o = document.createElement("a");
|
|
875
|
-
o.href =
|
|
876
|
-
const
|
|
877
|
-
o.appendChild(
|
|
900
|
+
o.href = t.url, o.target = "_blank", o.rel = "noopener noreferrer", o.className = "point-card__action";
|
|
901
|
+
const f = this.createIconElement("fa-solid fa-globe");
|
|
902
|
+
o.appendChild(f), o.appendChild(document.createTextNode("Sitio web")), g.appendChild(o);
|
|
878
903
|
}
|
|
879
|
-
if (
|
|
904
|
+
if (t.email) {
|
|
880
905
|
const o = document.createElement("a");
|
|
881
|
-
o.href = `mailto:${
|
|
882
|
-
const
|
|
883
|
-
o.appendChild(
|
|
906
|
+
o.href = `mailto:${t.email}`, o.target = "_blank", o.rel = "noopener noreferrer", o.className = "point-card__action point-card__action--text";
|
|
907
|
+
const f = this.createIconElement("fa-solid fa-envelope");
|
|
908
|
+
o.appendChild(f), o.appendChild(document.createTextNode(t.email)), g.appendChild(o);
|
|
884
909
|
}
|
|
885
|
-
if (
|
|
910
|
+
if (g.childElementCount && (d.appendChild(g), h = !0), (y = t.telefonos) != null && y.length) {
|
|
886
911
|
const o = document.createElement("div");
|
|
887
912
|
o.className = "point-card__contact";
|
|
888
|
-
const
|
|
889
|
-
|
|
890
|
-
const
|
|
891
|
-
|
|
892
|
-
const
|
|
893
|
-
|
|
894
|
-
const
|
|
895
|
-
|
|
913
|
+
const f = document.createElement("div");
|
|
914
|
+
f.className = "point-card__contact-title";
|
|
915
|
+
const b = this.createIconElement("fa-solid fa-phone");
|
|
916
|
+
f.appendChild(b), f.appendChild(document.createTextNode("Telefonos")), o.appendChild(f);
|
|
917
|
+
const x = document.createElement("ul");
|
|
918
|
+
x.className = "point-card__phone-list", t.telefonos.slice().sort((C, P) => C.orden - P.orden).forEach((C) => {
|
|
919
|
+
const P = document.createElement("li");
|
|
920
|
+
P.className = "point-card__phone-item";
|
|
896
921
|
const k = document.createElement("span");
|
|
897
|
-
if (k.className = "point-card__phone-icon",
|
|
898
|
-
const
|
|
899
|
-
k.appendChild(
|
|
922
|
+
if (k.className = "point-card__phone-icon", C.whatsapp) {
|
|
923
|
+
const M = this.createIconElement("fa-brands fa-whatsapp");
|
|
924
|
+
k.appendChild(M);
|
|
900
925
|
} else
|
|
901
926
|
k.textContent = "-";
|
|
902
|
-
|
|
927
|
+
P.appendChild(k);
|
|
903
928
|
const A = document.createElement("div");
|
|
904
929
|
A.className = "point-card__phone-content";
|
|
905
|
-
const
|
|
906
|
-
|
|
907
|
-
const
|
|
908
|
-
if (
|
|
909
|
-
const
|
|
910
|
-
|
|
911
|
-
}
|
|
912
|
-
|
|
913
|
-
}), o.appendChild(
|
|
930
|
+
const L = document.createElement("span");
|
|
931
|
+
L.className = "point-card__phone-name", L.textContent = C.nombre, A.appendChild(L);
|
|
932
|
+
const w = C.whatsapp ? document.createElement("a") : document.createElement("span");
|
|
933
|
+
if (w.className = "point-card__phone-number", C.whatsapp) {
|
|
934
|
+
const M = this.getWhatsappLink(C.telefono);
|
|
935
|
+
M && (w.href = M, w.target = "_blank", w.rel = "noopener noreferrer", w.classList.add("point-card__phone-number--link"));
|
|
936
|
+
}
|
|
937
|
+
w.textContent = C.telefono, A.appendChild(w), P.appendChild(A), x.appendChild(P);
|
|
938
|
+
}), o.appendChild(x), d.appendChild(o), h = !0;
|
|
914
939
|
}
|
|
915
|
-
if (
|
|
940
|
+
if (t.adicional) {
|
|
916
941
|
const o = document.createElement("p");
|
|
917
|
-
o.className = "point-card__extra", o.innerHTML =
|
|
918
|
-
|
|
919
|
-
const
|
|
920
|
-
|
|
942
|
+
o.className = "point-card__extra", o.innerHTML = t.adicional, o.querySelectorAll("a").forEach((f) => {
|
|
943
|
+
f.classList.add("point-card__extra-link");
|
|
944
|
+
const b = this.createIconElement("fa-solid fa-arrow-up-right-from-square");
|
|
945
|
+
b.classList.add("point-card__extra-icon"), f.appendChild(b);
|
|
921
946
|
}), d.appendChild(o), h = !0;
|
|
922
947
|
}
|
|
923
|
-
if (
|
|
924
|
-
|
|
948
|
+
if (t.googlelink) {
|
|
949
|
+
m = document.createElement("a"), m.href = t.googlelink, m.target = "_blank", m.rel = "noopener noreferrer", m.className = "point-card__action";
|
|
925
950
|
const o = this.createIconElement("fa-solid fa-map-location-dot");
|
|
926
|
-
|
|
951
|
+
m.appendChild(o), m.appendChild(document.createTextNode("Google Maps"));
|
|
927
952
|
}
|
|
928
|
-
if (
|
|
953
|
+
if (m) {
|
|
929
954
|
const o = document.createElement("div");
|
|
930
|
-
o.className = "point-card__actions", o.appendChild(
|
|
955
|
+
o.className = "point-card__actions", o.appendChild(m), d.appendChild(o), h = !0;
|
|
931
956
|
}
|
|
932
957
|
if (h) {
|
|
933
958
|
const o = document.createElement("button");
|
|
934
959
|
o.type = "button", o.className = "point-card__toggle";
|
|
935
|
-
const
|
|
936
|
-
|
|
937
|
-
const
|
|
938
|
-
d.hidden = !
|
|
939
|
-
}),
|
|
960
|
+
const f = this.createIconElement("fa-solid fa-circle-info"), b = document.createElement("span");
|
|
961
|
+
b.textContent = "Mas informacion", o.appendChild(f), o.appendChild(b), o.addEventListener("click", () => {
|
|
962
|
+
const x = d.hidden;
|
|
963
|
+
d.hidden = !x, b.textContent = x ? "Ocultar informacion" : "Mas informacion", f.className = x ? "fa-solid fa-circle-xmark" : "fa-solid fa-circle-info";
|
|
964
|
+
}), e.appendChild(o), e.appendChild(d);
|
|
940
965
|
}
|
|
941
|
-
return c &&
|
|
966
|
+
return c && e.appendChild(c), e;
|
|
942
967
|
}
|
|
943
|
-
getZoneForPoint(
|
|
944
|
-
const
|
|
945
|
-
return
|
|
968
|
+
getZoneForPoint(t) {
|
|
969
|
+
const e = this.normalizeRegionName(t.region_name || "");
|
|
970
|
+
return e && e in Z ? Z[e] : e.includes("metropolitana") ? "rm" : e.includes("araucania") || e.includes("rios") || e.includes("lagos") || e.includes("aysen") || e.includes("magallanes") ? "sur" : e.includes("arica") || e.includes("tarapaca") || e.includes("antofagasta") || e.includes("atacama") || e.includes("coquimbo") ? "norte" : "centro";
|
|
946
971
|
}
|
|
947
|
-
normalizeRegionName(
|
|
948
|
-
return
|
|
972
|
+
normalizeRegionName(t) {
|
|
973
|
+
return t.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").trim();
|
|
949
974
|
}
|
|
950
|
-
normalizeBrandKey(
|
|
951
|
-
return
|
|
975
|
+
normalizeBrandKey(t) {
|
|
976
|
+
return t && t.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]+/g, "") || "default";
|
|
952
977
|
}
|
|
953
978
|
getMarkerIcon() {
|
|
954
|
-
const
|
|
955
|
-
return this.markerIconBaseUrl ? `${this.markerIconBaseUrl}${
|
|
979
|
+
const t = this.marcaKey || "default";
|
|
980
|
+
return this.markerIconBaseUrl ? `${this.markerIconBaseUrl}${t}.png` : this.defaultMarkerIconUrl ? this.defaultMarkerIconUrl : null;
|
|
956
981
|
}
|
|
957
|
-
updateMarkers(
|
|
958
|
-
const
|
|
959
|
-
if (!
|
|
982
|
+
updateMarkers(t) {
|
|
983
|
+
const e = window.google;
|
|
984
|
+
if (!e || !this.map)
|
|
960
985
|
return;
|
|
961
986
|
this.markers.forEach((i) => i.setMap(null)), this.markers = [];
|
|
962
|
-
const n =
|
|
987
|
+
const n = t.filter((i) => {
|
|
963
988
|
const l = Number(i.lat), d = Number(i.lng);
|
|
964
989
|
return Number.isFinite(l) && Number.isFinite(d);
|
|
965
990
|
});
|
|
966
991
|
if (!n.length)
|
|
967
992
|
return;
|
|
968
|
-
const a = new
|
|
969
|
-
url:
|
|
970
|
-
scaledSize: new
|
|
971
|
-
anchor: new
|
|
993
|
+
const a = new e.maps.LatLngBounds(), s = this.getMarkerIcon(), c = s && this.map ? {
|
|
994
|
+
url: s,
|
|
995
|
+
scaledSize: new e.maps.Size(36, 36),
|
|
996
|
+
anchor: new e.maps.Point(18, 36)
|
|
972
997
|
} : void 0;
|
|
973
998
|
if (n.forEach((i) => {
|
|
974
|
-
const l = Number(i.lat), d = Number(i.lng), h = new
|
|
999
|
+
const l = Number(i.lat), d = Number(i.lng), h = new e.maps.Marker({
|
|
975
1000
|
map: this.map,
|
|
976
1001
|
position: { lat: l, lng: d },
|
|
977
1002
|
title: i.titulo,
|
|
978
1003
|
icon: c
|
|
979
1004
|
});
|
|
980
1005
|
this.markers.push(h);
|
|
981
|
-
const
|
|
982
|
-
|
|
1006
|
+
const g = h.getPosition();
|
|
1007
|
+
g && a.extend(g);
|
|
983
1008
|
}), !this.initialViewApplied && this.markers.length) {
|
|
984
1009
|
const i = this.markers[0].getPosition();
|
|
985
1010
|
if (i) {
|
|
@@ -993,150 +1018,150 @@ const I = "#1e88e5", L = "/assets/fontawesome/css/all.min.css", F = "https://cdn
|
|
|
993
1018
|
} else
|
|
994
1019
|
this.map.fitBounds(a);
|
|
995
1020
|
}
|
|
996
|
-
setActiveZone(
|
|
1021
|
+
setActiveZone(t) {
|
|
997
1022
|
}
|
|
998
|
-
scrollToZoneSection(
|
|
1023
|
+
scrollToZoneSection(t) {
|
|
999
1024
|
if (!this.zonesContainer)
|
|
1000
1025
|
return;
|
|
1001
|
-
const
|
|
1002
|
-
|
|
1026
|
+
const e = this.zonesContainer.querySelector(`[data-zone-section="${t}"]`);
|
|
1027
|
+
e && e.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
1003
1028
|
}
|
|
1004
1029
|
updateZoneButtons() {
|
|
1005
|
-
this.zoneButtons.forEach((
|
|
1006
|
-
const
|
|
1007
|
-
|
|
1030
|
+
this.zoneButtons.forEach((t) => {
|
|
1031
|
+
const e = t.dataset.zone, n = this.activeZone === e;
|
|
1032
|
+
t.classList.toggle("is-active", n), t.setAttribute("aria-pressed", String(n));
|
|
1008
1033
|
});
|
|
1009
1034
|
}
|
|
1010
1035
|
updateZoneButtonCounts() {
|
|
1011
|
-
this.zoneButtons.forEach((
|
|
1012
|
-
|
|
1013
|
-
const
|
|
1014
|
-
|
|
1036
|
+
this.zoneButtons.forEach((t) => {
|
|
1037
|
+
t.dataset.zone;
|
|
1038
|
+
const e = t.dataset.label || t.textContent || "";
|
|
1039
|
+
t.textContent = e;
|
|
1015
1040
|
});
|
|
1016
1041
|
}
|
|
1017
1042
|
updateZoneVisibility() {
|
|
1018
1043
|
if (!this.zonesContainer)
|
|
1019
1044
|
return;
|
|
1020
|
-
this.zonesContainer.querySelectorAll("[data-zone-section]").forEach((
|
|
1021
|
-
|
|
1045
|
+
this.zonesContainer.querySelectorAll("[data-zone-section]").forEach((e) => {
|
|
1046
|
+
e.removeAttribute("hidden");
|
|
1022
1047
|
});
|
|
1023
1048
|
}
|
|
1024
|
-
findNearestPoint(
|
|
1049
|
+
findNearestPoint(t, e) {
|
|
1025
1050
|
if (!this.points.length)
|
|
1026
1051
|
return null;
|
|
1027
1052
|
let n = null, a = 1 / 0;
|
|
1028
|
-
return this.points.forEach((
|
|
1029
|
-
const c = Number(
|
|
1053
|
+
return this.points.forEach((s) => {
|
|
1054
|
+
const c = Number(s.lat), i = Number(s.lng);
|
|
1030
1055
|
if (!Number.isFinite(c) || !Number.isFinite(i))
|
|
1031
1056
|
return;
|
|
1032
|
-
const l = this.haversine(
|
|
1033
|
-
l < a && (a = l, n =
|
|
1057
|
+
const l = this.haversine(t, e, c, i);
|
|
1058
|
+
l < a && (a = l, n = s);
|
|
1034
1059
|
}), n;
|
|
1035
1060
|
}
|
|
1036
|
-
haversine(
|
|
1037
|
-
const
|
|
1061
|
+
haversine(t, e, n, a) {
|
|
1062
|
+
const s = (g) => g * Math.PI / 180, i = s(n - t), l = s(a - e), d = Math.sin(i / 2) * Math.sin(i / 2) + Math.cos(s(t)) * Math.cos(s(n)) * Math.sin(l / 2) * Math.sin(l / 2);
|
|
1038
1063
|
return 6371e3 * (2 * Math.atan2(Math.sqrt(d), Math.sqrt(1 - d)));
|
|
1039
1064
|
}
|
|
1040
|
-
scrollToPointCard(
|
|
1065
|
+
scrollToPointCard(t) {
|
|
1041
1066
|
if (!this.zonesContainer)
|
|
1042
1067
|
return;
|
|
1043
|
-
const
|
|
1044
|
-
|
|
1068
|
+
const e = this.zonesContainer.querySelector(`[data-point-id="${t}"]`);
|
|
1069
|
+
e && (e.scrollIntoView({ behavior: "smooth", block: "center" }), this.highlightPointCard(e));
|
|
1045
1070
|
}
|
|
1046
|
-
highlightPointCard(
|
|
1047
|
-
var
|
|
1048
|
-
this.highlightTimeout !== null && (clearTimeout(this.highlightTimeout), this.highlightTimeout = null), (
|
|
1071
|
+
highlightPointCard(t) {
|
|
1072
|
+
var e;
|
|
1073
|
+
this.highlightTimeout !== null && (clearTimeout(this.highlightTimeout), this.highlightTimeout = null), (e = this.zonesContainer) == null || e.querySelectorAll(".point-card--highlight").forEach((n) => {
|
|
1049
1074
|
n.classList.remove("point-card--highlight");
|
|
1050
|
-
}),
|
|
1051
|
-
|
|
1075
|
+
}), t.classList.add("point-card--highlight"), this.highlightTimeout = window.setTimeout(() => {
|
|
1076
|
+
t.classList.remove("point-card--highlight"), this.highlightTimeout = null;
|
|
1052
1077
|
}, 3500);
|
|
1053
1078
|
}
|
|
1054
|
-
setComponentState(
|
|
1079
|
+
setComponentState(t) {
|
|
1055
1080
|
if (!(!this.componentMessageEl || !this.mapLayoutEl))
|
|
1056
|
-
if (
|
|
1081
|
+
if (t === "ready")
|
|
1057
1082
|
this.componentMessageEl.setAttribute("hidden", ""), this.mapLayoutEl.removeAttribute("hidden");
|
|
1058
1083
|
else {
|
|
1059
|
-
const
|
|
1060
|
-
this.componentMessageEl.textContent =
|
|
1084
|
+
const e = t === "loading" ? "Cargando puntos..." : "Mapa temporalmente no disponible";
|
|
1085
|
+
this.componentMessageEl.textContent = e, this.componentMessageEl.removeAttribute("hidden"), this.mapLayoutEl.setAttribute("hidden", "");
|
|
1061
1086
|
}
|
|
1062
1087
|
}
|
|
1063
|
-
centerMapOnPoint(
|
|
1064
|
-
if (!window.google || !this.map || !Number.isFinite(
|
|
1088
|
+
centerMapOnPoint(t, e, n = 14) {
|
|
1089
|
+
if (!window.google || !this.map || !Number.isFinite(t) || !Number.isFinite(e))
|
|
1065
1090
|
return;
|
|
1066
|
-
const
|
|
1067
|
-
this.animateMapPan(
|
|
1091
|
+
const s = typeof this.map.getZoom == "function" ? this.map.getZoom() : null, c = !s || s < n;
|
|
1092
|
+
this.animateMapPan(t, e, () => {
|
|
1068
1093
|
c && this.map.setZoom(n);
|
|
1069
1094
|
});
|
|
1070
1095
|
}
|
|
1071
|
-
async focusPointWithZoom(
|
|
1072
|
-
!window.google || !this.map || !Number.isFinite(
|
|
1073
|
-
this.animateMapPan(
|
|
1096
|
+
async focusPointWithZoom(t, e) {
|
|
1097
|
+
!window.google || !this.map || !Number.isFinite(t) || !Number.isFinite(e) || (await this.animateZoomTo(8, 800), await this.wait(500), await new Promise((a) => {
|
|
1098
|
+
this.animateMapPan(t, e, a);
|
|
1074
1099
|
}), await this.wait(500), await this.animateZoomTo(18, 800));
|
|
1075
1100
|
}
|
|
1076
|
-
wait(
|
|
1077
|
-
return new Promise((
|
|
1078
|
-
window.setTimeout(
|
|
1101
|
+
wait(t) {
|
|
1102
|
+
return new Promise((e) => {
|
|
1103
|
+
window.setTimeout(e, t);
|
|
1079
1104
|
});
|
|
1080
1105
|
}
|
|
1081
|
-
async animateZoomTo(
|
|
1106
|
+
async animateZoomTo(t, e = 600) {
|
|
1082
1107
|
if (!window.google || !this.map || typeof this.map.getZoom != "function" || typeof this.map.setZoom != "function")
|
|
1083
1108
|
return;
|
|
1084
1109
|
const a = this.map.getZoom();
|
|
1085
1110
|
if (!Number.isFinite(a)) {
|
|
1086
|
-
this.map.setZoom(
|
|
1111
|
+
this.map.setZoom(t);
|
|
1087
1112
|
return;
|
|
1088
1113
|
}
|
|
1089
|
-
const
|
|
1090
|
-
if (Math.abs(
|
|
1091
|
-
this.map.setZoom(
|
|
1114
|
+
const s = t - a;
|
|
1115
|
+
if (Math.abs(s) < 0.01) {
|
|
1116
|
+
this.map.setZoom(t);
|
|
1092
1117
|
return;
|
|
1093
1118
|
}
|
|
1094
1119
|
await new Promise((c) => {
|
|
1095
1120
|
const i = performance.now(), l = (h) => 1 - Math.pow(1 - h, 3), d = (h) => {
|
|
1096
|
-
const
|
|
1097
|
-
this.map.setZoom(Math.round(o * 100) / 100),
|
|
1121
|
+
const g = h - i, m = Math.min(g / e, 1), y = l(m), o = a + s * y;
|
|
1122
|
+
this.map.setZoom(Math.round(o * 100) / 100), m < 1 ? requestAnimationFrame(d) : (this.map.setZoom(t), c());
|
|
1098
1123
|
};
|
|
1099
1124
|
requestAnimationFrame(d);
|
|
1100
1125
|
});
|
|
1101
1126
|
}
|
|
1102
|
-
animateMapPan(
|
|
1127
|
+
animateMapPan(t, e, n) {
|
|
1103
1128
|
if (!window.google || !this.map)
|
|
1104
1129
|
return;
|
|
1105
1130
|
this.panAnimationFrame !== null && (cancelAnimationFrame(this.panAnimationFrame), this.panAnimationFrame = null);
|
|
1106
|
-
const
|
|
1107
|
-
if (!
|
|
1108
|
-
this.map.setCenter({ lat:
|
|
1131
|
+
const s = this.map.getCenter();
|
|
1132
|
+
if (!s) {
|
|
1133
|
+
this.map.setCenter({ lat: t, lng: e }), n == null || n();
|
|
1109
1134
|
return;
|
|
1110
1135
|
}
|
|
1111
|
-
const c =
|
|
1112
|
-
const
|
|
1113
|
-
this.map.setCenter({ lat:
|
|
1136
|
+
const c = s.lat(), i = s.lng(), l = t - c, d = e - i, h = 600, g = performance.now(), m = (o) => 1 - Math.pow(1 - o, 3), y = (o) => {
|
|
1137
|
+
const f = o - g, b = Math.min(f / h, 1), x = m(b), C = c + l * x, P = i + d * x;
|
|
1138
|
+
this.map.setCenter({ lat: C, lng: P }), b < 1 ? this.panAnimationFrame = requestAnimationFrame(y) : (this.panAnimationFrame = null, n == null || n());
|
|
1114
1139
|
};
|
|
1115
1140
|
this.panAnimationFrame = requestAnimationFrame(y);
|
|
1116
1141
|
}
|
|
1117
1142
|
static ensureFontAwesome() {
|
|
1118
|
-
if (
|
|
1143
|
+
if (u.fontAwesomeAttached)
|
|
1119
1144
|
return;
|
|
1120
|
-
if (document.querySelector(`link[href="${
|
|
1121
|
-
|
|
1145
|
+
if (document.querySelector(`link[href="${S}"]`)) {
|
|
1146
|
+
u.fontAwesomeAttached = !0;
|
|
1122
1147
|
return;
|
|
1123
1148
|
}
|
|
1124
|
-
const
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
}), document.head.appendChild(
|
|
1149
|
+
const e = document.createElement("link");
|
|
1150
|
+
e.rel = "stylesheet", e.href = S, e.crossOrigin = "anonymous", e.referrerPolicy = "no-referrer", e.addEventListener("load", () => {
|
|
1151
|
+
u.fontAwesomeAttached = !0;
|
|
1152
|
+
}), document.head.appendChild(e);
|
|
1128
1153
|
}
|
|
1129
|
-
createIconElement(
|
|
1130
|
-
const
|
|
1131
|
-
return
|
|
1154
|
+
createIconElement(t) {
|
|
1155
|
+
const e = document.createElement("i");
|
|
1156
|
+
return e.className = t, e.setAttribute("aria-hidden", "true"), e;
|
|
1132
1157
|
}
|
|
1133
|
-
getWhatsappLink(
|
|
1134
|
-
const
|
|
1135
|
-
return
|
|
1158
|
+
getWhatsappLink(t) {
|
|
1159
|
+
const e = t.replace(/\D+/g, "");
|
|
1160
|
+
return e ? `https://wa.me/${e}` : null;
|
|
1136
1161
|
}
|
|
1137
1162
|
};
|
|
1138
|
-
|
|
1139
|
-
let v =
|
|
1163
|
+
r(u, "tag", "rs-map"), r(u, "googleMapsLoaderPromise", null), r(u, "pointsCacheDbPromise", null), r(u, "fontAwesomeAttached", !1);
|
|
1164
|
+
let v = u;
|
|
1140
1165
|
U(v.tag, v);
|
|
1141
1166
|
export {
|
|
1142
1167
|
v as RsMap,
|