'.jet-hamburger-panel', 'instance' => '.jet-hamburger-panel__instance', 'cover' => '.jet-hamburger-panel__cover', 'inner' => '.jet-hamburger-panel__inner', 'content' => '.jet-hamburger-panel__content', 'close' => '.jet-hamburger-panel__close-button', 'toggle' => '.jet-hamburger-panel__toggle', 'icon' => '.jet-hamburger-panel__icon', 'label' => '.jet-hamburger-panel__toggle-label', ) ); $this->start_controls_section( 'section_content', array( 'label' => esc_html__( 'Content', 'jet-blocks' ), ) ); $this->__add_advanced_icon_control( 'panel_toggle_icon', array( 'label' => esc_html__( 'Icon', 'jet-blocks' ), 'type' => Controls_Manager::ICON, 'label_block' => true, 'file' => '', 'default' => 'fa fa-align-justify', 'fa5_default' => array( 'value' => 'fas fa-align-justify', 'library' => 'fa-solid', ), ) ); $this->__add_advanced_icon_control( 'panel_toggle_active_icon', array( 'label' => esc_html__( 'Active Icon', 'jet-blocks' ), 'type' => Controls_Manager::ICON, 'label_block' => true, 'file' => '', 'default' => 'fa fa-close', 'fa5_default' => array( 'value' => 'fas fa-times', 'library' => 'fa-solid', ), ) ); $this->__add_advanced_icon_control( 'panel_close_icon', array( 'label' => esc_html__( 'Close Icon', 'jet-blocks' ), 'type' => Controls_Manager::ICON, 'label_block' => true, 'file' => '', 'default' => 'fa fa-close', 'fa5_default' => array( 'value' => 'fas fa-times', 'library' => 'fa-solid', ), ) ); $this->add_control( 'panel_toggle_label', array( 'label' => esc_html__( 'Label', 'jet-blocks' ), 'type' => Controls_Manager::TEXT, 'default' => esc_html__( 'More', 'jet-blocks' ), ) ); $this->add_responsive_control( 'panel_toggle_label_alignment', array( 'label' => esc_html__( 'Toggle Alignment', 'jet-blocks' ), 'type' => Controls_Manager::CHOOSE, 'options' => array( 'flex-start' => array( 'title' => esc_html__( 'Start', 'jet-blocks' ), 'icon' => ! is_rtl() ? 'eicon-h-align-left' : 'eicon-h-align-right', ), 'center' => array( 'title' => esc_html__( 'Center', 'jet-blocks' ), 'icon' => 'eicon-h-align-center', ), 'flex-end' => array( 'title' => esc_html__( 'End', 'jet-blocks' ), 'icon' => ! is_rtl() ? 'eicon-h-align-right' : 'eicon-h-align-left', ), ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['panel'] => 'justify-content: {{VALUE}};', ), ) ); $templates = jet_blocks()->elementor()->templates_manager->get_source( 'local' )->get_items(); if ( empty( $templates ) ) { $this->add_control( 'no_templates', array( 'label' => false, 'type' => Controls_Manager::RAW_HTML, 'raw' => $this->empty_templates_message(), ) ); return; } $options = [ '0' => '— ' . esc_html__( 'Select', 'jet-blocks' ) . ' —', ]; $types = []; foreach ( $templates as $template ) { $options[ $template['template_id'] ] = $template['title'] . ' (' . $template['type'] . ')'; $types[ $template['template_id'] ] = $template['type']; } $this->add_control( 'panel_template_id', array( 'label' => esc_html__( 'Choose Template', 'jet-blocks' ), 'type' => Controls_Manager::SELECT, 'default' => '0', 'options' => $options, 'types' => $types, 'label_block' => 'true', ) ); $this->end_controls_section(); $this->start_controls_section( 'section_settings', array( 'label' => esc_html__( 'Settings', 'jet-blocks' ), ) ); $this->add_control( 'position', array( 'label' => esc_html__( 'Position', 'jet-blocks' ), 'type' => Controls_Manager::SELECT, 'default' => 'right', 'options' => array( 'right' => esc_html__( 'Right', 'jet-blocks' ), 'left' => esc_html__( 'Left', 'jet-blocks' ), ), ) ); $this->add_control( 'animation_effect', array( 'label' => esc_html__( 'Effect', 'jet-blocks' ), 'type' => Controls_Manager::SELECT, 'default' => 'slide', 'options' => array( 'slide' => esc_html__( 'Slide', 'jet-blocks' ), 'fade' => esc_html__( 'Fade', 'jet-blocks' ), 'zoom' => esc_html__( 'Zoom', 'jet-blocks' ), ), ) ); $this->add_control( 'z_index', array( 'label' => esc_html__( 'Z-Index', 'jet-blocks' ), 'type' => Controls_Manager::NUMBER, 'min' => 1, 'max' => 100000, 'step' => 1, 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['instance'] => 'z-index: {{VALUE}};', ), ) ); $this->end_controls_section(); $this->__start_controls_section( 'section_panel_style', array( 'label' => esc_html__( 'Panel', 'jet-blocks' ), 'tab' => Controls_Manager::TAB_STYLE, 'show_label' => false, ) ); $this->__add_responsive_control( 'panel_width', array( 'label' => esc_html__( 'Panel Width', 'jet-blocks' ), 'type' => Controls_Manager::SLIDER, 'size_units' => array( 'px', '%', ), 'range' => array( 'px' => array( 'min' => 250, 'max' => 800, ), '%' => array( 'min' => 10, 'max' => 100, ), ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['instance'] => 'width: {{SIZE}}{{UNIT}};', ), ), 25 ); $this->__add_responsive_control( 'panel_padding', array( 'label' => __( 'Padding', 'jet-blocks' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['content'] => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 25 ); $this->__add_group_control( Group_Control_Background::get_type(), array( 'name' => 'panel_background', 'selector' => '{{WRAPPER}} ' . $css_scheme['inner'], ), 25 ); $this->__add_group_control( Group_Control_Border::get_type(), array( 'name' => 'panel_border', 'label' => esc_html__( 'Border', 'jet-blocks' ), 'placeholder' => '1px', 'default' => '1px', 'selector' => '{{WRAPPER}} ' . $css_scheme['inner'], ), 75 ); $this->__add_control( 'panel_border_radius', array( 'label' => esc_html__( 'Border Radius', 'jet-blocks' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['inner'] => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 75 ); $this->__add_group_control( Group_Control_Box_Shadow::get_type(), array( 'name' => 'panel_shadow', 'selector' => '{{WRAPPER}} ' . $css_scheme['inner'], ), 75 ); $this->__add_control( 'cover_style_heading', array( 'label' => esc_html__( 'Cover', 'jet-blocks' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ), 25 ); $this->__add_control( 'cover_bg_color', array( 'label' => esc_html__( 'Background color', 'jet-blocks' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['cover'] => 'background-color: {{VALUE}};', ), ), 25 ); $this->__add_control( 'close_button_style_heading', array( 'label' => esc_html__( 'Close Button', 'jet-blocks' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ), 25 ); $this->__start_controls_tabs( 'close_button_styles' ); $this->__start_controls_tab( 'close_button_control', array( 'label' => esc_html__( 'Normal', 'jet-blocks' ), ) ); $this->__add_group_control( \Jet_Blocks_Group_Control_Box_Style::get_type(), array( 'label' => esc_html__( 'Close Icon', 'jet-blocks' ), 'name' => 'close_icon_box', 'selector' => '{{WRAPPER}} ' . $css_scheme['close'], ), 25 ); $this->__end_controls_tab(); $this->__start_controls_tab( 'close_button_control_hover', array( 'label' => esc_html__( 'Hover', 'jet-blocks' ), ) ); $this->__add_group_control( \Jet_Blocks_Group_Control_Box_Style::get_type(), array( 'label' => esc_html__( 'Close Icon', 'jet-blocks' ), 'name' => 'close_icon_box_hover', 'selector' => '{{WRAPPER}} ' . $css_scheme['close'] . ':hover', ), 25 ); $this->__end_controls_tab(); $this->__end_controls_tabs(); $this->__end_controls_section(); $this->__start_controls_section( 'section_panel_toggle_style', array( 'label' => esc_html__( 'Toggle', 'jet-blocks' ), 'tab' => Controls_Manager::TAB_STYLE, 'show_label' => false, ) ); $this->__start_controls_tabs( 'toggle_styles' ); $this->__start_controls_tab( 'toggle_tab_normal', array( 'label' => esc_html__( 'Normal', 'jet-blocks' ), ) ); $this->__add_group_control( Group_Control_Background::get_type(), array( 'name' => 'toggle_background', 'fields_options' => array( 'color' => array( 'scheme' => array( 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_1, ), ), ), 'selector' => '{{WRAPPER}} ' . $css_scheme['toggle'], ), 25 ); $this->__end_controls_tab(); $this->__start_controls_tab( 'toggle_tab_hover', array( 'label' => esc_html__( 'Hover', 'jet-blocks' ), ) ); $this->__add_group_control( Group_Control_Background::get_type(), array( 'name' => 'toggle_background_hover', 'fields_options' => array( 'color' => array( 'scheme' => array( 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_1, ), ), ), 'selector' => '{{WRAPPER}} ' . $css_scheme['toggle'] . ':hover', ), 25 ); $this->__end_controls_tab(); $this->__end_controls_tabs(); $this->__add_responsive_control( 'toggle_padding', array( 'label' => esc_html__( 'Padding', 'jet-blocks' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['toggle'] => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), 'separator' => 'before', ), 25 ); $this->__add_responsive_control( 'toggle_margin', array( 'label' => esc_html__( 'Margin', 'jet-blocks' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['toggle'] => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 25 ); $this->__add_group_control( Group_Control_Border::get_type(), array( 'name' => 'toggle_border', 'label' => esc_html__( 'Border', 'jet-blocks' ), 'placeholder' => '1px', 'default' => '1px', 'selector' => '{{WRAPPER}} ' . $css_scheme['toggle'], ), 75 ); $this->__add_control( 'toggle_border_radius', array( 'label' => esc_html__( 'Border Radius', 'jet-blocks' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['toggle'] => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 75 ); $this->__add_group_control( Group_Control_Box_Shadow::get_type(), array( 'name' => 'toggle_shadow', 'selector' => '{{WRAPPER}} ' . $css_scheme['toggle'], ), 100 ); $this->__add_control( 'toggle_icon_style_heading', array( 'label' => esc_html__( 'Icon Styles', 'jet-blocks' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ), 25 ); $this->__start_controls_tabs( 'toggle_icon_styles' ); $this->__start_controls_tab( 'toggle_icon_normal', array( 'label' => esc_html__( 'Normal', 'jet-blocks' ), ) ); $this->__add_group_control( \Jet_Blocks_Group_Control_Box_Style::get_type(), array( 'label' => esc_html__( 'Toggle Icon', 'jet-blocks' ), 'name' => 'toggle_icon_box', 'selector' => '{{WRAPPER}} ' . $css_scheme['icon'], ), 25 ); $this->__end_controls_tab(); $this->__start_controls_tab( 'toggle_icon_hover', array( 'label' => esc_html__( 'Hover', 'jet-blocks' ), ) ); $this->__add_group_control( \Jet_Blocks_Group_Control_Box_Style::get_type(), array( 'label' => esc_html__( 'Toggle Icon', 'jet-blocks' ), 'name' => 'toggle_icon_box_hover', 'selector' => '{{WRAPPER}} ' . $css_scheme['toggle'] . ':hover ' . $css_scheme['icon'], ), 25 ); $this->__end_controls_tab(); $this->__end_controls_tabs(); $this->__add_control( 'toggle_label_style_heading', array( 'label' => esc_html__( 'Label Styles', 'jet-blocks' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ), 25 ); $this->__start_controls_tabs( 'toggle_label_styles' ); $this->__start_controls_tab( 'toggle_label_normal', array( 'label' => esc_html__( 'Normal', 'jet-blocks' ), ) ); $this->__add_control( 'toggle_control_label_color', array( 'label' => esc_html__( 'Label Color', 'jet-blocks' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['label'] => 'color: {{VALUE}}', ), ), 25 ); $this->__add_group_control( Group_Control_Typography::get_type(), array( 'name' => 'toggle_label_typography', 'scheme' => Scheme_Typography::TYPOGRAPHY_1, 'selector' => '{{WRAPPER}} '. $css_scheme['label'], ), 50 ); $this->__end_controls_tab(); $this->__start_controls_tab( 'toggle_label_hover', array( 'label' => esc_html__( 'Hover', 'jet-blocks' ), ) ); $this->__add_control( 'toggle_control_label_color_hover', array( 'label' => esc_html__( 'Label Color', 'jet-blocks' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['toggle'] . ':hover ' . $css_scheme['label'] => 'color: {{VALUE}}', ), ), 25 ); $this->__add_group_control( Group_Control_Typography::get_type(), array( 'name' => 'toggle_label_typography_hover', 'scheme' => Scheme_Typography::TYPOGRAPHY_1, 'selector' => '{{WRAPPER}} ' . $css_scheme['toggle'] . ':hover ' . $css_scheme['label'], ), 50 ); $this->__end_controls_tab(); $this->__end_controls_tabs(); $this->__end_controls_section(); } protected function render() { $this->__context = 'render'; $panel_settings = $this->get_settings(); $template_id = isset( $panel_settings['panel_template_id'] ) ? $panel_settings['panel_template_id'] : '0'; $position = isset( $panel_settings['position'] ) ? $panel_settings['position'] : 'right'; $animation_effect = isset( $panel_settings['animation_effect'] ) ? $panel_settings['animation_effect'] : 'slide'; $settings = array( 'position' => $position, ); $this->add_render_attribute( 'instance', array( 'class' => array( 'jet-hamburger-panel', //'jet-hamburger-panel-' . $panel_settings['type'] . '-type', 'jet-hamburger-panel-' . $position . '-position', 'jet-hamburger-panel-' . $animation_effect . '-effect', ), 'data-settings' => json_encode( $settings ), ) ); $close_button_html = $this->__get_icon( 'panel_close_icon', '
' ); $toggle_control_html = ''; $toggle_icon = $this->__get_icon( 'panel_toggle_icon', '' ); $toggle_active_icon = $this->__get_icon( 'panel_toggle_active_icon', '' ); if ( ! empty( $toggle_icon ) && ! empty( $toggle_active_icon ) ) { $toggle_control_html .= sprintf( '', $toggle_icon, $toggle_active_icon ); } $toggle_label_html = ''; if ( ! empty( $panel_settings['panel_toggle_label'] ) ) { $toggle_label_html .= sprintf( '