<?php
/*
Widget Name: Hero Image
Description: A big hero image with a few settings to make it your own.
Author: SiteOrigin
Author URI: https://siteorigin.com
Documentation: https://siteorigin.com/widgets-bundle/hero-image-widget/
*/
if( !class_exists( 'SiteOrigin_Widget_Base_Slider' ) ) include_once plugin_dir_path(SOW_BUNDLE_BASE_FILE) . '/base/inc/widgets/base-slider.class.php';
class SiteOrigin_Widget_Hero_Widget extends SiteOrigin_Widget_Base_Slider {
protected $buttons = array();
function __construct() {
parent::__construct(
'sow-hero',
__('SiteOrigin Hero', 'so-widgets-bundle'),
array(
'description' => __('A big hero image with a few settings to make it your own.', 'so-widgets-bundle'),
'help' => 'https://siteorigin.com/widgets-bundle/hero-image-widget/',
'panels_title' => false,
),
array( ),
false,
plugin_dir_path(__FILE__)
);
}
function initialize(){
// This widget requires the button widget
if( !class_exists('SiteOrigin_Widget_Button_Widget') ) {
SiteOrigin_Widgets_Bundle::single()->include_widget( 'button' );
}
add_action( 'siteorigin_widgets_enqueue_frontend_scripts_' . $this->id_base, array( $this, 'enqueue_widget_scripts' ) );
add_filter( 'siteorigin_widgets_wrapper_classes_' . $this->id_base, array( $this, 'wrapper_class_filter' ), 10, 2 );
add_filter( 'siteorigin_widgets_wrapper_data_' . $this->id_base, array( $this, 'wrapper_data_filter' ), 10, 2 );
// Let the slider base class do its initialization
parent::initialize();
}
function get_widget_form(){
return parent::widget_form( array(
'frames' => array(
'type' => 'repeater',
'label' => __('Hero frames', 'so-widgets-bundle'),
'item_name' => __('Frame', 'so-widgets-bundle'),
'item_label' => array(
'selectorArray' => array(
array(
'selector' => '.siteorigin-widget-field-background .media-field-wrapper .current .title',
'valueMethod' => 'html',
),
array(
'selector' => '.siteorigin-widget-field-videos .siteorigin-widget-field-repeater-items .media-field-wrapper .current .title',
'valueMethod' => 'html',
),
array(
'selector' => ".siteorigin-widget-field-videos [id*='url']",
'update_event' => 'change',
'value_method' => 'val',
),
),
),
'fields' => array(
'content' => array(
'type' => 'tinymce',
'label' => __( 'Content', 'so-widgets-bundle' ),
),
'autop' => array(
'type' => 'checkbox',
'default' => false,
'label' => __( 'Automatically add paragraphs', 'so-widgets-bundle' ),
),
'buttons' => array(
'type' => 'repeater',
'label' => __('Buttons', 'so-widgets-bundle'),
'item_name' => __('Button', 'so-widgets-bundle'),
'description' => __('Add [buttons] shortcode to the content to insert these buttons.', 'so-widgets-bundle'),
'item_label' => array(
'selector' => "[id*='buttons-button-text']",
'update_event' => 'change',
'value_method' => 'val'
),
'fields' => array(
'button' => array(
'type' => 'widget',
'class' => 'SiteOrigin_Widget_Button_Widget',
'label' => __('Button', 'so-widgets-bundle'),
'form_filter' => array( $this, 'filter_button_widget_form' ),
'collapsible' => false,
)
)
),
'background' => array(
'type' => 'section',
'label' => __('Background', 'so-widgets-bundle'),
'fields' => array(
'image' => array(
'type' => 'media',
'label' => __( 'Background image', 'so-widgets-bundle' ),
'library' => 'image',
'fallback' => true,
),
'size' => array(
'type' => 'image-size',
'label' => __('Image size', 'so-widgets-bundle'),
),
'image_type' => array(
'type' => 'select',
'label' => __('Background image type', 'so-widgets-bundle'),
'options' => array(
'cover' => __('Cover', 'so-widgets-bundle'),
),
'default' => 'cover',
),
'opacity' => array(
'label' => __( 'Background image opacity', 'so-widgets-bundle' ),
'type' => 'slider',
'min' => 0,
'max' => 100,
'default' => 100,
),
'color' => array(
'type' => 'color',
'label' => __( 'Background color', 'so-widgets-bundle' ),
'default' => '#333333',
),
'url' => array(
'type' => 'link',
'label' => __( 'Destination URL', 'so-widgets-bundle' ),
),
'new_window' => array(
'type' => 'checkbox',
'label' => __( 'Open URL in a new window', 'so-widgets-bundle' ),
),
'videos' => array(
'type' => 'repeater',
'item_name' => __('Video', 'so-widgets-bundle'),
'label' => __('Background videos', 'so-widgets-bundle'),
'item_label' => array(
'selectorArray' => array(
array(
'selector' => "[id*='url']",
'update_event' => 'change',
'value_method' => 'val',
),
array(
'selector' => '.siteorigin-widget-field-file .media-field-wrapper .current .title',
'valueMethod' => 'html',
),
),
),
'fields' => $this->video_form_fields(),
),
)
),
),
),
'controls' => array(
'type' => 'section',
'label' => __('Slider Controls', 'so-widgets-bundle'),
'fields' => $this->control_form_fields()
),
'layout' => array(
'type' => 'section',
'label' => __( 'Layout', 'so-widgets-bundle' ),
'fields' => array(
'desktop' => array(
'type' => 'section',
'label' => __( 'Desktop', 'so-widgets-bundle' ),
'fields' => array(
'height' => array(
'type' => 'measurement',
'label' => __( 'Height', 'so-widgets-bundle' ),
),
'padding' => array(
'type' => 'measurement',
'label' => __( 'Top and bottom padding', 'so-widgets-bundle' ),
'default' => '50px',
),
'padding_extra_top' => array(
'type' => 'measurement',
'label' => __( 'Extra top padding', 'so-widgets-bundle' ),
'description' => __( 'Additional padding added to the top of the slider', 'so-widgets-bundle' ),
'default' => '0px',
),
'padding_sides' => array(
'type' => 'measurement',
'label' => __( 'Side padding', 'so-widgets-bundle' ),
'default' => '20px',
),
'width' => array(
'type' => 'measurement',
'label' => __( 'Maximum container width', 'so-widgets-bundle' ),
'default' => '1280px',
),
),
),
'mobile' => array(
'type' => 'section',
'label' => __( 'Mobile', 'so-widgets-bundle' ),
'fields' => array(
'height_responsive' => array(
'type' => 'measurement',
'label' => __( 'Height', 'so-widgets-bundle' ),
),
'padding' => array(
'type' => 'measurement',
'label' => __( 'Top and bottom padding', 'so-widgets-bundle' ),
),
'padding_extra_top' => array(
'type' => 'measurement',
'label' => __( 'Extra top padding', 'so-widgets-bundle' ),
'description' => __( 'Additional padding added to the top of the slider', 'so-widgets-bundle' ),
),
'padding_sides' => array(
'type' => 'measurement',
'label' => __( 'Side padding', 'so-widgets-bundle' ),
),
),
),
'vertically_align' => array(
'type' => 'checkbox',
'label' => __( 'Vertically center align slide contents', 'so-widgets-bundle' ),
'description' => __( 'For perfect centering, consider setting the Extra top padding setting to 0 when enabling this setting.', 'so-widgets-bundle' ),
),
),
),
'design' => array(
'type' => 'section',
'label' => __( 'Design', 'so-widgets-bundle' ),
'fields' => array(
'heading_font' => array(
'type' => 'font',
'label' => __('Heading font', 'so-widgets-bundle'),
'default' => '',
),
'heading_color' => array(
'type' => 'color',
'label' => __('Heading color', 'so-widgets-bundle'),
'default' => '#fff',
),
'heading_size' => array(
'type' => 'measurement',
'label' => __('Heading size', 'so-widgets-bundle'),
'description' => __( 'Enter the h1 font size. h2 - h6 will be proportionally sized based on this value.', 'so-widgets-bundle' ),
'default' => '38px',
),
'fittext' => array(
'type' => 'checkbox',
'label' => __( 'Use FitText', 'so-widgets-bundle' ),
'description' => __( 'Dynamically adjust your heading font size based on screen size.', 'so-widgets-bundle' ),
'default' => true,
'state_emitter' => array(
'callback' => 'conditional',
'args' => array(
'use_fittext[show]: val',
'use_fittext[hide]: ! val'
),
),
),
'fittext_compressor' => array(
'type' => 'number',
'label' => __( 'FitText compressor strength', 'so-widgets-bundle' ),
'description' => __( 'The higher the value, the more your headings will be scaled down. Values above 1 are allowed.', 'so-widgets-bundle' ),
'default' => 0.85,
'step' => 0.01,
'state_handler' => array(
'use_fittext[show]' => array( 'show' ),
'use_fittext[hide]' => array( 'hide' ),
)
),
'heading_shadow' => array(
'type' => 'slider',
'label' => __( 'Heading shadow intensity', 'so-widgets-bundle' ),
'max' => 100,
'min' => 0,
'default' => 50,
),
'text_color' => array(
'type' => 'color',
'label' => __( 'Text color', 'so-widgets-bundle' ),
'default' => '#f6f6f6',
),
'text_size' => array(
'type' => 'measurement',
'label' => __( 'Text size', 'so-widgets-bundle' ),
'default' => '16px',
),
'text_font' => array(
'type' => 'font',
'label' => __( 'Text font', 'so-widgets-bundle' ),
'default' => '',
),
'text_shadow' => array(
'type' => 'slider',
'label' => __( 'Text shadow intensity', 'so-widgets-bundle' ),
'max' => 100,
'min' => 0,
'default' => 25,
),
'link_color' => array(
'type' => 'color',
'label' => __( 'Link color', 'so-widgets-bundle' )
),
'link_color_hover' => array(
'type' => 'color',
'label' => __( 'Link hover color', 'so-widgets-bundle' )
),
)
),
) );
}
function filter_button_widget_form( $form_fields ) {
unset( $form_fields['design']['fields']['align'] );
unset( $form_fields['design']['fields']['mobile_align'] );
return $form_fields;
}
/**
* Get everything necessary for the background image.
*
* @param $i
* @param $frame
*
* @return array
*/
function get_frame_background( $i, $frame ) {
$background_image = siteorigin_widgets_get_attachment_image_src(
$frame['background']['image'],
!empty( $frame['background']['size'] ) ? $frame['background']['size'] : 'full',
!empty( $frame['background']['image_fallback'] ) ? $frame['background']['image_fallback'] : ''
);
return array(
'color' => !empty( $frame['background']['color'] ) ? $frame['background']['color'] : false,
'image' => !empty( $background_image[0] ) ? $background_image[0] : false,
'image-width' => !empty( $background_image[1] ) ? $background_image[1] : 0,
'image-height' => !empty( $background_image[2] ) ? $background_image[2] : 0,
'image-sizing' => $frame['background']['image_type'],
'url' => !empty( $frame['background']['url'] ) ? $frame['background']['url'] : false,
'new_window' => !empty( $frame['background']['new_window'] ),
'videos' => $frame['background']['videos'],
'video-sizing' => 'background',
'opacity' => (int) $frame['background']['opacity'] / 100,
);
}
/**
* Render the actual content of the frame
*
* @param $i
* @param $frame
*/
function render_frame_contents( $i, $frame ) {
?>
<div class="sow-slider-image-container">
<div class="sow-slider-image-wrapper">
<?php echo $this->process_content( $frame['content'], $frame ); ?>
</div>
</div>
<?php
}
/**
* Process the content. Most importantly add the buttons by replacing [buttons] in the content
*
* @param $content
* @param $frame
*
* @return string
*/
function process_content( $content, $frame ) {
$content = wp_kses_post( $content );
if ( ! empty( $frame['autop'] ) ) {
$content = wpautop( $content );
}
if ( strpos( $content, '[buttons]' ) !== false ) {
// Replace [buttons] with button wrapper.
$content = preg_replace( '/(?:<(?:p|h\d|em|strong|li|blockquote) *([^>]*)> *)?\[ *buttons *\](:? *<\/(?:p|h\d|em|strong|li|blockquote)>)?/i', '<div class="sow-hero-buttons" $1>[SiteOriginHeroButton]</div>', $content );
$button_code = '';
// Generate buttons.
foreach( $frame['buttons'] as $button ) {
$button_code .= $this->sub_widget( 'SiteOrigin_Widget_Button_Widget', array(), $button['button'], true );
}
// Add buttons to wrapper.
$content = str_replace( '[SiteOriginHeroButton]', $button_code, $content );
}
// Process normal shortcodes
$content = do_shortcode( shortcode_unautop( $content ) );
return apply_filters( 'siteorigin_hero_frame_content', $content, $frame );
}
/**
* Handle Migration of `extra_top_padding` to `padding_top_padding` setting.
*
* The `padding_top_padding` setting was introduced because of an issue
* With padding being unreliably set.
*
* @param $instance
* @param $context
*
* @return $instance
*/
private static function migrate_padding( $instance, $context ) {
// If padding and extra top padding unit of measurement is different,
// we need to reset the extra top padding unit to be the same as the
// base padding to prevent unexpected changes.
if (
! empty( $instance['layout'][ $context ]['padding'] ) &&
$instance['layout'][ $context ]['padding_unit'] != $instance['layout'][ $context ]['extra_top_padding_unit']
) {
$instance['layout'][ $context ]['padding_extra_top'] = str_replace(
$instance['layout'][ $context ]['extra_top_padding_unit'],
$instance['layout'][ $context ]['padding_unit'],
$instance['layout'][ $context ]['extra_top_padding']
);
$instance['layout'][ $context ]['padding_extra_top_unit'] = $instance['layout'][ $context ]['padding_unit'];
} else {
// No adjustments needed, copy extra padding setting to new setting structure.
$instance['layout'][ $context ]['padding_extra_top_unit'] = $instance['layout'][ $context ]['extra_top_padding_unit'];
$instance['layout'][ $context ]['padding_extra_top'] = $instance['layout'][ $context ]['extra_top_padding'];
}
unset( $instance['layout'][ $context ]['extra_top_padding'] );
unset( $instance['layout'][ $context ]['extra_top_padding_unit'] );
return $instance;
}
/**
* Migrate Slider settings.
*
* @param $instance
*
* @return mixed
*/
function modify_instance( $instance ) {
if ( empty( $instance ) ) {
return array();
}
// Migrate Text shadow intensity setting to the 0 - 100 range.
if (
! empty( $instance['design'] ) &&
! empty( $instance['design']['text_shadow'] ) &&
(int) $instance['design']['text_shadow'] != $instance['design']['text_shadow']
) {
$instance['design']['text_shadow'] *= 100;
}
// Run general slider migrations.
$instance = parent::modify_instance( $instance );
// Migrate `extra_top_padding` to `padding_extra_top`.
if ( ! empty( $instance['layout']['desktop']['extra_top_padding'] ) ) {
$instance = self::migrate_padding( $instance, 'desktop' );
}
if ( ! empty( $instance['layout']['mobile']['extra_top_padding'] ) ) {
$instance = self::migrate_padding( $instance, 'mobile' );
}
return $instance;
}
/**
* The less variables to control the design of the slider
*
* @param $instance
*
* @return array
*/
function get_less_variables($instance) {
$less = array();
if ( empty( $instance ) ) {
return $less;
}
// Slider navigation controls
$less['nav_color_hex'] = $instance['controls']['nav_color_hex'];
$less['nav_size'] = $instance['controls']['nav_size'];
// Measurement field type options
$meas_options = array();
// Layouts settings.
if ( ! empty( $instance['layout'] ) ) {
if ( ! empty( $instance['layout']['desktop'] ) ) {
$settings = $instance['layout']['desktop'];
$meas_options['slide_height'] = ! empty( $settings['height'] ) ? $settings['height'] : '';
$meas_options['slide_padding'] = ! empty( $settings['padding'] ) ? $settings['padding'] : '';
$meas_options['slide_padding_extra_top'] = ! empty( $settings['padding_extra_top'] ) ? $settings['padding_extra_top'] : '';
$meas_options['slide_padding_sides'] = ! empty( $settings['padding_sides'] ) ? $settings['padding_sides'] : '';
$meas_options['slide_width'] = ! empty( $settings['width'] ) ? $settings['width'] : '';
}
if ( ! empty( $instance['layout']['mobile'] ) ) {
$settings = $instance['layout']['mobile'];
$meas_options['slide_height_responsive'] = ! empty( $settings['height_responsive'] ) ? $settings['height_responsive'] : '';
if ( isset( $settings['padding'] ) ) {
$meas_options['slide_padding_responsive'] = ! empty( $settings['padding'] ) ? $settings['padding'] : '0px';
}
if ( isset( $settings['padding_extra_top'] ) ) {
$meas_options['slide_padding_extra_top_responsive'] = ! empty( $settings['padding_extra_top'] ) ? $settings['padding_extra_top'] : '0px';
}
// If neither padding is set, we need to unset them both to prevent an override.
if ( $meas_options['slide_padding_responsive'] == '0px' && $meas_options['slide_padding_extra_top_responsive'] == '0px') {
unset( $meas_options['slide_padding_responsive'] );
unset( $meas_options['slide_padding_extra_top_responsive'] );
}
$meas_options['slide_padding_sides_responsive'] = ! empty( $settings['padding_sides'] ) ? $settings['padding_sides'] : '';
}
}
$meas_options['heading_size'] = $instance['design']['heading_size'];
$meas_options['text_size'] = $instance['design']['text_size'];
foreach ( $meas_options as $key => $val ) {
$less[ $key ] = $this->add_default_measurement_unit( $val );
}
$less['vertically_align'] = empty( $instance['layout']['vertically_align'] ) ? 'false' : 'true';
$less['heading_shadow'] = (int) $instance['design']['heading_shadow'];
$less['heading_color'] = $instance['design']['heading_color'];
$less['text_shadow'] = isset( $instance['design']['text_shadow'] ) ? (float) $instance['design']['text_shadow'] : 25;
$less['text_color'] = $instance['design']['text_color'];
$less['link_color'] = ! empty( $instance['design']['link_color'] ) ? $instance['design']['link_color'] : '';
$less['link_color_hover'] = ! empty( $instance['design']['link_color_hover'] ) ? $instance['design']['link_color_hover'] : '';
$heading_font = siteorigin_widget_get_font( $instance['design']['heading_font'] );
$less['heading_font'] = $heading_font['family'];
if ( ! empty( $heading_font['weight'] ) ) {
$less['heading_font_weight'] = $heading_font['weight_raw'];
$less['heading_font_style'] = $heading_font['style'];
}
if ( ! empty( $instance['design']['text_font'] ) ) {
$text_font = siteorigin_widget_get_font( $instance['design']['text_font'] );
$less['text_font'] = $text_font['family'];
if ( ! empty( $text_font['weight'] ) ) {
$less['text_font_weight'] = $text_font['weight_raw'];
$less['text_font_style'] = $text_font['style'];
}
}
$global_settings = $this->get_global_settings();
if ( ! empty( $global_settings['responsive_breakpoint'] ) ) {
$less['responsive_breakpoint'] = $global_settings['responsive_breakpoint'];
}
return $less;
}
function add_default_measurement_unit($val) {
if (!empty($val)) {
if (!preg_match('/\d+([a-zA-Z%]+)/', $val)) {
$val .= 'px';
}
}
return $val;
}
function wrapper_class_filter( $classes, $instance ){
if( ! empty( $instance['design']['fittext'] ) ) {
$classes[] = 'so-widget-fittext-wrapper';
}
return $classes;
}
function wrapper_data_filter( $data, $instance ) {
if( ! empty( $instance['design']['fittext'] ) && ! empty( $instance['design']['fittext_compressor'] ) ) {
$data['fit-text-compressor'] = $instance['design']['fittext_compressor'];
}
return $data;
}
function enqueue_widget_scripts( $instance ) {
if( ! empty( $instance['design']['fittext'] ) || $this->is_preview( $instance ) ) {
wp_enqueue_script( 'sowb-fittext' );
}
}
function get_form_teaser() {
if ( class_exists( 'SiteOrigin_Premium' ) ) return false;
return array(
sprintf(
__( 'Add multiple Hero frames in one go with %sSiteOrigin Premium%s', 'so-widgets-bundle' ),
'<a href="https://siteorigin.com/downloads/premium/?featured_addon=plugin/multiple-media" target="_blank" rel="noopener noreferrer">',
'</a>'
),
sprintf(
__( 'Add Hero frame content animation effects with %sSiteOrigin Premium%s', 'so-widgets-bundle' ),
'<a href="https://siteorigin.com/downloads/premium/?featured_addon=plugin/hero" target="_blank" rel="noopener noreferrer">',
'</a>'
),
sprintf(
__( 'Add parallax and fixed background images with %sSiteOrigin Premium%s', 'so-widgets-bundle' ),
'<a href="https://siteorigin.com/downloads/premium/?featured_addon=plugin/parallax-sliders" target="_blank" rel="noopener noreferrer">',
'</a>'
),
sprintf(
__( 'Use Google Fonts right inside the Hero Widget with %sSiteOrigin Premium%s', 'so-widgets-bundle' ),
'<a href="https://siteorigin.com/downloads/premium/?featured_addon=plugin/web-font-selector" target="_blank" rel="noopener noreferrer">',
'</a>'
),
);
}
}
siteorigin_widget_register('sow-hero', __FILE__, 'SiteOrigin_Widget_Hero_Widget');