editor->is_edit_mode() ) { return false; } $settings = $this->get_data( 'settings' ); if ( empty( $settings ) || ! is_array( $settings ) ) { return false; } // ACF Repeater pulls per-post data — treat as dynamic so it is not statically cached. if ( 'acf_repeater' === ( $settings['eael_ia_data_source'] ?? 'custom' ) ) { return true; } return false; } public function has_widget_inner_wrapper(): bool { return ! Helper::eael_e_optimized_markup(); } public function get_custom_help_url() { return 'https://essential-addons.com/elementor/docs/image-accordion/'; } /** * Registers ACF Repeater data-source controls for Image Accordion (Lite-native). * Minimal field set: Background Image, Title, Content, Title Link. */ protected function eael_register_acf_controls() { $this->start_controls_section( 'eael_ia_section_data_source', [ 'label' => esc_html__( 'Data Source', 'essential-addons-for-elementor-lite' ), ] ); $this->add_control( 'eael_ia_data_source', [ 'label' => esc_html__( 'Source', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::SELECT, 'default' => 'custom', 'options' => [ 'custom' => esc_html__( 'Custom (Manual)', 'essential-addons-for-elementor-lite' ), 'acf_repeater' => esc_html__( 'ACF Repeater Field', 'essential-addons-for-elementor-lite' ), ], ] ); $this->add_control( 'eael_ia_acf_repeater_field', [ 'label' => esc_html__( 'Repeater Field', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => Helper::eael_get_acf_repeater_options(), 'condition' => [ 'eael_ia_data_source' => 'acf_repeater' ], ] ); // ACF inactive notice (no-op when ACF is active). Helper::eael_acf_notice_controls( $this, [ 'eael_ia_data_source' => 'acf_repeater' ] ); // Per-repeater sub-field mapping. $acf_sub_fields_by_repeater = Helper::eael_get_acf_repeater_sub_fields(); foreach ( $acf_sub_fields_by_repeater as $repeater_name => $sub_field_options ) { $repeater_condition = [ 'eael_ia_data_source' => 'acf_repeater', 'eael_ia_acf_repeater_field' => $repeater_name, ]; $this->add_control( 'eael_ia_acf_fields_heading_' . $repeater_name, [ 'label' => esc_html__( 'Field Mapping', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => $repeater_condition, ] ); $this->add_control( 'eael_ia_acf_repeater_image_' . $repeater_name, [ 'label' => esc_html__( 'Background Image', 'essential-addons-for-elementor-lite' ), 'description' => esc_html__( 'Map an ACF Image field used as the accordion item background.', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => $sub_field_options, 'condition' => $repeater_condition, ] ); $this->add_control( 'eael_ia_acf_repeater_title_' . $repeater_name, [ 'label' => esc_html__( 'Title', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => $sub_field_options, 'condition' => $repeater_condition, ] ); $this->add_control( 'eael_ia_acf_repeater_content_' . $repeater_name, [ 'label' => esc_html__( 'Content', 'essential-addons-for-elementor-lite' ), 'description' => esc_html__( 'Map a Text, Textarea, or WYSIWYG ACF field.', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => $sub_field_options, 'condition' => $repeater_condition, ] ); $this->add_control( 'eael_ia_acf_repeater_link_' . $repeater_name, [ 'label' => esc_html__( 'Title Link', 'essential-addons-for-elementor-lite' ), 'description' => esc_html__( 'Map an ACF URL, Link, or Page Link field. The title links only when the row has a value.', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => $sub_field_options, 'condition' => $repeater_condition, ] ); $extra_field_options = $sub_field_options; unset( $extra_field_options[''] ); $this->add_control( 'eael_ia_acf_repeater_extras_' . $repeater_name, [ 'label' => esc_html__( 'Additional Fields', 'essential-addons-for-elementor-lite' ), 'description' => esc_html__( 'Select extra sub-fields to display below each item content.', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::SELECT2, 'multiple' => true, 'default' => [], 'options' => $extra_field_options, 'label_block' => true, 'condition' => $repeater_condition, ] ); } $this->end_controls_section(); } /** * Returns the accordion items to render. * * Custom mode returns the manual repeater unchanged. ACF mode maps the selected * ACF Repeater field's rows into the item shape the render loop consumes. * * @param array $settings Widget settings from get_settings_for_display(). * @return array */ protected function get_image_accordion_items( $settings ) { if ( 'acf_repeater' !== ( $settings['eael_ia_data_source'] ?? 'custom' ) ) { return is_array( $settings['eael_img_accordions'] ?? null ) ? $settings['eael_img_accordions'] : []; } $field_name = sanitize_text_field( $settings['eael_ia_acf_repeater_field'] ?? '' ); if ( empty( $field_name ) || ! function_exists( 'get_field' ) ) { return []; } $image_key = sanitize_text_field( $settings[ 'eael_ia_acf_repeater_image_' . $field_name ] ?? '' ); $title_key = sanitize_text_field( $settings[ 'eael_ia_acf_repeater_title_' . $field_name ] ?? '' ); $content_key = sanitize_text_field( $settings[ 'eael_ia_acf_repeater_content_' . $field_name ] ?? '' ); $link_key = sanitize_text_field( $settings[ 'eael_ia_acf_repeater_link_' . $field_name ] ?? '' ); $extra_keys = ( isset( $settings[ 'eael_ia_acf_repeater_extras_' . $field_name ] ) && is_array( $settings[ 'eael_ia_acf_repeater_extras_' . $field_name ] ) ) ? $settings[ 'eael_ia_acf_repeater_extras_' . $field_name ] : []; // Resolve sub-field labels once for the selected additional fields. $sub_field_labels = []; if ( ! empty( $extra_keys ) && function_exists( 'acf_get_field' ) ) { $repeater_field = acf_get_field( $field_name ); if ( ! empty( $repeater_field['sub_fields'] ) ) { foreach ( $repeater_field['sub_fields'] as $sf ) { $sub_field_labels[ $sf['name'] ] = $sf['label']; } } } $object_id = get_the_ID() ?: get_queried_object_id(); $rows = get_field( $field_name, $object_id ); if ( empty( $rows ) || ! is_array( $rows ) ) { return []; } $items = []; foreach ( $rows as $row ) { if ( ! is_array( $row ) ) { continue; } // Title / content kept raw; render escapes (wp_kses + parse_text_editor). $title = ( $title_key && is_scalar( $row[ $title_key ] ?? null ) ) ? (string) $row[ $title_key ] : ''; $content = ( $content_key && is_scalar( $row[ $content_key ] ?? null ) ) ? (string) $row[ $content_key ] : ''; // Background image: ACF image array, attachment ID, or URL string. $image = [ 'url' => '', 'id' => 0 ]; if ( $image_key ) { $raw_image = $row[ $image_key ] ?? ''; if ( is_array( $raw_image ) ) { $image['url'] = $raw_image['url'] ?? ''; $image['id'] = (int) ( $raw_image['ID'] ?? ( $raw_image['id'] ?? 0 ) ); } elseif ( is_numeric( $raw_image ) ) { $image['id'] = (int) $raw_image; $image['url'] = (string) wp_get_attachment_url( $image['id'] ); } elseif ( is_string( $raw_image ) && '' !== $raw_image ) { $image['url'] = $raw_image; } } // Link: ACF Link array, or a plain URL / page-link string. $link = [ 'url' => '', 'is_external' => '', 'nofollow' => '' ]; if ( $link_key ) { $raw_link = $row[ $link_key ] ?? ''; if ( is_array( $raw_link ) ) { $link['url'] = $raw_link['url'] ?? ''; $link['is_external'] = ( ! empty( $raw_link['target'] ) && '_blank' === $raw_link['target'] ) ? 'on' : ''; } elseif ( is_string( $raw_link ) && '' !== $raw_link ) { $link['url'] = $raw_link; } } // Additional fields: [ [ 'label' => ..., 'value' => ... ], ... ]. $extras = []; foreach ( $extra_keys as $ekey ) { $val = $row[ $ekey ] ?? ''; if ( '' === $val || null === $val || [] === $val ) { continue; } $extras[] = [ 'label' => $sub_field_labels[ $ekey ] ?? $ekey, 'value' => is_scalar( $val ) ? (string) $val : '', ]; } $items[] = [ 'eael_accordion_is_active' => 'no', 'eael_accordion_bg' => $image, 'eael_accordion_tittle' => $title, 'eael_accordion_content' => $content, // Always "yes": the render also requires a non-empty, non-"#" URL, // so an unmapped or empty ACF link simply renders no anchor. 'eael_accordion_enable_title_link' => 'yes', 'eael_accordion_title_link' => $link, 'eael_ia_extras' => $extras, '_id' => uniqid( 'ia_', false ), ]; } return $items; } /** * Style controls for the ACF "Additional Fields" output (Style tab). * Only shown when the data source is an ACF Repeater. */ protected function eael_acf_extra_data_controls_style() { $this->start_controls_section( 'eael_ia_section_extra_data_style', [ 'label' => esc_html__( 'Additional Fields', 'essential-addons-for-elementor-lite' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'eael_ia_data_source' => 'acf_repeater', ], ] ); $this->add_control( 'eael_ia_extra_data_text_color', [ 'label' => esc_html__( 'Color', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .eael-img-accordion-extras .eael-img-accordion-extra-value' => 'color: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'eael_ia_extra_data_text_typography', 'selector' => '{{WRAPPER}} .eael-img-accordion-extras .eael-img-accordion-extra-value', ] ); $this->add_control( 'eael_ia_extra_data_text_margin', [ 'label' => esc_html__( 'Margin', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], 'selectors' => [ '{{WRAPPER}} .eael-img-accordion-extras .eael-img-accordion-extra' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_control( 'eael_ia_extra_data_text_padding', [ 'label' => esc_html__( 'Padding', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], 'selectors' => [ '{{WRAPPER}} .eael-img-accordion-extras .eael-img-accordion-extra' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->end_controls_section(); } protected function register_controls() { $this->eael_register_acf_controls(); /** * Image accordion Content Settings */ $this->start_controls_section( 'eael_section_img_accordion_settings', [ 'label' => esc_html__( 'General', 'essential-addons-for-elementor-lite' ), ] ); $this->add_control( 'eael_img_accordion_type', [ 'label' => esc_html__( 'Accordion Style', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::SELECT, 'default' => 'on-hover', 'label_block' => false, 'options' => [ 'on-hover' => esc_html__( 'On Hover', 'essential-addons-for-elementor-lite' ), 'on-click' => esc_html__( 'On Click', 'essential-addons-for-elementor-lite' ), ], ] ); $this->add_control( 'eael_img_accordion_direction', [ 'label' => esc_html__( 'Direction', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::SELECT, 'default' => 'on-hover', 'label_block' => false, 'options' => [ 'accordion-direction-horizontal' => esc_html__( 'Horizontal', 'essential-addons-for-elementor-lite' ), 'accordion-direction-vertical' => esc_html__( 'Vertical', 'essential-addons-for-elementor-lite' ), ], 'default' => 'accordion-direction-horizontal', ] ); $this->add_control( 'eael_img_accordion_content_heading', [ 'label' => __( 'Content', 'essential-addons-for-elementor-lite' ), 'type' => \Elementor\Controls_Manager::HEADING, ] ); $this->add_control( 'eael_img_accordion_content_horizontal_align', [ 'label' => __( 'Horizontal Alignment', 'essential-addons-for-elementor-lite' ), 'type' => \Elementor\Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => __( 'Left', 'essential-addons-for-elementor-lite' ), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => __( 'Center', 'essential-addons-for-elementor-lite' ), 'icon' => 'eicon-text-align-center', ], 'right' => [ 'title' => __( 'Right', 'essential-addons-for-elementor-lite' ), 'icon' => 'eicon-text-align-right', ], ], 'default' => 'center', 'toggle' => true, ] ); $this->add_control( 'eael_img_accordion_content_vertical_align', [ 'label' => __( 'Vertical Alignment', 'essential-addons-for-elementor-lite' ), 'type' => \Elementor\Controls_Manager::CHOOSE, 'options' => [ 'top' => [ 'title' => __( 'Top', 'essential-addons-for-elementor-lite' ), 'icon' => 'fa fa-arrow-circle-up', ], 'center' => [ 'title' => __( 'Center', 'essential-addons-for-elementor-lite' ), 'icon' => 'eicon-text-align-center', ], 'bottom' => [ 'title' => __( 'Bottom', 'essential-addons-for-elementor-lite' ), 'icon' => 'fa fa-arrow-circle-down', ], ], 'default' => 'center', 'toggle' => true, ] ); $this->add_control( 'title_tag', [ 'label' => __( 'Select Tag', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::SELECT, 'default' => 'h2', 'options' => [ 'h1' => __( 'H1', 'essential-addons-for-elementor-lite' ), 'h2' => __( 'H2', 'essential-addons-for-elementor-lite' ), 'h3' => __( 'H3', 'essential-addons-for-elementor-lite' ), 'h4' => __( 'H4', 'essential-addons-for-elementor-lite' ), 'h5' => __( 'H5', 'essential-addons-for-elementor-lite' ), 'h6' => __( 'H6', 'essential-addons-for-elementor-lite' ), 'span' => __( 'Span', 'essential-addons-for-elementor-lite' ), 'p' => __( 'P', 'essential-addons-for-elementor-lite' ), 'div' => __( 'Div', 'essential-addons-for-elementor-lite' ), ], ] ); $repeater = new Repeater(); $repeater->add_control( 'eael_accordion_is_active', [ 'label' => __( 'Make it active?', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => __( 'Yes', 'essential-addons-for-elementor-lite' ), 'label_off' => __( 'No', 'essential-addons-for-elementor-lite' ), 'return_value' => 'yes', ] ); $repeater->add_control( 'eael_accordion_bg', [ 'label' => esc_html__( 'Background Image', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::MEDIA, 'label_block' => true, 'default' => [ 'url' => EAEL_PLUGIN_URL . '/assets/front-end/img/accordion.png', ], 'ai' => [ 'active' => false, ], ] ); $repeater->add_control( 'eael_accordion_tittle', [ 'label' => esc_html__( 'Title', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::TEXT, 'label_block' => true, 'default' => esc_html__( 'Accordion item title', 'essential-addons-for-elementor-lite' ), 'dynamic' => [ 'active' => true ], 'ai' => [ 'active' => true, ], ] ); $repeater->add_control( 'eael_accordion_content', [ 'label' => esc_html__( 'Content', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::WYSIWYG, 'label_block' => true, 'default' => esc_html__( 'Accordion content goes here!', 'essential-addons-for-elementor-lite' ), ] ); $repeater->add_control( 'eael_accordion_enable_title_link', [ 'label' => esc_html__( 'Enable Title Link', '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', ] ); $repeater->add_control( 'eael_accordion_title_link', [ 'name' => 'eael_accordion_title_link', 'label' => esc_html__( 'Title Link', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::URL, 'dynamic' => [ 'active' => true ], 'label_block' => true, 'default' => [ 'url' => '#', 'is_external' => '', ], 'show_external' => true, 'condition' => [ 'eael_accordion_enable_title_link' => 'yes', ], ] ); $this->add_control( 'eael_img_accordions', [ 'type' => Controls_Manager::REPEATER, 'seperator' => 'before', 'default' => [ [ 'eael_accordion_tittle' => esc_html__( 'Image Accordion #1', 'essential-addons-for-elementor-lite' ), 'eael_accordion_content' => esc_html__( 'Image Accordion Content Goes Here! Click edit button to change this text.', 'essential-addons-for-elementor-lite' ), 'eael_accordion_bg' => [ 'url' => EAEL_PLUGIN_URL . '/assets/front-end/img/accordion.png', ] ], [ 'eael_accordion_tittle' => esc_html__( 'Image Accordion #2', 'essential-addons-for-elementor-lite' ), 'eael_accordion_content' => esc_html__( 'Image Accordion Content Goes Here! Click edit button to change this text.', 'essential-addons-for-elementor-lite' ), 'eael_accordion_bg' => [ 'url' => EAEL_PLUGIN_URL . '/assets/front-end/img/accordion.png', ] ], [ 'eael_accordion_tittle' => esc_html__( 'Image Accordion #3', 'essential-addons-for-elementor-lite' ), 'eael_accordion_content' => esc_html__( 'Image Accordion Content Goes Here! Click edit button to change this text.', 'essential-addons-for-elementor-lite' ), 'eael_accordion_bg' => [ 'url' => EAEL_PLUGIN_URL . '/assets/front-end/img/accordion.png', ] ], [ 'eael_accordion_tittle' => esc_html__( 'Image Accordion #4', 'essential-addons-for-elementor-lite' ), 'eael_accordion_content' => esc_html__( 'Image Accordion Content Goes Here! Click edit button to change this text.', 'essential-addons-for-elementor-lite' ), 'eael_accordion_bg' => [ 'url' => EAEL_PLUGIN_URL . '/assets/front-end/img/accordion.png', ] ], ], 'fields' => $repeater->get_controls(), 'title_field' => '{{eael_accordion_tittle}}', 'condition' => [ 'eael_ia_data_source' => 'custom' ], ] ); $this->add_control( 'eael_wd_liquid_glass_effect_switch', [ 'label' => __( 'Enable Liquid Glass Effects', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::SWITCHER ] ); $this->end_controls_section(); /** * ------------------------------------------- * Tab Style (Image accordion) * ------------------------------------------- */ $this->start_controls_section( 'eael_section_img_accordion_style_settings', [ 'label' => esc_html__( 'General', 'essential-addons-for-elementor-lite' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'eael_accordion_height', [ 'label' => esc_html__( 'Height', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::TEXT, 'default' => '400', 'description' => 'Unit in px', 'selectors' => [ '{{WRAPPER}} .eael-img-accordion ' => 'height: {{VALUE}}px;', ], 'ai' => [ 'active' => true, ], ] ); $this->add_control( 'eael_accordion_bg_color', [ 'label' => esc_html__( 'Background Color', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .eael-img-accordion' => 'background-color: {{VALUE}};', ], ] ); $this->add_responsive_control( 'eael_accordion_container_padding', [ 'label' => esc_html__( 'Padding', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', 'em', '%' ], 'selectors' => [ '{{WRAPPER}} .eael-img-accordion' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'eael_accordion_container_margin', [ 'label' => esc_html__( 'Margin', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', 'em', '%' ], 'selectors' => [ '{{WRAPPER}} .eael-img-accordion' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'eael_accordion_border', 'label' => esc_html__( 'Border', 'essential-addons-for-elementor-lite' ), 'selector' => '{{WRAPPER}} .eael-img-accordion', ] ); $this->add_control( 'eael_accordion_border_radius', [ 'label' => esc_html__( 'Border Radius', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 4, ], 'range' => [ 'px' => [ 'max' => 500, ], ], 'selectors' => [ '{{WRAPPER}} .eael-img-accordion' => 'border-radius: {{SIZE}}px;', '{{WRAPPER}} .eael-img-accordion a:first-child' => 'border-radius: {{SIZE}}px 0 0 {{SIZE}}px;', '{{WRAPPER}} .eael-img-accordion a:last-child' => 'border-radius: 0 {{SIZE}}px {{SIZE}}px 0;', ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'eael_accordion_shadow', 'selector' => '{{WRAPPER}} .eael-img-accordion', ] ); $this->add_control( 'eael_accordion_img_overlay_color', [ 'label' => esc_html__( 'Overlay Color', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::COLOR, 'default' => 'rgba(0, 0, 0, .3)', 'selectors' => [ '{{WRAPPER}} .eael-img-accordion .eael-image-accordion-hover:before' => 'background-color: {{VALUE}};', ], ] ); $this->add_control( 'eael_accordion_img_hover_color', [ 'label' => esc_html__( 'Hover Overlay Color', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::COLOR, 'default' => 'rgba(0, 0, 0, .5)', 'selectors' => [ '{{WRAPPER}} .eael-img-accordion .eael-image-accordion-hover:hover::before' => 'background-color: {{VALUE}};', '{{WRAPPER}} .eael-img-accordion .eael-image-accordion-hover.overlay-active:hover::before' => 'background-color: {{VALUE}};', '{{WRAPPER}} .eael-img-accordion .eael-image-accordion-hover.overlay-active:before' => 'background-color: {{VALUE}};', ], ] ); $this->end_controls_section(); /** * ------------------------------------------- * Tab Style (Thumbnail Style) * ------------------------------------------- */ $this->start_controls_section( 'eael_section_img_accordion_thumbnail_style_settings', [ 'label' => esc_html__( 'Thumbnail', 'essential-addons-for-elementor-lite' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'eael_image_accordion_thumbnail_margin', [ 'label' => __( 'Margin', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .eael-img-accordion .eael-image-accordion-item' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_control( 'eael_image_accordion_thumbnail_padding', [ 'label' => __( 'Padding', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .eael-img-accordion .eael-image-accordion-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_control( 'eael_image_accordion_thumbnail_radius', [ 'label' => __( 'Border Radius', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .eael-img-accordion .eael-image-accordion-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}!important;', ], ] ); $this->add_group_control( \Elementor\Group_Control_Border::get_type(), [ 'name' => 'eael_image_accordion_thumbnail_border', 'label' => __( 'Border', 'essential-addons-for-elementor-lite' ), 'selector' => '{{WRAPPER}} .eael-img-accordion .eael-image-accordion-item', ] ); $this->end_controls_section(); /** * ------------------------------------------- * Tab Style (Image accordion Content Style) * ------------------------------------------- */ $this->start_controls_section( 'eael_section_img_accordion_typography_settings', [ 'label' => esc_html__( 'Color & Typography', 'essential-addons-for-elementor-lite' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'eael_accordion_title_text', [ 'label' => esc_html__( 'Title', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'eael_accordion_title_color', [ 'label' => esc_html__( 'Color', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::COLOR, 'default' => '#fff', 'selectors' => [ '{{WRAPPER}} .eael-img-accordion .overlay .img-accordion-title' => 'color: {{VALUE}} !important;', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'eael_accordion_title_typography', 'selector' => '{{WRAPPER}} .eael-img-accordion .overlay .img-accordion-title', ] ); $this->add_control( 'eael_accordion_content_text', [ 'label' => esc_html__( 'Content', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'eael_accordion_content_color', [ 'label' => esc_html__( 'Color', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::COLOR, 'default' => '#fff', 'selectors' => [ '{{WRAPPER}} .eael-img-accordion .overlay p' => 'color: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'eael_accordion_content_typography', 'selector' => '{{WRAPPER}} .eael-img-accordion .overlay p', ] ); $this->end_controls_section(); $this->start_controls_section( 'eael_wd_liquid_glass_effect_section', [ 'label' => esc_html__( 'Liquid Glass Effects', 'essential-addons-for-elementor-lite' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'eael_wd_liquid_glass_effect_switch' => 'yes' ] ] ); // Liquid Glass Effects $this->eael_liquid_glass_effects(); // Liquid Glass Shadow Effects $this->eael_liquid_glass_shadow_effects(); $this->end_controls_section(); $this->eael_acf_extra_data_controls_style(); } /** * Controller Summary of eael_liquid_glass_effects */ public function eael_pro_lock_icon() { if ( !apply_filters('eael/pro_enabled', false ) ) { $html = ''; return $html; } return; } public function eael_teaser_template($texts) { $html = '
' . $texts['messages'] . '
' . __('Upgrade to EA PRO', 'essential-addons-for-elementor-lite') . '
'; return $html; } protected function eael_liquid_glass_effects() { $this->add_control( 'eael_wd_liquid_glass_effect_notice', [ 'type' => Controls_Manager::ALERT, 'alert_type' => 'info', 'content' => esc_html__( 'Liquid glass effect is only visible when a semi-transparent background color is applied.', 'essential-addons-for-elementor-lite' ) . '' . esc_html__( 'Learn More', 'essential-addons-for-elementor-lite' ) . '', 'condition' => [ 'eael_wd_liquid_glass_effect_switch' => 'yes', ] ] ); $eael_liquid_glass_effect = apply_filters( 'eael_liquid_glass_effect_filter', [ 'styles' => [ 'effect1' => esc_html__( 'Heavy Frost', 'essential-addons-for-elementor-lite' ), 'effect2' => esc_html__( 'Soft Mist', 'essential-addons-for-elementor-lite' ), 'effect4' => esc_html__( 'Light Frost', 'essential-addons-for-elementor-lite' ), 'effect5' => esc_html__( 'Grain Frost', 'essential-addons-for-elementor-lite' ), 'effect6' => esc_html__( 'Fine Frost', 'essential-addons-for-elementor-lite' ), ], ] ); $this->add_control( 'eael_wd_liquid_glass_effect', [ 'label' => esc_html__( 'Liquid Glass Presets', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::CHOOSE, 'label_block' => true, 'options' => [ 'effect1' => [ 'title' => esc_html( $eael_liquid_glass_effect['styles']['effect1'] ), 'text' => esc_html( $eael_liquid_glass_effect['styles']['effect1'] ), ], 'effect2' => [ 'title' => esc_html( $eael_liquid_glass_effect['styles']['effect2'] ), 'text' => esc_html( $eael_liquid_glass_effect['styles']['effect2'] ), ], 'effect4' => [ 'title' => esc_html( $eael_liquid_glass_effect['styles']['effect4'] ), 'text' => esc_html( $eael_liquid_glass_effect['styles']['effect4'] ) . $this->eael_pro_lock_icon(), ], 'effect5' => [ 'title' => esc_html( $eael_liquid_glass_effect['styles']['effect5'] ), 'text' => esc_html( $eael_liquid_glass_effect['styles']['effect5'] ) . $this->eael_pro_lock_icon(), ], 'effect6' => [ 'title' => esc_html( $eael_liquid_glass_effect['styles']['effect6'] ), 'text' => esc_html( $eael_liquid_glass_effect['styles']['effect6'] ) . $this->eael_pro_lock_icon(), ], ], 'prefix_class' => 'eael_wd_liquid_glass-', 'condition' => [ 'eael_wd_liquid_glass_effect_switch' => 'yes', ], 'default' => 'effect1', 'multiline' => true, ] ); if ( !apply_filters('eael/pro_enabled', false ) ) { $this->add_control( 'eael_wd_liquid_glass_effect_pro_alert', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => $this->eael_teaser_template( [ 'messages' => __( "To use this Liquid glass preset, Upgrade to Essential Addons Pro", 'essential-addons-for-elementor-lite' ), ] ), 'condition' => [ 'eael_wd_liquid_glass_effect_switch' => 'yes', 'eael_wd_liquid_glass_effect' => ['effect4', 'effect5', 'effect6'], ] ] ); } else { $this->add_control( 'eael_wd_liquid_glass_effect_settings', [ 'label' => esc_html__( 'Liquid Glass Settings', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'eael_wd_liquid_glass_effect_switch' => 'yes', ] ] ); } // Background Color Controls $this->eael_wd_liquid_glass_effect_bg_color_effect( $this, 'effect1', '#FFFFFF1F', '.eael-img-accordion .overlay-active .overlay' ); $this->eael_wd_liquid_glass_effect_bg_color_effect( $this, 'effect2', '#FFFFFF1F', '.eael-img-accordion .overlay-active .overlay' ); do_action( 'eael_wd_liquid_glass_effect_bg_color_effect4', $this, 'effect4', '#FFFFFF1F', '.eael-img-accordion .overlay-active .overlay' ); do_action( 'eael_wd_liquid_glass_effect_bg_color_effect5', $this, 'effect5', '#FFFFFF1F', '.eael-img-accordion .overlay-active .overlay' ); do_action( 'eael_wd_liquid_glass_effect_bg_color_effect6', $this, 'effect6', '#FFFFFF1F', '.eael-img-accordion .overlay-active .overlay' ); // Backdrop Filter Controls $this->eael_wd_liquid_glass_effect_backdrop_filter_effect( $this, 'effect1', '24', '.eael-img-accordion .overlay-active .overlay' ); $this->eael_wd_liquid_glass_effect_backdrop_filter_effect( $this, 'effect2', '20', '.eael-img-accordion .overlay-active .overlay' ); // Brightness Effect Controls $this->add_control( 'eael_wd_liquid_glass_effect_brightness_effect2', [ 'label' => esc_html__( 'Brightness', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 5, 'step' => .1, ], ], 'default' => [ 'size' => 1, ], 'selectors' => [ '{{WRAPPER}}.eael_wd_liquid_glass-effect2 .eael-img-accordion .overlay-active .overlay' => 'backdrop-filter: blur({{eael_wd_liquid_glass_effect_backdrop_filter_effect2.SIZE}}px) brightness({{SIZE}});', ], 'condition' => [ 'eael_wd_liquid_glass_effect_switch' => 'yes', 'eael_wd_liquid_glass_effect' => 'effect2', ] ] ); do_action( 'eael_wd_liquid_glass_effect_backdrop_filter_effect4', $this, 'effect4', '', '.eael-img-accordion .overlay-active .overlay' ); do_action( 'eael_wd_liquid_glass_effect_backdrop_filter_effect5', $this, 'effect5', '', '.eael-img-accordion .overlay-active .overlay' ); do_action( 'eael_wd_liquid_glass_effect_backdrop_filter_effect6', $this, 'effect6', '', '.eael-img-accordion .overlay-active .overlay' ); // Noise Distortion Settings (Pro) do_action( 'eael_wd_liquid_glass_effect_noise_action', $this ); } /** * Summary of eael_liquid_glass_shadow_effects */ protected function eael_liquid_glass_shadow_effects() { if ( !apply_filters('eael/pro_enabled', false ) ) { $this->add_control( 'eael_wd_liquid_glass_shadow_effect', [ 'label' => esc_html__( 'Shadow Effects', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::SELECT2, 'default' => 'effect1', 'separator' => 'before', 'options' => [ '' => esc_html__( 'None', 'essential-addons-for-elementor-lite' ), 'effect1' => esc_html__( 'Effect 1', 'essential-addons-for-elementor-lite' ), 'effect2' => esc_html__( 'Effect 2', 'essential-addons-for-elementor-lite' ), 'effect3' => esc_html__( 'Effect 3', 'essential-addons-for-elementor-lite' ), 'effect4' => esc_html__( 'Effect 4', 'essential-addons-for-elementor-lite' ), ], 'prefix_class' => 'eael_wd_liquid_glass_shadow-', 'condition' => [ 'eael_wd_liquid_glass_effect_switch' => 'yes', 'eael_wd_liquid_glass_effect' => ['effect1', 'effect2'], ] ] ); $this->add_control( 'eael_wd_liquid_glass_shadow_inner', [ 'label' => esc_html__( 'Shadow Settings', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'eael_wd_liquid_glass_effect_switch' => 'yes', 'eael_wd_liquid_glass_shadow_effect!' => '', 'eael_wd_liquid_glass_effect' => ['effect1', 'effect2'], ], ] ); // Liquid Glass Border Effects $this->eael_wd_liquid_glass_border_effect( $this, 'effect1', '#FFFFFF1F', '.eael-img-accordion .overlay-active .overlay', ['effect1', 'effect2'] ); $this->eael_wd_liquid_glass_border_effect( $this, 'effect2', '#FFFFFF1F', '.eael-img-accordion .overlay-active .overlay', ['effect1', 'effect2'] ); $this->eael_wd_liquid_glass_border_effect( $this, 'effect3', '#FFFFFF1F', '.eael-img-accordion .overlay-active .overlay', ['effect1', 'effect2'] ); $this->eael_wd_liquid_glass_border_effect( $this, 'effect4', '#FFFFFF1F', '.eael-img-accordion .overlay-active .overlay', ['effect1', 'effect2'] ); // Liquid Glass Border Radius Effects $this->eael_wd_liquid_glass_border_radius_effect($this, 'effect1', '.eael-img-accordion .overlay-active .overlay', [ 'top' => 24, 'right' => 24, 'bottom' => 24, 'left' => 24, 'unit' => 'px', 'isLinked' => true, ], ['effect1', 'effect2'] ); $this->eael_wd_liquid_glass_border_radius_effect($this, 'effect2', '.eael-img-accordion .overlay-active .overlay', [ 'top' => 16, 'right' => 16, 'bottom' => 16, 'left' => 16, 'unit' => 'px', 'isLinked' => true, ], ['effect1', 'effect2'] ); $this->eael_wd_liquid_glass_border_radius_effect($this, 'effect3', '.eael-img-accordion .overlay-active .overlay', [ 'top' => 8, 'bottom' => 8, 'left' => 8, 'right' => 8, 'unit' => 'px', 'isLinked' => true, ], ['effect1', 'effect2'] ); $this->eael_wd_liquid_glass_border_radius_effect($this, 'effect4', '.eael-img-accordion .overlay-active .overlay', [ 'top' => 24, 'bottom' => 24, 'left' => 24, 'right' => 24, 'unit' => 'px', 'isLinked' => true, ], ['effect1', 'effect2'] ); // Liquid Glass Shadow Effects $this->eael_wd_liquid_glass_shadow_effect($this, 'effect1', '.eael-img-accordion .overlay-active .overlay', [ 'color' => 'rgba(0,0,0,0.78)', 'horizontal' => 0, 'vertical' => 19, 'blur' => 26, 'spread' => 1, ], ['effect1', 'effect2'] ); $this->eael_wd_liquid_glass_shadow_effect($this, 'effect2', '.eael-img-accordion .overlay-active .overlay', [ 'color' => '#383C65', 'horizontal' => 0, 'vertical' => 0, 'blur' => 33, 'spread' => -2, ], ['effect1', 'effect2'] ); $this->eael_wd_liquid_glass_shadow_effect($this, 'effect3', '.eael-img-accordion .overlay-active .overlay', [ 'color' => 'rgba(255, 255, 255, 0.4)', 'horizontal' => 1, 'vertical' => 1, 'blur' => 10, 'spread' => 5, ], ['effect1', 'effect2'] ); $this->eael_wd_liquid_glass_shadow_effect($this, 'effect4', '.eael-img-accordion .overlay-active .overlay', [ 'color' => '#00000040', 'horizontal' => 0, 'vertical' => 9, 'blur' => 21, 'spread' => 0, ], ['effect1', 'effect2'] ); } else { $this->add_control( 'eael_wd_liquid_glass_shadow_effect', [ 'label' => esc_html__( 'Shadow Effects', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::SELECT2, 'default' => 'effect1', 'separator' => 'before', 'options' => [ '' => esc_html__( 'None', 'essential-addons-for-elementor-lite' ), 'effect1' => esc_html__( 'Effect 1', 'essential-addons-for-elementor-lite' ), 'effect2' => esc_html__( 'Effect 2', 'essential-addons-for-elementor-lite' ), 'effect3' => esc_html__( 'Effect 3', 'essential-addons-for-elementor-lite' ), 'effect4' => esc_html__( 'Effect 4', 'essential-addons-for-elementor-lite' ), ], 'prefix_class' => 'eael_wd_liquid_glass_shadow-', 'condition' => [ 'eael_wd_liquid_glass_effect_switch' => 'yes', 'eael_wd_liquid_glass_effect' => ['effect1', 'effect2', 'effect4', 'effect5', 'effect6'], ] ] ); $this->add_control( 'eael_wd_liquid_glass_shadow_inner', [ 'label' => esc_html__( 'Shadow Settings', 'essential-addons-for-elementor-lite' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'eael_wd_liquid_glass_effect_switch' => 'yes', 'eael_wd_liquid_glass_shadow_effect!' => '', 'eael_wd_liquid_glass_effect' => ['effect1', 'effect2', 'effect4', 'effect5', 'effect6'], ], ] ); // Liquid Glass Border Effects $this->eael_wd_liquid_glass_border_effect( $this, 'effect1', '#FFFFFF1F', '.eael-img-accordion .overlay-active .overlay', ['effect1', 'effect2', 'effect4', 'effect5', 'effect6'] ); $this->eael_wd_liquid_glass_border_effect( $this, 'effect2', '#FFFFFF1F', '.eael-img-accordion .overlay-active .overlay', ['effect1', 'effect2', 'effect4', 'effect5', 'effect6'] ); $this->eael_wd_liquid_glass_border_effect( $this, 'effect3', '#FFFFFF1F', '.eael-img-accordion .overlay-active .overlay', ['effect1', 'effect2', 'effect4', 'effect5', 'effect6'] ); $this->eael_wd_liquid_glass_border_effect( $this, 'effect4', '#FFFFFF1F', '.eael-img-accordion .overlay-active .overlay', ['effect1', 'effect2', 'effect4', 'effect5', 'effect6'] ); // Liquid Glass Border Radius Effects $this->eael_wd_liquid_glass_border_radius_effect($this, 'effect1', '.eael-img-accordion .overlay-active .overlay', [ 'top' => 24, 'right' => 24, 'bottom' => 24, 'left' => 24, 'unit' => 'px', 'isLinked' => true, ], ['effect1', 'effect2', 'effect4', 'effect5', 'effect6'] ); $this->eael_wd_liquid_glass_border_radius_effect($this, 'effect2', '.eael-img-accordion .overlay-active .overlay', [ 'top' => 16, 'right' => 16, 'bottom' => 16, 'left' => 16, 'unit' => 'px', 'isLinked' => true, ], ['effect1', 'effect2', 'effect4', 'effect5', 'effect6'] ); $this->eael_wd_liquid_glass_border_radius_effect($this, 'effect3', '.eael-img-accordion .overlay-active .overlay', [ 'top' => 8, 'bottom' => 8, 'left' => 8, 'right' => 8, 'unit' => 'px', 'isLinked' => true, ], ['effect1', 'effect2', 'effect4', 'effect5', 'effect6'] ); $this->eael_wd_liquid_glass_border_radius_effect($this, 'effect4', '.eael-img-accordion .overlay-active .overlay', [ 'top' => 24, 'bottom' => 24, 'left' => 24, 'right' => 24, 'unit' => 'px', 'isLinked' => true, ], ['effect1', 'effect2', 'effect4', 'effect5', 'effect6'] ); // Liquid Glass Shadow Effects $this->eael_wd_liquid_glass_shadow_effect($this, 'effect1', '.eael-img-accordion .overlay-active .overlay', [ 'color' => 'rgba(0,0,0,0.78)', 'horizontal' => 0, 'vertical' => 19, 'blur' => 26, 'spread' => 1, ], ['effect1', 'effect2', 'effect4', 'effect5', 'effect6'] ); $this->eael_wd_liquid_glass_shadow_effect($this, 'effect2', '.eael-img-accordion .overlay-active .overlay', [ 'color' => '#383C65', 'horizontal' => 0, 'vertical' => 0, 'blur' => 33, 'spread' => -2, ], ['effect1', 'effect2', 'effect4', 'effect5', 'effect6'] ); $this->eael_wd_liquid_glass_shadow_effect($this, 'effect3', '.eael-img-accordion .overlay-active .overlay', [ 'color' => 'rgba(255, 255, 255, 0.4)', 'horizontal' => 1, 'vertical' => 1, 'blur' => 10, 'spread' => 5, ], ['effect1', 'effect2', 'effect4', 'effect5', 'effect6'] ); $this->eael_wd_liquid_glass_shadow_effect($this, 'effect4', '.eael-img-accordion .overlay-active .overlay', [ 'color' => '#00000040', 'horizontal' => 0, 'vertical' => 9, 'blur' => 21, 'spread' => 0, ], ['effect1', 'effect2', 'effect4', 'effect5', 'effect6'] ); } } protected function render() { $settings = $this->get_settings_for_display(); // Custom mode returns the manual repeater unchanged; ACF mode swaps in the mapped rows. $settings['eael_img_accordions'] = $this->get_image_accordion_items( $settings ); $horizontal_alignment = 'eael-img-accordion-horizontal-align-' . $settings[ 'eael_img_accordion_content_horizontal_align' ]; $vertical_alignment = 'eael-img-accordion-vertical-align-' . $settings[ 'eael_img_accordion_content_vertical_align' ]; $this->add_render_attribute( 'eael-image-accordion', [ 'class' => [ 'eael-img-accordion', $settings[ 'eael_img_accordion_direction' ], $horizontal_alignment, $vertical_alignment, ], 'id' => 'eael-img-accordion-' . $this->get_id(), ] ); $this->add_render_attribute( 'eael-image-accordion', 'data-img-accordion-id', esc_attr( $this->get_id() ) ); $this->add_render_attribute( 'eael-image-accordion', 'data-img-accordion-type', $settings[ 'eael_img_accordion_type' ] ); if ( empty( $settings[ 'eael_img_accordions' ] ) ) { return; } ?>
print_render_attribute_string( 'eael-image-accordion' ); ?>> $img_accordion ): ?> add_render_attribute( 'eael-image-accordion-item-wrapper-' . $key, [ 'class' => 'eael-image-accordion-hover eael-image-accordion-item', 'style' => "background-image: url(" . esc_url( $img_accordion['eael_accordion_bg']['url'] ) . ");" . $activeCSS, ] ); if ( $active === 'yes' ) { $this->add_render_attribute( 'eael-image-accordion-item-wrapper-' . $key, 'class', 'overlay-active' ); } ?>
print_render_attribute_string( 'eael-image-accordion-item-wrapper-' . $key ); ?> tabindex="0">
add_link_attributes( 'eael-image-accordion-link-' . $key, $img_accordion['eael_accordion_title_link'] ); $title_linked = true; echo "print_render_attribute_string( 'eael-image-accordion-link-' . $key ); echo ">"; } if ( !empty( $img_accordion[ 'eael_accordion_tittle' ] ) ): printf( '<%1$s class="img-accordion-title">%2$s', esc_html( Helper::eael_validate_html_tag( $settings[ 'title_tag' ] ) ), wp_kses( $img_accordion[ 'eael_accordion_tittle' ], Helper::eael_allowed_tags() ) ); endif; echo $title_linked ? '' : ''; if ( !empty( $img_accordion[ 'eael_accordion_content' ] ) ): ?>

parse_text_editor( wp_kses( $img_accordion[ 'eael_accordion_content' ], Helper::eael_allowed_tags() ) ); ?>

#eael-img-accordion-' . esc_html( $this->get_id() ) . ' .eael-image-accordion-hover:hover { flex: 3 1 0% !important; } #eael-img-accordion-' . esc_html( $this->get_id() ) . ' .eael-image-accordion-hover:hover:hover .overlay-inner * { opacity: 1; visibility: visible; transform: none; transition: all .3s .3s; } '; } } } }