194 lines
6.8 KiB
PHP
194 lines
6.8 KiB
PHP
<?php defined( 'ABSPATH' ) OR die( 'This script cannot be accessed directly.' );
|
|
|
|
/**
|
|
* Flipbox
|
|
*/
|
|
|
|
$front_inline_css = $back_inline_css = array();
|
|
|
|
// When rotating cubetilt in diagonal direction, we're actually doing a cube flip animation instead
|
|
if ( in_array( $direction, array( 'ne', 'se', 'sw', 'nw' ) ) ) {
|
|
if ( $animation == 'cubetilt' ) {
|
|
$animation = 'cubeflip';
|
|
}
|
|
if ( $animation == 'cubeflip' AND $link_type == 'btn' ) {
|
|
$direction = 'n'; // disable diagonal directions, when back side has a button
|
|
}
|
|
}
|
|
|
|
// Main element classes
|
|
$classes = ' animation_' . $animation;
|
|
$classes .= ' direction_' . $direction;
|
|
|
|
if ( ! empty( $css ) AND function_exists( 'vc_shortcode_custom_css_class' ) ) {
|
|
$classes .= ' ' . vc_shortcode_custom_css_class( $css );
|
|
}
|
|
|
|
// Extract "padding" properties from "css" attribute to use them inside flipbox
|
|
if ( ! empty( $css ) AND preg_match( '~\{([^\}]+?)\;?\}~', $css, $matches ) ) {
|
|
$css_rules = array_map( 'trim', explode( ';', $matches[1] ) );
|
|
$padding_params = array(
|
|
'border',
|
|
'border-radius',
|
|
'padding',
|
|
'padding-top',
|
|
'padding-left',
|
|
'padding-right',
|
|
'padding-bottom',
|
|
);
|
|
foreach ( $css_rules as $css_rule ) {
|
|
$css_rule = explode( ':', $css_rule );
|
|
if ( count( $css_rule ) == 2 AND in_array( $css_rule[0], $padding_params ) ) {
|
|
$front_inline_css[ $css_rule[0] ] = $css_rule[1];
|
|
$back_inline_css[ $css_rule[0] ] = $css_rule[1];
|
|
}
|
|
}
|
|
}
|
|
|
|
$classes .= ( ! empty( $el_class ) ) ? ( ' ' . $el_class ) : '';
|
|
$el_id = ( ! empty( $el_id ) ) ? ( ' id="' . esc_attr( $el_id ) . '"' ) : '';
|
|
|
|
// Link
|
|
$tag = 'div';
|
|
$btn_html = '';
|
|
$link_atts = us_generate_link_atts( $link );
|
|
|
|
if ( ! empty( $link_atts ) ) {
|
|
if ( $link_type == 'container' ) {
|
|
$tag = 'a';
|
|
} elseif ( $link_type == 'btn' ) {
|
|
$btn_html .= '<a class="w-btn us-btn-style_' . $btn_style . '"';
|
|
$btn_html .= $link_atts;
|
|
$btn_html .= us_prepare_inline_css( array( 'font-size' => $btn_size ) );
|
|
$btn_html .= '>';
|
|
$btn_html .= '<span>' . strip_tags( $btn_label ) . '</span>';
|
|
$btn_html .= '</a>';
|
|
}
|
|
}
|
|
|
|
$inline_css = us_prepare_inline_css(
|
|
array(
|
|
'width' => $custom_width,
|
|
)
|
|
);
|
|
|
|
// Output the element
|
|
$output = '<' . $tag . ' class="w-flipbox' . $classes . '"' . $inline_css . $el_id . $link_atts . '>';
|
|
$helper_classes = ' easing_' . $easing;
|
|
$helper_inline_css = us_prepare_inline_css(
|
|
array(
|
|
'transition-duration' => floatval( $duration ) . 's',
|
|
)
|
|
);
|
|
$output .= '<div class="w-flipbox-h' . $helper_classes . '"' . $helper_inline_css . '>';
|
|
$output .= '<div class="w-flipbox-hh">';
|
|
|
|
if ( $animation == 'cubeflip' AND in_array( $direction, array( 'ne', 'se', 'sw', 'nw' ) ) ) {
|
|
$output .= '<div class="w-flipbox-hhh">';
|
|
}
|
|
|
|
// Front Side
|
|
$front_inline_css['height'] = $custom_height;
|
|
$front_inline_css['background'] = $front_bgcolor;
|
|
$front_inline_css['color'] = $front_textcolor;
|
|
|
|
if ( $front_bgimage_src = wp_get_attachment_image_src( $front_bgimage, $front_bgimage_size ) ) {
|
|
$front_inline_css['background-image'] = $front_bgimage_src[0];
|
|
}
|
|
|
|
$output .= '<div class="w-flipbox-front"' . us_prepare_inline_css( $front_inline_css ) . '><div class="w-flipbox-front-h">';
|
|
$output_front_icon = '';
|
|
if ( $front_icon_type == 'font' ) {
|
|
$icon_inline_css = array(
|
|
'font-size' => $front_icon_size,
|
|
'background' => $front_icon_bgcolor,
|
|
'color' => $front_icon_color,
|
|
);
|
|
$output_front_icon .= '<div class="w-flipbox-front-icon style_' . $front_icon_style . '"' . us_prepare_inline_css( $icon_inline_css ) . '>';
|
|
$output_front_icon .= us_prepare_icon_tag( $front_icon_name );
|
|
$output_front_icon .= '</div>';
|
|
} elseif ( $front_icon_type == 'image' ) {
|
|
$icon_inline_css = array(
|
|
'width' => $front_icon_image_width,
|
|
);
|
|
$output_front_icon .= '<div class="w-flipbox-front-icon type_image"' . us_prepare_inline_css( $icon_inline_css ) . '>';
|
|
$output_front_icon .= wp_get_attachment_image( $front_icon_image, 'medium' );
|
|
$output_front_icon .= '</div>';
|
|
}
|
|
$output_front_title = '';
|
|
if ( ! empty( $front_title ) ) {
|
|
$output_front_title .= '<' . $front_title_tag . ' class="w-flipbox-front-title"';
|
|
$output_front_title .= us_prepare_inline_css(
|
|
array(
|
|
'font-size' => $front_title_size,
|
|
'color' => $front_textcolor,
|
|
)
|
|
);
|
|
$output_front_title .= '>' . esc_html( $front_title ) . '</' . $front_title_tag . '>';
|
|
}
|
|
$output_front_desc = '';
|
|
if ( ! empty( $front_desc ) ) {
|
|
$output_front_desc .= '<div class="w-flipbox-front-desc">' . wpautop( $front_desc ) . '</div>';
|
|
}
|
|
if ( $front_icon_pos == 'below_title' ) {
|
|
$output .= $output_front_title . $output_front_icon . $output_front_desc;
|
|
} elseif ( $front_icon_pos == 'below_desc' ) {
|
|
$output .= $output_front_title . $output_front_desc . $output_front_icon;
|
|
} else/*if ( $front_icon_pos == 'above_title' )*/ {
|
|
$output .= $output_front_icon . $output_front_title . $output_front_desc;
|
|
}
|
|
$output .= '</div></div>';
|
|
|
|
// Back Side
|
|
$back_inline_css['display'] = 'none';
|
|
$back_inline_css['background'] = $back_bgcolor;
|
|
$back_inline_css['color'] = $back_textcolor;
|
|
|
|
if ( $back_bgimage_src = wp_get_attachment_image_src( $back_bgimage, $back_bgimage_size ) ) {
|
|
$back_inline_css['background-image'] = $back_bgimage_src[0];
|
|
}
|
|
|
|
$output .= '<div class="w-flipbox-back"' . us_prepare_inline_css( $back_inline_css ) . '><div class="w-flipbox-back-h">';
|
|
if ( ! empty( $back_title ) ) {
|
|
$output .= '<' . $back_title_tag . ' class="w-flipbox-back-title"';
|
|
$output .= us_prepare_inline_css(
|
|
array(
|
|
'font-size' => $back_title_size,
|
|
'color' => $back_textcolor,
|
|
)
|
|
);
|
|
$output .= '>' . esc_html( $back_title ) . '</' . $back_title_tag . '>';
|
|
}
|
|
if ( ! empty( $back_desc ) ) {
|
|
$output .= '<div class="w-flipbox-back-desc">' . wpautop( $back_desc ) . '</div>';
|
|
}
|
|
$output .= $btn_html;
|
|
$output .= '</div></div>';
|
|
|
|
// We need additional dom-elements for 'cubeflip' animations (:before / :after won't suit)
|
|
if ( $animation == 'cubeflip' ) {
|
|
|
|
$front_bgcolor = ( ! empty( $front_bgcolor ) ) ? $front_bgcolor : us_get_color( 'color_content_bg_alt', TRUE );
|
|
|
|
// Top & bottom flank with shaded color
|
|
if ( in_array( $direction, array( 'ne', 'e', 'se', 'sw', 'w', 'nw' ) ) ) {
|
|
$shaded_color = us_shade_color( $front_bgcolor );
|
|
$output .= '<div class="w-flipbox-yflank"' . us_prepare_inline_css( array( 'background' => $shaded_color ) ) . '></div>';
|
|
}
|
|
|
|
// Left & right flank with shaded color
|
|
if ( in_array( $direction, array( 'n', 'ne', 'se', 's', 'sw', 'nw' ) ) ) {
|
|
$shaded_color = us_shade_color( $front_bgcolor, 0.1 );
|
|
$output .= '<div class="w-flipbox-xflank"' . us_prepare_inline_css( array( 'background' => $shaded_color ) ) . '></div>';
|
|
}
|
|
}
|
|
|
|
if ( $animation == 'cubeflip' AND in_array( $direction, array( 'ne', 'se', 'sw', 'nw' ) ) ) {
|
|
$output .= '</div>';
|
|
}
|
|
|
|
$output .= '</div></div>';
|
|
$output .= '</' . $tag . '>';
|
|
|
|
echo $output;
|