Last active
September 2, 2020 03:24
-
-
Save namncn/fe7d8190e248e7575ab49004367c5974 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
namespace Pixelplus\Elementor\Widget; | |
if ( ! defined( 'ABSPATH' ) ) { | |
exit; // Exit if accessed directly. | |
} | |
use Elementor\Widget_Base; | |
use Elementor\Controls_Manager; | |
class Project_Carousel extends Widget_Base { | |
public function get_name() { | |
return 'pixelplus-project-carousel'; | |
} | |
public function get_title() { | |
return __( 'Project Carousel', 'pixelplus' ); | |
} | |
public function get_icon() { | |
return 'eicon-slider-push'; | |
} | |
public function get_keywords() { | |
return array( 'carousel', 'slider', 'project' ); | |
} | |
public function get_categories() { | |
return array( 'pixelplus' ); | |
} | |
public function get_script_depends() { | |
return array( 'pixelplus-elementor' ); | |
} | |
protected function _register_controls() { | |
$this->start_controls_section( | |
'section_items', | |
array( | |
'label' => __( 'Items', 'pixelplus' ), | |
) | |
); | |
$categories = get_terms( | |
array( | |
'taxonomy' => 'project_cat', | |
'fields' => 'id=>name', | |
) | |
); | |
$this->add_control( | |
'term', | |
array( | |
'label' => __( 'Categories', 'elementor-pro' ), | |
'type' => Controls_Manager::SELECT, | |
'options' => $categories, | |
'default' => array(), | |
'label_block' => true, | |
) | |
); | |
$this->add_control( | |
'number', | |
array( | |
'label' => __( 'Posts Per Page', 'elementor-pro' ), | |
'type' => Controls_Manager::NUMBER, | |
'default' => 4, | |
) | |
); | |
$this->add_responsive_control( | |
'slides_per_view', | |
array( | |
'label' => __( 'Slides Per View', 'elementor-pro' ), | |
'type' => Controls_Manager::NUMBER, | |
'default' => 3, | |
) | |
); | |
$this->add_responsive_control( | |
'spacebetween', | |
array( | |
'label' => __( 'Space Between', 'elementor-pro' ), | |
'type' => Controls_Manager::NUMBER, | |
'default' => 40, | |
) | |
); | |
$this->end_controls_section(); | |
} | |
protected function render() { | |
$settings = $this->get_settings_for_display(); | |
$options = array( | |
'slides_per_view' => isset( $settings['slides_per_view'] ) ? $settings['slides_per_view'] : 3, | |
'slides_per_view_tablet' => isset( $settings['slides_per_view_tablet'] ) ? $settings['slides_per_view_tablet'] : 2, | |
'slides_per_view_mobile' => isset( $settings['slides_per_view_mobile'] ) ? $settings['slides_per_view_mobile'] : 1, | |
'spacebetween' => isset( $settings['spacebetween'] ) ? $settings['spacebetween'] : 40, | |
'spacebetween_tablet' => isset( $settings['spacebetween_tablet'] ) ? $settings['spacebetween_tablet'] : 30, | |
'spacebetween_mobile' => isset( $settings['spacebetween_mobile'] ) ? $settings['spacebetween_mobile'] : 10, | |
); | |
$this->add_render_attribute( | |
array( | |
'container' => array( | |
'class' => 'pixelplus-project-carousel-container', | |
'dir' => 'ltr', | |
'data-settings' => wp_json_encode( $options ), | |
), | |
'wrapper' => array( | |
'class' => 'pixelplus-project-carousel-wrapper swiper-wrapper', | |
), | |
) | |
); | |
$project_args = array( | |
'post_type' => 'project', | |
'posts_per_page' => $settings['number'], | |
'ignore_sticky_posts' => 1, | |
); | |
if ( $settings['term'] ) { | |
$project_args['tax_query'][] = array( | |
'taxonomy' => 'project_cat', | |
'terms' => absint( $settings['term'] ), | |
); | |
} | |
$project = new \WP_Query( $project_args ); | |
?> | |
<?php if ( $project->have_posts() ) : ?> | |
<div <?php echo $this->get_render_attribute_string( 'container' ); ?>> | |
<div class="swiper-container"> | |
<div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?>> | |
<?php | |
$i = 0; | |
while ( $project->have_posts() ) : | |
$project->the_post(); | |
$i++; | |
if ( 10 > $i ) { | |
$i = '0' . $i; | |
} | |
?> | |
<div class="project-item-slide swiper-slide"> | |
<article class="project-item"> | |
<header class="project-item__thumb"> | |
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a> | |
</header> | |
<div class="project-item-bottom"> | |
<?php the_title( '<div class="project-item__title"><a href="' . get_permalink() . '"><span>' . $i . '/</span>', '</a></div>' ); ?> | |
<a class="project-item__link" href="<?php the_permalink(); ?>"><?php esc_html_e( 'Read more', 'pixelplus' ); ?></a> | |
</div> | |
</article> | |
</div> | |
<?php | |
endwhile; | |
wp_reset_postdata(); | |
?> | |
</div> | |
</div> | |
<?php if ( 3 < $project->post_count ) : ?> | |
<div class="pixelplus-project-button pixelplus-project-button-prev"></div> | |
<div class="pixelplus-project-button pixelplus-project-button-next"></div> | |
<?php endif; ?> | |
</div> | |
<?php endif; ?> | |
<?php | |
} | |
} | |
var WidgetProjectCarouselHandler = function($scope, $) { | |
var elem = $scope.find('.pixelplus-project-carousel-container').eq(0); | |
var container = elem.find('.swiper-container'); | |
var navprev = elem.find('.pixelplus-project-button-prev'); | |
var navnext = elem.find('.pixelplus-project-button-next'); | |
var settings = elem.data('settings'); | |
if (elem.length > 0) { | |
var swiper = new Swiper(container, { | |
loop: true, | |
navigation: { | |
nextEl: navnext, | |
prevEl: navprev, | |
}, | |
keyboard: { | |
enabled: true, | |
onlyInViewport: false, | |
}, | |
autoplay: { | |
delay: 5000, | |
}, | |
lazy: true, | |
breakpoints: { | |
320: { | |
slidesPerView: 1, | |
spaceBetween: 0, | |
}, | |
375: { | |
slidesPerView: settings.slides_per_view_mobile, | |
spaceBetween: settings.spacebetween_mobile, | |
}, | |
1024: { | |
slidesPerView: settings.slides_per_view_tablet, | |
spaceBetween: settings.spacebetween_tablet, | |
}, | |
1366: { | |
slidesPerView: settings.slides_per_view, | |
spaceBetween: settings.spacebetween, | |
}, | |
} | |
}); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment