diff --git a/includes/managers/widgets.php b/includes/managers/widgets.php index b447f34c4f2b..7928b8bc14f5 100644 --- a/includes/managers/widgets.php +++ b/includes/managers/widgets.php @@ -63,6 +63,7 @@ private function init_widgets() { 'common', 'inner-section', 'heading', + 'table', 'image', 'text-editor', 'video', diff --git a/includes/widgets/table.php b/includes/widgets/table.php new file mode 100644 index 000000000000..1a21549dae62 --- /dev/null +++ b/includes/widgets/table.php @@ -0,0 +1,324 @@ +start_controls_section( + 'content_section', + [ + 'label' => esc_html__( 'Table content', 'elementor' ), + 'tab' => \Elementor\Controls_Manager::TAB_CONTENT, + ] + ); + + $this->add_control( + 'show_title', + [ + 'label' => esc_html__( 'Show Columns Titles', 'elementor' ), + 'type' => \Elementor\Controls_Manager::SWITCHER, + 'label_on' => esc_html__( 'Show', 'elementor' ), + 'label_off' => esc_html__( 'Hide', 'elementor' ), + 'return_value' => 'yes', + 'default' => 'yes', + ] + ); + + $this->add_control( + 'column_one', + [ + 'label' => esc_html__( 'Title column 1', 'elementor' ), + 'type' => Controls_Manager::TEXT, + 'label_block' => true, + 'placeholder' => esc_html__( 'Enter column title', 'elementor' ), + 'dynamic' => [ + 'active' => true, + ], + ] + ); + + $this->add_control( + 'column_two', + [ + 'label' => esc_html__( 'Title column 2', 'elementor' ), + 'type' => Controls_Manager::TEXT, + 'label_block' => true, + 'placeholder' => esc_html__( 'Enter column title', 'elementor' ), + 'dynamic' => [ + 'active' => true, + ], + ] + ); + + $this->add_control( + 'column_three', + [ + 'label' => esc_html__( 'Title column 3', 'elementor' ), + 'type' => Controls_Manager::TEXT, + 'label_block' => true, + 'placeholder' => esc_html__( 'Enter column title', 'elementor' ), + 'dynamic' => [ + 'active' => true, + ], + ] + ); + + $this->add_control( + 'rows', + [ + 'label' => esc_html__( "Content rows", 'elementor' ), + 'show_label' => true, + 'type' => \Elementor\Controls_Manager::REPEATER, + 'fields' => [ + [ + 'name' => 'column_content_one', + 'label' => esc_html__( 'Content column 1', 'elementor' ), + 'type' => \Elementor\Controls_Manager::TEXT, + 'label_block' => false, + ], + [ + 'name' => 'column_content_two', + 'label' => esc_html__( 'column content 2', 'elementor' ), + 'type' => \Elementor\Controls_Manager::TEXT, + 'label_block' => false, + ], + [ + 'name' => 'column_content_three', + 'label' => esc_html__( 'column content 3', 'elementor' ), + 'type' => \Elementor\Controls_Manager::TEXT, + 'label_block' => false, + ], + ], + 'title_field' => esc_html__( 'row', 'elementor'), + + ] + ); + + + $this->end_controls_section(); + + $this->start_controls_section( + 'style_section', + [ + 'label' => esc_html__( 'Style', 'elementor' ), + 'tab' => \Elementor\Controls_Manager::TAB_STYLE, + ] + ); + + $this->add_control( + 'table_head_color', + [ + 'label' => esc_html__( 'Table head Color', 'elementor' ), + 'type' => \Elementor\Controls_Manager::COLOR, + 'global' => [ + 'default' => Global_Colors::COLOR_TEXT, + ], + 'selectors' => [ + '{{WRAPPER}} .table_head' => 'color: {{VALUE}};', + ], + ] + ); + + $this->add_control( + 'table_head_background_color', + [ + 'label' => esc_html__( 'Table head background Color', 'elementor' ), + 'type' => \Elementor\Controls_Manager::COLOR, + 'global' => [ + 'default' => Global_Colors::COLOR_ACCENT, + ], + 'selectors' => [ + '{{WRAPPER}} .table_head' => 'background-color: {{VALUE}};', + ], + ] + ); + + $this->add_group_control( + \Elementor\Group_Control_Typography::get_type(), + [ + 'name' => 'sub_heading_typography', + 'global' => [ + 'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Typography::TYPOGRAPHY_SECONDARY, + ], + 'selector' => '{{WRAPPER}} .table_head', + ] + ); + + $this->add_group_control( + \Elementor\Group_Control_Border::get_type(), + [ + 'name' => 'border', + 'selector' => '{{WRAPPER}} .table_head', + ] + ); + + $this->end_controls_section(); + + } + + /** + * Render table widget output on the frontend. + * + * Written in PHP and used to generate the final HTML. + * + * @since 1.0.0 + * @access protected + */ + + protected function render() { + $settings = $this->get_settings_for_display(); + + echo ''; + if ( 'yes' === $settings['show_title'] ) { + echo ''; + echo ''; + echo ''; + echo ''; + echo ''; + echo ''; + echo ''; + } + + if ( $settings['rows'] ) { + echo ''; + $rows = $settings['rows']; + for ($i=0; $i <= count($rows) - 1; $i++) { + echo ''; + echo ''; + echo ''; + echo ''; + echo ''; + } + + echo ''; + }; + echo '
' . $settings['column_one'] . '' . $settings['column_two'] . '' . $settings['column_three'] . '
' .$rows[$i]['column_content_one'] . '' .$rows[$i]['column_content_two'] . '' .$rows[$i]['column_content_three'] . '
'; + } + + + protected function content_template() { + ?> + + + <# if ( 'yes' === settings.show_title ) { #> + + + + + + + + <# } #> + + <# if ( settings.rows.length ) { #> + + <# let rows = settings.rows #> + <# for( let i = 0; i <= rows.length - 1; i++ ){ #> + + + + + + <# } #> + + <# } #> +
{{{ settings.column_one }}}{{{ settings.column_two }}}{{{ settings.column_three }}}
{{{ rows[i].column_content_one }}}{{{ rows[i].column_content_two }}}{{{ rows[i].column_content_three }}}
+