PluginProbe
Tagembed: Social Media Feeds and Customer Reviews Widget / 4.0
Tagembed: Social Media Feeds and Customer Reviews Widget v4.0
7.8 7.5 7.6 7.7 7.4 trunk 3.10 3.9 4.0 4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8 4.9 5.0 5.1 5.2 5.3 5.4 5.5 5.6 All 43 releases
tagembed-widget / assets / js / customize / tagembed.customize.script.js

tagembed.customize.script.js in Tagembed: Social Media Feeds and Customer Reviews Widget 4.0, at assets/js/customize/tagembed.customize.script.js

388 lines 23.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*--Start-- Manage Custom Font Family Dropdown*/
2 const mainEl = document.querySelector('.__tagembed__ff_dropdwon .__tagembed__dd_first');
3 const liEls = document.querySelectorAll('.__tagembed__ff_dropdwon > ul > li.__tagembed__dd_inputoption');
4 mainEl.addEventListener("click", () => {
5 for (let liEl of liEls)
6 liEl.style.display = 'list-item';
7 });
8 for (let liEl of liEls) {
9 liEl.addEventListener("click", () => {
10 mainEl.innerHTML = liEl.innerHTML;
11 document.getElementById('__tagembed__font_family').value = liEl.getAttribute('data-value');
12 for (let liEle of liEls)
13 liEle.style.display = 'none';
14 });
15 }
16 /*--End-- Manage Custom Font Family Dropdown*/
17 /*--Start--Get Customization Option*/
18 window.addEventListener ? window.addEventListener("load", __tagembed__getCustomizationOption, false) : window.attachEvent && window.attachEvent("onload", __tagembed__getCustomizationOption);
19 function __tagembed__getCustomizationOption() {
20 /*Manage Customizaton Section Hide Show*/
21 document.querySelector("#__tagembed__customization_section").style.display = "none";
22 let widgetId = document.querySelector("#__tagembed__widgets").selectedOptions[0];
23 widgetId = widgetId.value.split('#')[0];
24 let __tagembed__toast = new TagembedToast;
25 let formData = new FormData();
26 formData.append('action', 'data');
27 formData.append('widgetId', widgetId);
28 formData.append('__tagembed__ajax_action', '__tagembed__get_customization_option');
29 __tagembed__open_loader();
30 fetch(__tagembed__ajax_url, {
31 method: 'POST',
32 headers: {
33 'x-requested-with': 'XMLHttpRequest',
34 },
35 body: formData,
36 }).then(response => {
37 return response.json()
38 }).then(response => {
39 __tagembed__close_loader();
40 if (response.status == true) {
41 __tagembed__manageCustomizationOptions(response.data);
42 } else {
43 __tagembed__toast.danger({message: "Something went wrong. Please try after sometime", position: '__tagembed__is-top-right'});
44 }
45 }).catch((error) => {
46 console.log(error);
47 __tagembed__close_loader();
48 __tagembed__toast.danger({message: "Something went wrong. Please try after sometime", position: '__tagembed__is-top-right'});
49 });
50 }
51 /*--Start-- Manage Customization Options*/
52 function __tagembed__manageCustomizationOptions(__tagembed__customizationsOptions) {
53 document.querySelector("#__tagembed__personalization_id").value = __tagembed__customizationsOptions.Personalization.id;
54 document.querySelector("#__tagembed__themeRule_id").value = __tagembed__customizationsOptions.ThemeRule.id;
55 /*--Start-- Manage Layout Setting*/
56
57 /*Manage Popup Feacture Options*/
58 document.querySelector("#__tagembed__featured_popup").checked = false;
59 document.querySelector("#__tagembed__direct_to_source").checked = false;
60 document.querySelector("#__tagembed__none").checked = false;
61 if (__tagembed__customizationsOptions.Personalization.postFeatured == 1)
62 document.querySelector("#__tagembed__featured_popup").checked = true;
63 if (__tagembed__customizationsOptions.Personalization.mobilePopup == 1)
64 document.querySelector("#__tagembed__direct_to_source").checked = true;
65 if (__tagembed__customizationsOptions.Personalization.postFeatured == 0 && __tagembed__customizationsOptions.Personalization.mobilePopup == 0)
66 document.querySelector("#__tagembed__none").checked = true;
67
68 /*Manage Other Options*/
69 document.querySelector("#__tagembed__total_noptd").value = __tagembed__customizationsOptions.ThemeRule.numberOfPosts;
70 document.querySelector("#__tagembed__show_more_ck").checked = false;
71 if (__tagembed__customizationsOptions.Personalization.loadMoreStatus == 1)
72 document.querySelector("#__tagembed__show_more_ck").checked = true;
73
74 document.querySelector("#__tagembed__hide_top_ck").checked = false;
75 if (__tagembed__customizationsOptions.Personalization.postText == 1)
76 document.querySelector("#__tagembed__hide_top_ck").checked = true;
77
78 document.querySelector("#__tagembed__trim_content_ck").checked = false;
79 if (__tagembed__customizationsOptions.Personalization.trimcontent == 1)
80 document.querySelector("#__tagembed__trim_content_ck").checked = true;
81
82 document.querySelector("#__tagembed__ps").value = __tagembed__customizationsOptions.Personalization.padding;
83 document.querySelector("#__tagembed__post_spacing_range_value_section").innerHTML = __tagembed__customizationsOptions.Personalization.padding;
84 document.querySelector("#__tagembed__post_mw").value = __tagembed__customizationsOptions.Personalization.minimumPostWidth;
85 document.querySelector("#__tagembed__post_width_range_value_section").innerHTML = __tagembed__customizationsOptions.Personalization.minimumPostWidth;
86 document.querySelector("#__tagembed__columnCount").value = __tagembed__customizationsOptions.Personalization.columnCount;
87 document.querySelector("#__tagembed__columnCountMobile").value = __tagembed__customizationsOptions.Personalization.columnCountMobile;
88 /*--End-- Manage Layout Setting*/
89 /*--Start-- Manage Card Setting*/
90 document.querySelector("#__tagembed__fontColor").value = __tagembed__customizationsOptions.ThemeRule.fontColor;
91 document.querySelector("#__tagembed__post_font_color_value_section").innerHTML = __tagembed__customizationsOptions.ThemeRule.fontColor;
92 document.querySelector("#__tagembed__authorFontColor").value = __tagembed__customizationsOptions.ThemeRule.authorColor;
93 document.querySelector("#__tagembed__author_font_color_value_section").innerHTML = __tagembed__customizationsOptions.ThemeRule.authorColor;
94 document.querySelector("#__tagembed__cardColor").value = __tagembed__customizationsOptions.ThemeRule.cardColor;
95 document.querySelector("#__tagembed__card_color_value_section").innerHTML = __tagembed__customizationsOptions.ThemeRule.cardColor;
96 document.querySelector("#__tagembed__post_font_size").innerHTML = __tagembed__customizationsOptions.ThemeRule.fontSize;
97 document.querySelector("#__tagembed__post_font_size_section").innerHTML = __tagembed__customizationsOptions.ThemeRule.fontSize;
98 document.querySelector("#__tagembed__show_so_ck").checked = false;
99 if (__tagembed__customizationsOptions.ThemeRule.shareOption == 1)
100 document.querySelector("#__tagembed__show_so_ck").checked = true;
101 document.querySelector("#__tagembed__hide_c_ck").checked = false;
102 if (__tagembed__customizationsOptions.ThemeRule.hideContent == 1)
103 document.querySelector("#__tagembed__hide_c_ck").checked = true;
104 document.querySelector("#__tagembed__show_ad_ck").checked = false;
105 if (__tagembed__customizationsOptions.Personalization.postAuthor == 1)
106 document.querySelector("#__tagembed__show_ad_ck").checked = true;
107 document.querySelector("#__tagembed__show_date_ck").checked = false;
108 if (__tagembed__customizationsOptions.Personalization.postTime == 1)
109 document.querySelector("#__tagembed__show_date_ck").checked = true;
110 document.querySelector("#__tagembed__font_family").value = __tagembed__customizationsOptions.ThemeRule.font;
111 document.querySelector(".__tagembed__dd_first").innerHTML = `<img src="${TAGEMBED_PLUGIN_URL_JS}assets/images/fonts/${__tagembed__customizationsOptions.ThemeRule.font}.png" alt="">`;
112 document.querySelector("#__tagembed__linetrim").value = __tagembed__customizationsOptions.ThemeRule.lineTrim;
113 document.querySelector("#__tagembed__aspectimageratio").value = __tagembed__customizationsOptions.ThemeRule.aspectImageRatio;
114 /*--Start-- New Card Features */
115 document.querySelector("#__tagembed__left_alignment").checked = false;
116 document.querySelector("#__tagembed__center_alignment").checked = false;
117 document.querySelector("#__tagembed__right_alignment").checked = false;
118
119 if (__tagembed__customizationsOptions.ThemeRule.textAlignment == 'left')
120 document.querySelector("#__tagembed__left_alignment").checked = true;
121 if (__tagembed__customizationsOptions.ThemeRule.textAlignment == 'right')
122 document.querySelector("#__tagembed__right_alignment").checked = true;
123 if (__tagembed__customizationsOptions.ThemeRule.textAlignment == 'center' || __tagembed__customizationsOptions.ThemeRule.textAlignment == 'NULL')
124 document.querySelector("#__tagembed__center_alignment").checked = true;
125
126 document.querySelector("#__tagembed__square_curve").checked = false;
127 document.querySelector("#__tagembed__rounded_corner").checked = false;
128 document.querySelector("#__tagembed__circular_corner").checked = false;
129 if (__tagembed__customizationsOptions.ThemeRule.cardCurve == 0)
130 document.querySelector("#__tagembed__square_curve").checked = true;
131 if (__tagembed__customizationsOptions.ThemeRule.cardCurve == 8)
132 document.querySelector("#__tagembed__rounded_corner").checked = true;
133 if (__tagembed__customizationsOptions.ThemeRule.cardCurve == 24)
134 document.querySelector("#__tagembed__circular_corner").checked = true;
135
136 document.querySelector("#__tagembed__light_theme").checked = false;
137 document.querySelector("#__tagembed__dark_theme").checked = false;
138 if (__tagembed__customizationsOptions.ThemeRule.colorType == 0)
139 document.querySelector("#__tagembed__light_theme").checked = true;
140 if (__tagembed__customizationsOptions.ThemeRule.colorType == 1)
141 document.querySelector("#__tagembed__dark_theme").checked = true;
142 /*--End-- New Card Features */
143 /*--End-- Manage Card Setting*/
144 /*--Start-- Manage Custom Css Setting*/
145
146 document.querySelector("#__tagembed__custom_css").value = __tagembed__customizationsOptions.Personalization.css;
147
148 /*--End-- Manage Custom Css Setting*/
149 /*Manage Customizaton Section Hide Show*/
150 document.querySelector("#__tagembed__customization_section").style.display = "flex";
151 }
152 /*--End-- Manage Customization Options*/
153 /*--End--Get Customization Option*/
154
155 /*--Start--Update Customization Option*/
156 function __tagembed__updateCustomizationOption(__tagembed__optionType) {
157 let __tagembed__toast = new TagembedToast;
158 let formData = new FormData();
159 formData.append('personalizationId', document.querySelector("#__tagembed__personalization_id").value);
160 formData.append('themeRuleId', document.querySelector("#__tagembed__themeRule_id").value);
161 switch (__tagembed__optionType) {
162 case 'layout':
163 let __tagembed__total_numberOFPostToDisplay = document.querySelector("#__tagembed__total_noptd").value;
164 let __tagembed__postSpacing = document.querySelector("#__tagembed__ps").value;
165 let __tagembed__maximumPostWidth = document.querySelector("#__tagembed__post_mw").value;
166 let __tagembed__columnCountDesktop = document.querySelector("#__tagembed__columnCount").value;
167 let __tagembed__columnCountMobile = document.querySelector("#__tagembed__columnCountMobile").value;
168 let __tagembed__showMoreCheckBoxValue = 0;
169 let __tagembed__showMoreCk = document.querySelector("#__tagembed__show_more_ck");
170 if (__tagembed__showMoreCk.checked)
171 __tagembed__showMoreCheckBoxValue = 1;
172 let __tagembed__hideTextOnlyPostCheckBoxValue = 0;
173 let __tagembed__hideTextOnlyPost = document.querySelector("#__tagembed__hide_top_ck");
174 if (__tagembed__hideTextOnlyPost.checked)
175 __tagembed__hideTextOnlyPostCheckBoxValue = 1;
176 let __tagembed__trimContentCheckBoxValue = 0;
177 let __tagembed__trimContent = document.querySelector("#__tagembed__trim_content_ck");
178 if (__tagembed__trimContent.checked)
179 __tagembed__trimContentCheckBoxValue = 1;
180 let __tagembed__featurePopupCheckBoxValue = 0;
181 if (document.querySelector("#__tagembed__featured_popup").checked)
182 __tagembed__featurePopupCheckBoxValue = 1;
183 let __tagembed__directToSourceCheckBoxValue = 0;
184 if (document.querySelector("#__tagembed__direct_to_source").checked)
185 __tagembed__directToSourceCheckBoxValue = 1;
186 if (document.querySelector("#__tagembed__none").checked) {
187 __tagembed__directToSourceCheckBoxValue = 0;
188 __tagembed__featurePopupCheckBoxValue = 0;
189 }
190 /*Manage Form Data*/
191 formData.append('numberOfPosts', __tagembed__total_numberOFPostToDisplay);
192 formData.append('padding', __tagembed__postSpacing);
193 formData.append('minimumPostWidth', __tagembed__maximumPostWidth);
194 formData.append('columnCount', __tagembed__columnCountDesktop);
195 formData.append('columnCountMobile', __tagembed__columnCountMobile);
196 formData.append('loadMoreStatus', __tagembed__showMoreCheckBoxValue);
197 formData.append('postText', __tagembed__hideTextOnlyPostCheckBoxValue);
198 formData.append('trimcontent', __tagembed__trimContentCheckBoxValue);
199 formData.append('mobilePopup', __tagembed__directToSourceCheckBoxValue);
200 formData.append('postFeatured', __tagembed__featurePopupCheckBoxValue);
201 break;
202 case 'card':
203 let __tagembed__fontColor = document.querySelector("#__tagembed__fontColor").value;
204 let __tagembed__authorFontColor = document.querySelector("#__tagembed__authorFontColor").value;
205 let __tagembed__cardColor = document.querySelector("#__tagembed__cardColor").value;
206 let __tagembed__fontSize = document.querySelector("#__tagembed__post_font_size").value;
207 let __tagembed__font_family = document.querySelector("#__tagembed__font_family").value;
208 let __tagembed__showShareOptionCheckBoxValue = 0;
209 let __tagembed__show_so_ck = document.querySelector("#__tagembed__show_so_ck");
210 if (__tagembed__show_so_ck.checked)
211 __tagembed__showShareOptionCheckBoxValue = 1;
212 let __tagembed__hideContentCheckBoxValue = 0;
213 let __tagembed__hide_c_ck = document.querySelector("#__tagembed__hide_c_ck");
214 if (__tagembed__hide_c_ck.checked)
215 __tagembed__hideContentCheckBoxValue = 1;
216 let __tagembed__showAuthorDetailsCheckBoxValue = 0;
217 let __tagembed__show_ad_ck = document.querySelector("#__tagembed__show_ad_ck");
218 if (__tagembed__show_ad_ck.checked)
219 __tagembed__showAuthorDetailsCheckBoxValue = 1;
220 let __tagembed__showDataCheckBoxValue = 0;
221 let __tagembed__show_date_ck = document.querySelector("#__tagembed__show_date_ck");
222 if (__tagembed__show_date_ck.checked)
223 __tagembed__showDataCheckBoxValue = 1;
224 /*New Card Style Data*/
225 let __tagembed__linetrim = document.querySelector("#__tagembed__linetrim").value;
226 let __tagembed__aspectImageRatio = document.querySelector("#__tagembed__aspectimageratio").value;
227 if (document.querySelector("#__tagembed__left_alignment").checked)
228 __tagembed__textAlignment = 'left';
229 if (document.querySelector("#__tagembed__center_alignment").checked)
230 __tagembed__textAlignment = 'center';
231 if (document.querySelector("#__tagembed__right_alignment").checked)
232 __tagembed__textAlignment = 'right';
233 if (document.querySelector("#__tagembed__square_curve").checked)
234 __tagembed__cardCurve = 0;
235 if (document.querySelector("#__tagembed__rounded_corner").checked)
236 __tagembed__cardCurve = 8;
237 if (document.querySelector("#__tagembed__circular_corner").checked)
238 __tagembed__cardCurve = 24;
239 if (document.querySelector("#__tagembed__light_theme").checked)
240 __tagembed__themeOption = 0;
241 if (document.querySelector("#__tagembed__dark_theme").checked)
242 __tagembed__themeOption = 1;
243 /*Manage Form Data*/
244 formData.append('fontColor', __tagembed__fontColor);
245 formData.append('authorColor', __tagembed__authorFontColor);
246 formData.append('cardColor', __tagembed__cardColor);
247 formData.append('fontSize', __tagembed__fontSize);
248 formData.append('font', __tagembed__font_family);
249 formData.append('shareOption', __tagembed__showShareOptionCheckBoxValue);
250 formData.append('hideContent', __tagembed__hideContentCheckBoxValue);
251 formData.append('postAuthor', __tagembed__showAuthorDetailsCheckBoxValue);
252 formData.append('postTime', __tagembed__showDataCheckBoxValue);
253 formData.append('lineTrim', __tagembed__linetrim);
254 formData.append('aspectImageRatio', __tagembed__aspectImageRatio);
255 formData.append('textAlignment', __tagembed__textAlignment);
256 formData.append('cardCurve', __tagembed__cardCurve);
257 formData.append('colorType', __tagembed__themeOption);
258 break;
259 case 'other':
260 let __tagembed__customCss = document.querySelector("#__tagembed__custom_css").value;
261 /*Manage Form Data*/
262 formData.append('css', __tagembed__customCss);
263 break;
264 default:
265 return __tagembed__toast.danger({message: "Something went wrong. Please try after sometime", position: '__tagembed__is-top-right'});
266 break;
267 }
268 /*Get And Manage Widget Id*/
269 let widgetId = document.querySelector("#__tagembed__widgets").selectedOptions[0];
270 widgetId = widgetId.value.split('#')[0];
271 formData.append('action', 'data');
272 formData.append('widgetId', widgetId);
273 formData.append('__tagembed__ajax_action', '__tagembed__update_' + __tagembed__optionType + '_customization_option');
274 __tagembed__open_loader();
275 fetch(__tagembed__ajax_url, {
276 method: 'POST',
277 headers: {
278 'x-requested-with': 'XMLHttpRequest',
279 },
280 body: formData,
281 }).then(response => {
282 return response.json()
283 }).then(response => {
284 __tagembed__close_loader();
285 if (response.status == true) {
286 if (response.data.hasOwnProperty("message"))
287 __tagembed__toast.success({message: response.data.message, position: '__tagembed__is-top-right'});
288 } else {
289 if (response.hasOwnProperty("message")) {
290 __tagembed__toast.danger({message: response.message, position: '__tagembed__is-top-right'});
291 } else {
292 __tagembed__toast.danger({message: "Something went wrong. Please try after sometime", position: '__tagembed__is-top-right'});
293 }
294 }
295 }).catch((error) => {
296 console.log(error);
297 __tagembed__toast.danger({message: "Something went wrong. Please try after sometime", position: '__tagembed__is-top-right'});
298 });
299 }
300 /*--End--Update Customization Option*/
301
302 /*--Start--Manage Customize Menue Hide Show*/
303 function __tagembed__manageCustomizeMenueHideShow(__tagembed__customize_menue) {
304 /*Section*/
305 let __tagembed__layoutSettings = document.querySelector("#__tagembed__layout_settings");
306 let __tagembed__cardSettings = document.querySelector("#__tagembed__card_settings");
307 let __tagembed__otherSettings = document.querySelector("#__tagembed__other_settings");
308 /*Menue*/
309 let __tagembed__layoutSettingsMenue = document.querySelector("#__tagembed__layout_settings_menue");
310 let __tagembed__cardSettingsMenue = document.querySelector("#__tagembed__card_settings_menue");
311 let __tagembed__otherSettingsMenue = document.querySelector("#__tagembed__other_settings_menue");
312 switch (__tagembed__customize_menue) {
313 case 'ls':
314 __tagembed__cardSettingsMenue.classList.remove("__tagembed__active");
315 __tagembed__cardSettings.style.display = "none";
316
317 __tagembed__otherSettingsMenue.classList.remove("__tagembed__active");
318 __tagembed__otherSettings.style.display = "none";
319
320 __tagembed__layoutSettingsMenue.classList.add("__tagembed__active");
321 __tagembed__layoutSettings.style.display = "block";
322 break;
323 case 'cs':
324 __tagembed__layoutSettingsMenue.classList.remove("__tagembed__active");
325 __tagembed__layoutSettings.style.display = "none";
326
327 __tagembed__otherSettingsMenue.classList.remove("__tagembed__active");
328 __tagembed__otherSettings.style.display = "none";
329
330 __tagembed__cardSettingsMenue.classList.add("__tagembed__active");
331 __tagembed__cardSettings.style.display = "block";
332
333 break;
334 case 'os':
335 __tagembed__layoutSettingsMenue.classList.remove("__tagembed__active");
336 __tagembed__layoutSettings.style.display = "none";
337
338 __tagembed__cardSettingsMenue.classList.remove("__tagembed__active");
339 __tagembed__cardSettings.style.display = "none";
340
341 __tagembed__otherSettingsMenue.classList.add("__tagembed__active");
342 __tagembed__otherSettings.style.display = "block";
343 break;
344 default:
345 let __tagembed__toast = new TagembedToast;
346 __tagembed__toast.danger({message: "Something went wrong. Please try after sometime", position: '__tagembed__is-top-right'});
347 break;
348 }
349 }
350 /*--End--Manage Customize Menue Hide Show*/
351 /*--Start-- Show Range Input Value*/
352 function __tagembed__showRangeInputValue(__tagembed__range_val, __tagembed__range_value_Show_section_id) {
353 let __tagembed__rangeValueShowSection = document.getElementById(__tagembed__range_value_Show_section_id);
354 if (__tagembed__rangeValueShowSection)
355 __tagembed__rangeValueShowSection.innerHTML = __tagembed__range_val;
356 }
357 /*--End-- Show Range Input Value*/
358 /*--Start-- Show Range Input Value*/
359 function __tagembed__showColorInputValue(__tagembed__color_val, __tagembed__color_value_Show_section_id) {
360 let __tagembed__colorValueShowSection = document.getElementById(__tagembed__color_value_Show_section_id);
361 if (__tagembed__colorValueShowSection)
362 __tagembed__colorValueShowSection.innerHTML = __tagembed__color_val;
363 }
364 /*--End-- Show Range Input Value*/
365 /*--Start-- Show Theme Type*/
366 let __tagembed__light_theme_option = document.querySelector("#__tagembed__light_theme");
367 if (__tagembed__light_theme_option) {
368 __tagembed__light_theme_option.addEventListener('click', function (event) {
369 let cardColor = document.getElementById("__tagembed__cardColor").value = '#fafafa';
370 __tagembed__showColorInputValue(cardColor, '__tagembed__card_color_value_section');
371 let fontColor = document.getElementById("__tagembed__fontColor").value = '#000000';
372 __tagembed__showColorInputValue(fontColor, '__tagembed__post_font_color_value_section');
373 let authorColor = document.getElementById("__tagembed__authorFontColor").value = '#000000';
374 __tagembed__showColorInputValue(authorColor, '__tagembed__author_font_color_value_section');
375 });
376 }
377 let __tagembed__dark_theme_option = document.querySelector("#__tagembed__dark_theme");
378 if (__tagembed__dark_theme_option) {
379 __tagembed__dark_theme_option.addEventListener('click', function (event) {
380 let cardColor = document.getElementById("__tagembed__cardColor").value = '#000000';
381 __tagembed__showColorInputValue('#000000', '__tagembed__card_color_value_section');
382 let fontColor = document.getElementById("__tagembed__fontColor").value = '#fafafa';
383 __tagembed__showColorInputValue(fontColor, '__tagembed__post_font_color_value_section');
384 let authorColor = document.getElementById("__tagembed__authorFontColor").value = '#fafafa';
385 __tagembed__showColorInputValue(authorColor, '__tagembed__author_font_color_value_section');
386 });
387 }
388 /*--End-- Show Theme Type*/