uicore-elements / includes / utils / item-style-component.php

item-style-component.php in UiCore Elements – Free widgets and templates for Elementor 1.2.3, at includes/utils/item-style-component.php

217 lines 5.5 KB

Raw Download Zip

1	<?php
2	namespace UiCoreElements\Utils;
3
4	use Elementor\Controls_Manager;
5	use Elementor\Group_Control_Border;
6	use Elementor\Group_Control_Box_Shadow;
7	use Elementor\Group_Control_Background;
8
9	defined('ABSPATH') \|\| exit();
10
11	/*
12	* Basic Item Styles Component
13	*/
14
15	trait Item_Style_Component {
16
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(
22	'tab_item_normal',
23	[
24	'label' => esc_html__( 'Normal', 'uicore-elements' ),
25	]
26	);
27	}
28
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_responsive_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_responsive_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	);
107
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(
117	'tab_item_hover',
118	[
119	'label' => esc_html__( 'Hover', 'uicore-elements' ),
120	]
121	);
122	}
123
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	);
151
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(
161	'tab_item_active',
162	[
163	'label' => esc_html__( 'Active', 'uicore-elements' ),
164	]
165	);
166	}
167
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	);
195
196	if($tab){
197	$this->end_controls_tab();
198	}
199	}
200
201	/**
202	* Register all Item Style Controls at Once
203	*
204	* @param boolean $active_state Register Active State Controls. Default is `true`
205	* @return void
206	*/
207	function TRAIT_register_all_item_style_controls($active_state = true)
208	{
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();
216	}
217	}