KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta 
How to use interactive class
Best Phoronix-test-suite code snippet using interactive
Interactive_Circle.php
Source:Interactive_Circle.php 
...13use \Elementor\Repeater;14use \Elementor\Widget_Base;15class Interactive_Circle extends Widget_Base {16 public function get_name() {17 return 'eael-interactive-circle';18 }19 public function get_title() {20 return esc_html__( 'Interactive Circle', 'essential-addons-for-elementor-lite' );21 }22 public function get_icon() {23 return 'eaicon-interactive-circle';24 }25 public function get_categories() {26 return [ 'essential-addons-elementor' ];27 }28 public function get_keywords() {29 return [30 'interactive circle',31 'interactive tabs',32 'interactive infobox',33 'ea interactive circle',34 'ea interactive infobox',35 'ea interactive tabs',36 'circle',37 'ea circle',38 'ea',39 'essential addons',40 ];41 }42 public function get_custom_help_url() {43 return 'https://essential-addons.com/elementor/docs/interactive-circle/';44 }45 protected function eael_interactive_circle_general() {46 /**47 * Advance Tabs Settings48 */49 $this->start_controls_section(50 'eael_section_interactive_circle_settings',51 [52 'label' => esc_html__( 'General', 'essential-addons-for-elementor-lite' ),53 ]54 );55 $this->add_control(56 'eael_interactive_circle_preset',57 [58 'label' => esc_html__( 'Preset', 'essential-addons-for-elementor-lite' ),59 'type' => Controls_Manager::SELECT,60 'default' => 'eael-interactive-circle-preset-1',61 'label_block' => false,62 'options' => [63 'eael-interactive-circle-preset-1' => esc_html__( 'Preset 1', 'essential-addons-for-elementor-lite' ),64 'eael-interactive-circle-preset-2' => esc_html__( 'Preset 2', 'essential-addons-for-elementor-lite' ),65 'eael-interactive-circle-preset-3' => esc_html__( 'Preset 3', 'essential-addons-for-elementor-lite' ),66 'eael-interactive-circle-preset-4' => esc_html__( 'Preset 4', 'essential-addons-for-elementor-lite' ),67 ],68 ]69 );70 $this->add_control(71 'eael_interactive_circle_btn_settings',72 [73 'label' => esc_html__( 'Button', 'essential-addons-for-elementor-lite' ),74 'type' => Controls_Manager::HEADING,75 'separator' => 'before',76 ]77 );78 $this->add_control(79 'eael_interactive_circle_btn_icon_show',80 [81 'label' => esc_html__( 'Show Icon', 'essential-addons-for-elementor-lite' ),82 'type' => Controls_Manager::SWITCHER,83 'default' => 'yes',84 'return_value' => 'yes',85 ]86 );87 $this->add_control(88 'eael_interactive_circle_btn_text_show',89 [90 'label' => esc_html__( 'Show Text', 'essential-addons-for-elementor-lite' ),91 'type' => Controls_Manager::SWITCHER,92 'default' => 'yes',93 'return_value' => 'yes',94 ]95 );96 $this->end_controls_section();97 }98 protected function eael_interactive_circle_item() {99 /**100 * Advance Tabs Content Settings101 */102 $this->start_controls_section(103 'eael_section_interactive_circle_content_settings',104 [105 'label' => esc_html__( 'Content', 'essential-addons-for-elementor-lite' ),106 ]107 );108 $this->add_control( 'eael_global_warning_text', [109 'type' => Controls_Manager::RAW_HTML,110 'raw' => __( '<strong>Circle Item limit max 8.</strong> If the item is more than 8 it will break the preset layout design.', 'essential-addons-for-elementor-lite' ),111 'content_classes' => 'eael-warning',112 ] );113 $repeater = new Repeater();114 $repeater->start_controls_tabs( 'interactive_circle_tabs' );115 $repeater->start_controls_tab( 'interactive_circle_btn_tab', [ 'label' => __( 'Button', 'essential-addons-for-elementor-lite' ) ] );116 $repeater->add_control(117 'eael_interactive_circle_btn_icon',118 [119 'label' => esc_html__( 'Icon', 'essential-addons-for-elementor-lite' ),120 'type' => Controls_Manager::ICONS,121 'default' => [122 'value' => 'fas fa-home',123 'library' => 'fa-solid',124 ],125 ]126 );127 $repeater->add_control(128 'eael_interactive_circle_btn_title',129 [130 'name' => 'eael_interactive_circle_btn_title',131 'label' => esc_html__( 'Short Title', 'essential-addons-for-elementor-lite' ),132 'type' => Controls_Manager::TEXT,133 'default' => esc_html__( 'Title', 'essential-addons-for-elementor-lite' ),134 'dynamic' => [ 'active' => true ],135 ]136 );137 $repeater->end_controls_tab();138 $repeater->start_controls_tab( 'interactive_circle_content_tab', [ 'label' => __( 'Content', 'essential-addons-for-elementor-lite' ) ] );139 $repeater->add_control(140 'eael_interactive_circle_item_content',141 [142 'name' => 'eael_interactive_circle_item_content',143 'label' => esc_html__( 'Tab Content', 'essential-addons-for-elementor-lite' ),144 'type' => Controls_Manager::WYSIWYG,145 'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, neque qui velit. Magni dolorum quidem ipsam eligendi, totam, facilis laudantium cum accusamus ullam voluptatibus commodi numquam, error, est. Ea, consequatur.', 'essential-addons-for-elementor-lite' ),146 'dynamic' => [ 'active' => true ],147 ]148 );149 $repeater->end_controls_tab();150 $repeater->start_controls_tab( 'interactive_circle_item_style_tab', [ 'label' => __( 'Style', 'essential-addons-for-elementor-lite' ) ] );151 $repeater->add_group_control(152 Group_Control_Background::get_type(),153 [154 'name' => 'eael_interactive_circle_tab_bgtype',155 'types' => [ 'gradient','classic' ],156 'exclude' => [ 'image' ],157 'selector' => '{{WRAPPER}} .eael-circle-wrapper:not(.eael-interactive-circle-preset-4) .eael-circle-info .eael-circle-inner {{CURRENT_ITEM}} .eael-circle-btn-icon, {{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-4 .eael-circle-info .eael-circle-inner {{CURRENT_ITEM}} .eael-circle-icon-shapes',158 ]159 );160 $repeater->end_controls_tab();161 $repeater->end_controls_tabs();162 $this->add_control(163 'eael_interactive_circle_item',164 [165 'type' => Controls_Manager::REPEATER,166 'separator' => 'before',167 'default' => [168 [169 'eael_interactive_circle_btn_icon' => [170 'value' => 'fas fa-leaf',171 'library' => 'fa-solid',172 ],173 'eael_interactive_circle_btn_title' => esc_html__( 'Item 1', 'essential-addons-for-elementor-lite' ),174 'eael_interactive_circle_item_default_active' => __( 'active', 'essential-addons-for-elementor-lite' ),175 'eael_interactive_circle_item_content' => esc_html__( 'Present your content in an attractive Circle layout item 1. You can highlight key information with click or hover effects and style it as per your preference.', 'essential-addons-for-elementor-lite' ),176 ],177 [178 'eael_interactive_circle_btn_icon' => [179 'value' => 'fas fa-comment',180 'library' => 'fa-solid',181 ],182 'eael_interactive_circle_btn_title' => esc_html__( 'Item 2', 'essential-addons-for-elementor-lite' ),183 'eael_interactive_circle_item_content' => esc_html__( 'Present your content in an attractive Circle layout item 2. You can highlight key information with click or hover effects and style it as per your preference.', 'essential-addons-for-elementor-lite' ),184 ],185 [186 'eael_interactive_circle_btn_icon' => [187 'value' => 'fas fa-map-marker-alt',188 'library' => 'fa-solid',189 ],190 'eael_interactive_circle_btn_title' => esc_html__( 'Item 3', 'essential-addons-for-elementor-lite' ),191 'eael_interactive_circle_item_content' => esc_html__( 'Present your content in an attractive Circle layout item 3. You can highlight key information with click or hover effects and style it as per your preference.', 'essential-addons-for-elementor-lite' ),192 ],193 [194 'eael_interactive_circle_btn_icon' => [195 'value' => 'fas fa-rocket',196 'library' => 'fa-solid',197 ],198 'eael_interactive_circle_btn_title' => esc_html__( 'Item 4', 'essential-addons-for-elementor-lite' ),199 'eael_interactive_circle_item_content' => esc_html__( 'Present your content in an attractive Circle layout item 4. You can highlight key information with click or hover effects and style it as per your preference.', 'essential-addons-for-elementor-lite' ),200 ],201 [202 'eael_interactive_circle_btn_icon' => [203 'value' => 'fas fa-hourglass-half',204 'library' => 'fa-solid',205 ],206 'eael_interactive_circle_btn_title' => esc_html__( 'Item 5', 'essential-addons-for-elementor-lite' ),207 'eael_interactive_circle_item_content' => esc_html__( 'Present your content in an attractive Circle layout item 5. You can highlight key information with click or hover effects and style it as per your preference.', 'essential-addons-for-elementor-lite' ),208 ],209 [210 'eael_interactive_circle_btn_icon' => [211 'value' => 'fas fa-tag',212 'library' => 'fa-solid',213 ],214 'eael_interactive_circle_btn_title' => esc_html__( 'Item 6', 'essential-addons-for-elementor-lite' ),215 'eael_interactive_circle_item_content' => esc_html__( 'Present your content in an attractive Circle layout item 6. You can highlight key information with click or hover effects and style it as per your preference.', 'essential-addons-for-elementor-lite' ),216 ],217 ],218 'fields' => $repeater->get_controls(),219 'title_field' => '{{eael_interactive_circle_btn_title}}',220 ]221 );222 $this->end_controls_section();223 }224 protected function eael_interactive_circle_additional() {225 $this->start_controls_section(226 'eael_section_interactive_circle_additional',227 [228 'label' => esc_html__( 'Additional Settings', 'essential-addons-for-elementor-lite' ),229 'tab' => Controls_Manager::TAB_CONTENT,230 ]231 );232 $this->add_control(233 'eael_interactive_circle_event',234 [235 'label' => esc_html__( 'Mouse Event', 'essential-addons-for-elementor-lite' ),236 'type' => Controls_Manager::SELECT,237 'default' => 'eael-interactive-circle-event-click',238 'label_block' => false,239 'options' => [240 'eael-interactive-circle-event-click' => esc_html__( 'Click', 'essential-addons-for-elementor-lite' ),241 'eael-interactive-circle-event-hover' => esc_html__( 'Hover', 'essential-addons-for-elementor-lite' ),242 ],243 ]244 );245 $this->add_control(246 'eael_interactive_circle_animation',247 [248 'label' => esc_html__( 'Animation', 'essential-addons-for-elementor-lite' ),249 'type' => Controls_Manager::SELECT,250 'default' => 'eael-interactive-circle-animation-0',251 'label_block' => false,252 'options' => [253 'eael-interactive-circle-animation-0' => esc_html__( 'None', 'essential-addons-for-elementor-lite' ),254 'eael-interactive-circle-animation-1' => esc_html__( 'Bounce In', 'essential-addons-for-elementor-lite' ),255 'eael-interactive-circle-animation-2' => esc_html__( 'Rotate', 'essential-addons-for-elementor-lite' ),256 'eael-interactive-circle-animation-3' => esc_html__( 'Spinning', 'essential-addons-for-elementor-lite' ),257 ],258 ]259 );260 $this->end_controls_section();261 }262 protected function eael_interactive_circle_general_style() {263 /**264 * -------------------------------------------265 * Tab Style Advance Tabs Generel Style266 * -------------------------------------------267 */268 $this->start_controls_section(269 'eael_section_interactive_circle_style_settings',270 [271 'label' => esc_html__( 'General', 'essential-addons-for-elementor-lite' ),272 'tab' => Controls_Manager::TAB_STYLE,273 ]274 );275 $this->add_responsive_control(276 'eael_interactive_circle_width',277 [278 'label' => __( 'Circle Width', 'essential-addons-for-elementor-lite' ),279 'type' => Controls_Manager::SLIDER,280 'size_units' => [ 'px' ],281 'range' => [282 'px' => [283 'min' => 0,284 'max' => 1000,285 'step' => 1,286 ],287 ],288 'selectors' => [289 '{{WRAPPER}} .eael-circle-inner' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',290 '{{WRAPPER}} .eael-interactive-circle-preset-2 .eael-circle-inner' => 'width: {{SIZE}}{{UNIT}}; height: calc({{SIZE}}{{UNIT}} / 2);',291 '{{WRAPPER}} .eael-interactive-circle-preset-2 .eael-circle-content' => 'height: calc({{SIZE}}{{UNIT}} / 2)!important;',292 '{{WRAPPER}} .eael-interactive-circle-preset-2 .eael-circle-btn-content' => 'height: calc({{SIZE}}{{UNIT}} / 2)!important;',293 ],294 ]295 );296 $this->add_responsive_control(297 'eael_interactive_circle_padding',298 [299 'label' => esc_html__( 'Padding', 'essential-addons-for-elementor-lite' ),300 'type' => Controls_Manager::DIMENSIONS,301 'size_units' => [ 'px', 'em', '%' ],302 'selectors' => [303 '{{WRAPPER}} .eael-circle-inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',304 ],305 ]306 );307 $this->add_responsive_control(308 'eael_interactive_circle_margin',309 [310 'label' => esc_html__( 'Margin', 'essential-addons-for-elementor-lite' ),311 'type' => Controls_Manager::DIMENSIONS,312 'size_units' => [ 'px', 'em', '%' ],313 'selectors' => [314 '{{WRAPPER}} .eael-circle-inner' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',315 ],316 ]317 );318 $this->add_group_control(319 Group_Control_Border::get_type(),320 [321 'name' => 'eael_interactive_circle_border',322 'label' => esc_html__( 'Border', 'essential-addons-for-elementor-lite' ),323 'selector' => '{{WRAPPER}} .eael-circle-inner',324 'exclude' => [ 'color' ],325 ]326 );327 $this->add_control(328 'eael_interactive_circle_border_color',329 [330 'label' => esc_html__( 'Border Color', 'essential-addons-for-elementor-lite' ),331 'type' => Controls_Manager::COLOR,332 'selectors' => [333 '{{WRAPPER}} .eael-circle-inner' => 'border-color: {{VALUE}}!important;',334 ],335 ]336 );337 $this->add_responsive_control(338 'eael_interactive_circle_connectors',339 [340 'label' => esc_html__( 'Connectors', 'essential-addons-for-elementor-lite' ),341 'type' => Controls_Manager::HEADING,342 'condition' => [343 'eael_interactive_circle_preset' => 'eael-interactive-circle-preset-3'344 ],345 ]346 );347 $this->add_control(348 'eael_interactive_circle_connector_color',349 [350 'label' => esc_html__( 'Color', 'essential-addons-for-elementor-lite' ),351 'type' => Controls_Manager::COLOR,352 'selectors' => [353 '{{WRAPPER}} .eael-shape-1, {{WRAPPER}} .eael-shape-2' => 'background: {{VALUE}}!important;',354 ],355 'condition' => [356 'eael_interactive_circle_preset' => 'eael-interactive-circle-preset-3'357 ],358 ]359 );360 $this->end_controls_section();361 }362 protected function eael_interactive_circle_button_style() {363 $this->start_controls_section(364 'eael_section_interactive_circle_tab_style_settings',365 [366 'label' => esc_html__( 'Item', 'essential-addons-for-elementor-lite' ),367 'tab' => Controls_Manager::TAB_STYLE,368 ]369 );370 $this->add_group_control(371 Group_Control_Typography::get_type(),372 [373 'name' => 'eael_interactive_circle_btn_typo',374 'selector' => '{{WRAPPER}} .eael-circle-btn-txt',375 ]376 );377 $this->add_responsive_control(378 'eael_interactive_circle_btn_width',379 [380 'label' => __( 'Width', 'essential-addons-for-elementor-lite' ),381 'type' => Controls_Manager::SLIDER,382 'size_units' => [ 'px' ],383 'range' => [384 'px' => [385 'min' => 0,386 'max' => 200,387 'step' => 1,388 ],389 ],390 'selectors' => [391 '{{WRAPPER}} .eael-circle-btn' => 'width: {{SIZE}}px!important; height: {{SIZE}}px!important;',392 ],393 ]394 );395 $this->add_responsive_control(396 'eael_interactive_circle_btn_icon_size',397 [398 'label' => __( 'Icon Size', 'essential-addons-for-elementor-lite' ),399 'type' => Controls_Manager::SLIDER,400 'default' => [401 'size' => 16,402 'unit' => 'px',403 ],404 'size_units' => [ 'px' ],405 'range' => [406 'px' => [407 'min' => 0,408 'max' => 50,409 'step' => 1,410 ],411 ],412 'selectors' => [413 '{{WRAPPER}} .eael-circle-btn-icon i' => 'font-size: {{SIZE}}{{UNIT}}!important;',414 '{{WRAPPER}} .eael-circle-btn-icon svg' => 'width: {{SIZE}}{{UNIT}}!important; height: {{SIZE}}{{UNIT}}!important; min-width: {{SIZE}}{{UNIT}}!important; min-height: {{SIZE}}{{UNIT}}!important;',415 ],416 ]417 );418 $this->start_controls_tabs( 'eael_interactive_circle_header_tabs' );419 // Normal State Tab420 $this->start_controls_tab( 'eael_interactive_circle_header_normal', [ 'label' => esc_html__( 'Normal', 'essential-addons-for-elementor-lite' ) ] );421 $this->add_control(422 'eael_interactive_circle_tab_color',423 [424 'label' => esc_html__( 'Background Color', 'essential-addons-for-elementor-lite' ),425 'type' => Controls_Manager::COLOR,426 'selectors' => [427 '{{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-1 .eael-circle-btn .eael-circle-btn-icon, {{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-btn .eael-circle-btn-icon' => 'background-color: {{VALUE}}!important;',428 '{{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-3 .eael-circle-btn .eael-circle-icon-inner, {{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-4 .eael-circle-btn .eael-circle-icon-inner' => 'background-color: {{VALUE}}!important;',429 ],430 ]431 );432 $this->add_control(433 'eael_interactive_circle_tab_text_color',434 [435 'label' => esc_html__( 'Text Color', 'essential-addons-for-elementor-lite' ),436 'type' => Controls_Manager::COLOR,437 'selectors' => [438 '{{WRAPPER}} .eael-circle-btn .eael-circle-btn-txt' => 'color: {{VALUE}}!important;',439 ],440 ]441 );442 $this->add_control(443 'eael_interactive_circle_tab_icon_color',444 [445 'label' => esc_html__( 'Icon Color', 'essential-addons-for-elementor-lite' ),446 'type' => Controls_Manager::COLOR,447 // 'default' => '#333',448 'selectors' => [449 '{{WRAPPER}} .eael-circle-btn i' => 'color: {{VALUE}}!important;',450 '{{WRAPPER}} .eael-circle-btn svg' => 'fill: {{VALUE}}!important;',451 ],452 'condition' => [453 'eael_interactive_circle_btn_icon_show' => 'yes'454 ],455 ]456 );457 $this->add_group_control(458 Group_Control_Border::get_type(),459 [460 'name' => 'eael_interactive_circle_btn_border',461 'label' => esc_html__( 'Border', 'essential-addons-for-elementor-lite' ),462 'selector' => '{{WRAPPER}} .eael-circle-wrapper .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn',463 ]464 );465 $this->add_group_control(466 Group_Control_Box_Shadow::get_type(),467 [468 'name' => 'eael_interactive_circle_btn_shadow',469 'selector' => '{{WRAPPER}} .eael-circle-wrapper .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn',470 ]471 );472 $this->end_controls_tab();473 // Hover State Tab474 $this->start_controls_tab( 'eael_interactive_circle_header_hover', [ 'label' => esc_html__( 'Hover', 'essential-addons-for-elementor-lite' ) ] );475 $this->add_control(476 'eael_interactive_circle_tab_color_hover',477 [478 'label' => esc_html__( 'Background Color', 'essential-addons-for-elementor-lite' ),479 'type' => Controls_Manager::COLOR,480 'selectors' => [481 '{{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-1 .eael-circle-btn:hover .eael-circle-btn-icon, {{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-btn:hover .eael-circle-btn-icon' => 'background-color: {{VALUE}}!important;',482 '{{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-3 .eael-circle-btn:hover .eael-circle-icon-inner, {{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-4 .eael-circle-btn:hover .eael-circle-icon-inner' => 'background-color: {{VALUE}}!important;',483 '{{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-1 .eael-circle-btn.active:hover .eael-circle-btn-icon, {{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-btn.active:hover .eael-circle-btn-icon' => 'background-color: {{VALUE}}!important;',484 '{{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-3 .eael-circle-btn.active:hover .eael-circle-icon-inner, {{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-4 .eael-circle-btn.active:hover .eael-circle-icon-inner' => 'background-color: {{VALUE}}!important;',485 ],486 ]487 );488 $this->add_control(489 'eael_interactive_circle_tab_text_color_hover',490 [491 'label' => esc_html__( 'Text Color', 'essential-addons-for-elementor-lite' ),492 'type' => Controls_Manager::COLOR,493 // 'default' => '#fff',494 'selectors' => [495 '{{WRAPPER}} .eael-circle-btn:hover .eael-circle-btn-txt, {{WRAPPER}} .eael-circle-btn.active:hover .eael-circle-btn-txt' => 'color: {{VALUE}}!important;',496 ],497 ]498 );499 $this->add_control(500 'eael_interactive_circle_tab_icon_color_hover',501 [502 'label' => esc_html__( 'Icon Color', 'essential-addons-for-elementor-lite' ),503 'type' => Controls_Manager::COLOR,504 // 'default' => '#fff',505 'selectors' => [506 '{{WRAPPER}} .eael-circle-btn:hover i, {{WRAPPER}} .eael-circle-btn.active:hover i' => 'color: {{VALUE}}!important;',507 '{{WRAPPER}} .eael-circle-btn:hover svg, {{WRAPPER}} .eael-circle-btn.active:hover svg' => 'fill: {{VALUE}}!important;',508 ],509 'condition' => [510 'eael_interactive_circle_btn_icon_show' => 'yes'511 ],512 ]513 );514 $this->add_control(515 'eael_interactive_circle_btn_border_color_hover',516 [517 'label' => esc_html__( 'Border Color', 'essential-addons-for-elementor-lite' ),518 'type' => Controls_Manager::COLOR,519 // 'default' => '#fff',520 'selectors' => [521 '{{WRAPPER}} .eael-circle-btn:hover, {{WRAPPER}} .eael-circle-btn.active:hover' => 'border-color: {{VALUE}}!important;',522 ],523 'condition' => [524 'eael_interactive_circle_btn_border_border!' => ''525 ],526 ]527 );528 $this->add_group_control(529 Group_Control_Box_Shadow::get_type(),530 [531 'name' => 'eael_interactive_circle_btn_shadow_hover',532 'selector' => '{{WRAPPER}} .eael-circle-wrapper .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn:hover',533 ]534 );535 $this->end_controls_tab();536 // Active State Tab537 $this->start_controls_tab( 'eael_interactive_circle_header_active', [ 'label' => esc_html__( 'Active', 'essential-addons-for-elementor-lite' ) ] );538 $this->add_control(539 'eael_interactive_circle_tab_color_active',540 [541 'label' => esc_html__( 'Background Color', 'essential-addons-for-elementor-lite' ),542 'type' => Controls_Manager::COLOR,543 'selectors' => [544 '{{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-1 .eael-circle-btn.active .eael-circle-btn-icon, {{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-btn.active .eael-circle-btn-icon' => 'background-color: {{VALUE}}!important;',545 '{{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-3 .eael-circle-btn.active .eael-circle-icon-inner, {{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-4 .eael-circle-btn.active .eael-circle-icon-inner' => 'background-color: {{VALUE}}!important;',546 '{{WRAPPER}} .eael-circle-btn.active .eael-circle-btn-icon' => 'background-color: {{VALUE}}!important;',547 ],548 ]549 );550 $this->add_control(551 'eael_interactive_circle_tab_text_color_active',552 [553 'label' => esc_html__( 'Text Color', 'essential-addons-for-elementor-lite' ),554 'type' => Controls_Manager::COLOR,555 'selectors' => [556 '{{WRAPPER}} .eael-circle-btn.active .eael-circle-btn-txt' => 'color: {{VALUE}}!important;',557 ],558 ]559 );560 $this->add_control(561 'eael_interactive_circle_tab_icon_color_active',562 [563 'label' => esc_html__( 'Icon Color', 'essential-addons-for-elementor-lite' ),564 'type' => Controls_Manager::COLOR,565 // 'default' => '#fff',566 'selectors' => [567 '{{WRAPPER}} .eael-circle-btn.active i' => 'color: {{VALUE}}!important;',568 '{{WRAPPER}} .eael-circle-btn.active svg' => 'fill: {{VALUE}}!important;',569 ],570 'condition' => [571 'eael_interactive_circle_btn_icon_show' => 'yes'572 ],573 ]574 );575 $this->add_control(576 'eael_interactive_circle_btn_border_color_active',577 [578 'label' => esc_html__( 'Border Color', 'essential-addons-for-elementor-lite' ),579 'type' => Controls_Manager::COLOR,580 // 'default' => '#fff',581 'selectors' => [582 '{{WRAPPER}} .eael-circle-btn.active' => 'border-color: {{VALUE}}!important;',583 ],584 'condition' => [585 'eael_interactive_circle_btn_border_border!' => ''586 ],587 ]588 );589 $this->add_group_control(590 Group_Control_Box_Shadow::get_type(),591 [592 'name' => 'eael_interactive_circle_btn_shadow_active',593 'selector' => '{{WRAPPER}} .eael-circle-wrapper .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn.active',594 ]595 );596 $this->end_controls_tab();597 $this->end_controls_tabs();598 $this->end_controls_section();599 }600 protected function eael_interactive_circle_content_style() {601 $this->start_controls_section(602 'eael_section_interactive_circle_tab_content_style_settings',603 [604 'label' => esc_html__( 'Content', 'essential-addons-for-elementor-lite' ),605 'tab' => Controls_Manager::TAB_STYLE,606 ]607 );608 $this->add_control(609 'eael_section_interactive_circle_content_bg_color',610 [611 'label' => esc_html__( 'Background Color', 'essential-addons-for-elementor-lite' ),612 'type' => Controls_Manager::COLOR,613 'default' => '',614 'selectors' => [615 '{{WRAPPER}} .eael-circle-content' => 'background: {{VALUE}} !important;',616 '{{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-3 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn-content .eael-circle-content' => 'background: {{VALUE}} !important;',617 '{{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-4 .eael-circle-info .eael-circle-item .eael-circle-btn-content .eael-circle-content' => 'background: {{VALUE}} !important;',618 ],619 'condition' => [620 'eael_interactive_circle_preset!' => 'eael-interactive-circle-preset-2'621 ],622 ]623 );624 $this->add_control(625 'eael_section_interactive_circle_content_text_color',626 [627 'label' => esc_html__( 'Text Color', 'essential-addons-for-elementor-lite' ),628 'type' => Controls_Manager::COLOR,629 // 'default' => '#333',630 'selectors' => [631 '{{WRAPPER}} .eael-circle-content' => 'color: {{VALUE}};',632 ],633 ]634 );635 $this->add_group_control(636 Group_Control_Typography::get_type(),637 [638 'name' => 'eael_interactive_circle_content_typo',639 'selector' => '{{WRAPPER}} .eael-circle-content',640 ]641 );642 $this->add_responsive_control(643 'eael_interactive_circle_content_padding',644 [645 'label' => esc_html__( 'Padding', 'essential-addons-for-elementor-lite' ),646 'type' => Controls_Manager::DIMENSIONS,647 'size_units' => [ 'px', 'em', '%' ],648 'selectors' => [649 '{{WRAPPER}} .eael-circle-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',650 ],651 ]652 );653 $this->add_responsive_control(654 'eael_interactive_circle_content_margin',655 [656 'label' => esc_html__( 'Margin', 'essential-addons-for-elementor-lite' ),657 'type' => Controls_Manager::DIMENSIONS,658 'size_units' => [ 'px', 'em', '%' ],659 'selectors' => [660 '{{WRAPPER}} .eael-circle-btn-content' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',661 ],662 ]663 );664 $this->add_group_control(665 Group_Control_Border::get_type(),666 [667 'name' => 'eael_interactive_circle_content_border',668 'label' => esc_html__( 'Border', 'essential-addons-for-elementor-lite' ),669 'selector' => '{{WRAPPER}} .eael-circle-content',670 ]671 );672 $this->add_group_control(673 Group_Control_Box_Shadow::get_type(),674 [675 'name' => 'eael_interactive_circle_content_shadow',676 'selector' => '{{WRAPPER}} .eael-circle-wrapper:not(.eael-interactive-circle-preset-1) .eael-circle-content, {{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-3 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn-content .eael-circle-content, {{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-1 .eael-circle-inner',677 'condition' => [678 'eael_interactive_circle_preset!' => 'eael-interactive-circle-preset-2'679 ],680 ]681 );682 $this->end_controls_section();683 }684 protected function _register_controls() {685 $this->eael_interactive_circle_general();686 $this->eael_interactive_circle_item();687 $this->eael_interactive_circle_additional();688 $this->eael_interactive_circle_general_style();689 $this->eael_interactive_circle_button_style();690 $this->eael_interactive_circle_content_style();691 }692 protected function render() {693 $settings = $this->get_settings_for_display();694 $this->add_render_attribute(695 'eael_interactive_circle_container',696 [697 'id' => "eael-interactive-circle-{$this->get_id()}",698 'class' => [ 'eael-interactive-circle', ],699 'data-tabid' => $this->get_id(),700 ]701 );702 $this->add_render_attribute(703 'eael_circle_wrapper',704 [705 'class' => [ 'eael-circle-wrapper', $settings[ 'eael_interactive_circle_preset' ], $settings[ 'eael_interactive_circle_animation' ], $settings[ 'eael_interactive_circle_event' ] ],706 ]707 );708 $item_count = count( $settings[ 'eael_interactive_circle_item' ] );709 $show_btn_icon = isset( $settings[ 'eael_interactive_circle_btn_icon_show' ] ) && 'yes' === $settings[ 'eael_interactive_circle_btn_icon_show' ];710 $show_btn_title = isset( $settings[ 'eael_interactive_circle_btn_text_show' ] ) && 'yes' === $settings[ 'eael_interactive_circle_btn_text_show' ];711 ?>712 <div <?php echo $this->get_render_attribute_string( 'eael_interactive_circle_container' ); ?>>713 <?php if ( ( $settings[ 'eael_interactive_circle_preset' ] != 'eael-interactive-circle-preset-2' ) ) { ?>714 <div <?php echo $this->get_render_attribute_string( 'eael_circle_wrapper' ); ?>>715 <div class="eael-circle-info" data-items="<?php echo $item_count; ?>">716 <div class="eael-circle-inner">717 <?php foreach ( $settings[ 'eael_interactive_circle_item' ] as $index => $item ) :718 $item_count = $index + 1;719 ?>720 <div class="eael-circle-item elementor-repeater-item-<?php echo $item[ '_id' ]; ?>">721 <div class="eael-circle-btn" id="eael-circle-item-<?php echo $item_count; ?>">722 <div class="eael-circle-icon-shapes">723 <div class="eael-shape-1"></div>724 <div class="eael-shape-2"></div>725 </div>726 <div class="eael-circle-btn-icon">727 <div class="eael-circle-icon-inner">728 <?php729 if ( $show_btn_icon ) {730 Icons_Manager::render_icon( $item[ 'eael_interactive_circle_btn_icon' ] );731 }732 if ( $show_btn_title ) {733 echo '<span class="eael-circle-btn-txt">' . $item[ 'eael_interactive_circle_btn_title' ] . '</span>';734 }735 ?>736 </div>737 </div>738 </div>739 <div class="eael-circle-btn-content eael-circle-item-<?php echo $item_count; ?>">740 <div class="eael-circle-content">741 <?php echo $item[ 'eael_interactive_circle_item_content' ] ?>742 </div>743 </div>744 </div>745 <?php endforeach; ?>746 </div>747 </div>748 </div>749 <?php } else { ?>750 <div <?php echo $this->get_render_attribute_string( 'eael_circle_wrapper' ); ?>>751 <div class="eael-circle-info">752 <div class="eael-circle-inner" data-items="<?php echo $item_count; ?>">753 <?php foreach ( $settings[ 'eael_interactive_circle_item' ] as $index => $item ) :754 $item_count = $index + 1;755 ?>756 <div class="eael-circle-item elementor-repeater-item-<?php echo $item[ '_id' ]; ?>">757 <div class="eael-circle-btn" id="eael-circle-item-<?php echo $item_count; ?>">758 <div class="eael-circle-icon-shapes">759 <div class="eael-shape-1"></div>760 <div class="eael-shape-2"></div>761 </div>762 <div class="eael-circle-btn-icon">763 <div class="eael-circle-btn-icon-inner">764 <?php765 if ( $show_btn_icon ) {766 Icons_Manager::render_icon( $item[ 'eael_interactive_circle_btn_icon' ] );767 }768 if ( $show_btn_title ) {769 echo '<span class="eael-circle-btn-txt">' . $item[ 'eael_interactive_circle_btn_title' ] . '</span>';770 }771 ?>772 </div>773 </div>774 </div>775 <div class="eael-circle-btn-content eael-circle-item-<?php echo $item_count; ?>">776 <div class="eael-circle-content">777 <?php echo $item[ 'eael_interactive_circle_item_content' ] ?>778 </div>779 </div>780 </div>781 <?php endforeach; ?>782 </div>783 </div>784 </div>785 <?php } ?>786 </div>787 <?php }788}...
interactive
Using AI Code Generation
1$interactive = new pts_interactive_mode();2$test_profile = new pts_test_profile();3$result_file_parser = new pts_result_file_parser();4$result_file_writer = new pts_result_file_writer();5$result_file_analyser = new pts_result_file_analyser();6$result_file_formatter = new pts_result_file_formatter();7$result_file_system = new pts_result_file_system();8$result_object = new pts_result();9$openbenchmarking = new pts_openbenchmarking();10$openbenchmarking_result_file_download = new pts_openbenchmarking_result_file_download();11$openbenchmarking_result_file_upload = new pts_openbenchmarking_result_file_upload();12$openbenchmarking_test_profile_download = new pts_openbenchmarking_test_profile_download();13$openbenchmarking_test_profile_upload = new pts_openbenchmarking_test_profile_upload();14$openbenchmarking_test_profile_file_upload = new pts_openbenchmarking_test_profile_file_upload();15$openbenchmarking_test_profile_file_download = new pts_openbenchmarking_test_profile_file_download();16$openbenchmarking_test_profile_comparison = new pts_openbenchmarking_test_profile_comparison();
interactive
Using AI Code Generation
1require_once('interactive.php');2$interactive = new interactive();3$interactive->set_title("My Test");4$interactive->set_description("This is a test description");5$interactive->set_test_name("My Test");6$interactive->set_test_version("1.0");7$interactive->set_test_profile('My Test Profile');8$interactive->set_arguments(array('arg1' => 'value1', 'arg2' => 'value2'));9$interactive->set_result_proportion('My Test Profile', 'Result 1', 'Result 2', 'Result 3');10$interactive->set_result_proportion('My Test Profile', 'Result 4', 'Result 5', 'Result 6');11$interactive->set_result_proportion('My Test Profile', 'Result 7', 'Result 8', 'Result 9');12$interactive->set_result_proportion('My Test Profile', 'Result 10', 'Result 11', 'Result 12');13$interactive->set_result_proportion('My Test Profile', 'Result 13', 'Result 14', 'Result 15');14$interactive->set_result_proportion('My Test Profile', 'Result 16', 'Result 17', 'Result 18');15$interactive->set_result_proportion('My Test Profile', 'Result 19', 'Result 20', 'Result 21');16$interactive->set_result_proportion('My Test Profile', 'Result 22', 'Result 23', 'Result 24');17$interactive->set_result_proportion('My Test Profile', 'Result 25', 'Result 26', 'Result 27');18$interactive->set_result_proportion('My Test Profile', 'Result 28', 'Result 29', 'Result 30');19$interactive->set_result_proportion('My Test Profile', 'Result 31', 'Result 32', 'Result 33');20$interactive->set_result_proportion('My Test Profile', 'Result 34', 'Result 35', 'Result 36');21$interactive->set_result_proportion('My Test Profile', 'Result 37', 'Result 38', 'Result 39');22$interactive->set_result_proportion('My Test Profile', 'Result 40', 'Result 41', 'Result 42');23$interactive->set_result_proportion('My Test Profile', 'Result 43', 'Result 44', 'Result 45');
interactive
Using AI Code Generation
1$test = new interactive;2$test->setTestName('test');3$test->setTestVersion('1.0');4$test->setTestDescription('This is a test');5$test->setTestAuthor('Test');6$test->setTestLicense('GPLv2');7$test->setTestHelp('This is a test');8$test->setTestArguments(array('1','2','3'));9$test->setTestArgumentsDescription(array('Test 1','Test 2','Test 3'));10$test->setTestArgumentsType(array('text','text','text'));11$test->setTestArgumentsDefault(array('1','2','3'));12$test->setTestArgumentsRequired(array('1','2','3'));13$test->setTestArgumentsDisplayType(array(
interactive
Using AI Code Generation
1include 'interactive.php';2$test_name = "test_name";3$test_description = "test_description";4$interactive = new interactive($test_name, $test_description);5$interactive->set_interactive_mode();6$interactive->set_test_result();7$interactive->set_test_result_description();8$interactive->set_test_result_pass();9$interactive->set_test_result_fail();10$interactive->set_test_result_skip();11$interactive->set_test_result_na();12$interactive->set_test_result_unknown();13$interactive->set_test_result_nodata();14$interactive->set_test_result_norun();15$interactive->set_test_result_error();16$interactive->set_test_result_warning();17$interactive->set_test_result_notice();18$interactive->set_test_result_info();19$interactive->set_test_result_debug();20$interactive->set_test_result_benchmark();21$interactive->set_test_result_benchmark_min();22$interactive->set_test_result_benchmark_max();23$interactive->set_test_result_benchmark_units();24$interactive->set_test_result_benchmark_precision();25$interactive->set_test_result_benchmark_type();
interactive
Using AI Code Generation
1require_once('interactive.php');2$interactive = new interactive('2.php');3$interactive->set_title('Test Suite Interactive Example');4$interactive->set_description('This example is designed to demonstrate the interactive class of Phoronix-test-suite. The interactive class can be used to create a custom user interface for test suites. This example is using the test suite interactive class to create a simple test suite that will run a few tests.');5$interactive->set_test_suite('test-suite');6$interactive->add_test('test1', 'Test 1', 'This is a description of test 1.');7$interactive->add_test('test2', 'Test 2', 'This is a description of test 2.');8$interactive->add_test('test3', 'Test 3', 'This is a description of test 3.');9$interactive->add_option('option1', 'Option 1', 'This is a description of option 1.', 'value1', 'value2');10$interactive->add_option('option2', 'Option 2', 'This is a description of option 2.', 'value3', 'value4');11$interactive->add_result('result1', 'Result 1', 'This is a description of result 1.');12$interactive->add_result('result2', 'Result 2', 'This is a description of result 2.');13$interactive->add_result('result3', 'Result 3', 'This is a description of result 3.');14$interactive->add_result('result4', 'Result 4', 'This is a description of result 4.');15$interactive->add_result('result5', 'Result 5', 'This is a description of result 5.');16$interactive->add_result('result6', 'Result 6', 'This is a description of result 6.');17$interactive->add_result('result7', 'Result 7', 'This is a description of result 7.');18$interactive->add_result('result8', 'Result 8', 'This is a description of result 8.');19$interactive->add_result('result9', 'Result 9', 'This is a description of result 9.');
interactive
Using AI Code Generation
1$interactive = new pts_interactive_mode();2$interactive->run_test('test1', array('test1-args'));3$interactive->run_test('test2', array('test2-args'));4$interactive->run_test('test3', array('test3-args'));5$interactive->run_test('test4', array('test4-args'));6$interactive->run_test('test5', array('test5-args'));7$interactive->run_test('test6', array('test6-args'));8$test1_result = $interactive->get_result('test1');9$test2_result = $interactive->get_result('test2');10$test3_result = $interactive->get_result('test3');11$test4_result = $interactive->get_result('test4');12$test5_result = $interactive->get_result('test5');13$test6_result = $interactive->get_result('test6');14$test1_result_json = $interactive->get_result_json('test1');15$test2_result_json = $interactive->get_result_json('test2');16$test3_result_json = $interactive->get_result_json('test3');17$test4_result_json = $interactive->get_result_json('test4');18$test5_result_json = $interactive->get_result_json('test5');19$test6_result_json = $interactive->get_result_json('test6');20$test1_result_xml = $interactive->get_result_xml('test1');21$test2_result_xml = $interactive->get_result_xml('test2');22$test3_result_xml = $interactive->get_result_xml('test3');23$test4_result_xml = $interactive->get_result_xml('test4');24$test5_result_xml = $interactive->get_result_xml('test5');25$test6_result_xml = $interactive->get_result_xml('test6');26$test1_result_csv = $interactive->get_result_csv('test1');27$test2_result_csv = $interactive->get_result_csv('test2');28$test3_result_csv = $interactive->get_result_csv('test3');29$test4_result_csv = $interactive->get_result_csv('
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run Phoronix-test-suite automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Most used methods in interactive
Run Selenium Automation Tests on LambdaTest Cloud Grid
Trigger Selenium automation tests on a cloud-based Grid of 3000+ real browsers and operating systems.
Test now for FreeTry LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
