Preview: scrollable-content.php
Size: 11.48 KB
/home/certprox/test.certproxywizard.com/wp-content/plugins/lvmr-addons/widgets/scrollable-content.php
<?php
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
class LVMR_Scrollable_Widget extends \Elementor\Widget_Base {
public function get_name() {
return 'lvmr_scrollable_content';
}
public function get_title() {
return esc_html__( 'Scrollable Content', 'lvmr-addons' );
}
public function get_icon() {
return 'eicon-scroll';
}
public function get_categories() {
return [ 'lvmr-addons' ];
}
public function get_style_depends() {
return [ 'lvmr-scrollable-content' ];
}
protected function register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => esc_html__( 'Content', 'lvmr-addons' ),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'image',
[
'label' => esc_html__( 'Choose Image', 'lvmr-addons' ),
'type' => \Elementor\Controls_Manager::MEDIA,
'default' => [
'url' => \Elementor\Utils::get_placeholder_image_src(),
],
]
);
$this->add_control(
'heading',
[
'label' => esc_html__( 'Heading', 'lvmr-addons' ),
'type' => \Elementor\Controls_Manager::TEXT,
'default' => esc_html__( 'Enter your heading here', 'lvmr-addons' ),
'placeholder' => esc_html__( 'Type your heading', 'lvmr-addons' ),
]
);
$this->add_control(
'description',
[
'label' => esc_html__( 'Description', 'lvmr-addons' ),
'type' => \Elementor\Controls_Manager::WYSIWYG,
'default' => esc_html__( 'Add your description text here. If it exceeds the height, it will become scrollable.', 'lvmr-addons' ),
]
);
$this->add_responsive_control(
'content_align',
[
'label' => esc_html__( 'Alignment', 'lvmr-addons' ),
'type' => \Elementor\Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => esc_html__( 'Left', 'lvmr-addons' ),
'icon' => 'eicon-text-align-left',
],
'center' => [
'title' => esc_html__( 'Center', 'lvmr-addons' ),
'icon' => 'eicon-text-align-center',
],
'right' => [
'title' => esc_html__( 'Right', 'lvmr-addons' ),
'icon' => 'eicon-text-align-right',
],
],
'default' => 'center',
'selectors' => [
'{{WRAPPER}} .lvmr-scrollable-container' => 'text-align: {{VALUE}};',
],
]
);
$this->end_controls_section();
// Control section for Layout (Width and Height)
$this->start_controls_section(
'layout_section',
[
'label' => esc_html__( 'Layout Control', 'lvmr-addons' ),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_responsive_control(
'container_width',
[
'label' => esc_html__( 'Container Width', 'lvmr-addons' ),
'type' => \Elementor\Controls_Manager::SLIDER,
'size_units' => [ 'px', '%', 'vw' ],
'range' => [
'px' => [ 'min' => 200, 'max' => 1200 ],
'%' => [ 'min' => 10, 'max' => 100 ],
],
'default' => [
'unit' => '%',
'size' => 100,
],
'selectors' => [
'{{WRAPPER}} .lvmr-scrollable-container' => 'width: {{SIZE}}{{UNIT}}; margin-left: auto; margin-right: auto;',
],
]
);
$this->add_responsive_control(
'container_height',
[
'label' => esc_html__( 'Scroll Height', 'lvmr-addons' ),
'type' => \Elementor\Controls_Manager::SLIDER,
'size_units' => [ 'px', 'vh' ],
'range' => [
'px' => [ 'min' => 100, 'max' => 1000 ],
],
'default' => [
'unit' => 'px',
'size' => 400,
],
'selectors' => [
'{{WRAPPER}} .lvmr-scrollable-inner' => 'height: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'content_inner_width',
[
'label' => esc_html__( 'Content Width', 'lvmr-addons' ),
'type' => \Elementor\Controls_Manager::SLIDER,
'size_units' => [ 'px', '%', 'vw' ],
'range' => [
'px' => [ 'min' => 100, 'max' => 1200 ],
'%' => [ 'min' => 10, 'max' => 100 ],
],
'selectors' => [
'{{WRAPPER}} .lvmr-scrollable-inner' => 'width: {{SIZE}}{{UNIT}}; margin-left: auto; margin-right: auto;',
],
]
);
$this->add_control(
'hide_scrollbar',
[
'label' => esc_html__( 'Hide Scrollbar', 'lvmr-addons' ),
'type' => \Elementor\Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Yes', 'lvmr-addons' ),
'label_off' => esc_html__( 'No', 'lvmr-addons' ),
'return_value' => 'yes',
'default' => 'yes',
'prefix_class' => 'lvmr-scrollbar-',
]
);
$this->end_controls_section();
// STYLE TAB
// Container Styles
$this->start_controls_section(
'section_style_container',
[
'label' => esc_html__( 'Container Style', 'lvmr-addons' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
]
);
$this->add_group_control(
\Elementor\Group_Control_Background::get_type(),
[
'name' => 'container_background',
'label' => esc_html__( 'Background', 'lvmr-addons' ),
'types' => [ 'classic', 'gradient' ],
'selector' => '{{WRAPPER}} .lvmr-scrollable-container',
'fields_options' => [
'background' => [
'default' => 'classic',
],
'color' => [
'default' => '#00008B', // Dark blue like the image
],
],
]
);
$this->add_responsive_control(
'container_padding',
[
'label' => esc_html__( 'Padding', 'lvmr-addons' ),
'type' => \Elementor\Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em', '%' ],
'default' => [
'top' => '40',
'right' => '40',
'bottom' => '40',
'left' => '40',
'unit' => 'px',
'isLinked' => true,
],
'selectors' => [
'{{WRAPPER}} .lvmr-scrollable-container' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'container_border_radius',
[
'label' => esc_html__( 'Border Radius', 'lvmr-addons' ),
'type' => \Elementor\Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em' ],
'default' => [
'top' => '30',
'right' => '30',
'bottom' => '30',
'left' => '30',
'unit' => 'px',
'isLinked' => true,
],
'selectors' => [
'{{WRAPPER}} .lvmr-scrollable-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_group_control(
\Elementor\Group_Control_Box_Shadow::get_type(),
[
'name' => 'container_box_shadow',
'selector' => '{{WRAPPER}} .lvmr-scrollable-container',
]
);
$this->end_controls_section();
// Image Style
$this->start_controls_section(
'section_style_image',
[
'label' => esc_html__( 'Image Style', 'lvmr-addons' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
]
);
$this->add_responsive_control(
'image_width',
[
'label' => esc_html__( 'Width', 'lvmr-addons' ),
'type' => \Elementor\Controls_Manager::SLIDER,
'size_units' => [ 'px', '%' ],
'range' => [
'px' => [ 'min' => 20, 'max' => 800 ],
],
'selectors' => [
'{{WRAPPER}} .lvmr-scrollable-image img' => 'width: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'image_margin',
[
'label' => esc_html__( 'Margin', 'lvmr-addons' ),
'type' => \Elementor\Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em', '%' ],
'selectors' => [
'{{WRAPPER}} .lvmr-scrollable-image' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'image_border_radius',
[
'label' => esc_html__( 'Border Radius', 'lvmr-addons' ),
'type' => \Elementor\Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em' ],
'selectors' => [
'{{WRAPPER}} .lvmr-scrollable-image img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_section();
// Heading Style
$this->start_controls_section(
'section_style_heading',
[
'label' => esc_html__( 'Heading Style', 'lvmr-addons' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'heading_color',
[
'label' => esc_html__( 'Color', 'lvmr-addons' ),
'type' => \Elementor\Controls_Manager::COLOR,
'default' => '#FFFFFF',
'selectors' => [
'{{WRAPPER}} .lvmr-scrollable-heading' => 'color: {{VALUE}};',
],
]
);
$this->add_group_control(
\Elementor\Group_Control_Typography::get_type(),
[
'name' => 'heading_typography',
'selector' => '{{WRAPPER}} .lvmr-scrollable-heading',
]
);
$this->add_responsive_control(
'heading_margin',
[
'label' => esc_html__( 'Margin', 'lvmr-addons' ),
'type' => \Elementor\Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em', '%' ],
'selectors' => [
'{{WRAPPER}} .lvmr-scrollable-heading' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_section();
// Text Style
$this->start_controls_section(
'section_style_text',
[
'label' => esc_html__( 'Text Style', 'lvmr-addons' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'text_color',
[
'label' => esc_html__( 'Color', 'lvmr-addons' ),
'type' => \Elementor\Controls_Manager::COLOR,
'default' => '#FFFFFF',
'selectors' => [
'{{WRAPPER}} .lvmr-scrollable-description' => 'color: {{VALUE}};',
],
]
);
$this->add_group_control(
\Elementor\Group_Control_Typography::get_type(),
[
'name' => 'text_typography',
'selector' => '{{WRAPPER}} .lvmr-scrollable-description',
]
);
$this->add_responsive_control(
'text_margin',
[
'label' => esc_html__( 'Margin', 'lvmr-addons' ),
'type' => \Elementor\Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em', '%' ],
'selectors' => [
'{{WRAPPER}} .lvmr-scrollable-description' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
?>
<div class="lvmr-scrollable-container">
<div class="lvmr-scrollable-inner">
<?php if ( ! empty( $settings['image']['url'] ) ) : ?>
<div class="lvmr-scrollable-image">
<img src="<?php echo esc_url( $settings['image']['url'] ); ?>" alt="<?php echo esc_attr( $settings['heading'] ); ?>">
</div>
<?php endif; ?>
<?php if ( ! empty( $settings['heading'] ) ) : ?>
<h3 class="lvmr-scrollable-heading">
<?php echo esc_html( $settings['heading'] ); ?>
</h3>
<?php endif; ?>
<?php if ( ! empty( $settings['description'] ) ) : ?>
<div class="lvmr-scrollable-description">
<?php echo $settings['description']; ?>
</div>
<?php endif; ?>
</div>
</div>
<?php
}
}
Directory Contents
Dirs: 0 × Files: 2