columns.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 / columns.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

columns.js

343 lines

1	const { __ } = wp.i18n;
2	import { TabPanel } from "@wordpress/components";
3
4	const onSelect = (tabName) => {};
5
6	const ColumsTabPanel = (props) => {
7	/* columns */
8	const handleInputChangeDesktop = (event) => {
9	let _attribute = { ...props.extended_widget_opts };
10	if (
11	_attribute["column"] == undefined \|\|
12	(_attribute["column"] != undefined && _attribute["column"].length == 0)
13	) {
14	_attribute["column"] = {};
15	}
16
17	_attribute["column"]["desktop"] = event.target.value;
18	props.onUpdateDynamicAttribute(_attribute, props.widgetId);
19	};
20
21	const handleInputChangeTablet = (event) => {
22	let _attribute = { ...props.extended_widget_opts };
23	if (_attribute["column"] == undefined) {
24	_attribute["column"] = {};
25	}
26
27	_attribute["column"]["tablet"] = event.target.value;
28	props.onUpdateDynamicAttribute(_attribute, props.widgetId);
29	};
30
31	const handleInputChangeMobile = (event) => {
32	let _attribute = { ...props.extended_widget_opts };
33	if (_attribute["column"] == undefined) {
34	_attribute["column"] = {};
35	}
36
37	_attribute["column"]["mobile"] = event.target.value;
38	props.onUpdateDynamicAttribute(_attribute, props.widgetId);
39	};
40
41	/* clearfix */
42	const handleInputChangeClearDesktop = (event) => {
43	let _attribute = { ...props.extended_widget_opts };
44	if (_attribute["clearfix"] == undefined) {
45	_attribute["clearfix"] = {};
46	}
47
48	if (event.target.checked) {
49	_attribute["clearfix"]["desktop"] = 1;
50	} else {
51	delete _attribute["clearfix"]["desktop"];
52	}
53
54	props.onUpdateDynamicAttribute(_attribute, props.widgetId);
55	};
56
57	const handleInputChangeClearTablet = (event) => {
58	let _attribute = { ...props.extended_widget_opts };
59	if (_attribute["clearfix"] == undefined) {
60	_attribute["clearfix"] = {};
61	}
62
63	if (event.target.checked) {
64	_attribute["clearfix"]["tablet"] = 1;
65	} else {
66	delete _attribute["clearfix"]["tablet"];
67	}
68
69	props.onUpdateDynamicAttribute(_attribute, props.widgetId);
70	};
71
72	const handleInputChangeClearMobile = (event) => {
73	let _attribute = { ...props.extended_widget_opts };
74	if (_attribute["clearfix"] == undefined) {
75	_attribute["clearfix"] = {};
76	}
77
78	if (event.target.checked) {
79	_attribute["clearfix"]["mobile"] = 1;
80	} else {
81	delete _attribute["clearfix"]["mobile"];
82	}
83
84	props.onUpdateDynamicAttribute(_attribute, props.widgetId);
85	};
86
87	const validLicense = true;
88	let validLicenseClass = props.validLicense ? "" : "disabled-section";
89
90	const checkLicense = (isLicenseValid) => {
91	if (isLicenseValid) {
92	return "";
93	} else {
94	return (
95	<div className="extended-widget-opts-demo-warning">
96	<p className="widgetopts-unlock-features">
97	<span className="dashicons dashicons-lock"></span>
98	<br />
99	Unlock all Features
100	<br />
101	<a
102	href="https://widget-options.com/?utm_source=wordpressadmin&utm_medium=widgettabs&utm_campaign=widgetoptsprotab"
103	className="button-primary"
104	target="_blank"
105	>
106	Learn More
107	</a>
108	</p>
109	</div>
110	);
111	}
112	};
113
114	return (
115	<div
116	id={"extended-widget-opts-tab-" + props.widgetId + "-columns"}
117	className={
118	"extended-widget-opts-tabcontent extended-widget-opts-tabcontent-columns " +
119	validLicenseClass
120	}
121	style={{ "margin-left": "16px" }}
122	>
123	{checkLicense(props.validLicense)}
124
125	<table className="form-table">
126	<tbody>
127	<tr valign="top">
128	<td scope="row" style={{ "padding-top": "0" }}>
129	<strong>{__("Devices")}</strong>
130	</td>
131	<td style={{ "padding-top": "0" }}>
132	<strong>{__("Columns")}</strong>
133	</td>
134	</tr>
135	<tr valign="top">
136	<td scope="row">
137	<span className="dashicons dashicons-desktop"></span>{" "}
138	{__("Desktop")}
139	</td>
140	<td>
141	<select
142	className="widefat"
143	name={"extended_widget_opts[column][desktop]"}
144	value={
145	props.extended_widget_opts["column"] != undefined &&
146	props.extended_widget_opts["column"]["desktop"] != undefined
147	? props.extended_widget_opts["column"]["desktop"]
148	: ""
149	}
150	>
151	<optgroup label={__("One Column")}>
152	<option value="12">1/1</option>
153	</optgroup>
154	<optgroup label={__("Two Columns")}>
155	<option value="6">1/2</option>
156	</optgroup>
157	<optgroup label={__("Three Columns")}>
158	<option value="4">1/3</option>
159	<option value="8">2/3</option>
160	</optgroup>
161	<optgroup label={__("Four Columns")}>
162	<option value="3">1/4</option>
163	<option value="7">2/4</option>
164	<option value="9">3/4</option>
165	</optgroup>
166	</select>
167	</td>
168	</tr>
169	<tr valign="top">
170	<td scope="row">
171	<span className="dashicons dashicons-tablet"></span>{" "}
172	{__("Tablet")}
173	</td>
174	<td>
175	<select
176	className="widefat"
177	name={"extended_widget_opts[column][tablet]"}
178	value={
179	props.extended_widget_opts["column"] != undefined &&
180	props.extended_widget_opts["column"]["tablet"] != undefined
181	? props.extended_widget_opts["column"]["tablet"]
182	: ""
183	}
184	>
185	<optgroup label={__("One Column")}>
186	<option value="12">1/1</option>
187	</optgroup>
188	<optgroup label={__("Two Columns")}>
189	<option value="6">1/2</option>
190	</optgroup>
191	<optgroup label={__("Three Columns")}>
192	<option value="4">1/3</option>
193	<option value="8">2/3</option>
194	</optgroup>
195	<optgroup label={__("Four Columns")}>
196	<option value="3">1/4</option>
197	<option value="7">2/4</option>
198	<option value="9">3/4</option>
199	</optgroup>
200	</select>
201	</td>
202	</tr>
203	<tr valign="top">
204	<td scope="row">
205	<span className="dashicons dashicons-smartphone"></span>{" "}
206	{__("Mobile")}
207	</td>
208	<td>
209	<select
210	className="widefat"
211	name={"extended_widget_opts[column][mobile]"}
212	value={
213	props.extended_widget_opts["column"] != undefined &&
214	props.extended_widget_opts["column"]["mobile"] != undefined
215	? props.extended_widget_opts["column"]["mobile"]
216	: ""
217	}
218	>
219	<optgroup label={__("One Column")}>
220	<option value="12">1/1</option>
221	</optgroup>
222	<optgroup label={__("Two Columns")}>
223	<option value="6">1/2</option>
224	</optgroup>
225	<optgroup label={__("Three Columns")}>
226	<option value="4">1/3</option>
227	<option value="8">2/3</option>
228	</optgroup>
229	<optgroup label={__("Four Columns")}>
230	<option value="3">1/4</option>
231	<option value="7">2/4</option>
232	<option value="9">3/4</option>
233	</optgroup>
234	</select>
235	</td>
236	</tr>
237	</tbody>
238	</table>
239
240	<p style={{ "padding-left": "0px", "margin-top": "30px" }}>
241	<strong>{__("Clear Floating Options")}</strong> <br />
242	<small>
243	{__(
244	"If you are having floating issues with any devices for this widget, check the clearfix option to fix the floating issue."
245	)}
246	</small>
247	</p>
248	<table className="form-table">
249	<tbody>
250	<tr valign="top">
251	<td scope="row">
252	<strong>{__("Devices")}</strong>
253	</td>
254	<td>
255	<strong>{__("Clearfix")}</strong>
256	</td>
257	</tr>
258	<tr valign="top">
259	<td scope="row">
260	<span className="dashicons dashicons-desktop"></span>{" "}
261	<label
262	for={
263	"extended_widget_opts-" + props.widgetId + "-clearfix-desktop"
264	}
265	>
266	{__("Desktop")}
267	</label>
268	</td>
269	<td>
270	<input
271	type="checkbox"
272	name={"extended_widget_opts[clearfix][desktop]"}
273	checked={
274	props.extended_widget_opts["clearfix"] != undefined &&
275	props.extended_widget_opts["clearfix"]["desktop"] == 1
276	? true
277	: false
278	}
279	/>
280	</td>
281	</tr>
282	<tr valign="top">
283	<td scope="row">
284	<span className="dashicons dashicons-tablet"></span>{" "}
285	<label
286	for={
287	"extended_widget_opts-" + props.widgetId + "-clearfix-tablet"
288	}
289	>
290	{__("Tablet")}
291	</label>
292	</td>
293	<td>
294	<input
295	type="checkbox"
296	name={"extended_widget_opts[clearfix][tablet]"}
297	id={
298	"extended_widget_opts-" + props.widgetId + "-clearfix-tablet"
299	}
300	checked={
301	props.extended_widget_opts["clearfix"] != undefined &&
302	props.extended_widget_opts["clearfix"]["tablet"] == 1
303	? true
304	: false
305	}
306	/>
307	</td>
308	</tr>
309	<tr valign="top">
310	<td scope="row">
311	<span className="dashicons dashicons-smartphone"></span>{" "}
312	<label
313	for={
314	"extended_widget_opts-" + props.widgetId + "-clearfix-mobile"
315	}
316	>
317	{__("Mobile")}
318	</label>
319	</td>
320	<td>
321	<input
322	type="checkbox"
323	name={"extended_widget_opts[clearfix][mobile]"}
324	id={
325	"extended_widget_opts-" + props.widgetId + "-clearfix-mobile"
326	}
327	checked={
328	props.extended_widget_opts["clearfix"] != undefined &&
329	props.extended_widget_opts["clearfix"]["mobile"] == 1
330	? true
331	: false
332	}
333	/>
334	</td>
335	</tr>
336	</tbody>
337	</table>
338	</div>
339	);
340	};
341
342	export default ColumsTabPanel;
343