| @@ -1,11 +1,14 @@ | ||
| 1 | 1 | <?php |
| 2 | + | |
| 2 | 3 | namespace UiCoreElements\Utils; |
| 4 | + | |
| 3 | 5 | use Elementor\Controls_Manager; |
| 4 | 6 | |
| 5 | 7 | defined('ABSPATH') || exit(); |
| 6 | 8 | |
| 7 | -trait Animation_Trait { | |
| 9 | +trait Animation_Trait | |
| 10 | +{ | |
| 8 | 11 | |
| 9 | 12 | private $animation; |
| 10 | 13 | |
| 11 | 14 | /** |
| @@ -15,31 +18,40 @@ | ||
| 15 | 18 | * @param array $conditions Control conditions. (optional) |
| 16 | 19 | * @param array $filter Removes requested animations from the options. (optional) |
| 17 | 20 | * @param string|null $custom_slug A custom slug for the control. If null, use $name as slug, formating it. (optional) |
| 18 | 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) | |
| 19 | 23 | * |
| 20 | 24 | * @return void |
| 21 | 25 | */ |
| 22 | - function TRAIT_register_hover_animation_control($name, $conditions = [], $filter = [], $custom_slug = null, $use_new = false) | |
| 26 | + function TRAIT_register_hover_animation_control($name, $conditions = [], $filter = [], $custom_slug = null, $use_new = false, $prefix_class = null) | |
| 23 | 27 | { |
| 24 | 28 | // Custom slug or name converted to slug |
| 25 | 29 | $slug = isset($custom_slug) |
| 26 | 30 | ? $custom_slug |
| 27 | - // using sanitize_title() would create incompatible problems since it uses hyphens, not underscores | |
| 31 | + // using sanitize_title() would create incompatibility problems since it uses hyphens, not underscores | |
| 28 | 32 | : strtolower(preg_replace('/\s+/', '_', preg_replace('/[^a-zA-Z0-9\s]/', '', $name))); |
| 29 | 33 | |
| 30 | - $this->add_control( | |
| 31 | - $slug, | |
| 32 | - [ | |
| 33 | - /* translators: %s: control title */ | |
| 34 | - 'label' => esc_html( sprintf('%s', $name), 'uicore-elements'), | |
| 35 | - 'type' => Controls_Manager::SELECT, | |
| 36 | - 'default' => '', | |
| 37 | - 'label_block' => true, | |
| 38 | - 'options' => $this->uicore_get_animations($filter, $use_new), | |
| 39 | - 'condition' => $conditions | |
| 40 | - ] | |
| 41 | - ); | |
| 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); | |
| 42 | 54 | } |
| 43 | 55 | // Entrance Animations Controls. |
| 44 | 56 | function TRAIT_register_entrance_animations_controls() |
| 45 | 57 | { |
| @@ -49,9 +61,9 @@ | ||
| 49 | 61 | 'label' => esc_html__('Animate each Item', 'uicore-elements'), |
| 50 | 62 | 'type' => Controls_Manager::SWITCHER, |
| 51 | 63 | 'default' => '', |
| 52 | 64 | 'return_value' => 'ui-e-grid-animate', |
| 53 | - 'render_type' => 'none', | |
| 65 | + 'render_type' => 'none', | |
| 54 | 66 | 'frontend_available' => true, |
| 55 | 67 | ] |
| 56 | 68 | ); |
| 57 | 69 | $this->add_control( |
| @@ -56,18 +68,18 @@ | ||
| 56 | 68 | ); |
| 57 | 69 | $this->add_control( |
| 58 | 70 | 'animate_item_type', |
| 59 | 71 | [ |
| 60 | - 'label' => __( 'Animation', 'uicore-elements' ), | |
| 72 | + 'label' => __('Animation', 'uicore-elements'), | |
| 61 | 73 | 'type' => Controls_Manager::SELECT, |
| 62 | 74 | 'default' => 'fadeInUp', |
| 63 | 75 | 'options' => [ |
| 64 | - 'fadeInUp' => __( 'Fade In Up', 'uicore-elements' ), | |
| 65 | - 'fadeInDown' => __( 'Fade In Down', 'uicore-elements' ), | |
| 66 | - 'fadeInLeft' => __( 'Fade In Left', 'uicore-elements' ), | |
| 67 | - 'fadeInRight' => __( 'Fade In Right', 'uicore-elements' ), | |
| 68 | - 'fadeIn' => __( 'Fade In', 'uicore-elements' ), | |
| 69 | - 'zoomIn' => __( 'Zoom In', 'uicore-elements' ), | |
| 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'), | |
| 70 | 82 | ], |
| 71 | 83 | 'condition' => array( |
| 72 | 84 | 'animate_items' => 'ui-e-grid-animate', |
| 73 | 85 | ), |
| @@ -76,14 +88,14 @@ | ||
| 76 | 88 | ); |
| 77 | 89 | $this->add_control( |
| 78 | 90 | 'animate_item_speed', |
| 79 | 91 | [ |
| 80 | - 'label' => __( 'Speed', 'uicore-elements' ), | |
| 92 | + 'label' => __('Speed', 'uicore-elements'), | |
| 81 | 93 | 'type' => Controls_Manager::SLIDER, |
| 82 | 94 | 'condition' => array( |
| 83 | 95 | 'animate_items' => 'ui-e-grid-animate', |
| 84 | 96 | ), |
| 85 | - 'default'=> [ | |
| 97 | + 'default' => [ | |
| 86 | 98 | 'unit' => 'px', |
| 87 | 99 | 'size' => 1500, |
| 88 | 100 | ], |
| 89 | 101 | 'range' => [ |
| @@ -99,12 +111,12 @@ | ||
| 99 | 111 | ] |
| 100 | 112 | ); |
| 101 | 113 | $this->add_control( |
| 102 | 114 | 'animate_item_delay', |
| 103 | - [ | |
| 104 | - 'label' => __( 'Animation Delay', 'uicore-elements' ), | |
| 115 | + [ | |
| 116 | + 'label' => __('Animation Delay', 'uicore-elements'), | |
| 105 | 117 | 'type' => Controls_Manager::SLIDER, |
| 106 | - 'default'=> [ | |
| 118 | + 'default' => [ | |
| 107 | 119 | 'unit' => 'px', |
| 108 | 120 | 'size' => 200, |
| 109 | 121 | ], |
| 110 | 122 | 'range' => [ |
| @@ -123,15 +135,15 @@ | ||
| 123 | 135 | ] |
| 124 | 136 | ); |
| 125 | 137 | $this->add_control( |
| 126 | 138 | 'animate_item_stagger', |
| 127 | - [ | |
| 128 | - 'label' => __( 'Stagger', 'uicore-elements' ), | |
| 139 | + [ | |
| 140 | + 'label' => __('Stagger', 'uicore-elements'), | |
| 129 | 141 | 'type' => Controls_Manager::SLIDER, |
| 130 | 142 | 'condition' => array( |
| 131 | 143 | 'animate_items' => 'ui-e-grid-animate', |
| 132 | 144 | ), |
| 133 | - 'default'=> [ | |
| 145 | + 'default' => [ | |
| 134 | 146 | 'unit' => 'px', |
| 135 | 147 | 'size' => 16, |
| 136 | 148 | ], |
| 137 | 149 | 'range' => [ |
| @@ -146,16 +158,16 @@ | ||
| 146 | 158 | ], |
| 147 | 159 | ] |
| 148 | 160 | ); |
| 149 | 161 | $this->add_control( |
| 150 | - 'hr', | |
| 151 | - [ | |
| 152 | - 'type' => \Elementor\Controls_Manager::DIVIDER, | |
| 162 | + 'hr', | |
| 163 | + [ | |
| 164 | + 'type' => \Elementor\Controls_Manager::DIVIDER, | |
| 153 | 165 | 'condition' => array( |
| 154 | 166 | 'animate_items' => 'ui-e-grid-animate', |
| 155 | 167 | ), |
| 156 | - ] | |
| 157 | - ); | |
| 168 | + ] | |
| 169 | + ); | |
| 158 | 170 | } |
| 159 | 171 | |
| 160 | 172 | /** |
| 161 | 173 | * Retrieves the animations list available for the widget. |
| @@ -183,9 +195,9 @@ | ||
| 183 | 195 | $list = []; |
| 184 | 196 | $animation_list = wp_parse_args($this->animation, $animation_list); |
| 185 | 197 | |
| 186 | 198 | // Add new animations if requested |
| 187 | - if( $use_new ){ | |
| 199 | + if ($use_new) { | |
| 188 | 200 | $animation_list = array_merge($animation_list, $new_animations); |
| 189 | 201 | } |
| 190 | 202 | |
| 191 | 203 | // Filter the list of animations |
| @@ -195,9 +207,9 @@ | ||
| 195 | 207 | |
| 196 | 208 | // Format the list of animations, with translated strings, to be used as elementor option's array |
| 197 | 209 | foreach ($animation_list as $key => $value) { |
| 198 | 210 | $slug = $key !== '' ? "ui-e-item-anim-$key" : ''; |
| 199 | - $list[$slug] = esc_html( sprintf('%s', $value), 'uicore-elements'); | |
| 211 | + $list[$slug] = esc_html(sprintf('%s', $value), 'uicore-elements'); | |
| 200 | 212 | } |
| 201 | 213 | |
| 202 | 214 | return $list; |
| 203 | 215 | } |
| @@ -227,5 +239,5 @@ | ||
| 227 | 239 | 'options' => $animations |
| 228 | 240 | ] |
| 229 | 241 | ); |
| 230 | 242 | } |
| 231 | -} | |
| 243 | +} | |