← All changes | includes/widgets/custom-table.php +243 -120 1.2.1 → 1.3.17 View file →

		@@ -1,5 +1,6 @@
1	1	<?php
	2	+
2	3	namespace UiCoreElements;
3	4
4	5	use Elementor\Plugin;
5	6	use Elementor\Controls_Manager;
		@@ -8,9 +9,10 @@
8	9	use UiCoreElements\Utils\Animation_Trait;
9	10
10	11	defined('ABSPATH') || exit();
11	12
12		-class CustomTable extends UiCoreNestedWidget {
	13	+class CustomTable extends UiCoreNestedWidget
	14	+{
13	15
14	16	use Animation_Trait;
15	17
16	18	public function get_name()
		@@ -40,53 +42,61 @@
40	42	public function get_scripts()
41	43	{
42	44	return [];
43	45	}
44		- // TODO: remove or set as false, after 3.30, when the full deprecation of widget innet wrapper is ready
45		- public function has_widget_inner_wrapper(): bool {
46		- return true;
47		- }
	46	+ public function has_widget_inner_wrapper(): bool
	47	+ {
	48	+ // TODO: remove after Optmized Markup experiment is merged to the core
	49	+ return ! \Elementor\Plugin::$instance->experiments->is_feature_active('e_optimized_markup');
	50	+ }
48	51
49		- protected function carousel_content_container( int $index ) {
50		- return [
51		- 'elType' => 'container',
52		- 'settings' => [
	52	+ protected function carousel_content_container(int $index)
	53	+ {
	54	+ return [
	55	+ 'elType' => 'container',
	56	+ 'settings' => [
53	57	/* translators: %s: Item index */
54		- '_title' => sprintf( __( 'Cel #%s', 'uicore-elements' ), $index ),
55		- 'content_width' => 'full',
56		- // 'flex_justify_content' => 'center',
57		- // 'flex_align_items' => 'center',
58		- // the settings work only ofr first default items
59		- ],
	58	+ '_title' => sprintf(__('Cel #%s', 'uicore-elements'), $index),
	59	+ 'content_width' => 'full',
	60	+ ],
60	61	];
61		- }
	62	+ }
62	63
63		- protected function get_default_children_elements() {
64		- return [
65		- $this->carousel_content_container( 1 ),
66		- $this->carousel_content_container( 2 ),
67		- $this->carousel_content_container( 3 ),
68		- ];
69		- }
	64	+ protected function get_default_children_elements()
	65	+ {
	66	+ return [
	67	+ $this->carousel_content_container(1),
	68	+ $this->carousel_content_container(2),
	69	+ $this->carousel_content_container(3),
	70	+ ];
	71	+ }
70	72
71		- protected function get_default_repeater_title_setting_key() {
72		- return 'table_cels';
73		- }
	73	+ protected function get_default_repeater_title_setting_key()
	74	+ {
	75	+ return 'item';
	76	+ }
74	77
75		- protected function get_default_children_title() {
76		- /* translators: %d: Item index */
77		- return esc_html__( 'Cell #%d', 'uicore-elements' );
78		- }
79		- protected function get_default_children_placeholder_selector() {
80		- return '.ui-e-table';
81		- }
	78	+ protected function get_default_children_title()
	79	+ {
	80	+ /* translators: %d: Item index */
	81	+ return esc_html__('Cel #%d', 'uicore-elements');
	82	+ }
	83	+ protected function get_default_children_placeholder_selector()
	84	+ {
	85	+ return '.ui-e-table';
	86	+ }
82	87
	88	+ protected function get_default_children_container_placeholder_selector()
	89	+ {
	90	+ return '.ui-e-table-editor-placeholder';
	91	+ }
	92	+
83	93	protected function register_controls()
84	94	{
85		- if( !Plugin::$instance->experiments->is_feature_active('nested-elements') ) {
86		- $this->nesting_fallback('controls');
87		- return;
88		- }
	95	+ if (!Plugin::$instance->experiments->is_feature_active('nested-elements')) {
	96	+ $this->nesting_fallback('controls');
	97	+ return;
	98	+ }
89	99
90	100	$this->start_controls_section(
91	101	'section_content',
92	102	[
		@@ -94,8 +104,18 @@
94	104	'tab' => Controls_Manager::TAB_CONTENT,
95	105	]
96	106	);
97	107
	108	+ $this->add_control(
	109	+ 'rerender_table',
	110	+ [
	111	+ 'label' => esc_html__('Preview', 'uicore-elements'),
	112	+ 'type' => Controls_Manager::BUTTON,
	113	+ 'text' => esc_html__('Refresh Table', 'uicore-elements'),
	114	+ 'separator' => 'before',
	115	+ 'event' => 'ui-e-custom-table-rerender',
	116	+ ]
	117	+ );
98	118
99	119	//Columns
100	120	$columns = new Repeater();
101	121	$columns->add_responsive_control(
		@@ -102,9 +122,9 @@
102	122	'col_size',
103	123	[
104	124	'label' => __('Column Size', 'uicore-elements'),
105	125	'type' => Controls_Manager::SLIDER,
106		- 'size_units' => ['px', 'fr','custom'],
	126	+ 'size_units' => ['px', 'fr', 'custom'],
107	127	'default' => [
108	128	'size' => 300,
109	129	'unit' => 'px',
110	130	],
		@@ -117,9 +137,9 @@
117	137	'min' => 1,
118	138	'max' => 12,
119	139	],
120	140	],
121		- 'render_type' => 'template',
	141	+ 'render_type' => 'ui',
122	142	'selectors' => [
123	143	'{{WRAPPER}}' => '--ui-e-last:{{SIZE}}{{UNIT}};',
124	144	],
125	145	]
		@@ -130,13 +150,13 @@
130	150	[
131	151	'type' => Controls_Manager::REPEATER,
132	152	'fields' => $columns->get_controls(),
133	153	'title_field' => 'Column',
134		- 'render_type' => 'template',
	154	+ 'render_type' => 'ui',
135	155	'default' => [
136		- [ 'col_size' => [ 'size' => 1, 'unit' => 'fr' ] ],
137		- [ 'col_size' => [ 'size' => 1, 'unit' => 'fr' ] ],
138		- [ 'col_size' => [ 'size' => 1, 'unit' => 'fr' ] ],
	156	+ ['col_size' => ['size' => 1, 'unit' => 'fr']],
	157	+ ['col_size' => ['size' => 1, 'unit' => 'fr']],
	158	+ ['col_size' => ['size' => 1, 'unit' => 'fr']],
139	159	],
140	160	]
141	161	);
142	162
		@@ -148,8 +168,9 @@
148	168	'item',
149	169	[
150	170	'label' => __('Title', 'uicore-elements'),
151	171	'type' => Controls_Manager::TEXT,
	172	+ 'render_type' => 'ui'
152	173	]
153	174	);
154	175
155	176	$this->add_control(
		@@ -159,11 +180,11 @@
159	180	'fields' => $repeater->get_controls(),
160	181	'title_field' => '{{{ item }}}',
161	182	'allow_empty' => false,
162	183	'default' => [
163		- [ 'item' => __( 'Cel #1', 'uicore-elements' ) ],
164		- [ 'item' => __( 'Cel #2', 'uicore-elements' ) ],
165		- [ 'item' => __( 'Cel #3', 'uicore-elements' ) ],
	184	+ ['item' => __('Cel #1', 'uicore-elements')],
	185	+ ['item' => __('Cel #2', 'uicore-elements')],
	186	+ ['item' => __('Cel #3', 'uicore-elements')],
166	187	],
167	188	]
168	189	);
169	190
		@@ -178,21 +199,105 @@
