Current File : /home/n742ef5/royalanteam.com/wp-content/plugins/myhome-core/src/Elementor/DesignTab.php
<?php

namespace Tangibledesign\MyHome\Elementor;

use Elementor\Controls_Manager;
use Elementor\Core\Kits\Documents\Tabs\Tab_Base;
use Elementor\Group_Control_Typography;

class DesignTab extends Tab_Base
{

    public function get_id(): string
    {
        return 'myhome-design';
    }

    public function get_title(): string
    {
        return esc_html__('Design', 'myhome-core');
    }

    public function get_group(): string
    {
        return 'theme-style';
    }

    public function get_icon(): string
    {
        return 'fas fa-paint-brush';
    }

    protected function register_tab_controls(): void
    {
        $this->start_controls_section(
            'myhome_design',
            [
                'label' => esc_html__('MyHome Design', 'myhome-core'),
                'tab' => $this->get_id(),
            ]
        );

        $this->addLinkColorControl();

        $this->addBorderRadiusControls();

        $this->addSmallHeadingControls();

        $this->addHeadingControls();

        $this->addFormInputIconControls();

        $this->addButtonControls();

        $this->addNavigationArrowControls();

        $this->addTabsControls();

        $this->addSelectControls();

        $this->addImagePlaceholderControls();

        $this->addShadowControls();

        $this->end_controls_section();
    }

    private function addShadowControls(): void
    {
        $this->add_control(
            'design_shadow_heading',
            [
                'label' => esc_html__('Shadow', 'myhome-core'),
                'type' => Controls_Manager::HEADING,
            ]
        );

        $this->add_control(
            'design_shadow',
            [
                'label' => esc_html__('Shadow', 'myhome-core'),
                'type' => Controls_Manager::BOX_SHADOW,
                'selectors' => [
                    '{{WRAPPER}}' => '--e-global-shadow: {{HORIZONTAL}}px {{VERTICAL}}px {{BLUR}}px {{SPREAD}}px {{COLOR}}; --e-global-shadow-filter: drop-shadow({{HORIZONTAL}}px {{VERTICAL}}px {{BLUR}}px {{COLOR}});',
                ]
            ]
        );
    }

    private function addLinkColorControl(): void
    {
        $this->add_control(
            'design_link_color',
            [
                'label' => esc_html__('Link Color', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .elementor-widget-text-editor a' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .elementor-widget-text-editor a:before' => 'background-color: {{VALUE}};',
                    '{{WRAPPER}} .myhome-single-post__content a' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .myhome-single-post__content a:before' => 'background-color: {{VALUE}};',
                    '{{WRAPPER}} .myhome-content-v1__text a' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .myhome-content-v1__text a:before' => 'background-color: {{VALUE}};',
                    '{{WRAPPER}} .myhome-content-v2__text a' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .myhome-content-v2__text a:before' => 'background-color: {{VALUE}};',
                    '{{WRAPPER}} .myhome-content-v3__text a' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .myhome-content-v3__text a:before' => 'background-color: {{VALUE}};',
                    '{{WRAPPER}} .myhome-content-v4__text a' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .myhome-content-v4__text a:before' => 'background-color: {{VALUE}};',
                    '{{WRAPPER}} .myhome-content-v5__text a' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .myhome-content-v5__text a:before' => 'background-color: {{VALUE}};',
                    '{{WRAPPER}} .myhome-content-v6__text a' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .myhome-content-v6__text a:before' => 'background-color: {{VALUE}};',
                    '{{WRAPPER}} .myhome-listing-section__content a' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .myhome-listing-section__content a:before' => 'background-color: {{VALUE}};',
                ]
            ]
        );
    }

    private function addBorderRadiusControls(): void
    {
        $this->add_control(
            'design_border_radius_heading',
            [
                'label' => esc_html__('Border Radius', 'myhome-core'),
                'type' => Controls_Manager::HEADING,
            ]
        );

        $this->add_control(
            'design_border_radius',
            [
                'label' => esc_html__('Regular (px)', 'myhome-core'),
                'type' => Controls_Manager::NUMBER,
                'selectors' => [
                    '{{WRAPPER}}' => '--e-global-lborder-radius: {{VALUE}}px;',
                    '{{WRAPPER}} .myhome-input__clear' => 'border-radius: {{VALUE}}px;',
                    '{{WRAPPER}} .myhome-select__clear' => 'border-radius: {{VALUE}}px;',
                    '{{WRAPPER}} .myhome-select__arrow' => 'border-radius: {{VALUE}}px;',
                    '{{WRAPPER}} .myhome-autocomplete-input__clear' => 'border-radius: {{VALUE}}px;',
                ],
            ]
        );

        $this->add_control(
            'design_large_border_radius',
            [
                'label' => esc_html__('Larger (px)', 'myhome-core'),
                'type' => Controls_Manager::NUMBER,
                'selectors' => [
                    '{{WRAPPER}}' => '--e-global-lborder-radius-large: {{VALUE}}px;',
                ],
            ]
        );
    }

