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.