| 1 |
<div id="imh-6310-add-point" class="imh-6310-modal imh-6310-hide"> |
| 2 |
<div class="imh-6310-modal-content imh-6310-modal-lg"> |
| 3 |
<div class="imh-6310-modal-header"> |
| 4 |
Marker Settings <span class="imh-6310-pro-text">In the free version, you can add a maximum of four tooltip/pointer.</span> |
| 5 |
<div class="imh-6310-close">×</div> |
| 6 |
</div> |
| 7 |
|
| 8 |
<div class="toggle-wrap"> |
| 9 |
<ul class="toggle-tabs"> |
| 10 |
<li data-id="1" class="active-tab">Marker</li> |
| 11 |
<li data-id="2">Content</li> |
| 12 |
<li data-id="3">link</li> |
| 13 |
</ul> |
| 14 |
|
| 15 |
<div class="imh-6310-modal-body-form"> |
| 16 |
<div class="tabbed-content-wrap"> |
| 17 |
<div class="imh-6310-tab imh-6310-tab-1"> |
| 18 |
<table border="0" width="100%" cellpadding="10" cellspacing="0"> |
| 19 |
<tr> |
| 20 |
<td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Marker Type:</label></td> |
| 21 |
<td> |
| 22 |
<input type="radio" name='icontype' class='imh-6310_icon_type' value='1' checked /> Font Awesome Icon |
| 23 |
<input type="radio" name='icontype' class="imh-6310_icon_type" value='2' /> Custom Icon |
| 24 |
<input type="radio" name='icontype' class='imh-6310_icon_type' value='3' /> Text |
| 25 |
</td> |
| 26 |
</tr> |
| 27 |
<tr height="40px" class="imh-6310-form-icon imh-6310-marker imh-6310-marker-type-1"> |
| 28 |
<td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Icons:</label></td> |
| 29 |
<td> |
| 30 |
<input type="text" name="icons" id="icons-1" class="imh-6310-form-input lg icons-1" placeholder="fas fa-map-marker-alt" data-value="fas fa-map-marker-alt" readonly=""> |
| 31 |
<div class="imh-6310-plus-icons" data-id='icons-1'><i class="fas fa-plus-circle"></i></div> |
| 32 |
<div class="imh-6310-minus-icons" data-id='icons-1'><i class="fas fa-minus-circle"></i></div> |
| 33 |
<div class="imh-selected-icon icons-1-selected"> <i class="fas fa-map-marker-alt"></i></div> |
| 34 |
</td> |
| 35 |
</tr> |
| 36 |
<tr height="40px" class="imh-6310-form-icon imh-6310-marker imh-6310-marker-type-1"> |
| 37 |
<td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Hover Icons:</label></td> |
| 38 |
<td> |
| 39 |
<input type="text" name="hovericons" id="icons-2" class="imh-6310-form-input lg icons-2" placeholder="fas fa-map-marker-alt" data-value="fas fa-map-marker-alt" readonly=""> |
| 40 |
<div class="imh-6310-plus-icons" data-id='icons-2'><i class="fas fa-plus-circle"></i></div> |
| 41 |
<div class="imh-6310-minus-icons" data-id='icons-2'><i class="fas fa-minus-circle"></i></div> |
| 42 |
<div class="imh-selected-icon icons-2-selected"> <i class="fas fa-map-marker-alt"></i></div> |
| 43 |
</td> |
| 44 |
</tr> |
| 45 |
<tr height="40px" class="imh-6310-form-icon imh-6310-marker imh-6310-marker-type-1"> |
| 46 |
<td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Icon Color:</label></td> |
| 47 |
<td> |
| 48 |
<input type="text" name="imh_6310_fontawesome_icon_color" class="imh_6310_fontawesome_icon_color imh-6310-form-input imh_6310_color_picker" data-format="rgb" data-opacity="0.8" data-value="rgba(255, 28, 3, 0.99)"> |
| 49 |
</td> |
| 50 |
</tr> |
| 51 |
<tr height="40px" class="imh-6310-form-icon imh-6310-marker imh-6310-marker-type-1"> |
| 52 |
<td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Icon Hover Color:</label></td> |
| 53 |
<td> |
| 54 |
<input type="text" name="imh_6310_fontawesome_icon_hover_color" class="imh-6310-form-input imh_6310_color_picker imh_6310_fontawesome_icon_hover_color" data-opacity="0.8" data-format="rgb" data-value="rgba(255, 28, 3, 0.99)"> |
| 55 |
</td> |
| 56 |
</tr> |
| 57 |
<tr height="40px" class="imh-6310-form-icon imh-6310-marker imh-6310-marker-type-1"> |
| 58 |
<td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Icon size in desktop:</label></td> |
| 59 |
<td> |
| 60 |
<input type="number" min='0' max="" name="imh-6310_icon_size" class="imh-6310-form-input imh-6310_icon_size" data-value="30"> |
| 61 |
</td> |
| 62 |
</tr> |
| 63 |
<tr height="40px" class="imh-6310-form-icon imh-6310-marker imh-6310-marker-type-1"> |
| 64 |
<td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Icon size in iPad:</label></td> |
| 65 |
<td> |
| 66 |
<input type="number" min='0' max="" name="imh-6310_icon_size_in_ipad" class="imh-6310-form-input imh-6310_icon_size_in_ipad" data-value="20"> |
| 67 |
</td> |
| 68 |
</tr> |
| 69 |
<tr height="40px" class="imh-6310-form-icon imh-6310-marker imh-6310-marker-type-1"> |
| 70 |
<td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Icon size in Mobile:</label></td> |
| 71 |
<td> |
| 72 |
<input type="number" min='0' max="" name="imh-6310_icon_size_in_mobile" class="imh-6310-form-input imh-6310_icon_size_in_mobile" data-value="20"> |
| 73 |
</td> |
| 74 |
</tr> |
| 75 |
|
| 76 |
<tr class="imh-6310-marker imh-6310-marker-type-2 imh-6310-hide"> |
| 77 |
<td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Custom Icon/Image:</label></td> |
| 78 |
<td> |
| 79 |
<input type="text" name="image" id="imh-6310-image-edit-1" class="imh-6310-form-input imh-6310-image-edit-1" value=""> |
| 80 |
<input type="button" value="Upload Image" class="imh-6310-btn-default imh-6310-icon-upload custom-icon-image" data-id="imh-6310-image-edit-1"> |
| 81 |
</td> |
| 82 |
</tr> |
| 83 |
<tr class="imh-6310-marker imh-6310-marker-type-2 imh-6310-hide"> |
| 84 |
<td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Custom Hover Icon/Image:</label></td> |
| 85 |
<td> |
| 86 |
<input type="text" name="hoverimage" id="imh-6310-image-edit-2" class="imh-6310-form-input imh-6310-image-edit-2" value=""> |
| 87 |
<input type="button" value="Upload Hover Image" class="imh-6310-btn-default imh-6310-icon-upload custom-icon-image" data-id="imh-6310-image-edit-2"> |
| 88 |
</td> |
| 89 |
</tr> |
| 90 |
<tr class="imh-6310-marker imh-6310-marker-type-2 imh-6310-hide"> |
| 91 |
<td class='imh-6310-width-150'><label class="imh-6310-form-label">Image / icon Size in Desktop:</label></td> |
| 92 |
<td> |
| 93 |
<input type="number" min='0' max="" name="img_or_icon_size" class="imh-6310-form-input img_or_icon_size" data-value="30"> |
| 94 |
</td> |
| 95 |
</tr> |
| 96 |
<tr class="imh-6310-marker imh-6310-marker-type-2 imh-6310-hide"> |
| 97 |
<td class='imh-6310-width-150'><label class="imh-6310-form-label">Image / icon Size in iPad:</label></td> |
| 98 |
<td> |
| 99 |
<input type="number" min='0' max="" name="img_or_icon_size_in_ipad" class="imh-6310-form-input img_or_icon_size_in_ipad" data-value="25"> |
| 100 |
</td> |
| 101 |
</tr> |
| 102 |
<tr class="imh-6310-marker imh-6310-marker-type-2 imh-6310-hide"> |
| 103 |
<td class='imh-6310-width-150'><label class="imh-6310-form-label">Image / icon Size in Mobile:</label></td> |
| 104 |
<td> |
| 105 |
<input type="number" min='0' max="" name="img_or_icon_size_in_mobile" class="imh-6310-form-input img_or_icon_size_in_mobile" data-value="20"> |
| 106 |
</td> |
| 107 |
</tr> |
| 108 |
<tr height="40px" class="imh-6310-marker imh-6310-marker-type-3 imh-6310-hide"> |
| 109 |
<td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Text:</label></td> |
| 110 |
<td> |
| 111 |
<input type="text" name="icons" id="imh-6310_custom_enter_text" class="imh-6310-form-input lg imh-6310_custom_enter_text" data-value="Hover here"> |
| 112 |
</td> |
| 113 |
</tr> |
| 114 |
<tr class="imh-6310-marker imh-6310-marker-type-3 imh-6310-hide"> |
| 115 |
<td class='imh-6310-width-150'><b>Font Size:</b></td> |
| 116 |
<td> |
| 117 |
<input type="number" min="0" class="imh-6310-form-input imh_6310_custom_text_font_size" data-value="16" step="1" /> |
| 118 |
</td> |
| 119 |
</tr> |
| 120 |
<tr class="imh-6310-marker imh-6310-marker-type-3 imh-6310-hide"> |
| 121 |
<td><b>Font Color:</b></td> |
| 122 |
<td> |
| 123 |
<input type="text" class="imh-6310-form-input imh_6310_color_picker imh_6310_custom_text_font_color" data-format="rgb" data-value="rgb(255, 255, 255)"> |
| 124 |
</td> |
| 125 |
</tr> |
| 126 |
<tr class="imh-6310-marker imh-6310-marker-type-3 imh-6310-hide"> |
| 127 |
<td><b>Background Color:</b></td> |
| 128 |
<td> |
| 129 |
<input type="text" class="imh-6310-form-input imh_6310_color_picker imh_6310_custom_text_font_bg_color" data-format="rgb" data-opacity="0.8" data-value="rgba(2, 59, 92, 0.99)"> |
| 130 |
</td> |
| 131 |
</tr> |
| 132 |
</table> |
| 133 |
<table border="0" width="100%" cellpadding="10" cellspacing="0"> |
| 134 |
<tr> |
| 135 |
<td class='imh-6310-width-150'><b>Blinking Tooltip:</b></td> |
| 136 |
<td> |
| 137 |
<input type="radio" name='blinktype' class='imh-6310_blink_type' value='1' checked /> Yes |
| 138 |
<input type="radio" name='blinktype' class="imh-6310_blink_type" value='2' /> No |
| 139 |
</td> |
| 140 |
</tr> |
| 141 |
<tr height="40px" class="imh-6310-form-icon imh_6310_icon_glow_color"> |
| 142 |
<td class='imh-6310-width-150'><b>Color:</b><br> |
| 143 |
</td> |
| 144 |
<td> |
| 145 |
<input type="text" name="imh-6310-form-input imh_6310_color_picker imh_6310_fontawesome_icon_glow_color" class="imh-6310-form-input imh_6310_color_picker imh_6310_fontawesome_icon_glow_color" data-format="rgb" data-opacity="0.8" data-value="rgb(255, 0, 0)"> |
| 146 |
</td> |
| 147 |
</tr> |
| 148 |
<tr> |
| 149 |
<td class='imh-6310-width-150'><b>Always Visible:</b></td> |
| 150 |
<td> |
| 151 |
<input type="radio" name='always_show' class='imh-6310_always_show' value='1' /> Yes |
| 152 |
<input type="radio" name='always_show' class="imh-6310_always_show" value='2' checked /> No |
| 153 |
</td> |
| 154 |
</tr> |
| 155 |
</table> |
| 156 |
</div> |
| 157 |
<div class="imh-6310-tab imh-6310-tab-2"> |
| 158 |
<table border="0" width="100%" cellpadding="10" cellspacing="0"> |
| 159 |
<tr> |
| 160 |
<td class='imh-6310-width-150'><label class="imh-6310-form-label">Element Type:</label></td> |
| 161 |
<td> |
| 162 |
<input class='imh-6310-section-select' value='1' type="radio" name="popover_new" checked />Tooltip |
| 163 |
<input class='imh-6310-section-select' value='2' type="radio" name="popover_new">Embedded code |
| 164 |
<input class='imh-6310-section-select' value='3' type="radio" name="popover_new">Custom code |
| 165 |
<input class='imh-6310-section-select' value='5' type="radio" name="popover_new">WooCommerce Products |
| 166 |
<input class='imh-6310-section-select' value='4' type="radio" name="popover_new">Direct Link |
| 167 |
<input class='imh-6310-section-select' value='6' type="radio" name="popover_new">ShortCode |
| 168 |
</td> |
| 169 |
</tr> |
| 170 |
|
| 171 |
</table> |
| 172 |
<div class="imh-6310-templates imh-6310-hide"> |
| 173 |
<table border="0" width="100%" cellpadding="10" cellspacing="0"> |
| 174 |
|
| 175 |
<tr class=""> |
| 176 |
<td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture"> Select Template:</label></td> |
| 177 |
<td> |
| 178 |
<div class="imh-6310-tooltip_img_section"> |
| 179 |
<div class="imh-6310-tooltip-img imh-6310-type-1" data-id='01'> |
| 180 |
<img src="<?php echo imh_6310_plugin_dir_url . 'assets/images/1.png' ?>" data-template='template-01' alt="First Img"> |
| 181 |
</div> |
| 182 |
<div class="imh-6310-tooltip-img imh-6310-type-2 " data-id='02'> |
| 183 |
<img src="<?php echo imh_6310_plugin_dir_url . 'assets/images/2.png' ?>" alt="First Img"> |
| 184 |
</div> |
| 185 |
<div class="imh-6310-tooltip-img imh-6310-type-1" data-id='03'> |
| 186 |
<img src="<?php echo imh_6310_plugin_dir_url . 'assets/images/3.png' ?>" alt="First Img"> |
| 187 |
</div> |
| 188 |
<div class="imh-6310-tooltip-img imh-6310-type-1" data-id='04'> |
| 189 |
<img src="<?php echo imh_6310_plugin_dir_url . 'assets/images/4.png' ?>" alt="First Img"> |
| 190 |
</div> |
| 191 |
<div class="imh-6310-tooltip-img imh-6310-type-1 " data-id='05'> |
| 192 |
<img src="<?php echo imh_6310_plugin_dir_url . 'assets/images/5.png' ?>" alt="First Img"> |
| 193 |
</div> |
| 194 |
</div> |
| 195 |
</td> |
| 196 |
</tr> |
| 197 |
</table> |
| 198 |
</div> |
| 199 |
<div class="imh-6310-tooltip-link imh-6310-hide"> |
| 200 |
<table border="0" width="100%" cellpadding="10" cellspacing="0"> |
| 201 |
<tr> |
| 202 |
<td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Hover Content:</label></td> |
| 203 |
<td> |
| 204 |
<input type="text" data-value="Tooltip text" class="imh_6310_link_text"> |
| 205 |
</td> |
| 206 |
</tr> |
| 207 |
|
| 208 |
<tr> |
| 209 |
<td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Open in Popup:</label></td> |
| 210 |
<td> |
| 211 |
<input name="imh-6310-open-popup" class="imh-6310-open-popup" value='2' type="radio" checked>Popup Embedded |
| 212 |
<input name="imh-6310-open-popup" class="imh-6310-open-popup" value='3' type="radio" checked>Popup Custom Code |
| 213 |
<input name="imh-6310-open-popup" class="imh-6310-open-popup" value='1' type="radio">No |
| 214 |
</td> |
| 215 |
</tr> |
| 216 |
<tr class="tooltip-embedded imh-6310-hide"> |
| 217 |
<td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture"> Enter Embedded Code:</label></td> |
| 218 |
<td> |
| 219 |
<textarea class="imh_6310_custom_code_popup-html" name="imh_6310_custom_code_popup" placeholder="" cols="90" rows="5" ></textarea> |
| 220 |
</td> |
| 221 |
</tr> |
| 222 |
<tr class="tooltip-custom-code imh-6310-hide"> |
| 223 |
<td class='imh-6310-width-150'><b>Popup Max Width</b></td> |
| 224 |
<td> |
| 225 |
<input type="text" name="imh_6310_custom_popup_width" id="imh_6310_custom_popup_width" class="imh_6310_custom_popup_width" placeholder="Custom popup width" > |
| 226 |
</td> |
| 227 |
</tr> |
| 228 |
<tr class="tooltip-custom-code imh-6310-hide"> |
| 229 |
<td class='imh-6310-width-150'><b>HTML Code</b></td> |
| 230 |
<td> |
| 231 |
<textarea name="imh_6310_popup_custom_html" id="imh_6310_popup_custom_html" class="imh_6310_popup_custom_html" cols="90" rows="5" data-value=''></textarea> |
| 232 |
<a href="https://wpmart.org/image-hotspot-templates-01-10/" target="_blank" class='imh-6310-custom-code-url'>Get build in custom code for tooltip / popup</a> |
| 233 |
</td> |
| 234 |
</tr> |
| 235 |
<tr class="tooltip-custom-code imh-6310-hide"> |
| 236 |
<td class='imh-6310-width-150'><b>CSS Code</b></td> |
| 237 |
<td> |
| 238 |
<textarea name="imh_6310_popup_custom_css" id="imh_6310_popup_custom_css" class="imh_6310_popup_custom_css" cols="90" rows="5" data-value=''></textarea> |
| 239 |
</td> |
| 240 |
</tr> |
| 241 |
|
| 242 |
</table> |
| 243 |
</div> |
| 244 |
<?php include imh_6310_plugin_url . "settings/template-settings.php"; ?> |
| 245 |
</div> |
| 246 |
|
| 247 |
<div class="imh-6310-tab imh-6310-tab-3"> |
| 248 |
<table border="0" width="100%" cellpadding="10" cellspacing="0"> |
| 249 |
<tr class='imh-6310_link-type'> |
| 250 |
<td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Do you Link Title?:</label></td> |
| 251 |
<td> |
| 252 |
<input class='imh-6310_link_title_type' value='1' type="radio" name="link_title">Yes |
| 253 |
<input class='imh-6310_link_title_type' value='2' type="radio" name="link_title" checked>No |
| 254 |
</td> |
| 255 |
</tr> |
| 256 |
<tr class="imh-6310_link"> |
| 257 |
<td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Link with:</label></td> |
| 258 |
<td> |
| 259 |
<input name="imh-6310-link-position" class="imh-6310-link-position" value='1' type="radio" checked>Tooltip |
| 260 |
<input name="imh-6310-link-position" class="imh-6310-link-position" value='2' type="radio">Pointer |
| 261 |
</td> |
| 262 |
</tr> |
| 263 |
<tr class="imh-6310_link"> |
| 264 |
<td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Title Link Url:</label></td> |
| 265 |
<td> |
| 266 |
<input type="text" class="imh_6310_custom_link_url" data-value="www.wpmart.org"> |
| 267 |
</td> |
| 268 |
</tr> |
| 269 |
<tr class="imh-6310_link"> |
| 270 |
<td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Open new tab:</label></td> |
| 271 |
<td> |
| 272 |
<input name="imh-6310-open-new-tab" class="imh-6310-open-new-tab" value='1' type="radio" checked>Yes |
| 273 |
<input name="imh-6310-open-new-tab" class="imh-6310-open-new-tab" value='2' type="radio">No |
| 274 |
</td> |
| 275 |
</tr> |
| 276 |
</table> |
| 277 |
</div> |
| 278 |
|
| 279 |
<div class="imh-6310-tab imh-6310-tab-5"> |
| 280 |
<br> |
| 281 |
<div class="imh-6310-selected-product-list"></div> |
| 282 |
<div class="imh-6310-form-label" style="margin-top: 15px !important;">Choose Product</div> |
| 283 |
<?php |
| 284 |
add_action('plugins_loaded', function() { |
| 285 |
if (class_exists('WooCommerce')) { |
| 286 |
$args = array( |
| 287 |
'limit' => -1, // Set to -1 to get all products |
| 288 |
); |
| 289 |
$products = wc_get_products($args); |
| 290 |
if (!empty($products)) { |
| 291 |
echo '<div class="imh-6310-search-container">'; |
| 292 |
echo '<input type="text" id="imh-6310-product-search" placeholder="Type to search for products">'; |
| 293 |
echo '<div class="imh-6310-suggestion-list imh-6310-hidden">'; |
| 294 |
foreach ($products as $product) { |
| 295 |
echo "<div class='imh-6310-product-list imh-6310-hidden' data-product-id='{$product->id}'>{$product->get_name()}</div>"; |
| 296 |
} |
| 297 |
echo '</div>'; |
| 298 |
echo '<div class="imh-6310-no-product imh-6310-hidden">No product found.</div>'; |
| 299 |
echo '</div>'; |
| 300 |
} |
| 301 |
} else { |
| 302 |
echo 'WooCommerce is not active.'; |
| 303 |
} |
| 304 |
}); |
| 305 |
?> |
| 306 |
</div> |
| 307 |
</div> |
| 308 |
</div> |
| 309 |
|
| 310 |
</div> |
| 311 |
<div class="imh-6310-modal-form-footer"> |
| 312 |
<button type="button" name="close" class="imh-6310-btn-danger imh-6310-btn-close imh-6310-pull-right">Close</button> |
| 313 |
<input type="submit" name="submit" class="imh-6310-btn-primary imh-6310-pull-right imh-6310-margin-right-10 imh-6310-add-place-save" value="Save" /> |
| 314 |
</div> |
| 315 |
<br class="imh-6310-clear" /> |
| 316 |
</div> |
| 317 |
</div> |
| 318 |
|
| 319 |
<!-- Icon Modal Start --> |
| 320 |
<div id="imh_6310_social_icon" class="imh-6310-modal imh-6310-display-none"> |
| 321 |
<div class="imh-6310-modal-content imh-6310-modal-xl"> |
| 322 |
<input type="hidden" name="rearrange_list" id="rearrange_list" value="" /> |
| 323 |
<div class="imh-6310-modal-header"> |
| 324 |
<span class="imh-6310-action-button">Choose your Icon</span> |
| 325 |
<input type="text" id="icon-filter" class="imh-6310-form-input" placeholder="Search Icon" /> |
| 326 |
<span class="imh-6310-font-awesome-close">×</span> |
| 327 |
</div> |
| 328 |
<div class="imh-6310-modal-body-form"> |
| 329 |
<ul class="imh-6310-choose-icon"> |
| 330 |
<?php echo imh_6310_fa_icon_list('li', '</li>'); ?> |
| 331 |
</ul> |
| 332 |
</div> |
| 333 |
<div class="imh-6310-modal-form-footer"> |
| 334 |
<button type="button" name="close" id="imh-6310-font-icon-close" class="imh-6310-btn-danger imh-6310-pull-right">Close</button> |
| 335 |
</div> |
| 336 |
<br class="imh-6310-clear" /> |
| 337 |
</div> |
| 338 |
</div> |