    private function addFormInputIconControls(): void
    {
        $this->add_control(
            'design_form_input_icon_label',
            [
                'label' => esc_html__('Form Input Icon', 'myhome-core'),
                'type' => Controls_Manager::HEADING,
            ]
        );

        $this->add_control(
            'design_form_input_color',
            [
                'label' => esc_html__('Color', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-icon svg path' => 'fill: {{VALUE}};',
                    $this->getWrapper() . ' .myhome-icon' => 'color: {{VALUE}};',
                ]
            ]
        );

        $this->add_control(
            'design_form_input_bg',
            [
                'label' => esc_html__('Background', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-icon' => 'background-color: {{VALUE}};'
                ]
            ]
        );
    }

    private function addHeadingControls(): void
    {
        $this->add_control(
            'design_heading_label',
            [
                'label' => esc_html__('Heading', 'myhome-core'),
                'type' => Controls_Manager::HEADING,
            ]
        );

        $this->add_control(
            'design_heading_color',
            [
                'label' => esc_html__('Color', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-heading__text' => 'color: {{VALUE}};',
                ]
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'design_heading_typography',
                'label' => esc_html__('Typography', 'myhome-core'),
                'selector' => $this->getWrapper() . ' .myhome-heading__text',
            ]
        );
    }

    private function addSmallHeadingControls(): void
    {
        $this->add_control(
            'design_small_heading_label',
            [
                'label' => esc_html__('Small Heading', 'myhome-core'),
                'type' => Controls_Manager::HEADING,
            ]
        );

        $this->add_control(
            'design_small_heading_color',
            [
                'label' => esc_html__('Color', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-heading__small-text' => 'color: {{VALUE}};'
                ]
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'design_small_heading_typography',
                'label' => esc_html__('Typography', 'myhome-core'),
                'selector' => $this->getWrapper() . ' .myhome-heading__small-text',
            ]
        );
    }

    private function addButtonControls(): void
    {
        $this->add_control(
            'buttons_heading',
            [
                'label' => esc_html__('Buttons', 'myhome-core'),
                'type' => Controls_Manager::HEADING,
            ]
        );

        $this->add_control(
            'buttons_border_radius',
            [
                'label' => esc_html__('Border radius (px)', 'myhome-core'),
                'type' => Controls_Manager::NUMBER,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-button--primary-1' => 'border-radius: {{VALUE}}px;',
                    $this->getWrapper() . ' .myhome-button-primary-1-selector' => 'border-radius: {{VALUE}}px;',
                    $this->getWrapper() . ' .myhome-button--regular' => 'border-radius: {{VALUE}}px;',
                    $this->getWrapper() . ' .myhome-button-border-radius-selector' => 'border-radius: {{VALUE}}px;'
                ]
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'design_button_typography',
                'label' => esc_html__('Typography', 'myhome-core'),
                'selector' => $this->getWrapper() . ' .myhome-button--primary-1, ' . $this->getWrapper() . ' .myhome-button-primary-1-selector, ' . $this->getWrapper() . ' .myhome-button--secondary, ' . $this->getWrapper() . ' .myhome-button--regular, ' . $this->getWrapper() . ' .myhome-button-border-radius-selector',
            ]
        );

        $this->add_control(
            'button_primary_heading',
            [
                'label' => esc_html__('Primary button', 'myhome-core'),
                'type' => Controls_Manager::HEADING,
            ]
        );

        $this->start_controls_tabs('button_primary_tabs');

        $this->start_controls_tab('button_primary_normal', ['label' => esc_html__('Normal', 'myhome-core')]);

        $this->add_control(
            'button_primary_color',
            [
                'label' => esc_html__('Color', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-button--primary-1' => 'color: {{VALUE}};',
                    $this->getWrapper() . ' .myhome-button--primary-1 path' => 'fill: {{VALUE}};',
                    $this->getWrapper() . ' .myhome-button-primary-1-selector' => 'color: {{VALUE}};',
                    $this->getWrapper() . ' .myhome-button-primary-1-selector path' => 'fill: {{VALUE}};',
                ]
            ]
        );

