591 lines
15 KiB
PHP
591 lines
15 KiB
PHP
<?php
|
|
if (!defined('ABSPATH')) {
|
|
exit;
|
|
}
|
|
|
|
use Elementor\Widget_Base;
|
|
use Elementor\Controls_Manager;
|
|
use Elementor\Group_Control_Box_Shadow;
|
|
use Elementor\Group_Control_Border;
|
|
use Elementor\Group_Control_Typography;
|
|
|
|
class Elementor_Review_Box extends Widget_Base {
|
|
|
|
public function get_name() {
|
|
return 'review_box';
|
|
}
|
|
|
|
public function get_title() {
|
|
return esc_html__('Review Box', 'elementor-addon');
|
|
}
|
|
|
|
public function get_icon() {
|
|
return 'eicon-testimonial';
|
|
}
|
|
|
|
public function get_categories() {
|
|
return ['basic'];
|
|
}
|
|
|
|
public function get_keywords() {
|
|
return ['review', 'testimonial', 'feedback', 'rating'];
|
|
}
|
|
|
|
public function get_style_depends() {
|
|
return ['elementor-addon-main-css'];
|
|
}
|
|
|
|
public function get_script_depends() {
|
|
return ['elementor-addon-main-js'];
|
|
}
|
|
|
|
protected function register_controls() {
|
|
|
|
$this->start_controls_section(
|
|
'section_content',
|
|
[
|
|
'label' => esc_html__('Content', 'elementor-addon'),
|
|
'tab' => Controls_Manager::TAB_CONTENT,
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'rating',
|
|
[
|
|
'label' => esc_html__('Rating', 'elementor-addon'),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => '5',
|
|
'options' => [
|
|
'0' => '0',
|
|
'1' => '1',
|
|
'2' => '2',
|
|
'3' => '3',
|
|
'4' => '4',
|
|
'5' => '5',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'review_text',
|
|
[
|
|
'label' => esc_html__('Review Text', 'elementor-addon'),
|
|
'type' => Controls_Manager::TEXTAREA,
|
|
'rows' => 6,
|
|
'default' => '"Uitstekend schilderwerk! Het team was professioneel, punctueel en het eindresultaat is prachtig. Ons hele huis ziet er weer als nieuw uit."',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'author_name',
|
|
[
|
|
'label' => esc_html__('Author Name', 'elementor-addon'),
|
|
'type' => Controls_Manager::TEXT,
|
|
'default' => 'Peter de Vries',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'author_location',
|
|
[
|
|
'label' => esc_html__('Location', 'elementor-addon'),
|
|
'type' => Controls_Manager::TEXT,
|
|
'default' => 'Amsterdam',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'author_initials',
|
|
[
|
|
'label' => esc_html__('Initials', 'elementor-addon'),
|
|
'type' => Controls_Manager::TEXT,
|
|
'default' => 'PV',
|
|
'description' => esc_html__('Displayed inside the circle avatar.', 'elementor-addon'),
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'show_quote_icon',
|
|
[
|
|
'label' => esc_html__('Show Quote Icon', 'elementor-addon'),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'label_on' => esc_html__('Show', 'elementor-addon'),
|
|
'label_off' => esc_html__('Hide', 'elementor-addon'),
|
|
'return_value' => 'yes',
|
|
'default' => 'yes',
|
|
]
|
|
);
|
|
|
|
$this->end_controls_section();
|
|
|
|
$this->start_controls_section(
|
|
'section_box_style',
|
|
[
|
|
'label' => esc_html__('Box', 'elementor-addon'),
|
|
'tab' => Controls_Manager::TAB_STYLE,
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'box_bg_color',
|
|
[
|
|
'label' => esc_html__('Background Color', 'elementor-addon'),
|
|
'type' => Controls_Manager::COLOR,
|
|
'default' => '#FFFFFF',
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-review-box' => 'background-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'box_border_color',
|
|
[
|
|
'label' => esc_html__('Border Color', 'elementor-addon'),
|
|
'type' => Controls_Manager::COLOR,
|
|
'default' => '#EAEAEA',
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-review-box' => 'border-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'box_border_radius',
|
|
[
|
|
'label' => esc_html__('Border Radius', 'elementor-addon'),
|
|
'type' => Controls_Manager::DIMENSIONS,
|
|
'size_units' => ['px', '%', 'em', 'rem'],
|
|
'default' => [
|
|
'top' => 28,
|
|
'right' => 28,
|
|
'bottom' => 28,
|
|
'left' => 28,
|
|
'unit' => 'px',
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-review-box' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'box_padding',
|
|
[
|
|
'label' => esc_html__('Padding', 'elementor-addon'),
|
|
'type' => Controls_Manager::DIMENSIONS,
|
|
'size_units' => ['px', '%', 'em', 'rem'],
|
|
'default' => [
|
|
'top' => 42,
|
|
'right' => 48,
|
|
'bottom' => 42,
|
|
'left' => 48,
|
|
'unit' => 'px',
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-review-box' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'box_min_height',
|
|
[
|
|
'label' => esc_html__('Min Height', 'elementor-addon'),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => ['px'],
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 150,
|
|
'max' => 800,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => 360,
|
|
'unit' => 'px',
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-review-box' => 'min-height: {{SIZE}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Border::get_type(),
|
|
[
|
|
'name' => 'box_border',
|
|
'selector' => '{{WRAPPER}} .elementor-review-box',
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Box_Shadow::get_type(),
|
|
[
|
|
'name' => 'box_shadow',
|
|
'selector' => '{{WRAPPER}} .elementor-review-box',
|
|
]
|
|
);
|
|
|
|
$this->end_controls_section();
|
|
|
|
$this->start_controls_section(
|
|
'section_stars_style',
|
|
[
|
|
'label' => esc_html__('Stars', 'elementor-addon'),
|
|
'tab' => Controls_Manager::TAB_STYLE,
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'stars_color',
|
|
[
|
|
'label' => esc_html__('Stars Color', 'elementor-addon'),
|
|
'type' => Controls_Manager::COLOR,
|
|
'default' => '#F4C214',
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-review-box__star' => 'color: {{VALUE}};',
|
|
'{{WRAPPER}} .elementor-review-box__star svg' => 'fill: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'stars_size',
|
|
[
|
|
'label' => esc_html__('Size', 'elementor-addon'),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => ['px'],
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 10,
|
|
'max' => 50,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => 28,
|
|
'unit' => 'px',
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-review-box__star' => 'font-size: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'stars_gap',
|
|
[
|
|
'label' => esc_html__('Gap', 'elementor-addon'),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => ['px'],
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 20,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => 8,
|
|
'unit' => 'px',
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-review-box__stars' => 'gap: {{SIZE}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_section();
|
|
|
|
$this->start_controls_section(
|
|
'section_text_style',
|
|
[
|
|
'label' => esc_html__('Review Text', 'elementor-addon'),
|
|
'tab' => Controls_Manager::TAB_STYLE,
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'review_text_color',
|
|
[
|
|
'label' => esc_html__('Color', 'elementor-addon'),
|
|
'type' => Controls_Manager::COLOR,
|
|
'default' => '#222B3A',
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-review-box__text' => 'color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Typography::get_type(),
|
|
[
|
|
'name' => 'review_text_typography',
|
|
'selector' => '{{WRAPPER}} .elementor-review-box__text',
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'review_text_spacing',
|
|
[
|
|
'label' => esc_html__('Bottom Spacing', 'elementor-addon'),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => ['px'],
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 100,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => 34,
|
|
'unit' => 'px',
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-review-box__content' => 'margin-bottom: {{SIZE}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_section();
|
|
|
|
$this->start_controls_section(
|
|
'section_author_style',
|
|
[
|
|
'label' => esc_html__('Author', 'elementor-addon'),
|
|
'tab' => Controls_Manager::TAB_STYLE,
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'author_name_color',
|
|
[
|
|
'label' => esc_html__('Name Color', 'elementor-addon'),
|
|
'type' => Controls_Manager::COLOR,
|
|
'default' => '#1F2737',
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-review-box__name' => 'color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Typography::get_type(),
|
|
[
|
|
'name' => 'author_name_typography',
|
|
'selector' => '{{WRAPPER}} .elementor-review-box__name',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'author_location_color',
|
|
[
|
|
'label' => esc_html__('Location Color', 'elementor-addon'),
|
|
'type' => Controls_Manager::COLOR,
|
|
'default' => '#667085',
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-review-box__location' => 'color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Typography::get_type(),
|
|
[
|
|
'name' => 'author_location_typography',
|
|
'selector' => '{{WRAPPER}} .elementor-review-box__location',
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'author_gap',
|
|
[
|
|
'label' => esc_html__('Author Gap', 'elementor-addon'),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => ['px'],
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 40,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => 20,
|
|
'unit' => 'px',
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-review-box__footer' => 'gap: {{SIZE}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_section();
|
|
|
|
$this->start_controls_section(
|
|
'section_avatar_style',
|
|
[
|
|
'label' => esc_html__('Avatar Circle', 'elementor-addon'),
|
|
'tab' => Controls_Manager::TAB_STYLE,
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'avatar_bg_color',
|
|
[
|
|
'label' => esc_html__('Background Color', 'elementor-addon'),
|
|
'type' => Controls_Manager::COLOR,
|
|
'default' => '#F6D6E6',
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-review-box__avatar' => 'background-color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'avatar_text_color',
|
|
[
|
|
'label' => esc_html__('Text Color', 'elementor-addon'),
|
|
'type' => Controls_Manager::COLOR,
|
|
'default' => '#E23D94',
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-review-box__avatar' => 'color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Typography::get_type(),
|
|
[
|
|
'name' => 'avatar_typography',
|
|
'selector' => '{{WRAPPER}} .elementor-review-box__avatar',
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'avatar_size',
|
|
[
|
|
'label' => esc_html__('Size', 'elementor-addon'),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => ['px'],
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 40,
|
|
'max' => 160,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => 96,
|
|
'unit' => 'px',
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-review-box__avatar' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; min-width: {{SIZE}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_section();
|
|
|
|
$this->start_controls_section(
|
|
'section_quote_style',
|
|
[
|
|
'label' => esc_html__('Quote Icon', 'elementor-addon'),
|
|
'tab' => Controls_Manager::TAB_STYLE,
|
|
'condition' => [
|
|
'show_quote_icon' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'quote_color',
|
|
[
|
|
'label' => esc_html__('Color', 'elementor-addon'),
|
|
'type' => Controls_Manager::COLOR,
|
|
'default' => '#F6D6E6',
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-review-box__quote' => 'color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'quote_size',
|
|
[
|
|
'label' => esc_html__('Size', 'elementor-addon'),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => ['px'],
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 20,
|
|
'max' => 120,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => 84,
|
|
'unit' => 'px',
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-review-box__quote' => 'font-size: {{SIZE}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_section();
|
|
}
|
|
|
|
protected function render_stars($rating = 5) {
|
|
$rating = max(0, min(5, absint($rating)));
|
|
|
|
for ($i = 0; $i < $rating; $i++) {
|
|
echo '<span class="elementor-review-box__star" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-4 h-4 fill-yellow-400 text-yellow-400"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></span>';
|
|
}
|
|
}
|
|
|
|
protected function render() {
|
|
$settings = $this->get_settings_for_display();
|
|
|
|
$rating = isset($settings['rating']) ? absint($settings['rating']) : 5;
|
|
$review_text = !empty($settings['review_text']) ? $settings['review_text'] : '';
|
|
$author_name = !empty($settings['author_name']) ? $settings['author_name'] : '';
|
|
$author_location = !empty($settings['author_location']) ? $settings['author_location'] : '';
|
|
$author_initials = !empty($settings['author_initials']) ? $settings['author_initials'] : '';
|
|
$show_quote_icon = !empty($settings['show_quote_icon']) && $settings['show_quote_icon'] === 'yes';
|
|
?>
|
|
<div class="elementor-review-box">
|
|
<div class="elementor-review-box__top">
|
|
<?php if ($rating > 0) : ?>
|
|
<div class="elementor-review-box__stars" aria-label="<?php echo esc_attr(sprintf(__('%d out of 5 stars', 'elementor-addon'), $rating)); ?>">
|
|
<?php $this->render_stars($rating); ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if ($show_quote_icon) : ?>
|
|
<div class="elementor-review-box__quote" aria-hidden="true">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-quote w-12 h-12 text-primary"><path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"></path><path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"></path></svg>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<div class="elementor-review-box__content">
|
|
<div class="elementor-review-box__text"><?php echo nl2br(esc_html($review_text)); ?></div>
|
|
</div>
|
|
|
|
<div class="elementor-review-box__footer">
|
|
<?php if (!empty($author_initials)) : ?>
|
|
<div class="elementor-review-box__avatar">
|
|
<span><?php echo esc_html($author_initials); ?></span>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="elementor-review-box__author">
|
|
<?php if (!empty($author_name)) : ?>
|
|
<div class="elementor-review-box__name"><?php echo esc_html($author_name); ?></div>
|
|
<?php endif; ?>
|
|
|
|
<?php if (!empty($author_location)) : ?>
|
|
<div class="elementor-review-box__location"><?php echo esc_html($author_location); ?></div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php
|
|
}
|
|
}
|