| 1 |
<?php |
| 2 |
|
| 3 |
namespace Wpxero\Marqueex\Traits\AnimatedWordRoller; |
| 4 |
|
| 5 |
use Elementor\Controls_Manager; |
| 6 |
use Elementor\Group_Control_Typography; |
| 7 |
use Elementor\Group_Control_Text_Stroke; |
| 8 |
|
| 9 |
if (!defined('ABSPATH')) { |
| 10 |
exit; |
| 11 |
} |
| 12 |
|
| 13 |
trait StyleControls { |
| 14 |
|
| 15 |
private function register_style_section_controls() { |
| 16 |
$this->start_controls_section( |
| 17 |
'marqueex_word_roller_style_section', |
| 18 |
[ |
| 19 |
'label' => __('Content', 'marqueex'), |
| 20 |
'tab' => Controls_Manager::TAB_STYLE, |
| 21 |
] |
| 22 |
); |
| 23 |
|
| 24 |
$text_blocks = [ |
| 25 |
[ |
| 26 |
'label' => __('Title', 'marqueex'), |
| 27 |
'heading' => 'marqueex_word_roller_title_heading', |
| 28 |
'selector' => '{{WRAPPER}} .marqueex-fixed-text', |
| 29 |
'typography' => 'marqueex_word_roller_title_typography', |
| 30 |
'color' => 'marqueex_word_roller_title_color', |
| 31 |
'text_stroke' => 'marqueex_word_roller_title_text_stroke', |
| 32 |
], |
| 33 |
[ |
| 34 |
'label' => __('Animated Words', 'marqueex'), |
| 35 |
'heading' => 'marqueex_word_roller_animated_words_heading', |
| 36 |
'selector' => '{{WRAPPER}} .marqueex-rotating-word', |
| 37 |
'typography' => 'marqueex_word_roller_animated_words_typography', |
| 38 |
'color' => 'marqueex_word_roller_animated_words_color', |
| 39 |
'text_stroke' => 'marqueex_word_roller_animated_words_text_stroke', |
| 40 |
], |
| 41 |
]; |
| 42 |
|
| 43 |
foreach ($text_blocks as $block) { |
| 44 |
$this->add_control( |
| 45 |
$block['heading'], |
| 46 |
[ |
| 47 |
'label' => $block['label'], |
| 48 |
'type' => Controls_Manager::HEADING, |
| 49 |
'separator' => 'before', |
| 50 |
] |
| 51 |
); |
| 52 |
|
| 53 |
$this->add_group_control( |
| 54 |
Group_Control_Typography::get_type(), |
| 55 |
[ |
| 56 |
'name' => $block['typography'], |
| 57 |
'selector' => $block['selector'], |
| 58 |
] |
| 59 |
); |
| 60 |
|
| 61 |
$this->add_control( |
| 62 |
$block['color'], |
| 63 |
[ |
| 64 |
'label' => __('Color', 'marqueex'), |
| 65 |
'type' => Controls_Manager::COLOR, |
| 66 |
'selectors' => [ |
| 67 |
$block['selector'] => 'color: {{VALUE}}', |
| 68 |
], |
| 69 |
] |
| 70 |
); |
| 71 |
|
| 72 |
$this->add_group_control( |
| 73 |
Group_Control_Text_Stroke::get_type(), |
| 74 |
[ |
| 75 |
'name' => $block['text_stroke'], |
| 76 |
'selector' => $block['selector'], |
| 77 |
] |
| 78 |
); |
| 79 |
} |
| 80 |
|
| 81 |
// Icon Styles |
| 82 |
$this->add_control( |
| 83 |
'marqueex_word_roller_icons_heading', |
| 84 |
[ |
| 85 |
'label' => __('Icons', 'marqueex'), |
| 86 |
'type' => Controls_Manager::HEADING, |
| 87 |
'separator' => 'before', |
| 88 |
] |
| 89 |
); |
| 90 |
|
| 91 |
$this->add_control( |
| 92 |
'marqueex_word_roller_icons_size', |
| 93 |
[ |
| 94 |
'label' => __('Size', 'marqueex'), |
| 95 |
'type' => Controls_Manager::SLIDER, |
| 96 |
'size_units' => ['px'], |
| 97 |
'range' => [ |
| 98 |
'px' => ['min' => 3, 'max' => 100, 'step' => 1], |
| 99 |
], |
| 100 |
'default' => ['unit' => 'px', 'size' => 16], |
| 101 |
'selectors' => [ |
| 102 |
'{{WRAPPER}} .marqueex-rotate-text svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};', |
| 103 |
'{{WRAPPER}} .marqueex-rotate-text i' => 'font-size: {{SIZE}}{{UNIT}};', |
| 104 |
], |
| 105 |
] |
| 106 |
); |
| 107 |
|
| 108 |
$this->add_control( |
| 109 |
'marqueex_word_roller_gap', |
| 110 |
[ |
| 111 |
'label' => __('Gap', 'marqueex'), |
| 112 |
'type' => Controls_Manager::SLIDER, |
| 113 |
'size_units' => ['px'], |
| 114 |
'range' => [ |
| 115 |
'px' => ['min' => 3, 'max' => 100, 'step' => 1], |
| 116 |
], |
| 117 |
'default' => ['unit' => 'px', 'size' => 16], |
| 118 |
'selectors' => [ |
| 119 |
'{{WRAPPER}} .marqueex-rotate-text' => 'gap: {{SIZE}}{{UNIT}};', |
| 120 |
], |
| 121 |
] |
| 122 |
); |
| 123 |
|
| 124 |
$this->add_control( |
| 125 |
'marqueex_word_roller_icons_color', |
| 126 |
[ |
| 127 |
'label' => __('Color', 'marqueex'), |
| 128 |
'type' => Controls_Manager::COLOR, |
| 129 |
'selectors' => [ |
| 130 |
'{{WRAPPER}} .marqueex-rotate-text i' => 'color: {{VALUE}}', |
| 131 |
'{{WRAPPER}} .marqueex-rotate-text path' => 'fill: {{VALUE}};', |
| 132 |
], |
| 133 |
] |
| 134 |
); |
| 135 |
|
| 136 |
$this->end_controls_section(); |
| 137 |
} |
| 138 |
} |
| 139 |
|
