374 lines
16 KiB
PHP
374 lines
16 KiB
PHP
<?php
|
|
namespace Essential_Addons_Elementor\Pro\Extensions;
|
|
|
|
if (!defined('ABSPATH')) {
|
|
exit;
|
|
}
|
|
|
|
use \Elementor\Controls_Manager;
|
|
use \Elementor\Core\Responsive\Responsive;
|
|
use \Elementor\Repeater;
|
|
use \Elementor\Utils;
|
|
|
|
class EAEL_Parallax_Section
|
|
{
|
|
|
|
public function __construct()
|
|
{
|
|
add_action('elementor/element/section/section_layout/after_section_end', array($this, 'register_controls'), 10);
|
|
add_action('elementor/frontend/section/after_render', array($this, 'after_render'), 10);
|
|
|
|
//Elementor Flexbox Container
|
|
add_action('elementor/element/container/section_layout/after_section_end', array($this, 'register_controls'), 10);
|
|
add_action('elementor/frontend/container/after_render', array($this, 'after_render'), 10);
|
|
}
|
|
|
|
public function register_controls($element)
|
|
{
|
|
$element->start_controls_section('eael_parallax_section',
|
|
[
|
|
'label' => __('<i class="eaicon-logo"></i> Parallax', 'essential-addons-elementor'),
|
|
'tab' => Controls_Manager::TAB_LAYOUT,
|
|
]
|
|
);
|
|
|
|
$element->add_control('eael_parallax_switcher',
|
|
[
|
|
'label' => __('Enable Parallax', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
]
|
|
);
|
|
|
|
$element->add_control('eael_parallax_update',
|
|
[
|
|
'label' => '<div class="elementor-update-preview" style="display: block;"><div class="elementor-update-preview-button-wrapper" style="display:block;"><button class="elementor-update-preview-button elementor-button elementor-button-success" style="background: #d30c5c; margin: 0 auto; display:block;">Apply Changes</button></div><div class="elementor-update-preview-title" style="display:block;text-align:center;margin-top: 10px;">Update changes to page</div></div>',
|
|
'type' => Controls_Manager::RAW_HTML,
|
|
'condition' => [
|
|
'eael_parallax_switcher' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_control('eael_parallax_type',
|
|
[
|
|
'label' => __('Type', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::SELECT,
|
|
'options' => [
|
|
'scroll' => __('Scroll', 'essential-addons-elementor'),
|
|
'scroll-opacity' => __('Scroll with Fade', 'essential-addons-elementor'),
|
|
'opacity' => __('Fade', 'essential-addons-elementor'),
|
|
'scale' => __('Zoom', 'essential-addons-elementor'),
|
|
'scale-opacity' => __('Zoom with Fade', 'essential-addons-elementor'),
|
|
'automove' => __('In-Motion', 'essential-addons-elementor'),
|
|
'multi' => __('Multi-Layered', 'essential-addons-elementor'),
|
|
],
|
|
'label_block' => 'true',
|
|
'condition' => [
|
|
'eael_parallax_switcher' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_control('eael_parallax_auto_type',
|
|
[
|
|
'label' => __('Motion Direction', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => 11,
|
|
'options' => [
|
|
11 => __('Left to Right', 'essential-addons-elementor'),
|
|
'right' => __('Right to Left', 'essential-addons-elementor'),
|
|
'top' => __('Top to Bottom', 'essential-addons-elementor'),
|
|
'bottom' => __('Bottom to Top', 'essential-addons-elementor'),
|
|
],
|
|
'condition' => [
|
|
'eael_parallax_type' => 'automove',
|
|
'eael_parallax_switcher' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_control('eael_parallax_speed',
|
|
[
|
|
'label' => __('Parallax Speed', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::NUMBER,
|
|
'min' => -1,
|
|
'max' => 2,
|
|
'step' => 0.1,
|
|
'default' => 1.3,
|
|
'condition' => [
|
|
'eael_parallax_type!' => ['automove', 'multi'],
|
|
'eael_parallax_switcher' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_control('eael_auto_speed',
|
|
[
|
|
'label' => __('Motion Speed', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::NUMBER,
|
|
'default' => 4,
|
|
'min' => 0,
|
|
'max' => 150,
|
|
'condition' => [
|
|
'eael_parallax_type' => 'automove',
|
|
'eael_parallax_switcher' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_control('eael_parallax_android_support',
|
|
[
|
|
'label' => esc_html__('Parallax on Android Devices', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'condition' => [
|
|
'eael_parallax_type!' => ['automove', 'multi'],
|
|
'eael_parallax_switcher' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_control('eael_parallax_ios_support',
|
|
[
|
|
'label' => esc_html__('Parallax on iOS Devices', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'condition' => [
|
|
'eael_parallax_type!' => ['automove', 'multi'],
|
|
'eael_parallax_switcher' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$repeater = new Repeater();
|
|
|
|
$repeater->add_control('eael_parallax_layer_image',
|
|
[
|
|
'label' => __('Choose Image', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::MEDIA,
|
|
'default' => [
|
|
'url' => Utils::get_placeholder_image_src(),
|
|
],
|
|
'label_block' => true,
|
|
'ai' => [
|
|
'active' => false,
|
|
],
|
|
]
|
|
);
|
|
|
|
$repeater->add_control('eael_parallax_layer_mouse',
|
|
[
|
|
'label' => esc_html__('Mouse Hover Interaction', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'default' => 'yes',
|
|
]
|
|
);
|
|
|
|
$repeater->add_control('eael_parallax_layer_rate',
|
|
[
|
|
'label' => esc_html__('Moving Intensity', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::NUMBER,
|
|
'default' => -10,
|
|
'min' => -20,
|
|
'max' => 20,
|
|
'step' => 1,
|
|
'condition' => [
|
|
'eael_parallax_layer_mouse' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$repeater->add_control('eael_parallax_layer_hor_pos',
|
|
[
|
|
'label' => esc_html__('Horizontal Position', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::NUMBER,
|
|
'default' => 50,
|
|
'min' => 0,
|
|
'max' => 100,
|
|
]
|
|
);
|
|
|
|
$repeater->add_control('eael_parallax_layer_ver_pos',
|
|
[
|
|
'label' => esc_html__('Vertical Position', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::NUMBER,
|
|
'default' => 50,
|
|
'min' => 0,
|
|
'max' => 100,
|
|
]
|
|
);
|
|
|
|
$repeater->add_control('eael_parallax_layer_back_size',
|
|
[
|
|
'label' => esc_html__('Image Size', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => 'auto',
|
|
'options' => [
|
|
'auto' => esc_html__('Auto', 'essential-addons-elementor'),
|
|
'cover' => esc_html__('Cover', 'essential-addons-elementor'),
|
|
'contain' => esc_html__('Contain', 'essential-addons-elementor'),
|
|
],
|
|
]
|
|
);
|
|
|
|
$repeater->add_control('eael_parallax_layer_z_index',
|
|
[
|
|
'label' => __('z-index', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::NUMBER,
|
|
'default' => 1,
|
|
]
|
|
);
|
|
|
|
$element->add_control( 'eael_parallax_layers_list',
|
|
[
|
|
'label' => '',
|
|
'type' => Controls_Manager::REPEATER,
|
|
'fields' => $repeater->get_controls(),
|
|
'style_transfer' => false,
|
|
'condition' => [
|
|
'eael_parallax_switcher' => 'yes',
|
|
'eael_parallax_type' => 'multi',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->end_controls_section();
|
|
}
|
|
|
|
public function after_render($element)
|
|
{
|
|
$settings = $element->get_settings_for_display();
|
|
$parallax = isset($settings['eael_parallax_type']) ? $settings['eael_parallax_type'] : '';
|
|
|
|
if ( ( 'container' === $element->get_type() || 'section' === $element->get_type() ) && isset($parallax)
|
|
&& '' !== $parallax && 'yes' === $element->get_settings('eael_parallax_switcher')
|
|
) {
|
|
$android = (isset($settings['eael_parallax_android_support']) && $settings['eael_parallax_android_support'] == 'yes') ? 0 : 1;
|
|
$ios = (isset($settings['eael_parallax_ios_support']) && $settings['eael_parallax_ios_support'] == 'yes') ? 0 : 1;
|
|
$speed = !empty($settings['eael_parallax_speed']) ? $settings['eael_parallax_speed'] : 0.5;
|
|
$auto_speed = !empty($settings['eael_auto_speed']) ? $settings['eael_auto_speed'] : 3;
|
|
$repeater_list = (isset($settings['eael_parallax_layers_list']) && $settings['eael_parallax_layers_list']) ? $settings['eael_parallax_layers_list'] : array();
|
|
|
|
?>
|
|
<script>
|
|
(function($) {
|
|
"use strict";
|
|
|
|
var target = $('.elementor-element-<?php echo esc_attr( $element->get_id() ); ?>');
|
|
|
|
<?php if ('automove' != $parallax && 'multi' != $parallax): ?>
|
|
|
|
var EaelParallaxElement = {
|
|
|
|
init: function() {
|
|
elementorFrontend.hooks.addAction('frontend/element_ready/global', EaelParallaxElement.initWidget);
|
|
},
|
|
responsiveParallax: function(){
|
|
var android = <?php echo esc_attr( $android ); ?>,
|
|
ios = <?php echo esc_attr( $ios ); ?>;
|
|
switch( true || 1 ){
|
|
case android && ios:
|
|
return /iPad|iPhone|iPod|Android/;
|
|
break;
|
|
case android && ! ios:
|
|
return /Android/;
|
|
break;
|
|
case ! android && ios:
|
|
return /iPad|iPhone|iPod/;
|
|
break;
|
|
case ( ! android && ! ios ):
|
|
return null;
|
|
}
|
|
},
|
|
initWidget: function( $scope ) {
|
|
|
|
target.jarallax({
|
|
type: '<?php echo esc_attr( $parallax ); ?>',
|
|
speed: <?php echo esc_attr( $speed ); ?>,
|
|
keepImg: true,
|
|
disableParallax: EaelParallaxElement.responsiveParallax(),
|
|
});
|
|
}
|
|
|
|
};
|
|
|
|
$( window ).on('elementor/frontend/init', EaelParallaxElement.init);
|
|
|
|
<?php elseif ('multi' == $parallax): $counter = 0;?>
|
|
target.addClass('eael-prallax-multi');
|
|
|
|
<?php foreach ($repeater_list as $layer) {
|
|
$counter = $counter + 1;?>
|
|
var backgroundImage = '<?php echo esc_url( $layer['eael_parallax_layer_image']['url'] ); ?>',
|
|
mouseParallax = ' data-parallax="' + <?php echo ($layer['eael_parallax_layer_mouse'] == 'yes') ? 'true' : 'false'; ?> +'" ',
|
|
mouseRate = ' data-rate="' + <?php echo esc_attr( $layer['eael_parallax_layer_rate'] ); ?> + '" ';
|
|
|
|
$('<div id="eael-parallax-layer-<?php echo esc_attr( $element->get_id() ) . '-' . esc_attr( $counter ); ?>"' + mouseParallax + mouseRate +' class="eael-parallax-layer"></div>').prependTo( target ).css({
|
|
'z-index' : <?php echo !empty($layer['eael_parallax_layer_z_index']) ? esc_attr( $layer['eael_parallax_layer_z_index'] ) : 0; ?>,
|
|
'background-image' : 'url(' + backgroundImage + ')',
|
|
'background-size' : '<?php echo esc_attr( $layer['eael_parallax_layer_back_size'] ); ?>',
|
|
'background-position-x' : <?php echo !empty($layer['eael_parallax_layer_hor_pos']) ? esc_attr( $layer['eael_parallax_layer_hor_pos'] ) : 50; ?> + '%',
|
|
'background-position-y' : <?php echo !empty($layer['eael_parallax_layer_ver_pos']) ? esc_attr( $layer['eael_parallax_layer_ver_pos'] ) : 50; ?> + '%'
|
|
});
|
|
<?php };?>
|
|
|
|
if( $(window).outerWidth() > <?php echo esc_js(Responsive::get_breakpoints()['md']); ?> ) {
|
|
$('.elementor-element-<?php echo esc_attr( $element->get_id() ); ?>').mousemove( function( e ) {
|
|
|
|
$( this ).find('.eael-parallax-layer[data-parallax="true"]').each(function( index,element ){
|
|
$( this ).parallax( $( this ).data('rate'), e );
|
|
});
|
|
});
|
|
}
|
|
<?php else: ?>
|
|
|
|
target.css('background-position','0px 0px');
|
|
|
|
<?php if (11 == $settings['eael_parallax_auto_type']): ?>
|
|
var position = parseInt( target.css('background-position-x') );
|
|
|
|
setInterval( function() {
|
|
position = position + <?php echo esc_attr( $auto_speed ); ?>;
|
|
target.css("backgroundPosition", position + "px 0");
|
|
},70 );
|
|
|
|
<?php elseif ('right' == $settings['eael_parallax_auto_type']): ?>
|
|
|
|
var position = parseInt( target.css('background-position-x') );
|
|
|
|
setInterval( function() {
|
|
|
|
position = position - <?php echo esc_attr( $auto_speed ); ?>;
|
|
|
|
target.css("backgroundPosition", position + "px 0");
|
|
|
|
},70 );
|
|
|
|
<?php elseif ('top' == $settings['eael_parallax_auto_type']): ?>
|
|
|
|
var position = parseInt(target.css('background-position-y'));
|
|
|
|
setInterval( function() {
|
|
|
|
position = position + <?php echo esc_attr( $auto_speed ); ?>;
|
|
|
|
target.css("backgroundPosition", "0 " + position + "px");
|
|
|
|
},70 );
|
|
|
|
<?php elseif ('bottom' == $settings['eael_parallax_auto_type']): ?>
|
|
|
|
var position = parseInt( target.css('background-position-y') );
|
|
|
|
setInterval( function() {
|
|
|
|
position = position - <?php echo esc_attr( $auto_speed ); ?>;
|
|
target.css("backgroundPosition", "0 " + position + "px");
|
|
|
|
},70 );
|
|
|
|
<?php endif;?>
|
|
<?php endif;?>
|
|
}( jQuery ) );
|
|
</script>
|
|
<?php }
|
|
}
|
|
}
|