start_controls_section(
'wpr_section_parallax',
[
'tab' => Controls_Manager::TAB_STYLE,
'label' => sprintf(esc_html__('Parallax - %s', 'wpr-addons'), Utilities::get_plugin_name()),
]
);
$element->add_control(
'wpr_parallax',
[
'type' => Controls_Manager::RAW_HTML,
'raw' => 'Update changes to Preview
',
'separator' => 'after'
]
);
if ( 'on' === get_option('wpr-parallax-background', 'on') ) {
$element->add_control(
'parallax_video_tutorial',
[
'raw' => '
Watch Video Tutorial ',
'type' => Controls_Manager::RAW_HTML,
]
);
$element->add_control(
'wpr_enable_jarallax',
[
'type' => Controls_Manager::SWITCHER,
'label' => __('Enable Background Parallax', 'wpr-addons'),
'default' => 'no',
'label_on' => __('Yes', 'wpr-addons'),
'label_off' => __('No', 'wpr-addons'),
'return_value' => 'yes',
'render_type' => 'template',
'prefix_class' => 'wpr-jarallax-'
]
);
// $element->add_control(
// 'parallax_item_bg_size',
// [
// 'label' => esc_html__( 'Size', 'wpr-addons' ),
// 'type' => Controls_Manager::SELECT,
// 'default' => 'cover',
// 'options' => [
// 'cover' => esc_html__( 'Cover', 'wpr-addons' ),
// 'contain' => esc_html__( 'Contain', 'wpr-addons' ),
// 'auto' => esc_html__( 'Auto', 'wpr-addons' ),
// ],
// 'selectors' => [
// '{{WRAPPER}}.wpr-jarallax-yes' => 'position: relative; background-size: {{VALUE}}; background-repeat: no-repeat background-blend-mode: darken; background-position: left top;',
// '{{WRAPPER}} .wpr-jarallax' => 'position: relative; background-size: {{VALUE}}; background-repeat: no-repeat; background-blend-mode: darken; background-position: left top;',
// ],
// ]
// );
$element->add_control(
'speed',
[
'label' => __( 'Animation Speed', 'wpr-addons' ),
'type' => Controls_Manager::NUMBER,
'min' => -1.0,
'max' => 2.0,
'step' => 0.1,
'default' => 1.4,
'render_type' => 'template',
'condition' => [
'wpr_enable_jarallax' => 'yes'
]
]
);
if ( defined('WPR_ADDONS_PRO_VERSION') && wpr_fs()->can_use_premium_code() ) {
\WprAddonsPro\Extensions\Wpr_Parallax_Scroll_Pro::add_control_scroll_effect($element);
} else {
$element->add_control(
'scroll_effect',
[
'label' => __( 'Scrolling Effect', 'wpr-addons' ),
'type' => Controls_Manager::SELECT,
'default' => 'scroll',
'options' => [
'scroll' => esc_html__( 'Scroll', 'wpr-addons' ),
'scale' => esc_html__( 'Zoom', 'wpr-addons' ),
'pro-op' => esc_html__( 'Opacity (Pro)', 'wpr-addons' ),
'pro-sclo' => esc_html__('Scale Opacity (Pro)', 'wpr-addons'),
'pro-scrlo' => esc_html__( 'Scroll Opacity (Pro)', 'wpr-addons' )
],
'render_type' => 'template',
'condition' => [
'wpr_enable_jarallax' => 'yes'
]
]
);
// Upgrade to Pro Notice
Utilities::upgrade_pro_notice( $element, Controls_Manager::RAW_HTML, 'parallax-background', 'scroll_effect', ['pro-op','pro-sclo','pro-scrlo'] );
}
$element->add_control(
'bg_image',
[
'label' => __( 'Choose Image', 'wpr-addons' ),
'type' => Controls_Manager::MEDIA,
'dynamic' => [
'active' => true,
],
'default' => [
'url' => Utils::get_placeholder_image_src(),
],
'render_type' => 'template',
'condition' => [
'wpr_enable_jarallax' => 'yes'
]
]
);
} // end if ( 'on' === get_option('wpr-parallax-background', 'on') ) {
$element->add_control(
'parallax_type_divider',
[
'type' => Controls_Manager::DIVIDER,
'style' => 'thick',
]
);
if ( 'on' === get_option('wpr-parallax-multi-layer', 'on') ) {
$element->add_control(
'parallax_multi_video_tutorial',
[
'raw' => 'Watch Video Tutorial ',
'type' => Controls_Manager::RAW_HTML,
]
);
$element->add_control(
'wpr_enable_parallax_hover',
[
'type' => Controls_Manager::SWITCHER,
'label' => __('Enable Multi Layer Parallax', 'wpr-addons'),
'default' => 'no',
'label_on' => __('Yes', 'wpr-addons'),
'label_off' => __('No', 'wpr-addons'),
'return_value' => 'yes',
'render_type' => 'template',
'prefix_class' => 'wpr-parallax-'
]
);
$element->add_control(
'invert_direction',
[
'type' => Controls_Manager::SWITCHER,
'label' => __('Invert Animation Direction', 'wpr-addons'),
'default' => 'no',
'label_on' => __('Yes', 'wpr-addons'),
'label_off' => __('No', 'wpr-addons'),
'return_value' => 'yes',
'render_type' => 'template',
'condition' => [
'wpr_enable_parallax_hover' => 'yes'
]
]
);
$element->add_control(
'scalar_speed',
[
'type' => Controls_Manager::SLIDER,
'label' => esc_html__( 'Animation Speed', 'wpr-addons' ),
'size_units' => [ '%' ],
'range' => [
'%' => [
'min' => 0.0,
'max' => 100.0,
]
],
'default' => [
'unit' => '%',
'size' => 10.0,
],
'condition' => [
'wpr_enable_parallax_hover' => 'yes'
]
]
);
$repeater = new Repeater();
$repeater->add_control(
'repeater_bg_image',
[
'label' => __( 'Choose Image', 'wpr-addons' ),
'type' => Controls_Manager::MEDIA,
// 'dynamic' => [
// 'active' => true,
// ],
'default' => [
'url' => Utils::get_placeholder_image_src(),
],
'render_type' => 'template',
]
);
$repeater->add_control(
'layer_width',
[
'label' => esc_html__( 'Image Width', 'wpr-addons' ),
'type' => Controls_Manager::NUMBER,
'default' => 100,
'min' => 0,
'max' => 1000,
'step' => 10,
'selectors' => [
'{{WRAPPER}} {{CURRENT_ITEM}}.wpr-parallax-ml-children' => 'width: {{SIZE}}px !important;',
],
]
);
$repeater->add_responsive_control(
'layer_position_hr',
[
'type' => Controls_Manager::SLIDER,
'label' => esc_html__( 'Horizontal Position (%)', 'wpr-addons' ),
'size_units' => [ '%' ],
'range' => [
'%' => [
'min' => 0,
'max' => 100,
]
],
'default' => [
'unit' => '%',
'size' => 50,
],
'selectors' => [
'{{WRAPPER}} {{CURRENT_ITEM}}.wpr-parallax-ml-children' => 'left: {{SIZE}}{{UNIT}} !important;',
],
'separator' => 'before',
]
);
$repeater->add_responsive_control(
'layer_position_vr',
[
'type' => Controls_Manager::SLIDER,
'label' => esc_html__( 'Vertical Position (%)', 'wpr-addons' ),
'size_units' => [ '%' ],
'range' => [
'%' => [
'min' => 0,
'max' => 100,
]
],
'default' => [
'unit' => '%',
'size' => 50,
],
'selectors' => [
'{{WRAPPER}} {{CURRENT_ITEM}}.wpr-parallax-ml-children' => 'top: {{SIZE}}{{UNIT}}!important;',
],
]
);
$repeater->add_control(
'data_depth',
[
'label' => __( 'Data Depth', 'wpr-addons' ),
'type' => Controls_Manager::NUMBER,
'min' => -1.0,
'max' => 2.0,
'step' => 0.1,
'default' => 0.4,
'render_type' => 'template',
]
);
$element->add_control(
'hover_parallax',
[
'label' => __( 'Repeater List', 'wpr-addons' ),
'type' => Controls_Manager::REPEATER,
'fields' => $repeater->get_controls(),
'default' => [
[
'layer_position_vr' => [
'unit' => '%',
'size' => 30,
],
'layer_position_hr' => [
'unit' => '%',
'size' => 40,
],
],
[
'layer_position_vr' => [
'unit' => '%',
'size' => 60,
],
'layer_position_hr' => [
'unit' => '%',
'size' => 20,
],
],
],
'condition' => [
'wpr_enable_parallax_hover' => 'yes'
]
]
);
if ( !defined('WPR_ADDONS_PRO_VERSION') || !wpr_fs()->can_use_premium_code() ) {
$element->add_control(
'paralax_repeater_pro_notice',
[
'type' => Controls_Manager::RAW_HTML,
'raw' => 'More than 2 Layers are available
in the Pro version',
// 'raw' => 'More than 2 Layers are available
in the Pro version',
'content_classes' => 'wpr-pro-notice',
'condition' => [
'wpr_enable_parallax_hover' => 'yes'
]
]
);
}
} // end if ( 'on' === get_option('wpr-parallax-multi-layer', 'on') ) {
$element->end_controls_section();
}
public function _before_render( $element ) {
// bail if any other element but section
// output buffer controlling functions removed elements from live preview
if ( $element->get_name() !== 'section' && $element->get_name() !== 'container' ) return;
$settings = $element->get_settings_for_display();
// Parallax Background
if ( 'on' === get_option('wpr-parallax-background', 'on') ) {
if ( 'yes' === $settings['wpr_enable_jarallax'] ) {
$element->add_render_attribute( '_wrapper', [
'class' => 'wpr-jarallax',
'speed-data' => $settings['speed'],
'bg-image' => $settings['bg_image']['url'],
'scroll-effect' => $settings['scroll_effect'],
] );
// if ( 'on' === get_option('wpr-parallax-background', 'on') ) {
// echo 'get_render_attribute_string( '_wrapper' ) .'>
';
// }
}
}
// Parallax Multi Layer
if ( 'on' === get_option('wpr-parallax-multi-layer', 'on') ) {
if ( $settings['wpr_enable_parallax_hover'] == 'yes' ) {
if ( $settings['hover_parallax'] ) {
echo '';
foreach ( $settings['hover_parallax'] as $key => $item ) {
if ( $key < 2 || defined('WPR_ADDONS_PRO_VERSION') && wpr_fs()->can_use_premium_code() ) {
echo '
';
echo '
 .')
';
echo '
';
}
}
echo '
<# _.each( settings.hover_parallax, function( item, index ) { #>
<# if ( index > 1 ) return; #>
<# }); #>
<# _.each( settings.hover_parallax, function( item ) { #>
<# }); #>