<?php
namespace Essential_Addons_Elementor\Elements;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Typography;
use Elementor\Icons_Manager;
use ElementsKit_Lite\Modules\Widget_Builder\Controls\Control_Type_Border;
// If this file is called directly, abort.
if (!defined( 'ABSPATH' ) ) {
exit;
}
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
class Code_Snippet extends Widget_Base {
public function get_name() {
return 'eael-code-snippet';
}
public function get_title() {
return esc_html__( 'Code Snippet', 'essential-addons-for-elementor-lite' );
}
public function get_icon() {
return 'eaicon-code-snippet';
}
public function get_categories() {
return [ 'essential-addons-elementor' ];
}
public function get_keywords() {
return [
'code',
'snippet',
'code snippet',
'code block',
'programming',
'ea code',
'ea',
'essential addons'
];
}
public function get_custom_help_url() {
return 'https://essential-addons.com/elementor/docs/ea-code-snippet/';
}
protected function register_controls() {
$this->start_controls_section(
'code_snippet_section',
[
'label' => esc_html__( 'Code Settings', 'essential-addons-for-elementor-lite' ),
'tab' => Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'language',
[
'label' => __( 'Programming Language', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SELECT2,
'default' => 'html',
'options' => [
'html' => __( 'HTML', 'essential-addons-for-elementor-lite' ),
'css' => __( 'CSS', 'essential-addons-for-elementor-lite' ),
'scss' => __( 'SCSS', 'essential-addons-for-elementor-lite' ),
'php' => __( 'PHP', 'essential-addons-for-elementor-lite' ),
'py' => __( 'Python', 'essential-addons-for-elementor-lite' ),
'js' => __( 'JavaScript', 'essential-addons-for-elementor-lite' ),
'jsx' => __( 'React JS', 'essential-addons-for-elementor-lite' ),
'vue' => __( 'Vue JS', 'essential-addons-for-elementor-lite' ),
'ts' => __( 'TypeScript', 'essential-addons-for-elementor-lite' ),
'sql' => __( 'SQL', 'essential-addons-for-elementor-lite' ),
'json' => __( 'JSON', 'essential-addons-for-elementor-lite' ),
'xml' => __( 'XML', 'essential-addons-for-elementor-lite' ),
'java' => __( 'Java', 'essential-addons-for-elementor-lite' ),
'rd' => __( 'Ruby', 'essential-addons-for-elementor-lite' ),
'bash' => __( 'Bash', 'essential-addons-for-elementor-lite' ),
'yml' => __( 'YAML', 'essential-addons-for-elementor-lite' ),
'cpp' => __( 'C++', 'essential-addons-for-elementor-lite' ),
'cs' => __( 'C#', 'essential-addons-for-elementor-lite' ),
'go' => __( 'Go', 'essential-addons-for-elementor-lite' ),
'rs' => __( 'Rust', 'essential-addons-for-elementor-lite' ),
'swift' => __( 'Swift', 'essential-addons-for-elementor-lite' ),
'kt' => __( 'Kotlin', 'essential-addons-for-elementor-lite' ),
'md' => __( 'Markdown', 'essential-addons-for-elementor-lite' ),
'sh' => __( 'Shell', 'essential-addons-for-elementor-lite' ),
'ps1' => __( 'Powershell', 'essential-addons-for-elementor-lite' ),
'dockerfile' => __( 'Docker', 'essential-addons-for-elementor-lite' ),
],
'description' => __( 'Choose language for syntax highlighting.', 'essential-addons-for-elementor-lite' ),
]
);
$this->add_control(
'code_content',
[
'label' => __( 'Code Snippet', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::CODE,
'language' => 'html',
'rows' => 15,
'default' => "// Paste or type your code here…",
'placeholder' => __( 'Enter your code snippet here...', 'essential-addons-for-elementor-lite' ),
'description' => __( 'Type or paste your code here. Use Tab to indent; syntax highlighting will appear in the live preview.', 'essential-addons-for-elementor-lite' ),
'ai' => [
'active' => false,
]
]
);
$this->end_controls_section();
$this->start_controls_section(
'appearance_section',
[
'label' => esc_html__( 'Appearance', 'essential-addons-for-elementor-lite' ),
'tab' => Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'theme',
[
'label' => __( 'Theme', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::CHOOSE,
'default' => 'light',
'toggle' => false,
'options' => [
'light' => [
'title' => __( 'Light', 'essential-addons-for-elementor-lite' ),
'icon' => 'eicon-light-mode',
],
'dark' => [
'title' => __( 'Dark', 'essential-addons-for-elementor-lite' ),
'icon' => 'eicon-dark-mode',
],
],
'description' => __( 'Choose light or dark styling for the code snippet block.', 'essential-addons-for-elementor-lite' ),
]
);
$this->add_control(
'show_header',
[
'label' => __( 'Header bar', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => __( 'Show', 'essential-addons-for-elementor-lite' ),
'label_off' => __( 'Hide', 'essential-addons-for-elementor-lite' ),
'return_value' => 'yes',
'default' => 'yes',
'description' => __( 'Toggle the filename header and copy button.', 'essential-addons-for-elementor-lite' ),
]
);
$this->add_control(
'show_copy_button',
[
'label' => __( 'Copy button', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => __( 'Show', 'essential-addons-for-elementor-lite' ),
'label_off' => __( 'Hide', 'essential-addons-for-elementor-lite' ),
'return_value' => 'yes',
'default' => 'yes',
'description' => __( 'Show a one-click copy-to-clipboard icon.', 'essential-addons-for-elementor-lite' ),
'condition' => [
'show_header' => 'yes',
],
]
);
$this->add_control(
'show_copy_tooltip',
[
'label' => __( 'Copy button tooltip', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => __( 'Show', 'essential-addons-for-elementor-lite' ),
'label_off' => __( 'Hide', 'essential-addons-for-elementor-lite' ),
'return_value' => 'yes',
'default' => 'no',
'description' => __( 'Display a tooltip (‘Copied!’) on copy button hover or click.', 'essential-addons-for-elementor-lite' ),
'condition' => [
'show_header' => 'yes',
'show_copy_button' => 'yes',
],
]
);
$this->add_control(
'show_line_numbers',
[
'label' => __( 'Line numbers', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => __( 'Show', 'essential-addons-for-elementor-lite' ),
'label_off' => __( 'Hide', 'essential-addons-for-elementor-lite' ),
'return_value' => 'yes',
'default' => 'no',
'description' => __( 'Display line numbers in the code block.', 'essential-addons-for-elementor-lite' ),
]
);
$this->add_control(
'code_view_mode',
[
'label' => esc_html__( 'View Mode', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'default' => [
'title' => esc_html__( 'Default', 'essential-addons-for-elementor-lite' ),
'icon' => 'eicon-menu-toggle',
],
'fixed' => [
'title' => esc_html__( 'Fixed', 'essential-addons-for-elementor-lite' ),
'icon' => 'eicon-spacer',
],
'collapsed' => [
'title' => esc_html__( 'Collapsed', 'essential-addons-for-elementor-lite' ),
'icon' => 'eicon-v-align-stretch',
],
],
'default' => 'default',
'toggle' => false,
]
);
$this->add_responsive_control(
'code_snippet_height',
[
'label' => esc_html__( 'Height', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', 'rem' ],
'range' => [
'px' => [
'min' => 0,
'max' => 1000,
'step' => 5,
],
'em' => [
'min' => 0,
'max' => 100,
'step' => 0.5,
],
'rem' => [
'min' => 0,
'max' => 100,
'step' => 0.5,
],
],
'default' => [
'unit' => 'px',
'size' => 300,
],
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-content' => 'height: {{SIZE}}{{UNIT}};',
],
'condition' => [
'code_view_mode!' => 'default',
],
]
);
$this->add_control(
'code_collapse_inidicator_content',
[
'label' => esc_html__( 'Indicator', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
'condition' => [
'code_view_mode' => 'collapsed',
],
]
);
$this->add_control(
'code_collapse_inidicator_type',
[
'label' => esc_html__( 'Type', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'full_width' => [
'title' => esc_html__( 'Full Width', 'essential-addons-for-elementor-lite' ),
'icon' => 'eicon-text-align-justify',
],
'button' => [
'title' => esc_html__( 'Button', 'essential-addons-for-elementor-lite' ),
'icon' => 'eicon-button',
],
],
'default' => 'full_width',
'toggle' => false,
'condition' => [
'code_view_mode' => 'collapsed',
],
]
);
$this->add_control(
'code_collapse_inidicator_position',
[
'label' => esc_html__( 'Position', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => esc_html__( 'Left', 'essential-addons-for-elementor-lite' ),
'icon' => 'eicon-text-align-left',
],
'center' => [
'title' => esc_html__( 'Center', 'essential-addons-for-elementor-lite' ),
'icon' => 'eicon-text-align-center',
],
'right' => [
'title' => esc_html__( 'Right', 'essential-addons-for-elementor-lite' ),
'icon' => 'eicon-text-align-right',
],
],
'default' => '',
'toggle' => true,
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-collapsed-indicator-wrapper' => 'justify-content: {{VALUE}};',
'{{WRAPPER}} .eael-code-snippet-collapsed-indicator-wrapper .eael-cs-indicator-type-full_width' => 'justify-content: {{VALUE}};',
],
'condition' => [
'code_view_mode' => 'collapsed',
],
]
);
$this->add_control(
'code_collapse_inidicator_content_type',
[
'label' => esc_html__( 'Content Type', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'text' => [
'title' => esc_html__( 'Text', 'essential-addons-for-elementor-lite' ),
'icon' => 'eicon-animation-text',
],
'icon' => [
'title' => esc_html__( 'Icon', 'essential-addons-for-elementor-lite' ),
'icon' => 'eicon-favorite',
],
],
'default' => 'text',
'toggle' => false,
'condition' => [
'code_view_mode' => 'collapsed',
],
]
);
$this->add_control(
'code_collapse_inidicator_text_collapsed',
[
'label' => esc_html__( 'Text (Collapsed)', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::TEXT,
'default' => esc_html__( 'Show more', 'essential-addons-for-elementor-lite' ),
'ai' => [
'active' => true,
],
'condition' => [
'code_view_mode' => 'collapsed',
'code_collapse_inidicator_content_type' => 'text',
],
]
);
$this->add_control(
'code_collapse_inidicator_text_expanded',
[
'label' => esc_html__( 'Text (Expanded)', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::TEXT,
'default' => esc_html__( 'Show less', 'essential-addons-for-elementor-lite' ),
'ai' => [
'active' => true,
],
'condition' => [
'code_view_mode' => 'collapsed',
'code_collapse_inidicator_content_type' => 'text',
],
]
);
$this->add_control(
'code_collapse_inidicator_icon_collapsed',
[
'label' => esc_html__( 'Icon (Collapsed)', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::ICONS,
'default' => [
'value' => 'fas fa-angle-down',
'library' => 'fa-solid',
],
'condition' => [
'code_view_mode' => 'collapsed',
'code_collapse_inidicator_content_type' => 'icon',
],
]
);
$this->add_control(
'code_collapse_inidicator_icon_expanded',
[
'label' => esc_html__( 'Icon (Expanded)', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::ICONS,
'default' => [
'value' => 'fas fa-angle-up',
'library' => 'fa-solid',
],
'condition' => [
'code_view_mode' => 'collapsed',
'code_collapse_inidicator_content_type' => 'icon',
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'file_preview_section',
[
'label' => __( 'Header', 'essential-addons-for-elementor-lite' ),
'tab' => Controls_Manager::TAB_CONTENT,
'condition' => [
'show_header' => 'yes',
],
]
);
$this->add_control(
'file_name',
[
'label' => __( 'File Name', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::TEXT,
'default' => 'filename',
'placeholder' => __( 'Enter filename with extension', 'essential-addons-for-elementor-lite' ),
'description' => __( 'Enter the filename to display in the header (e.g., hero-section.tsx)', 'essential-addons-for-elementor-lite' ),
'ai' => [ 'active' => true ],
'dynamic' => [ 'active' => true ],
]
);
$this->add_control(
'show_traffic_lights',
[
'label' => __( 'Window buttons', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => __( 'Show', 'essential-addons-for-elementor-lite' ),
'label_off' => __( 'Hide', 'essential-addons-for-elementor-lite' ),
'return_value' => 'yes',
'default' => 'yes',
'description' => __( 'Display macOS-style close/minimize/maximize circles.', 'essential-addons-for-elementor-lite' ),
]
);
$this->add_control(
'show_file_icon',
[
'label' => __( 'Language icon', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => __( 'Show', 'essential-addons-for-elementor-lite' ),
'label_off' => __( 'Hide', 'essential-addons-for-elementor-lite' ),
'return_value' => 'yes',
'default' => 'yes',
'description' => __( 'Display the default icon for this file type.', 'essential-addons-for-elementor-lite' ),
]
);
$this->add_control(
'file_icon_type',
[
'label' => esc_html__( 'Icon Type', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'image' => [
'title' => esc_html__( 'Image', 'essential-addons-for-elementor-lite' ),
'icon' => 'eicon-image',
],
'icon' => [
'title' => esc_html__( 'Icon', 'essential-addons-for-elementor-lite' ),
'icon' => 'eicon-favorite',
],
],
'default' => 'image',
'toggle' => true,
'condition' => [
'show_file_icon' => 'yes',
],
]
);
$this->add_control(
'file_icon',
[
'label' => '',
'type' => Controls_Manager::MEDIA,
// 'media_types' => [ 'image' ],
'description' => __( 'Upload a custom icon to override the default.', 'essential-addons-for-elementor-lite' ),
'condition' => [
'show_file_icon' => 'yes',
'file_icon_type' => 'image',
],
'ai' => [
'active' => false,
],
]
);
$this->add_control(
'file_icon_custom',
[
'label' => '',
'type' => Controls_Manager::ICONS,
'fa4compatibility' => 'icon',
'condition' => [
'show_file_icon' => 'yes',
'file_icon_type' => 'icon',
],
]
);
$this->end_controls_section();
// Style Tab - Wrapper
$this->start_controls_section(
'wrapper_style_section',
[
'label' => esc_html__( 'Wrapper', 'essential-addons-for-elementor-lite' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_responsive_control(
'wrapper_margin',
[
'label' => __( 'Margin', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em', '%' ],
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'wrapper_padding',
[
'label' => __( 'Padding', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em', '%' ],
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_control(
'wrapper_background_color',
[
'label' => __( 'Background Color', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-wrapper' => 'background-color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'wrapper_border',
'selector' => '{{WRAPPER}} .eael-code-snippet-wrapper',
]
);
$this->add_control(
'wrapper_border_radius',
[
'label' => esc_html__( 'Border Radius', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_section();
// Style Tab - Header
$this->start_controls_section(
'header_style_section',
[
'label' => __( 'Header', 'essential-addons-for-elementor-lite' ),
'tab' => Controls_Manager::TAB_STYLE,
'condition' => [
'show_header' => 'yes',
],
]
);
$this->add_responsive_control(
'header_padding',
[
'label' => __( 'Padding', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em', '%' ],
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-header.eael-file-preview-header' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_control(
'header_background_color',
[
'label' => __( 'Background Color', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-header.eael-file-preview-header' => 'background-color: {{VALUE}};',
],
]
);
$this->add_control(
'header_border_color',
[
'label' => __( 'Border Color', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-header.eael-file-preview-header' => 'border-bottom-color: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'header_border_width',
[
'label' => __( 'Border Width', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px' ],
'range' => [
'px' => [
'min' => 0,
'max' => 10,
],
],
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-header.eael-file-preview-header' => 'border-bottom-width: {{SIZE}}{{UNIT}}; border-bottom-style: solid;',
],
'description' => __( 'Controls border bottom width', 'essential-addons-for-elementor-lite' ),
]
);
$this->add_control(
'file_custom_icon_style_heading',
[
'label' => esc_html__( 'File Icon', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
'condition' => [
'show_file_icon' => 'yes',
'file_icon_type' => 'icon',
],
]
);
$this->add_control(
'file_custom_icon_color',
[
'label' => __( 'Color', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .eael-file-icon i' => 'color: {{VALUE}};',
'{{WRAPPER}} .eael-file-icon svg' => 'fill: {{VALUE}};',
],
'condition' => [
'show_file_icon' => 'yes',
'file_icon_type' => 'icon',
],
]
);
$this->add_control(
'file_name_style_heading',
[
'label' => esc_html__( 'File Name', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'file_name_typography',
'label' => __( 'Typography', 'essential-addons-for-elementor-lite' ),
'selector' => '{{WRAPPER}} .eael-code-snippet-header .file-name-text',
]
);
$this->add_control(
'file_name_color',
[
'label' => __( 'Color', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-header .file-name-text' => 'color: {{VALUE}};',
],
]
);
$this->add_control(
'copy_button_style_heading',
[
'label' => esc_html__( 'Copy Button', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
'condition' => [
'show_copy_button' => 'yes',
],
]
);
$this->add_control(
'copy_button_color',
[
'label' => __( 'Color', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-copy-button' => 'color: {{VALUE}};',
],
'condition' => [
'show_copy_button' => 'yes',
],
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'copy_button_border',
'selector' => '{{WRAPPER}} .eael-code-snippet-copy-button',
]
);
$this->add_responsive_control(
'copy_button_border_radius',
[
'label' => esc_html__( 'Border Radius', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-copy-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_section();
// Style Tab - Line Numbers
$this->start_controls_section(
'line_numbers_style_section',
[
'label' => __( 'Line Numbers', 'essential-addons-for-elementor-lite' ),
'tab' => Controls_Manager::TAB_STYLE,
'condition' => [
'show_line_numbers' => 'yes',
],
]
);
$this->add_responsive_control(
'line_numbers_padding',
[
'label' => __( 'Padding', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em', '%' ],
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-line-numbers' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_control(
'line_numbers_color',
[
'label' => __( 'Line Number Color', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-line-numbers .line-number' => 'color: {{VALUE}};',
],
]
);
$this->add_control(
'line_numbers_background_color',
[
'label' => __( 'Line Number Background', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-line-numbers' => 'background-color: {{VALUE}};',
],
]
);
$this->add_control(
'line_numbers_border_color',
[
'label' => __( 'Border Color', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-line-numbers' => 'border-right-color: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'line_numbers_border_width',
[
'label' => __( 'Border Width', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px' ],
'range' => [
'px' => [
'min' => 0,
'max' => 20,
],
],
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-line-numbers' => 'border-right-width: {{SIZE}}{{UNIT}}; border-right-style: solid;',
],
'description' => __( 'Controls border right width', 'essential-addons-for-elementor-lite' ),
]
);
$this->end_controls_section();
// Style Tab - Code Content Area
$this->start_controls_section(
'code_content_style_section',
[
'label' => __( 'Code Content Area', 'essential-addons-for-elementor-lite' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_responsive_control(
'code_content_padding',
[
'label' => __( 'Padding', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em', '%' ],
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-code' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_control(
'code_content_background_color',
[
'label' => __( 'Background Color', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-code' => 'background-color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'content_typography',
'selector' => '{{WRAPPER}} .eael-code-snippet-line-numbers, {{WRAPPER}} .eael-code-snippet-code, {{WRAPPER}} .eael-code-snippet-code code',
]
);
$this->end_controls_section();
// Style Tab - Code Content
$this->start_controls_section(
'code_content_collapse_style_section',
[
'label' => __( 'Collapse Indicator', 'essential-addons-for-elementor-lite' ),
'tab' => Controls_Manager::TAB_STYLE,
'condition' => [
'code_view_mode' => 'collapsed',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'code_content_collapsed_indicator_typography',
'selector' => '{{WRAPPER}} .eael-code-snippet-collapsed-indicator-wrapper .eael-code-snippet-collapsed-indicator .eael-code-snippet-collapsed-indicator-text',
'condition' => [
'code_collapse_inidicator_content_type' => 'text'
]
]
);
$this->add_responsive_control(
'code_content_collapsed_indicator_icon_size',
[
'label' => esc_html__( 'Icon Size', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', 'rem' ],
'range' => [
'px' => [
'min' => 0,
'max' => 1000,
'step' => 5,
],
],
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-collapsed-indicator-wrapper .eael-code-snippet-collapsed-indicator i' => 'font-size: {{SIZE}}{{UNIT}};',
'{{WRAPPER}} .eael-code-snippet-collapsed-indicator-wrapper .eael-code-snippet-collapsed-indicator svg' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
],
'condition' => [
'code_collapse_inidicator_content_type' => 'icon'
]
]
);
$this->add_control(
'code_content_collapsed_indicator_color',
[
'label' => __( 'Color', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-collapsed-indicator-wrapper .eael-code-snippet-collapsed-indicator i' => 'color: {{VALUE}};',
'{{WRAPPER}} .eael-code-snippet-collapsed-indicator-wrapper .eael-code-snippet-collapsed-indicator svg' => 'fill: {{VALUE}};',
'{{WRAPPER}} .eael-code-snippet-collapsed-indicator-wrapper .eael-code-snippet-collapsed-indicator .eael-code-snippet-collapsed-indicator-text' => 'color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'code_content_collapsed_indicator_background',
'types' => [ 'classic', 'gradient' ],
'exclude' => [ 'image' ],
'selector' => '{{WRAPPER}} .eael-code-snippet-collapsed-indicator-wrapper .eael-code-snippet-collapsed-indicator',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'code_content_collapsed_indicator_border',
'selector' => '{{WRAPPER}} .eael-code-snippet-collapsed-indicator-wrapper .eael-code-snippet-collapsed-indicator',
]
);
$this->add_responsive_control(
'code_content_collapsed_indicator_border_radius',
[
'label' => __( 'Border Radius', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-collapsed-indicator-wrapper .eael-code-snippet-collapsed-indicator' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'code_content_collapsed_indicator_height',
[
'label' => esc_html__( 'Height', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%', 'em', 'rem' ],
'range' => [
'px' => [
'min' => 0,
'max' => 100,
'step' => 5,
],
'%' => [
'min' => 0,
'max' => 100,
],
],
'default' => [
'unit' => 'px',
'size' => 30,
],
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-collapsed-indicator-wrapper' => 'height: {{SIZE}}{{UNIT}};',
'{{WRAPPER}} .eael-code-snippet-collapsed-indicator-wrapper .eael-code-snippet-collapsed-indicator' => 'height: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'code_content_collapsed_indicator_width',
[
'label' => esc_html__( 'Width', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
'range' => [
'px' => [
'min' => 0,
'max' => 100,
'step' => 5,
],
'%' => [
'min' => 0,
'max' => 100,
],
],
'default' => [
'unit' => 'px',
'size' => 30,
],
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-collapsed-indicator-wrapper .eael-code-snippet-collapsed-indicator.eael-cs-indicator-type-button' => 'width: {{SIZE}}{{UNIT}};',
],
'condition' => [
'code_view_mode' => 'collapsed',
'code_collapse_inidicator_type' => 'button',
],
]
);
$this->add_responsive_control(
'code_content_collapsed_indicator_padding',
[
'label' => esc_html__( 'Padding', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em', 'rem' ],
'default' => [
'top' => 20,
'right' => 20,
'bottom' => 20,
'left' => 20,
'unit' => 'px',
'isLinked' => true,
],
'selectors' => [
'{{WRAPPER}} .eael-code-snippet-collapsed-indicator-wrapper .eael-code-snippet-collapsed-indicator.eael-cs-indicator-type-full_width' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
'condition' => [
'code_view_mode' => 'collapsed',
'code_collapse_inidicator_type' => 'full_width',
],
]
);
$this->end_controls_section();
}
/**
* Get default file icon based on programming language
* @return string Emoji icon for the language
*/
public static function get_file_icon_by_language( $language ) {
$icons = [
'html' => '🌐',
'css' => '🎨',
'scss' => '🎨',
'php' => '🐘',
'py' => '🐍',
'js' => '📄',
'jsx' => '⚛️',
'vue' => '🟩',
'ts' => '📘',
'sql' => '🗃️',
'json' => '📋',
'xml' => '📄',
'java' => '☕',
'rd' => '💎',
'bash' => '💻',
'yml' => '📋',
'cpp' => '➕➕',
'cs' => '🔷',
'go' => '🐹',
'rs' => '🦀',
'swift' => '🦉',
'kt' => '🎯',
'md' => '📝',
'sh' => '💻',
'ps1' => '📟',
'dockerfile' => '🐳',
];
return $icons[$language] ?? '📄';
}
protected function render() {
$settings = $this->get_settings_for_display();
// Generate unique snippet ID for this widget instance
$snippet_id = 'eael-code-snippet-' . $this->get_id();
// Generate line numbers if needed
$line_numbers = [];
if ( $settings['show_line_numbers'] ) {
$lines = explode( "\n", $settings['code_content'] );
$line_numbers = range( 1, count( $lines ) );
}
$file_icon = !empty($settings['file_icon']['url']) || !empty($settings['file_icon_custom']['value']) ?? '';
$show_file_icon = $settings['show_file_icon'] ?? 'yes';
$language = $settings['language'] ?? 'html';
$file_name = $settings['file_name'] ?? '';
$theme = $settings['theme'] ?? 'light';
$show_traffic_lights = $settings['show_traffic_lights'] ?? 'yes';
$show_line_numbers = $settings['show_line_numbers'] ?? 'no';
$show_header = $settings['show_header'] ?? 'yes';
$show_copy_button = $settings['show_copy_button'] ?? 'yes';
$show_copy_tooltip = $settings['show_copy_tooltip'] ?? 'no';
$this->add_render_attribute( 'eael-snippet-wrapper', 'class', 'eael-code-snippet-wrapper theme-' . $theme );
$this->add_render_attribute( 'eael-snippet-wrapper', 'data-language', $language );
$this->add_render_attribute( 'eael-snippet-wrapper', 'data-copy-button', 'yes' === $show_copy_button );
$this->add_render_attribute( 'eael-snippet-wrapper', 'data-snippet-id', $snippet_id );
$this->add_render_attribute( 'eael-snippet-wrapper', 'id', $snippet_id );
$this->add_render_attribute( 'eael-snippet-wrapper', 'class', 'view-mode-' . $settings['code_view_mode'] );
?>
<div <?php $this->print_render_attribute_string( 'eael-snippet-wrapper' ); ?> >
<?php if ( 'yes' === $show_header ) { ?>
<div class="eael-code-snippet-header eael-file-preview-header">
<div class="eael-file-preview-left">
<?php if ( 'yes' === $show_traffic_lights ) { ?>
<div class="eael-traffic-lights">
<span class="traffic-light traffic-light-red"></span>
<span class="traffic-light traffic-light-yellow"></span>
<span class="traffic-light traffic-light-green"></span>
</div>
<?php } ?>
<div class="eael-file-info">
<?php if ( 'yes' === $show_file_icon ) { ?>
<div class="eael-file-icon">
<?php if ( ! empty( $file_icon ) ) {
if ( $settings['file_icon_type'] === 'icon' ) {
Icons_Manager::render_icon( $settings['file_icon_custom'], [ 'aria-hidden' => 'true' ] );
} else {
echo wp_get_attachment_image( $settings['file_icon']['id'], 'thumbnail', true, [ 'alt' => esc_attr__( 'File icon', 'essential-addons-for-elementor-lite' ) ] );
}
} else {
?>
<span class="eael-file-icon-emoji"><?php echo esc_html( self::get_file_icon_by_language( $language ) ); ?></span>
<?php
} ?>
</div>
<?php }
if ( ! empty( $file_name ) ) { ?>
<div class="eael-file-name">
<span class="file-name-text">
<?php
if ( strpos( $file_name, '.' ) === false && ! empty( $language ) ) {
echo esc_html( $file_name . '.' . $language );
} else {
echo esc_html( $file_name );
}
?>
</span>
</div>
<?php } ?>
</div>
</div>
<?php if ( 'yes' === $show_copy_button ) {
$this->add_render_attribute( 'eael-code-snippet-copy-button', [
'data-clipboard-target' => '#' . esc_attr( $snippet_id ) . ' .eael-code-snippet-code code',
'class' => 'eael-code-snippet-copy-button',
'type' => 'button',
'aria-label' => esc_attr__( 'Copy code to clipboard', 'essential-addons-for-elementor-lite' )
] );
$this->add_render_attribute( 'eael-code-snippet-copy-button', 'aria-label', esc_attr__( 'Copy code to clipboard', 'essential-addons-for-elementor-lite' ) );
?>
<div class="eael-file-preview-right">
<div class="eael-code-snippet-copy-container">
<button <?php $this->print_render_attribute_string( 'eael-code-snippet-copy-button' ); ?>>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z" fill="currentColor"/>
</svg>
</button>
<?php if ( 'yes' === $show_copy_tooltip ) { ?>
<div class="eael-code-snippet-tooltip"><?php esc_html_e( 'Copy to clipboard', 'essential-addons-for-elementor-lite' ); ?></div>
<?php } ?>
</div>
</div>
<?php } ?>
</div>
<?php } ?>
<div class="eael-code-snippet-content">
<?php if( 'yes' === $show_line_numbers ) { ?>
<div class="eael-code-snippet-line-numbers" aria-hidden="true">
<?php foreach ( $line_numbers as $line_number ) { ?>
<div class="line-number"><?php echo esc_html( $line_number ); ?></div>
<?php } ?>
</div>
<?php } ?>
<pre class="eael-code-snippet-code language-<?php echo esc_attr( $language ); ?>"><code><?php echo esc_html( $settings['code_content'] ); ?></code></pre>
<?php if( 'collapsed' === $settings['code_view_mode'] ) {
$indcator_type_class = !empty($settings['code_collapse_inidicator_type']) ? 'eael-cs-indicator-type-' . $settings['code_collapse_inidicator_type'] : '';
$this->add_render_attribute( 'eael_code_snippet_view_mode', [
'class' => [
'eael-code-snippet-collapsed-indicator',
$indcator_type_class,
'eael-cs-code-collapsed'
]
] );
?>
<div class="eael-code-snippet-collapsed-indicator-wrapper">
<div <?php $this->print_render_attribute_string( 'eael_code_snippet_view_mode' ); ?>>
<?php if ( 'text' === $settings['code_collapse_inidicator_content_type'] ) { ?>
<span class="eael-code-snippet-collapsed-indicator-text eael-csi-collapsed"><?php echo esc_html( $settings['code_collapse_inidicator_text_collapsed'] ); ?></span>
<span class="eael-code-snippet-collapsed-indicator-text eael-csi-expanded"><?php echo esc_html( $settings['code_collapse_inidicator_text_expanded'] ); ?></span>
<?php } else { ?>
<?php Icons_Manager::render_icon( $settings['code_collapse_inidicator_icon_collapsed'], [ 'aria-hidden' => 'true', 'class' => 'eael-code-snippet-collapsed-indicator-icon eael-csi-collapsed' ] ); ?>
<?php Icons_Manager::render_icon( $settings['code_collapse_inidicator_icon_expanded'], [ 'aria-hidden' => 'true', 'class' => 'eael-code-snippet-collapsed-indicator-icon eael-csi-expanded' ] ); ?>
<?php } ?>
</div>
</div>
<?php } ?>
</div>
</div>
<?php
}
}