File: //proc/thread-self/cwd/wp-content/plugins/codevz-plus/elementor/widgets/stylish_list.php
<?php if ( ! defined( 'ABSPATH' ) ) {exit;} // Exit if accessed directly.
use Elementor\Utils;
use Elementor\Repeater;
use Elementor\Widget_Base;
use Elementor\Icons_Manager;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Image_Size;
class Xtra_Elementor_Widget_stylish_list extends Widget_Base {
protected $id = 'cz_stylish_list';
public function get_name() {
return $this->id;
}
public function get_title() {
return esc_html__( 'Stylish List', 'codevz-plus' );
}
public function get_icon() {
return 'xtra-stylish-list';
}
public function get_categories() {
return [ 'xtra' ];
}
public function get_keywords() {
return [
esc_html__( 'XTRA', 'codevz-plus' ),
esc_html__( 'Codevz Plus', 'codevz-plus' ),
esc_html__( 'Stylish List', 'codevz-plus' ),
esc_html__( 'Style', 'codevz-plus' ),
esc_html__( 'List', 'codevz-plus' ),
'XTRA',
'Codevz Plus',
'Stylish List',
'Style',
'List',
'Items',
'Bullet',
'Numbered',
'Layout',
];
}
public function get_style_depends() {
return [ $this->id, 'cz_parallax' ];
}
public function get_script_depends() {
return [ $this->id, 'cz_parallax' ];
}
public function register_controls() {
$free = Codevz_Plus::is_free();
$this->start_controls_section(
'settings',
[
'label' => esc_html__( 'Settings', 'codevz-plus' ),
'tab' => Controls_Manager::TAB_CONTENT,
]
);
$repeater = new Repeater();
$repeater->add_control(
'title',
[
'label' => esc_html__('Title', 'codevz-plus' ),
'type' => Controls_Manager::TEXT,
'default' => esc_html__('This is list item', 'codevz-plus' ),
'placeholder' => esc_html__('This is list item', 'codevz-plus' ),
]
);
$repeater->add_control(
'subtitle',
[
'label' => esc_html__('Subtitle', 'codevz-plus' ),
'type' => Controls_Manager::TEXT
]
);
$repeater->add_control(
'icon_type',
[
'label' => esc_html__( 'Icon Type', 'codevz-plus' ),
'type' => Controls_Manager::SELECT,
'default' => 'icon',
'options' => [
'icon' => esc_html__( 'Icon', 'codevz-plus' ),
'image' => esc_html__( 'Image', 'codevz-plus' ),
'number' => esc_html__( 'Number', 'codevz-plus' ),
],
]
);
$repeater->add_control(
'icon',
[
'label' => esc_html__( 'Icon', 'codevz-plus' ),
'type' => Controls_Manager::ICONS,
'skin' => 'inline',
'label_block' => false,
'condition' => [
'icon_type' => 'icon',
],
]
);
$repeater->add_control(
'icon_color',
[
'label' => esc_html__( 'Icon color', 'codevz-plus' ),
'type' => Controls_Manager::COLOR,
'condition' => [
'icon_type' => 'icon',
],
'selectors' => [
'{{WRAPPER}} {{CURRENT_ITEM}} .cz_sl_icon i' => 'color: {{VALUE}};',
],
]
);
$repeater->add_control(
'image',
[
'label' => esc_html__( 'Image', 'codevz-plus' ),
'type' => Controls_Manager::MEDIA,
'condition' => [
'icon_type' => 'image',
],
]
);
$repeater->add_group_control(
Group_Control_Image_Size::get_type(),
[
'name' => 'image',
'default' => 'full',
'separator' => 'none'
]
);
$repeater->add_control(
'number',
[
'label' => esc_html__( 'Number', 'codevz-plus' ),
'type' => Controls_Manager::TEXT,
'condition' => [
'icon_type' => 'number',
],
]
);
$repeater->add_control(
'link',
[
'label' => esc_html__( 'Link', 'codevz-plus' ),
'type' => $free ? 'codevz_pro' : Controls_Manager::URL,
'show_external' => true
]
);
$this->add_control(
'items',
[
'label' => esc_html__( 'Lists', 'codevz-plus' ),
'type' => Controls_Manager::REPEATER,
'prevent_empty' => false,
'fields' => $repeater->get_controls(),
'default' => [
[
'title' => esc_html__( 'This is list item', 'codevz-plus' )
],
[
'title' => esc_html__( 'This is list item', 'codevz-plus' )
],
[
'title' => esc_html__( 'This is list item', 'codevz-plus' )
],
[
'title' => esc_html__( 'This is list item', 'codevz-plus' )
],
],
]
);
$this->add_control(
'icon_type',
[
'label' => esc_html__( 'Default icon', 'codevz-plus' ),
'type' => Controls_Manager::SELECT,
'default' => 'icon',
'options' => [
'icon' => esc_html__( 'Icon', 'codevz-plus' ),
'image' => esc_html__( 'Image', 'codevz-plus' ),
],
]
);
$this->add_control(
'default_icon',
[
'label' => esc_html__( 'Icon', 'codevz-plus' ),
'type' => Controls_Manager::ICONS,
'skin' => 'inline',
'label_block' => false,
'condition' => [
'icon_type' => 'icon',
],
]
);
$this->add_control(
'image',
[
'label' => esc_html__( 'Image', 'codevz-plus' ),
'type' => Controls_Manager::MEDIA,
'condition' => [
'icon_type' => 'image',
],
]
);
$this->add_group_control(
Group_Control_Image_Size::get_type(),
[
'name' => 'image',
'default' => 'full',
'separator' => 'none'
]
);
$this->add_control(
'icon_hover_fx',
[
'label' => esc_html__( 'Icons hover', 'codevz-plus' ),
'type' => $free ? 'codevz_pro' : Controls_Manager::SELECT,
'default' => 'cz_sl_icon_hover_none',
'options' => [
'cz_sl_icon_hover_none' => esc_html__( 'None', 'codevz-plus' ),
'cz_sl_icon_hover_zoom_in' => esc_html__( 'Zoom In', 'codevz-plus' ),
'cz_sl_icon_hover_zoom_out' => esc_html__( 'Zoom Out', 'codevz-plus' ),
'cz_sl_icon_hover_blur' => esc_html__( 'Blur', 'codevz-plus' ),
'cz_sl_icon_hover_flash' => esc_html__( 'Flash', 'codevz-plus' ),
'cz_sl_icon_hover_absorber' => esc_html__( 'Absorber', 'codevz-plus' ),
'cz_sl_icon_hover_wobble' => esc_html__( 'Wobble', 'codevz-plus' ),
'cz_sl_icon_hover_zoom_in_fade' => esc_html__( 'Zoom in fade', 'codevz-plus' ),
'cz_sl_icon_hover_zoom_out_fade' => esc_html__( 'Zoom out fade', 'codevz-plus' ),
'cz_sl_icon_hover_zoom_out_push' => esc_html__( 'Push in', 'codevz-plus' ),
],
]
);
$this->add_control(
'text_center' ,
[
'label' => esc_html__( 'Center on mobile?', 'codevz-plus' ),
'type' => $free ? 'codevz_pro' : Controls_Manager::SWITCHER,
'default' => '',
'label_on' => esc_html__( 'Yes', 'codevz-plus' ),
'label_off' => esc_html__( 'No', 'codevz-plus' ),
'return_value' => 'flex_center_on_mobile',
]
);
$this->end_controls_section();
// Parallax settings.
Xtra_Elementor::parallax_settings( $this );
$this->start_controls_section(
'section_style',
[
'label' => esc_html__( 'Style', 'codevz-plus' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_responsive_control(
'sk_overall',
[
'label' => esc_html__( 'Container', 'codevz-plus' ),
'type' => 'stylekit',
'settings' => [ 'background', 'border' ],
'selectors' => Xtra_Elementor::sk_selectors( '.cz_stylish_list' ),
]
);
$this->add_responsive_control(
'sk_lists',
[
'label' => esc_html__( 'List items', 'codevz-plus' ),
'type' => 'stylekit',
'settings' => [ 'color', 'width', 'float', 'display', 'font-size' ],
'selectors' => Xtra_Elementor::sk_selectors( '.cz_stylish_list li', '.cz_stylish_list li:hover' ),
]
);
$this->add_responsive_control(
'sk_subtitle',
[
'label' => esc_html__( 'Subtitle', 'codevz-plus' ),
'type' => 'stylekit',
'settings' => [ 'color', 'background' ],
'selectors' => Xtra_Elementor::sk_selectors( '.cz_stylish_list small' ),
]
);
$this->add_responsive_control(
'sk_icons',
[
'label' => esc_html__( 'Icons', 'codevz-plus' ),
'type' => 'stylekit',
'settings' => [ 'color', 'background', 'border' ],
'selectors' => Xtra_Elementor::sk_selectors( '.cz_stylish_list i', '.cz_stylish_list li:hover i' ),
]
);
$this->end_controls_section();
}
public function render() {
$settings = $this->get_settings_for_display();
// Classes
$classes = array();
$classes[] = 'cz_stylish_list clr';
$classes[] = $settings['icon_hover_fx'];
// Icon
$default_icon = '';
if ( $settings['icon_type'] === 'image' && $settings['image'] ) {
$image = Group_Control_Image_Size::get_attachment_image_html( $settings );
$default_icon = '<div class="cz_sl_icon cz_sl_image"><i class="mr10">' . $image . '</i></div>';
} else if ( $settings['default_icon'] ) {
ob_start();
Icons_Manager::render_icon( $settings['default_icon'], [ 'class' => 'mr10' ] );
$icon = ob_get_clean();
$default_icon = $icon ? '<div class="cz_sl_icon">' . $icon . '</div>' : '';
}
// Description.
$content = '';
$content = $content ? '<p class="xtra-stylish-list-content">' . do_shortcode( $content ) . '</p>' : '';
Xtra_Elementor::parallax( $settings );
// Out
$out = $content . ( $settings['text_center'] ? '<div class="stylish_list_center_on_mobile clr">' : '' ) . '<ul' . Codevz_Plus::classes( [], $classes ) .'>';
$items = (array) $settings['items'];
foreach( $items as $index => $i ) {
if ( isset( $i['icon_type'] ) && $i['icon_type'] === 'image' && ! empty( $i['image'] ) ) {
$ico = '<div class="cz_sl_icon cz_sl_image"><i class="mr10">' . Group_Control_Image_Size::get_attachment_image_html( $i ) . '</i></div>';
} else if ( isset( $i['icon_type'] ) && $i['icon_type'] === 'number' && ! empty( $i['number'] ) ) {
$ico = '<div class="cz_sl_icon"><i class="xtra-sl-number mr10">' . $i['number'] . '</i></div>';
} else if ( ! empty( $i['icon']['value'] ) ) {
ob_start();
Icons_Manager::render_icon( $i['icon'], [ 'class' => 'mr10' ] );
$icon = ob_get_clean();
$ico = '<div class="cz_sl_icon">' . $icon . '</div>';
} else {
$ico = $default_icon;
}
$sub = empty( $i['subtitle'] ) ? '' : '<small>' . $i['subtitle'] . '</small>';
if ( $i['link'] ) {
$this->add_link_attributes( 'link' . $index, $i['link'] );
}
$link = empty( $this->get_render_attribute_string( 'link' . $index ) ) ? '' : '<a ' . $this->get_render_attribute_string( 'link' . $index ) . '>';
$link = Codevz_Plus::contains( $link, 'href' ) ? $link : '';
$out .= empty( $i['title'] ) ? '' : '<li class="elementor-repeater-item-' . esc_attr( $i[ '_id' ] ) . ' clr">' . $link . $ico . '<div><span>' . $i['title'] . $sub . '</span></div>' . ( $link ? '</a>' : '' ) . '</li>';
$index++;
}
$out .= '</ul>';
$out .= ( $settings['text_center'] ? '</div>' : '' );
echo do_shortcode( $out );
Xtra_Elementor::parallax( $settings, true );
}
public function content_template() {
?>
<#
if ( settings.image.url ) {
var image = {
id: settings.image.id,
url: settings.image.url,
size: settings.image_size,
dimension: settings.image_custom_dimension,
model: view.getEditModel()
};
var image_url = elementor.imagesManager.getImageUrl( image );
if ( ! image_url ) {
return;
}
}
var iconHTML = elementor.helpers.renderIcon( view, settings.default_icon, { 'class': 'mr10' }, 'i' , 'object' ),
classes = 'cz_stylish_list clr',
classes = settings.text_center ? classes + ' ' + settings.text_center : classes;
classes = settings.icon_hover_fx ? classes + ' ' + settings.icon_hover_fx : classes,
default_icon = '';
if ( settings.icon_type === 'image' && settings.image.url ) {
var image_url = '<img src="' + image_url + '">';
default_icon = '<div class="cz_sl_icon cz_sl_image"><i class="mr10">' + image_url + '</i></div>';
} else if ( settings.default_icon && iconHTML.value ) {
default_icon = '<div class="cz_sl_icon">' + iconHTML.value + '</div>';
} else {
var image_url = '';
}
var items = '';
parallaxOpen = xtraElementorParallax( settings ),
parallaxClose = xtraElementorParallax( settings, true );
_.each( settings.items, function( i ) {
if ( i.icon_type === 'image' && i.image.url ) {
var i_image = {
id: i.image.id,
url: i.image.url,
size: i.image_size,
dimension: i.image_custom_dimension,
model: view.getEditModel()
};
var i_image_url = elementor.imagesManager.getImageUrl( i_image ),
image_url = i_image_url ? '<img src="' + i_image_url + '">' : image_url;
ico = '<div class="cz_sl_icon cz_sl_image"><i class="mr10">' + image_url + '</i></div>';
} else if ( i.icon_type === 'number' && i.number ) {
ico = '<div class="cz_sl_icon"><i class="xtra-sl-number mr10">' + i.number + '</i></div>';
} else if ( i.icon.value ) {
var iconsHTML = elementor.helpers.renderIcon( view, i.icon, { 'class': 'mr10' }, 'i' , 'object' );
ico = iconsHTML.value ? '<div class="cz_sl_icon">' + iconsHTML.value + '</div>' : '';
} else {
ico = default_icon;
}
var sub = i.subtitle ? '<small>' + i.subtitle + '</small>' : '',
link = i.link.url ? '<a href="' + i.link.url + '">' : '';
items = items + '<li class="elementor-repeater-item-' + i._id + ' clr">' + link + ico + '<div><span>' + i.title + sub + '</span></div>' + ( link ? '</a>' : '' ) + '</li>';
});
#>
{{{ parallaxOpen }}}
<ul class="{{{classes}}}">{{{ items }}}</ul>
{{{ parallaxClose }}}
<?php
}
}