        $this->add_control(
            'button_regular_background',
            [
                'label' => esc_html__('Background', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-button--primary-1' => 'background-color: {{VALUE}};',
                    $this->getWrapper() . ' .myhome-button-primary-1-selector' => 'background-color: {{VALUE}};',
                ]
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab('button_primary_hover', ['label' => esc_html__('Hover', 'myhome-core')]);

        $this->add_control(
            'button_primary_hover_color',
            [
                'label' => esc_html__('Color', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-button--primary-1:hover' => 'color: {{VALUE}};',
                    $this->getWrapper() . ' .myhome-button--primary-1:hover path' => 'fill: {{VALUE}};',
                    $this->getWrapper() . ' .myhome-button-primary-1-selector:hover' => 'color: {{VALUE}};',
                    $this->getWrapper() . ' .myhome-button-primary-1-selector:hover path' => 'fill: {{VALUE}};',
                ]
            ]
        );

        $this->add_control(
            'button_primary_hover_background',
            [
                'label' => esc_html__('Background', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-button--primary-1:hover' => 'background-color: {{VALUE}};',
                    $this->getWrapper() . ' .myhome-button-primary-1-selector:hover' => 'background-color: {{VALUE}};',
                ]
            ]
        );

        $this->end_controls_tab();

        $this->end_controls_tabs();

        $this->add_control(
            'button_secondary_heading',
            [
                'label' => esc_html__('Secondary Button', 'myhome-core'),
                'type' => Controls_Manager::HEADING,
            ]
        );

        $this->start_controls_tabs('button_secondary_tabs');

        $this->start_controls_tab('button_secondary_normal', ['label' => esc_html__('Normal', 'myhome-core')]);

        $this->add_control(
            'button_secondary_color',
            [
                'label' => esc_html__('Color', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-button--secondary' => 'color: {{VALUE}}; border-color: {{VALUE}};',
                    $this->getWrapper() . ' .myhome-button--secondary path' => 'fill: {{VALUE}};',
                ]
            ]
        );

        $this->add_control(
            'button_secondary_background',
            [
                'label' => esc_html__('Background', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-button--secondary' => 'background-color: {{VALUE}};',
                ]
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab('button_secondary_hover', ['label' => esc_html__('Hover', 'myhome-core')]);

        $this->add_control(
            'button_secondary_hover_color',
            [
                'label' => esc_html__('Color', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-button--secondary:hover' => 'color: {{VALUE}}; border-color: {{VALUE}};',
                    $this->getWrapper() . ' .myhome-button--secondary:hover path' => 'fill: {{VALUE}};',
                ]
            ]
        );

        $this->add_control(
            'button_secondary_hover_background',
            [
                'label' => esc_html__('Background', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-button--secondary:hover' => 'background-color: {{VALUE}};',
                ]
            ]
        );

        $this->end_controls_tab();

        $this->end_controls_tabs();
    }

    private function addNavigationArrowControls(): void
    {
        $this->add_control(
            'mh_nav_arrow_heading',
            [
                'label' => esc_html__('Navigation Arrow', 'myhome-core'),
                'type' => Controls_Manager::HEADING,
            ]
        );

        $this->add_control(
            'nav_arrow_border_radius',
            [
                'label' => esc_html__('Border Radius (px)', 'myhome-core'),
                'type' => Controls_Manager::NUMBER,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-box-arrow' => 'border-radius: {{VALUE}}px;',
                ]
            ]
        );

        $this->start_controls_tabs('mh_nav_arrow_tabs');

        $this->start_controls_tab('mh_nav_arrow_normal', ['label' => esc_html__('Normal', 'myhome-core')]);

        $this->add_control(
            'nav_arrow_color',
            [
                'label' => esc_html__('Color', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-box-arrow:not(.myhome-box-arrow--disabled) path' => 'fill: {{VALUE}};',
                ]
            ]
        );

        $this->add_control(
            'nav_arrow_background',
            [
                'label' => esc_html__('Background', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-box-arrow:not(.myhome-box-arrow--disabled)' => 'background-color: {{VALUE}};',
                ]
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab('mh_nav_arrow_hover', ['label' => esc_html__('Hover', 'myhome-core')]);

        $this->add_control(
            'mh_nav_arrow_hover_color',
            [
                'label' => esc_html__('Color', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-box-arrow:not(.myhome-box-arrow--disabled):hover path' => 'fill: {{VALUE}};',
                ]
            ]
        );

        $this->add_control(
            'mh_nav_arrow_hover_background',
            [
                'label' => esc_html__('Background', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-box-arrow:not(.myhome-box-arrow--disabled):hover' => 'background-color: {{VALUE}};',
                ]
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab('mh_nav_arrow_disabled', ['label' => esc_html__('Disabled', 'myhome-core')]);

        $this->add_control(
            'mh_nav_arrow_disabled_color',
            [
                'label' => esc_html__('Color', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-box-arrow--disabled path' => 'fill: {{VALUE}};',
                ]
            ]
        );

        $this->add_control(
            'mh_nav_arrow_disabled_background',
            [
                'label' => esc_html__('Background', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-box-arrow--disabled' => 'background-color: {{VALUE}};',
                ]
            ]
        );

        $this->end_controls_tab();

        $this->end_controls_tabs();
    }

    private function addTabsControls(): void
    {
        $this->add_control(
            'tabs_heading',
            [
                'label' => esc_html__('Tabs', 'myhome-core'),
                'type' => Controls_Manager::HEADING,
            ]
        );

        $this->add_control(
            'tabs_border_radius',
            [
                'label' => esc_html__('Border Radius (px)', 'myhome-core'),
                'type' => Controls_Manager::NUMBER,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-tab-v2' => 'border-radius: {{VALUE}}px;',
                ]
            ]
        );
    }

    private function addSelectControls(): void
    {
        $this->add_control(
            'dropdown_style_heading',
            [
                'label' => esc_html__('Dropdown', 'myhome-core'),
                'type' => Controls_Manager::HEADING,
            ]
        );

        $this->add_control(
            'dropdown_highlight_color',
            [
                'label' => esc_html__('Highlight', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-select__option:hover' => 'color: {{VALUE}};',
                    $this->getWrapper() . ' .myhome-select__option--highlight-text' => 'color: {{VALUE}};',
                    $this->getWrapper() . ' .myhome-select__option--highlight' => 'color: {{VALUE}};',
                    $this->getWrapper() . ' .pac-item' => 'color: {{VALUE}}',
                    $this->getWrapper() . ' .myhome-autocomplete-input__option--highlight-text' => 'color: {{VALUE}};',
                ]
            ]
        );

        $this->add_control(
            'dropdown_active_color',
            [
                'label' => esc_html__('Active', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-select__option--active' => 'color: {{VALUE}};',
                    $this->getWrapper() . ' .myhome-select__option--active:hover' => 'color: {{VALUE}};',
                    $this->getWrapper() . ' .myhome-select__option--active .myhome-select__checkbox' => 'background-color: {{VALUE}}; border-color: {{VALUE}};',
                    $this->getWrapper() . ' .pac-matched' => 'color: {{VALUE}}',
                    $this->getWrapper() . ' .pac-item:hover' => 'color: {{VALUE}}',
                    $this->getWrapper() . ' .pac-item:hover .pac-item-query' => 'color: {{VALUE}}',
                    $this->getWrapper() . ' .pac-item:hover .pac-matched' => 'color: {{VALUE}}',
                ]
            ]
        );
    }

    private function getWrapper(): string
    {
        if (is_rtl()) {
            return '[dir] {{WRAPPER}}';
        }

        return '{{WRAPPER}}';
    }

    private function addImagePlaceholderControls(): void
    {
        $this->add_control(
            'mh_image_placeholder_heading',
            [
                'label' => esc_html__('Image placeholder', 'myhome-core'),
                'type' => Controls_Manager::HEADING,
            ]
        );

        $this->add_control(
            'mh_image_placeholder_bg',
            [
                'label' => esc_html__('Background', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-image-placeholder' => 'background-color: {{VALUE}};',
                ]
            ]
        );

        $this->add_control(
            'mh_image_placeholder_icon_color',
            [
                'label' => esc_html__('Icon color', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-image-placeholder__icon path' => 'fill: {{VALUE}};',
                ]
            ]
        );

        $this->add_control(
            'mh_image_placeholder_text_color',
            [
                'label' => esc_html__('Text color', 'myhome-core'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    $this->getWrapper() . ' .myhome-image-placeholder__text' => 'color: {{VALUE}};',
                ]
            ]
        );
    }
}