PluginProbe
Tagembed: Social Media Feeds and Customer Reviews Widget / 4.5
Tagembed: Social Media Feeds and Customer Reviews Widget v4.5
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 5.7 All 42 releases
tagembed-widget / views / customize / customizeView.php

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

394 lines 27.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 include_once TAGEMBED_PLUGIN_DIR_PATH . "views/includes/headView.php";
3 include_once TAGEMBED_PLUGIN_DIR_PATH . "views/includes/headerView.php";
4 wp_enqueue_script('__script-customize-js', TAGEMBED_PLUGIN_URL . '/assets/js/customize/tagembed.customize.script.js', ['jquery'], TAGEMBED_PLUGIN_VERSION, true);
5 ?>
6 <div id="__tagembed__customizesec" class="__tagembed__customization">
7 <div class="__tagembed__customization_title">
8 <h3>Customize Feeds</h3>
9 </div>
10 <div id="__tagembed__customization_section" style="display: none;" class="__tagembed___customization_contain">
11 <!--Start-- Left Side Bar-->
12 <div class="__tagembed__customization_left">
13 <div class="__tagembed__customization_left_inn">
14 <ul>
15 <li onclick="__tagembed__manageCustomizeMenueHideShow('ls');"><a id="__tagembed__layout_settings_menue" href="javascript:void(0);" class="__tagembed__active">Layout Settings</a></li>
16 <li onclick="__tagembed__manageCustomizeMenueHideShow('cs');"><a id="__tagembed__card_settings_menue" href="javascript:void(0);">Card Settings</a></li>
17 <li onclick="__tagembed__manageCustomizeMenueHideShow('os');"><a id="__tagembed__other_settings_menue" href="javascript:void(0);">Other Settings</a></li>
18 <li onclick="__tagembed__manageCustomizeMenueHideShow('fo');"><a id="__tagembed__footer_settings_menue" href="javascript:void(0);">Footer</a></li>
19 </ul>
20 </div>
21 </div>
22 <!--End-- Left Side Bar-->
23
24 <!--Start-- Right Side Bar-->
25 <div class="__tagembed__customization_right">
26 <input type="hidden" id="__tagembed__personalization_id" value="" />
27 <input type="hidden" id="__tagembed__themeRule_id" value="" />
28 <!--Start-- Layout Settings -->
29 <div id="__tagembed__layout_settings" class="__tagembed__container __tagembed__layout_settings" style="display:block; ">
30 <div class="__tagembed__row">
31 <div class="__tagembed__col">
32 <label class="__tagembed__lablename">Total Number of Posts to Display</label>
33 <input id="__tagembed__total_noptd" class="__tagembed__input" type="number" min="1" max="100" placeholder="25" />
34 </div>
35 <div class="__tagembed__col">
36 <label class="__tagembed__lablename">Column Count (Desktop)</label>
37 <select id="__tagembed__columnCount">
38 <option value="0">Responsive</option>
39 <option value="2">2 Columns</option>
40 <option value="3">3 Columns</option>
41 <option value="4">4 Columns</option>
42 <option value="5">5 Columns</option>
43 </select>
44 </div>
45 <div class="__tagembed__col">
46 <label class="__tagembed__lablename">Column Count (Mobile)</label>
47 <select id="__tagembed__columnCountMobile">
48 <option value="0">Responsive</option>
49 <option value="2">2 Columns</option>
50 </select>
51 </div>
52 </div>
53 <div class="__tagembed__row">
54 <div class="__tagembed__col">
55 <label class="__tagembed__lablename">Maximum Post Width (<span id="__tagembed__post_width_range_value_section"></span>Px)</label>
56 <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">
57 </div>
58 <div class="__tagembed__col">
59 <label class="__tagembed__lablename">Post Spacing (<span id="__tagembed__post_spacing_range_value_section"></span>Px)</label>
60 <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">
61 </div>
62 </div>
63 <div class="__tagembed__row">
64 <div class="__tagembed__col">
65 <label class="__tagembed__lablename">Hide Text Only Posts</label>
66 <div class="__tagembed__toggleOnBut __tagembed__switch">
67 <div class="__tagembed__onoffswitch">
68 <input type="checkbox" id="__tagembed__hide_top_ck" class="__tagembed__onoffswitch-checkbox __tagembed__updateStatus">
69 <label class="__tagembed__onoffswitch-label" for="__tagembed__hide_top_ck">
70 <span class="__tagembed__onoffswitch-inner"></span>
71 <span class="__tagembed__onoffswitch-switch" style="background: rgb(152, 152, 152);"></span>
72 </label>
73 </div>
74 </div>
75 </div>
76 </div>
77 <div class="__tagembed__row">
78 <div class="__tagembed__col">
79 <div class="__tagmebed__layoutQuick_settings">
80 <label class="__tagembed__lablename">Action on Post Click</label>
81 <ul>
82 <li>
83 <input type="radio" id="__tagembed__featured_popup" name="__tagembed__popup_option" value="featuredPopup" />
84 <img src="<?php echo esc_html(TAGEMBED_PLUGIN_URL); ?>assets/images/customization/featured-popup.svg" alt="Featured Popup" />
85 <span>Featured Popup</span>
86 </li>
87 <li>
88 <input type="radio" id="__tagembed__direct_to_source" name="__tagembed__popup_option" value="directToSource" />
89 <img src="<?php echo esc_html(TAGEMBED_PLUGIN_URL); ?>assets/images/customization/direct-to-source.svg" alt="Direct to Source" />
90 <span>Direct to Source</span>
91 </li>
92 <li>
93 <input type="radio" id="__tagembed__none" name="__tagembed__popup_option" value="none" />
94 <img src="<?php echo esc_html(TAGEMBED_PLUGIN_URL); ?>assets/images/customization/none.svg" alt="None" />
95 <span>None</span>
96 </li>
97 </ul>
98 </div>
99 </div>
100 </div>
101
102 <div class="__tagembed__row">
103 <div class="__tagembed__col __tagembed__applyBtn">
104 <a class="__tagembed__btn" href="javascript:void(0);" onclick="__tagembed__updateCustomizationOption('layout');">Apply Settings</a>
105 </div>
106 </div>
107 </div>
108 <!--End-- Layout Settings -->
109 <!--Start-- Card Settings -->
110 <div id="__tagembed__card_settings" class="__tagembed__container __tagembed__card_settings" style="display: none;">
111 <div class="__tagembed__row">
112 <div class="__tagembed__col">
113 <label class="__tagembed__lablename">Font Color</label>
114 <div class="__tagembed__colorWrap">
115 <input id="__tagembed__fontColor" value="#1f1b1b" class="__tagembed__colorSelector" type="color" onchange="__tagembed__showColorInputValue(this.value, '__tagembed__post_font_color_value_section');" style="border:">
116 <span id="__tagembed__post_font_color_value_section" class="__tagembed_selected_color_code"></span>
117 </div>
118 </div>
119 <div class="__tagembed__col">
120 <label class="__tagembed__lablename">Font Family</label>
121 <div class="__tagembed__ff_dropdwon">
122 <div class="__tagembed__dd_first">
123 Select Font Family
124 </div>
125 <ul>
126 <?php
127 for ($i = 0; $i < 26; $i++) :
128 if (in_array($i, [6, 8, 20, 21, 22, 23]))
129 continue;
130 ?>
131 <li class="__tagembed__dd_inputoption" data-value="<?php echo esc_html($i); ?>">
132 <img src="<?php echo esc_html(TAGEMBED_PLUGIN_URL); ?>assets/images/fonts/<?php echo esc_html($i); ?>.png" alt="" />
133 </li>
134 <?php
135 endfor;
136 ?>
137 </ul>
138 <input type="hidden" id="__tagembed__font_family" value="" />
139 </div>
140 </div>
141 <div class="__tagembed__col">
142 <label class="__tagembed__lablename">Author Font Color</label>
143 <div class="__tagembed__colorWrap">
144 <input class="__tagembed__colorSelector" onchange="__tagembed__showColorInputValue(this.value, '__tagembed__author_font_color_value_section');" type="color" value="" id="__tagembed__authorFontColor" style="border:">
145 <span id="__tagembed__author_font_color_value_section" class="__tagembed_selected_color_code"></span>
146 </div>
147 </div>
148 <div class="__tagembed__col">
149 <label class="__tagembed__lablename">Card Color</label>
150 <div class="__tagembed__colorWrap">
151 <input onchange="__tagembed__showColorInputValue(this.value, '__tagembed__card_color_value_section');" class="__tagembed__colorSelector" type="color" id="__tagembed__cardColor" style="border:">
152 <span id="__tagembed__card_color_value_section" class="__tagembed_selectedColor_code"></span>
153 </div>
154 </div>
155 </div>
156 <div class="__tagembed__row">
157 <div class="__tagembed__col">
158 <label class="__tagembed__lablename">Show Share Options</label>
159 <div class="__tagembed__toggleOnBut __tagembed__switch">
160 <div class="__tagembed__onoffswitch">
161 <input type="checkbox" id="__tagembed__show_so_ck" class="__tagembed__onoffswitch-checkbox __tagembed__updateStatus">
162 <label class="__tagembed__onoffswitch-label" for="__tagembed__show_so_ck">
163 <span class="__tagembed__onoffswitch-inner"></span>
164 <span class="__tagembed__onoffswitch-switch" style="background: rgb(152, 152, 152);"></span>
165 </label>
166 </div>
167 </div>
168 </div>
169 <div class="__tagembed__col">
170 <label class="__tagembed__lablename">Hide Content</label>
171 <div class="__tagembed__toggleOnBut __tagembed__switch">
172 <div class="__tagembed__onoffswitch">
173 <input type="checkbox" id="__tagembed__hide_c_ck" class="__tagembed__onoffswitch-checkbox __tagembed__updateStatus">
174 <label class="__tagembed__onoffswitch-label" for="__tagembed__hide_c_ck">
175 <span class="__tagembed__onoffswitch-inner"></span>
176 <span class="__tagembed__onoffswitch-switch" style="background: rgb(152, 152, 152);"></span>
177 </label>
178 </div>
179 </div>
180 </div>
181 <div class="__tagembed__col">
182 <label class="__tagembed__lablename">Show Author Details</label>
183 <div class="__tagembed__toggleOnBut __tagembed__switch">
184 <div class="__tagembed__onoffswitch">
185 <input type="checkbox" id="__tagembed__show_ad_ck" class="__tagembed__onoffswitch-checkbox __tagembed__updateStatus">
186 <label class="__tagembed__onoffswitch-label" for="__tagembed__show_ad_ck">
187 <span class="__tagembed__onoffswitch-inner"></span>
188 <span class="__tagembed__onoffswitch-switch" style="background: rgb(152, 152, 152);"></span>
189 </label>
190 </div>
191 </div>
192 </div>
193 <div class="__tagembed__col">
194 <label class="__tagembed__lablename">Show Date</label>
195 <div class="__tagembed__toggleOnBut __tagembed__switch">
196 <div class="__tagembed__onoffswitch">
197 <input type="checkbox" id="__tagembed__show_date_ck" class="__tagembed__onoffswitch-checkbox __tagembed__updateStatus">
198 <label class="__tagembed__onoffswitch-label" for="__tagembed__show_date_ck">
199 <span class="__tagembed__onoffswitch-inner"></span>
200 <span class="__tagembed__onoffswitch-switch" style="background: rgb(152, 152, 152);"></span>
201 </label>
202 </div>
203 </div>
204 </div>
205 </div>
206 <div class="__tagembed__row">
207 <div class="__tagembed__col">
208 <label class="__tagembed__lablename">Font Size (<span id="__tagembed__post_font_size_section"></span>px)</label>
209 <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">
210 </div>
211 </div>
212 <div class="__tagembed__row">
213 <div class="__tagembed__col">
214 <label class="__tagembed__lablename">Number Of Line Trim</label>
215 <select id="__tagembed__linetrim">
216 <option value="0">Default</option>
217 <option value="2">2 Lines</option>
218 <option value="3">3 Lines</option>
219 <option value="4">4 Lines</option>
220 <option value="5">5 Lines</option>
221 </select>
222 </div>
223 <div class="__tagembed__col">
224 <label class="__tagembed__lablename">Image Aspect Ratio</label>
225 <select id="__tagembed__aspectimageratio">
226 <option value="0">Default</option>
227 <option value="1/1">1:1 Square</option>
228 <option value="3/2">3:2 Standard</option>
229 <option value="2/3">2:3 Standard (Vertical)</option>
230 <option value="4/3">4:3 Four-Three</option>
231 <option value="3/4">3:4 Four Three Vertical</option>
232 <option value="16/9">16:9 Widescreen</option>
233 <option value="9/16">9:16 Widescreen (Vertical)</option>
234 </select>
235 </div>
236 </div>
237 <div class="__tagembed__row">
238 <div class="__tagembed__col __tagembed_singlerow">
239 <label class="__tagembed__lablename">Text Alignment</label>
240 <div class="__tagembed__radio_button">
241 <span>
242 <input type="radio" id="__tagembed__left_alignment" name="__tagembed__alignment_option" value="left" />
243 <label for="__tagembed__left_alignment" title="Left Align">
244 <svg width="23" height="23" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
245 <rect fill="none" height="256" width="256" />
246 <path d="M40,76H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16Z" />
247 <path d="M40,116H168a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16Z" />
248 <path d="M216,140H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z" />
249 <path d="M168,180H40a8,8,0,0,0,0,16H168a8,8,0,0,0,0-16Z" />
250 </svg>
251 </label>
252 </span>
253 <span>
254 <input type="radio" id="__tagembed__center_alignment" name="__tagembed__alignment_option" value="center" />
255 <label for="__tagembed__center_alignment" title="Center Align">
256 <svg width="23" height="23" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
257 <rect fill="none" height="256" width="256" />
258 <path d="M40,76H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16Z" />
259 <path d="M64,100a8,8,0,0,0,0,16H192a8,8,0,0,0,0-16Z" />
260 <path d="M216,140H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z" />
261 <path d="M192,180H64a8,8,0,0,0,0,16H192a8,8,0,0,0,0-16Z" />
262 </svg>
263 </label>
264 </span>
265 <span>
266 <input type="radio" id="__tagembed__right_alignment" name="__tagembed__alignment_option" value="right" />
267 <label for="__tagembed__right_alignment" title="Right Align">
268 <svg width="23" height="23" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
269 <rect fill="none" height="256" width="256" />
270 <path d="M40,76H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16Z" />
271 <path d="M216,100H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z" />
272 <path d="M216,140H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z" />
273 <path d="M216,180H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z" />
274 </svg>
275 </label>
276 </span>
277 </div>
278 </div>
279 <div class="__tagembed__col __tagembed_singlerow">
280 <label class="__tagembed__lablename">Card Curve</label>
281 <div class="__tagembed__radio_button">
282 <span>
283 <input type="radio" value="0" id="__tagembed__square_curve" name="__tagembed__curve_option" />
284 <label for="__tagembed__square_curve" title="Square Curve">
285 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
286 <path fill-rule="evenodd" d="M15.833 4.167V17.5h-1.568V5.735H2.5V4.167z"></path>
287 </svg>
288 </label>
289 </span>
290 <span>
291 <input type="radio" value="8" id="__tagembed__rounded_corner" name="__tagembed__curve_option" />
292 <label for="__tagembed__rounded_corner" title="Rounded Corners">
293 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
294 <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>
295 </svg>
296 </label>
297 </span>
298 <span>
299 <input type="radio" value="24" id="__tagembed__circular_corner" name="__tagembed__curve_option" />
300 <label for="__tagembed__circular_corner" title="Circular Corners">
301 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
302 <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>
303 </svg>
304 </label>
305 </span>
306 </div>
307 </div>
308 </div>
309 <div class="__tagembed__row">
310 <div class="__tagembed__col">
311 <div class="__tagmebed__layoutQuick_settings __tagembed__mt_zero">
312 <label class="__tagembed__lablename __tagembed__mt_zero">Theme Type</label>
313 <ul>
314 <li>
315 <input type="radio" id="__tagembed__light_theme" name="__tagembed__theme_option" value="0" />
316 <img src="<?php echo esc_html(TAGEMBED_PLUGIN_URL); ?>assets/images/customization/light-theme.svg" alt="Featured Popup" />
317 <span>Light Theme</span>
318 </li>
319 <li>
320 <input type="radio" id="__tagembed__dark_theme" name="__tagembed__theme_option" value="1" />
321 <img src="<?php echo esc_html(TAGEMBED_PLUGIN_URL); ?>assets/images/customization/dark-theme.svg" alt="Direct to Source" />
322 <span>Dark Theme</span>
323 </li>
324 </ul>
325 </div>
326 </div>
327 </div>
328 <div class="__tagembed__row">
329 <div class="__tagembed__col __tagembed__applyBtn">
330 <a class="__tagembed__btn" href="javascript:void(0);" onclick="__tagembed__updateCustomizationOption('card');">Apply Settings</a>
331 </div>
332 </div>
333 </div>
334 <!--End-- Card Settings -->
335 <!--Start-- Other Settings -->
336 <div id="__tagembed__other_settings" class="__tagembed__container __tagembed__layout_settings" style="display:none; ">
337 <div class="__tagembed__customtextarea">
338 <div class="__tagembed_ct_header">
339 <code>Custom Css</code>
340 </div>
341 <textarea id="__tagembed__custom_css" placeholder="/* Write your custom CSS here */"></textarea>
342 </div>
343 <div class="__tagembed__row">
344 <div class="__tagembed__col __tagembed__applyBtn">
345 <a class="__tagembed__btn" href="javascript:void(0);" onclick="__tagembed__updateCustomizationOption('other');">Apply Settings</a>
346 </div>
347 </div>
348 </div>
349 <!--End-- Other Settings -->
350 <!--Start-- Footer Settings -->
351 <div id="__tagembed__footer_settings" class="__tagembed__container __tagembed__layout_settings" style="display:none; ">
352 <div class="__tagembed__row">
353 <div class="__tagembed__col">
354 <div class="__tagmebed__layoutQuick_settings">
355 <label class="__tagembed__lablename">Show More</label>
356 <ul>
357 <li>
358 <input type="radio" id="__tagembed__show_more" name="__tagembed__show_option" onclick="__tagembed__manageShowMoreTextSectionHideShow('show');" value="showMore" />
359 <img src="<?php echo esc_html(TAGEMBED_PLUGIN_URL); ?>assets/images/customization/showMore.svg" alt="Show More" />
360 <span>Show More</span>
361 </li>
362 <li>
363 <input type="radio" id="__tagembed__auto_load" name="__tagembed__show_option" onclick="__tagembed__manageShowMoreTextSectionHideShow('hide');" value="autoScrollStatus" />
364 <img src="<?php echo esc_html(TAGEMBED_PLUGIN_URL); ?>assets/images/customization/autoScroll.svg" alt="Auto Load" />
365 <span>Auto Load</span>
366 </li>
367 <li>
368 <input type="radio" id="__tagembed__showmore_autoload_none" onclick="__tagembed__manageShowMoreTextSectionHideShow('hide');" name="__tagembed__show_option" value="none" />
369 <img src="<?php echo esc_html(TAGEMBED_PLUGIN_URL); ?>assets/images/customization/showMoreAutoLoadNone.svg" alt="None" />
370 <span>None</span>
371 </li>
372 </ul>
373 </div>
374 </div>
375 </div>
376 <div class="__tagembed__row" id="__tagembed__show_more_text_sectction" style="display: none;">
377 <div class="__tagembed__col">
378 <label class="__tagembed__lablename">Show More Text</label>
379 <input id="__tagembed__show_more_txt" class="__tagembed__input" type="text" placeholder="Show More" />
380 </div>
381 </div>
382 <div class="__tagembed__row">
383 <div class="__tagembed__col __tagembed__applyBtn">
384 <a class="__tagembed__btn" href="javascript:void(0);" onclick="__tagembed__updateCustomizationOption('footer');">Apply Settings</a>
385 </div>
386 </div>
387 </div>
388 <!--End-- Footer Settings -->
389 </div>
390 <!--End-- Right Side Bar-->
391 </div>
392 </div>
393
394 <?php include_once TAGEMBED_PLUGIN_DIR_PATH . "views/includes/footerView.php"; ?>