https://www.hotel-schillingshof.com/wp-content/plugins/klickbare-karten/assets/js/frontend.js?ver=1.0.0

1/* Klickbare Karten – Frontend JS */
2/* global jQuery, kkConfigs */
3
4(function($) {
5	'use strict';
6
7	function isMobile() {
8		return window.matchMedia('(max-width: 767px)').matches;
9	}
10
11	function recalcAreas(uid, verortungen) {
12		const $img = $('#kk-img-'+uid);
13		if(!$img.length) {
14			return;
15		}
16
17		const natW = $img[0].naturalWidth || $img.width();
18		const natH = $img[0].naturalHeight || $img.height();
19		const dispW = $img.width();
20		const dispH = $img.height();
21		const scaleX = dispW / natW;
22		const scaleY = dispH / natH;
23		let markerW = 20;
24		let markerH = 30;
25
26		$('#kk-mapdef-'+uid+' area').each(function() {
27			const idx = parseInt($(this).data('index'), 10);
28			const v = verortungen[idx];
29			if(!v) {
30				return;
31			}
32			const cx = (v.x / 100) * natW * scaleX;
33			const cy = (v.y / 100) * natH * scaleY;
34			$(this).attr('coords', [
35				Math.round(cx-markerW),
36				Math.round(cy-markerH),
37				Math.round(cx+markerW),
38				Math.round(cy+markerH)
39			].join(','));
40		});
41	}
42
43	function initInstance(cfg) {
44		const uid = cfg.uid;
45		const verortungen = cfg.verortungen;
46		const $wrapper = $('#'+uid);
47		const $modal = $('#kk-modal-'+uid);
48		const $headline = $modal.find('.kk-modal-headline');
49		const $body = $modal.find('.kk-modal-body');
50		const $hiddenData = $wrapper.find('.kk-hidden-data');
51
52		function setupAreas() {
53			if(isMobile()) {
54				return;
55			}
56			const $img = $('#kk-img-'+uid);
57			if($img[0] && $img[0].complete) {
58				recalcAreas(uid, verortungen);
59			}
60			else {
61				$img.on('load.kk', function() {
62					recalcAreas(uid, verortungen);
63				});
64			}
65		}
66
67		setupAreas();
68
69		$(window).on('resize.kk_'+uid, function() {
70			if(!isMobile()) {
71				recalcAreas(uid, verortungen);
72			}
73		});
74
75		function openModal(idx) {
76			const v = verortungen[idx];
77			if(!v) {
78				return;
79			}
80			const content = $hiddenData.find('[data-index="'+idx+'"]').html() || '';
81			$headline.text(v.titel || '');
82			$body.html(content);
83			$modal.addClass('kk-open');
84			setTimeout(function() {
85				$modal.find('.kk-modal-close').focus();
86			}, 60);
87		}
88
89		function closeModal() {
90			$modal.removeClass('kk-open');
91		}
92
93		$wrapper.find('map area').on('click', function(e) {
94			e.preventDefault();
95			const idx = parseInt($(this).data('index'), 10);
96			openModal(idx);
97		});
98
99		const $svg = $('#kk-svg-'+uid);
100
101		$wrapper.find('map area').on('mouseenter', function() {
102			const idx = $(this).data('index');

103			$svg.find('[data-index="'+idx+'"]').addClass('kk-hover');
104		}).on('mouseleave', function() {
105			$svg.find('.kk-marker').removeClass('kk-hover');
106		});
107
108		$modal.find('.kk-modal-close').on('click', closeModal);
109
110		$modal.on('click', function(e) {
111			if($(e.target).is($modal)) {
112				closeModal();
113			}
114		});
115
116		$(document).on('keydown.kk_'+uid, function(e) {
117			if(e.key === 'Escape' && $modal.hasClass('kk-open')) {
118				closeModal();
119			}
120		});
121
122		$wrapper.find('.kk-mobile-toggle-btn').on('click', function() {
123			const targetId = $(this).data('target');
124			const $list = $('#'+targetId);
125			const isOpen = $list.hasClass('kk-open');
126			$list.toggleClass('kk-open');
127			$(this).text(isOpen ? 'Infotexte anzeigen' : 'Infotexte ausblenden');
128		});
129
130		$wrapper.find('.kk-mobile-item-toggle').on('click', function() {
131			const $btn = $(this);
132			const $content = $btn.siblings('.kk-mobile-item-content');
133			const open = $btn.hasClass('kk-item-open');
134			$btn.toggleClass('kk-item-open', !open);
135			$content.toggleClass('kk-open', !open);
136		});
137	}
138
139	$(function() {
140		if(!window.kkConfigs || !window.kkConfigs.length) {
141			return;
142		}
143		window.kkConfigs.forEach(function(cfg) {
144			initInstance(cfg);
145		});
146	});
147
148}(jQuery));