<?php


class bt_bb_floating_element extends BT_BB_Element {

	function handle_shortcode( $atts, $content ) {
		extract( shortcode_atts( apply_filters( 'bt_bb_extract_atts', array(
			'background_image'      		=> '',
			'background_color'				=> '',
			'inline_css_style'      		=> '',
			'horizontal_position'  			=> 'left',
			'vertical_position'  			=> 'top',
			'animation_style'  				=> 'ease_out',
			'animation_delay'  				=> 'default',
			'animation_duration'  			=> '',
			'animation_speed'  				=> '1.0',
			'lazy_load'  					=> 'no'
		) ), $atts, $this->shortcode ) );
		
		wp_enqueue_script(
			'bt_bb_floating_element',
			get_template_directory_uri() . '/bold-page-builder/content_elements/bt_bb_floating_element/bt_bb_floating_element.js',
			array( 'jquery' ),
			'',
			true
		);
		
		$class = array( $this->shortcode );

		if ( $el_class != '' ) {
			$class[] = $el_class;
		}

		$id_attr = '';
		if ( $el_id != '' ) {
			$id_attr = ' ' . 'id="' . esc_attr( $el_id ) . '"';
		}
		if ( $horizontal_position != '' ) {
			$class[] = $this->shortcode . '_horizontal_position' . '_' . $horizontal_position;
		}
		if ( $vertical_position != '' ) {
			$class[] = $this->shortcode . '_vertical_position' . '_' . $vertical_position;
		}
		if ( $animation_delay != '' ) {
			$class[] = $this->shortcode . '_animation_delay' . '_' . $animation_delay;
		}
		if ( $animation_duration != '' ) {
			$class[] = $this->shortcode . '_animation_duration' . '_' . $animation_duration;
		}
		if ( $animation_style != '' ) {
			$class[] = $this->shortcode . '_animation_style' . '_' . $animation_style;
		}		
		
		if ( $el_class != '' ) {
			$class_attr = $class_attr . ' ' . $el_class;
		}
	
		$style_attr = '';
		if ( $el_style != '' ) {
			$style_attr = ' ' . 'style="' . esc_attr( $el_style ) . '"';
		}	
		
		$style_attr_span = "";
		if ( $inline_css_style != '' ) {
				$style_attr_span .=  esc_attr( $inline_css_style );
		}

		if ( $background_color != '' ) {
			if ( strpos( $background_color, '#' ) !== false ) {
				$background_color = bt_bb_hex2rgb( $background_color );
				$opacity = 1;
				$style_attr_span .= 'background-color: rgba(' . $background_color[0] . ', ' . $background_color[1] . ', ' . $background_color[2] . ', ' . $opacity . ');';
			}else{
				$style_attr_span .= 'background-color: ' . $background_color . ';';
			}
		}

		$background_data_attr = "";
		if ( $background_image != '' ) {
			$background_image = wp_get_attachment_image_src( $background_image, 'full' );
			if ( isset($background_image[0]) ){
				$background_image_url = $background_image[0];
				if ( $lazy_load == 'yes' ) {
					$blank_image_src = BT_BB_Root::$path . 'img/blank.gif';
					$style_attr_span .= 'background-image:url(\'' . $background_image_url . '\');';
					$background_data_attr .= ' data-background_image_src=\'' . $background_image_url . '\'';
					$class[] = 'btLazyLoadBackground';
				} else {
					$style_attr_span .= 'background-image:url(\'' . $background_image_url . '\');';				
				}
			}
		}
		if ( $style_attr_span != '' ) {
				$style_attr_span = ' ' . 'style="' . esc_attr( $style_attr_span ) . '"';
		}
		
		$class = apply_filters( $this->shortcode . '_class', $class, $atts );		
		$class_attr = implode( ' ', $class );
		
		$output = '';
		
		$output .=  '<div class="' . esc_attr( $this->shortcode . '_html') . '" data-speed="' . esc_attr( $animation_speed ) . '"><span ' . $style_attr_span . '></span></div>';
		
		$output = '<div' . $id_attr . ' class="' . esc_attr( implode( ' ', $class ) ) . '"' . $style_attr . $background_data_attr . ' data-speed="' . esc_attr( $animation_speed ) . '">' . ( $output ) . '</div>';
		
		
		$output = apply_filters( 'bt_bb_general_output', $output, $atts );
		$output = apply_filters( $this->shortcode . '_output', $output, $atts );

		return $output;
		
	}
	function map_shortcode() {

		bt_bb_map( $this->shortcode, array( 'name' => esc_html__( 'Floating element', 'konstrakt' ), 'description' => esc_html__( 'Absolute positioned CSS styled floating element.', 'konstrakt' ), 'icon' => $this->prefix_backend . 'icon' . '_' . $this->shortcode,
			'params' => array(
				array( 'param_name' => 'background_image', 'type' => 'attach_image', 'preview' => true, 'heading' => esc_html__( 'Background image', 'konstrakt' ) 
				),
				array( 'param_name' => 'background_color', 'type' => 'colorpicker', 'heading' => esc_html__( 'Background color', 'konstrakt' ) ),
				array( 'param_name' => 'inline_css_style', 'type' => 'textfield', 'heading' => esc_html__( 'Inline css style', 'konstrakt' ), 'preview' => true ),
				
				array( 'param_name' => 'vertical_position', 'preview' => true, 'default' => '', 'type' => 'dropdown', 'heading' => esc_html__( 'Vertical position', 'konstrakt' ), 
					'value' => array(
						esc_html__( 'Default', 'konstrakt' ) 				=> 'default',
						esc_html__( 'Top (absolute)', 'konstrakt' ) 		=> 'top',
						esc_html__( 'Middle (absolute)', 'konstrakt' ) 	=> 'middle',
						esc_html__( 'Bottom (absolute)', 'konstrakt' ) 	=> 'bottom'
					)
				),
				array( 'param_name' => 'horizontal_position', 'preview' => true, 'default' => '', 'type' => 'dropdown', 'heading' => esc_html__( 'Horizontal position', 'konstrakt' ), 
					'value' => array(
						esc_html__( 'Default', 'konstrakt' ) 				=> 'default',
						esc_html__( 'Left (absolute)', 'konstrakt' ) 		=> 'left',
						esc_html__( 'Center (absolute)', 'konstrakt' ) 	=> 'center',
						esc_html__( 'Right (absolute)', 'konstrakt' ) 	=> 'right'
					)
				),
				array( 'param_name' => 'lazy_load', 'type' => 'dropdown', 'default' => 'no', 'heading' => esc_html__( 'Lazy load this image', 'konstrakt' ),
					'value' => array(
						esc_html__( 'No', 'konstrakt' ) 	=> 'no',
						esc_html__( 'Yes', 'konstrakt' ) 	=> 'yes'
					)
				),
				array( 'param_name' => 'animation_style', 'preview' => true, 'default' => 'ease_out', 'type' => 'dropdown', 'group' => esc_html__( 'Animation', 'konstrakt' ), 'heading' => esc_html__( 'Animation style (check https://easings.net/en)', 'konstrakt' ), 
					'value' => array(
						esc_html__( 'Ease out (default)', 'konstrakt' ) 		=> 'ease_out',
						esc_html__( 'Ease out sine', 'konstrakt' ) 			=> 'ease_out_sine',
						esc_html__( 'Ease in', 'konstrakt' ) 					=> 'ease_in',
						esc_html__( 'Ease in sine', 'konstrakt' ) 			=> 'ease_in_sine',
						esc_html__( 'Ease in out', 'konstrakt' ) 				=> 'ease_in_out',
						esc_html__( 'Ease in out sine', 'konstrakt' ) 		=> 'ease_in_out_sine',
						esc_html__( 'Ease in out bounce', 'konstrakt' ) 		=> 'ease_in_out_back'
					)
				),
				array( 'param_name' => 'animation_delay', 'default' => '', 'type' => 'dropdown', 'group' => esc_html__( 'Animation', 'konstrakt' ), 'heading' => esc_html__( 'Animation delay', 'konstrakt' ), 
					'value' => array(
						esc_html__( 'Default', 'konstrakt' ) 				=> 'default',
						esc_html__( '0ms', 'konstrakt' ) 					=> '0',
						esc_html__( '100ms', 'konstrakt' ) 				=> '100',
						esc_html__( '200ms', 'konstrakt' ) 				=> '200',
						esc_html__( '300ms', 'konstrakt' ) 				=> '300',
						esc_html__( '400ms', 'konstrakt' ) 				=> '400',
						esc_html__( '500ms', 'konstrakt' ) 				=> '500',
						esc_html__( '600ms', 'konstrakt' ) 				=> '600',
						esc_html__( '700ms', 'konstrakt' ) 				=> '700',
						esc_html__( '800ms', 'konstrakt' ) 				=> '800',
						esc_html__( '900ms', 'konstrakt' ) 				=> '900',
						esc_html__( '1000ms', 'konstrakt' ) 				=> '1000'
					)
				),
				array( 'param_name' => 'animation_duration', 'preview' => true, 'default' => '', 'type' => 'dropdown', 'group' => esc_html__( 'Animation', 'konstrakt' ), 'heading' => esc_html__( 'Animation duration', 'konstrakt' ), 
					'value' => array(
						esc_html__( 'Default', 'konstrakt' ) 				=> 'default',
						esc_html__( '0ms', 'konstrakt' ) 					=> '0',
						esc_html__( '100ms', 'konstrakt' ) 				=> '100',
						esc_html__( '200ms', 'konstrakt' ) 				=> '200',
						esc_html__( '300ms', 'konstrakt' ) 				=> '300',
						esc_html__( '400ms', 'konstrakt' ) 				=> '400',
						esc_html__( '500ms', 'konstrakt' ) 				=> '500',
						esc_html__( '600ms', 'konstrakt' ) 				=> '600',
						esc_html__( '700ms', 'konstrakt' ) 				=> '700',
						esc_html__( '800ms', 'konstrakt' ) 				=> '800',
						esc_html__( '900ms', 'konstrakt' ) 				=> '900',
						esc_html__( '1000ms', 'konstrakt' ) 				=> '1000',
						esc_html__( '1100ms', 'konstrakt' ) 				=> '1100',
						esc_html__( '1200ms', 'konstrakt' ) 				=> '1200',
						esc_html__( '1300ms', 'konstrakt' ) 				=> '1300',
						esc_html__( '1400ms', 'konstrakt' ) 				=> '1400',
						esc_html__( '1500ms', 'konstrakt' ) 				=> '1500',
						esc_html__( '2000ms', 'konstrakt' ) 				=> '2000',
						esc_html__( '2500ms', 'konstrakt' ) 				=> '2500',
						esc_html__( '3000ms', 'konstrakt' ) 				=> '3000',
						esc_html__( '3500ms', 'konstrakt' ) 				=> '3500',
						esc_html__( '4000ms', 'konstrakt' ) 				=> '4000',
						esc_html__( '5000ms', 'konstrakt' ) 				=> '5000',
						esc_html__( '6000ms', 'konstrakt' ) 				=> '6000'
					)
				),
				array( 'param_name' => 'animation_speed', 'preview' => true, 'default' => '1.0', 'type' => 'dropdown', 'group' => esc_html__( 'Animation', 'konstrakt' ), 'heading' => esc_html__( 'Animation s', 'konstrakt' ), 
					'value' => array(
						esc_html__( '0.4 (very short)', 'konstrakt' ) 		=> '0.4',
						esc_html__( '0.6', 'konstrakt' ) 						=> '0.6',
						esc_html__( '0.8', 'konstrakt' ) 						=> '0.8',
						esc_html__( '1.0', 'konstrakt' ) 						=> '1.0',
						esc_html__( '1.2 (default)', 'konstrakt' ) 			=> '1.2',
						esc_html__( '1.4', 'konstrakt' ) 						=> '1.4',
						esc_html__( '1.6 (long)', 'konstrakt' ) 				=> '1.6',
						esc_html__( '1.8', 'konstrakt' ) 						=> '1.8',
						esc_html__( '2.0 (very long)', 'konstrakt' ) 			=> '2.0',
						esc_html__( '2.5 (very very long)', 'konstrakt' ) 	=> '2.5'
					)
				)
			)
		) );
	}
}
