<?php
namespace Essential_Addons_Elementor\Extensions;
use Elementor\Controls_Manager;
use Elementor\Element_Base;
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
class Vertical_Text_Orientation {
/**
* Initialize hooks
*/
public function __construct() {
// add_action( 'elementor/element/common/_section_style/before_section_end', [ $this, 'register_controls' ] );
add_action( 'elementor/frontend/before_render', [ $this, 'before_render' ], 100 );
add_action( 'elementor/element/heading/section_title_style/after_section_end', [ $this, 'register_controls' ] );
add_action( 'elementor/element/text-editor/section_style/after_section_end', [ $this, 'register_controls' ] );
add_action( 'elementor/element/animated-headline/section_style_text/after_section_end', [ $this, 'register_controls' ] );
add_action( 'elementor/element/eael-dual-color-header/eael_section_dch_title_style_settings/after_section_end', [ $this, 'register_controls' ] );
add_action( 'elementor/element/eael-fancy-text/eael_fancy_text_suffix_styles/after_section_end', [ $this, 'register_controls' ] );
}
public function register_controls( $element ) {
$element->start_controls_section(
'eael_vertical_text_orientation_section',
[
'label' => __( '<i class="eaicon-logo"></i> Vertical Text Orientation', 'essential-addons-for-elementor-lite' ),
'tab' => Controls_Manager::TAB_STYLE
]
);
$element->add_control(
'eael_vertical_text_orientation_switch',
[
'label' => __( 'Enable Vertical Text Orientation', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SWITCHER,
'return_value' => 'yes',
]
);
$element->add_control(
'eael_vto_writing_mode',
[
'label' => esc_html__( 'Writing Mode', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SELECT,
'default' => 'vertical-lr',
'options' => [
'vertical-lr' => esc_html__( 'Vertical LR', 'essential-addons-for-elementor-lite' ),
'vertical-rl' => esc_html__( 'Vertical RL', 'essential-addons-for-elementor-lite' ),
],
'selectors' => [
'{{WRAPPER}}.eael_vto-vertical-lr, {{WRAPPER}}.eael_vto-vertical-rl' => 'writing-mode: {{VALUE}};',
],
'prefix_class' => 'eael_vto-',
'condition' => [
'eael_vertical_text_orientation_switch' => 'yes',
],
]
);
$element->add_control(
'eael_vto_writing_mode_flip',
[
'label' => esc_html__( 'Flip', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Yes', 'essential-addons-for-elementor-lite' ),
'label_off' => esc_html__( 'No', 'essential-addons-for-elementor-lite' ),
'return_value' => 'yes',
'selectors_dictionary' => [
'yes' => 'rotate(180deg)',
],
'selectors' => [
'{{WRAPPER}}.eael_vto-vertical-lr .elementor-heading-title,
{{WRAPPER}}.eael_vto-vertical-rl .elementor-heading-title,
{{WRAPPER}}.eael_vto-vertical-lr .elementor-headline,
{{WRAPPER}}.eael_vto-vertical-rl .elementor-headline,
{{WRAPPER}}.eael_vto-vertical-lr .elementor-text-editor p,
{{WRAPPER}}.eael_vto-vertical-rl .elementor-text-editor p,
{{WRAPPER}}.eael_vto-vertical-lr.elementor-widget-text-editor p,
{{WRAPPER}}.eael_vto-vertical-rl.elementor-widget-text-editor p,
{{WRAPPER}}.eael_vto-vertical-lr .eael-dual-header,
{{WRAPPER}}.eael_vto-vertical-rl .eael-dual-header,
{{WRAPPER}}.eael_vto-vertical-lr .eael-fancy-text-container,
{{WRAPPER}}.eael_vto-vertical-rl .eael-fancy-text-container' => 'transform: {{VALUE}};',
],
'condition' => [
'eael_vertical_text_orientation_switch' => 'yes',
],
]
);
$element->add_responsive_control(
'eael_vto_writing_height',
[
'label' => esc_html__( 'Height', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%', 'rem', 'custom' ],
'range' => [
'px' => [
'min' => 0,
'max' => 1000,
'step' => 1,
],
],
'selectors' => [
'{{WRAPPER}}.eael_vto-vertical-lr, {{WRAPPER}}.eael_vto-vertical-rl' => 'inline-size: {{SIZE}}{{UNIT}};',
],
'condition' => [
'eael_vertical_text_orientation_switch' => 'yes',
],
]
);
$element->add_control(
'eael_vto_writing_text_orientation',
[
'label' => esc_html__( 'Upright Orientation', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Yes', 'essential-addons-for-elementor-lite' ),
'label_off' => esc_html__( 'No', 'essential-addons-for-elementor-lite' ),
'return_value' => 'yes',
'selectors_dictionary' => [
'yes' => 'upright',
],
'selectors' => [
'{{WRAPPER}}.eael_vto-vertical-lr, {{WRAPPER}}.eael_vto-vertical-rl' => 'text-orientation: {{VALUE}};',
],
'condition' => [
'eael_vertical_text_orientation_switch' => 'yes',
],
]
);
$element->add_responsive_control(
'eael_vto_writing_letter_spacing',
[
'label' => esc_html__( 'Letter Spacing', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%', 'rem', 'custom' ],
'range' => [
'px' => [
'min' => -100,
'max' => 100,
'step' => 1,
],
],
'selectors' => [
'{{WRAPPER}}.eael_vto-vertical-lr, {{WRAPPER}}.eael_vto-vertical-rl' => 'letter-spacing: {{SIZE}}{{UNIT}};',
],
'condition' => [
'eael_vertical_text_orientation_switch' => 'yes',
],
]
);
$element->add_responsive_control(
'eael_vto_writing_word_spacing',
[
'label' => esc_html__( 'Word Spacing', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%', 'rem', 'custom' ],
'range' => [
'px' => [
'min' => -100,
'max' => 100,
'step' => 1,
],
],
'selectors' => [
'{{WRAPPER}}.eael_vto-vertical-lr, {{WRAPPER}}.eael_vto-vertical-rl' => 'word-spacing: {{SIZE}}{{UNIT}};',
],
'condition' => [
'eael_vertical_text_orientation_switch' => 'yes',
],
]
);
$element->add_responsive_control(
'eael_vto_writing_text_indent',
[
'label' => esc_html__( 'Text Indent', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%', 'rem', 'custom' ],
'range' => [
'px' => [
'min' => -100,
'max' => 100,
'step' => 1,
],
],
'selectors' => [
'{{WRAPPER}}.eael_vto-vertical-lr, {{WRAPPER}}.eael_vto-vertical-rl' => 'text-indent: {{SIZE}}{{UNIT}};',
],
'condition' => [
'eael_vertical_text_orientation_switch' => 'yes',
],
]
);
$element->add_responsive_control(
'eael_vto_writing_line_height',
[
'label' => esc_html__( 'Line Height', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%', 'rem', 'custom' ],
'range' => [
'px' => [
'min' => 0,
'max' => 100,
'step' => 1,
],
],
'selectors' => [
'{{WRAPPER}}.eael_vto-vertical-lr, {{WRAPPER}}.eael_vto-vertical-rl' => 'line-height: {{SIZE}}{{UNIT}};',
],
'condition' => [
'eael_vertical_text_orientation_switch' => 'yes',
],
]
);
$element->add_control(
'eael_vto_writing_styling_heading',
[
'label' => esc_html__( 'Styling Options', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
'condition' => [
'eael_vertical_text_orientation_switch' => 'yes',
],
]
);
$element->add_control(
'eael_vto_writing_styling_type',
[
'label' => esc_html__( 'Select Style', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SELECT,
'default' => 'normal',
'options' => [
'normal' => esc_html__( 'Normal Type', 'essential-addons-for-elementor-lite' ),
'background' => esc_html__( 'Background Type', 'essential-addons-for-elementor-lite' ),
'gradient' => esc_html__( 'Gradient Type', 'essential-addons-for-elementor-lite' ),
],
'condition' => [
'eael_vertical_text_orientation_switch' => 'yes',
],
]
);
$element->add_group_control(
\Elementor\Group_Control_Background::get_type(),
[
'name' => 'eael_vto_writing_styling_background',
'types' => [ 'classic' ],
'selector' => '{{WRAPPER}}.eael_vto-vertical-lr .elementor-heading-title,
{{WRAPPER}}.eael_vto-vertical-rl .elementor-heading-title,
{{WRAPPER}}.eael_vto-vertical-lr .elementor-headline,
{{WRAPPER}}.eael_vto-vertical-rl .elementor-headline,
{{WRAPPER}}.eael_vto-vertical-lr .elementor-text-editor p,
{{WRAPPER}}.eael_vto-vertical-rl .elementor-text-editor p,
{{WRAPPER}}.eael_vto-vertical-lr.elementor-widget-text-editor p,
{{WRAPPER}}.eael_vto-vertical-rl.elementor-widget-text-editor p,
{{WRAPPER}}.eael_vto-vertical-lr .eael-dual-header,
{{WRAPPER}}.eael_vto-vertical-rl .eael-dual-header,
{{WRAPPER}}.eael_vto-vertical-lr .eael-fancy-text-container,
{{WRAPPER}}.eael_vto-vertical-rl .eael-fancy-text-container',
'condition' => [
'eael_vertical_text_orientation_switch' => 'yes',
'eael_vto_writing_styling_type' => 'background',
],
]
);
$repeater = new \Elementor\Repeater();
$repeater->add_control(
'eael_vto_writing_gradient_color',
[
'label' => esc_html__( 'Color', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::COLOR,
]
);
$repeater->add_control(
'eael_vto_writing_gradient_color_location',
[
'label' => esc_html__( 'Location', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%', 'rem', 'custom' ],
'range' => [
'%' => [
'min' => 0,
'max' => 100,
'step' => 1,
],
],
'default' => [
'unit' => '%',
'size' => 0,
],
]
);
$element->add_control(
'eael_vto_writing_gradient_color_repeater',
[
'label' => esc_html__( 'Choose Gradient Colors', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::REPEATER,
'fields' => $repeater->get_controls(),
'default' => [
[
'eael_vto_writing_gradient_color' => '#7C62FF',
'eael_vto_writing_gradient_color_location' => [
'unit' => '%',
'size' => 50,
],
],
[
'eael_vto_writing_gradient_color' => '#FF6464',
'eael_vto_writing_gradient_color_location' => [
'unit' => '%',
'size' => 90,
],
],
],
'title_field' => '{{{ eael_vto_writing_gradient_color }}}',
'condition' => [
'eael_vertical_text_orientation_switch' => 'yes',
'eael_vto_writing_styling_type' => 'gradient',
],
]
);
$element->add_control(
'eael_vto_writing_styling_text_clip',
[
'label' => esc_html__( 'Text Clip', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Show', 'essential-addons-for-elementor-lite' ),
'label_off' => esc_html__( 'Hide', 'essential-addons-for-elementor-lite' ),
'return_value' => 'yes',
'default' => 'yes',
'selectors_dictionary' => [
'yes' => 'text',
],
'selectors' => [
'{{WRAPPER}}.eael_vto-vertical-lr .elementor-heading-title,
{{WRAPPER}}.eael_vto-vertical-rl .elementor-heading-title,
{{WRAPPER}}.eael_vto-vertical-lr .elementor-headline,
{{WRAPPER}}.eael_vto-vertical-rl .elementor-headline,
{{WRAPPER}}.eael_vto-vertical-lr .elementor-text-editor p,
{{WRAPPER}}.eael_vto-vertical-rl .elementor-text-editor p,
{{WRAPPER}}.eael_vto-vertical-lr.elementor-widget-text-editor p,
{{WRAPPER}}.eael_vto-vertical-rl.elementor-widget-text-editor p,
{{WRAPPER}}.eael_vto-vertical-lr .eael-dual-header,
{{WRAPPER}}.eael_vto-vertical-rl .eael-dual-header,
{{WRAPPER}}.eael_vto-vertical-lr .eael-fancy-text-container,
{{WRAPPER}}.eael_vto-vertical-rl .eael-fancy-text-container' => 'background-clip: {{VALUE}}; color: transparent;',
],
'condition' => [
'eael_vertical_text_orientation_switch' => 'yes',
'eael_vto_writing_styling_type' => 'background',
'eael_vto_writing_styling_background_background' => 'classic',
],
]
);
$element->add_control(
'eael_vto_writing_styling_text_animation_bg',
[
'label' => esc_html__( 'Animation', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Show', 'essential-addons-for-elementor-lite' ),
'label_off' => esc_html__( 'Hide', 'essential-addons-for-elementor-lite' ),
'return_value' => 'yes',
'selectors' => [
'{{WRAPPER}}.eael_vto-vertical-lr .elementor-heading-title,
{{WRAPPER}}.eael_vto-vertical-rl .elementor-heading-title,
{{WRAPPER}}.eael_vto-vertical-lr .elementor-headline,
{{WRAPPER}}.eael_vto-vertical-rl .elementor-headline,
{{WRAPPER}}.eael_vto-vertical-lr .elementor-text-editor p,
{{WRAPPER}}.eael_vto-vertical-rl .elementor-text-editor p,
{{WRAPPER}}.eael_vto-vertical-lr.elementor-widget-text-editor p,
{{WRAPPER}}.eael_vto-vertical-rl.elementor-widget-text-editor p,
{{WRAPPER}}.eael_vto-vertical-lr .eael-dual-header,
{{WRAPPER}}.eael_vto-vertical-rl .eael-dual-header,
{{WRAPPER}}.eael_vto-vertical-lr .eael-fancy-text-container,
{{WRAPPER}}.eael_vto-vertical-rl .eael-fancy-text-container' => 'animation: eaelAnimationVTO 30s linear infinite;',
],
'condition' => [
'eael_vertical_text_orientation_switch' => 'yes',
'eael_vto_writing_styling_type' => ['background'],
'eael_vto_writing_styling_background_background' => 'classic',
],
]
);
$element->add_control(
'eael_vto_writing_text_animation_control',
[
'label' => esc_html__( 'Gradient Color Direction', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'horizontal' => [
'title' => esc_html__( 'Horizontal', 'essential-addons-for-elementor-lite' ),
'icon' => 'eicon-arrow-right',
],
'vertical' => [
'title' => esc_html__( 'Vertical', 'essential-addons-for-elementor-lite' ),
'icon' => 'eicon-arrow-down',
],
],
'default' => 'vertical',
'toggle' => false,
'condition' => [
'eael_vertical_text_orientation_switch' => 'yes',
'eael_vto_writing_styling_type' => 'gradient',
],
]
);
$element->add_responsive_control(
'eael_vto_writing_gradient_color_angle',
[
'label' => esc_html__( 'Angle', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'deg', 'grad', 'px', '%', 'custom' ],
'range' => [
'deg' => [
'min' => 0,
'max' => 360,
'step' => 1,
],
],
'default' => [
'unit' => 'deg',
'size' => 95,
],
'condition' => [
'eael_vertical_text_orientation_switch' => 'yes',
'eael_vto_writing_styling_type' => 'gradient',
'eael_vto_writing_text_animation_control' => 'horizontal',
],
]
);
$element->add_control(
'eael_vto_writing_styling_text_animation',
[
'label' => esc_html__( 'Animation', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Show', 'essential-addons-for-elementor-lite' ),
'label_off' => esc_html__( 'Hide', 'essential-addons-for-elementor-lite' ),
'return_value' => 'yes',
'selectors' => [
'{{WRAPPER}}.eael_vto-vertical-lr .elementor-heading-title,
{{WRAPPER}}.eael_vto-vertical-rl .elementor-heading-title,
{{WRAPPER}}.eael_vto-vertical-lr .elementor-headline,
{{WRAPPER}}.eael_vto-vertical-rl .elementor-headline,
{{WRAPPER}}.eael_vto-vertical-lr .elementor-text-editor p,
{{WRAPPER}}.eael_vto-vertical-rl .elementor-text-editor p,
{{WRAPPER}}.eael_vto-vertical-lr.elementor-widget-text-editor p,
{{WRAPPER}}.eael_vto-vertical-rl.elementor-widget-text-editor p,
{{WRAPPER}}.eael_vto-vertical-lr .eael-dual-header,
{{WRAPPER}}.eael_vto-vertical-rl .eael-dual-header,
{{WRAPPER}}.eael_vto-vertical-lr .eael-fancy-text-container,
{{WRAPPER}}.eael_vto-vertical-rl .eael-fancy-text-container' => 'animation: eaelAnimationVTO 5s linear infinite;',
],
'condition' => [
'eael_vertical_text_orientation_switch' => 'yes',
'eael_vto_writing_styling_type' => 'gradient',
'eael_vto_writing_text_animation_control' => 'horizontal',
],
]
);
$element->add_responsive_control(
'eael_vto_writing_gradient_color_angle_vertical',
[
'label' => esc_html__( 'Angle', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'deg', 'grad', 'px', '%', 'custom' ],
'range' => [
'deg' => [
'min' => 0,
'max' => 360,
'step' => 1,
],
],
'default' => [
'unit' => 'deg',
'size' => 2,
],
'condition' => [
'eael_vertical_text_orientation_switch' => 'yes',
'eael_vto_writing_styling_type' => 'gradient',
'eael_vto_writing_text_animation_control' => 'vertical',
],
]
);
$element->add_control(
'eael_vto_writing_styling_text_animation_vertical',
[
'label' => esc_html__( 'Animation', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Show', 'essential-addons-for-elementor-lite' ),
'label_off' => esc_html__( 'Hide', 'essential-addons-for-elementor-lite' ),
'return_value' => 'yes',
'selectors' => [
'{{WRAPPER}}.eael_vto-vertical-lr .elementor-heading-title,
{{WRAPPER}}.eael_vto-vertical-rl .elementor-heading-title,
{{WRAPPER}}.eael_vto-vertical-lr .elementor-headline,
{{WRAPPER}}.eael_vto-vertical-rl .elementor-headline,
{{WRAPPER}}.eael_vto-vertical-lr .elementor-text-editor p,
{{WRAPPER}}.eael_vto-vertical-rl .elementor-text-editor p,
{{WRAPPER}}.eael_vto-vertical-lr.elementor-widget-text-editor p,
{{WRAPPER}}.eael_vto-vertical-rl.elementor-widget-text-editor p,
{{WRAPPER}}.eael_vto-vertical-lr .eael-dual-header,
{{WRAPPER}}.eael_vto-vertical-rl .eael-dual-header,
{{WRAPPER}}.eael_vto-vertical-lr .eael-fancy-text-container,
{{WRAPPER}}.eael_vto-vertical-rl .eael-fancy-text-container' => 'animation: eaelAnimationVertical 5s linear infinite;',
],
'condition' => [
'eael_vertical_text_orientation_switch' => 'yes',
'eael_vto_writing_styling_type' => 'gradient',
'eael_vto_writing_text_animation_control' => 'vertical',
],
]
);
$element->end_controls_section();
}
public function before_render( $element ) {
$settings = $element->get_settings_for_display();
if ( !empty( $settings['eael_vto_writing_gradient_color_repeater'] ) && is_array( $settings['eael_vto_writing_gradient_color_repeater'] ) ) {
$gradient_colors = [];
foreach ( $settings['eael_vto_writing_gradient_color_repeater'] as $value ) {
$gradient_colors[] = [
'color' => $value['eael_vto_writing_gradient_color'],
'location' => $value['eael_vto_writing_gradient_color_location']['size'] . $value['eael_vto_writing_gradient_color_location']['unit'],
];
}
$element->add_render_attribute( '_wrapper', 'data-gradient_colors', wp_json_encode( $gradient_colors ) );
if ($settings['eael_vto_writing_text_animation_control'] === 'horizontal') {
$eael_gradient_color_angle = $settings['eael_vto_writing_gradient_color_angle']['size'] ? $settings['eael_vto_writing_gradient_color_angle']['size'] . $settings['eael_vto_writing_gradient_color_angle']['unit'] : '0deg';
$element->add_render_attribute( '_wrapper', 'data-gradient_color_angle', $eael_gradient_color_angle );
$element->add_render_attribute( '_wrapper', 'data-animation_control', 'horizontal' );
} else {
$eael_gradient_color_angle = $settings['eael_vto_writing_gradient_color_angle_vertical']['size'] ? $settings['eael_vto_writing_gradient_color_angle_vertical']['size'] . $settings['eael_vto_writing_gradient_color_angle_vertical']['unit'] : '0deg';
$element->add_render_attribute( '_wrapper', 'data-gradient_color_angle', $eael_gradient_color_angle );
$element->add_render_attribute( '_wrapper', 'data-animation_control', 'vertical' );
}
}
}
}