178	199	'tab' => Controls_Manager::TAB_STYLE,
179	200	]
180	201	);
181	202
182		- //even rows background color
	203	+ $this->start_controls_tabs(
	204	+ 'row_tabs'
	205	+ );
	206	+
	207	+ $this->start_controls_tab(
	208	+ 'odd_row',
	209	+ [
	210	+ 'label' => esc_html__('Odd row', 'textdomain'),
	211	+ ]
	212	+ );
	213	+
183	214	$this->add_control(
	215	+ 'odd_row_bg_color',
	216	+ [
	217	+ 'label' => __('Row background', 'uicore-elements'),
	218	+ 'type' => Controls_Manager::COLOR,
	219	+ 'selectors' => [
	220	+ '{{WRAPPER}} .ui-e-table > .ui-e-odd' => 'background-color: {{VALUE}};',
	221	+ ],
	222	+ ]
	223	+ );
	224	+
	225	+ $this->add_control(
	226	+ 'odd_row_padding',
	227	+ [
	228	+ 'label' => esc_html__('Row Padding', 'uicore-elements'),
	229	+ 'type' => Controls_Manager::DIMENSIONS,
	230	+ 'size_units' => ['px', 'em', 'rem', 'custom'],
	231	+ 'selectors' => [
	232	+ "{{WRAPPER}} .ui-e-table > .ui-e-odd" => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	233	+ ],
	234	+ ]
	235	+ );
	236	+
	237	+ $this->add_control(
	238	+ 'odd_row_radius',
	239	+ [
	240	+ 'label' => esc_html__('Row Border Radius', 'uicore-elements'),
	241	+ 'type' => Controls_Manager::DIMENSIONS,
	242	+ 'size_units' => ['px', 'em', 'rem', 'custom'],
	243	+ 'selectors' => [
	244	+ "{{WRAPPER}} .ui-e-table > .ui-e-odd.ui-e-first-row-cel" => 'border-radius: {{TOP}}{{UNIT}} 0 0 {{LEFT}}{{UNIT}};',
	245	+ "{{WRAPPER}} .ui-e-table > .ui-e-odd.ui-e-last-row-cel" => 'border-radius: 0 {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} 0;'
	246	+ ],
	247	+ ]
	248	+ );
	249	+
	250	+ $this->end_controls_tab();
	251	+
	252	+ $this->start_controls_tab(
	253	+ 'even_row',
	254	+ [
	255	+ 'label' => esc_html__('Even row', 'textdomain'),
	256	+ ]
	257	+ );
	258	+
	259	+ $this->add_control(
184	260	'even_row_bg_color',
185	261	[
186		- 'label' => __('Even Rows Background', 'uicore-elements'),
	262	+ 'label' => __('Row background', 'uicore-elements'),
187	263	'type' => Controls_Manager::COLOR,
188	264	'selectors' => [
189		- '{{WRAPPER}} .ui-e-table .ui-e-even' => 'background-color: {{VALUE}};',
	265	+ '{{WRAPPER}} .ui-e-table > .ui-e-even' => 'background-color: {{VALUE}};',
190	266	],
191	267	]
192	268	);
193	269
	270	+ $this->add_control(
	271	+ 'even_row_padding',
	272	+ [
	273	+ 'label' => esc_html__('Row Padding', 'uicore-elements'),
	274	+ 'type' => Controls_Manager::DIMENSIONS,
	275	+ 'size_units' => ['px', 'em', 'rem', 'custom'],
	276	+ 'selectors' => [
	277	+ "{{WRAPPER}} .ui-e-table > .ui-e-even" => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	278	+ ],
	279	+ ]
	280	+ );
