start_controls_section( 'kng_collapse_expand_text_section', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Collapse & Expand Text', 'king-addons'), 'tab' => Controls_Manager::TAB_ADVANCED ] ); $element->add_control( 'kng_collapse_expand_text_enable', [ 'label' => esc_html__('Enable Collapse & Expand', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__('Yes', 'king-addons'), 'label_off' => esc_html__('No', 'king-addons'), 'return_value' => 'yes', 'default' => '', 'prefix_class' => 'kng-collapse-expand-', 'frontend_available' => true ] ); $element->add_control( 'kng_collapse_expand_text_height', [ 'label' => esc_html__('Collapsed Height', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 20, 'max' => 500, 'step' => 5, ], ], 'default' => [ 'unit' => 'px', 'size' => 80, ], 'description' => esc_html__('Height to show when collapsed', 'king-addons'), 'frontend_available' => true, 'condition' => [ 'kng_collapse_expand_text_enable' => 'yes' ] ] ); $element->add_control( 'kng_collapse_expand_text_show_more_text', [ 'label' => esc_html__('Show More Text', 'king-addons'), 'type' => Controls_Manager::TEXT, 'default' => esc_html__('Read more', 'king-addons'), 'placeholder' => esc_html__('Read more', 'king-addons'), 'frontend_available' => true, 'condition' => [ 'kng_collapse_expand_text_enable' => 'yes' ] ] ); $element->add_control( 'kng_collapse_expand_text_show_less_text', [ 'label' => esc_html__('Show Less Text', 'king-addons'), 'type' => Controls_Manager::TEXT, 'default' => esc_html__('Read less', 'king-addons'), 'placeholder' => esc_html__('Read less', 'king-addons'), 'frontend_available' => true, 'condition' => [ 'kng_collapse_expand_text_enable' => 'yes' ] ] ); $element->add_control( 'kng_collapse_expand_text_animation_duration', [ 'label' => esc_html__('Animation Duration', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['ms'], 'range' => [ 'ms' => [ 'min' => 100, 'max' => 2000, 'step' => 50, ], ], 'default' => [ 'unit' => 'ms', 'size' => 300, ], 'frontend_available' => true, 'condition' => [ 'kng_collapse_expand_text_enable' => 'yes' ] ] ); $element->add_control( 'kng_collapse_expand_text_divider_style', [ 'type' => Controls_Manager::DIVIDER, 'condition' => [ 'kng_collapse_expand_text_enable' => 'yes' ] ] ); $element->add_control( 'kng_collapse_expand_text_button_position', [ 'label' => esc_html__('Button Position', 'king-addons'), 'type' => Controls_Manager::SELECT, 'default' => 'right', 'options' => [ 'left' => esc_html__('Left', 'king-addons'), 'center' => esc_html__('Center', 'king-addons'), 'right' => esc_html__('Right', 'king-addons'), ], 'frontend_available' => true, 'condition' => [ 'kng_collapse_expand_text_enable' => 'yes' ] ] ); $element->add_control( 'kng_collapse_expand_text_button_color', [ 'label' => esc_html__('Button Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#007cba', 'selectors' => [ '{{WRAPPER}} .kng-collapse-expand-button' => 'color: {{VALUE}};', ], 'condition' => [ 'kng_collapse_expand_text_enable' => 'yes' ] ] ); $element->add_control( 'kng_collapse_expand_text_button_hover_color', [ 'label' => esc_html__('Button Hover Color', 'king-addons'), 'type' => Controls_Manager::COLOR, 'default' => '#005a87', 'selectors' => [ '{{WRAPPER}} .kng-collapse-expand-button:hover' => 'color: {{VALUE}};', ], 'condition' => [ 'kng_collapse_expand_text_enable' => 'yes' ] ] ); $element->add_control( 'kng_collapse_expand_text_button_font_size', [ 'label' => esc_html__('Button Font Size', 'king-addons'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px', 'em', 'rem'], 'range' => [ 'px' => [ 'min' => 10, 'max' => 50, 'step' => 1, ], 'em' => [ 'min' => 0.5, 'max' => 3, 'step' => 0.1, ], 'rem' => [ 'min' => 0.5, 'max' => 3, 'step' => 0.1, ], ], 'default' => [ 'unit' => 'px', 'size' => 14, ], 'selectors' => [ '{{WRAPPER}} .kng-collapse-expand-button' => 'font-size: {{SIZE}}{{UNIT}};', ], 'condition' => [ 'kng_collapse_expand_text_enable' => 'yes' ] ] ); // $element->add_control( // 'kng_collapse_expand_text_fade_effect', // [ // 'label' => esc_html__('Fade Effect', 'king-addons'), // 'type' => Controls_Manager::SWITCHER, // 'label_on' => esc_html__('Yes', 'king-addons'), // 'label_off' => esc_html__('No', 'king-addons'), // 'return_value' => 'yes', // 'default' => 'yes', // 'description' => esc_html__('Add a fade effect to the collapsed text bottom', 'king-addons'), // 'frontend_available' => true, // 'condition' => [ // 'kng_collapse_expand_text_enable' => 'yes' // ] // ] // ); $element->end_controls_section(); } /** * Render inline CSS for the collapse/expand functionality */ public static function renderCSS(Element_Base $element): void { $settings = $element->get_settings_for_display(); $element_id = $element->get_id(); // Only render CSS if the feature is enabled if (empty($settings['kng_collapse_expand_text_enable']) || 'yes' !== $settings['kng_collapse_expand_text_enable']) { return; } $collapsed_height = intval($settings['kng_collapse_expand_text_height']['size'] ?? 80); $animation_duration = intval($settings['kng_collapse_expand_text_animation_duration']['size'] ?? 300); $button_position = $settings['kng_collapse_expand_text_button_position'] ?? 'right'; $fade_effect = $settings['kng_collapse_expand_text_fade_effect'] ?? 'yes'; $css = sprintf( ''; echo $css; } /** * Add data attributes to elements for JavaScript */ public static function addDataAttributes(Element_Base $element): void { $settings = $element->get_settings_for_display(); // Only add attributes if the feature is enabled if (empty($settings['kng_collapse_expand_text_enable']) || 'yes' !== $settings['kng_collapse_expand_text_enable']) { return; } $collapsed_height = intval($settings['kng_collapse_expand_text_height']['size'] ?? 80); $show_more_text = esc_attr($settings['kng_collapse_expand_text_show_more_text'] ?? 'Read more'); $show_less_text = esc_attr($settings['kng_collapse_expand_text_show_less_text'] ?? 'Read less'); $animation_duration = intval($settings['kng_collapse_expand_text_animation_duration']['size'] ?? 300); $button_position = esc_attr($settings['kng_collapse_expand_text_button_position'] ?? 'right'); $fade_effect = $settings['kng_collapse_expand_text_fade_effect'] ?? 'yes'; // Add data attributes to the element $element->add_render_attribute('_wrapper', [ 'data-kng-collapse-height' => $collapsed_height, 'data-kng-collapse-show-more' => $show_more_text, 'data-kng-collapse-show-less' => $show_less_text, 'data-kng-collapse-duration' => $animation_duration, 'data-kng-collapse-position' => $button_position, 'data-kng-collapse-fade' => $fade_effect, ]); } }