register_presets_control( 'Buttons', $this ); // Content Tab. $this->register_buttons_content_controls(); // Style Tab. $this->register_styling_style_controls(); $this->register_color_content_controls(); $this->register_spacing_content_controls(); $this->register_helpful_information(); } /** * Register Buttons General Controls. * * @since 0.0.1 * @access protected */ protected function register_buttons_content_controls() { $this->start_controls_section( 'section_buttons', array( 'label' => __( 'Button', 'uael' ), ) ); $repeater = new Repeater(); $repeater->start_controls_tabs( 'button_repeater' ); $repeater->start_controls_tab( 'button_general', array( 'label' => __( 'General', 'uael' ), ) ); $repeater->add_control( 'text', array( 'label' => __( 'Text', 'uael' ), 'type' => Controls_Manager::TEXT, 'default' => __( 'Click Me', 'uael' ), 'placeholder' => __( 'Click Me', 'uael' ), 'dynamic' => array( 'active' => true, ), ) ); $repeater->add_control( 'link', array( 'label' => __( 'Link', 'uael' ), 'type' => Controls_Manager::URL, 'default' => array( 'url' => '#', 'is_external' => '', ), 'dynamic' => array( 'active' => true, ), 'selector' => '', ) ); if ( UAEL_Helper::is_elementor_updated() ) { $repeater->add_control( 'new_icon', array( 'label' => __( 'Icon', 'uael' ), 'type' => Controls_Manager::ICONS, 'fa4compatibility' => 'icon', 'label_block' => true, ) ); } else { $repeater->add_control( 'icon', array( 'label' => __( 'Icon', 'uael' ), 'type' => Controls_Manager::ICON, 'label_block' => true, ) ); } $repeater->add_control( 'icon_align', array( 'label' => __( 'Icon Position', 'uael' ), 'type' => Controls_Manager::SELECT, 'default' => 'left', 'options' => array( 'left' => __( 'Before', 'uael' ), 'right' => __( 'After', 'uael' ), ), 'conditions' => array( 'relation' => 'or', 'terms' => array( array( 'name' => UAEL_Helper::get_new_icon_name( 'icon' ), 'operator' => '!=', 'value' => '', ), ), ), ) ); $repeater->add_control( 'icon_indent', array( 'label' => __( 'Icon Spacing', 'uael' ), 'type' => Controls_Manager::SLIDER, 'range' => array( 'px' => array( 'max' => 50, ), ), 'conditions' => array( 'relation' => 'or', 'terms' => array( array( 'name' => UAEL_Helper::get_new_icon_name( 'icon' ), 'operator' => '!=', 'value' => '', ), ), ), 'selectors' => array( '{{WRAPPER}} {{CURRENT_ITEM}} .elementor-align-icon-right' => 'margin-left: {{SIZE}}{{UNIT}};', '{{WRAPPER}} {{CURRENT_ITEM}} .elementor-align-icon-left' => 'margin-right: {{SIZE}}{{UNIT}};', ), ) ); $repeater->add_control( 'icon_size', array( 'label' => __( 'Icon size', 'uael' ), 'type' => Controls_Manager::SLIDER, 'size_units' => array( 'px', '%', 'em' ), 'range' => array( 'px' => array( 'min' => 0, 'max' => 100, 'step' => 1, ), '%' => array( 'min' => 0, 'max' => 100, ), 'em' => array( 'min' => 0, 'max' => 100, ), ), 'default' => array( 'unit' => 'em', 'size' => 1, ), 'conditions' => array( 'relation' => 'or', 'terms' => array( array( 'name' => UAEL_Helper::get_new_icon_name( 'icon' ), 'operator' => '!=', 'value' => '', ), ), ), 'selectors' => array( '{{WRAPPER}} {{CURRENT_ITEM}} .elementor-button .elementor-button-icon i' => 'font-size: {{SIZE}}{{UNIT}};', '{{WRAPPER}} {{CURRENT_ITEM}} .elementor-button .elementor-button-icon svg' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};', ), ) ); $repeater->add_control( 'css_id', array( 'label' => __( 'CSS ID', 'uael' ), 'type' => Controls_Manager::TEXT, 'default' => '', 'label_block' => true, 'title' => __( 'Add your custom id WITHOUT the # key.', 'uael' ), ) ); $repeater->add_control( 'css_classes', array( 'label' => __( 'CSS Classes', 'uael' ), 'type' => Controls_Manager::TEXT, 'default' => '', 'label_block' => true, 'title' => __( 'Add space separated custom classes WITHOUT the dot.', 'uael' ), ) ); $repeater->end_controls_tab(); $repeater->start_controls_tab( 'button_design', array( 'label' => __( 'Design', 'uael' ), ) ); $repeater->add_control( 'html_message', array( 'type' => Controls_Manager::RAW_HTML, 'raw' => __( 'Set custom styles that will only affect this specific button.', 'uael' ), 'content_classes' => 'elementor-control-field-description', ) ); $repeater->add_control( 'color_options', array( 'label' => __( 'Normal', 'uael' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ) ); $repeater->add_control( 'btn_text_color', array( 'label' => __( 'Text Color', 'uael' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} {{CURRENT_ITEM}} .elementor-button' => 'color: {{VALUE}};', ), ) ); $repeater->add_control( 'btn_background_color', array( 'label' => __( 'Background Color', 'uael' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} {{CURRENT_ITEM}} .elementor-button' => 'background-color: {{VALUE}};', ), ) ); $repeater->add_group_control( Group_Control_Border::get_type(), array( 'name' => 'btn_border', 'label' => __( 'Border', 'uael' ), 'selector' => '{{WRAPPER}} {{CURRENT_ITEM}} .elementor-button', 'separator' => 'before', ) ); $repeater->add_control( 'btn_border_radius', array( 'label' => __( 'Border Radius', 'uael' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} {{CURRENT_ITEM}} .elementor-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ) ); $repeater->add_control( 'hover_options', array( 'label' => __( 'Hover', 'uael' ), 'type' => Controls_Manager::HEADING, ) ); $repeater->add_control( 'btn_text_hover_color', array( 'label' => __( 'Text Color', 'uael' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} {{CURRENT_ITEM}} .elementor-button:hover' => 'color: {{VALUE}};', ), ) ); $repeater->add_control( 'btn_background_hover_color', array( 'label' => __( 'Background Color', 'uael' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} {{CURRENT_ITEM}} .elementor-button:hover' => 'background-color: {{VALUE}};', ), ) ); $repeater->add_control( 'btn_border_hover_color', array( 'label' => __( 'Border Hover Color', 'uael' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} {{CURRENT_ITEM}} .elementor-button:hover' => 'border-color: {{VALUE}};', ), ) ); $repeater->add_group_control( Group_Control_Typography::get_type(), array( 'name' => 'btn_typography', 'global' => array( 'default' => Global_Typography::TYPOGRAPHY_ACCENT, ), 'selector' => '{{WRAPPER}} {{CURRENT_ITEM}} a.elementor-button .elementor-button-text', ) ); $repeater->end_controls_tab(); $repeater->end_controls_tabs(); $this->add_control( 'buttons', array( 'label' => __( 'Buttons', 'uael' ), 'type' => Controls_Manager::REPEATER, 'show_label' => true, 'fields' => $repeater->get_controls(), 'title_field' => '{{ text }}', 'default' => array( array( 'text' => __( 'Enroll Today', 'uael' ), ), array( 'text' => __( 'Learn More', 'uael' ), ), ), ) ); $this->end_controls_section(); } /** * Register Buttons Spacing Controls. * * @since 0.0.1 * @access protected */ protected function register_spacing_content_controls() { $this->start_controls_section( 'general_spacing', array( 'label' => __( 'Spacing', 'uael' ), 'tab' => Controls_Manager::TAB_STYLE, ) ); $this->add_responsive_control( 'gap', array( 'label' => __( 'Space between buttons', 'uael' ), 'type' => Controls_Manager::SLIDER, 'size_units' => array( 'px', 'em', 'rem' ), 'range' => array( 'px' => array( 'min' => 1, 'max' => 1000, ), ), 'default' => array( 'size' => 10, 'unit' => 'px', ), 'selectors' => array( '{{WRAPPER}} .uael-dual-button-wrap .uael-button-wrapper' => 'margin-right: calc( {{SIZE}}{{UNIT}} / 2) ; margin-left: calc( {{SIZE}}{{UNIT}} / 2);', '{{WRAPPER}}.uael-button-stack-none .uael-dual-button-wrap' => 'margin-right: calc( -{{SIZE}}{{UNIT}} / 2) ; margin-left: calc( -{{SIZE}}{{UNIT}} / 2);', '(desktop){{WRAPPER}}.uael-button-stack-desktop .uael-dual-button-wrap .uael-button-wrapper' => 'margin-bottom: calc( {{SIZE}}{{UNIT}} / 2 ); margin-top: calc( {{SIZE}}{{UNIT}} / 2 ); margin-right: 0; margin-left: 0;', '(desktop){{WRAPPER}}.uael-button-stack-desktop .uael-dual-button-wrap .uael-button-wrapper:last-child' => 'margin-bottom: 0;', '(desktop){{WRAPPER}}.uael-button-stack-desktop .uael-dual-button-wrap .uael-button-wrapper:first-child' => 'margin-top: 0;', '(tablet){{WRAPPER}}.uael-button-stack-tablet .uael-dual-button-wrap .uael-button-wrapper' => 'margin-bottom: calc( {{SIZE}}{{UNIT}} / 2 ); margin-top: calc( {{SIZE}}{{UNIT}} / 2 ); margin-right: 0; margin-left: 0;', '(tablet){{WRAPPER}}.uael-button-stack-tablet .uael-dual-button-wrap .uael-button-wrapper:last-child' => 'margin-bottom: 0;', '(tablet){{WRAPPER}}.uael-button-stack-tablet .uael-dual-button-wrap .uael-button-wrapper:first-child' => 'margin-top: 0;', '(mobile){{WRAPPER}}.uael-button-stack-mobile .uael-dual-button-wrap .uael-button-wrapper' => 'margin-bottom: calc( {{SIZE}}{{UNIT}} / 2 ); margin-top: calc( {{SIZE}}{{UNIT}} / 2 ); margin-right: 0; margin-left: 0;', '(mobile){{WRAPPER}}.uael-button-stack-mobile .uael-dual-button-wrap .uael-button-wrapper:last-child' => 'margin-bottom: 0;', '(mobile){{WRAPPER}}.uael-button-stack-mobile .uael-dual-button-wrap .uael-button-wrapper:first-child' => 'margin-top: 0;', ), ) ); $this->add_control( 'stack_on', array( 'label' => __( 'Stack on', 'uael' ), 'description' => __( 'Choose on what breakpoint where the buttons will stack.', 'uael' ), 'type' => Controls_Manager::SELECT, 'default' => 'none', 'options' => array( 'none' => __( 'None', 'uael' ), 'desktop' => __( 'Desktop', 'uael' ), 'tablet' => __( 'Tablet', 'uael' ), 'mobile' => __( 'Mobile', 'uael' ), ), 'prefix_class' => 'uael-button-stack-', ) ); $this->end_controls_section(); } /** * Helpful Information. * * @since 1.1.0 * @access protected */ protected function register_helpful_information() { $link = UAEL_DOMAIN . 'docs/multi-buttons-widget/?utm_source=uael-pro-dashboard&utm_medium=uael-editor-screen&utm_campaign=uael-pro-plugin'; if ( parent::is_internal_links() ) { $this->start_controls_section( 'section_helpful_info', array( 'label' => __( 'Helpful Information', 'uael' ), ) ); $this->add_control( 'help_doc_1', array( 'type' => Controls_Manager::RAW_HTML, /* translators: %1$s doc link */ 'raw' => sprintf( __( '%1$s Getting started article » %2$s', 'uael' ), '', '' ), 'content_classes' => 'uael-editor-doc', ) ); $this->add_control( 'help_doc_2', array( 'type' => Controls_Manager::RAW_HTML, /* translators: %1$s doc link */ 'raw' => sprintf( __( '%1$s Getting started video » %2$s', 'uael' ), '', '' ), 'content_classes' => 'uael-editor-doc', ) ); $this->end_controls_section(); } } /** * Register Buttons Colors Controls. * * @since 0.0.1 * @access protected */ protected function register_color_content_controls() { $this->start_controls_section( 'general_colors', array( 'label' => __( 'Styling', 'uael' ), 'tab' => Controls_Manager::TAB_STYLE, ) ); $this->start_controls_tabs( '_button_style' ); $this->start_controls_tab( '_button_normal', array( 'label' => __( 'Normal', 'uael' ), ) ); $this->add_control( 'all_text_color', array( 'label' => __( 'Text Color', 'uael' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => array( '{{WRAPPER}} a.elementor-button' => 'color: {{VALUE}};', '{{WRAPPER}} a.elementor-button svg, {{WRAPPER}} .elementor-button svg' => 'fill: {{VALUE}};', ), ) ); $this->add_control( 'all_background_color', array( 'label' => __( 'Background Color', 'uael' ), 'type' => Controls_Manager::COLOR, 'global' => array( 'default' => Global_Colors::COLOR_ACCENT, ), 'selectors' => array( '{{WRAPPER}} a.elementor-button' => 'background-color: {{VALUE}};', ), ) ); $this->add_group_control( Group_Control_Border::get_type(), array( 'name' => 'all_border', 'label' => __( 'Border', 'uael' ), 'selector' => '{{WRAPPER}} .elementor-button', ) ); $this->add_control( 'all_border_radius', array( 'label' => __( 'Border Radius', 'uael' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} .elementor-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ) ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), array( 'name' => 'all_button_box_shadow', 'selector' => '{{WRAPPER}} .elementor-button', ) ); $this->end_controls_tab(); $this->start_controls_tab( 'all_button_hover', array( 'label' => __( 'Hover', 'uael' ), ) ); $this->add_control( 'all_hover_color', array( 'label' => __( 'Text Color', 'uael' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} a.elementor-button:hover' => 'color: {{VALUE}};', ), ) ); $this->add_control( 'all_background_hover_color', array( 'label' => __( 'Background Color', 'uael' ), 'type' => Controls_Manager::COLOR, 'global' => array( 'default' => Global_Colors::COLOR_ACCENT, ), 'selectors' => array( '{{WRAPPER}} a.elementor-button:hover' => 'background-color: {{VALUE}};', ), ) ); $this->add_control( 'all_border_hover_color', array( 'label' => __( 'Border Hover Color', 'uael' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} a.elementor-button:hover' => 'border-color: {{VALUE}};', ), ) ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), array( 'name' => 'all_button_hover_box_shadow', 'selector' => '{{WRAPPER}} .elementor-button:hover', 'separator' => 'after', ) ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); } /** * Register Buttons Styling Controls. * * @since 0.0.1 * @access protected */ protected function register_styling_style_controls() { $this->start_controls_section( 'section_styling', array( 'label' => __( 'Design', 'uael' ), 'tab' => Controls_Manager::TAB_STYLE, ) ); $this->add_control( 'size', array( 'label' => __( 'Size', 'uael' ), 'type' => Controls_Manager::SELECT, 'default' => 'sm', 'label_block' => true, 'options' => self::get_button_sizes(), ) ); $this->add_responsive_control( 'padding', array( 'label' => __( 'Padding', 'uael' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', 'em', '%' ), 'selectors' => array( '{{WRAPPER}} .elementor-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ) ); $this->add_group_control( Group_Control_Typography::get_type(), array( 'name' => 'all_typography', 'global' => array( 'default' => Global_Typography::TYPOGRAPHY_ACCENT, ), 'selector' => '{{WRAPPER}} a.elementor-button,{{WRAPPER}} a.elementor-button svg', ) ); $this->add_responsive_control( 'align', array( 'label' => __( 'Alignment', 'uael' ), 'type' => Controls_Manager::CHOOSE, 'options' => array( 'left' => array( 'title' => __( 'Left', 'uael' ), 'icon' => 'fa fa-align-left', ), 'center' => array( 'title' => __( 'Center', 'uael' ), 'icon' => 'fa fa-align-center', ), 'right' => array( 'title' => __( 'Right', 'uael' ), 'icon' => 'fa fa-align-right', ), 'justify' => array( 'title' => __( 'Justify', 'uael' ), 'icon' => 'fa fa-align-justify', ), ), 'default' => 'center', 'toggle' => false, 'prefix_class' => 'uael%s-button-halign-', ) ); $this->add_control( 'hover_animation', array( 'label' => __( 'Hover Animation', 'uael' ), 'type' => Controls_Manager::HOVER_ANIMATION, ) ); $this->end_controls_section(); } /** * Render button widget text. * * @param array $button The item settings array. * @param int $i The index id. * @since 0.0.1 * @access protected */ protected function render_button_text( $button, $i ) { $settings = $this->get_settings_for_display(); $this->add_render_attribute( 'content-wrapper', 'class', 'elementor-button-content-wrapper' ); $this->add_render_attribute( 'content-wrapper', 'class', 'uael-buttons-icon-' . $button['icon_align'] ); $this->add_render_attribute( 'icon-align_' . $i, 'class', 'elementor-align-icon-' . $button['icon_align'] ); $this->add_render_attribute( 'icon-align_' . $i, 'class', 'elementor-button-icon' ); $this->add_render_attribute( 'btn-text_' . $i, 'class', 'elementor-button-text' ); $this->add_render_attribute( 'btn-text_' . $i, 'class', 'elementor-inline-editing' ); $text_key = $this->get_repeater_setting_key( 'text', 'buttons', $i ); $this->add_inline_editing_attributes( $text_key, 'none' ); ?> get_render_attribute_string( 'content-wrapper' ) ); ?>> get_render_attribute_string( 'icon-align_' . esc_attr( $i ) ) ); ?>> 'true' ) ); } elseif ( ! empty( $button['icon'] ) ) { ?> get_render_attribute_string( 'icon-align_' . esc_attr( $i ) ) ); ?>> get_render_attribute_string( 'btn-text_' . esc_attr( $i ) ) ); ?> data-elementor-setting-key="" data-elementor-inline-editing-toolbar="none"> get_settings_for_display(); $node_id = $this->get_id(); $count = count( $settings['buttons'] ); ob_start(); ?>