← All changes | includes/utils/item-style-component.php +180 -178 1.2.1 → 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,207 +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-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', // Sliders use --ui-e-radius var as item radius
77		- '{{WRAPPER}} .ui-e-item' => 'border-radius: var(--ui-e-radius);',
78		- ],
79		- ]
80		- );
81		- $this->add_control(
82		- 'item_padding',
83		- [
84		- 'label' => esc_html__( 'Padding', 'uicore-elements' ),
85		- 'type' => Controls_Manager::DIMENSIONS,
86		- 'size_units' => [ 'px', 'em', '%' ],
87		- 'default' => [
88		- 'top' => 30,
89		- 'right' => 30,
90		- 'bottom' => 30,
91		- 'left' => 30,
92		- 'unit' => 'px',
93		- 'isLinked' => true,
94		- ],
95		- 'selectors' => [
96		- '{{WRAPPER}} .ui-e-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
97		- ],
98		- ]
99		- );
100		- $this->add_group_control(
101		- Group_Control_Box_Shadow::get_type(),
102		- [
103		- 'name' => 'item_box_shadow',
104		- 'selector' => '{{WRAPPER}} .ui-e-item',
105		- ]
106		- );
	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	+ );
107	109
108		- if($tab){
109		- $this->end_controls_tab();
110		- }
111		- }
112		- function TRAIT_register_hover_item_style_controls($tab = true)
113		- {
114		- // If the widget doesn't require extra controls, we can use tabs to decrease the widget code
115		- if($tab){
116		- $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(
117	119	'tab_item_hover',
118	120	[
119		- 'label' => esc_html__( 'Hover', 'uicore-elements' ),
	121	+ 'label' => esc_html__('Hover', 'uicore-elements'),
120	122	]
121	123	);
122		- }
	124	+ }
123	125
124		- $this->add_group_control(
125		- Group_Control_Background::get_type(),
126		- [
127		- 'name' => 'item_hover_background',
128		- 'selector' => '{{WRAPPER}} .ui-e-item:hover',
129		- ]
130		- );
131		- $this->add_control(
132		- 'item_hover_border_color',
133		- [
134		- 'label' => esc_html__( 'Border Color', 'uicore-elements' ),
135		- 'type' => Controls_Manager::COLOR,
136		- 'condition' => [
137		- 'item_border_border!' => '',
138		- ],
139		- 'selectors' => [
140		- '{{WRAPPER}} .ui-e-item:hover' => 'border-color: {{VALUE}};',
141		- ],
142		- ]
143		- );
144		- $this->add_group_control(
145		- Group_Control_Box_Shadow::get_type(),
146		- [
147		- 'name' => 'item_hover_box_shadow',
148		- 'selector' => '{{WRAPPER}} .ui-e-wrp:hover .ui-e-item',
149		- ]
150		- );
	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	+ );
151	153
152		- if($tab){
153		- $this->end_controls_tab();
154		- }
155		- }
156		- function TRAIT_register_active_item_style_controls($tab = true)
157		- {
158		- // If the widget doesn't require extra controls, we can use tabs to decrease the widget code
159		- if($tab){
160		- $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(
161	163	'tab_item_active',
162	164	[
163		- 'label' => esc_html__( 'Active', 'uicore-elements' ),
	165	+ 'label' => esc_html__('Active', 'uicore-elements'),
164	166	]
165	167	);
166		- }
	168	+ }
167	169
168		- $this->add_group_control(
169		- Group_Control_Background::get_type(),
170		- [
171		- 'name' => 'item_active_background',
172		- 'selector' => '{{WRAPPER}} .ui-e-wrp.is-selected .ui-e-item',
173		- ]
174		- );
175		- $this->add_control(
176		- 'item_active_border_color',
177		- [
178		- 'label' => esc_html__( 'Border Color', 'uicore-elements' ),
179		- 'type' => Controls_Manager::COLOR,
180		- 'condition' => [
181		- 'item_border_border!' => '',
182		- ],
183		- 'selectors' => [
184		- '{{WRAPPER}} .ui-e-wrp.is-selected .ui-e-item' => 'border-color: {{VALUE}};',
185		- ],
186		- ]
187		- );
188		- $this->add_group_control(
189		- Group_Control_Box_Shadow::get_type(),
190		- [
191		- 'name' => 'item_active_box_shadow',
192		- 'selector' => '{{WRAPPER}} .ui-e-wrp.is-selected .ui-e-item',
193		- ]
194		- );
	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	+ );
195	197
196		- if($tab){
197		- $this->end_controls_tab();
198		- }
199		- }
	198	+ if ($tab) {
	199	+ $this->end_controls_tab();
	200	+ }
	201	+ }
200	202
201	203	/**
202		- * Register all Item Style Controls at Once
203		- *
	204	+ * Register all Item Style Controls at Once
	205	+ *
204	206	* @param boolean $active_state Register Active State Controls. Default is `true`
205		- * @return void
	207	+ * @return void
206	208	*/
207		- function TRAIT_register_all_item_style_controls($active_state = true)
	209	+ function TRAIT_register_all_item_style_controls($active_state = true)
208	210	{
209		- $this->start_controls_tabs( 'tabs_item_style' );
210		- $this->TRAIT_register_normal_item_style_controls();
211		- $this->TRAIT_register_hover_item_style_controls();
212		- if($active_state){
213		- $this->TRAIT_register_active_item_style_controls();
214		- }
215		- $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();
216	218	}
217		-}
	219	+}