https://www.eifelsteig.de/_assets/1798f66a72c0609b2ee5b404d10475ff…/Structures/TourMap.a6171e5068304265a15a.js

1/******/ (() => { // webpackBootstrap
2/******/ 	"use strict";
3// This entry needs to be wrapped in an IIFE because it needs to be isolated against other entry modules.
4(() => {
5// extracted by mini-css-extract-plugin
6
7})();
8
9// This entry needs to be wrapped in an IIFE because it needs to be isolated against other entry modules.
10(() => {
11
12;// ./packages/portal/Resources/Private/Components/Assistants/Shared/Scripts/Classes/json-request.ts
13window.imx = window.imx || {};
14window.imx.jsonrequest = window.imx.jsonrequest || {};
15class JsonRequest {
16  request(url) {
17    if (!window.imx.jsonrequest[url]) {
18      window.imx.jsonrequest[url] = fetch(url).then(response => {
19        return response.json();
20      });
21    }
22    return window.imx.jsonrequest[url];
23  }
24}
25;// ./packages/portal/Resources/Private/Components/Assistants/Shared/Scripts/Util/dispatch-custom-event.ts
26/**
27 * Creates and dispatches a custom event, that can be used to loosely couple things together.
28 */
29function dispatchCustomEvent(target, name, data) {
30  const event = new CustomEvent(name, {
31    detail: data || {}
32  });
33  target.dispatchEvent(event);
34}
35;// ./packages/portal/Resources/Private/Components/Assistants/Shared/Scripts/Util/load-style.ts
36window.imx = window.imx || {};
37window.imx.styleloader = window.imx.styleloader || {};
38function loadStyle(file) {
39  window.imx.styleloader[file] = window.imx.styleloader[file] || new Promise((resolve, reject) => {
40    if (document.querySelector(`link[href*="${file}"]`)) {
41      resolve(file);
42      return;
43    }
44    const link = document.createElement('link');
45    link.href = file;
46    link.rel = 'stylesheet';
47    link.onload = () => resolve(file);
48    link.onerror = () => reject(new Error(`Style load error for ${file}`));
49    document.head.appendChild(link);
50  });
51  return window.imx.styleloader[file];
52}
53;// ./packages/portal/Resources/Private/Components/Assistants/Shared/Scripts/Util/load-script.ts
54window.imx = window.imx || {};
55window.imx.scriptloader = window.imx.scriptloader || {};
56function loadScript(file) {
57  window.imx.scriptloader[file] = window.imx.scriptloader[file] || new Promise((resolve, reject) => {
58    if (document.querySelector(`script[src*="${file}"]`)) {
59      resolve(file);
60      return;
61    }
62    const script = document.createElement('script');
63    script.setAttribute('src', file);
64    script.onload = () => resolve(file);
65    script.onerror = () => reject(new Error(`Script load error for ${file}`));
66    document.body.appendChild(script);
67  });
68  return window.imx.scriptloader[file];
69}
70;// ./packages/portal/Resources/Private/Components/Assistants/Shared/Scripts/Classes/content-loader.ts
71/**
72 * LICENSE
73 *
74 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
75 * It is not allowed to make any kinds of modifications, nor must it be copied,
76 * or published without explicit permission. Misuse will lead to persecution.
77 *
78 * @copyright  2020 infomax websolutions GmbH
79 * @link       https://www.infomax-online.de
80 * @author     Benjamin Hofmann <[email protected]>
81 * @since      2020-02-17
82 */
83
84
85
86
87/**
88 *
89 *
90 * @copyright  2020 infomax websolutions GmbH
91 * @link       https://www.infomax-online.de
92 */
93class ContentLoader {
94  constructor() {
95    this.request = new JsonRequest();
96  }
97  load(url) {
98    const promise = this.request.request(url).then(json => {
99      return Promise.all([new Promise(resolve => resolve(json.content)), this.injectCss(json.assets.css), this.injectJavaScript(json.assets.js)]);
100    }).then(data => {
101      return data[0];
102    });
103    Promise.all([promise]).finally(() => {
104      dispatchCustomEvent(document, 'ContentLoader.load');
105    });
106    return promise;
107  }
108  injectCss(files) {
109    const promises = [];
110    files.filter(file => {
111      return !document.querySelector(`link[href*="${file}"]`);
112    }

112).forEach(file => {
113      promises.push(loadStyle(file));
114    });
115    return Promise.all(promises);
116  }
117  injectJavaScript(files) {
118    const promises = [];
119    files.filter(file => {
120      return !document.querySelector(`script[src*="${file}"]`);
121    }).forEach(file => {
122      promises.push(loadScript(file));
123    });
124    return Promise.all(promises);
125  }
126}
127;// ./packages/portal/Resources/Private/Components/Assistants/Shared/Scripts/Classes/base-url.ts
128class BaseUrl {
129  getBaseUrl() {
130    const pathSegments = window.location.pathname.split('/').filter(Boolean);
131    const possibleLangCode = pathSegments[0];
132    const isLangCode = possibleLangCode && /^[a-z]{2,3}$/.test(possibleLangCode);
133    const basePath = isLangCode ? `/${possibleLangCode}` : '/';
134    return new URL(`${basePath}`, window.location.origin).toString();
135  }
136}
137;// ./packages/portal/Resources/Private/Components/Structures/TourMap/Scripts/base/_init.ts
138
139
140const loader = new ContentLoader();
141const baseUrl = new BaseUrl();
142document.querySelectorAll('.tourMap').forEach(tourMap => {
143  const mapWrapper = tourMap.querySelector('.tourMap__map');
144  const markerButtons = tourMap.querySelectorAll('[data-markers]');
145  const infoboard = tourMap.querySelector('.tourMap__infoboard');
146  const infoboardCloser = tourMap.querySelector('.tourMap__infoboard__closer');
147  const infoboardContent = tourMap.querySelector('.tourMap__infoboard__content');
148  const mql = window.matchMedia('(max-width: 1000px)');
149  const coordinates = JSON.parse(tourMap.dataset?.coordinates ?? '[]');
150  let activeMarker;
151  let currentMarkers = [];
152  let currentCoordinates = [...coordinates];
153  const getPaddingOptions = () => {
154    let top = 40;
155    if (markerButtons.length > 0) {
156      top = mql.matches ? 100 : 128;
157    }
158    return {
159      top: top,
160      right: 40,
161      bottom: 40,
162      left: 40
163    };
164  };
165  const showMarkersOnMap = (button, map, util) => {
166    markerButtons.forEach(other => other.setAttribute('aria-selected', other === button ? 'true' : 'false'));
167    currentMarkers.forEach(marker => marker.remove());
168    currentMarkers = [];
169    currentCoordinates = [...coordinates];
170    JSON.parse(button.dataset?.markers ?? '[]').forEach(markerData => {
171      const marker = util.createDefaultMarker(markerData).addTo(map);
172      currentMarkers.push(marker);
173      currentCoordinates.push(marker.getLngLat());
174      const markerElement = marker.getElement();
175      markerElement.addEventListener('click', () => {
176        showInfoboard(markerData.ident, util).then(() => {
177          util.highlightMarker(marker);
178          activeMarker = marker;
179        });
180      });
181      markerElement.addEventListener('keydown', event => {
182        if (event.key === 'Enter' || event.keyCode === 13) {
183          showInfoboard(markerData.ident, util).then(() => {
184            util.highlightMarker(marker);
185            activeMarker = marker;
186          });
187        } else if (event.key === 'Escape' || event.keyCode === 27) {
188          if (!infoboard.hasAttribute('hidden')) {
189            closeInfoboard(util);
190          }
191        }
192      });
193    });
194    util.fitBounds(currentCoordinates);
195  };
196  const showInfoboard = (ident, util) => {
197    infoboard.removeAttribute('hidden');
198    infoboard.setAttribute('data-loading', '1');
199    if (activeMarker) {
200      util.lowlightMarker(activeMarker);
201      activeMarker = undefined;
202    }
203    const url = new URL(`${baseUrl.getBaseUrl()}/action/teaser`, window.location.origin);
204    url.searchParams.append('ident', ident);
205    url.searchParams.append('parent', tourMap.dataset.parent);
206    return loader.load(url.toString()).then(response => {
207      infoboard.setAttribute('data-loading', '0');
208      infoboardContent.innerHTML = response.html;
209    });
210  };
211  const closeInfoboard = util => {
212    infoboard.setAttribute('hidden', 'hidden');
213    infoboard.setAttribute('data-loading', '0');
214    infoboardContent.innerHTML = '';
215    if (activeMarker) {
216      util.lowlightMarker(activeMarker);
217      activeMarker = undefined;
218    }
219  };
220  document.addEventListener(`map.${mapWrapper.dataset.id}.ready`, event => {
221    const map = event.detail.map;
222    const util = event.detail.util;
223    map.gl.scrollZoom.disable();
224    map.gl.setPadding(getPaddingOptions());
225    util.createPolyline(coordinates).addTo(map);
226    util.fitBounds(coordinates);
227    mql.addEventListener('change', () => {
228      map.gl.setPadding(getPaddingOptions());
229      util.fitBounds(coordinates);
230    });
231    if (markerButtons.length > 0) {
232      showMarkersOnMap(markerButtons[0], map.gl, util);
233      markerButtons.forEach(button => button.addEventListener('click', () => {
234        closeInfoboard(util);
235        showMarkersOnMap(button, map.gl, util);
236      }));
237      infoboardCloser.addEventListener('click', () => {
238        closeInfoboard(util);
239      });
240    }
241  });
242});
243})();
244
245/******/ })()
246;