| @@ -1,329 +1,464 @@ | ||
| 1 | -<?php | |
| 2 | -namespace UiCoreElements; | |
| 3 | - | |
| 4 | -use Elementor\Plugin; | |
| 5 | -use Elementor\Controls_Manager; | |
| 6 | -use Elementor\Repeater; | |
| 7 | -use Elementor\Modules\NestedElements\Controls\Control_Nested_Repeater; | |
| 8 | -use UiCoreElements\Utils\Animation_Trait; | |
| 9 | - | |
| 10 | -defined('ABSPATH') || exit(); | |
| 11 | - | |
| 12 | -class CustomTable extends UiCoreNestedWidget { | |
| 13 | - | |
| 14 | - use Animation_Trait; | |
| 15 | - | |
| 16 | - public function get_name() | |
| 17 | - { | |
| 18 | - return 'uicore-custom-table'; | |
| 19 | - } | |
| 20 | - public function get_title() | |
| 21 | - { | |
| 22 | - return esc_html__('Custom Table', 'uicore-elements'); | |
| 23 | - } | |
| 24 | - public function get_icon() | |
| 25 | - { | |
| 26 | - return 'eicon-table ui-e-widget'; | |
| 27 | - } | |
| 28 | - public function get_categories() | |
| 29 | - { | |
| 30 | - return ['uicore']; | |
| 31 | - } | |
| 32 | - public function get_keywords() | |
| 33 | - { | |
| 34 | - return ['slide', 'table', 'nested']; | |
| 35 | - } | |
| 36 | - public function get_styles() | |
| 37 | - { | |
| 38 | - return ['custom-table']; | |
| 39 | - } | |
| 40 | - public function get_scripts() | |
| 41 | - { | |
| 42 | - return []; | |
| 43 | - } | |
| 44 | - | |
| 45 | - protected function carousel_content_container( int $index ) { | |
| 46 | - return [ | |
| 47 | - 'elType' => 'container', | |
| 48 | - 'settings' => [ | |
| 49 | - '_title' => sprintf( __( 'Cel #%s', 'uicore-elements' ), $index ), | |
| 50 | - 'content_width' => 'full', | |
| 51 | - // 'flex_justify_content' => 'center', | |
| 52 | - // 'flex_align_items' => 'center', | |
| 53 | - // the settings work only ofr first default items | |
| 54 | - ], | |
| 55 | - ]; | |
| 56 | - } | |
| 57 | - | |
| 58 | - protected function get_default_children_elements() { | |
| 59 | - return [ | |
| 60 | - $this->carousel_content_container( 1 ), | |
| 61 | - $this->carousel_content_container( 2 ), | |
| 62 | - $this->carousel_content_container( 3 ), | |
| 63 | - ]; | |
| 64 | - } | |
| 65 | - | |
| 66 | - protected function get_default_repeater_title_setting_key() { | |
| 67 | - return 'table_cels'; | |
| 68 | - } | |
| 69 | - | |
| 70 | - protected function get_default_children_title() { | |
| 71 | - return esc_html__( 'Cell #%d', 'uicore-elements' ); | |
| 72 | - } | |
| 73 | - protected function get_default_children_placeholder_selector() { | |
| 74 | - return '.ui-e-table'; | |
| 75 | - } | |
| 76 | - | |
| 77 | - protected function register_controls() | |
| 78 | - { | |
| 79 | - if( !Plugin::$instance->experiments->is_feature_active('nested-elements') ) { | |
| 80 | - $this->nesting_fallback('controls'); | |
| 81 | - return; | |
| 82 | - } | |
| 83 | - | |
| 84 | - $this->start_controls_section( | |
| 85 | - 'section_content', | |
| 86 | - [ | |
| 87 | - 'label' => __('Items', 'uicore-elements'), | |
| 88 | - 'tab' => Controls_Manager::TAB_CONTENT, | |
| 89 | - ] | |
| 90 | - ); | |
| 91 | - | |
| 92 | - | |
| 93 | - //Columns | |
| 94 | - $columns = new Repeater(); | |
| 95 | - $columns->add_responsive_control( | |
| 96 | - 'col_size', | |
| 97 | - [ | |
| 98 | - 'label' => __('Column Size', 'uicore-elements'), | |
| 99 | - 'type' => Controls_Manager::SLIDER, | |
| 100 | - 'size_units' => ['px', 'fr','custom'], | |
| 101 | - 'default' => [ | |
| 102 | - 'size' => 300, | |
| 103 | - 'unit' => 'px', | |
| 104 | - ], | |
| 105 | - 'range' => [ | |
| 106 | - 'px' => [ | |
| 107 | - 'min' => 1, | |
| 108 | - 'max' => 1200, | |
| 109 | - ], | |
| 110 | - 'fr' => [ | |
| 111 | - 'min' => 1, | |
| 112 | - 'max' => 12, | |
| 113 | - ], | |
| 114 | - ], | |
| 115 | - 'selectors' => [ | |
| 116 | - '{{WRAPPER}}' => '--ui-e-last:{{SIZE}}{{UNIT}};', | |
| 117 | - ], | |
| 118 | - ] | |
| 119 | - ); | |
| 120 | - | |
| 121 | - $this->add_control( | |
| 122 | - 'columns', | |
| 123 | - [ | |
| 124 | - 'type' => Controls_Manager::REPEATER, | |
| 125 | - 'fields' => $columns->get_controls(), | |
| 126 | - 'title_field' => 'Column', | |
| 127 | - 'render_type' => 'template', | |
| 128 | - 'default' => [ | |
| 129 | - [ 'col_size' => [ 'size' => 1, 'unit' => 'fr' ] ], | |
| 130 | - [ 'col_size' => [ 'size' => 1, 'unit' => 'fr' ] ], | |
| 131 | - [ 'col_size' => [ 'size' => 1, 'unit' => 'fr' ] ], | |
| 132 | - ], | |
| 133 | - ] | |
| 134 | - ); | |
| 135 | - | |
| 136 | - | |
| 137 | - | |
| 138 | - //Cells | |
| 139 | - $repeater = new Repeater(); | |
| 140 | - $repeater->add_control( | |
| 141 | - 'item', | |
| 142 | - [ | |
| 143 | - 'label' => __('Title', 'uicore-elements'), | |
| 144 | - 'type' => Controls_Manager::TEXT, | |
| 145 | - ] | |
| 146 | - ); | |
| 147 | - | |
| 148 | - $this->add_control( | |
| 149 | - 'cells', | |
| 150 | - [ | |
| 151 | - 'type' => Control_Nested_Repeater::CONTROL_TYPE, | |
| 152 | - 'fields' => $repeater->get_controls(), | |
| 153 | - 'allow_empty' => false, | |
| 154 | - 'default' => [ | |
| 155 | - [ 'item' => __( 'Cel #1', 'uicore-elements' ) ], | |
| 156 | - [ 'item' => __( 'Cel #2', 'uicore-elements' ) ], | |
| 157 | - [ 'item' => __( 'Cel #3', 'uicore-elements' ) ], | |
| 158 | - ], | |
| 159 | - ] | |
| 160 | - ); | |
| 161 | - | |
| 162 | - $this->end_controls_section(); | |
| 163 | - | |
| 164 | - | |
| 165 | - //style | |
| 166 | - $this->start_controls_section( | |
| 167 | - 'section_table_style', | |
| 168 | - [ | |
| 169 | - 'label' => __('Table Style', 'uicore-elements'), | |
| 170 | - 'tab' => Controls_Manager::TAB_STYLE, | |
| 171 | - ] | |
| 172 | - ); | |
| 173 | - | |
| 174 | - //even rows background color | |
| 175 | - $this->add_control( | |
| 176 | - 'even_row_bg_color', | |
| 177 | - [ | |
| 178 | - 'label' => __('Even Rows Background', 'uicore-elements'), | |
| 179 | - 'type' => Controls_Manager::COLOR, | |
| 180 | - 'selectors' => [ | |
| 181 | - '{{WRAPPER}} .ui-e-table .ui-e-even' => 'background-color: {{VALUE}};', | |
| 182 | - ], | |
| 183 | - ] | |
| 184 | - ); | |
| 185 | - | |
| 186 | - | |
| 187 | - $this->end_controls_section(); | |
| 188 | - } | |
| 189 | - | |
| 190 | - public function render() | |
| 191 | - { | |
| 192 | - if(!Plugin::$instance->experiments->is_feature_active('nested-elements')) { | |
| 193 | - $this->nesting_fallback(); | |
| 194 | - return; | |
| 195 | - } | |
| 196 | - | |
| 197 | - $cells = $this->get_settings_for_display('cells'); | |
| 198 | - $cols = $this->get_settings_for_display('columns'); | |
| 199 | - | |
| 200 | - // Build the grid columns css | |
| 201 | - if ($cols) { | |
| 202 | - | |
| 203 | - $grid_css = ''; | |
| 204 | - $grid_columns = []; | |
| 205 | - $breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints(); | |
| 206 | - | |
| 207 | - // Columns loop | |
| 208 | - foreach ($cols as $index => $item) { | |
| 209 | - | |
| 210 | - // Register default desktop size | |
| 211 | - $grid_columns['desktop'][] = $item['col_size']['size'] . $item['col_size']['unit']; | |
| 212 | - | |
| 213 | - // Check for the current column responsive sizes | |
| 214 | - foreach ($breakpoints as $breakpoint => $object) { | |
| 215 | - $size_slug = 'col_size_' . $breakpoint; | |
| 216 | - | |
| 217 | - // Register the current column responsive size if it exists and | |
| 218 | - // the value is not empty, because empty values will break the table design | |
| 219 | - if ( isset($item[$size_slug]) && !empty($item[$size_slug]['size']) ) { | |
| 220 | - $grid_columns[$breakpoint][] = $item[$size_slug]['size'] . $item[$size_slug]['unit']; | |
| 221 | - | |
| 222 | - // Use the default size from desktop otherwhise | |
| 223 | - } else { | |
| 224 | - $grid_columns[$breakpoint][] = $item['col_size']['size'] . $item['col_size']['unit']; | |
| 225 | - } | |
| 226 | - } | |
| 227 | - } | |
| 228 | - | |
| 229 | - // Generate the css variables | |
| 230 | - foreach ($grid_columns as $device => $values) { | |
| 231 | - $breakpoint = $device === 'desktop' ? '' : '-' . $device; | |
| 232 | - $grid_css .= '--ui-e-table-cols' . $breakpoint . ':' . implode(' ', $values) . ';'; | |
| 233 | - } | |
| 234 | - | |
| 235 | - // Add it to the widget wrapper | |
| 236 | - $this->add_render_attribute('_wrapper', [ | |
| 237 | - 'style' => $grid_css, | |
| 238 | - ]); | |
| 239 | - } | |
| 240 | - | |
| 241 | - ?> | |
| 242 | - <div class="ui-e-table"> | |
| 243 | - <?php | |
| 244 | - | |
| 245 | - $columns = count($cols); | |
| 246 | - | |
| 247 | - foreach ($cells as $index => $item) { | |
| 248 | - $is_even = floor($index / $columns) % 2 !== 0; | |
| 249 | - | |
| 250 | - // TODO: maybe there's a way of adding the class to the child wrapper instead of printing an extra element | |
| 251 | - if ($is_even) { | |
| 252 | - ?> | |
| 253 | - <div class="ui-e-even"> | |
| 254 | - <?php $this->print_child($index); ?> | |
| 255 | - </div> | |
| 256 | - <?php | |
| 257 | - } else { | |
| 258 | - $this->print_child($index); | |
| 259 | - } | |
| 260 | - } | |
| 261 | - ?> | |
| 262 | - </div> | |
| 263 | - <?php | |
| 264 | - } | |
| 265 | - | |
| 266 | - | |
| 267 | - protected function get_initial_config(): array { | |
| 268 | - if (Plugin::$instance->experiments->is_feature_active('e_nested_atomic_repeaters')) { | |
| 269 | - return array_merge(parent::get_initial_config(), [ | |
| 270 | - 'support_improved_repeaters' => true, | |
| 271 | - 'node' => '.ui-e-table' | |
| 272 | - ]); | |
| 273 | - } | |
| 274 | - | |
| 275 | - return parent::get_initial_config(); | |
| 276 | - } | |
| 277 | - | |
| 278 | - | |
| 279 | - protected function content_template() { | |
| 280 | - ?> | |
| 281 | - <# | |
| 282 | - const cols = settings.columns; | |
| 283 | - const cols_qty = '--ui-e-cols-qty:' + settings.columns.length; | |
| 284 | - | |
| 285 | - if ( cols ) { | |
| 286 | - let gridCss = ''; | |
| 287 | - const gridColumns = {}; | |
| 288 | - const breakpoints = elementorFrontend.config.breakpoints.activeBreakpoints; | |
| 289 | - | |
| 290 | - _.each( cols, function( item, index ) { | |
| 291 | - | |
| 292 | - if ( ! gridColumns.desktop ) { | |
| 293 | - gridColumns.desktop = []; | |
| 294 | - } | |
| 295 | - | |
| 296 | - gridColumns.desktop.push( item.col_size.size + item.col_size.unit ); | |
| 297 | - | |
| 298 | - _.each( breakpoints, function( object, breakpoint ) { | |
| 299 | - const sizeSlug = 'col_size_' + breakpoint; | |
| 300 | - | |
| 301 | - if ( item[sizeSlug] && item[sizeSlug].size ) { | |
| 302 | - if ( ! gridColumns[breakpoint] ) { | |
| 303 | - gridColumns[breakpoint] = []; | |
| 304 | - } | |
| 305 | - gridColumns[breakpoint].push( item[sizeSlug].size + item[sizeSlug].unit ); | |
| 306 | - } else { | |
| 307 | - if ( ! gridColumns[breakpoint] ) { | |
| 308 | - gridColumns[breakpoint] = []; | |
| 309 | - } | |
| 310 | - gridColumns[breakpoint].push( item.col_size.size + item.col_size.unit ); | |
| 311 | - } | |
| 312 | - }); | |
| 313 | - }); | |
| 314 | - | |
| 315 | - _.each( gridColumns, function( values, device ) { | |
| 316 | - const breakpoint = device === 'desktop' ? '' : '-' + device; | |
| 317 | - gridCss += '--ui-e-table-cols' + breakpoint + ':' + values.join(' ') + ';'; | |
| 318 | - }); | |
| 319 | - | |
| 320 | - view.addRenderAttribute('table', 'style', [gridCss, cols_qty].join(' ')); | |
| 321 | - } | |
| 322 | - #> | |
| 323 | - <div class="ui-e-table" {{{ view.getRenderAttributeString('table') }}}> | |
| 324 | - | |
| 325 | - </div> | |
| 326 | - <?php | |
| 327 | - } | |
| 328 | -} | |
| 329 | -\Elementor\Plugin::instance()->widgets_manager->register(new CustomTable()); | |
| 1 | +<?php | |
| 2 | + | |
| 3 | +namespace UiCoreElements; | |
| 4 | + | |
| 5 | +use Elementor\Plugin; | |
| 6 | +use Elementor\Controls_Manager; | |
| 7 | +use Elementor\Repeater; | |
| 8 | +use Elementor\Modules\NestedElements\Controls\Control_Nested_Repeater; | |
| 9 | +use UiCoreElements\Utils\Animation_Trait; | |
| 10 | + | |
| 11 | +defined('ABSPATH') || exit(); | |
| 12 | + | |
| 13 | +class CustomTable extends UiCoreNestedWidget | |
| 14 | +{ | |
| 15 | + | |
| 16 | + use Animation_Trait; | |
| 17 | + | |
| 18 | + public function get_name() | |
| 19 | + { | |
| 20 | + return 'uicore-custom-table'; | |
| 21 | + } | |
| 22 | + public function get_title() | |
| 23 | + { | |
| 24 | + return esc_html__('Custom Table', 'uicore-elements'); | |
| 25 | + } | |
| 26 | + public function get_icon() | |
| 27 | + { | |
| 28 | + return 'eicon-table ui-e-widget'; | |
| 29 | + } | |
| 30 | + public function get_categories() | |
| 31 | + { | |
| 32 | + return ['uicore']; | |
| 33 | + } | |
| 34 | + public function get_keywords() | |
| 35 | + { | |
| 36 | + return ['slide', 'table', 'nested']; | |
| 37 | + } | |
| 38 | + public function get_styles() | |
| 39 | + { | |
| 40 | + return ['custom-table']; | |
| 41 | + } | |
| 42 | + public function get_scripts() | |
| 43 | + { | |
| 44 | + return []; | |
| 45 | + } | |
| 46 | + public function has_widget_inner_wrapper(): bool | |
| 47 | + { | |
| 48 | + // TODO: remove after Optmized Markup experiment is merged to the core | |
| 49 | + return ! \Elementor\Plugin::$instance->experiments->is_feature_active('e_optimized_markup'); | |
| 50 | + } | |
| 51 | + | |
| 52 | + protected function carousel_content_container(int $index) | |
| 53 | + { | |
| 54 | + return [ | |
| 55 | + 'elType' => 'container', | |
| 56 | + 'settings' => [ | |
| 57 | + /* translators: %s: Item index */ | |
| 58 | + '_title' => sprintf(__('Cel #%s', 'uicore-elements'), $index), | |
| 59 | + 'content_width' => 'full', | |
| 60 | + ], | |
| 61 | + ]; | |
| 62 | + } | |
| 63 | + | |
| 64 | + protected function get_default_children_elements() | |
| 65 | + { | |
| 66 | + return [ | |
| 67 | + $this->carousel_content_container(1), | |
| 68 | + $this->carousel_content_container(2), | |
| 69 | + $this->carousel_content_container(3), | |
| 70 | + ]; | |
| 71 | + } | |
| 72 | + | |
| 73 | + protected function get_default_repeater_title_setting_key() | |
| 74 | + { | |
| 75 | + return 'item'; | |
| 76 | + } | |
| 77 | + | |
| 78 | + protected function get_default_children_title() | |
| 79 | + { | |
| 80 | + /* translators: %d: Item index */ | |
| 81 | + return esc_html__('Cel #%d', 'uicore-elements'); | |
| 82 | + } | |
| 83 | + protected function get_default_children_placeholder_selector() | |
| 84 | + { | |
| 85 | + return '.ui-e-table'; | |
| 86 | + } | |
| 87 | + | |
| 88 | + protected function get_default_children_container_placeholder_selector() | |
| 89 | + { | |
| 90 | + return '.ui-e-table-editor-placeholder'; | |
| 91 | + } | |
| 92 | + | |
| 93 | + protected function register_controls() | |
| 94 | + { | |
| 95 | + if (!Plugin::$instance->experiments->is_feature_active('nested-elements')) { | |
| 96 | + $this->nesting_fallback('controls'); | |
| 97 | + return; | |
| 98 | + } | |
| 99 | + | |
| 100 | + $this->start_controls_section( | |
| 101 | + 'section_content', | |
| 102 | + [ | |
| 103 | + 'label' => __('Items', 'uicore-elements'), | |
| 104 | + 'tab' => Controls_Manager::TAB_CONTENT, | |
| 105 | + ] | |
| 106 | + ); | |
| 107 | + | |
| 108 | + $this->add_control( | |
| 109 | + 'rerender_table', | |
| 110 | + [ | |
| 111 | + 'label' => esc_html__('Preview', 'uicore-elements'), | |
| 112 | + 'type' => Controls_Manager::BUTTON, | |
| 113 | + 'text' => esc_html__('Refresh Table', 'uicore-elements'), | |
| 114 | + 'separator' => 'before', | |
| 115 | + 'event' => 'ui-e-custom-table-rerender', | |
| 116 | + ] | |
| 117 | + ); | |
| 118 | + | |
| 119 | + //Columns | |
| 120 | + $columns = new Repeater(); | |
| 121 | + $columns->add_responsive_control( | |
| 122 | + 'col_size', | |
| 123 | + [ | |
| 124 | + 'label' => __('Column Size', 'uicore-elements'), | |
| 125 | + 'type' => Controls_Manager::SLIDER, | |
| 126 | + 'size_units' => ['px', 'fr', 'custom'], | |
| 127 | + 'default' => [ | |
| 128 | + 'size' => 300, | |
| 129 | + 'unit' => 'px', | |
| 130 | + ], | |
| 131 | + 'range' => [ | |
| 132 | + 'px' => [ | |
| 133 | + 'min' => 1, | |
| 134 | + 'max' => 1200, | |
| 135 | + ], | |
| 136 | + 'fr' => [ | |
| 137 | + 'min' => 1, | |
| 138 | + 'max' => 12, | |
| 139 | + ], | |
| 140 | + ], | |
| 141 | + 'render_type' => 'ui', | |
| 142 | + 'selectors' => [ | |
| 143 | + '{{WRAPPER}}' => '--ui-e-last:{{SIZE}}{{UNIT}};', | |
| 144 | + ], | |
| 145 | + ] | |
| 146 | + ); | |
| 147 | + | |
| 148 | + $this->add_control( | |
| 149 | + 'columns', | |
| 150 | + [ | |
| 151 | + 'type' => Controls_Manager::REPEATER, | |
| 152 | + 'fields' => $columns->get_controls(), | |
| 153 | + 'title_field' => 'Column', | |
| 154 | + 'render_type' => 'ui', | |
| 155 | + 'default' => [ | |
| 156 | + ['col_size' => ['size' => 1, 'unit' => 'fr']], | |
| 157 | + ['col_size' => ['size' => 1, 'unit' => 'fr']], | |
| 158 | + ['col_size' => ['size' => 1, 'unit' => 'fr']], | |
| 159 | + ], | |
| 160 | + ] | |
| 161 | + ); | |
| 162 | + | |
| 163 | + | |
| 164 | + | |
| 165 | + //Cells | |
| 166 | + $repeater = new Repeater(); | |
| 167 | + $repeater->add_control( | |
| 168 | + 'item', | |
| 169 | + [ | |
| 170 | + 'label' => __('Title', 'uicore-elements'), | |
| 171 | + 'type' => Controls_Manager::TEXT, | |
| 172 | + 'render_type' => 'ui' | |
| 173 | + ] | |
| 174 | + ); | |
| 175 | + | |
| 176 | + $this->add_control( | |
| 177 | + 'cells', | |
| 178 | + [ | |
| 179 | + 'type' => Control_Nested_Repeater::CONTROL_TYPE, | |
| 180 | + 'fields' => $repeater->get_controls(), | |
| 181 | + 'title_field' => '{{{ item }}}', | |
| 182 | + 'allow_empty' => false, | |
| 183 | + 'default' => [ | |
| 184 | + ['item' => __('Cel #1', 'uicore-elements')], | |
| 185 | + ['item' => __('Cel #2', 'uicore-elements')], | |
| 186 | + ['item' => __('Cel #3', 'uicore-elements')], | |
| 187 | + ], | |
| 188 | + ] | |
| 189 | + ); | |
| 190 | + | |
| 191 | + $this->end_controls_section(); | |
| 192 | + | |
| 193 | + | |
| 194 | + //style | |
| 195 | + $this->start_controls_section( | |
| 196 | + 'section_table_style', | |
| 197 | + [ | |
| 198 | + 'label' => __('Table Style', 'uicore-elements'), | |
| 199 | + 'tab' => Controls_Manager::TAB_STYLE, | |
| 200 | + ] | |
| 201 | + ); | |
| 202 | + | |
| 203 | + $this->start_controls_tabs( | |
| 204 | + 'row_tabs' | |
| 205 | + ); | |
| 206 | + | |
| 207 | + $this->start_controls_tab( | |
| 208 | + 'odd_row', | |
| 209 | + [ | |
| 210 | + 'label' => esc_html__('Odd row', 'textdomain'), | |
| 211 | + ] | |
| 212 | + ); | |
| 213 | + | |
| 214 | + $this->add_control( | |
| 215 | + 'odd_row_bg_color', | |
| 216 | + [ | |
| 217 | + 'label' => __('Row background', 'uicore-elements'), | |
| 218 | + 'type' => Controls_Manager::COLOR, | |
| 219 | + 'selectors' => [ | |
| 220 | + '{{WRAPPER}} .ui-e-table > .ui-e-odd' => 'background-color: {{VALUE}};', | |
| 221 | + ], | |
| 222 | + ] | |
| 223 | + ); | |
| 224 | + | |
| 225 | + $this->add_control( | |
| 226 | + 'odd_row_padding', | |
| 227 | + [ | |
| 228 | + 'label' => esc_html__('Row Padding', 'uicore-elements'), | |
| 229 | + 'type' => Controls_Manager::DIMENSIONS, | |
| 230 | + 'size_units' => ['px', 'em', 'rem', 'custom'], | |
| 231 | + 'selectors' => [ | |
| 232 | + "{{WRAPPER}} .ui-e-table > .ui-e-odd" => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', | |
| 233 | + ], | |
| 234 | + ] | |
| 235 | + ); | |
| 236 | + | |
| 237 | + $this->add_control( | |
| 238 | + 'odd_row_radius', | |
| 239 | + [ | |
| 240 | + 'label' => esc_html__('Row Border Radius', 'uicore-elements'), | |
| 241 | + 'type' => Controls_Manager::DIMENSIONS, | |
| 242 | + 'size_units' => ['px', 'em', 'rem', 'custom'], | |
| 243 | + 'selectors' => [ | |
| 244 | + "{{WRAPPER}} .ui-e-table > .ui-e-odd.ui-e-first-row-cel" => 'border-radius: {{TOP}}{{UNIT}} 0 0 {{LEFT}}{{UNIT}};', | |
| 245 | + "{{WRAPPER}} .ui-e-table > .ui-e-odd.ui-e-last-row-cel" => 'border-radius: 0 {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} 0;' | |
| 246 | + ], | |
| 247 | + ] | |
| 248 | + ); | |
| 249 | + | |
| 250 | + $this->end_controls_tab(); | |
| 251 | + | |
| 252 | + $this->start_controls_tab( | |
| 253 | + 'even_row', | |
| 254 | + [ | |
| 255 | + 'label' => esc_html__('Even row', 'textdomain'), | |
| 256 | + ] | |
| 257 | + ); | |
| 258 | + | |
| 259 | + $this->add_control( | |
| 260 | + 'even_row_bg_color', | |
| 261 | + [ | |
| 262 | + 'label' => __('Row background', 'uicore-elements'), | |
| 263 | + 'type' => Controls_Manager::COLOR, | |
| 264 | + 'selectors' => [ | |
| 265 | + '{{WRAPPER}} .ui-e-table > .ui-e-even' => 'background-color: {{VALUE}};', | |
| 266 | + ], | |
| 267 | + ] | |
| 268 | + ); | |
| 269 | + | |
| 270 | + $this->add_control( | |
| 271 | + 'even_row_padding', | |
| 272 | + [ | |
| 273 | + 'label' => esc_html__('Row Padding', 'uicore-elements'), | |
| 274 | + 'type' => Controls_Manager::DIMENSIONS, | |
| 275 | + 'size_units' => ['px', 'em', 'rem', 'custom'], | |
| 276 | + 'selectors' => [ | |
| 277 | + "{{WRAPPER}} .ui-e-table > .ui-e-even" => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', | |
| 278 | + ], | |
| 279 | + ] | |
| 280 | + ); | |
| 281 | + | |
| 282 | + $this->add_control( | |
| 283 | + 'even_row_radius', | |
| 284 | + [ | |
| 285 | + 'label' => esc_html__('Row Border Radius', 'uicore-elements'), | |
| 286 | + 'type' => Controls_Manager::DIMENSIONS, | |
| 287 | + 'size_units' => ['px', 'em', 'rem', 'custom'], | |
| 288 | + 'selectors' => [ | |
| 289 | + "{{WRAPPER}} .ui-e-table > .ui-e-even.ui-e-first-row-cel" => 'border-radius: {{TOP}}{{UNIT}} 0 0 {{LEFT}}{{UNIT}};', | |
| 290 | + "{{WRAPPER}} .ui-e-table > .ui-e-even.ui-e-last-row-cel" => 'border-radius: 0 {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} 0;' | |
| 291 | + ], | |
| 292 | + ] | |
| 293 | + ); | |
| 294 | + | |
| 295 | + $this->end_controls_tab(); | |
| 296 | + | |
| 297 | + $this->end_controls_tabs(); | |
| 298 | + | |
| 299 | + | |
| 300 | + $this->end_controls_section(); | |
| 301 | + } | |
| 302 | + | |
| 303 | + protected function build_grid_css($cols) | |
| 304 | + { | |
| 305 | + // Build the grid columns css | |
| 306 | + if ($cols) { | |
| 307 | + $grid_css = ''; | |
| 308 | + $grid_columns = []; | |
| 309 | + $breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints(); | |
| 310 | + | |
| 311 | + foreach ($cols as $index => $item) { | |
| 312 | + | |
| 313 | + // Set desktop column size | |
| 314 | + $grid_columns['desktop'][] = isset($item['col_size']['size']) && isset($item['col_size']['unit']) | |
| 315 | + ? $item['col_size']['size'] . $item['col_size']['unit'] | |
| 316 | + : '1fr'; // fallback | |
| 317 | + | |
| 318 | + foreach ($breakpoints as $breakpoint => $object) { | |
| 319 | + $size_slug = 'col_size_' . $breakpoint; | |
| 320 | + | |
| 321 | + // Register the current column responsive size if exists and the | |
| 322 | + // value is not empty, because empty values breaks the table design | |
| 323 | + $grid_columns[$breakpoint][] = isset($item[$size_slug]['size']) && isset($item[$size_slug]['unit']) | |
| 324 | + ? $item[$size_slug]['size'] . $item[$size_slug]['unit'] | |
| 325 | + : $grid_columns['desktop'][$index]; | |
| 326 | + } | |
| 327 | + } | |
| 328 | + | |
| 329 | + // Generate the css variables | |
| 330 | + foreach ($grid_columns as $device => $values) { | |
| 331 | + $breakpoint = $device === 'desktop' ? '' : '-' . $device; | |
| 332 | + $grid_css .= '--ui-e-table-cols' . $breakpoint . ':' . implode(' ', $values) . ';'; | |
| 333 | + } | |
| 334 | + | |
| 335 | + return $grid_css; | |
| 336 | + } | |
| 337 | + } | |
| 338 | + | |
| 339 | + public function render() | |
| 340 | + { | |
| 341 | + if (!Plugin::$instance->experiments->is_feature_active('nested-elements')) { | |
| 342 | + $this->nesting_fallback(); | |
| 343 | + return; | |
| 344 | + } | |
| 345 | + | |
| 346 | + $cells = $this->get_settings_for_display('cells'); | |
| 347 | + $cols = $this->get_settings_for_display('columns'); | |
| 348 | + $grid_css = $this->build_grid_css($cols); | |
| 349 | + | |
| 350 | + // Add it to the widget wrapper | |
| 351 | + $this->add_render_attribute('_wrapper', ['style' => $grid_css]); | |
| 352 | + | |
| 353 | +?> | |
| 354 | + <div class="ui-e-table"> | |
| 355 | + <?php | |
| 356 | + | |
| 357 | + $columns = count($cols); | |
| 358 | + | |
| 359 | + foreach ($cells as $index => $item) { | |
| 360 | + $row_class = floor($index / $columns) % 2 !== 0 | |
| 361 | + ? 'ui-e-even' | |
| 362 | + : 'ui-e-odd'; | |
| 363 | + | |
| 364 | + // TODO: in the future experiment a nth-child approach so we don't need this first/last classes | |
| 365 | + // Add classes to the first and last items of each row | |
| 366 | + if ($index % $columns === 0) { | |
| 367 | + $row_class .= ' ui-e-first-row-cel'; | |
| 368 | + } else if (($index + 1) % $columns === 0) { | |
| 369 | + $row_class .= ' ui-e-last-row-cel'; | |
| 370 | + } | |
| 371 | + | |
| 372 | + $this->print_child($index, ['class' => $row_class]); | |
| 373 | + } | |
| 374 | + ?> | |
| 375 | + </div> | |
| 376 | + <?php | |
| 377 | + } | |
| 378 | + | |
| 379 | + public function print_child($index, array $atts = []) | |
| 380 | + { | |
| 381 | + $children = $this->get_children(); | |
| 382 | + | |
| 383 | + if (! empty($children[$index])) { | |
| 384 | + | |
| 385 | + // Add custom attributes to each child container. | |
| 386 | + if (!empty($atts)) { | |
| 387 | + //$child_settings = $children[ $index ]->get_settings_for_display(); | |
| 388 | + foreach ($atts as $key => $value) { | |
| 389 | + $children[$index]->add_render_attribute('_wrapper', $key, $value); | |
| 390 | + } | |
| 391 | + } | |
| 392 | + | |
| 393 | + $children[$index]->print_element(); | |
| 394 | + } | |
| 395 | + } | |
| 396 | + | |
| 397 | + protected function get_initial_config(): array | |
| 398 | + { | |
| 399 | + if (Plugin::$instance->experiments->is_feature_active('e_nested_atomic_repeaters')) { | |
| 400 | + return array_merge(parent::get_initial_config(), [ | |
| 401 | + 'support_improved_repeaters' => true, | |
| 402 | + 'node' => '.ui-e-table' | |
| 403 | + ]); | |
| 404 | + } | |
| 405 | + | |
| 406 | + return parent::get_initial_config(); | |
| 407 | + } | |
| 408 | + | |
| 409 | + | |
| 410 | + protected function content_template() | |
| 411 | + { | |
| 412 | + ?> | |
| 413 | + <# | |
| 414 | + const cols=settings.columns || []; | |
| 415 | + const cells=settings.cells || []; | |
| 416 | + const cols_qty='--ui-e-cols-qty:' + cols.length; | |
| 417 | + | |
| 418 | + if ( cols ) { | |
| 419 | + let gridCss='' ; | |
| 420 | + const gridColumns={}; | |
| 421 | + const breakpoints=elementorFrontend.config.responsive.activeBreakpoints; | |
| 422 | + | |
| 423 | + _.each( cols, function( item, index ) { | |
| 424 | + | |
| 425 | + if ( ! gridColumns.desktop ) { | |
| 426 | + gridColumns.desktop=[]; | |
| 427 | + } | |
| 428 | + | |
| 429 | + gridColumns.desktop.push( item.col_size.size + item.col_size.unit ); | |
| 430 | + | |
| 431 | + _.each( breakpoints, function( object, breakpoint ) { | |
| 432 | + const sizeSlug='col_size_' + breakpoint; | |
| 433 | + | |
| 434 | + if ( item[sizeSlug] && item[sizeSlug].size ) { | |
| 435 | + if ( ! gridColumns[breakpoint] ) { | |
| 436 | + gridColumns[breakpoint]=[]; | |
| 437 | + } | |
| 438 | + gridColumns[breakpoint].push( item[sizeSlug].size + item[sizeSlug].unit ); | |
| 439 | + } else { | |
| 440 | + if ( ! gridColumns[breakpoint] ) { | |
| 441 | + gridColumns[breakpoint]=[]; | |
| 442 | + } | |
| 443 | + gridColumns[breakpoint].push( item.col_size.size + item.col_size.unit ); | |
| 444 | + } | |
| 445 | + }); | |
| 446 | + }); | |
| 447 | + | |
| 448 | + _.each( gridColumns, function( values, device ) { | |
| 449 | + const breakpoint=device==='desktop' ? '' : '-' + device; | |
| 450 | + gridCss +='--ui-e-table-cols' + breakpoint + ':' + values.join(' ') + ' ;'; | |
| 451 | + }); | |
| 452 | + | |
| 453 | + view.addRenderAttribute('table', 'data-cell-count' , cells.length); | |
| 454 | + view.addRenderAttribute('table', 'style' , [gridCss, cols_qty].join(' ')); | |
| 455 | + } | |
| 456 | + #> | |
| 457 | + <div class="ui-e-table" {{{ view.getRenderAttributeString('table') }}}> | |
| 458 | + | |
| 459 | + </div> | |
| 460 | + <div class="ui-e-table-editor-placeholder"></div> | |
| 461 | + <?php | |
| 462 | + } | |
| 463 | +} | |
| 464 | +\Elementor\Plugin::instance()->widgets_manager->register(new CustomTable()); | |
