image-map-hotspots / shortcode.php

shortcode.php in Image Hotspot – Map Image Annotation 3.8, at shortcode.php

449 lines 23.0 KB

Raw Download Zip

1	<?php
2	global $wpdb;
3	$style_table = $wpdb->prefix . 'imh_6310_style';
4	$font_awesome = imh_6310_get_option('imh_6310_font_awesome_status');
5	$closeIcon = imh_6310_get_option('imh_6310_close_icon');
6	$desktopSize = imh_6310_get_option('imh_6310_desktop_size');
7	$iPadSize = imh_6310_get_option('imh_6310_ipad_size');
8	$mobileSize = imh_6310_get_option('imh_6310_mobile_size');
9
10	$closeIcon = $closeIcon ? $closeIcon : imh_6310_plugin_dir_url . 'assets/images/close.png';
11	$desktopSize = $desktopSize ? $desktopSize : 30;
12	$mobileSize = $mobileSize ? $mobileSize : 20;
13	$iPadSize = $iPadSize ? $iPadSize : $mobileSize;
14
15	$cssData = [];
16	if ($ids) {
17	$styledata = $wpdb->get_row($wpdb->prepare("SELECT * FROM $style_table WHERE id = %d ", $ids), ARRAY_A);
18	if (!$styledata) return;
19	$css = explode("!!##!!", $styledata['css']);
20	$key = explode(",", $css[0]);
21	$value = explode("\|\|##\|\|", $css[1]);
22	$filterKey = [];
23	$filterValue = [];
24	for ($i = 0; $i < count($key); $i++) {
25	$filterKey[] = esc_attr($key[$i]);
26	}
27	for ($i = 0; $i < count($value); $i++) {
28	$filterValue[] = esc_attr($value[$i]);
29	}
30	$cssData = array_combine($filterKey, $filterValue);
31	}
32	$jsonData = isset($cssData['json_data']) ? json_decode(stripslashes(html_entity_decode($cssData['json_data']))) : [];
33	$font_awesome = imh_6310_get_option('imh_6310_font_awesome_status');
34	if ($font_awesome != 1) {
35	wp_enqueue_style('imh-font-awesome-new', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');
36	wp_enqueue_style('imh-font-awesome-old', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/v4-shims.min.css');
37	}
38
39	wp_enqueue_style('imh-6310-owl-carousel', plugins_url('output-common-css.css', __FILE__));
40	include imh_6310_plugin_url . "output-css.php";
41
42	$image_zoom = isset($cssData['zoom_feature']) ? esc_attr($cssData['zoom_feature']) : 0;
43	$tooltip_position = isset($cssData['tooltip_position']) ? esc_attr($cssData['tooltip_position']) : 0;
44	$top_bottom = isset($cssData['top_bottom']) ? esc_attr($cssData['top_bottom']) : 0;
45	$left_right = isset($cssData['left_right']) ? esc_attr($cssData['left_right']) : 0;
46	?>
47
48
49	<div class="imh-6310-annotation-box-wrapper imh-6310-annotation-box-wrapper-<?php echo $ids; ?>">
50	<div class="imh-6310-zoom-buttons" style="display: none;">
51	<img src="<?php echo isset($cssData['zoom_in_icon']) && $cssData['zoom_in_icon'] ? esc_url($cssData['zoom_in_icon']) : imh_6310_plugin_dir_url . 'assets/images/zoom-in.png' ?>" alt="" class="imh-6310-zoom-in">
52	<div class="imh-6310-builder-box-divider"></div>
53	<img src="<?php echo isset($cssData['zoom_out_icon']) && $cssData['zoom_out_icon'] ? esc_url($cssData['zoom_out_icon']) : imh_6310_plugin_dir_url . 'assets/images/zoom-out.png' ?>" alt="" class="imh-6310-zoom-out">
54	</div>
55
56	<div
57	class="imh-6310-annotation-box imh-6310-annotation-box-<?php echo $ids; ?>"
58	data-id="<?php echo $ids; ?>"
59	data-image-zoom="<?php echo $image_zoom == 2 ? 1 : 0; ?>"
60	data-display-type="<?php echo isset($cssData['display_type']) ? $cssData['display_type'] : 0; ?>"
61	data-tooltip-position="<?php echo $tooltip_position; ?>"
62	data-top-bottom="<?php echo $top_bottom; ?>"
63	data-left-right="<?php echo $left_right; ?>">
64	<div class="imh-6310-annotation-box-inner">
65	<img src="<?php echo isset($cssData['main_image']) ? $cssData['main_image'] : '' ?>" class="imh-6310-main-image imh-6310-img" data-imh-cls="imh-6310-main-image imh-6310-img" data-imh-value="<?php echo isset($cssData['main_image']) ? $cssData['main_image'] : '' ?>" alt="<?php echo esc_attr($styledata['name']) ?>" />
66	<?php
67	if ($jsonData) {
68
69	$counter = 1;
70
71	foreach ($jsonData as $js) {
72	if ($js->iconType == 1) {
73	if (!$js->fontAwesomeIcon && !$js->fontAwesomeHoverIcon) {
74	continue;
75	}
76	if (!$js->fontAwesomeIcon) {
77	$fontAwesomeIcon = $js->fontAwesomeHoverIcon;
78	$fontAwesomeHoverIcon = $js->fontAwesomeHoverIcon;
79	} else if (!$js->fontAwesomeHoverIcon) {
80	$fontAwesomeIcon = $js->fontAwesomeIcon;
81	$fontAwesomeHoverIcon = $js->fontAwesomeIcon;
82	} else {
83	$fontAwesomeIcon = $js->fontAwesomeIcon;
84	$fontAwesomeHoverIcon = $js->fontAwesomeHoverIcon;
85	}
86	$points = "
87	<i class='{$fontAwesomeIcon} imh-6310-pin-main-img imh-6310-blinking-{$ids}-{$counter}'></i>
88	<i class='{$fontAwesomeHoverIcon} imh-6310-pin-hover-img imh-6310-blinking-hover-{$ids}-{$counter}'></i>
89	";
90	} else if ($js->iconType == 2) {
91	if (!$js->customFirstImg && !$js->customSecondImg) {
92	continue;
93	} else if (!$js->customFirstImg) {
94	$customFirstImg = $js->customSecondImg;
95	$customSecondImg = $js->customSecondImg;
96	} else if (!$js->customSecondImg) {
97	$customFirstImg = $js->customFirstImg;
98	$customSecondImg = $js->customFirstImg;
99	} else {
100	$customFirstImg = $js->customFirstImg;
101	$customSecondImg = $js->customSecondImg;
102	}
103	$points = "
104	<img src='{$customFirstImg}' class='imh-6310-pin-main-img imh-6310-img imh-6310-blinking-{$ids}-{$counter}' data-imh-cls='imh-6310-pin-main-img imh-6310-img imh-6310-blinking-{$ids}-{$counter}' data-imh-value='{$customFirstImg}' />
105	<img src='{$customSecondImg}' class='imh-6310-pin-hover-img imh-6310-img imh-6310-blinking-hover-{$ids}-{$counter}' data-imh-cls='imh-6310-pin-hover-img imh-6310-img imh-6310-blinking-hover-{$ids}-{$counter}' data-imh-value='{$customSecondImg}' />
106	";
107	} else if ($js->iconType == 3) {
108	if (!$js->customText && !$js->customText) {
109	continue;
110	} else {
111	$customText = $js->customText;
112	}
113	$points = "
114	<div class='imh-6310-customtext imh-6310-blinking-{$ids}-{$counter}'>" . esc_attr($customText) . "</div>
115	";
116	}
117
118	$newObj = new stdClass();
119	$newObj->xPos = $js->xPos;
120	$newObj->yPos = $js->yPos;
121	$newObj->tWidth = $js->tWidth;
122	$newObj->tHeight = isset($js->tHeight) ? $js->tHeight : '';
123	$newObj->selectedTemplate = $js->selectedTemplate;
124
125	$newObj->iconType = $js->iconType;
126
127	$newObj->fontAwesomIconSize = $js->fontAwesomIconSize;
128	$newObj->fontAwesomIconSizeInIpad = $js->fontAwesomIconSizeInIpad;
129	$newObj->fontAwesomIconSizeInMobile = $js->fontAwesomIconSizeInMobile;
130
131	$newObj->iconWidth = $js->iconWidth;
132	$newObj->imgOrIconSizeInIpad = $js->imgOrIconSizeInIpad;
133	$newObj->imgOrIconSizeInMobile = $js->imgOrIconSizeInMobile;
134
135
136
137	$jsonCode = json_encode($newObj);
138	$customCode = htmlentities($jsonCode, ENT_QUOTES, "UTF-8", false);
139	$directLink = '';
140	if ($js->elementType == 4) {
141	$target = $js->openNewTab == '1' ? "target='_blank'" : '';
142	$directLink = "data-link-url='" . imh_6310_validate_url(esc_attr($js->linkURL)) . "' {$target}";
143	} else if ($js->customIconLinkType == '1' && isset($js->linkPosition) && $js->linkPosition == '2') {
144	$target = $js->openNewTab == '1' ? "target='_blank'" : '';
145	$directLink = "data-link-url='" . imh_6310_validate_url(esc_attr($js->linkURL)) . "' {$target}";
146	}
147	$always_show = isset($js->alwaysShow) && $js->alwaysShow == 1 ? 1 : 0;
148	echo "
149	<div data-id='{$counter}' data-always-show='{$always_show}' data-json='{$customCode}' class='imh-6310-drag imh-6310-point-{$ids}-{$counter}' style='visibility: hidden' {$directLink}>
150	<div class='imh-6310-point-icons imh-6310-point-icons-{$ids}-" . esc_attr($counter) . "'>
151	{$points}
152	</div>
153	</div>
154	";
155	imh_6310_load_templates($js, $counter, $ids);
156	// $popupElement = "<div class='imh-6310-hover-content imh-6310-hover-content-{$counter}'>" . . "</div>";
157	// $popupElementJS = "jQuery('body').append(\"{$popupElement}\");";
158
159	$pointCssCode = "
160	.imh-6310-point-{$counter} .imh-6310-tooltip{
161	background: #FFF;
162	color: #000;
163	font-size: 16px;
164	}
165	";
166	if ($js->iconType == 1) {
167	$pointCssCode .= "
168	.imh-6310-point-{$ids}-{$counter} .imh-6310-pin-main-img {
169	color: " . esc_attr($js->fontAwesomeIconColor) . " !important;
170	font-size:" . esc_attr($js->fontAwesomIconSize) . "px !important;
171	}
172	.imh-6310-point-{$ids}-{$counter} .imh-6310-pin-hover-img {
173	color: " . esc_attr($js->fontAwesomeIconHoverColor) . " !important;
174	font-size:" . esc_attr($js->fontAwesomIconSize) . "px !important;
175	}
176	@media screen and (min-width: 100px) and (max-width: 767px) {
177	.imh-6310-point-{$ids}-{$counter} .imh-6310-pin-main-img, .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-hover-img {
178	font-size:" . esc_attr(isset($js->fontAwesomIconSizeInMobile) ? $js->fontAwesomIconSizeInMobile : $js->fontAwesomIconSize) . "px !important;
179	}
180	.imh-6310-point-icons-{$ids}-{$counter}::after{
181	width: " . (esc_attr(isset($js->fontAwesomIconSizeInMobile) ? $js->fontAwesomIconSizeInMobile : $js->fontAwesomIconSize) + 10) . "px !important;
182	height: " . (esc_attr(isset($js->fontAwesomIconSizeInMobile) ? $js->fontAwesomIconSizeInMobile : $js->fontAwesomIconSize) + 10) . "px !important;
183	}
184	}
185	@media screen and (min-width: 768px) and (max-width: 1366px) {
186	.imh-6310-point-{$ids}-{$counter} .imh-6310-pin-main-img, .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-hover-img {
187	font-size:" . esc_attr(isset($js->fontAwesomIconSizeInIpad) ? $js->fontAwesomIconSizeInIpad : $js->fontAwesomIconSize) . "px !important;
188	}
189	.imh-6310-point-icons-{$ids}-{$counter}::after{
190	width: " . (esc_attr(isset($js->fontAwesomIconSizeInIpad) ? $js->fontAwesomIconSizeInIpad : $js->fontAwesomIconSize) + 10) . "px !important;
191	height: " . (esc_attr(isset($js->fontAwesomIconSizeInIpad) ? $js->fontAwesomIconSizeInIpad : $js->fontAwesomIconSize) + 10) . "px !important;
192	}
193	}
194	";
195	if (isset($js->blinkTooltip) && $js->blinkTooltip == 1) {
196	$pointCssCode .= "
197	.imh-6310-point-icons-{$ids}-{$counter} {
198	position: relative;
199	display: block;
200	}
201	.imh-6310-point-icons-{$ids}-{$counter}::after{
202	content: '';
203	position: absolute;
204	width: " . esc_attr($js->fontAwesomIconSize + 10) . "px;
205	height: " . esc_attr($js->fontAwesomIconSize + 10) . "px;
206	box-shadow: 0 0 1px 3px white;
207	animation: pulse-animation-{$ids}-{$counter} 2s infinite;
208	display: block;
209	border-radius: 50%;
210	transform: translate(-50%, -50%);
211	top: 50%;
212	left: 50%;
213	pointer-events: none;
214	}
215
216	@keyframes pulse-animation-{$ids}-{$counter} {
217	0% {
218	box-shadow: 0 0 0 0px {$js->glowColor};
219	}
220	100% {
221	box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
222	}
223	}
224	";
225	}
226	} else if ($js->iconType == 2) {
227	$pointCssCode .= "
228	.imh-6310-point-{$ids}-{$counter} .imh-6310-pin-main-img {
229	width:" . esc_attr($js->imgOrIconSize) . "px !important;
230	height: " . esc_attr($js->imgOrIconSize) . "px !important;
231	border-radius: 50%;
232	}
233	.imh-6310-point-{$ids}-{$counter} .imh-6310-pin-hover-img {
234	width:" . esc_attr($js->imgOrIconSize) . "px !important;
235	height: " . esc_attr($js->imgOrIconSize) . "px !important;
236	border-radius: 50%;
237	}
238	@media screen and (min-width: 100px) and (max-width: 767px) {
239	.imh-6310-point-{$ids}-{$counter} .imh-6310-pin-main-img, .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-hover-img {
240	width:" . esc_attr(isset($js->imgOrIconSizeInMobile) ? $js->imgOrIconSizeInMobile : $js->imgOrIconSize) . "px !important;
241	height: " . esc_attr(isset($js->imgOrIconSizeInMobile) ? $js->imgOrIconSizeInMobile : $js->imgOrIconSize) . "px !important;
242	}
243	}
244	@media screen and (min-width: 768px) and (max-width: 1366px) {
245	.imh-6310-point-{$ids}-{$counter} .imh-6310-pin-main-img, .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-hover-img {
246	width:" . esc_attr(isset($js->imgOrIconSizeInIpad) ? $js->imgOrIconSizeInIpad : $js->imgOrIconSize) . "px !important;
247	height: " . esc_attr(isset($js->imgOrIconSizeInIpad) ? $js->imgOrIconSizeInIpad : $js->imgOrIconSize) . "px !important;
248	}
249	}
250	";
251	if (isset($js->blinkTooltip) && $js->blinkTooltip == 1) {
252	$pointCssCode .= "
253	.imh-6310-point-icons-{$ids}-{$counter} {
254	position: relative;
255	display: block;
256	}
257	.imh-6310-point-icons-{$ids}-" . esc_attr($counter) . "::after {
258	content: '';
259	position: absolute;
260	width: " . esc_attr($js->imgOrIconSize + 10) . "px;
261	height: " . esc_attr($js->imgOrIconSize + 10) . "px;
262	box-shadow: 0 0 1px 3px white;
263	animation: pulse-animation-{$ids}-{$counter} 2s infinite;
264	display: block;
265	border-radius: 50%;
266	transform: translate(-50%, -50%);
267	top: 50%;
268	left: 50%;
269	pointer-events: none;
270	}
271
272	@keyframes pulse-animation-{$ids}-{$counter} {
273	0% {
274	box-shadow: 0 0 0 0px {$js->glowColor};
275	}
276	100% {
277	box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
278	}
279	}
280	";
281	}
282	} else if ($js->iconType == 3) {
283	$pointCssCode .= "
284	.imh-6310-point-{$ids}-{$counter} .imh-6310-customtext {
285	font-size:" . esc_attr($js->customTextSize) . "px !important;
286	line-height:" . esc_attr($js->customTextSize) . "px;
287	color: " . esc_attr($js->customTextColor) . " !important;
288	background-color:" . esc_attr($js->customTextBgColor) . " !important;
289	padding: 5px 10px;
290	}
291	";
292	if (isset($js->blinkTooltip) && $js->blinkTooltip == 1) {
293	$pointCssCode .= ".imh-6310-point-icons-{$ids}-{$counter} {
294	animation: pulse-animation-{$ids}-{$counter} 2s infinite;
295	}
296
297	@keyframes pulse-animation-{$ids}-{$counter} {
298	0% {
299	box-shadow: 0 0 0 0px {$js->glowColor};
300	}
301	100% {
302	box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
303	}
304	}";
305	}
306	}
307
308	if ($image_zoom == 2) {
309	if(isset($cssData['display_device'])){
310	if($cssData['display_device'] == 1){
311	$pointCssCode .= "@media screen and (max-width: 767px) {.imh-6310-annotation-box-{$ids} .imh-6310-annotation-box-inner{ cursor: grab;}}";
312	} else if($cssData['display_device'] == 2){
313	$pointCssCode .= ".imh-6310-annotation-box-{$ids} .imh-6310-annotation-box-inner{ cursor: grab;}@media screen and (max-width: 767px) {.imh-6310-annotation-box-{$ids} .imh-6310-annotation-box-inner{ cursor: default;}}";
314	} else if($cssData['display_device'] == 3){
315	$pointCssCode .= ".imh-6310-annotation-box-{$ids} .imh-6310-annotation-box-inner{ cursor: grab;}";
316	}
317	}
318
319	$pointCssCode .= "
320	.imh-6310-hover-content-{$ids}-{$counter} img{
321	cursor: pointer;
322	}
323	";
324	}
325
326
327
328	wp_register_style("imh-6310-template-" . esc_attr($counter) . "-css", "");
329	wp_enqueue_style("imh-6310-template-" . esc_attr($counter) . "-css");
330	wp_add_inline_style("imh-6310-template-" . esc_attr($counter) . "-css", $pointCssCode);
331	if($counter === 4) break;
332	$counter++;
333	}
334	}
335
336	$customCSS = $cssData['custom_css'];
337
338	$selectedKey = isset($cssData['icon_position']) ? $cssData['icon_position'] : 'right-top';
339	$background = isset($cssData['icon_background']) ? esc_attr($cssData['icon_background']) : 'rgba(0, 0, 0, 0.9)';
340	$buttonPosition = "display: " . (isset($cssData['zoom_feature']) && $cssData['zoom_feature'] == 2 && $cssData['display_device'] != 1 ? 'flex' : 'none') . " !important;
341	flex-direction: column;
342	align-items: center;
343	gap: 5px;
344	position: absolute;
345	z-index: 9999;
346	background: {$background};
347	padding: 5px;
348	border-radius: 6px;";
349	$buttonPositionMobile = 'top: 10px; right: 10px;';
350	$buttonImage = "position: relative;
351	display: block;
352	opacity: .8;
353	padding: 3px;
354	";
355	$buttonExtra = "";
356
357	if($selectedKey === 'right-top'){
358	$buttonPosition .= "top: 15px; right: 15px;";
359	} else if($selectedKey === 'right-bottom'){
360	$buttonPosition .= "bottom: 15px; right: 15px;";
361	} else if($selectedKey === 'left-top'){
362	$buttonPosition .= "top: 15px; left: 15px;";
363	} else if($selectedKey === 'left-bottom'){
364	$buttonPosition .= "bottom: 15px; left: 15px;";
365	} else{
366	$buttonPosition = "display: " . (isset($cssData['zoom_feature']) && $cssData['zoom_feature'] == 2 && $cssData['display_device'] != 1 ? 'flex' : 'none') . " !important;
367	justify-content: " . (isset($cssData['icon_position']) ? $cssData['icon_position'] : 'flex-start') . ";
368	margin-bottom: 20px;";
369	$buttonImage = "margin: 0 10px;";
370	$buttonExtra = ".imh-6310-annotation-box-wrapper-{$ids} .imh-6310-builder-box-divider{display: none !important;}";
371
372	$buttonPositionMobile = '';
373	}
374
375	$customCSS .= "
376	.imh-6310-close-button{
377	width: {$desktopSize}px;
378	height: {$desktopSize}px;
379	background-image: url('{$closeIcon}');
380	right: -" . ($desktopSize / 2) . "px;
381	top: -" . ($desktopSize / 2) . "px;
382	background-size: cover;
383	}
384	.imh-6310-close-button-mobile{
385	display: none;
386	}
387	.imh-6310-annotation-box-wrapper-{$ids} .imh-6310-zoom-buttons{
388	{$buttonPosition}
389	}
390	.imh-6310-annotation-box-wrapper-{$ids} .imh-6310-zoom-buttons img{
391	width: " . (isset($cssData['desktop_icon_size']) ? $cssData['desktop_icon_size'] : '30') . "px;
392	height: " . (isset($cssData['desktop_icon_size']) ? $cssData['desktop_icon_size'] : '30') . "px;
393	cursor: pointer;
394	{$buttonImage}
395	}
396	{$buttonExtra}
397	.imh-6310-annotation-box-wrapper-{$ids} .imh-6310-zoom-buttons img:hover{
398	opacity: 1;
399	}
400	@media screen and (min-width: 100px) and (max-width: 767px) {
401	.imh-6310-close-button{
402	width: {$mobileSize}px;
403	height: {$mobileSize}px;
404	right: calc(.5% + ".($mobileSize / 2)."px);
405	top: -" . ($mobileSize / 2) . "px;
406	background-size: cover;
407	}
408	.imh-6310-close-button-mobile{
409	display: block;
410	}
411	}
412	@media screen and (min-width: 768px) and (max-width: 1366px) {
413	.imh-6310-close-button{
414	width: {$iPadSize}px;
415	height: {$iPadSize}px;
416	right: calc(.5% + ".($iPadSize / 2)."px);
417	top: -" . ($iPadSize / 2) . "px;
418	background-size: cover;
419	}
420	.imh-6310-close-button-mobile{
421	display: block;
422	}
423	}
424	@media screen and (min-width: 100px) and (max-width: 1366px) {
425	.imh-6310-annotation-box-wrapper-{$ids} .imh-6310-zoom-buttons{
426	display: " . (isset($cssData['zoom_feature']) && $cssData['zoom_feature'] == 2 && $cssData['display_device'] != 2 ? 'flex' : 'none') . " !important;
427	{$buttonPositionMobile}
428	}
429	.imh-6310-annotation-box-wrapper-{$ids} .imh-6310-zoom-buttons img{
430	width: " . (isset($cssData['mobile_icon_size']) ? $cssData['mobile_icon_size'] : '25') . "px;
431	height: " . (isset($cssData['mobile_icon_size']) ? $cssData['mobile_icon_size'] : '25') . "px;
432	margin: 0 5px;
433	}
434	}
435	";
436
437
438
439	wp_register_style("imh-6310-custom-code-" . esc_attr($ids) . "-css", "");
440	wp_enqueue_style("imh-6310-custom-code-" . esc_attr($ids) . "-css");
441	wp_add_inline_style("imh-6310-custom-code-" . esc_attr($ids) . "-css", $customCSS);
442	?>
443	</div>
444	</div>
445	</div>
446	<?php
447	wp_enqueue_script('imh-6310-output', plugins_url('assets/js/imh-main-output-file-pro.js', __FILE__), array('jquery'), TRUE);
448	wp_enqueue_script('imh-6310-zoom-in-out-drag', plugins_url('assets/js/zoom-in-out-drag.js', __FILE__), array('jquery'), TRUE);
449	?>