650 lines
16 KiB
PHP
650 lines
16 KiB
PHP
<?php
|
|
namespace ElementorPro\Modules\Posts\Skins;
|
|
|
|
use Elementor\Controls_Manager;
|
|
use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
|
|
use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
|
|
use Elementor\Group_Control_Image_Size;
|
|
use Elementor\Group_Control_Typography;
|
|
use Elementor\Utils;
|
|
use Elementor\Widget_Base;
|
|
|
|
if ( ! defined( 'ABSPATH' ) ) {
|
|
exit; // Exit if accessed directly
|
|
}
|
|
|
|
class Skin_Cards extends Skin_Base {
|
|
|
|
protected function _register_controls_actions() {
|
|
parent::_register_controls_actions();
|
|
|
|
add_action( 'elementor/element/posts/cards_section_design_image/before_section_end', [ $this, 'register_additional_design_image_controls' ] );
|
|
}
|
|
|
|
public function get_id() {
|
|
return 'cards';
|
|
}
|
|
|
|
public function get_title() {
|
|
return esc_html__( 'Cards', 'elementor-pro' );
|
|
}
|
|
|
|
public function start_controls_tab( $id, $args ) {
|
|
$args['condition']['_skin'] = $this->get_id();
|
|
$this->parent->start_controls_tab( $this->get_control_id( $id ), $args );
|
|
}
|
|
|
|
public function end_controls_tab() {
|
|
$this->parent->end_controls_tab();
|
|
}
|
|
|
|
public function start_controls_tabs( $id ) {
|
|
$args['condition']['_skin'] = $this->get_id();
|
|
$this->parent->start_controls_tabs( $this->get_control_id( $id ) );
|
|
}
|
|
|
|
public function end_controls_tabs() {
|
|
$this->parent->end_controls_tabs();
|
|
}
|
|
|
|
public function register_controls( Widget_Base $widget ) {
|
|
$this->parent = $widget;
|
|
|
|
$this->register_columns_controls();
|
|
$this->register_post_count_control();
|
|
$this->register_thumbnail_controls();
|
|
$this->register_title_controls();
|
|
$this->register_excerpt_controls();
|
|
$this->register_meta_data_controls();
|
|
$this->register_read_more_controls();
|
|
$this->register_link_controls();
|
|
$this->register_badge_controls();
|
|
$this->register_avatar_controls();
|
|
}
|
|
|
|
public function register_design_controls() {
|
|
$this->register_design_layout_controls();
|
|
$this->register_design_card_controls();
|
|
$this->register_design_image_controls();
|
|
$this->register_design_content_controls();
|
|
}
|
|
|
|
protected function register_thumbnail_controls() {
|
|
parent::register_thumbnail_controls();
|
|
$this->remove_responsive_control( 'image_width' );
|
|
$this->update_control(
|
|
'thumbnail',
|
|
[
|
|
'label' => esc_html__( 'Show Image', 'elementor-pro' ),
|
|
'options' => [
|
|
'top' => esc_html__( 'Yes', 'elementor-pro' ),
|
|
'none' => esc_html__( 'No', 'elementor-pro' ),
|
|
],
|
|
'render_type' => 'template',
|
|
]
|
|
);
|
|
}
|
|
|
|
protected function register_meta_data_controls() {
|
|
parent::register_meta_data_controls();
|
|
$this->update_control(
|
|
'meta_separator',
|
|
[
|
|
'default' => '•',
|
|
]
|
|
);
|
|
}
|
|
|
|
public function register_additional_design_image_controls() {
|
|
$this->update_control(
|
|
'image_spacing',
|
|
[
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-post__text' => 'margin-top: {{SIZE}}{{UNIT}}',
|
|
],
|
|
'condition' => [
|
|
$this->get_control_id( 'thumbnail!' ) => 'none',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->remove_control( 'img_border_radius' );
|
|
|
|
$this->add_control(
|
|
'heading_badge_style',
|
|
[
|
|
'label' => esc_html__( 'Badge', 'elementor-pro' ),
|
|
'type' => Controls_Manager::HEADING,
|
|
'separator' => 'before',
|
|
'condition' => [
|
|
$this->get_control_id( 'show_badge' ) => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'badge_position',
|
|
[
|
|
'label' => 'Badge Position',
|
|
'type' => Controls_Manager::CHOOSE,
|
|
'options' => [
|
|
'left' => [
|
|
'title' => esc_html__( 'Left', 'elementor-pro' ),
|
|
'icon' => 'eicon-h-align-left',
|
|
],
|
|
'right' => [
|
|
'title' => esc_html__( 'Right', 'elementor-pro' ),
|
|
'icon' => 'eicon-h-align-right',
|
|
],
|
|
],
|
|
'default' => 'right',
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-post__badge' => '{{VALUE}}: 0',
|
|
],
|
|
'condition' => [
|
|
$this->get_control_id( 'show_badge' ) => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'badge_bg_color',
|
|
[
|
|
'label' => esc_html__( 'Background Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-post__card .elementor-post__badge' => 'background-color: {{VALUE}};',
|
|
],
|
|
'global' => [
|
|
'default' => Global_Colors::COLOR_ACCENT,
|
|
],
|
|
'condition' => [
|
|
$this->get_control_id( 'show_badge' ) => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'badge_color',
|
|
[
|
|
'label' => esc_html__( 'Text Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-post__card .elementor-post__badge' => 'color: {{VALUE}};',
|
|
],
|
|
'condition' => [
|
|
$this->get_control_id( 'show_badge' ) => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'badge_radius',
|
|
[
|
|
'label' => esc_html__( 'Border Radius', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 50,
|
|
],
|
|
'em' => [
|
|
'max' => 5,
|
|
],
|
|
'rem' => [
|
|
'max' => 5,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-post__card .elementor-post__badge' => 'border-radius: {{SIZE}}{{UNIT}};',
|
|
],
|
|
'condition' => [
|
|
$this->get_control_id( 'show_badge' ) => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'badge_size',
|
|
[
|
|
'label' => esc_html__( 'Size', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 5,
|
|
'max' => 50,
|
|
],
|
|
'em' => [
|
|
'min' => 0.5,
|
|
'max' => 5,
|
|
],
|
|
'rem' => [
|
|
'min' => 0.5,
|
|
'max' => 5,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-post__card .elementor-post__badge' => 'font-size: {{SIZE}}{{UNIT}}',
|
|
],
|
|
'condition' => [
|
|
$this->get_control_id( 'show_badge' ) => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'badge_margin',
|
|
[
|
|
'label' => esc_html__( 'Margin', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 50,
|
|
],
|
|
'em' => [
|
|
'max' => 5,
|
|
],
|
|
'rem' => [
|
|
'max' => 5,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => 20,
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-post__card .elementor-post__badge' => 'margin: {{SIZE}}{{UNIT}}',
|
|
],
|
|
'condition' => [
|
|
$this->get_control_id( 'show_badge' ) => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Typography::get_type(),
|
|
[
|
|
'name' => 'badge_typography',
|
|
'global' => [
|
|
'default' => Global_Typography::TYPOGRAPHY_ACCENT,
|
|
],
|
|
'selector' => '{{WRAPPER}} .elementor-post__card .elementor-post__badge',
|
|
'exclude' => [ 'font_size', 'line-height' ],
|
|
'condition' => [
|
|
$this->get_control_id( 'show_badge' ) => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'heading_avatar_style',
|
|
[
|
|
'label' => esc_html__( 'Avatar', 'elementor-pro' ),
|
|
'type' => Controls_Manager::HEADING,
|
|
'separator' => 'before',
|
|
'condition' => [
|
|
$this->get_control_id( 'thumbnail!' ) => 'none',
|
|
$this->get_control_id( 'show_avatar' ) => 'show-avatar',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'avatar_size',
|
|
[
|
|
'label' => esc_html__( 'Size', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 100,
|
|
],
|
|
'em' => [
|
|
'max' => 10,
|
|
],
|
|
'rem' => [
|
|
'max' => 10,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-post__avatar' => 'top: calc(-{{SIZE}}{{UNIT}} / 2);',
|
|
'{{WRAPPER}} .elementor-post__avatar img' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
|
|
'{{WRAPPER}} .elementor-post__thumbnail__link' => 'margin-bottom: calc({{SIZE}}{{UNIT}} / 2)',
|
|
],
|
|
'condition' => [
|
|
$this->get_control_id( 'show_avatar' ) => 'show-avatar',
|
|
],
|
|
]
|
|
);
|
|
}
|
|
|
|
public function register_badge_controls() {
|
|
$this->add_control(
|
|
'show_badge',
|
|
[
|
|
'label' => esc_html__( 'Badge', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'label_on' => esc_html__( 'Show', 'elementor-pro' ),
|
|
'label_off' => esc_html__( 'Hide', 'elementor-pro' ),
|
|
'default' => 'yes',
|
|
'separator' => 'before',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'badge_taxonomy',
|
|
[
|
|
'label' => esc_html__( 'Badge Taxonomy', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SELECT2,
|
|
'label_block' => true,
|
|
'default' => 'category',
|
|
'options' => $this->get_taxonomies(),
|
|
'condition' => [
|
|
$this->get_control_id( 'show_badge' ) => 'yes',
|
|
],
|
|
]
|
|
);
|
|
}
|
|
|
|
public function register_avatar_controls() {
|
|
$this->add_control(
|
|
'show_avatar',
|
|
[
|
|
'label' => esc_html__( 'Avatar', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'label_on' => esc_html__( 'Show', 'elementor-pro' ),
|
|
'label_off' => esc_html__( 'Hide', 'elementor-pro' ),
|
|
'return_value' => 'show-avatar',
|
|
'default' => 'show-avatar',
|
|
'separator' => 'before',
|
|
'prefix_class' => 'elementor-posts--',
|
|
'render_type' => 'template',
|
|
'condition' => [
|
|
$this->get_control_id( 'thumbnail!' ) => 'none',
|
|
],
|
|
]
|
|
);
|
|
}
|
|
|
|
public function register_design_card_controls() {
|
|
$this->start_controls_section(
|
|
'section_design_card',
|
|
[
|
|
'label' => esc_html__( 'Card', 'elementor-pro' ),
|
|
'tab' => Controls_Manager::TAB_STYLE,
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'card_bg_color',
|
|
[
|
|
'label' => esc_html__( 'Background Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-post__card' => 'background-color: {{VALUE}}',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'card_border_color',
|
|
[
|
|
'label' => esc_html__( 'Border Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-post__card' => 'border-color: {{VALUE}}',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'card_border_width',
|
|
[
|
|
'label' => esc_html__( 'Border Width', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 20,
|
|
],
|
|
'em' => [
|
|
'max' => 2,
|
|
],
|
|
'rem' => [
|
|
'max' => 2,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-post__card' => 'border-width: {{SIZE}}{{UNIT}}',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'card_border_radius',
|
|
[
|
|
'label' => esc_html__( 'Border Radius', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 200,
|
|
],
|
|
'em' => [
|
|
'max' => 20,
|
|
],
|
|
'rem' => [
|
|
'max' => 20,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-post__card' => 'border-radius: {{SIZE}}{{UNIT}}',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'card_padding',
|
|
[
|
|
'label' => esc_html__( 'Horizontal Padding', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 50,
|
|
],
|
|
'em' => [
|
|
'max' => 5,
|
|
],
|
|
'rem' => [
|
|
'max' => 5,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-post__text' => 'padding: 0 {{SIZE}}{{UNIT}}',
|
|
'{{WRAPPER}} .elementor-post__meta-data' => 'padding: 10px {{SIZE}}{{UNIT}}',
|
|
'{{WRAPPER}} .elementor-post__avatar' => 'padding-right: {{SIZE}}{{UNIT}}; padding-left: {{SIZE}}{{UNIT}}',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'card_vertical_padding',
|
|
[
|
|
'label' => esc_html__( 'Vertical Padding', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 50,
|
|
],
|
|
'em' => [
|
|
'max' => 5,
|
|
],
|
|
'rem' => [
|
|
'max' => 5,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-post__card' => 'padding-top: {{SIZE}}{{UNIT}}; padding-bottom: {{SIZE}}{{UNIT}}',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'box_shadow_box_shadow_type', // The name of this control is like that, for future extensibility to group_control box shadow.
|
|
[
|
|
'label' => esc_html__( 'Box Shadow', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'prefix_class' => 'elementor-card-shadow-',
|
|
'default' => 'yes',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'hover_effect',
|
|
[
|
|
'label' => esc_html__( 'Hover Effect', 'elementor-pro' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'label_block' => false,
|
|
'options' => [
|
|
'none' => esc_html__( 'None', 'elementor-pro' ),
|
|
'gradient' => esc_html__( 'Gradient', 'elementor-pro' ),
|
|
//'zoom-in' => esc_html__( 'Zoom In', 'elementor-pro' ),
|
|
//'zoom-out' => esc_html__( 'Zoom Out', 'elementor-pro' ),
|
|
],
|
|
'default' => 'gradient',
|
|
'separator' => 'before',
|
|
'prefix_class' => 'elementor-posts__hover-',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'meta_border_color',
|
|
[
|
|
'label' => esc_html__( 'Meta Border Color', 'elementor-pro' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'separator' => 'before',
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-post__card .elementor-post__meta-data' => 'border-top-color: {{VALUE}}',
|
|
],
|
|
'condition' => [
|
|
$this->get_control_id( 'meta_data!' ) => [],
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_section();
|
|
}
|
|
|
|
protected function register_design_content_controls() {
|
|
parent::register_design_content_controls();
|
|
|
|
$this->remove_control( 'meta_spacing' );
|
|
|
|
$this->update_control(
|
|
'read_more_spacing',
|
|
[
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-post__read-more' => 'margin-bottom: {{SIZE}}{{UNIT}};',
|
|
],
|
|
],
|
|
[
|
|
'recursive' => true,
|
|
]
|
|
);
|
|
}
|
|
|
|
protected function get_taxonomies() {
|
|
$taxonomies = get_taxonomies( [ 'show_in_nav_menus' => true ], 'objects' );
|
|
|
|
$options = [ '' => '' ];
|
|
|
|
foreach ( $taxonomies as $taxonomy ) {
|
|
$options[ $taxonomy->name ] = $taxonomy->label;
|
|
}
|
|
|
|
return $options;
|
|
}
|
|
|
|
protected function render_post_header() {
|
|
?>
|
|
<article <?php post_class( [ 'elementor-post elementor-grid-item' ] ); ?>>
|
|
<div class="elementor-post__card">
|
|
<?php
|
|
}
|
|
|
|
protected function render_post_footer() {
|
|
?>
|
|
</div>
|
|
</article>
|
|
<?php
|
|
}
|
|
|
|
protected function render_avatar() {
|
|
?>
|
|
<div class="elementor-post__avatar">
|
|
<?php echo get_avatar( get_the_author_meta( 'ID' ), 128, '', get_the_author_meta( 'display_name' ) ); ?>
|
|
</div>
|
|
<?php
|
|
}
|
|
|
|
protected function render_badge() {
|
|
$taxonomy = $this->get_instance_value( 'badge_taxonomy' );
|
|
if ( empty( $taxonomy ) || ! taxonomy_exists( $taxonomy ) ) {
|
|
return;
|
|
}
|
|
|
|
$terms = get_the_terms( get_the_ID(), $taxonomy );
|
|
if ( empty( $terms[0] ) ) {
|
|
return;
|
|
}
|
|
?>
|
|
<div class="elementor-post__badge"><?php echo esc_html( $terms[0]->name ); ?></div>
|
|
<?php
|
|
}
|
|
|
|
protected function render_thumbnail() {
|
|
if ( 'none' === $this->get_instance_value( 'thumbnail' ) ) {
|
|
return;
|
|
}
|
|
|
|
$settings = $this->parent->get_settings();
|
|
$setting_key = $this->get_control_id( 'thumbnail_size' );
|
|
$settings[ $setting_key ] = [
|
|
'id' => get_post_thumbnail_id(),
|
|
];
|
|
$thumbnail_html = Group_Control_Image_Size::get_attachment_image_html( $settings, $setting_key );
|
|
|
|
if ( empty( $thumbnail_html ) ) {
|
|
return;
|
|
}
|
|
|
|
$optional_attributes_html = $this->get_optional_link_attributes_html();
|
|
|
|
?>
|
|
<a class="elementor-post__thumbnail__link" href="<?php echo esc_url( get_permalink() ); ?>" tabindex="-1" <?php Utils::print_unescaped_internal_string( $optional_attributes_html ); ?>><div class="elementor-post__thumbnail"><?php Utils::print_unescaped_internal_string( $thumbnail_html ); ?></div></a>
|
|
<?php
|
|
if ( $this->get_instance_value( 'show_badge' ) ) {
|
|
$this->render_badge();
|
|
}
|
|
|
|
if ( $this->get_instance_value( 'show_avatar' ) ) {
|
|
$this->render_avatar();
|
|
}
|
|
}
|
|
|
|
protected function render_post() {
|
|
$this->render_post_header();
|
|
$this->render_thumbnail();
|
|
$this->render_text_header();
|
|
$this->render_title();
|
|
$this->render_excerpt();
|
|
$this->render_read_more();
|
|
$this->render_text_footer();
|
|
$this->render_meta_data();
|
|
$this->render_post_footer();
|
|
}
|
|
}
|