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

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

216 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_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	);
106
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(
116	'tab_item_hover',
117	[
118	'label' => esc_html__( 'Hover', 'uicore-elements' ),
119	]
120	);
121	}
122
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	);
150
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(
160	'tab_item_active',
161	[
162	'label' => esc_html__( 'Active', 'uicore-elements' ),
163	]
164	);
165	}
166
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	);
194
195	if($tab){
196	$this->end_controls_tab();
197	}
198	}
199
200	/**
201	* Register all Item Style Controls at Once
202	*
203	* @param boolean $active_state Register Active State Controls. Default is `true`
204	* @return void
205	*/
206	function TRAIT_register_all_item_style_controls($active_state = true)
207	{
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();
215	}
216	}