194	281
	282	+ $this->add_control(
	283	+ 'even_row_radius',
	284	+ [
	285	+ 'label' => esc_html__('Row Border Radius', 'uicore-elements'),
	286	+ 'type' => Controls_Manager::DIMENSIONS,
	287	+ 'size_units' => ['px', 'em', 'rem', 'custom'],
	288	+ 'selectors' => [
	289	+ "{{WRAPPER}} .ui-e-table > .ui-e-even.ui-e-first-row-cel" => 'border-radius: {{TOP}}{{UNIT}} 0 0 {{LEFT}}{{UNIT}};',
	290	+ "{{WRAPPER}} .ui-e-table > .ui-e-even.ui-e-last-row-cel" => 'border-radius: 0 {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} 0;'
	291	+ ],
	292	+ ]
	293	+ );
	294	+
	295	+ $this->end_controls_tab();
	296	+
	297	+ $this->end_controls_tabs();
	298	+
	299	+
195	300	$this->end_controls_section();
196	301	}
197	302
198	303	protected function build_grid_css($cols)
		@@ -202,19 +307,14 @@
202	307	$grid_css = '';
203	308	$grid_columns = [];
204	309	$breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
205	310
206		- $fallback = [
207		- 'size' => 2,
208		- 'unit' => 'fr',
209		- ];
210		-
211	311	foreach ($cols as $index => $item) {
212	312
213	313	// Set desktop column size
214	314	$grid_columns['desktop'][] = isset($item['col_size']['size']) && isset($item['col_size']['unit'])
215	315	? $item['col_size']['size'] . $item['col_size']['unit']
216		- : $fallback['size'] . $fallback['unit'];
	316	+ : '1fr'; // fallback
217	317
218	318	foreach ($breakpoints as $breakpoint => $object) {
219	319	$size_slug = 'col_size_' . $breakpoint;
220	320
		@@ -237,12 +337,12 @@
237	337	}
238	338
239	339	public function render()
240	340	{
241		- if(!Plugin::$instance->experiments->is_feature_active('nested-elements')) {
242		- $this->nesting_fallback();
243		- return;
244		- }
	341	+ if (!Plugin::$instance->experiments->is_feature_active('nested-elements')) {
	342	+ $this->nesting_fallback();
	343	+ return;
	344	+ }
245	345
246	346	$cells = $this->get_settings_for_display('cells');
247	347	$cols = $this->get_settings_for_display('columns');
248	348	$grid_css = $this->build_grid_css($cols);
		@@ -249,93 +349,116 @@
249	349
250	350	// Add it to the widget wrapper
251	351	$this->add_render_attribute('_wrapper', ['style' => $grid_css]);
252	352
253		- ?>
	353	+?>
254	354	<div class="ui-e-table">
255	355	<?php
256	356
257		- $columns = count($cols);
	357	+ $columns = count($cols);
258	358
259		- foreach ($cells as $index => $item) {
260		- $is_even = floor($index / $columns) % 2 !== 0;
	359	+ foreach ($cells as $index => $item) {
	360	+ $row_class = floor($index / $columns) % 2 !== 0
	361	+ ? 'ui-e-even'
	362	+ : 'ui-e-odd';
261	363
262		- // TODO: maybe there's a way of adding the class to the child wrapper instead of printing an extra element
263		- if ($is_even) {
264		- ?>
265		- <div class="ui-e-even">
266		- <?php $this->print_child($index); ?>
267		- </div>
268		- <?php
269		- } else {
270		- $this->print_child($index);
271		- }
	364	+ // TODO: in the future experiment a nth-child approach so we don't need this first/last classes
	365	+ // Add classes to the first and last items of each row
	366	+ if ($index % $columns === 0) {
	367	+ $row_class .= ' ui-e-first-row-cel';
	368	+ } else if (($index + 1) % $columns === 0) {
	369	+ $row_class .= ' ui-e-last-row-cel';
272	370	}
	371	+
	372	+ $this->print_child($index, ['class' => $row_class]);
	373	+ }
273	374	?>
274	375	</div>
275		- <?php
	376	+ <?php
276	377	}
277	378
	379	+ public function print_child($index, array $atts = [])
	380	+ {
	381	+ $children = $this->get_children();
278	382
279		- protected function get_initial_config(): array {
280		- if (Plugin::$instance->experiments->is_feature_active('e_nested_atomic_repeaters')) {
281		- return array_merge(parent::get_initial_config(), [
282		- 'support_improved_repeaters' => true,
283		- 'node' => '.ui-e-table'
284		- ]);
285		- }
	383	+ if (! empty($children[$index])) {
286	384
287		- return parent::get_initial_config();
288		- }
	385	+ // Add custom attributes to each child container.
	386	+ if (!empty($atts)) {
	387	+ //$child_settings = $children[ $index ]->get_settings_for_display();
	388	+ foreach ($atts as $key => $value) {
	389	+ $children[$index]->add_render_attribute('_wrapper', $key, $value);
	390	+ }
	391	+ }
289	392
	393	+ $children[$index]->print_element();
	394	+ }
	395	+ }
290	396
291		- protected function content_template() {
292		- ?>
	397	+ protected function get_initial_config(): array
	398	+ {
	399	+ if (Plugin::$instance->experiments->is_feature_active('e_nested_atomic_repeaters')) {
	400	+ return array_merge(parent::get_initial_config(), [
	401	+ 'support_improved_repeaters' => true,
	402	+ 'node' => '.ui-e-table'
	403	+ ]);
	404	+ }
	405	+
	406	+ return parent::get_initial_config();
	407	+ }
	408	+
	409	+
	410	+ protected function content_template()
	411	+ {
	412	+ ?>
293	413	<#
294		- const cols = settings.columns;
295		- const cols_qty = '--ui-e-cols-qty:' + settings.columns.length;
	414	+ const cols=settings.columns || [];
	415	+ const cells=settings.cells || [];
	416	+ const cols_qty='--ui-e-cols-qty:' + cols.length;
296	417
297	418	if ( cols ) {
298		- let gridCss = '';
299		- const gridColumns = {};
300		- const breakpoints = elementorFrontend.config.responsive.activeBreakpoints;
	419	+ let gridCss='' ;
	420	+ const gridColumns={};
	421	+ const breakpoints=elementorFrontend.config.responsive.activeBreakpoints;
301	422
302		- _.each( cols, function( item, index ) {
	423	+ _.each( cols, function( item, index ) {
303	424
304		- if ( ! gridColumns.desktop ) {
305		- gridColumns.desktop = [];
306		- }
	425	+ if ( ! gridColumns.desktop ) {
	426	+ gridColumns.desktop=[];
	427	+ }
307	428
308		- gridColumns.desktop.push( item.col_size.size + item.col_size.unit );
	429	+ gridColumns.desktop.push( item.col_size.size + item.col_size.unit );
309	430
310		- _.each( breakpoints, function( object, breakpoint ) {
311		- const sizeSlug = 'col_size_' + breakpoint;
	431	+ _.each( breakpoints, function( object, breakpoint ) {
	432	+ const sizeSlug='col_size_' + breakpoint;
312	433
313		- if ( item[sizeSlug] && item[sizeSlug].size ) {
314		- if ( ! gridColumns[breakpoint] ) {
315		- gridColumns[breakpoint] = [];
316		- }
317		- gridColumns[breakpoint].push( item[sizeSlug].size + item[sizeSlug].unit );
318		- } else {
319		- if ( ! gridColumns[breakpoint] ) {
320		- gridColumns[breakpoint] = [];
321		- }
322		- gridColumns[breakpoint].push( item.col_size.size + item.col_size.unit );
323		- }
324		- });
325		- });
	434	+ if ( item[sizeSlug] && item[sizeSlug].size ) {
	435	+ if ( ! gridColumns[breakpoint] ) {
	436	+ gridColumns[breakpoint]=[];
	437	+ }
	438	+ gridColumns[breakpoint].push( item[sizeSlug].size + item[sizeSlug].unit );
	439	+ } else {
	440	+ if ( ! gridColumns[breakpoint] ) {
	441	+ gridColumns[breakpoint]=[];
	442	+ }
	443	+ gridColumns[breakpoint].push( item.col_size.size + item.col_size.unit );
	444	+ }
	445	+ });
	446	+ });
326	447
327		- _.each( gridColumns, function( values, device ) {
328		- const breakpoint = device === 'desktop' ? '' : '-' + device;
329		- gridCss += '--ui-e-table-cols' + breakpoint + ':' + values.join(' ') + ';';
330		- });
	448	+ _.each( gridColumns, function( values, device ) {
	449	+ const breakpoint=device==='desktop' ? '' : '-' + device;
	450	+ gridCss +='--ui-e-table-cols' + breakpoint + ':' + values.join(' ') + ' ;';
	451	+ });
331	452
332		- view.addRenderAttribute('table', 'style', [gridCss, cols_qty].join(' '));
	453	+ view.addRenderAttribute('table', 'data-cell-count' , cells.length);
	454	+ view.addRenderAttribute('table', 'style' , [gridCss, cols_qty].join(' '));
333	455	}
334		- #>
335		- <div class="ui-e-table" {{{ view.getRenderAttributeString('table') }}}>
	456	+ #>
	457	+ <div class="ui-e-table" {{{ view.getRenderAttributeString('table') }}}>
336	458
337		- </div>
338		- <?php
	459	+ </div>
	460	+ <div class="ui-e-table-editor-placeholder"></div>
	461	+ <?php
339	462	}
340	463	}
341		-\Elementor\Plugin::instance()->widgets_manager->register(new CustomTable());
	464	+\Elementor\Plugin::instance()->widgets_manager->register(new CustomTable());