File: /var/www/vfconf/wp-content/plugins/so-widgets-bundle/base/inc/widgets/base-carousel.class.php
<?php
abstract class SiteOrigin_Widget_Base_Carousel extends SiteOrigin_Widget {
public $global_settings;
/**
* Register all the frontend scripts and styles for the base carousel.
*/
public function initialize() {
$this->register_frontend_scripts(
array(
array(
'slick',
plugin_dir_url( SOW_BUNDLE_BASE_FILE ) . 'js/lib/slick' . SOW_BUNDLE_JS_SUFFIX . '.js',
array( 'jquery' ),
'1.8.1',
),
array(
'sow-carousel',
plugin_dir_url( SOW_BUNDLE_BASE_FILE ) . 'js/carousel' . SOW_BUNDLE_JS_SUFFIX . '.js',
array( 'jquery', 'slick' ),
SOW_BUNDLE_VERSION,
true,
),
)
);
$this->register_frontend_styles(
array(
array(
'slick',
plugin_dir_url( SOW_BUNDLE_BASE_FILE ) . 'css/lib/slick.css',
array(),
'1.8.1',
),
)
);
add_action( 'wp_enqueue_scripts', array( $this, 'register_assets' ) );
}
/**
* Allow widgets and other plugins to register assets for this slider.
*/
public function register_assets() {
do_action( 'siteorigin_widgets_carousel_register_assets', $this );
}
/**
* Allow widgets to override settings.
*
* @return array If overridden, an array is expected.
*/
public function override_carousel_settings() {
// Intentionally left blank.
return array();
}
/**
* Handle carousel specific settings and defaults.
*
* @return array
*/
private function get_carousel_settings() {
if ( ! empty( $this->global_settings ) ) {
return $this->global_settings;
}
$defaults = array(
'breakpoints' => array(
'tablet_landscape' => 1366,
'tablet_portrait' => 1025,
'mobile' => 480,
),
'slides_to_scroll' => array(
'desktop' => 3,
'tablet_landscape' => 3,
'tablet_portrait' => 2,
'mobile' => 1,
),
'slides_to_show' => array(
'desktop' => 3,
'tablet_landscape' => 3,
'tablet_portrait' => 2,
'mobile' => 1,
),
'navigation' => array(
'desktop' => true,
'tablet_landscape' => true,
'tablet_portrait' => true,
'mobile' => true,
),
'navigation_label' => __( 'Navigation Arrows', 'so-widgets-bundle' ),
'navigation_dots' => array(
'desktop' => true,
'tablet_landscape' => true,
'tablet_portrait' => true,
'mobile' => true,
),
'navigation_dots_label' => __( 'Navigation Dots', 'so-widgets-bundle' ),
);
$this->global_settings = wp_parse_args(
$this->override_carousel_settings(),
$defaults
);
// If the global settings are somehow empty, return the defaults.
if ( empty( $this->global_settings ) ) {
$this->global_settings = $defaults;
}
return $this->global_settings;
}
/**
* Utility method for adding section groups.
*
* @param array $field Field data
* @param string $value_type Whether the field is a placeholder or standard field. This controls whether the field data is stored by default.
*
* @return array The structured section group.
*/
private function add_section_group( $field, $value_type ) {
$carousel_settings = $this->get_carousel_settings();
$section = array(
'type' => 'section',
'label' => $field['label'],
'hide' => true,
'fields' => array(),
);
if ( isset( $field['fields'] ) ) {
foreach ( $field['fields'] as $sub_field_key => $sub_field ) {
$section['fields'][ $sub_field_key ] = $this->add_section_group( $sub_field, $value_type );
}
} else {
if ( isset( $field['breakpoint'] ) ) {
$section['fields']['breakpoint'] = array(
'type' => 'number',
'label' => __( 'Breakpoint', 'so-widgets-bundle' ),
$value_type => $field['breakpoint'],
);
}
$section['fields']['slides_to_scroll'] = array(
'type' => 'number',
'label' => __( 'Slides to Scroll', 'so-widgets-bundle' ),
'abs' => true,
'description' => sprintf(
__( 'Set the number of slides to scroll per navigation click or swipe on %s', 'so-widgets-bundle' ),
strtolower( $field['label'] )
),
$value_type => $field['slides_to_scroll'],
);
if ( ! empty( $carousel_settings['slides_to_show'] ) ) {
$section['fields']['slides_to_show'] = array(
'type' => 'number',
'abs' => true,
'label' => __( 'Slides to Show ', 'so-widgets-bundle' ),
'description' => sprintf(
__( 'The number of slides to show on %s.', 'so-widgets-bundle' ),
strtolower( $field['label'] )
),
$value_type => $field['slides_to_show'],
);
}
if ( isset( $field['navigation'] ) && ! empty( $carousel_settings['navigation_label'] ) ) {
$section['fields']['navigation'] = array(
'type' => 'checkbox',
'label' => $carousel_settings['navigation_label'],
'default' => $field['navigation'],
'state_handler' => array(
'nav_arrows[show]' => array( 'show' ),
'nav_arrows[hide]' => array( 'hide' ),
),
);
}
if ( isset( $field['navigation_dots'] ) && ! empty( $carousel_settings['navigation_dots_label'] ) ) {
$section['fields']['navigation_dots'] = array(
'type' => 'checkbox',
'label' => $carousel_settings['navigation_dots_label'],
'default' => $field['navigation'],
'state_handler' => array(
'nav_dots[show]' => array( 'show' ),
'nav_dots[hide]' => array( 'hide' ),
),
);
}
}
return $section;
}
public function responsive_form_fields( $context = 'widget' ) {
$carousel_settings = $this->get_carousel_settings();
// If the context is a widget, the global values are displayed using a
// placeholder to prevent the values from being stored.
$value_type = $context == 'widget' ? 'placeholder' : 'default';
$fields = array(
'desktop' => array(
'label' => __( 'Desktop', 'so-widgets-bundle' ),
'slides_to_scroll' => $carousel_settings['slides_to_scroll']['desktop'],
'navigation' => $carousel_settings['navigation']['desktop'],
),
'tablet' => array(
'label' => __( 'Tablet', 'so-widgets-bundle' ),
'fields' => array(
'landscape' => array(
'label' => __( 'Landscape', 'so-widgets-bundle' ),
'breakpoint' => $carousel_settings['breakpoints']['tablet_landscape'],
'slides_to_scroll' => $carousel_settings['slides_to_scroll']['tablet_landscape'],
'navigation' => $carousel_settings['navigation']['tablet_landscape'],
),
'portrait' => array(
'label' => __( 'Portrait', 'so-widgets-bundle' ),
'breakpoint' => $carousel_settings['breakpoints']['tablet_portrait'],
'slides_to_scroll' => $carousel_settings['slides_to_scroll']['tablet_portrait'],
'navigation' => $carousel_settings['navigation']['tablet_portrait'],
),
),
),
'mobile' => array(
'label' => __( 'Mobile', 'so-widgets-bundle' ),
'breakpoint' => $carousel_settings['breakpoints']['mobile'],
'slides_to_scroll' => $carousel_settings['slides_to_scroll']['mobile'],
'navigation' => $carousel_settings['navigation']['mobile'],
'navigation_dots' => $carousel_settings['navigation_dots']['mobile'],
),
);
if ( ! empty( $carousel_settings['navigation_dots'] ) ) {
$fields['desktop']['navigation_dots'] = $carousel_settings['navigation_dots']['desktop'];
$fields['tablet']['fields']['landscape']['navigation_dots'] = $carousel_settings['navigation_dots']['tablet_landscape'];
$fields['tablet']['fields']['portrait']['navigation_dots'] = $carousel_settings['navigation_dots']['tablet_portrait'];
$fields['mobile']['navigation_dots'] = $carousel_settings['navigation_dots']['mobile'];
}
// Add slides to show settings if this widget uses them.
if ( ! empty( $carousel_settings['slides_to_show'] ) ) {
$fields['desktop']['slides_to_show'] = $carousel_settings['slides_to_show']['desktop'];
$fields['tablet']['fields']['landscape']['slides_to_show'] = $carousel_settings['slides_to_show']['tablet_landscape'];
$fields['tablet']['fields']['portrait']['slides_to_show'] = $carousel_settings['slides_to_show']['tablet_portrait'];
$fields['mobile']['slides_to_show'] = $carousel_settings['slides_to_show']['mobile'];
}
$generated_fields = array();
foreach ( $fields as $field_key => $field ) {
$generated_fields[ $field_key ] = $this->add_section_group( $field, $value_type );
}
return array(
'type' => 'section',
'label' => __( 'Responsive', 'so-widgets-bundle' ),
'hide' => $context == 'widget',
'fields' => $generated_fields,
);
}
public function carousel_settings_form_fields() {
$carousel_settings = $this->get_carousel_settings();
$fields = array(
'type' => 'section',
'label' => __( 'Settings', 'so-widgets-bundle' ),
'hide' => true,
'fields' => array(
'loop' => array(
'type' => 'checkbox',
'label' => __( 'Loop Items', 'so-widgets-bundle' ),
'description' => __( 'Automatically return to the first item after the last item.', 'so-widgets-bundle' ),
'default' => true,
'state_emitter' => array(
'callback' => 'conditional',
'args' => array(
'loop_posts[show]: val',
'loop_posts[hide]: ! val',
),
),
),
'dots' => array(
'type' => 'checkbox',
'label' => __( 'Navigation Dots', 'so-widgets-bundle' ),
'default' => true,
'state_emitter' => array(
'callback' => 'conditional',
'args' => array(
'nav_dots[show]: val',
'nav_dots[hide]: ! val',
),
),
),
'arrows' => array(
'type' => 'checkbox',
'label' => __( 'Navigation Arrows', 'so-widgets-bundle' ),
'default' => true,
'state_emitter' => array(
'callback' => 'conditional',
'args' => array(
'nav_arrows[show]: val',
'nav_arrows[hide]: ! val',
),
),
),
'animation' => array(
'type' => 'select',
'label' => __( 'Animation', 'so-widgets-bundle' ),
'default' => 'Ease',
'options' => array(
'ease' => __( 'Ease', 'so-widgets-bundle' ),
'linear' => __( 'Linear', 'so-widgets-bundle' ),
),
),
'animation_speed' => array(
'type' => 'number',
'label' => __( 'Animation Speed', 'so-widgets-bundle' ),
'default' => 400,
),
'autoplay' => array(
'type' => 'checkbox',
'label' => __( 'Autoplay', 'so-widgets-bundle' ),
'state_emitter' => array(
'callback' => 'conditional',
'args' => array(
'autoplay[show]: val',
'autoplay[hide]: ! val',
),
),
),
'autoplay_pause_hover' => array(
'type' => 'checkbox',
'label' => __( 'Autoplay Pause on Hover', 'so-widgets-bundle' ),
'state_handler' => array(
'autoplay[show]' => array( 'show' ),
'autoplay[hide]' => array( 'hide' ),
),
),
'timeout' => array(
'type' => 'number',
'label' => __( 'Timeout', 'so-widgets-bundle' ),
'default' => 8000,
'state_handler' => array(
'autoplay[show]' => array( 'show' ),
'autoplay[hide]' => array( 'hide' ),
),
),
),
);
if ( ! isset( $carousel_settings['navigation'] ) || empty( $carousel_settings['navigation_label'] ) ) {
unset( $fields['fields']['arrows'] );
}
if ( ! isset( $carousel_settings['navigation_dots'] ) || empty( $carousel_settings['navigation_dots_label'] ) ) {
unset( $fields['fields']['dots'] );
}
return $fields;
}
public function design_settings_form_fields( $settings = array() ) {
$fields = array(
'type' => 'section',
'label' => __( 'Design', 'so-widgets-bundle' ),
'hide' => true,
'fields' => array(
'item_title' => array(
'type' => 'section',
'label' => __( 'Item title', 'so-widgets-bundle' ),
'hide' => true,
'fields' => array(
'tag' => array(
'type' => 'select',
'label' => __( 'HTML Tag', 'so-widgets-bundle' ),
'default' => 'h4',
'options' => array(
'h1' => __( 'H1', 'so-widgets-bundle' ),
'h2' => __( 'H2', 'so-widgets-bundle' ),
'h3' => __( 'H3', 'so-widgets-bundle' ),
'h4' => __( 'H4', 'so-widgets-bundle' ),
'h5' => __( 'H5', 'so-widgets-bundle' ),
'h6' => __( 'H6', 'so-widgets-bundle' ),
'p' => __( 'Paragraph', 'so-widgets-bundle' ),
),
),
'font' => array(
'type' => 'font',
'label' => __( 'Font', 'so-widgets-bundle' ),
),
'size' => array(
'type' => 'measurement',
'label' => __( 'Font size', 'so-widgets-bundle' ),
),
'color' => array(
'type' => 'color',
'label' => __( 'Color', 'so-widgets-bundle' ),
),
),
),
),
);
if ( ! empty( $settings ) ) {
$fields = array_merge_recursive( $fields, array( 'fields' => $settings ) );
}
return $fields;
}
public function get_settings_form() {
return array(
'responsive' => $this->responsive_form_fields( 'global' ),
);
}
public function responsive_template_variables( $responsive, $encode = true ) {
$carousel_settings = $this->get_carousel_settings();
$variables = array(
'desktop_slides_to_scroll' => ! empty( $responsive['desktop']['slides_to_scroll'] ) ? $responsive['desktop']['slides_to_scroll'] : $carousel_settings['slides_to_scroll']['desktop'],
'tablet_landscape_breakpoint' => ! empty( $responsive['tablet']['landscape']['breakpoint'] ) ? $responsive['tablet']['landscape']['breakpoint'] : $carousel_settings['breakpoints']['tablet_landscape'],
'tablet_landscape_slides_to_scroll' => ! empty( $responsive['tablet']['landscape']['slides_to_scroll'] ) ? $responsive['tablet']['landscape']['slides_to_scroll'] : $carousel_settings['slides_to_scroll']['tablet_landscape'],
'tablet_portrait_breakpoint' => ! empty( $responsive['tablet']['portrait']['breakpoint'] ) ? $responsive['tablet']['portrait']['breakpoint'] : $carousel_settings['breakpoints']['tablet_portrait'],
'tablet_portrait_slides_to_scroll' => ! empty( $responsive['tablet']['portrait']['slides_to_scroll'] ) ? $responsive['tablet']['portrait']['slides_to_scroll'] : $carousel_settings['slides_to_scroll']['tablet_portrait'],
'mobile_breakpoint' => ! empty( $responsive['mobile']['breakpoint'] ) ? $responsive['mobile']['breakpoint'] : $carousel_settings['breakpoints']['mobile'],
'mobile_slides_to_scroll' => ! empty( $responsive['mobile']['slides_to_scroll'] ) ? $responsive['mobile']['slides_to_scroll'] : $carousel_settings['slides_to_scroll']['mobile'],
);
if ( ! empty( $carousel_settings['slides_to_show'] ) ) {
$variables['desktop_slides_to_show'] = ! empty( $responsive['desktop']['slides_to_show'] ) ? $responsive['desktop']['slides_to_show'] : $carousel_settings['slides_to_show']['desktop'];
$variables['tablet_landscape_slides_to_show'] = ! empty( $responsive['tablet']['landscape']['slides_to_show'] ) ? $responsive['tablet']['landscape']['slides_to_show'] : $carousel_settings['slides_to_show']['tablet_landscape'];
$variables['tablet_portrait_slides_to_show'] = ! empty( $responsive['tablet']['portrait']['slides_to_show'] ) ? $responsive['tablet']['portrait']['slides_to_show'] : $carousel_settings['slides_to_show']['tablet_portrait'];
$variables['mobile_slides_to_show'] = ! empty( $responsive['mobile']['slides_to_show'] ) ? $responsive['mobile']['slides_to_show'] : $carousel_settings['slides_to_show']['mobile'];
}
// Negative values can be problematic so let's avoid them by ensuring everything is positive.
$variables = array_map( function( $value ) {
return is_null( $value ) ? 0 : abs( $value );
}, $variables );
return $encode ? json_encode( $variables ) : $variables;
}
public function responsive_less_variables( $less_vars, $instance ) {
$carousel_settings = $this->get_carousel_settings();
// Breakpoint.
$less_vars['breakpoint_tablet_landscape'] = ( ! empty( $instance['responsive']['tablet_landscape']['breakpoint'] ) ? $instance['responsive']['tablet_landscape']['breakpoint'] : $carousel_settings['breakpoints']['tablet_landscape'] ) . 'px';
$less_vars['breakpoint_tablet_portrait'] = ( ! empty( $instance['responsive']['tablet_portrait']['breakpoint'] ) ? $instance['responsive']['tablet_portrait']['breakpoint'] : $carousel_settings['breakpoints']['tablet_portrait'] ) . 'px';
$less_vars['breakpoint_mobile'] = ( ! empty( $instance['responsive']['mobile']['breakpoint'] ) ? $instance['responsive']['mobile']['breakpoint'] : $carousel_settings['breakpoints']['mobile'] ) . 'px';
// Navigation.
$less_vars['navigation_arrows'] = isset( $instance['carousel_settings']['arrows'] ) ? ! empty( $instance['carousel_settings']['arrows'] ) : false;
$less_vars['navigation_desktop'] = isset( $instance['responsive']['desktop']['navigation'] ) ? ! empty( $instance['responsive']['desktop']['navigation'] ) : $carousel_settings['navigation']['desktop'];
$less_vars['navigation_tablet_landscape'] = isset( $instance['responsive']['tablet']['landscape']['navigation'] ) ? ! empty( $instance['responsive']['tablet']['landscape']['navigation'] ) : $carousel_settings['navigation']['tablet_landscape'];
$less_vars['navigation_tablet_portrait'] = isset( $instance['responsive']['tablet']['portrait']['navigation'] ) ? ! empty( $instance['responsive']['tablet']['portrait']['navigation'] ) : $carousel_settings['navigation']['tablet_portrait'];
$less_vars['navigation_mobile'] = isset( $instance['responsive']['mobile']['navigation'] ) ? ! empty( $instance['responsive']['mobile']['navigation'] ) : $carousel_settings['navigation']['mobile'];
// Navigation dots.
$less_vars['navigation_dots_desktop'] = isset( $instance['responsive']['desktop']['navigation_dots'] ) ? ! empty( $instance['responsive']['desktop']['navigation_dots'] ) : $carousel_settings['navigation_dots']['desktop'];
$less_vars['navigation_dots_tablet_landscape'] = isset( $instance['responsive']['tablet']['landscape']['navigation_dots'] ) ? ! empty( $instance['responsive']['tablet']['landscape']['navigation_dots'] ) : $carousel_settings['navigation_dots']['tablet_landscape'];
$less_vars['navigation_dots_tablet_portrait'] = isset( $instance['responsive']['tablet']['portrait']['navigation_dots'] ) ? ! empty( $instance['responsive']['tablet']['portrait']['navigation_dots'] ) : $carousel_settings['navigation_dots']['tablet_portrait'];
$less_vars['navigation_dots_mobile'] = isset( $instance['responsive']['mobile']['navigation_dots'] ) ? ! empty( $instance['responsive']['mobile']['navigation_dots'] ) : $carousel_settings['navigation_dots']['mobile'];
return $less_vars;
}
public function carousel_settings_template_variables( $settings, $encode = true ) {
$variables = array(
'loop' => isset( $settings['loop'] ) ? $settings['loop'] : true,
'dots' => isset( $settings['dots'] ) ? $settings['dots'] : true,
'animation' => isset( $settings['animation'] ) ? $settings['animation'] : 'ease',
'animation_speed' => isset( $settings['animation_speed'] ) ? (int) $settings['animation_speed'] : 400,
'autoplay' => isset( $settings['autoplay'] ) ? $settings['autoplay'] : false,
'pauseOnHover' => isset( $settings['autoplay_pause_hover'] ) ? $settings['autoplay_pause_hover'] : false,
'autoplaySpeed' => ! empty( $settings['timeout'] ) ? $settings['timeout'] : 8000,
'item_overflow' => isset( $settings['item_overflow'] ) ? $settings['item_overflow'] : false,
);
return $encode ? json_encode( $variables ) : $variables;
}
public function render_template( $settings, $args, $instance ) {
if (
! empty( $settings['container_classes'] ) &&
is_array( $settings['container_classes'] )
) {
$container_classes = implode(
array_map(
'sanitize_html_class',
$settings['container_classes']
)
);
}
include plugin_dir_path( __FILE__ ) . 'tpl/carousel.php';
}
public function render_navigation( $nav ) {
if ( $nav == 'next' || $nav == 'both' ) {
?>
<a href="#" class="sow-carousel-next" title="<?php esc_attr_e( 'Next', 'so-widgets-bundle' ); ?>" aria-label="<?php esc_attr_e( 'Next Posts', 'so-widgets-bundle' ); ?>" role="button"></a>
<?php
}
if ( $nav == 'prev' || $nav == 'both' ) {
?>
<a href="#" class="sow-carousel-previous" title="<?php esc_attr_e( 'Previous', 'so-widgets-bundle' ); ?>" aria-label="<?php esc_attr_e( 'Previous Posts', 'so-widgets-bundle' ); ?>" role="button"></a>
<?php
}
}
}