styling.js — Widget Options – Advanced Conditional Visibility for Gutenberg Blocks & Classic Widgets 4.0.7 | PluginProbe

PluginProbe ʕ •ᴥ•ʔ

Widget Options – Advanced Conditional Visibility for Gutenberg Blocks & Classic Widgets / 4.0.7

Widget Options – Advanced Conditional Visibility for Gutenberg Blocks & Classic Widgets v4.0.7

widget-options / includes / widgets / gutenberg / src / attributes / components / option-tabs / styling.js

widget-options / includes / widgets / gutenberg / src / attributes / components / option-tabs Last commit date

alignment.js 1 year ago animation.js 1 year ago behavior.js 1 year ago columns.js 1 year ago days-dates.js 1 year ago devices.js 1 year ago roles.js 1 year ago settings.js 1 year ago styling.js 1 year ago visibility.js 1 year ago

styling.js

626 lines

1	const { __ } = wp.i18n;
2	import { TabPanel } from "@wordpress/components";
3	import React from "react";
4
5	const { PanelBody } = wp.components;
6
7	const onSelect = (tabName) => {};
8
9	const StylingTabPanel = (props) => {
10	const validLicense = true;
11	let validLicenseClass = props.validLicense ? "" : "disabled-section";
12	let desktop = "";
13	let tablet = "";
14	let mobile = "";
15	let options_role = "";
16	let widget_options = { ...props.widgetopts_get_settings };
17	let days = [
18	__("Monday"),
19	__("Tuesday"),
20	__("Wednesday"),
21	__("Thursday"),
22	__("Friday"),
23	__("Saturday"),
24	__("Sunday"),
25	];
26	let args = [];
27	let checked = "";
28	let options_dates = "";
29	let from = "";
30	let to = "";
31	let annual = true;
32	let selected = "";
33	let bg_image = "";
34	let background = "";
35	let background_hover = "";
36	let heading = "";
37	let text = "";
38	let links = "";
39	let links_hover = "";
40	let border_color = "";
41	let border_type = "";
42	let border_width = "";
43	let background_input = "";
44	let text_input = "";
45	let border_color_input = "";
46	let border_type_input = "";
47	let border_width_input = "";
48	let background_submit = "";
49	let background_submit_hover = "";
50	let text_submit = "";
51	let border_color_submit = "";
52	let border_type_submit = "";
53	let border_width_submit = "";
54	let list_border_color = "";
55	let table_border_color = "";
56	const liWidget = React.useRef(null);
57	const liForms = React.useRef(null);
58	const liOthers = React.useRef(null);
59
60	const checkLicense = (isLicenseValid) => {
61	if (isLicenseValid) {
62	return "";
63	} else {
64	return (
65	<div className="extended-widget-opts-demo-warning">
66	<p className="widgetopts-unlock-features">
67	<span className="dashicons dashicons-lock"></span>
68	<br />
69	Unlock all Features
70	<br />
71	<a
72	href="https://widget-options.com/?utm_source=wordpressadmin&utm_medium=widgettabs&utm_campaign=widgetoptsprotab"
73	className="button-primary"
74	target="_blank"
75	>
76	Learn More
77	</a>
78	</p>
79	</div>
80	);
81	}
82	};
83
84	const clickTabs = (el, tabName) => {
85	Array.from(
86	document.querySelectorAll(".extended-widget-opts-styling-tab-styling")
87	).forEach((ele) => ele.classList.remove("ui-tabs-active"));
88
89	Array.from(
90	document.querySelectorAll(
91	".extended-widget-opts-inside-tabs .extended-widget-opts-styling-tabcontent-2"
92	)
93	).forEach((ele) => (ele.style.display = "none"));
94
95	document.getElementById(
96	"extended-widget-opts-styling-tab-" + props.widgetId + "-" + tabName
97	).style.display = "block";
98
99	el.current.classList.add("ui-tabs-active");
100	};
101
102	return (
103	<div
104	id={"extended-widget-opts-tab-" + props.widgetId + "-styling"}
105	className={
106	"extended-widget-opts-tabcontent extended-widget-opts-inside-tabcontent extended-widget-opts-tabcontent-styling " +
107	validLicenseClass
108	}
109	style={{ width: "100%" }}
110	>
111	{checkLicense(props.validLicense)}
112
113	<div class="extended-widget-opts-styling-tabs extended-widget-opts-inside-tabs">
114	<input
115	type="hidden"
116	id="extended-widget-opts-styling-selectedtab"
117	value={selected}
118	name={
119	"extended_widget_opts-" +
120	props.widgetId +
121	"[extended_widget_opts][styling][selected]"
122	}
123	/>
124
125	<PanelBody
126	title={__("Widget")}
127	className="margin-x-minus-16"
128	initialOpen={true}
129	>
130	<div
131	id={
132	"extended-widget-opts-styling-tab-" + props.widgetId + "-widget"
133	}
134	class="border-0 padding-0 extended-widget-opts-styling-tabcontent-2 extended-widget-opts-styling-tabcontent extended-widget-opts-inner-tabcontent"
135	>
136	<p
137	style={{ "margin-top": "15px" }}
138	class="widgetopts-subtitle margin-bottom-0"
139	>
140	{__("Background Image")}
141	</p>
142
143	<table class="form-table">
144	<tbody>
145	<tr valign="top">
146	<td colspan="2" style={{ "margin-bottom": "1em" }}>
147	<input
148	type="text"
149	class="widefat extended_widget_opts-bg-image"
150	name={"extended_widget_opts[styling][bg_image]"}
151	placeholder={__("Image Url")}
152	value={""}
153	/>
154	</td>
155	</tr>
156	<tr valign="top">
157	<td colspan="2" class="alright">
158	<input
159	style={{ "margin-right": "2px" }}
160	type="button"
161	class="button-primary extended_widget_opts-bg_uploader"
162	id={
163	"extended_widget_opts-" +
164	props.widgetId +
165	"-bg_uploader"
166	}
167	value={__("Upload")}
168	data-uploader_title="Choose Image"
169	data-uploader_button_text={__("Use Image")}
170	data-widget-id={props.widgetId}
171	/>
172	<input
173	type="button"
174	class="button-secondary extended_widget_opts-remove_image"
175	value={__("Remove")}
176	data-widget-id={props.widgetId}
177	/>
178	</td>
179	</tr>
180	</tbody>
181	</table>
182	<br />
183
184	<p
185	style={{ "padding-top": "30px", "padding-bottom": "10px" }}
186	class="widgetopts-subtitle"
187	>
188	{__("Widget Styling Options")}
189	</p>
190
191	<table class="form-table">
192	<tbody>
193	<tr valign="top">
194	<td scope="row">{__("Background Color")}</td>
195	<td>
196	<input
197	type="text"
198	class="widget-opts-color widget-opts-event-trigger"
199	name={"extended_widget_opts[styling][background]"}
200	value={""}
201	/>
202	</td>
203	</tr>
204	<tr valign="top">
205	<td scope="row">{__("Hover Background Color")}</td>
206	<td>
207	<input
208	type="text"
209	class="widget-opts-color widget-opts-event-trigger"
210	name={"extended_widget_opts[styling][background_hover]"}
211	value={
212	props.extended_widget_opts["styling"] != undefined
213	? props.extended_widget_opts["styling"][
214	"background_hover"
215	]
216	: ""
217	}
218	/>
219	</td>
220	</tr>
221	<tr valign="top">
222	<td scope="row">{__("Headings")}</td>
223	<td>
224	<input
225	type="text"
226	class="widget-opts-color widget-opts-event-trigger"
227	name={"extended_widget_opts[styling][heading]"}
228	value={""}
229	/>
230	</td>
231	</tr>
232	<tr valign="top">
233	<td scope="row">{__("Text")}</td>
234	<td>
235	<input
236	type="text"
237	class="widget-opts-color widget-opts-event-trigger"
238	name={"extended_widget_opts[styling][text]"}
239	value={""}
240	/>
241	</td>
242	</tr>
243	<tr valign="top">
244	<td scope="row">{__("Links")}</td>
245	<td>
246	<input
247	type="text"
248	class="widget-opts-color widget-opts-event-trigger"
249	name={"extended_widget_opts[styling][links]"}
250	value={""}
251	/>
252	</td>
253	</tr>
254	<tr valign="top">
255	<td scope="row">{__("Links Hover")}</td>
256	<td>
257	<input
258	type="text"
259	class="widget-opts-color widget-opts-event-trigger"
260	name={"extended_widget_opts[styling][links_hover]"}
261	value={""}
262	/>
263	</td>
264	</tr>
265	<tr valign="top">
266	<td scope="row">{__("Border Color")}</td>
267	<td>
268	<input
269	type="text"
270	class="widget-opts-color widget-opts-event-trigger"
271	name={"extended_widget_opts[styling][border_color]"}
272	value={""}
273	/>
274	</td>
275	</tr>
276	<tr valign="top">
277	<td scope="row">{__("Border Style")}</td>
278	<td>
279	<select
280	class="widefat"
281	name={"extended_widget_opts[styling][border_type]"}
282	value={""}
283	>
284	<option value="">{__("Default")}</option>
285	<option value="solid">{__("Solid")}</option>
286	<option value="dashed">{__("Dashed")}</option>
287	<option value="dotted">{__("Dotted")}</option>
288	<option value="double">{__("Double")}</option>
289	</select>
290	</td>
291	</tr>
292	<tr valign="top">
293	<td scope="row">{__("Border Width")}</td>
294	<td>
295	<input
296	type="text"
297	size="5"
298	class="inputsize5"
299	name={"extended_widget_opts[styling][border_width]"}
300	value={""}
301	/>
302	px
303	</td>
304	</tr>
305	</tbody>
306	</table>
307	</div>
308	</PanelBody>
309
310	<PanelBody
311	title={__("Forms")}
312	className="margin-x-minus-16"
313	initialOpen={false}
314	>
315	<div
316	id={"extended-widget-opts-styling-tab-" + props.widgetId + "-form"}
317	class="border-0 padding-0 extended-widget-opts-styling-tabcontent-2 extended-widget-opts-styling-tabcontent extended-widget-opts-inner-tabcontent"
318	>
319	<p style={{ "margin-top": "15px" }} class="widgetopts-subtitle">
320	{__("Textbox & Textarea Styling Options")}
321	</p>
322
323	<table class="form-table">
324	<tbody>
325	<tr valign="top">
326	<td scope="row">{__("Background")}</td>
327	<td>
328	<input
329	type="text"
330	className="widget-opts-color widefat widget-opts-event-trigger"
331	name={"extended_widget_opts[styling][background_input]"}
332	value={""}
333	/>
334	</td>
335	</tr>
336	<tr valign="top">
337	<td scope="row">{__("Text")}</td>
338	<td>
339	<input
340	type="text"
341	className="widget-opts-color widefat widget-opts-event-trigger"
342	name={"extended_widget_opts[styling][text_input]"}
343	value={""}
344	/>
345	</td>
346	</tr>
347	<tr valign="top">
348	<td scope="row">{__("Border Color")}</td>
349	<td>
350	<input
351	type="text"
352	className="widget-opts-color widefat widget-opts-event-trigger"
353	name={"extended_widget_opts[styling][border_color_input]"}
354	value={""}
355	/>
356	</td>
357	</tr>
358	<tr valign="top">
359	<td scope="row">{__("Border Style")}</td>
360	<td>
361	<select
362	class="widefat"
363	name={"extended_widget_opts[styling][border_type_input]"}
364	value={""}
365	>
366	<option value="">{__("Default")}</option>
367	<option value="solid">{__("Solid")}</option>
368	<option value="dashed">{__("Dashed")}</option>
369	<option value="dotted">{__("Dotted")}</option>
370	<option value="double">{__("Double")}</option>
371	</select>
372	</td>
373	</tr>
374	<tr valign="top">
375	<td scope="row">{__("Border Width")}</td>
376	<td>
377	<input
378	type="text"
379	size="5"
380	class="inputsize5"
381	name={"extended_widget_opts[styling][border_width_input]"}
382	value={""}
383	/>
384	px
385	</td>
386	</tr>
387	</tbody>
388	</table>
389
390	<p
391	style={{
392	"padding-top": "40px",
393	"padding-bottom": "10px",
394	"margin-bottom": "5px",
395	}}
396	class="widgetopts-subtitle"
397	>
398	{__("Submit Button Styling Options")}
399	</p>
400
401	<table class="form-table">
402	<tbody>
403	<tr valign="top">
404	<td scope="row">{__("Background")}</td>
405	<td>
406	<input
407	type="text"
408	className="widget-opts-color widefat widget-opts-event-trigger"
409	name={"extended_widget_opts[styling][background_submit]"}
410	value={""}
411	/>
412	</td>
413	</tr>
414	<tr valign="top">
415	<td scope="row">{__("Hover Background")}</td>
416	<td>
417	<input
418	type="text"
419	className="widget-opts-color widefat widget-opts-event-trigger"
420	name={
421	"extended_widget_opts[styling][background_submit_hover]"
422	}
423	value={""}
424	/>
425	</td>
426	</tr>
427	<tr valign="top">
428	<td scope="row">{__("Text")}</td>
429	<td>
430	<input
431	type="text"
432	className="widget-opts-color widefat widget-opts-event-trigger"
433	name={"extended_widget_opts[styling][text_submit]"}
434	value={""}
435	/>
436	</td>
437	</tr>
438	<tr valign="top">
439	<td scope="row">{__("Border Color")}</td>
440	<td>
441	<input
442	type="text"
443	className="widefat widget-opts-color widget-opts-event-trigger"
444	name={
445	"extended_widget_opts[styling][border_color_submit]"
446	}
447	value={""}
448	/>
449	</td>
450	</tr>
451	<tr valign="top">
452	<td scope="row">{__("Border Style")}</td>
453	<td>
454	<select
455	class="widefat"
456	name={"extended_widget_opts[styling][border_type_submit]"}
457	value={""}
458	>
459	<option value="">{__("Default")}</option>
460	<option value="solid">{__("Solid")}</option>
461	<option value="dashed">{__("Dashed")}</option>
462	<option value="dotted">{__("Dotted")}</option>
463	<option value="double">{__("Double")}</option>
464	</select>
465	</td>
466	</tr>
467	<tr valign="top">
468	<td scope="row">{__("Border Width")}</td>
469	<td>
470	<input
471	type="text"
472	size="5"
473	class="inputsize5"
474	name={
475	"extended_widget_opts[styling][border_width_submit]"
476	}
477	value={""}
478	/>
479	px
480	</td>
481	</tr>
482	</tbody>
483	</table>
484	</div>
485	</PanelBody>
486
487	<PanelBody
488	title={__("Others")}
489	className="margin-x-minus-16"
490	initialOpen={false}
491	>
492	<div
493	id={
494	"extended-widget-opts-styling-tab-" + props.widgetId + "-others"
495	}
496	class="border-0 padding-0 extended-widget-opts-styling-tabcontent-2 extended-widget-opts-styling-tabcontent extended-widget-opts-inner-tabcontent"
497	>
498	<p style={{ "margin-top": "25px", "text-align": "left" }}>
499	<small>
500	{__(
501	"Styling will only reflect if the element and style is available on your theme."
502	)}
503	</small>
504	</p>
505
506	<p class="widgetopts-subtitle">{__("Lists")}</p>
507
508	<table class="form-table">
509	<tbody>
510	<tr valign="top">
511	<td scope="row">{__("Border Color")}</td>
512	<td>
513	<input
514	type="text"
515	className="widefat widget-opts-color widget-opts-event-trigger"
516	name={"extended_widget_opts[styling][list_border_color]"}
517	value={""}
518	/>
519	</td>
520	</tr>
521	<tr valign="top">
522	<td scope="row">{__("Border Style")}</td>
523	<td>
524	<select
525	class="widefat"
526	name={"extended_widget_opts[styling][list_border_type]"}
527	value={""}
528	>
529	<option value="">{__("Default")}</option>
530	<option value="solid">{__("Solid")}</option>
531	<option value="dashed">{__("Dashed")}</option>
532	<option value="dotted">{__("Dotted")}</option>
533	<option value="double">{__("Double")}</option>
534	</select>
535	</td>
536	</tr>
537
538	<tr valign="top">
539	<td scope="row">{__("Border Width")}</td>
540	<td>
541	<input
542	type="text"
543	size="5"
544	class="inputsize5"
545	name={"extended_widget_opts[styling][list_border_width]"}
546	value={""}
547	/>
548	px
549	</td>
550	</tr>
551	</tbody>
552	</table>
553
554	<p class="widgetopts-subtitle">{__("Table")}</p>
555
556	<table class="form-table">
557	<tbody>
558	<tr valign="top">
559	<td scope="row">{__("Border Color")}</td>
560	<td>
561	<input
562	type="text"
563	className="widefat widget-opts-color widget-opts-event-trigger"
564	name={"extended_widget_opts[styling][table_border_color]"}
565	value={""}
566	/>
567	</td>
568	</tr>
569
570	<tr valign="top">
571	<td scope="row">{__("Border Style")}</td>
572	<td>
573	<select
574	class="widefat"
575	name={"extended_widget_opts[styling][table_border_type]"}
576	value={""}
577	>
578	<option value="">{__("Default")}</option>
579	<option value="solid">{__("Solid")}</option>
580	<option value="dashed">{__("Dashed")}</option>
581	<option value="dotted">{__("Dotted")}</option>
582	<option value="double">{__("Double")}</option>
583	</select>
584	</td>
585	</tr>
586
587	<tr valign="top">
588	<td scope="row">{__("Border Width")}</td>
589	<td>
590	<input
591	type="text"
592	size="5"
593	class="inputsize5"
594	name={"extended_widget_opts[styling][table_border_width]"}
595	value={""}
596	/>
597	px
598	</td>
599	</tr>
600	</tbody>
601	</table>
602	</div>
603	</PanelBody>
604
605	{/do_action( 'extended_widgetopts_tabcontents_styling', $args );/}
606	<div class="extended-widget-opts-clearfix"></div>
607	</div>
608
609	<style>
610	{`
611	.extended-widget-opts-styling-tabcontent .form-table tr {
612	display: flex;
613	flex-direction: column;
614	}
615	.extended-widget-opts-styling-tabcontent .form-table td {
616	padding-top: 5px;
617	padding-bottom: 0px;
618	}
619	`}
620	</style>
621	</div>
622	);
623	};
624
625	export default StylingTabPanel;
626