File "Image.php"
Full Path: /home/pumpbmko/public_html/themes/momota/lib/colibriwp/src/Components/Footer/Image.php
File size: 12.57 KB
MIME-type: text/x-php
Charset: utf-8
<?php
namespace ColibriWP\Theme\Components\FrontHeader;
use ColibriWP\Theme\Components\CSSOutput;
use ColibriWP\Theme\Core\ComponentBase;
use ColibriWP\Theme\Defaults;
use ColibriWP\Theme\Translations;
use ColibriWP\Theme\View;
class Image extends ComponentBase {
protected static $settings_prefix = 'header_front_page.hero.image.';
protected static $selector = '#hero';
public static function selectiveRefreshSelector() {
return Defaults::get( static::$settings_prefix . 'selective_selector', false );
}
/**
* @return array();
*/
protected static function getOptions() {
$prefix = static::$settings_prefix;
$selector = static::$selector;
$prefix_shadow = "{$prefix}style.descendants.image.boxShadow.";
$prefix_frame = "{$prefix}style.descendants.frameImage.";
return array(
'sections' => array(
"{$prefix}section" => array(
'title' => Translations::get( 'image' ),
'panel' => 'header_panel',
'type' => 'colibri_section',
'hidden' => true,
),
),
'settings' => array(
"{$prefix}localProps.url" => array(
'default' => Defaults::get( "{$prefix}localProps.url" ),
'control' => array(
'label' => Translations::get( 'image' ),
'type' => 'image',
'section' => "{$prefix}section",
'colibri_tab' => 'content',
),
),
"{$prefix_shadow}layers.0" => array(
'default' => Defaults::get( "{$prefix_shadow}layers.0" ),
'control' => array(
'type' => 'composed',
'input_type' => 'switch',
'section' => "{$prefix}section",
'colibri_tab' => 'content',
'fields' => array(
'x' => array(
'type' => 'slider',
'label' => Translations::get( 'horizontal' ),
'default' => Defaults::get( "{$prefix_shadow}layers.0.x" ),
'props' => array(
'min' => - 100,
'max' => 100,
),
),
'y' => array(
'type' => 'slider',
'label' => Translations::get( 'vertical' ),
'default' => Defaults::get( "{$prefix_shadow}layers.0.y" ),
'props' => array(
'min' => - 100,
'max' => 100,
),
),
'spread' => array(
'type' => 'slider',
'label' => Translations::get( 'spread' ),
'default' => Defaults::get( "{$prefix_shadow}layers.0.spread" ),
'props' => array(
'options' => array(
'min' => 0,
'max' => 100,
),
),
),
'blur' => array(
'type' => 'slider',
'label' => Translations::get( 'blur' ),
'default' => Defaults::get( "{$prefix_shadow}layers.0.blur" ),
'props' => array(
'options' => array(
'min' => 0,
'max' => 100,
),
),
),
'color' => array(
'type' => 'color-picker',
'label' => Translations::get( 'color' ),
'default' => Defaults::get( "{$prefix_shadow}layers.0.color" ),
'props' => array(
'inline' => true,
),
),
),
),
'css_output' => array(
array(
'selector' => "{$selector} img",
'media' => CSSOutput::NO_MEDIA,
'property' => 'box-shadow',
'value_pattern' => '#x#px #y#px #blur#px #spread#px #color#',
),
),
'active_rules' => array(
array(
'setting' => "{$prefix_shadow}enabled",
'operator' => '=',
'value' => true,
),
),
),
"{$prefix_shadow}enabled" => array(
'default' => Defaults::get( "{$prefix_shadow}enabled" ),
'control' => array(
'label' => Translations::get( 'box_shadow' ),
'input_type' => 'switch',
'type' => 'group',
'section' => "{$prefix}section",
'show_toggle' => true,
'controls' => array(
"{$prefix_shadow}layers.0",
),
'colibri_tab' => 'content',
),
'css_output' => array(
array(
'selector' => "{$selector} img",
'media' => CSSOutput::NO_MEDIA,
'property' => 'box-shadow',
'false_value' => 'none',
),
),
),
// frame options
"{$prefix}props.frame.type" => array(
'default' => Defaults::get( "{$prefix}props.frame.type" ),
'control' => array(
'label' => Translations::get( 'type' ),
'type' => 'select',
'section' => "{$prefix}section",
'colibri_tab' => 'content',
'choices' => array(
'border' => Translations::escHtml( 'border' ),
'background' => Translations::escHtml( 'background' ),
),
),
'css_output' => array(
array(
'selector' => "{$selector} div.wp-block-kubio-image__frameImage",
'media' => CSSOutput::NO_MEDIA,
'property' => 'border-style',
'value' => array(
'border' => 'solid',
'background' => 'none',
),
),
array(
'selector' => "{$selector} div.wp-block-kubio-image__frameImage",
'media' => CSSOutput::NO_MEDIA,
'property' => 'background-color',
'value' => array(
'border' => 'transparent',
'background' => '',
),
),
),
),
"{$prefix_frame}backgroundColor" => array(
'default' => Defaults::get( "{$prefix_frame}backgroundColor" ),
'control' => array(
'label' => Translations::escHtml( 'color' ),
'type' => 'color',
'section' => "{$prefix}section",
'colibri_tab' => 'content',
),
'css_output' => array(
array(
'selector' => "{$selector} .wp-block-kubio-image__frameImage",
'media' => CSSOutput::NO_MEDIA,
'property' => 'background-color',
),
array(
'selector' => "{$selector} .wp-block-kubio-image__frameImage",
'media' => CSSOutput::NO_MEDIA,
'property' => 'border-color',
),
),
),
"{$prefix_frame}width" => array(
'default' => Defaults::get( "{$prefix_frame}width" ),
'control' => array(
'label' => Translations::get( 'width' ),
'type' => 'slider',
'section' => "{$prefix}section",
'colibri_tab' => 'content',
'min' => 0,
'max' => 300,
),
'css_output' => array(
array(
'selector' => "{$selector} .wp-block-kubio-image__frameImage",
'media' => CSSOutput::NO_MEDIA,
'property' => 'width',
'value_pattern' => '%s%%',
),
),
),
"{$prefix_frame}height" => array(
'default' => Defaults::get( "{$prefix_frame}height" ),
'control' => array(
'label' => Translations::get( 'height' ),
'type' => 'slider',
'section' => "{$prefix}section",
'colibri_tab' => 'content',
'min' => 0,
'max' => 300,
),
'css_output' => array(
array(
'selector' => "{$selector} .wp-block-kubio-image__frameImage",
'media' => CSSOutput::NO_MEDIA,
'property' => 'height',
'value_pattern' => '%s%%',
),
),
),
"{$prefix_frame}transform.translate" => array(
'default' => Defaults::get( "{$prefix_frame}transform.translate" ),
'control' => array(
'type' => 'composed',
'input_type' => 'textarea',
'section' => "{$prefix}section",
'colibri_tab' => 'content',
'fields' => array(
'x_value' => array(
'type' => 'slider',
'label' => Translations::get( 'offset_left' ),
'default' => Defaults::get( "{$prefix_frame}transform.translate.x_value" ),
'props' => array(
'min' => - 50,
'max' => 50,
),
),
'y_value' => array(
'type' => 'slider',
'label' => Translations::get( 'offset_top' ),
'default' => Defaults::get( "{$prefix_frame}transform.translate.y_value" ),
'props' => array(
'min' => - 50,
'max' => 50,
),
),
),
),
'css_output' => array(
array(
'selector' => "{$selector} .wp-block-kubio-image__frameImage",
'media' => CSSOutput::NO_MEDIA,
'property' => 'transform',
'value_pattern' => 'translateX(#x_value#%) translateY(#y_value#%)',
),
),
),
"{$prefix_frame}thickness" => array(
'default' => Defaults::get( "{$prefix_frame}thickness" ),
'control' => array(
'label' => Translations::get( 'frame_thickness' ),
'type' => 'slider',
'section' => "{$prefix}section",
'colibri_tab' => 'content',
'min' => 0,
'max' => 100,
),
'active_rules' => array(
array(
'setting' => "{$prefix}props.frame.type",
'operator' => '=',
'value' => 'border',
),
),
'css_output' => array(
array(
'selector' => "{$selector} .wp-block-kubio-image__frameImage",
'media' => CSSOutput::NO_MEDIA,
'property' => 'border-width',
'value_pattern' => '%spx',
),
),
),
"{$prefix}props.showFrameOverImage" => array(
'default' => Defaults::get( "{$prefix}props.showFrameOverImage" ),
'control' => array(
'label' => Translations::get( 'frame_over_image' ),
'type' => 'switch',
'show_toggle' => true,
'section' => "{$prefix}section",
'colibri_tab' => 'content',
),
'css_output' => array(
array(
'selector' => "{$selector} .wp-block-kubio-image__frameImage",
'media' => CSSOutput::NO_MEDIA,
'property' => 'z-index',
'true_value' => '1',
'false_value' => '-1',
),
),
),
"{$prefix}props.showFrameShadow" => array(
'default' => Defaults::get( "{$prefix}props.showFrameShadow" ),
'control' => array(
'label' => Translations::get( 'frame_shadow' ),
'type' => 'switch',
'show_toggle' => true,
'section' => "{$prefix}section",
'colibri_tab' => 'content',
),
// 'js_output' => array(
// array(
// 'selector' => "{$selector} .wp-block-kubio-image__frameImage",
// 'action' => 'toggle-class',
// 'value' => 'h-image__frame_shadow',
// ),
// ),
'css_output' => array(
array(
'selector' => "{$selector} .wp-block-kubio-image__frameImage",
'media' => CSSOutput::NO_MEDIA,
'property' => 'box-shadow',
'false_value' => '',
'true_value' => '0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%)',
),
),
),
"{$prefix}props.enabledFrameOption" => array(
'default' => Defaults::get( "{$prefix}props.enabledFrameOption" ),
'control' => array(
'label' => Translations::get( 'frame_options' ),
'input_type' => 'switch',
'type' => 'group',
'section' => "{$prefix}section",
'show_toggle' => true,
'controls' => array(
// "{$prefix_frame}composed",
"{$prefix}props.frame.type",
"{$prefix_frame}backgroundColor",
"{$prefix_frame}width",
"{$prefix_frame}height",
"{$prefix_frame}transform.translate",
"{$prefix_frame}thickness",
"{$prefix}props.showFrameOverImage",
"{$prefix}props.showFrameShadow",
),
'colibri_tab' => 'content',
),
),
),
);
}
public function renderContent( $parameters = array() ) {
// if ( $this->mod( static::$settings_prefix . 'show' ) ) {
View::partial(
'front-header',
'image',
array(
'component' => $this,
)
);
// }
}
public function printImage( $classes, $placeholder = null ) {
$prefix = static::$settings_prefix;
$image = $this->mod( "{$prefix}localProps.url" );
if ( ! $image ) {
if ( $placeholder === null ) {
$placeholder = get_template_directory_uri() . '/resources/images/placeholder.png';
}
$image = $placeholder;
}
?>
<img src="<?php echo esc_attr( $image ); ?>" alt="" class="<?php echo esc_attr( $classes ); ?>"/>
<?php
}
public function printFrame( $classes ) {
$prefix = static::$settings_prefix;
if ( ! $this->mod( "{$prefix}props.enabledFrameOption", false ) ) {
return;
}
$classes = is_array( $classes ) ? $classes : array( $classes );
?>
<div class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>"></div>
<?php
}
public function getPenPosition() {
return static::PEN_ON_RIGHT;
}
}