You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
204 lines
5.4 KiB
PHP
204 lines
5.4 KiB
PHP
<?php
|
|
namespace Elementor;
|
|
|
|
if ( ! defined( 'ABSPATH' ) ) {
|
|
exit; // Exit if accessed directly.
|
|
}
|
|
|
|
class Group_Control_Flex_Item extends Group_Control_Base {
|
|
|
|
protected static $fields;
|
|
|
|
public static function get_type() {
|
|
return 'flex-item';
|
|
}
|
|
|
|
protected function init_fields() {
|
|
$fields = [];
|
|
|
|
$fields['basis_type'] = [
|
|
'label' => esc_html_x( 'Flex Basis', 'Flex Item Control', 'elementor' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'options' => [
|
|
'' => esc_html_x( 'Default', 'Flex Item Control', 'elementor' ),
|
|
'custom' => esc_html_x( 'Custom', 'Flex Item Control', 'elementor' ),
|
|
],
|
|
'responsive' => true,
|
|
];
|
|
|
|
$fields['basis'] = [
|
|
'label' => esc_html_x( 'Custom Width', 'Flex Item Control', 'elementor' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 1000,
|
|
],
|
|
'%' => [
|
|
'min' => 0,
|
|
'max' => 100,
|
|
],
|
|
'vw' => [
|
|
'min' => 0,
|
|
'max' => 100,
|
|
],
|
|
],
|
|
'default' => [
|
|
'unit' => '%',
|
|
],
|
|
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
|
|
'selectors' => [
|
|
'{{SELECTOR}}' => '--flex-basis: {{SIZE}}{{UNIT}};',
|
|
],
|
|
'condition' => [
|
|
'basis_type' => 'custom',
|
|
],
|
|
'responsive' => true,
|
|
];
|
|
|
|
$fields['align_self'] = [
|
|
'label' => esc_html_x( 'Align Self', 'Flex Item Control', 'elementor' ),
|
|
'type' => Controls_Manager::CHOOSE,
|
|
'options' => [
|
|
'flex-start' => [
|
|
'title' => esc_html_x( 'Start', 'Flex Item Control', 'elementor' ),
|
|
'icon' => 'eicon-flex eicon-align-start-v',
|
|
],
|
|
'center' => [
|
|
'title' => esc_html_x( 'Center', 'Flex Item Control', 'elementor' ),
|
|
'icon' => 'eicon-flex eicon-align-center-v',
|
|
],
|
|
'flex-end' => [
|
|
'title' => esc_html_x( 'End', 'Flex Item Control', 'elementor' ),
|
|
'icon' => 'eicon-flex eicon-align-end-v',
|
|
],
|
|
'stretch' => [
|
|
'title' => esc_html_x( 'Stretch', 'Flex Item Control', 'elementor' ),
|
|
'icon' => 'eicon-flex eicon-align-stretch-v',
|
|
],
|
|
],
|
|
'default' => '',
|
|
'selectors' => [
|
|
'{{SELECTOR}}' => '--align-self: {{VALUE}};',
|
|
],
|
|
'responsive' => true,
|
|
'description' => esc_html_x( 'This control will affect contained elements only.', 'Flex Item Control', 'elementor' ),
|
|
];
|
|
|
|
$fields['order'] = [
|
|
'label' => esc_html_x( 'Order', 'Flex Item Control', 'elementor' ),
|
|
'type' => Controls_Manager::CHOOSE,
|
|
'default' => '',
|
|
'options' => [
|
|
'start' => [
|
|
'title' => esc_html_x( 'Start', 'Flex Item Control', 'elementor' ),
|
|
'icon' => 'eicon-flex eicon-order-start',
|
|
],
|
|
'end' => [
|
|
'title' => esc_html_x( 'End', 'Flex Item Control', 'elementor' ),
|
|
'icon' => 'eicon-flex eicon-order-end',
|
|
],
|
|
'custom' => [
|
|
'title' => esc_html_x( 'Custom', 'Flex Item Control', 'elementor' ),
|
|
'icon' => 'eicon-ellipsis-v',
|
|
],
|
|
],
|
|
'selectors_dictionary' => [
|
|
// Hacks to set the order to start / end.
|
|
// For example, if the user has 10 widgets, but wants to set the 5th one to be first,
|
|
// this hack should do the trick while taking in account elements with `order: 0` or less.
|
|
'start' => '-99999 /* order start hack */',
|
|
'end' => '99999 /* order end hack */',
|
|
'custom' => '',
|
|
],
|
|
'selectors' => [
|
|
'{{SELECTOR}}' => '--order: {{VALUE}};',
|
|
],
|
|
'responsive' => true,
|
|
'description' => esc_html_x( 'This control will affect contained elements only.', 'Flex Item Control', 'elementor' ),
|
|
];
|
|
|
|
$fields['order_custom'] = [
|
|
'label' => esc_html_x( 'Custom Order', 'Flex Item Control', 'elementor' ),
|
|
'type' => Controls_Manager::NUMBER,
|
|
'selectors' => [
|
|
'{{SELECTOR}}' => '--order: {{VALUE}};',
|
|
],
|
|
'responsive' => true,
|
|
'condition' => [
|
|
'order' => 'custom',
|
|
],
|
|
];
|
|
|
|
$fields['size'] = [
|
|
'label' => esc_html_x( 'Size', 'Flex Item Control', 'elementor' ),
|
|
'type' => Controls_Manager::CHOOSE,
|
|
'default' => '',
|
|
'options' => [
|
|
'none' => [
|
|
'title' => esc_html_x( 'None', 'Flex Item Control', 'elementor' ),
|
|
'icon' => 'eicon-ban',
|
|
],
|
|
'grow' => [
|
|
'title' => esc_html_x( 'Grow', 'Flex Item Control', 'elementor' ),
|
|
'icon' => 'eicon-grow',
|
|
],
|
|
'shrink' => [
|
|
'title' => esc_html_x( 'Shrink', 'Flex Item Control', 'elementor' ),
|
|
'icon' => 'eicon-shrink',
|
|
],
|
|
'custom' => [
|
|
'title' => esc_html_x( 'Custom', 'Flex Item Control', 'elementor' ),
|
|
'icon' => 'eicon-ellipsis-v',
|
|
],
|
|
],
|
|
'selectors_dictionary' => [
|
|
'grow' => '--flex-grow: 1; --flex-shrink: 0;',
|
|
'shrink' => '--flex-grow: 0; --flex-shrink: 1;',
|
|
'custom' => '',
|
|
'none' => '--flex-grow: 0; --flex-shrink: 0;',
|
|
],
|
|
'selectors' => [
|
|
'{{SELECTOR}}' => '{{VALUE}};',
|
|
],
|
|
'responsive' => true,
|
|
];
|
|
|
|
$fields['grow'] = [
|
|
'label' => esc_html_x( 'Flex Grow', 'Flex Item Control', 'elementor' ),
|
|
'type' => Controls_Manager::NUMBER,
|
|
'selectors' => [
|
|
'{{SELECTOR}}' => '--flex-grow: {{VALUE}};',
|
|
],
|
|
'default' => 1,
|
|
'placeholder' => 1,
|
|
'responsive' => true,
|
|
'condition' => [
|
|
'size' => 'custom',
|
|
],
|
|
];
|
|
|
|
$fields['shrink'] = [
|
|
'label' => esc_html_x( 'Flex Shrink', 'Flex Item Control', 'elementor' ),
|
|
'type' => Controls_Manager::NUMBER,
|
|
'selectors' => [
|
|
'{{SELECTOR}}' => '--flex-shrink: {{VALUE}};',
|
|
],
|
|
'default' => 1,
|
|
'placeholder' => 1,
|
|
'responsive' => true,
|
|
'condition' => [
|
|
'size' => 'custom',
|
|
],
|
|
];
|
|
|
|
return $fields;
|
|
}
|
|
|
|
protected function get_default_options() {
|
|
return [
|
|
'popover' => false,
|
|
];
|
|
}
|
|
}
|