← All changes | includes/utils/grid-component.php +56 -225 1.0.2 → 1.3.17 View file →

		@@ -1,5 +1,6 @@
1	1	<?php
	2	+
2	3	namespace UiCoreElements\Utils;
3	4
4	5	use Elementor\Controls_Manager;
5	6	use Elementor\Group_Control_Background;
		@@ -7,248 +8,78 @@
7	8	use Elementor\Group_Control_Box_Shadow;
8	9
9	10	defined('ABSPATH') || exit();
10	11
11		-trait Grid_Trait {
	12	+trait Grid_Trait
	13	+{
12	14
13	15	/**
14	16	* Registers the grid layout controls.
15	17	*
16		- * @param bool $maso Whether to enable masonry layout. (Default: true)
17		- * @param array $maso_conditions The conditions for masonry layout.
18		- * @param bool $legacy_maso Whether to use legacy masonry layout.
19		- * @param bool/array $column_prefix Set a prefix class to be returned with the column value
20		- * @param array $gap_conditions The conditions for columns.
	18	+ * @param array $conditions Conditions for the grid layout controls. Eg: ['{control-slug}' => '{control-value}']
21	19	*/
22		- // todo: improve this function
23		- function register_grid_layout_controls($maso = true, $maso_conditions = [], $legacy_maso = false, $columns = true, $gap_conditions = [])
	20	+ function TRAIT_register_grid_layout_controls($conditions = [])
24	21	{
25		- if($columns){
26		- $this->add_responsive_control(
27		- 'columns',
28		- [
29		- 'label' => __( 'Columns', 'uicore-elements' ),
30		- 'type' => Controls_Manager::SELECT,
31		- 'desktop_default' => 3,
32		- 'tablet_default' => 2,
33		- 'mobile_default' => 1,
34		- 'options' => [
35		- 1 => '1',
36		- 2 => '2',
37		- 3 => '3',
38		- 4 => '4',
39		- 5 => '5',
40		- 6 => '6',
41		- 7 => '7',
42		- 8 => '8',
43		- ],
44		- 'selectors' => [
45		- '{{WRAPPER}} .ui-e-grid' => 'grid-template-columns: repeat({{VALUE}}, minmax(0, 1fr))',
46		- '{{WRAPPER}} .ui-e-adv-grid' => 'grid-template-columns: repeat({{VALUE}}, minmax(0, 1fr))', // Old APG Suport
47		- ],
48		- ]
49		- );
50		- }
51	22
52	23	$this->add_responsive_control(
	24	+ 'columns',
	25	+ [
	26	+ 'label' => __('Columns', 'uicore-elements'),
	27	+ 'type' => Controls_Manager::SELECT,
	28	+ 'desktop_default' => 3,
	29	+ 'tablet_default' => 2,
	30	+ 'mobile_default' => 1,
	31	+ 'options' => [
	32	+ 1 => '1',
	33	+ 2 => '2',
	34	+ 3 => '3',
	35	+ 4 => '4',
	36	+ 5 => '5',
	37	+ 6 => '6',
	38	+ 7 => '7',
	39	+ 8 => '8',
	40	+ ],
	41	+ 'selectors' => [
	42	+ '{{WRAPPER}} .ui-e-grid' => 'grid-template-columns: repeat({{VALUE}}, minmax(0, 1fr)); --ui-e-column-count: {{VALUE}};', // the var is used by masonry
	43	+ '{{WRAPPER}} .ui-e-adv-grid' => 'grid-template-columns: repeat({{VALUE}}, minmax(0, 1fr))', // Old APG Suport
	44	+ ],
	45	+ 'condition' => $conditions
	46	+ ]
	47	+ );
	48	+ $this->add_responsive_control(
53	49	'gap',
54	50	[
55		- 'label' => esc_html__( 'Items Gap', 'uicore-elements' ),
	51	+ 'label' => esc_html__('Items Gap', 'uicore-elements'),
56	52	'type' => Controls_Manager::SLIDER,
57	53	'size_units' => ['px'],
58		- 'range' => [
59		- 'px' => [
60		- 'min' => 0,
61		- 'max' => 200,
62		- ],
63		- ],
64		- 'default' => [
65		- 'unit' => 'px',
66		- 'size' => 20,
67		- ],
	54	+ 'range' => [
	55	+ 'px' => [
	56	+ 'min' => 0,
	57	+ 'max' => 200,
	58	+ ],
	59	+ ],
	60	+ 'default' => [
	61	+ 'unit' => 'px',
	62	+ 'size' => 20,
	63	+ ],
68	64	'selectors' => [
69	65	'{{WRAPPER}} .ui-e-grid' => 'grid-gap: {{SIZE}}{{UNIT}};',
70	66	'{{WRAPPER}} .ui-e-adv-grid' => 'grid-gap: {{SIZE}}{{UNIT}};', // Old APG Suport
71	67	],
72		- 'condition' => $gap_conditions,
	68	+ 'condition' => $conditions
73	69	]
74	70	);
75		- if($maso){
76		- $this->add_control(
77		- 'masonry',
78		- [
79		- 'label' => __('Masonry', 'uicore-elements'),
80		- 'type' => Controls_Manager::SWITCHER,
81		- 'prefix_class' => 'ui-e-maso-',
82		- 'selectors' => [
83		- '{{WRAPPER}} .ui-e-grid' => 'column-count: {{columns.VALUE}}; column-gap: {{gap.SIZE}}{{gap.UNIT}};',
84		- '{{WRAPPER}} .ui-e-wrp' => 'margin-bottom: {{gap.SIZE}}{{gap.UNIT}};'
85		- ],
86		- 'render_type' => 'template',
87		- 'condition' => $maso_conditions,
88		- ]
89		- );
90		- }
91		- // Old Masonry control that works with APG script
92		- if($legacy_maso && !$maso){
93		- $this->add_control(
94		- 'masonry',
95		- [
96		- 'label' => __( 'Masonry', 'uicore-elements' ),
97		- 'type' => Controls_Manager::SWITCHER,
98		- 'frontend_available' => true,
99		- 'default' => 'no',
100		- 'return_value' => 'ui-e-maso',
101		- ]
102		- );
103		- }
	71	+ $this->add_control(
	72	+ 'masonry',
	73	+ [
	74	+ 'label' => __('Masonry', 'uicore-elements'),
	75	+ 'type' => Controls_Manager::SWITCHER,
	76	+ 'selectors' => [
	77	+ '{{WRAPPER}} .ui-e-grid' => 'column-count: var(--ui-e-column-count); column-gap: {{gap.SIZE}}{{gap.UNIT}};',
	78	+ '{{WRAPPER}} .ui-e-wrp' => 'margin-bottom: {{gap.SIZE}}{{gap.UNIT}};'
	79	+ ],
	80	+ 'render_type' => 'template',
	81	+ 'condition' => $conditions
	82	+ ]
	83	+ );
104	84	}
105		-
106		- // Item Style controls
107		- function register_grid_normal_item_style_controls($tab = true)
108		- {
109		- // If the widget doesn't require extra controls, we can use tabs to decrease the widget code
110		- if($tab){
111		- $this->start_controls_tab(
112		- 'tab_item_normal',
113		- [
114		- 'label' => esc_html__( 'Normal', 'uicore-elements' ),
115		- ]
116		- );
117		- }
118		-
119		- $this->add_group_control(
120		- Group_Control_Background::get_type(),
121		- [
122		- 'name' => 'item_background',
123		- 'selector' => '{{WRAPPER}} .ui-e-item',
124		- ]
125		- );
126		- $this->add_group_control(
127		- Group_Control_Border::get_type(),
128		- [
129		- 'name' => 'item_border',
130		- 'label' => esc_html__( 'Border', 'uicore-elements' ),
131		- 'fields_options' => [
132		- 'border' => [
133		- 'default' => 'solid',
134		- ],
135		- 'width' => [
136		- 'default' => [
137		- 'top' => '1',
138		- 'right' => '1',
139		- 'bottom' => '1',
140		- 'left' => '1',
141		- 'isLinked' => true,
142		- ],
143		- ],
144		- 'color' => [
145		- 'default' => '#EEE'
146		- ]
147		- ],
148		- 'selector' => '{{WRAPPER}} .ui-e-item',
149		- 'separator' => 'before',
150		- ]
151		- );
152		- $this->add_control(
153		- 'item_border_radius',
154		- [
155		- 'label' => esc_html__( 'Border Radius', 'uicore-elements' ),
156		- 'type' => Controls_Manager::DIMENSIONS,
157		- 'size_units' => [ 'px', '%' ],
158		- 'default' => [
159		- 'top' => 12,
160		- 'right' => 12,
161		- 'bottom' => 12,
162		- 'left' => 12,
163		- 'unit' => 'px',
164		- 'isLinked' => true,
165		- ],
166		- 'selectors' => [
167		- '{{WRAPPER}} .ui-e-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
168		- ],
169		- ]
170		- );
171		- $this->add_control(
172		- 'item_padding',
173		- [
174		- 'label' => esc_html__( 'Padding', 'uicore-elements' ),
175		- 'type' => Controls_Manager::DIMENSIONS,
176		- 'size_units' => [ 'px', 'em', '%' ],
177		- 'default' => [
178		- 'top' => 30,
179		- 'right' => 30,
180		- 'bottom' => 30,
181		- 'left' => 30,
182		- 'unit' => 'px',
183		- 'isLinked' => true,
184		- ],
185		- 'selectors' => [
186		- '{{WRAPPER}} .ui-e-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
187		- ],
188		- ]
189		- );
190		- $this->add_group_control(
191		- Group_Control_Box_Shadow::get_type(),
192		- [
193		- 'name' => 'item_box_shadow',
194		- 'selector' => '{{WRAPPER}} .ui-e-item',
195		- ]
196		- );
197		-
198		- if($tab){
199		- $this->end_controls_tab();
200		- }
201		- }
202		- function register_grid_hover_item_style_controls($tab = true)
203		- {
204		- // If the widget doesn't require extra controls, we can use tabs to decrease the widget code
205		- if($tab){
206		- $this->start_controls_tab(
207		- 'tab_item_hover',
208		- [
209		- 'label' => esc_html__( 'Hover', 'uicore-elements' ),
210		- ]
211		- );
212		- }
213		-
214		- $this->add_group_control(
215		- Group_Control_Background::get_type(),
216		- [
217		- 'name' => 'item_hover_background',
218		- 'selector' => '{{WRAPPER}} .ui-e-item:hover',
219		- ]
220		- );
221		- $this->add_control(
222		- 'item_hover_border_color',
223		- [
224		- 'label' => esc_html__( 'Border Color', 'uicore-elements' ),
225		- 'type' => Controls_Manager::COLOR,
226		- 'condition' => [
227		- 'item_border_border!' => '',
228		- ],
229		- 'selectors' => [
230		- '{{WRAPPER}} .ui-e-item:hover' => 'border-color: {{VALUE}};',
231		- ],
232		- ]
233		- );
234		- $this->add_group_control(
235		- Group_Control_Box_Shadow::get_type(),
236		- [
237		- 'name' => 'item_hover_box_shadow',
238		- 'selector' => '{{WRAPPER}} .ui-e-wrp:hover .ui-e-item',
239		- ]
240		- );
241		-
242		- if($tab){
243		- $this->end_controls_tab();
244		- }
245		- }
246		- // Register all item style controls above at once.
247		- function register_all_grid_item_style_controls()
248		- {
249		- $this->start_controls_tabs( 'tabs_item_style' );
250		- $this->register_grid_normal_item_style_controls();
251		- $this->register_grid_hover_item_style_controls();
252		- $this->end_controls_tabs();
253		- }
254		-}
	85	+}