← All changes | includes/utils/item-style-component.php +180 -177 1.0.4 → 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_Border;
		@@ -11,206 +12,208 @@
11	12	/*
12	13	* Basic Item Styles Component
13	14	*/
14	15
15		-trait Item_Style_Component {
	16	+trait Item_Style_Component
	17	+{
16	18
17		- function TRAIT_register_normal_item_style_controls($tab = true)
18		- {
19		- // If the widget doesn't require extra controls, we can use tabs to decrease the widget code
20		- if($tab){
21		- $this->start_controls_tab(
	19	+ function TRAIT_register_normal_item_style_controls($tab = true)
	20	+ {
	21	+ // If the widget doesn't require extra controls, we can use tabs to decrease the widget code
	22	+ if ($tab) {
	23	+ $this->start_controls_tab(
22	24	'tab_item_normal',
23	25	[
24		- 'label' => esc_html__( 'Normal', 'uicore-elements' ),
	26	+ 'label' => esc_html__('Normal', 'uicore-elements'),
25	27	]
26	28	);
27		- }
	29	+ }
28	30
29		- $this->add_group_control(
30		- Group_Control_Background::get_type(),
31		- [
32		- 'name' => 'item_background',
33		- 'selector' => '{{WRAPPER}} .ui-e-item',
34		- ]
35		- );
36		- $this->add_group_control(
37		- Group_Control_Border::get_type(),
38		- [
39		- 'name' => 'item_border',
40		- 'label' => esc_html__( 'Border', 'uicore-elements' ),
41		- 'fields_options' => [
42		- 'border' => [
43		- 'default' => 'solid',
44		- ],
45		- 'width' => [
46		- 'default' => [
47		- 'top' => '1',
48		- 'right' => '1',
49		- 'bottom' => '1',
50		- 'left' => '1',
51		- 'isLinked' => true,
52		- ],
53		- ],
54		- 'color' => [
55		- 'default' => '#EEE'
56		- ]
57		- ],
58		- 'selector' => '{{WRAPPER}} .ui-e-item',
59		- ]
60		- );
61		- $this->add_control(
62		- 'item_border_radius',
63		- [
64		- 'label' => esc_html__( 'Border Radius', 'uicore-elements' ),
65		- 'type' => Controls_Manager::DIMENSIONS,
66		- 'size_units' => [ 'px', '%' ],
67		- 'default' => [
68		- 'top' => 12,
69		- 'right' => 12,
70		- 'bottom' => 12,
71		- 'left' => 12,
72		- 'unit' => 'px',
73		- 'isLinked' => true,
74		- ],
75		- 'selectors' => [
76		- '{{WRAPPER}} .ui-e-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
77		- ],
78		- ]
79		- );
80		- $this->add_control(
81		- 'item_padding',
82		- [
83		- 'label' => esc_html__( 'Padding', 'uicore-elements' ),
84		- 'type' => Controls_Manager::DIMENSIONS,
85		- 'size_units' => [ 'px', 'em', '%' ],
86		- 'default' => [
87		- 'top' => 30,
88		- 'right' => 30,
89		- 'bottom' => 30,
90		- 'left' => 30,
91		- 'unit' => 'px',
92		- 'isLinked' => true,
93		- ],
94		- 'selectors' => [
95		- '{{WRAPPER}} .ui-e-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
96		- ],
97		- ]
98		- );
99		- $this->add_group_control(
100		- Group_Control_Box_Shadow::get_type(),
101		- [
102		- 'name' => 'item_box_shadow',
103		- 'selector' => '{{WRAPPER}} .ui-e-item',
104		- ]
105		- );
	31	+ $this->add_group_control(
	32	+ Group_Control_Background::get_type(),
	33	+ [
	34	+ 'name' => 'item_background',
	35	+ 'selector' => '{{WRAPPER}} .ui-e-item',
	36	+ ]
	37	+ );
	38	+ $this->add_group_control(
	39	+ Group_Control_Border::get_type(),
	40	+ [
	41	+ 'name' => 'item_border',
	42	+ 'label' => esc_html__('Border', 'uicore-elements'),
	43	+ 'fields_options' => [
	44	+ 'border' => [
	45	+ 'default' => 'solid',
	46	+ ],
	47	+ 'width' => [
	48	+ 'default' => [
	49	+ 'top' => '1',
	50	+ 'right' => '1',
	51	+ 'bottom' => '1',
	52	+ 'left' => '1',
	53	+ 'isLinked' => true,
	54	+ ],
	55	+ ],
	56	+ 'color' => [
	57	+ 'default' => '#EEE'
	58	+ ]
	59	+ ],
	60	+ 'selector' => '{{WRAPPER}} .ui-e-item',
	61	+ ]
	62	+ );
	63	+ $this->add_responsive_control(
	64	+ 'item_border_radius',
	65	+ [
	66	+ 'label' => esc_html__('Border Radius', 'uicore-elements'),
	67	+ 'type' => Controls_Manager::DIMENSIONS,
	68	+ 'size_units' => ['px', '%'],
	69	+ 'default' => [
	70	+ 'top' => 12,
	71	+ 'right' => 12,
	72	+ 'bottom' => 12,
	73	+ 'left' => 12,
	74	+ 'unit' => 'px',
	75	+ 'isLinked' => true,
	76	+ ],
	77	+ 'selectors' => [
	78	+ '{{WRAPPER}}' => '--ui-e-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', // Sliders use --ui-e-radius var as item radius
	79	+ '{{WRAPPER}} .ui-e-item' => 'border-radius: var(--ui-e-radius);',
	80	+ ],
	81	+ ]
	82	+ );
	83	+ $this->add_responsive_control(
	84	+ 'item_padding',
	85	+ [
	86	+ 'label' => esc_html__('Padding', 'uicore-elements'),
	87	+ 'type' => Controls_Manager::DIMENSIONS,
	88	+ 'size_units' => ['px', 'em', '%'],
	89	+ 'default' => [
	90	+ 'top' => 30,
	91	+ 'right' => 30,
	92	+ 'bottom' => 30,
	93	+ 'left' => 30,
	94	+ 'unit' => 'px',
	95	+ 'isLinked' => true,
	96	+ ],
	97	+ 'selectors' => [
	98	+ '{{WRAPPER}} .ui-e-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	99	+ ],
	100	+ ]
	101	+ );
	102	+ $this->add_group_control(
	103	+ Group_Control_Box_Shadow::get_type(),
	104	+ [
	105	+ 'name' => 'item_box_shadow',
	106	+ 'selector' => '{{WRAPPER}} .ui-e-item',
	107	+ ]
	108	+ );
106	109
107		- if($tab){
108		- $this->end_controls_tab();
109		- }
110		- }
111		- function TRAIT_register_hover_item_style_controls($tab = true)
112		- {
113		- // If the widget doesn't require extra controls, we can use tabs to decrease the widget code
114		- if($tab){
115		- $this->start_controls_tab(
	110	+ if ($tab) {
	111	+ $this->end_controls_tab();
	112	+ }
	113	+ }
	114	+ function TRAIT_register_hover_item_style_controls($tab = true)
	115	+ {
	116	+ // If the widget doesn't require extra controls, we can use tabs to decrease the widget code
	117	+ if ($tab) {
	118	+ $this->start_controls_tab(
116	119	'tab_item_hover',
117	120	[
118		- 'label' => esc_html__( 'Hover', 'uicore-elements' ),
	121	+ 'label' => esc_html__('Hover', 'uicore-elements'),
119	122	]
120	123	);
121		- }
	124	+ }
122	125
123		- $this->add_group_control(
124		- Group_Control_Background::get_type(),
125		- [
126		- 'name' => 'item_hover_background',
127		- 'selector' => '{{WRAPPER}} .ui-e-item:hover',
128		- ]
129		- );
130		- $this->add_control(
131		- 'item_hover_border_color',
132		- [
133		- 'label' => esc_html__( 'Border Color', 'uicore-elements' ),
134		- 'type' => Controls_Manager::COLOR,
135		- 'condition' => [
136		- 'item_border_border!' => '',
137		- ],
138		- 'selectors' => [
139		- '{{WRAPPER}} .ui-e-item:hover' => 'border-color: {{VALUE}};',
140		- ],
141		- ]
142		- );
143		- $this->add_group_control(
144		- Group_Control_Box_Shadow::get_type(),
145		- [
146		- 'name' => 'item_hover_box_shadow',
147		- 'selector' => '{{WRAPPER}} .ui-e-wrp:hover .ui-e-item',
148		- ]
149		- );
	126	+ $this->add_group_control(
	127	+ Group_Control_Background::get_type(),
	128	+ [
	129	+ 'name' => 'item_hover_background',
	130	+ 'selector' => '{{WRAPPER}} .ui-e-item:hover',
	131	+ ]
	132	+ );
	133	+ $this->add_control(
	134	+ 'item_hover_border_color',
	135	+ [
	136	+ 'label' => esc_html__('Border Color', 'uicore-elements'),
	137	+ 'type' => Controls_Manager::COLOR,
	138	+ 'condition' => [
	139	+ 'item_border_border!' => '',
	140	+ ],
	141	+ 'selectors' => [
	142	+ '{{WRAPPER}} .ui-e-item:hover' => 'border-color: {{VALUE}};',
	143	+ ],
	144	+ ]
	145	+ );
	146	+ $this->add_group_control(
	147	+ Group_Control_Box_Shadow::get_type(),
	148	+ [
	149	+ 'name' => 'item_hover_box_shadow',
	150	+ 'selector' => '{{WRAPPER}} .ui-e-wrp:hover .ui-e-item',
	151	+ ]
	152	+ );
150	153
151		- if($tab){
152		- $this->end_controls_tab();
153		- }
154		- }
155		- function TRAIT_register_active_item_style_controls($tab = true)
156		- {
157		- // If the widget doesn't require extra controls, we can use tabs to decrease the widget code
158		- if($tab){
159		- $this->start_controls_tab(
	154	+ if ($tab) {
	155	+ $this->end_controls_tab();
	156	+ }
	157	+ }
	158	+ function TRAIT_register_active_item_style_controls($tab = true)
	159	+ {
	160	+ // If the widget doesn't require extra controls, we can use tabs to decrease the widget code
	161	+ if ($tab) {
	162	+ $this->start_controls_tab(
160	163	'tab_item_active',
161	164	[
162		- 'label' => esc_html__( 'Active', 'uicore-elements' ),
	165	+ 'label' => esc_html__('Active', 'uicore-elements'),
163	166	]
164	167	);
165		- }
	168	+ }
166	169
167		- $this->add_group_control(
168		- Group_Control_Background::get_type(),
169		- [
170		- 'name' => 'item_active_background',
171		- 'selector' => '{{WRAPPER}} .ui-e-wrp.is-selected .ui-e-item',
172		- ]
173		- );
174		- $this->add_control(
175		- 'item_active_border_color',
176		- [
177		- 'label' => esc_html__( 'Border Color', 'uicore-elements' ),
178		- 'type' => Controls_Manager::COLOR,
179		- 'condition' => [
180		- 'item_border_border!' => '',
181		- ],
182		- 'selectors' => [
183		- '{{WRAPPER}} .ui-e-wrp.is-selected .ui-e-item' => 'border-color: {{VALUE}};',
184		- ],
185		- ]
186		- );
187		- $this->add_group_control(
188		- Group_Control_Box_Shadow::get_type(),
189		- [
190		- 'name' => 'item_active_box_shadow',
191		- 'selector' => '{{WRAPPER}} .ui-e-wrp.is-selected .ui-e-item',
192		- ]
193		- );
	170	+ $this->add_group_control(
	171	+ Group_Control_Background::get_type(),
	172	+ [
	173	+ 'name' => 'item_active_background',
	174	+ 'selector' => '{{WRAPPER}} .ui-e-wrp.is-selected .ui-e-item',
	175	+ ]
	176	+ );
	177	+ $this->add_control(
	178	+ 'item_active_border_color',
	179	+ [
	180	+ 'label' => esc_html__('Border Color', 'uicore-elements'),
	181	+ 'type' => Controls_Manager::COLOR,
	182	+ 'condition' => [
	183	+ 'item_border_border!' => '',
	184	+ ],
	185	+ 'selectors' => [
	186	+ '{{WRAPPER}} .ui-e-wrp.is-selected .ui-e-item' => 'border-color: {{VALUE}};',
	187	+ ],
	188	+ ]
	189	+ );
	190	+ $this->add_group_control(
	191	+ Group_Control_Box_Shadow::get_type(),
	192	+ [
	193	+ 'name' => 'item_active_box_shadow',
	194	+ 'selector' => '{{WRAPPER}} .ui-e-wrp.is-selected .ui-e-item',
	195	+ ]
	196	+ );
194	197
195		- if($tab){
196		- $this->end_controls_tab();
197		- }
198		- }
	198	+ if ($tab) {
	199	+ $this->end_controls_tab();
	200	+ }
	201	+ }
199	202
200	203	/**
201		- * Register all Item Style Controls at Once
202		- *
	204	+ * Register all Item Style Controls at Once
	205	+ *
203	206	* @param boolean $active_state Register Active State Controls. Default is `true`
204		- * @return void
	207	+ * @return void
205	208	*/
206		- function TRAIT_register_all_item_style_controls($active_state = true)
	209	+ function TRAIT_register_all_item_style_controls($active_state = true)
207	210	{
208		- $this->start_controls_tabs( 'tabs_item_style' );
209		- $this->TRAIT_register_normal_item_style_controls();
210		- $this->TRAIT_register_hover_item_style_controls();
211		- if($active_state){
212		- $this->TRAIT_register_active_item_style_controls();
213		- }
214		- $this->end_controls_tabs();
	211	+ $this->start_controls_tabs('tabs_item_style');
	212	+ $this->TRAIT_register_normal_item_style_controls();
	213	+ $this->TRAIT_register_hover_item_style_controls();
	214	+ if ($active_state) {
	215	+ $this->TRAIT_register_active_item_style_controls();
	216	+ }
	217	+ $this->end_controls_tabs();
215	218	}
216		-}
	219	+}