customizeView.php in Tagembed: Social Media Feeds and Customer Reviews Widget 7.9, at views/customize/customizeView.php

438 lines 20.9 KB Raw Download Zip

1	<?php
2	if (!defined('ABSPATH')) :
3	exit;
4	endif;
5	include_once TAGEMBED_PLUGIN_DIR_PATH . 'views/includes/headView.php';
6	include_once TAGEMBED_PLUGIN_DIR_PATH . 'views/includes/headerView.php';
7	wp_enqueue_script('__tagembed__script-customize-js', TAGEMBED_PLUGIN_URL . '/assets/js/customize/tagembed.customize.script.js', ['jquery'], TAGEMBED_PLUGIN_VERSION, true);
8	?>
9	<!--Start-- Custom Css For Inherit Style-->
10	<style>
11	.__tagembed__inherit_styles_font_color .__tagembed__colorWrap {
12	background: #f2f2f2;
13	color: #ddd;
14	cursor: no-drop;
15	box-shadow: 4px 0 0 0 #f2f2f2, -2px 0 0 0 #f2f2f2
16	}
17
18	.__tagembed__inherit_styles_font_color .__tagembed__colorWrap .__tagembed__colorSelector {
19	opacity: .05;
20	pointer-events: none
21	}
22
23	.__tagembed__inherit_styles_font_size>input {
24	pointer-events: none;
25	opacity: .2
26	}
27
28	.__tagembed__inherit_styles_font_size .__tagembed__lablename {
29	position: relative
30	}
31
32	.__tagembed__inherit_styles_font_size .__tagembed__lablename::after {
33	content: "";
34	position: absolute;
35	right: -270px;
36	min-width: 270px;
37	height: 20px;
38	bottom: 4px;
39	cursor: no-drop
40	}
41
42	.__tagembed_inherit_styles_setting {
43	width: 100% !important;
44	background: #f4f9ff;
45	margin-left: 15px;
46	margin-right: 15px;
47	padding: 10px;
48	display: flex;
49	border: 1px solid #ddedff
50	}
51
52	.__tagembed_inherit_styles_setting .__tagembed__lablename {
53	white-space: nowrap;
54	width: auto !important;
55	margin-right: 10px;
56	position: relative
57	}
58
59	.__tagembed_inherit_styles_setting .__tagembed__lablename span {
60	font-weight: 500
61	}
62
63	.__tagembed_inherit_styles_setting .__tagembed__lablename .__tagembed__tooltip {
64	display: none
65	}
66
67	.__tagembed_inherit_styles_setting .__tagembed__lablename .fa-info-circle:hover~.__tagembed__tooltip {
68	position: absolute;
69	background: #fff;
70	width: 120px;
71	z-index: 9;
72	display: block;
73	top: -16px;
74	right: -130px;
75	box-shadow: 0 0 5px #eee;
76	padding: 10px;
77	font-size: 12px;
78	font-weight: 400;
79	white-space: normal;
80	height: auto
81	}
82	</style>
83	<!--End-- Custom Css For Inherit Style-->
84	<div id="__tagembed__customizesec" class="__tagembed__customization">
85	<div class="__tagembed__customization_title">
86	<h3>Customize Feeds</h3>
87	</div>
88	<div id="__tagembed__customization_section" style="display: none;" class="__tagembed___customization_contain">
89	<!--Start-- Left Side Bar-->
90	<div class="__tagembed__customization_left">
91	<div class="__tagembed__customization_left_inn">
92	<ul>
93	<li onclick="__tagembed__manageCustomizeMenueHideShow('ls');"><a id="__tagembed__layout_settings_menue" href="javascript:void(0);">Layout Settings</a></li>
94	<li onclick="__tagembed__manageCustomizeMenueHideShow('cs');"><a id="__tagembed__card_settings_menue" href="javascript:void(0);" class="__tagembed__active">Card Settings</a></li>
95	<li onclick="__tagembed__manageCustomizeMenueHideShow('os');"><a id="__tagembed__other_settings_menue" href="javascript:void(0);">Other Settings</a></li>
96	<li onclick="__tagembed__manageCustomizeMenueHideShow('fo');"><a id="__tagembed__footer_settings_menue" href="javascript:void(0);">Footer</a></li>
97	</ul>
98	</div>
99	</div>
100	<!--End-- Left Side Bar-->
101
102	<!--Start-- Right Side Bar-->
103	<div class="__tagembed__customization_right">
104	<input type="hidden" id="__tagembed__personalization_id" value="" />
105	<input type="hidden" id="__tagembed__themeRule_id" value="" />
106	<!--Start-- Layout Settings -->
107	<div id="__tagembed__layout_settings" class="__tagembed__container __tagembed__layout_settings" style="display:none; ">
108	<div class="__tagembed__row">
109	<div class="__tagembed__col">
110	<label class="__tagembed__lablename">Total Number of Posts to Display</label>
111	<input id="__tagembed__total_noptd" class="__tagembed__input" type="number" min="1" max="100" placeholder="25" />
112	</div>
113	<div class="__tagembed__col">
114	<label class="__tagembed__lablename">Column Count (Desktop)</label>
115	<select id="__tagembed__columnCount">
116	<option value="0">Responsive</option>
117	<option value="2">2 Columns</option>
118	<option value="3">3 Columns</option>
119	<option value="4">4 Columns</option>
120	<option value="5">5 Columns</option>
121	</select>
122	</div>
123	<div class="__tagembed__col">
124	<label class="__tagembed__lablename">Column Count (Mobile)</label>
125	<select id="__tagembed__columnCountMobile">
126	<option value="0">Responsive</option>
127	<option value="2">2 Columns</option>
128	</select>
129	</div>
130	</div>
131	<div class="__tagembed__row">
132	<div class="__tagembed__col">
133	<label class="__tagembed__lablename">Maximum Post Width (<span id="__tagembed__post_width_range_value_section"></span>Px)</label>
134	<input id="__tagembed__post_mw" onchange="__tagembed__showRangeInputValue(this.value, '__tagembed__post_width_range_value_section');" value="" type="range" min="150" max="500" value="" class="__tagembed_range">
135	</div>
136	<div class="__tagembed__col">
137	<label class="__tagembed__lablename">Post Spacing (<span id="__tagembed__post_spacing_range_value_section"></span>Px)</label>
138	<input id="__tagembed__ps" onchange="__tagembed__showRangeInputValue(this.value, '__tagembed__post_spacing_range_value_section');" type="range" min="0" max="50" value="" class="__tagembed_range">
139	</div>
140	</div>
141	<div class="__tagembed__row">
142	<div class="__tagembed__col">
143	<label class="__tagembed__lablename">Hide Text Only Posts</label>
144	<div class="__tagembed__toggleOnBut __tagembed__switch">
145	<div class="__tagembed__onoffswitch">
146	<input type="checkbox" id="__tagembed__hide_top_ck" class="__tagembed__onoffswitch-checkbox __tagembed__updateStatus">
147	<label class="__tagembed__onoffswitch-label" for="__tagembed__hide_top_ck">
148	<span class="__tagembed__onoffswitch-inner"></span>
149	<span class="__tagembed__onoffswitch-switch" style="background: rgb(152, 152, 152);"></span>
150	</label>
151	</div>
152	</div>
153	</div>
154	</div>
155	<div class="__tagembed__row">
156	<div class="__tagembed__col">
157	<div class="__tagmebed__layoutQuick_settings">
158	<label class="__tagembed__lablename">Action on Post Click</label>
159	<ul>
160	<li>
161	<input type="radio" id="__tagembed__featured_popup" name="__tagembed__popup_option" value="featuredPopup" />
162	<img src="<?php echo esc_url(TAGEMBED_PLUGIN_URL . 'assets/images/customization/featured-popup.svg'); ?>" alt="Featured Popup" />
163	<span>Featured Popup</span>
164	</li>
165	<li>
166	<input type="radio" id="__tagembed__direct_to_source" name="__tagembed__popup_option" value="directToSource" />
167	<img src="<?php echo esc_url(TAGEMBED_PLUGIN_URL . 'assets/images/customization/direct-to-source.svg'); ?>" alt="Direct to Source" />
168	<span>Direct to Source</span>
169	</li>
170	<li>
171	<input type="radio" id="__tagembed__none" name="__tagembed__popup_option" value="none" />
172	<img src="<?php echo esc_url(TAGEMBED_PLUGIN_URL . 'assets/images/customization/none.svg'); ?>" alt="None" />
173	<span>None</span>
174	</li>
175	</ul>
176	</div>
177	</div>
178	</div>
179
180	<div class="__tagembed__row">
181	<div class="__tagembed__col __tagembed__applyBtn">
182	<a class="__tagembed__btn" href="javascript:void(0);" onclick="__tagembed__updateCustomizationOption('layout');">Apply Settings</a>
183	</div>
184	</div>
185	</div>
186	<!--End-- Layout Settings -->
187	<!--Start-- Card Settings -->
188	<div id="__tagembed__card_settings" class="__tagembed__container __tagembed__card_settings" style="display: block;">
189	<div class="__tagembed__row">
190	<div class="__tagembed__col __tagembed_inherit_styles_setting">
191	<label class="__tagembed__lablename"><span>Use Your Website Settings</span> (recommended) <i class="fa fa-info-circle" title="" aria-hidden="true"></i><span class="__tagembed__tooltip">Properties of your websites will be automatically applied on the widget once you embed.</span></label>
192	<div class="__tagembed__toggleOnBut __tagembed__switch">
193	<div class="__tagembed__onoffswitch">
194	<input type="checkbox" id="__tagembed__show_is_ck" onchange="__tagembed__manageInheritStylesCustomizeOptions();" class="__tagembed__onoffswitch-checkbox __tagembed__updateStatus">
195	<label class="__tagembed__onoffswitch-label" for="__tagembed__show_is_ck">
196	<span class="__tagembed__onoffswitch-inner"></span>
197	<span class="__tagembed__onoffswitch-switch" style="background: rgb(152, 152, 152);"></span>
198	</label>
199	</div>
200	</div>
201	</div>
202	</div>
203	<div class="__tagembed__row">
204	<div class="__tagembed__col" id="__tagembed__inherit_styles_font_color">
205	<label class="__tagembed__lablename">Font Color</label>
206	<div class="__tagembed__colorWrap">
207	<input id="__tagembed__fontColor" value="#1f1b1b" class="__tagembed__colorSelector" type="color" onchange="__tagembed__showColorInputValue(this.value, '__tagembed__post_font_color_value_section');" style="border:">
208	<span id="__tagembed__post_font_color_value_section" class="__tagembed_selected_color_code"></span>
209	</div>
210	</div>
211	<div class="__tagembed__col" id="__tagembed__inherit_styles_auther_font_color">
212	<label class="__tagembed__lablename">Author Font Color</label>
213	<div class="__tagembed__colorWrap">
214	<input class="__tagembed__colorSelector" onchange="__tagembed__showColorInputValue(this.value, '__tagembed__author_font_color_value_section');" type="color" value="" id="__tagembed__authorFontColor" style="border:">
215	<span id="__tagembed__author_font_color_value_section" class="__tagembed_selected_color_code"></span>
216	</div>
217	</div>
218	<div class="__tagembed__col">
219	<label class="__tagembed__lablename">Card Color</label>
220	<div class="__tagembed__colorWrap">
221	<input onchange="__tagembed__showColorInputValue(this.value, '__tagembed__card_color_value_section');" class="__tagembed__colorSelector" type="color" id="__tagembed__cardColor" style="border:">
222	<span id="__tagembed__card_color_value_section" class="__tagembed_selectedColor_code"></span>
223	</div>
224	</div>
225	</div>
226	<div class="__tagembed__row">
227	<div class="__tagembed__col">
228	<label class="__tagembed__lablename">Show Share Options</label>
229	<div class="__tagembed__toggleOnBut __tagembed__switch">
230	<div class="__tagembed__onoffswitch">
231	<input type="checkbox" id="__tagembed__show_so_ck" class="__tagembed__onoffswitch-checkbox __tagembed__updateStatus">
232	<label class="__tagembed__onoffswitch-label" for="__tagembed__show_so_ck">
233	<span class="__tagembed__onoffswitch-inner"></span>
234	<span class="__tagembed__onoffswitch-switch" style="background: rgb(152, 152, 152);"></span>
235	</label>
236	</div>
237	</div>
238	</div>
239	<div class="__tagembed__col">
240	<label class="__tagembed__lablename">Hide Content</label>
241	<div class="__tagembed__toggleOnBut __tagembed__switch">
242	<div class="__tagembed__onoffswitch">
243	<input type="checkbox" id="__tagembed__hide_c_ck" class="__tagembed__onoffswitch-checkbox __tagembed__updateStatus">
244	<label class="__tagembed__onoffswitch-label" for="__tagembed__hide_c_ck">
245	<span class="__tagembed__onoffswitch-inner"></span>
246	<span class="__tagembed__onoffswitch-switch" style="background: rgb(152, 152, 152);"></span>
247	</label>
248	</div>
249	</div>
250	</div>
251	<div class="__tagembed__col">
252	<label class="__tagembed__lablename">Show Author Details</label>
253	<div class="__tagembed__toggleOnBut __tagembed__switch">
254	<div class="__tagembed__onoffswitch">
255	<input type="checkbox" id="__tagembed__show_ad_ck" class="__tagembed__onoffswitch-checkbox __tagembed__updateStatus">
256	<label class="__tagembed__onoffswitch-label" for="__tagembed__show_ad_ck">
257	<span class="__tagembed__onoffswitch-inner"></span>
258	<span class="__tagembed__onoffswitch-switch" style="background: rgb(152, 152, 152);"></span>
259	</label>
260	</div>
261	</div>
262	</div>
263	<div class="__tagembed__col">
264	<label class="__tagembed__lablename">Show Date</label>
265	<div class="__tagembed__toggleOnBut __tagembed__switch">
266	<div class="__tagembed__onoffswitch">
267	<input type="checkbox" id="__tagembed__show_date_ck" class="__tagembed__onoffswitch-checkbox __tagembed__updateStatus">
268	<label class="__tagembed__onoffswitch-label" for="__tagembed__show_date_ck">
269	<span class="__tagembed__onoffswitch-inner"></span>
270	<span class="__tagembed__onoffswitch-switch" style="background: rgb(152, 152, 152);"></span>
271	</label>
272	</div>
273	</div>
274	</div>
275	</div>
276	<div class="__tagembed__row">
277	<div class="__tagembed__col" id="__tagembed__inherit_styles_font_size">
278	<label class="__tagembed__lablename">Font Size (<span id="__tagembed__post_font_size_section"></span>px)</label>
279	<input id="__tagembed__post_font_size" onchange="__tagembed__showRangeInputValue(this.value, '__tagembed__post_font_size_section');" type="range" min="10" max="30" value="" class="__tagembed_range" style="max-width:270px">
280	</div>
281	</div>
282	<div class="__tagembed__row">
283	<div class="__tagembed__col">
284	<label class="__tagembed__lablename">Number Of Line Trim</label>
285	<select id="__tagembed__linetrim">
286	<option value="0">Default</option>
287	<option value="2">2 Lines</option>
288	<option value="3">3 Lines</option>
289	<option value="4">4 Lines</option>
290	<option value="5">5 Lines</option>
291	</select>
292	</div>
293	<div class="__tagembed__col">
294	<label class="__tagembed__lablename">Image Aspect Ratio</label>
295	<select id="__tagembed__aspectimageratio">
296	<option value="0">Default</option>
297	<option value="100">1:1 Square</option>
298	<option value="66.66">3:2 Standard</option>
299	<option value="150">2:3 Standard (Vertical)</option>
300	<option value="75">4:3 Four-Three</option>
301	<option value="133.33">3:4 Four Three Vertical</option>
302	<option value="56.25">16:9 Widescreen</option>
303	<option value="177.77">9:16 Widescreen (Vertical)</option>
304	</select>
305	</div>
306	</div>
307	<div class="__tagembed__row">
308	<div class="__tagembed__col __tagembed_singlerow">
309	<label class="__tagembed__lablename">Text Alignment</label>
310	<div class="__tagembed__radio_button">
311	<span>
312	<input type="radio" id="__tagembed__left_alignment" name="__tagembed__alignment_option" value="left" />
313	<label for="__tagembed__left_alignment" title="Left Align">
314	<svg width="23" height="23" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
315	<rect fill="none" height="256" width="256" />
316	<path d="M40,76H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16Z" />
317	<path d="M40,116H168a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16Z" />
318	<path d="M216,140H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z" />
319	<path d="M168,180H40a8,8,0,0,0,0,16H168a8,8,0,0,0,0-16Z" />
320	</svg>
321	</label>
322	</span>
323	<span>
324	<input type="radio" id="__tagembed__center_alignment" name="__tagembed__alignment_option" value="center" />
325	<label for="__tagembed__center_alignment" title="Center Align">
326	<svg width="23" height="23" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
327	<rect fill="none" height="256" width="256" />
328	<path d="M40,76H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16Z" />
329	<path d="M64,100a8,8,0,0,0,0,16H192a8,8,0,0,0,0-16Z" />
330	<path d="M216,140H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z" />
331	<path d="M192,180H64a8,8,0,0,0,0,16H192a8,8,0,0,0,0-16Z" />
332	</svg>
333	</label>
334	</span>
335	<span>
336	<input type="radio" id="__tagembed__right_alignment" name="__tagembed__alignment_option" value="right" />
337	<label for="__tagembed__right_alignment" title="Right Align">
338	<svg width="23" height="23" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
339	<rect fill="none" height="256" width="256" />
340	<path d="M40,76H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16Z" />
341	<path d="M216,100H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z" />
342	<path d="M216,140H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z" />
343	<path d="M216,180H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z" />
344	</svg>
345	</label>
346	</span>
347	</div>
348	</div>
349	<div class="__tagembed__col __tagembed_singlerow">
350	<label class="__tagembed__lablename">Card Curve</label>
351	<div class="__tagembed__radio_button">
352	<span>
353	<input type="radio" value="0" id="__tagembed__square_curve" name="__tagembed__curve_option" />
354	<label for="__tagembed__square_curve" title="Square Curve">
355	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
356	<path fill-rule="evenodd" d="M15.833 4.167V17.5h-1.568V5.735H2.5V4.167z"></path>
357	</svg>
358	</label>
359	</span>
360	<span>
361	<input type="radio" value="8" id="__tagembed__rounded_corner" name="__tagembed__curve_option" />
362	<label for="__tagembed__rounded_corner" title="Rounded Corners">
363	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
364	<path fill-rule="evenodd" d="M9.82 4.167a6.013 6.013 0 016.01 5.839l.003.174v7.32h-1.568v-7.32a4.445 4.445 0 00-4.289-4.442l-.156-.003H2.5V4.167h7.32z"></path>
365	</svg>
366	</label>
367	</span>
368	<span>
369	<input type="radio" value="24" id="__tagembed__circular_corner" name="__tagembed__curve_option" />
370	<label for="__tagembed__circular_corner" title="Circular Corners">
371	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
372	<path fill-rule="evenodd" d="M3.284 4.167c6.856 0 12.428 5.498 12.547 12.326l.002.223v.784h-1.568v-.784c0-5.994-4.803-10.866-10.77-10.979l-.21-.002H2.5V4.167h.784z"></path>
373	</svg>
374	</label>
375	</span>
376	</div>
377	</div>
378	</div>
379	<div class="__tagembed__row">
380	<div class="__tagembed__col __tagembed__applyBtn">
381	<a class="__tagembed__btn" href="javascript:void(0);" onclick="__tagembed__updateCustomizationOption('card');">Apply Settings</a>
382	</div>
383	</div>
384	</div>
385	<!--End-- Card Settings -->
386	<!--Start-- Other Settings -->
387	<div id="__tagembed__other_settings" class="__tagembed__container __tagembed__layout_settings" style="display:none; ">
388	<div class="__tagembed__customtextarea">
389	<div class="__tagembed_ct_header">
390	<code>Custom Css</code>
391	</div>
392	<textarea id="__tagembed__custom_css" placeholder="/* Write your custom CSS here */"></textarea>
393	</div>
394	<div class="__tagembed__row">
395	<div class="__tagembed__col __tagembed__applyBtn">
396	<a class="__tagembed__btn" href="javascript:void(0);" onclick="__tagembed__updateCustomizationOption('other');">Apply Settings</a>
397	</div>
398	</div>
399	</div>
400	<!--End-- Other Settings -->
401	<!--Start-- Footer Settings -->
402	<div id="__tagembed__footer_settings" class="__tagembed__container __tagembed__layout_settings" style="display:none; ">
403	<div class="__tagembed__row">
404	<div class="__tagembed__col">
405	<div class="__tagmebed__layoutQuick_settings">
406	<label class="__tagembed__lablename">Show More</label>
407	<ul>
408	<li>
409	<input type="radio" id="__tagembed__show_more" name="__tagembed__show_option" value="showMore" />
410	<img src="<?php echo esc_url(TAGEMBED_PLUGIN_URL . 'assets/images/customization/showMore.svg'); ?>" alt="Show More" />
411	<span>Show More</span>
412	</li>
413	<li>
414	<input type="radio" id="__tagembed__auto_load" name="__tagembed__show_option" value="autoScrollStatus" />
415	<img src="<?php echo esc_url(TAGEMBED_PLUGIN_URL . 'assets/images/customization/autoScroll.svg'); ?>" alt="Auto Load" />
416	<span>Auto Load</span>
417	</li>
418	<li>
419	<input type="radio" id="__tagembed__showmore_autoload_none" name="__tagembed__show_option" value="none" />
420	<img src="<?php echo esc_url(TAGEMBED_PLUGIN_URL . 'assets/images/customization/showMoreAutoLoadNone.svg'); ?>" alt="None" />
421	<span>None</span>
422	</li>
423	</ul>
424	</div>
425	</div>
426	</div>
427	<div class="__tagembed__row">
428	<div class="__tagembed__col __tagembed__applyBtn">
429	<a class="__tagembed__btn" href="javascript:void(0);" onclick="__tagembed__updateCustomizationOption('footer');">Apply Settings</a>
430	</div>
431	</div>
432	</div>
433	<!--End-- Footer Settings -->
434	</div>
435	<!--End-- Right Side Bar-->
436	</div>
437	</div>
438	<?php include_once TAGEMBED_PLUGIN_DIR_PATH . 'views/includes/footerView.php'; ?>