PluginProbe
Image Hotspot – Map Image Annotation / 2.6
Image Hotspot – Map Image Annotation v2.6
3.8 3.7 3.6 trunk 1.0 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 1.9 2.0 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 3.0 All 30 releases
image-map-hotspots / assets / js / json-data.js

json-data.js in Image Hotspot – Map Image Annotation 2.6, at assets/js/json-data.js

432 lines 16.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 function generateJSON(selector = "#imh-6310-add-point ") {
2 let myObj = {};
3 let myCSS = {};
4 let elementType = "1";
5
6 myObj.iconType = 1;
7 myObj.fontAwesomeIcon = jQuery(selector + ".icons-1").val();
8 myObj.fontAwesomeHoverIcon = jQuery(selector + ".icons-2").val();
9 myObj.fontAwesomeIconColor = jQuery(
10 selector + ".imh_6310_fontawesome_icon_color"
11 ).val();
12 myObj.fontAwesomeIconHoverColor = jQuery(
13 selector + ".imh_6310_fontawesome_icon_hover_color"
14 ).val();
15 myObj.fontAwesomIconSize = jQuery(selector + ".imh-6310_icon_size").val();
16 myObj.fontAwesomIconSizeInMobile = jQuery(
17 selector + ".imh-6310_icon_size_in_mobile"
18 ).val();
19 myObj.imgOrIconSize = jQuery(selector + ".img_or_icon_size").val();
20 myObj.imgOrIconSizeInMobile = jQuery(
21 selector + ".img_or_icon_size_in_mobile"
22 ).val();
23 myObj.customFirstImg = jQuery(selector + ".imh-6310-image-edit-1").val();
24 myObj.customSecondImg = jQuery(selector + ".imh-6310-image-edit-2").val();
25 myObj.customText = jQuery(selector + ".imh-6310_custom_enter_text").val();
26 myObj.customTextSize = jQuery(
27 selector + ".imh_6310_custom_text_font_size"
28 ).val();
29 myObj.customTextColor = jQuery(
30 selector + ".imh_6310_custom_text_font_color"
31 ).val();
32 myObj.customTextBgColor = jQuery(
33 selector + ".imh_6310_custom_text_font_bg_color"
34 ).val();
35 myObj.customeCode = jQuery(
36 selector + `textarea[name='imh_6310_custom_code']`
37 ).val();
38 myObj.blinkTooltip = jQuery(selector + ".imh-6310_blink_type:checked").val();
39 myObj.glowColor = jQuery(selector + ".imh_6310_fontawesome_icon_glow_color").val();
40
41 // check element type
42
43 myObj.selectedTemplate = jQuery(selector + ".imh-6310-active").attr(
44 "data-id"
45 );
46
47 myObj.popupEmbedded = jQuery(selector + ".popup_embedded").val();
48 myObj.selectedTemplate = "01";
49
50 myObj.popupCustomHtml = jQuery(selector + `textarea[name='imh_6310_popup_custom_html']`).val()
51 ;
52 myObj.popupCustomCss = jQuery(selector + `textarea[name='imh_6310_popup_custom_css']`).val()
53 ;
54 myObj.popupCustomCodeWidth = jQuery(
55 selector + ".imh_6310_custom_popup_width"
56 ).val();
57 // check selector type
58
59 myObj.linkText = jQuery(selector + ".imh_6310_link_text").val();
60 myObj.linkURL = jQuery(selector + ".imh_6310_custom_link_url").val();
61 myObj.openNewTab = jQuery(selector + ".imh-6310-open-new-tab:checked").val();
62 myObj.openPopup = jQuery(selector + ".imh-6310-open-popup:checked").val();
63 myObj.openDesImg = jQuery(selector + ".imh-6310-des-img").val();
64 myObj.openDescription = jQuery(
65 selector + ".imh-6310-tooltip_discription"
66 ).val();
67 myObj.openDesFontSize = jQuery(
68 selector + ".imh-6310-tooltip_discription_font_size"
69 ).val();
70 myObj.openDesFontColor = jQuery(
71 selector + ".imh-6310-tooltip_discription_font_color"
72 ).val();
73 myObj.customButtonLinkType = jQuery(
74 selector + ".imh-6310_button_link:checked"
75 ).val();
76 myObj.customButtonText = jQuery(selector + ".imh-6310-button-text").val();
77 myObj.customButtonUrl = jQuery(selector + ".imh-6310-button-url").val();
78 myObj.customButtonTextSize = jQuery(
79 selector + ".imh_6310_button_text_size"
80 ).val();
81 myObj.customButtonTextColor = jQuery(
82 selector + ".imh_6310_button_text_color"
83 ).val();
84 myObj.customButtonBgcolor = jQuery(
85 selector + ".imh_6310_button_bg_color"
86 ).val();
87 myObj.tempCommonFontSize = jQuery(
88 selector + ".imh_6310_template_font_size"
89 ).val();
90 myObj.tempCommonFontColor = jQuery(
91 selector + ".imh_6310_template_font_color"
92 ).val();
93 myObj.tempCommonBgColor = jQuery(
94 selector + ".imh_6310_template_bg_color"
95 ).val();
96 myObj.tem02EmbeddedLink = jQuery(
97 selector + ".imh-6310-embedded_code_link"
98 ).val();
99
100 let customCode = jQuery(
101 selector + `textarea[name='imh-6310-custome_html']`
102 ).val();
103 customCode = customCode.replace(/='/g, '="');
104 customCode = customCode.replace(/'>/g, '">');
105 myObj.customeHtmlCode = customCode;
106
107 myObj.customeCssCode = jQuery(
108 selector + `textarea[name='imh-6310-custome_css']`
109 ).val();
110 myObj.customeCodePopup = jQuery(
111 selector + `textarea[name='imh_6310_custom_code_popup']`
112 ).val();
113 myObj.customIconLinkType = jQuery(
114 selector + ".imh-6310_link_title_type:checked"
115 ).val();
116 myObj.elementType = elementType;
117
118
119 myCSS.styleCSS = `
120 .imh-6310-drag[data-id='${window.currentPoint}'] .imh-6310-pin-main-img{
121 color: ${myObj.fontAwesomeIconColor} !important;
122 font-size:${myObj.fontAwesomIconSize}px !important;
123 }
124 .imh-6310-drag[data-id='${window.currentPoint}'] .imh-6310-pin-hover-img{
125 color: ${myObj.fontAwesomeIconHoverColor} !important;
126 font-size:${myObj.fontAwesomIconSize}px !important;
127 }
128
129 `;
130
131
132
133 //imh_6310_reset_fields();
134 return [myObj, myCSS];
135 }
136
137 function setJsonData() {
138 let jsonData = jQuery(`[data-id='${window.currentPoint}']`).attr("data-json");
139 jsonData = JSON.parse(jsonData);
140 if (!jsonData || !jsonData.elementType) {
141 return;
142 }
143 imh_6310_reset_fields();
144
145 jQuery("#imh-6310-edit-point .imh-6310-section-select:last").trigger("click");
146 jQuery("#imh-6310-edit-point .imh-6310-section-select:first").trigger(
147 "click"
148 );
149
150 jQuery(`
151 #imh-6310-edit-point .toggle-tabs li:first-child,
152 #imh-6310-edit-point .imh-6310_icon_type[value='${jsonData.iconType}'],
153 #imh-6310-edit-point .imh-6310_popover_type[value='${jsonData.mouseType}'],
154 #imh-6310-edit-point .imh-6310_blink_type[value='${jsonData.blinkTooltip}'],
155 #imh-6310-edit-point .imh-6310-section-select[value='${jsonData.elementType}'],
156 #imh-6310-edit-point .imh-6310_link_title_type[value='${jsonData.customIconLinkType}'],
157 #imh-6310-edit-point .imh-6310-open-popup[value='${jsonData.openPopup}'],
158 #imh-6310-edit-point .imh-6310-open-new-tab[value='${jsonData.openNewTab}'],
159 #imh-6310-edit-point .imh-6310_button_link[value='${jsonData.customButtonLinkType}']
160 `).trigger("click");
161
162 jQuery(".imh-6310-tooltip-img").removeClass("imh-6310-active");
163 jQuery(".imh-6310-open-new-tab").prop("selectedIndex", jsonData.openNewTab);
164
165 jQuery(".imh-6310-open-popup").prop("selectedIndex", jsonData.openPopup);
166 if (Number(jsonData.openPopup) == 1) {
167 jQuery(".tooltip-embedded").addClass("imh-6310-hide");
168 } else {
169 jQuery(".tooltip-embedded").removeClass("imh-6310-hide");
170 }
171 jQuery(".imh-6310-templates").removeClass("imh-6310-hide");
172 jQuery(".imh-6310-active").removeClass("imh-6310-active");
173 jQuery(
174 `.imh-6310-templates, [data-id='${jsonData.selectedTemplate}']`
175 ).removeClass("imh-6310-hide");
176
177 jQuery(".icons-1").val(jsonData.fontAwesomeIcon);
178 jQuery(".icons-2").val(jsonData.fontAwesomeHoverIcon);
179 jQuery(".imh_6310_fontawesome_icon_color").val(jsonData.fontAwesomeIconColor);
180 jQuery(".imh_6310_fontawesome_icon_color")
181 .closest("div")
182 .find(".minicolors-swatch-color")
183 .css({
184 "background-color": jsonData.fontAwesomeIconColor,
185 });
186 jQuery(".imh_6310_fontawesome_icon_hover_color").val(
187 jsonData.fontAwesomeIconHoverColor
188 );
189 jQuery(".imh_6310_fontawesome_icon_hover_color")
190 .closest("div")
191 .find(".minicolors-swatch-color")
192 .css({
193 "background-color": jsonData.fontAwesomeIconHoverColor,
194 });
195 jQuery(".imh-6310_icon_size").val(jsonData.fontAwesomIconSize);
196 jQuery(".imh-6310_icon_size_in_mobile").val(
197 jsonData.fontAwesomIconSizeInMobile !== undefined
198 ? jsonData.fontAwesomIconSizeInMobile
199 : jsonData.fontAwesomIconSize
200 );
201 jQuery(".img_or_icon_size").val(jsonData.imgOrIconSize);
202 jQuery(".img_or_icon_size_in_mobile").val(
203 jsonData.imgOrIconSizeInMobile !== undefined
204 ? jsonData.imgOrIconSizeInMobile
205 : jsonData.imgOrIconSize
206 );
207 jQuery(".imh-6310-image-edit-1").val(jsonData.customFirstImg);
208 jQuery(".imh-6310-image-edit-2").val(jsonData.customSecondImg);
209
210 jQuery(".imh-6310_custom_enter_text").val(jsonData.customText);
211 jQuery(".imh_6310_custom_text_font_size").val(jsonData.customTextSize);
212 jQuery(".imh_6310_custom_text_font_color").val(jsonData.customTextColor);
213 jQuery(".imh_6310_fontawesome_icon_glow_color").val(jsonData.glowColor);
214 jQuery(".imh_6310_fontawesome_icon_glow_color")
215 .closest("div")
216 .find(".minicolors-swatch-color")
217 .css({
218 "background-color": jsonData.glowColor,
219 });
220
221 jQuery(".imh_6310_custom_text_font_color")
222 .closest("div")
223 .find(".minicolors-swatch-color")
224 .css({
225 "background-color": jsonData.customTextColor,
226 });
227 jQuery(".imh_6310_custom_text_font_bg_color").val(jsonData.customTextBgColor);
228 jQuery(".imh_6310_custom_text_font_bg_color")
229 .closest("div")
230 .find(".minicolors-swatch-color")
231 .css({
232 "background-color": jsonData.customTextBgColor,
233 });
234
235 jQuery(`textarea[name='imh_6310_custom_code']`).val(jsonData.customeCode);
236 jQuery(`textarea[name='imh_6310_custom_code_popup']`).val(
237 jsonData.customeCodePopup
238 );
239 jQuery(`textarea[name='imh-6310-custome_html']`).val(
240 jsonData.customeHtmlCode
241 );
242 jQuery(`textarea[name='imh-6310-custome_css']`).val(jsonData.customeCssCode);
243 jQuery(".imh_6310_link_text").val(jsonData.linkText);
244 jQuery(".imh_6310_custom_link_url").val(jsonData.linkURL);
245 jQuery(".imh-6310-des-img").val(jsonData.openDesImg);
246 jQuery(".imh-6310-tooltip_discription").val(jsonData.openDescription);
247 jQuery(".imh-6310-tooltip_discription_font_size").val(
248 jsonData.openDesFontSize
249 );
250 jQuery(".imh-6310-tooltip_discription_font_color").val(
251 jsonData.openDesFontColor
252 );
253 jQuery(".imh-6310-tooltip_discription_font_color")
254 .closest("div")
255 .find(".minicolors-swatch-color")
256 .css({
257 "background-color": jsonData.openDesFontColor,
258 });
259 jQuery(".tooltip_discription_font_color")
260 .closest("div")
261 .find(".minicolors-swatch-color")
262 .css({
263 "background-color": jsonData.openDesFontColor,
264 });
265 jQuery(".imh-6310-button-text").val(jsonData.customButtonText);
266 jQuery(".imh-6310-button-url").val(jsonData.customButtonUrl);
267 jQuery(".imh_6310_button_text_size").val(jsonData.customButtonTextSize);
268 jQuery(".imh_6310_button_text_color").val(jsonData.customButtonTextColor);
269 jQuery(".imh_6310_button_text_color")
270 .closest("div")
271 .find(".minicolors-swatch-color")
272 .css({
273 "background-color": jsonData.customButtonTextColor,
274 });
275 jQuery(".imh_6310_button_bg_color").val(jsonData.customButtonBgcolor);
276 jQuery(".imh_6310_button_bg_color")
277 .closest("div")
278 .find(".minicolors-swatch-color")
279 .css({
280 "background-color": jsonData.customButtonBgcolor,
281 });
282 jQuery(".popup_embedded").val(jsonData.popupEmbedded);
283 jQuery(`textarea[name='imh_6310_popup_custom_html']`).val(
284 jsonData.popupCustomHtml
285 );
286 jQuery(`textarea[name='imh_6310_popup_custom_css']`).val(
287 jsonData.popupCustomCss
288 );
289 jQuery(".imh_6310_custom_popup_width").val(jsonData.popupCustomCodeWidth);
290 jQuery(".imh-6310-tooltip-link").removeClass("imh-6310-hide");
291 jQuery(".imh_6310_textarea").removeClass("imh-6310-hide");
292
293 jQuery(".imh-6310-form-02").removeClass("imh-6310-hide");
294 jQuery(".imh-6310-form-02").removeClass("imh-6310-hide");
295
296 if (jsonData.selectedTemplate != "") {
297 jQuery(
298 `.imh-6310-tooltip-img[data-id='${jsonData.selectedTemplate}']`
299 ).addClass("imh-6310-active");
300 jQuery(
301 `.imh-6310-tooltip-img[data-id='${jsonData.selectedTemplate}']`
302 ).trigger("click");
303
304 //set common
305 jQuery(".imh_6310_template_font_size").val(jsonData.tempCommonFontSize);
306 jQuery(".imh_6310_template_font_color").val(jsonData.tempCommonFontColor);
307 jQuery(".imh_6310_template_font_color")
308 .closest("div")
309 .find(".minicolors-swatch-color")
310 .css({
311 "background-color": jsonData.tempCommonFontColor,
312 });
313 jQuery(".imh_6310_template_bg_color").val(jsonData.tempCommonBgColor);
314 jQuery(".imh_6310_template_bg_color")
315 .closest("div")
316 .find(".minicolors-swatch-color")
317 .css({
318 "background-color": jsonData.tempCommonBgColor,
319 });
320
321 //Uncommon fields
322
323 }
324 if(jsonData.elementType == 1) {
325 jQuery("#imh-6310-edit-point .imh-6310-tooltip-link").removeClass(
326 "imh-6310-hide"
327 );
328 jQuery(
329 "#imh-6310-edit-point .imh_6310_custom_template, .imh_6310_template_embedded"
330 ).addClass("imh-6310-hide");
331 }
332 }
333
334 function imh_6310_reset_fields() {
335 jQuery(".ima-imh-6310_icon_type[value='1']").prop("checked", true);
336 jQuery(".ima-imh-6310_popover_type[value='1']").prop("checked", true);
337 jQuery(".imh-6310-tooltip-img").removeClass("imh-6310-active");
338 jQuery(
339 ".imh-6310-form, .imh-6310-tooltip-link, .imh-6310-templates, .tooltip-embedded"
340 ).addClass("imh-6310-hide");
341 jQuery(".imh-6310-embedded_code_link").val("");
342 let fieldList =
343 ".icons-1, .icons-2, .imh-6310-image-edit-1, .imh-6310-image-edit-2, .imh-6310_custom_enter_text, .imh_6310_custom_text_font_size, .imh_6310_custom_text_font_color, .imh_6310_custom_text_font_bg_color, .imh_6310_fontawesome_icon_color, .imh_6310_fontawesome_icon_hover_color, .imh-6310_icon_size, .imh-6310_icon_size_in_mobile, .img_or_icon_size, .img_or_icon_size_in_mobile, .imh_6310_link_text, .imh_6310_custom_link_url, .popup_embedded, .imh_6310_template_font_color, .imh_6310_template_bg_color, .imh_6310_template_font_size, .imh-6310-embedded_code_link, .imh-6310-tooltip_discription, .imh-6310-tooltip_discription_font_size, .imh_6310_fontawesome_icon_glow_color, .imh-6310-tooltip_discription_font_color, .imh-6310-button-text, .imh-6310-button-url, .imh_6310_button_text_color, .imh_6310_button_bg_color, .imh_6310_button_text_size, .imh-6310-custome_html, .imh-6310-custome_css, .imh_6310_custom_popup_width, .imh_6310_popup_custom_html, .imh_6310_popup_custom_css";
344 fieldList = fieldList.split(",");
345 // setTimeout(function () {
346 for (let i = 0; i < fieldList.length; i++) {
347 let selector = jQuery(fieldList[i].trim());
348 if (
349 selector.attr("data-value") !== undefined ||
350 selector.attr("data-value") !== null
351 ) {
352 selector.val(selector.attr("data-value"));
353 selector.attr("data-defaultValue", selector.attr("data-value"));
354 selector.text(selector.attr("data-value"));
355 if (selector.closest("div").find(".minicolors-swatch-color")) {
356 selector
357 .closest("div")
358 .find(".minicolors-swatch-color")
359 .css({
360 "background-color": selector.attr("data-value"),
361 });
362 }
363 }
364 }
365 // }, 100);
366 jQuery(".imh-6310-section-select, .imh-6310-open-new-tab").prop(
367 "selectedIndex",
368 0
369 );
370
371 jQuery(".imh_6310_textarea").addClass("imh-6310-hide");
372
373 setTimeout(function() {
374 if (jQuery(".imh_6310_color_picker").length) {
375 jQuery(".imh_6310_color_picker").each(function () {
376 jQuery(this).minicolors({
377 control: jQuery(this).attr("data-control") || "hue",
378 defaultValue: jQuery(this).attr("data-defaultValue") || "",
379 format: jQuery(this).attr("data-format") || "hex",
380 keywords: jQuery(this).attr("data-keywords") || "",
381 inline: jQuery(this).attr("data-inline") === "true",
382 letterCase: jQuery(this).attr("data-letterCase") || "lowercase",
383 opacity: jQuery(this).attr("data-opacity"),
384 position: jQuery(this).attr("data-position") || "bottom left",
385 swatches: jQuery(this).attr("data-swatches")
386 ? jQuery(this).attr("data-swatches").split("|")
387 : [],
388 change: function (value, opacity) {
389 if (!value) return;
390 if (opacity) value += ", " + opacity;
391 if (typeof console === "object") {
392 }
393 },
394 theme: "bootstrap",
395 });
396 });
397 }
398 }, 500);
399 }
400
401 function defineDragableElement() {
402 let allElement = jQuery(".imh-6310-drag");
403 allElement.each(function () {
404 jQuery(this).draggable({
405 appendTo: "body",
406 containment: ".imh-6310-annotation-box",
407 drag: function () {},
408 stop: function () {
409 let tWidth = jQuery(".imh-6310-annotation-box").width();
410 let tHeight = jQuery(".imh-6310-annotation-box").height();
411 var iconWidth = jQuery(this).width();
412 var height = jQuery(this).find(".imh-6310-point-icons").height();
413 var bottom = tHeight - (jQuery(this).position().top + height);
414 var left = jQuery(this).position().left;
415
416 var xPos = (
417 (left / parseFloat(jQuery(this).parent().width())) *
418 100
419 ).toFixed(2);
420 var yPos = (
421 (bottom / parseFloat(jQuery(this).parent().height())) *
422 100
423 ).toFixed(2);
424 jQuery(this).attr(
425 "data-position",
426 `${xPos}-${yPos}-${tWidth}-${iconWidth}`
427 );
428 },
429 });
430 });
431 }
432