image-map-hotspots / shortcode.php

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

130 lines 6.9 KB

Raw Download Zip

1	<?php
2	global $wpdb;
3	$style_table = $wpdb->prefix . 'imh_6310_style';
4
5
6	$cssData = [];
7	if ($ids) {
8	$styledata = $wpdb->get_row($wpdb->prepare("SELECT * FROM $style_table WHERE id = %d ", $ids), ARRAY_A);
9	if(!$styledata) return;
10	$css = explode("!!##!!", $styledata['css']);
11	$key = explode(",", $css[0]);
12	$value = explode("\|\|##\|\|", $css[1]);
13	$filterKey = [];
14	$filterValue = [];
15	for ($i = 0; $i < count($key); $i++) {
16	$filterKey[] = esc_attr($key[$i]);
17	}
18	for ($i = 0; $i < count($value); $i++) {
19	$filterValue[] = esc_attr($value[$i]);
20	}
21	$cssData = array_combine($filterKey, $filterValue);
22	}
23	$jsonData = isset($cssData['json_data']) ? json_decode(stripslashes(html_entity_decode($cssData['json_data']))) : [];
24
25	wp_enqueue_style('imh-6310-font-awesome-5-0-13', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css');
26	wp_enqueue_style('imh-6310-font-awesome-4-07', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
27	wp_enqueue_style('imh-6310-owl-carousel', plugins_url('output-common-css.css', __FILE__));
28	include imh_6310_plugin_url . "output-css.php";
29	?>
30	<style>.imh-6310-point-icons{display: none}</style>
31	<div class="imh-6310-annotation-box-wrapper imh-6310-annotation-box-wrapper-<?php echo $ids; ?>">
32	<div class="imh-6310-zoom-buttons" style="display: none;">
33	<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">
34	<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">
35	</div>
36	<div class="imh-6310-annotation-box imh-6310-annotation-box-<?php echo $ids; ?>" data-id="<?php echo $ids; ?>">
37	<div class="imh-6310-annotation-box-inner">
38	<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'] : '' ?>" />
39	<?php
40	if ($jsonData) {
41
42	$counter = 1;
43
44	foreach ($jsonData as $js) {
45	$jsonCode = json_encode($js);
46
47	if (!$js->fontAwesomeIcon && !$js->fontAwesomeHoverIcon) {
48	continue;
49	}
50	if (!$js->fontAwesomeIcon) {
51	$fontAwesomeIcon = $js->fontAwesomeHoverIcon;
52	$fontAwesomeHoverIcon = $js->fontAwesomeHoverIcon;
53	}
54	else if (!$js->fontAwesomeHoverIcon) {
55	$fontAwesomeIcon = $js->fontAwesomeIcon;
56	$fontAwesomeHoverIcon = $js->fontAwesomeIcon;
57	} else {
58	$fontAwesomeIcon = $js->fontAwesomeIcon;
59	$fontAwesomeHoverIcon = $js->fontAwesomeHoverIcon;
60	}
61	$points = "
62	<i class='{$fontAwesomeIcon} imh-6310-pin-main-img'></i>
63	<i class='{$fontAwesomeHoverIcon} imh-6310-pin-hover-img'></i>
64	";
65
66
67	echo "
68	<div data-id='{$counter}' data-json='{$jsonCode}' class='imh-6310-drag imh-6310-point-{$ids}-{$counter}' style='display: none'>
69	<div class='imh-6310-point-icons'>
70	{$points}
71	</div>
72	</div>
73	";
74	imh_6310_load_templates($js, $counter, $ids);
75	$pointCssCode = "
76	.imh-6310-point-{$ids}-{$counter} .imh-6310-tooltip{
77	background: #FFF;
78	color: #000;
79	font-size: 16px;
80	}
81	";
82
83	$pointCssCode .= "
84	.imh-6310-point-{$ids}-{$counter} .imh-6310-pin-main-img {
85	color: ".esc_attr($js->fontAwesomeIconColor)." !important;
86	font-size:".esc_attr($js->fontAwesomIconSize)."px !important;
87	}
88	.imh-6310-point-{$ids}-{$counter} .imh-6310-pin-hover-img {
89	color: ".esc_attr($js->fontAwesomeIconHoverColor)." !important;
90	font-size:".esc_attr($js->fontAwesomIconSize)."px !important;
91	}
92	.imh-6310-annotation-box-wrapper-{$ids} .imh-6310-zoom-buttons{
93	display: ".(isset($cssData['zoom_feature']) && $cssData['zoom_feature'] == 2 && $cssData['display_device'] != 1 ? 'flex' : 'none')." !important;
94	justify-content: ".(isset($cssData['icon_position']) ? $cssData['icon_position'] : 'flex-start').";
95	margin-bottom: 20px;
96	}
97	.imh-6310-annotation-box-wrapper-{$ids} .imh-6310-zoom-buttons img{
98	width: ".(isset($cssData['desktop_icon_size']) ? $cssData['desktop_icon_size'] : '30')."px;
99	height: ".(isset($cssData['desktop_icon_size']) ? $cssData['desktop_icon_size'] : '30')."px;
100	cursor: pointer;
101	margin: 0 10px;
102	}
103	@media screen and (max-width: 767px) {
104	.imh-6310-annotation-box-wrapper-{$ids} .imh-6310-zoom-buttons{
105	display: ".(isset($cssData['zoom_feature']) && $cssData['zoom_feature'] == 2 && $cssData['display_device'] != 2 ? 'flex' : 'none')." !important;
106	}
107	.imh-6310-annotation-box-wrapper-{$ids} .imh-6310-zoom-buttons img{
108	width: ".(isset($cssData['mobile_icon_size']) ? $cssData['mobile_icon_size'] : '25')."px;
109	height: ".(isset($cssData['mobile_icon_size']) ? $cssData['mobile_icon_size'] : '25')."px;
110	margin: 0 10px;
111	}
112	}
113	";
114	wp_register_style("imh-6310-template-" . esc_attr($counter) . "-css", "");
115	wp_enqueue_style("imh-6310-template-" . esc_attr($counter) . "-css");
116	wp_add_inline_style("imh-6310-template-" . esc_attr($counter) . "-css", $pointCssCode);
117	$counter++;
118	if($counter == 7){
119	break;
120	}
121	}
122	}
123	?>
124	</div>
125	</div>
126	</div>
127	<?php
128	wp_enqueue_script('imh-6310-output', plugins_url('assets/js/main-output-file.js', __FILE__), array('jquery'), TRUE);
129	wp_enqueue_script('imh-6310-zoom-in-out-drag', plugins_url('assets/js/zoom-in-out-drag.js', __FILE__), array('jquery'), TRUE);
130	?>