PluginProbe
Image Hotspot – Map Image Annotation / 1.3
Image Hotspot – Map Image Annotation v1.3
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 1.3, at assets/js/json-data.js

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