| @@ -1,11 +1,14 @@ | ||
| 1 | 1 | <?php |
| 2 | + | |
| 2 | 3 | namespace UiCoreElements; |
| 4 | + | |
| 3 | 5 | use Elementor\Controls_Manager; |
| 4 | 6 | use UiCoreElements\UiCoreWidget; |
| 5 | 7 | use UiCoreElements\Utils\Carousel_Trait; |
| 6 | 8 | use UiCoreElements\Utils\Logo_Trait; |
| 7 | 9 | use UiCoreElements\Utils\Animation_Trait; |
| 10 | +use UicoreElements\Utils\Item_Style_Component; | |
| 8 | 11 | |
| 9 | 12 | defined('ABSPATH') || exit(); |
| 10 | 13 | |
| 11 | 14 | /** |
| @@ -20,8 +23,9 @@ | ||
| 20 | 23 | |
| 21 | 24 | use Carousel_Trait; |
| 22 | 25 | use Logo_Trait; |
| 23 | 26 | use Animation_Trait; |
| 27 | + use Item_Style_Component; | |
| 24 | 28 | |
| 25 | 29 | public function get_name() |
| 26 | 30 | { |
| 27 | 31 | return 'uicore-logo-carousel'; |
| @@ -43,98 +47,96 @@ | ||
| 43 | 47 | return ['logo', 'client', 'brand', 'showcase', 'carousel', 'slide']; |
| 44 | 48 | } |
| 45 | 49 | public function get_styles() |
| 46 | 50 | { |
| 47 | - return [ | |
| 51 | + $styles = [ | |
| 48 | 52 | 'logo-carousel', |
| 49 | - 'animation', | |
| 50 | - 'entrance', | |
| 51 | - 'e-animations' => [ | |
| 52 | - 'condition' => [ | |
| 53 | - 'animation_assets' => 'false' | |
| 54 | - ], | |
| 53 | + 'carousel', | |
| 54 | + 'animation', // hover animations | |
| 55 | + 'entrance', // entrance basic style | |
| 56 | + ]; | |
| 57 | + if (!class_exists('\UiCore\Core') && !class_exists('\UiCoreAnimate\Base')) { | |
| 58 | + $styles['e-animations'] = [ // entrance animations | |
| 55 | 59 | 'external' => true, |
| 56 | - ] | |
| 57 | - ]; | |
| 60 | + ]; | |
| 61 | + } | |
| 62 | + return $styles; | |
| 58 | 63 | } |
| 59 | 64 | public function get_scripts() |
| 60 | 65 | { |
| 61 | - return [ | |
| 62 | - 'carousel', | |
| 63 | - 'entrance' => [ | |
| 64 | - 'condition' => [ | |
| 65 | - 'animate_items' => 'ui-e-grid-animate' | |
| 66 | - ], | |
| 67 | - ] | |
| 68 | - ]; | |
| 66 | + return $this->TRAIT_get_carousel_scripts(); | |
| 69 | 67 | } |
| 68 | + public function has_widget_inner_wrapper(): bool | |
| 69 | + { | |
| 70 | + // TODO: remove after Optmized Markup experiment is merged to the core | |
| 71 | + return ! \Elementor\Plugin::$instance->experiments->is_feature_active('e_optimized_markup'); | |
| 72 | + } | |
| 70 | 73 | protected function register_controls() |
| 71 | 74 | { |
| 72 | 75 | |
| 73 | - $this->register_logo_repeater_controls('Logo Carousel Items'); // Repeater Controls | |
| 76 | + $this->TRAIT_register_logo_repeater_controls('Logo Carousel Items'); // Repeater Controls | |
| 74 | 77 | |
| 75 | 78 | $this->start_controls_section( |
| 76 | - 'section_carousel_settings', | |
| 77 | - [ | |
| 78 | - 'label' => __('Carousel Settings', 'uicore-elements'), | |
| 79 | - ] | |
| 80 | - ); | |
| 79 | + 'section_carousel_settings', | |
| 80 | + [ | |
| 81 | + 'label' => __('Carousel Settings', 'uicore-elements'), | |
| 82 | + ] | |
| 83 | + ); | |
| 81 | 84 | |
| 82 | - $this->TRAIT_register_entrace_asset_helper(); // Animation asset condition | |
| 83 | - $this->register_carousel_additional_controls(); // Carousel Additionals | |
| 84 | - $this->register_logo_adittional_controls(false); // Logo Additionals without height control since carousel has it's own | |
| 85 | - $this->add_control('add_carousel_divider',['type' => Controls_Manager::DIVIDER,]); | |
| 86 | - $this->register_carousel_settings_controls(); // Carousel settings | |
| 85 | + $this->TRAIT_register_carousel_additional_controls(); // Carousel Additionals | |
| 86 | + $this->TRAIT_register_logo_adittional_controls(); | |
| 87 | + $this->add_control('add_carousel_divider', ['type' => Controls_Manager::DIVIDER,]); | |
| 88 | + $this->TRAIT_register_carousel_settings_controls(); // Carousel settings | |
| 87 | 89 | |
| 88 | 90 | $this->end_controls_section(); |
| 89 | 91 | |
| 90 | - $this->register_navigation_controls(); // Navigation settings | |
| 92 | + $this->TRAIT_register_navigation_controls(); // Navigation settings | |
| 91 | 93 | |
| 92 | 94 | $this->start_controls_section( |
| 93 | - 'section_style_review_items', | |
| 94 | - [ | |
| 95 | - 'label' => esc_html__( 'Logo Carousel', 'uicore-elements' ), | |
| 96 | - 'tab' => Controls_Manager::TAB_STYLE, | |
| 97 | - ] | |
| 98 | - ); | |
| 95 | + 'section_style_review_items', | |
| 96 | + [ | |
| 97 | + 'label' => esc_html__('Logo Carousel', 'uicore-elements'), | |
| 98 | + 'tab' => Controls_Manager::TAB_STYLE, | |
| 99 | + ] | |
| 100 | + ); | |
| 99 | 101 | |
| 100 | - $this->start_controls_tabs( 'tabs_item_style' ); | |
| 102 | + $this->start_controls_tabs('tabs_item_style'); | |
| 101 | 103 | |
| 102 | - $this->start_controls_tab( | |
| 103 | - 'tab_item_normal', | |
| 104 | - [ | |
| 105 | - 'label' => esc_html__( 'Normal', 'uicore-elements' ), | |
| 106 | - ] | |
| 107 | - ); | |
| 108 | - $this->register_carousel_normal_item_style_controls(false); | |
| 109 | - $this->register_logos_image_style_controls('normal'); | |
| 110 | - $this->end_controls_tab(); | |
| 104 | + $this->start_controls_tab( | |
| 105 | + 'tab_item_normal', | |
| 106 | + [ | |
| 107 | + 'label' => esc_html__('Normal', 'uicore-elements'), | |
| 108 | + ] | |
| 109 | + ); | |
| 110 | + $this->TRAIT_register_normal_item_style_controls(false); | |
| 111 | + $this->TRAIT_register_logos_image_style_controls('normal'); | |
| 112 | + $this->end_controls_tab(); | |
| 111 | 113 | |
| 112 | - $this->start_controls_tab( | |
| 113 | - 'tab_item_hover', | |
| 114 | - [ | |
| 115 | - 'label' => esc_html__( 'Hover', 'uicore-elements' ), | |
| 116 | - ] | |
| 117 | - ); | |
| 118 | - $this->register_carousel_hover_item_style_controls(false); | |
| 119 | - $this->register_logos_image_style_controls('hover'); | |
| 120 | - $this->end_controls_tab(); | |
| 114 | + $this->start_controls_tab( | |
| 115 | + 'tab_item_hover', | |
| 116 | + [ | |
| 117 | + 'label' => esc_html__('Hover', 'uicore-elements'), | |
| 118 | + ] | |
| 119 | + ); | |
| 120 | + $this->TRAIT_register_hover_item_style_controls(false); | |
| 121 | + $this->TRAIT_register_logos_image_style_controls('hover'); | |
| 122 | + $this->end_controls_tab(); | |
| 121 | 123 | |
| 122 | - $this->start_controls_tab( | |
| 123 | - 'tab_item_active', | |
| 124 | - [ | |
| 125 | - 'label' => esc_html__( 'Active', 'uicore-elements' ), | |
| 126 | - ] | |
| 127 | - ); | |
| 128 | - $this->register_carousel_active_item_style_controls(false); | |
| 129 | - $this->register_logos_image_style_controls('active'); | |
| 130 | - $this->end_controls_tabs(); | |
| 124 | + $this->start_controls_tab( | |
| 125 | + 'tab_item_active', | |
| 126 | + [ | |
| 127 | + 'label' => esc_html__('Active', 'uicore-elements'), | |
| 128 | + ] | |
| 129 | + ); | |
| 130 | + $this->TRAIT_register_active_item_style_controls(false); | |
| 131 | + $this->TRAIT_register_logos_image_style_controls('active'); | |
| 132 | + $this->end_controls_tabs(); | |
| 131 | 133 | |
| 132 | - $this->end_controls_tabs(); // Necessary because register_testimonial_card_controls() OPENS but DON'T close start_controls_tabs() | |
| 134 | + $this->end_controls_tabs(); // Necessary because register_testimonial_card_controls() OPENS but DON'T close start_controls_tabs() | |
| 133 | 135 | |
| 134 | 136 | $this->end_controls_section(); |
| 135 | 137 | |
| 136 | - $this->register_navigation_style_controls(); // Carousel Navigation Styles | |
| 138 | + $this->TRAIT_register_navigation_style_controls(); // Carousel Navigation Styles | |
| 137 | 139 | |
| 138 | 140 | $this->start_controls_section( |
| 139 | 141 | 'section_style_animations', |
| 140 | 142 | [ |
| @@ -142,43 +144,36 @@ | ||
| 142 | 144 | 'tab' => Controls_Manager::TAB_STYLE, |
| 143 | 145 | ] |
| 144 | 146 | ); |
| 145 | 147 | |
| 146 | - $this->TRAIT_register_entrance_animations_controls(); | |
| 147 | - $this->TRAIT_register_hover_animation_control( | |
| 148 | - 'Item Hover Animation', | |
| 149 | - [], | |
| 150 | - ['underline'] | |
| 151 | - ); | |
| 152 | - $this->TRAIT_register_hover_animation_control( | |
| 153 | - 'Logo Hover Animation', | |
| 154 | - [], | |
| 155 | - ['underline'] | |
| 156 | - ); | |
| 148 | + $this->TRAIT_register_entrance_animations_controls(); | |
| 149 | + $this->TRAIT_register_hover_animation_control( | |
| 150 | + 'Item Hover Animation', | |
| 151 | + [], | |
| 152 | + ['underline'] | |
| 153 | + ); | |
| 154 | + $this->TRAIT_register_hover_animation_control( | |
| 155 | + 'Logo Hover Animation', | |
| 156 | + [], | |
| 157 | + ['underline'] | |
| 158 | + ); | |
| 157 | 159 | |
| 158 | 160 | $this->end_controls_section(); |
| 161 | + | |
| 162 | + // Remove unused logo control | |
| 163 | + $this->remove_control('height'); | |
| 159 | 164 | } |
| 160 | 165 | public function render() |
| 161 | 166 | { |
| 162 | - $ID = $this->get_ID(); | |
| 163 | - $settings = $this->get_settings_for_display(); | |
| 164 | - | |
| 165 | - $this->add_render_attribute('review-carousel', 'class', ['ui-e-carousel', "carousel-$ID"]); | |
| 166 | - ?> | |
| 167 | - <div <?php $this->print_render_attribute_string('review-carousel'); ?>> | |
| 168 | - <?php | |
| 169 | - | |
| 170 | - $this->render_logo_item(); | |
| 171 | - | |
| 172 | - if(in_array('arrows', $settings['navigation'])) { | |
| 173 | - $this->render_carousel_arrows(); | |
| 174 | - } | |
| 175 | - | |
| 176 | - if(in_array('fraction', $settings['navigation'])) { | |
| 177 | - $this->render_carousel_fraction(); | |
| 178 | - } | |
| 179 | - ?> | |
| 167 | + $total_slides = count($this->get_settings_for_display('logo_list')); | |
| 168 | + $this->TRAIT_render_center_loop_warning($total_slides); | |
| 169 | +?> | |
| 170 | + <div class="ui-e-carousel swiper"> | |
| 171 | + <div class='swiper-wrapper'> | |
| 172 | + <?php $this->TRAIT_render_logo_item(); ?> | |
| 180 | 173 | </div> |
| 181 | - <?php | |
| 174 | + </div> | |
| 175 | + <?php $this->TRAIT_render_carousel_navigations($total_slides); ?> | |
| 176 | +<?php | |
| 182 | 177 | } |
| 183 | 178 | } |
| 184 | -\Elementor\Plugin::instance()->widgets_manager->register(new LogoCarousel()); | |
| 179 | +\Elementor\Plugin::instance()->widgets_manager->register(new LogoCarousel()); | |