| Server IP : 103.88.176.108 / Your IP : 216.73.216.211 Web Server : Apache/2.4.41 (Ubuntu) System : Linux webserver 5.4.0-42-generic #46-Ubuntu SMP Fri Jul 10 00:24:02 UTC 2020 x86_64 User : www-data ( 33) PHP Version : 7.4.3-4ubuntu2.18 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/html/wp-content/themes/neve/header-footer-grid/Core/Components/ |
Upload File : |
<?php
/**
* Button Component class for Header Footer Grid.
*
* Name: Header Footer Grid
* Author: Bogdan Preda <bogdan.preda@themeisle.com>
*
* @version 1.0.0
* @package HFG
*/
namespace HFG\Core\Components;
use HFG\Core\Settings\Manager as SettingsManager;
use HFG\Main;
use HFG\Traits\Core;
use Neve\Core\Settings\Config;
use Neve\Core\Styles\Dynamic_Selector;
/**
* Class SearchResponsive
*
* @package HFG\Core\Components
*/
class SearchResponsive extends Abstract_SearchComponent {
use Core;
const COMPONENT_ID = 'header_search_responsive';
const SIZE_ID = 'icon_size';
const COLOR_ID = 'color';
const HOVER_COLOR_ID = 'hover_color';
const OPEN_TYPE = 'open_type';
const DEFAULT_ICON_SIZE = 15;
/**
* Button constructor.
*
* @since 1.0.0
* @access public
*/
public function init() {
$this->set_property( 'label', __( 'Search Icon', 'neve' ) );
$this->set_property( 'id', self::COMPONENT_ID );
$this->set_property( 'width', 1 );
$this->set_property( 'icon', 'search' );
$this->set_property( 'is_auto_width', true );
$this->set_property( 'default_selector', '.builder-item--' . $this->get_id() );
$this->set_property(
'default_padding_value',
array(
'mobile' => array(
'top' => 0,
'right' => 10,
'bottom' => 0,
'left' => 10,
),
'tablet' => array(
'top' => 0,
'right' => 10,
'bottom' => 0,
'left' => 10,
),
'desktop' => array(
'top' => 0,
'right' => 10,
'bottom' => 0,
'left' => 10,
),
'mobile-unit' => 'px',
'tablet-unit' => 'px',
'desktop-unit' => 'px',
)
);
}
/**
* Called to register component controls.
*
* @since 1.0.0
* @access public
*/
public function add_settings() {
SettingsManager::get_instance()->add(
[
'id' => self::PLACEHOLDER_ID,
'group' => self::COMPONENT_ID,
'tab' => SettingsManager::TAB_GENERAL,
'transport' => 'post' . $this->get_builder_id(),
'sanitize_callback' => 'wp_filter_nohtml_kses',
'default' => __( 'Search for...', 'neve' ),
'label' => __( 'Placeholder', 'neve' ),
'type' => 'text',
'section' => $this->section,
'conditional_header' => true,
]
);
SettingsManager::get_instance()->add(
[
'id' => self::OPEN_TYPE,
'group' => self::COMPONENT_ID,
'tab' => SettingsManager::TAB_GENERAL,
'transport' => 'post' . $this->get_builder_id(),
'sanitize_callback' => 'wp_filter_nohtml_kses',
'default' => 'canvas',
'label' => __( 'Open Behaviour', 'neve' ),
'type' => 'select',
'options' => [
'choices' => [
'canvas' => __( 'Canvas', 'neve' ),
'minimal' => __( 'Minimal', 'neve' ),
'floating' => __( 'Float Above Header', 'neve' ),
],
],
'section' => $this->section,
'conditional_header' => true,
]
);
SettingsManager::get_instance()->add(
[
'id' => $this->get_id() . '_icon_wrap',
'group' => $this->get_id(),
'tab' => SettingsManager::TAB_STYLE,
'transport' => 'postMessage',
'type' => 'Neve\Customizer\Controls\Heading',
'sanitize_callback' => 'sanitize_text_field',
'label' => __( 'Icon', 'neve' ),
'section' => $this->section,
'options' => [
'accordion' => true,
'controls_to_wrap' => 3,
'expanded' => true,
'class' => esc_attr( 'resp-search-icon-accordion-' . $this->get_id() ),
],
]
);
SettingsManager::get_instance()->add(
[
'id' => self::SIZE_ID,
'group' => $this->get_id(),
'tab' => SettingsManager::TAB_STYLE,
'transport' => 'postMessage',
'sanitize_callback' => 'absint',
'default' => self::DEFAULT_ICON_SIZE,
'label' => __( 'Icon Size', 'neve' ),
'type' => 'Neve\Customizer\Controls\React\Range',
'options' => [
'input_attrs' => [
'min' => 10,
'max' => 100,
'defaultVal' => self::DEFAULT_ICON_SIZE,
],
],
'live_refresh_selector' => true,
'live_refresh_css_prop' => [
'cssVar' => [
'vars' => '--iconsize',
'suffix' => 'px',
'selector' => '.builder-item--' . $this->get_id(),
],
'template' =>
'body ' . $this->default_selector . ' a.nv-search.nv-icon > svg {
width: {{value}}px;
height: {{value}}px;
}',
],
'section' => $this->section,
'conditional_header' => true,
]
);
SettingsManager::get_instance()->add(
[
'id' => self::COLOR_ID,
'group' => self::COMPONENT_ID,
'tab' => SettingsManager::TAB_STYLE,
'transport' => 'postMessage',
'sanitize_callback' => 'neve_sanitize_colors',
'label' => __( 'Color', 'neve' ),
'type' => '\Neve\Customizer\Controls\React\Color',
'section' => $this->section,
'live_refresh_selector' => true,
'live_refresh_css_prop' => [
'cssVar' => [
'vars' => '--color',
'selector' => '.builder-item--' . $this->get_id(),
],
'template' =>
'body ' . $this->default_selector . ' a.nv-search.nv-icon > svg {
fill: {{value}};
}',
],
'conditional_header' => true,
]
);
SettingsManager::get_instance()->add(
[
'id' => self::HOVER_COLOR_ID,
'group' => self::COMPONENT_ID,
'tab' => SettingsManager::TAB_STYLE,
'transport' => 'postMessage',
'sanitize_callback' => 'neve_sanitize_colors',
'label' => __( 'Hover Color', 'neve' ),
'type' => '\Neve\Customizer\Controls\React\Color',
'section' => $this->section,
'live_refresh_selector' => true,
'live_refresh_css_prop' => [
'cssVar' => [
'vars' => '--hovercolor',
'selector' => '.builder-item--' . $this->get_id(),
],
'template' =>
'body ' . $this->default_selector . ' a.nv-search.nv-icon:hover > svg {
fill: {{value}};
}',
],
'conditional_header' => true,
]
);
SettingsManager::get_instance()->add(
[
'id' => $this->get_id() . '_field_wrap',
'group' => $this->get_id(),
'tab' => SettingsManager::TAB_STYLE,
'transport' => 'postMessage',
'type' => 'Neve\Customizer\Controls\Heading',
'sanitize_callback' => 'sanitize_text_field',
'label' => __( 'Search Field', 'neve' ),
'section' => $this->section,
'options' => [
'accordion' => true,
'controls_to_wrap' => 6,
'expanded' => false,
'class' => esc_attr( 'resp-search-field-accordion-' . $this->get_id() ),
],
]
);
SettingsManager::get_instance()->add(
[
'id' => self::FIELD_HEIGHT,
'group' => self::COMPONENT_ID,
'tab' => SettingsManager::TAB_STYLE,
'section' => $this->section,
'label' => __( 'Height', 'neve' ),
'type' => '\Neve\Customizer\Controls\React\Responsive_Range',
'live_refresh_selector' => true,
'live_refresh_css_prop' => [
'cssVar' => [
'responsive' => true,
'vars' => '--height',
'suffix' => 'px',
'selector' => '.builder-item--' . $this->get_id(),
],
'responsive' => true,
'template' =>
'body ' . $this->default_selector . ' .nv-nav-search .search-form input[type=search] {
height: {{value}}px;
}',
],
'options' => [
'input_attrs' => [
'min' => 10,
'max' => 200,
'defaultVal' => [
'mobile' => 40,
'tablet' => 40,
'desktop' => 40,
'suffix' => [
'mobile' => 'px',
'tablet' => 'px',
'desktop' => 'px',
],
],
'units' => [ 'px' ],
],
],
'transport' => 'postMessage',
'sanitize_callback' => array( $this, 'sanitize_responsive_int_json' ),
'default' => [
'mobile' => 40,
'tablet' => 40,
'desktop' => 40,
],
'conditional_header' => true,
]
);
SettingsManager::get_instance()->add(
[
'id' => self::FIELD_FONT_SIZE,
'group' => self::COMPONENT_ID,
'tab' => SettingsManager::TAB_STYLE,
'section' => $this->section,
'label' => __( 'Font Size', 'neve' ),
'type' => '\Neve\Customizer\Controls\React\Responsive_Range',
'live_refresh_selector' => true,
'live_refresh_css_prop' => [
'cssVar' => [
'responsive' => true,
'vars' => '--formfieldfontsize',
'suffix' => 'px',
'selector' => '.builder-item--' . $this->get_id(),
],
'responsive' => true,
'template' =>
'body ' . $this->default_selector . ' .nv-nav-search .search-form input[type=search] {
font-size: {{value}}px;
padding-right: calc({{value}}px + 5px);
}
body ' . $this->default_selector . ' .nv-search-icon-wrap .nv-icon svg, body ' . $this->default_selector . ' .close-responsive-search svg {
width: {{value}}px;
height: {{value}}px;
}
body ' . $this->default_selector . ' input[type=submit], body ' . $this->default_selector . ' .nv-search-icon-wrap {
width: {{value}}px;
}',
],
'options' => [
'input_attrs' => [
'min' => 10,
'max' => 200,
'defaultVal' => [
'mobile' => 14,
'tablet' => 14,
'desktop' => 14,
'suffix' => [
'mobile' => 'px',
'tablet' => 'px',
'desktop' => 'px',
],
],
'units' => [ 'px' ],
],
],
'transport' => 'postMessage',
'sanitize_callback' => array( $this, 'sanitize_responsive_int_json' ),
'default' => [
'mobile' => 14,
'tablet' => 14,
'desktop' => 14,
],
'conditional_header' => true,
]
);
$per_device = [
'top' => 2,
'right' => 2,
'bottom' => 2,
'left' => 2,
];
$default_border_width = [
'desktop-unit' => 'px',
'tablet-unit' => 'px',
'mobile-unit' => 'px',
'desktop' => $per_device,
'tablet' => $per_device,
'mobile' => $per_device,
];
SettingsManager::get_instance()->add(
[
'id' => self::FIELD_BORDER_WIDTH,
'group' => $this->get_id(),
'tab' => SettingsManager::TAB_STYLE,
'transport' => 'postMessage',
'sanitize_callback' => array( $this, 'sanitize_spacing_array' ),
'default' => $default_border_width,
'label' => __( 'Border Width', 'neve' ),
'type' => '\Neve\Customizer\Controls\React\Spacing',
'options' => [
'input_attrs' => array(
'min' => 0,
'max' => 20,
'units' => [ 'px' ],
),
'default' => $default_border_width,
],
'live_refresh_selector' => true,
'live_refresh_css_prop' => [
'cssVar' => [
'responsive' => true,
'vars' => '--formfieldborderwidth',
'suffix' => 'px',
'selector' => '.builder-item--' . $this->get_id(),
],
'responsive' => true,
'directional' => true,
'template' =>
'body ' . $this->default_selector . ' .nv-nav-search .search-form input[type=search] {
border-top-width: {{value.top}};
border-right-width: {{value.right}};
border-bottom-width: {{value.bottom}};
border-left-width: {{value.left}};
}',
],
'section' => $this->section,
'conditional_header' => true,
]
);
$default_border_radius = [
'desktop-unit' => 'px',
'tablet-unit' => 'px',
'mobile-unit' => 'px',
'desktop' => [
'top' => 3,
'right' => 3,
'bottom' => 3,
'left' => 3,
],
'tablet' => [
'top' => 3,
'right' => 3,
'bottom' => 3,
'left' => 3,
],
'mobile' => [
'top' => 3,
'right' => 3,
'bottom' => 3,
'left' => 3,
],
];
SettingsManager::get_instance()->add(
[
'id' => self::FIELD_BORDER_RADIUS,
'group' => $this->get_id(),
'tab' => SettingsManager::TAB_STYLE,
'transport' => 'postMessage',
'sanitize_callback' => array( $this, 'sanitize_spacing_array' ),
'default' => $default_border_width,
'label' => __( 'Border Radius', 'neve' ),
'type' => '\Neve\Customizer\Controls\React\Spacing',
'options' => [
'input_attrs' => array(
'min' => 0,
'max' => 100,
'units' => [ 'px' ],
),
'default' => $default_border_radius,
],
'live_refresh_selector' => true,
'live_refresh_css_prop' => [
'cssVar' => [
'responsive' => true,
'vars' => '--formfieldborderradius',
'suffix' => 'px',
'selector' => '.builder-item--' . $this->get_id(),
],
'responsive' => true,
'directional' => true,
'template' =>
'body ' . $this->default_selector . ' .nv-nav-search .search-form input[type=search] {
border-top-left-radius: {{value.top}};
border-top-right-radius: {{value.right}};
border-bottom-right-radius: {{value.bottom}};
border-bottom-left-radius: {{value.left}};
}',
],
'section' => $this->section,
'conditional_header' => true,
]
);
SettingsManager::get_instance()->add(
[
'id' => self::FIELD_BG,
'group' => self::COMPONENT_ID,
'tab' => SettingsManager::TAB_STYLE,
'transport' => 'postMessage',
'sanitize_callback' => 'neve_sanitize_colors',
'label' => __( 'Background Color', 'neve' ),
'type' => '\Neve\Customizer\Controls\React\Color',
'section' => $this->section,
'options' => [
'input_attrs' => [
'allow_gradient' => true,
],
],
'live_refresh_selector' => true,
'live_refresh_css_prop' => [
'cssVar' => [
'vars' => '--formfieldbgcolor',
'selector' => '.builder-item--' . $this->get_id(),
],
'template' =>
'body ' . $this->default_selector . ' .nv-nav-search .search-form input[type=search] {
background: {{value}};
}',
'fallback' => '#ffffff',
],
'conditional_header' => true,
]
);
SettingsManager::get_instance()->add(
[
'id' => self::FIELD_TEXT_COLOR,
'group' => self::COMPONENT_ID,
'tab' => SettingsManager::TAB_STYLE,
'transport' => 'postMessage',
'sanitize_callback' => 'neve_sanitize_colors',
'label' => __( 'Text and Border', 'neve' ),
'type' => 'neve_color_control',
'section' => $this->section,
'live_refresh_selector' => true,
'live_refresh_css_prop' => [
'cssVar' => [
'vars' => [
'--formfieldcolor',
'--formfieldbordercolor',
],
'selector' => '.builder-item--' . $this->get_id(),
],
'template' =>
'body ' . $this->default_selector . ' .nv-nav-search .search-form input[type=search], body ' . $this->default_selector . ' input::placeholder {
color: {{value}};
}
body ' . $this->default_selector . ' .nv-nav-search .search-form input[type=search] {
border-color: {{value}};
}
body ' . $this->default_selector . ' .nv-search-icon-wrap .nv-icon svg {
fill: {{value}};
}',
],
'conditional_header' => true,
]
);
}
/**
* Method to add Component css styles.
*
* @param array $css_array An array containing css rules.
*
* @return array
* @since 1.0.0
* @access public
*/
public function add_style( array $css_array = array() ) {
if ( is_admin_bar_showing() ) {
wp_add_inline_style( 'neve-style', 'body.admin-bar .floating .nv-nav-search {margin-top: 32px;}' );
}
$rules = [
'--iconsize' => [
Dynamic_Selector::META_KEY => $this->get_id() . '_' . self::SIZE_ID,
Dynamic_Selector::META_DEFAULT => SettingsManager::get_instance()->get_default( $this->get_id() . '_' . self::SIZE_ID ),
Dynamic_Selector::META_SUFFIX => 'px',
],
'--color' => [
Dynamic_Selector::META_KEY => $this->get_id() . '_' . self::COLOR_ID,
Dynamic_Selector::META_DEFAULT => SettingsManager::get_instance()->get_default( $this->get_id() . '_' . self::COLOR_ID ),
],
'--hovercolor' => [
Dynamic_Selector::META_KEY => $this->get_id() . '_' . self::HOVER_COLOR_ID,
Dynamic_Selector::META_DEFAULT => SettingsManager::get_instance()->get_default( $this->get_id() . '_' . self::HOVER_COLOR_ID ),
],
'--formfieldfontsize' => [
Dynamic_Selector::META_KEY => $this->get_id() . '_' . self::FIELD_FONT_SIZE,
Dynamic_Selector::META_IS_RESPONSIVE => true,
Dynamic_Selector::META_SUFFIX => 'px',
Dynamic_Selector::META_DEFAULT => SettingsManager::get_instance()->get_default( $this->get_id() . '_' . self::FIELD_FONT_SIZE ),
],
'--formfieldborderwidth' => [
Dynamic_Selector::META_KEY => $this->get_id() . '_' . self::FIELD_BORDER_WIDTH,
Dynamic_Selector::META_IS_RESPONSIVE => true,
Dynamic_Selector::META_DEFAULT => SettingsManager::get_instance()->get_default( $this->get_id() . '_' . self::FIELD_BORDER_WIDTH ),
'directional-prop' => Config::CSS_PROP_BORDER_WIDTH,
],
'--formfieldborderradius' => [
Dynamic_Selector::META_KEY => $this->get_id() . '_' . self::FIELD_BORDER_RADIUS,
Dynamic_Selector::META_IS_RESPONSIVE => true,
Dynamic_Selector::META_DEFAULT => SettingsManager::get_instance()->get_default( $this->get_id() . '_' . self::FIELD_BORDER_RADIUS ),
'directional-prop' => Config::CSS_PROP_BORDER_RADIUS,
],
'--formfieldbgcolor' => [
Dynamic_Selector::META_KEY => $this->get_id() . '_' . self::FIELD_BG,
Dynamic_Selector::META_DEFAULT => SettingsManager::get_instance()->get_default( $this->get_id() . '_' . self::FIELD_BG ),
],
'--formfieldbordercolor' => [
Dynamic_Selector::META_KEY => $this->get_id() . '_' . self::FIELD_TEXT_COLOR,
Dynamic_Selector::META_DEFAULT => SettingsManager::get_instance()->get_default( $this->get_id() . '_' . self::FIELD_TEXT_COLOR ),
],
'--formfieldcolor' => [
Dynamic_Selector::META_KEY => $this->get_id() . '_' . self::FIELD_TEXT_COLOR,
Dynamic_Selector::META_DEFAULT => SettingsManager::get_instance()->get_default( $this->get_id() . '_' . self::FIELD_TEXT_COLOR ),
],
'--height' => [
Dynamic_Selector::META_KEY => $this->get_id() . '_' . self::FIELD_HEIGHT,
Dynamic_Selector::META_IS_RESPONSIVE => true,
Dynamic_Selector::META_DEFAULT => SettingsManager::get_instance()->get_default( $this->get_id() . '_' . self::FIELD_HEIGHT ),
Dynamic_Selector::META_SUFFIX => 'px',
],
];
$css_array[] = [
Dynamic_Selector::KEY_SELECTOR => $this->default_selector,
Dynamic_Selector::KEY_RULES => $rules,
];
return parent::add_style( $css_array );
}
/**
* The render method for the component.
*
* @since 1.0.0
* @access public
*/
public function render_component() {
add_filter( 'nv_search_placeholder', [ $this, 'change_placeholder' ] );
Main::get_instance()->load( 'components/component-search-responsive' );
remove_filter( 'nv_search_placeholder', [ $this, 'change_placeholder' ] );
}
/**
* Change the form placeholder.
*
* @param string $placeholder placeholder string.
*
* @return string
*/
public function change_placeholder( $placeholder ) {
return get_theme_mod( $this->id . '_placeholder', __( 'Search for...', 'neve' ) );
}
}