← All changes | includes/utils/animation-component.php +243 -186 1.0.12 → 1.3.18 View file →

		@@ -1,186 +1,243 @@
1		-<?php
2		-namespace UiCoreElements\Utils;
3		-use Elementor\Controls_Manager;
4		-
5		-defined('ABSPATH') || exit();
6		-
7		-trait Animation_Trait {
8		-
9		- private $animation;
10		-
11		- /**
12		- * Registers a hover animation control.
13		- *
14		- * @param string $name The name of the control.
15		- * @param array $conditions Control conditions. (optional)
16		- * @param array $filter Animation Filter list. (optional)
17		- * @param string|null $custom_slug A custom slug for the control. If null, use $name as slug, formating it. (optional)
18		- * @return void
19		- */
20		- function TRAIT_register_hover_animation_control($name, $conditions = [], $filter = [], $custom_slug = null)
21		- {
22		- // Custom slug or name converted to slug
23		- $slug = isset($custom_slug) ? $custom_slug : strtolower(preg_replace('/\s+/', '_', preg_replace('/[^a-zA-Z0-9\s]/', '', $name)));
24		-
25		- $this->add_control(
26		- $slug,
27		- [
28		- 'label' => esc_html__( $name, 'uicore-elements' ),
29		- 'type' => Controls_Manager::SELECT,
30		- 'default' => '',
31		- 'label_block' => true,
32		- 'options' => $this->uicore_get_animations($filter),
33		- 'condition' => $conditions
34		- ]
35		- );
36		- }
37		- // Entrance Animations Controls.
38		- function TRAIT_register_entrance_animations_controls()
39		- {
40		- $this->add_control(
41		- 'animate_items',
42		- [
43		- 'label' => esc_html__('Animate each Item', 'uicore-elements'),
44		- 'type' => Controls_Manager::SWITCHER,
45		- 'default' => '',
46		- 'return_value' => 'ui-e-grid-animate',
47		- 'render_type' => 'none',
48		- 'frontend_available' => true,
49		- ]
50		- );
51		- $this->add_control(
52		- 'animate_item_type',
53		- [
54		- 'label' => __( 'Animation', 'uicore-elements' ),
55		- 'type' => Controls_Manager::SELECT,
56		- 'default' => 'fadeInUp',
57		- 'options' => [
58		- 'fadeInUp' => __( 'Fade In Up', 'uicore-elements' ),
59		- 'fadeInDown' => __( 'Fade In Down', 'uicore-elements' ),
60		- 'fadeInLeft' => __( 'Fade In Left', 'uicore-elements' ),
61		- 'fadeInRight' => __( 'Fade In Right', 'uicore-elements' ),
62		- 'fadeIn' => __( 'Fade In', 'uicore-elements' ),
63		- 'zoomIn' => __( 'Zoom In', 'uicore-elements' ),
64		- ],
65		- 'condition' => array(
66		- 'animate_items' => 'ui-e-grid-animate',
67		- ),
68		- 'frontend_available' => true,
69		- ]
70		- );
71		- $this->add_control(
72		- 'animate_item_speed',
73		- [
74		- 'label' => __( 'Speed', 'uicore-elements' ),
75		- 'type' => Controls_Manager::SLIDER,
76		- 'condition' => array(
77		- 'animate_items' => 'ui-e-grid-animate',
78		- ),
79		- 'default'=> [
80		- 'unit' => 'px',
81		- 'size' => 1500,
82		- ],
83		- 'range' => [
84		- 'px' => [
85		- 'min' => 10,
86		- 'max' => 3000,
87		- 'step' => 50,
88		- ],
89		- ],
90		- 'selectors' => [
91		- '{{WRAPPER}}' => '---ui-speed: {{SIZE}}ms',
92		- ],
93		- ]
94		- );
95		- $this->add_control(
96		- 'animate_item_delay',
97		- [
98		- 'label' => __( 'Animation Delay', 'uicore-elements' ),
99		- 'type' => Controls_Manager::SLIDER,
100		- 'default'=> [
101		- 'unit' => 'px',
102		- 'size' => 200,
103		- ],
104		- 'range' => [
105		- 'px' => [
106		- 'min' => 0,
107		- 'max' => 1500,
108		- 'step' => 10,
109		- ],
110		- ],
111		- 'selectors' => [
112		- '{{WRAPPER}}' => '---ui-delay: {{SIZE}}ms',
113		- ],
114		- 'condition' => [
115		- 'animate_items' => 'ui-e-grid-animate',
116		- ],
117		- ]
118		- );
119		- $this->add_control(
120		- 'animate_item_stagger',
121		- [
122		- 'label' => __( 'Stagger', 'uicore-elements' ),
123		- 'type' => Controls_Manager::SLIDER,
124		- 'condition' => array(
125		- 'animate_items' => 'ui-e-grid-animate',
126		- ),
127		- 'default'=> [
128		- 'unit' => 'px',
129		- 'size' => 16,
130		- ],
131		- 'range' => [
132		- 'px' => [
133		- 'min' => 4,
134		- 'max' => 500,
135		- 'step' => 2,
136		- ],
137		- ],
138		- 'selectors' => [
139		- '{{WRAPPER}}' => '---ui-stagger: {{SIZE}}ms',
140		- ],
141		- ]
142		- );
143		- $this->add_control(
144		- 'hr',
145		- [
146		- 'type' => \Elementor\Controls_Manager::DIVIDER,
147		- 'condition' => array(
148		- 'animate_items' => 'ui-e-grid-animate',
149		- ),
150		- ]
151		- );
152		- }
153		-
154		- /**
155		- * Retrieves the animations list available for the widget.
156		- *
157		- * @param array $filter_list Optional. An array of animation names to filter the results.
158		- * @return array The list of animations available for the widget.
159		- */
160		- function uicore_get_animations($filter_list = [])
161		- {
162		- // Animations
163		- $animation_list = [
164		- '' => 'None',
165		- 'translate' => 'Translate',
166		- 'zoom' => 'Zoom',
167		- 'fade' => 'Fade',
168		- 'underline' => 'Underline',
169		- ];
170		- $list = [];
171		- $animation_list = wp_parse_args($this->animation, $animation_list);
172		-
173		- // Filter the list of animations
174		- if (!empty($filter_list)) {
175		- $animation_list = array_diff_key($animation_list, array_flip($filter_list));
176		- }
177		-
178		- // Format the list of animations, with translated strings, to be used as elementor option's array
179		- foreach ($animation_list as $key => $value) {
180		- $slug = $key !== '' ? "ui-e-item-anim-$key" : '';
181		- $list[$slug] = esc_html__($value, 'uicore-elements');
182		- }
183		-
184		- return $list;
185		- }
186		-}
	1	+<?php
	2	+
	3	+namespace UiCoreElements\Utils;
	4	+
	5	+use Elementor\Controls_Manager;
	6	+
	7	+defined('ABSPATH') || exit();
	8	+
	9	+trait Animation_Trait
	10	+{
	11	+
	12	+ private $animation;
	13	+
	14	+ /**
	15	+ * Registers a hover animation control.
	16	+ *
	17	+ * @param string $name The name of the control.
	18	+ * @param array $conditions Control conditions. (optional)
	19	+ * @param array $filter Removes requested animations from the options. (optional)
	20	+ * @param string|null $custom_slug A custom slug for the control. If null, use $name as slug, formating it. (optional)
	21	+ * @param bool $use_new Include new animations not globally available. (optional)
	22	+ * @param string $prefix_class Let you add a custom prefix, but be cautious, the classname `ui-e-item-anim-{animation} will be part of the prefix classname. (optional)
	23	+ *
	24	+ * @return void
	25	+ */
	26	+ function TRAIT_register_hover_animation_control($name, $conditions = [], $filter = [], $custom_slug = null, $use_new = false, $prefix_class = null)
	27	+ {
	28	+ // Custom slug or name converted to slug
	29	+ $slug = isset($custom_slug)
	30	+ ? $custom_slug
	31	+ // using sanitize_title() would create incompatibility problems since it uses hyphens, not underscores
	32	+ : strtolower(preg_replace('/\s+/', '_', preg_replace('/[^a-zA-Z0-9\s]/', '', $name)));
	33	+
	34	+ // Mandatory params
	35	+ $params = [
	36	+ /* translators: %s: control title */
	37	+ 'label' => esc_html(sprintf('%s', $name), 'uicore-elements'),
	38	+ 'type' => Controls_Manager::SELECT,
	39	+ 'default' => '',
	40	+ 'content_classes' => 'elementor-control-field-select-small',
	41	+ 'options' => $this->uicore_get_animations($filter, $use_new),
	42	+ ];
	43	+
	44	+ // Optional params
	45	+ if (isset($conditions)) {
	46	+ $params['condition'] = $conditions;
	47	+ }
	48	+ if (isset($prefix_class)) {
	49	+ $params['prefix_class'] = $prefix_class;
	50	+ $params['render_type'] = 'template';
	51	+ }
	52	+
	53	+ $this->add_control($slug, $params);
	54	+ }
	55	+ // Entrance Animations Controls.
	56	+ function TRAIT_register_entrance_animations_controls()
	57	+ {
	58	+ $this->add_control(
	59	+ 'animate_items',
	60	+ [
	61	+ 'label' => esc_html__('Animate each Item', 'uicore-elements'),
	62	+ 'type' => Controls_Manager::SWITCHER,
	63	+ 'default' => '',
	64	+ 'return_value' => 'ui-e-grid-animate',
	65	+ 'render_type' => 'none',
	66	+ 'frontend_available' => true,
	67	+ ]
	68	+ );
	69	+ $this->add_control(
	70	+ 'animate_item_type',
	71	+ [
	72	+ 'label' => __('Animation', 'uicore-elements'),
	73	+ 'type' => Controls_Manager::SELECT,
	74	+ 'default' => 'fadeInUp',
	75	+ 'options' => [
	76	+ 'fadeInUp' => __('Fade In Up', 'uicore-elements'),
	77	+ 'fadeInDown' => __('Fade In Down', 'uicore-elements'),
	78	+ 'fadeInLeft' => __('Fade In Left', 'uicore-elements'),
	79	+ 'fadeInRight' => __('Fade In Right', 'uicore-elements'),
	80	+ 'fadeIn' => __('Fade In', 'uicore-elements'),
	81	+ 'zoomIn' => __('Zoom In', 'uicore-elements'),
	82	+ ],
	83	+ 'condition' => array(
	84	+ 'animate_items' => 'ui-e-grid-animate',
	85	+ ),
	86	+ 'frontend_available' => true,
	87	+ ]
	88	+ );
	89	+ $this->add_control(
	90	+ 'animate_item_speed',
	91	+ [
	92	+ 'label' => __('Speed', 'uicore-elements'),
	93	+ 'type' => Controls_Manager::SLIDER,
	94	+ 'condition' => array(
	95	+ 'animate_items' => 'ui-e-grid-animate',
	96	+ ),
	97	+ 'default' => [
	98	+ 'unit' => 'px',
	99	+ 'size' => 1500,
	100	+ ],
	101	+ 'range' => [
	102	+ 'px' => [
	103	+ 'min' => 10,
	104	+ 'max' => 3000,
	105	+ 'step' => 50,
	106	+ ],
	107	+ ],
	108	+ 'selectors' => [
	109	+ '{{WRAPPER}}' => '---ui-speed: {{SIZE}}ms',
	110	+ ],
	111	+ ]
	112	+ );
	113	+ $this->add_control(
	114	+ 'animate_item_delay',
	115	+ [
	116	+ 'label' => __('Animation Delay', 'uicore-elements'),
	117	+ 'type' => Controls_Manager::SLIDER,
	118	+ 'default' => [
	119	+ 'unit' => 'px',
	120	+ 'size' => 200,
	121	+ ],
	122	+ 'range' => [
	123	+ 'px' => [
	124	+ 'min' => 0,
	125	+ 'max' => 1500,
	126	+ 'step' => 10,
	127	+ ],
	128	+ ],
	129	+ 'selectors' => [
	130	+ '{{WRAPPER}}' => '---ui-delay: {{SIZE}}ms',
	131	+ ],
	132	+ 'condition' => [
	133	+ 'animate_items' => 'ui-e-grid-animate',
	134	+ ],
	135	+ ]
	136	+ );
	137	+ $this->add_control(
	138	+ 'animate_item_stagger',
	139	+ [
	140	+ 'label' => __('Stagger', 'uicore-elements'),
	141	+ 'type' => Controls_Manager::SLIDER,
	142	+ 'condition' => array(
	143	+ 'animate_items' => 'ui-e-grid-animate',
	144	+ ),
	145	+ 'default' => [
	146	+ 'unit' => 'px',
	147	+ 'size' => 16,
	148	+ ],
	149	+ 'range' => [
	150	+ 'px' => [
	151	+ 'min' => 4,
	152	+ 'max' => 500,
	153	+ 'step' => 2,
	154	+ ],
	155	+ ],
	156	+ 'selectors' => [
	157	+ '{{WRAPPER}}' => '---ui-stagger: {{SIZE}}ms',
	158	+ ],
	159	+ ]
	160	+ );
	161	+ $this->add_control(
	162	+ 'hr',
	163	+ [
	164	+ 'type' => \Elementor\Controls_Manager::DIVIDER,
	165	+ 'condition' => array(
	166	+ 'animate_items' => 'ui-e-grid-animate',
	167	+ ),
	168	+ ]
	169	+ );
	170	+ }
	171	+
	172	+ /**
	173	+ * Retrieves the animations list available for the widget.
	174	+ *
	175	+ * @param array $filter_list Optional. An array of animation names to filter the results.
	176	+ * @param bool $use_new Optional. Include new animations not globally available. Default is false.
	177	+ *
	178	+ * @return array The list of animations available for the widget.
	179	+ */
	180	+ function uicore_get_animations($filter_list = [], $use_new = false)
	181	+ {
	182	+ // New animations (transfer to default animation_list only after testing and updating all affected widgets)
	183	+ $new_animations = [
	184	+ 'show' => 'Show'
	185	+ ];
	186	+
	187	+ // Solid animations
	188	+ $animation_list = [
	189	+ '' => 'None',
	190	+ 'translate' => 'Translate',
	191	+ 'zoom' => 'Zoom',
	192	+ 'fade' => 'Fade',
	193	+ 'underline' => 'Underline',
	194	+ ];
	195	+ $list = [];
	196	+ $animation_list = wp_parse_args($this->animation, $animation_list);
	197	+
	198	+ // Add new animations if requested
	199	+ if ($use_new) {
	200	+ $animation_list = array_merge($animation_list, $new_animations);
	201	+ }
	202	+
	203	+ // Filter the list of animations
	204	+ if (!empty($filter_list)) {
	205	+ $animation_list = array_diff_key($animation_list, array_flip($filter_list));
	206	+ }
	207	+
	208	+ // Format the list of animations, with translated strings, to be used as elementor option's array
	209	+ foreach ($animation_list as $key => $value) {
	210	+ $slug = $key !== '' ? "ui-e-item-anim-$key" : '';
	211	+ $list[$slug] = esc_html(sprintf('%s', $value), 'uicore-elements');
	212	+ }
	213	+
	214	+ return $list;
	215	+ }
	216	+
	217	+ /**
	218	+ * Update an existent animation control with newest animations.
	219	+ *
	220	+ * This method is meant to progressively add new animation to the previous
	221	+ * animations list without impacting all widgets at once. It must be removed
	222	+ * after a given animation is globaly available.
	223	+ *
	224	+ * @param $name The name of the existent control to be updated.
	225	+ * @param array $filter Animation Filter list. (optional)
	226	+ *
	227	+ * @return void
	228	+ */
	229	+ function TRAIT_extend_control_animations($name, $filter = [])
	230	+ {
	231	+
	232	+ // Get animations with new animations enabled
	233	+ $animations = $this->uicore_get_animations($filter, true);
	234	+
	235	+ // Update the required control
	236	+ $this->update_control(
	237	+ $name,
	238	+ [
	239	+ 'options' => $animations
	240	+ ]
	241	+ );
	242	+ }
	243	+}