masimmo.pl/modules/creativeelements/includes/widgets/category-tiles.php

<?php
namespace CE;

defined('_PS_VERSION_') or exit;

class WidgetCategoryTiles extends WidgetBase
{
    public function getName()
    {
        return 'category-tiles';
    }

    public function getTitle()
    {
        return __('Category Tiles');
    }

    public function getIcon()
    {
        return 'eicon-post-list';
    }

    public function getKeywords()
    {
        return ['category', 'tiles', 'category tiles'];
    }

    protected function _registerControls()
    {
        $this->startControlsSection(
            'section_icon',
            [
                'label' => __('Tiles List'),
            ]
        );

        $repeater = new Repeater();

        $repeater->addControl(
            'text',
            [
                'label' => __('Text'),
                'type' => ControlsManager::TEXT,
                'label_block' => true,
                'placeholder' => __('List Item'),
                'default' => __('List Item'),
                'dynamic' => [
                    'active' => true,
                ],
                'selectors' => [
                    '{{WRAPPER}} p' => 'margin-bottom: 0;',
                ],
            ]
        );

        $repeater->addControl(
            'selected_icon',
            [
                'label' => __('Choose Image'),
                'type' => ControlsManager::MEDIA,
                'seo' => true,
                'dynamic' => [
                    'active' => true,
                ],
                'default' => [
                    'url' => Utils::getPlaceholderImageSrc(),
                ],
            ]
        );

        $repeater->addControl(
            'link',
            [
                'label' => __('Link'),
                'type' => ControlsManager::URL,
                'dynamic' => [
                    'active' => true,
                ],
                'placeholder' => __('https://your-link.com'),
            ]
        );

        $this->addControl(
            'tiles_list',
            [
                'type' => ControlsManager::REPEATER,
                'fields' => $repeater->getControls(),
                'default' => [
                    [
                        'text' => __('Lorem ipsum'),
                    ],
                ],
                'title_field' => '{{{ elementor.helpers.renderIcon( this, selected_icon, {}, "i", "panel" ) || \'<i class="{{ icon }}" aria-hidden="true"></i>\' }}} {{{ text }}}',
            ]
        );
        $this->endControlsSection();

        // ------

        $this->startControlsSection(
          'section_style',
          [
              'label' => __('Text Editor'),
              'tab' => ControlsManager::TAB_STYLE,
          ]
        );
        $this->addControl(
          'text_color',
          [
              'label' => __('text color'),
              'type' => ControlsManager::COLOR,
              'selectors' => [
                  '{{WRAPPER}} li p' => 'color: {{VALUE}};',
              ],
          ]
        );
        
        $this->addControl(
            'text_color_hover',
            [
                'label' => __('text color hover'),
                'type' => ControlsManager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} li:hover p' => 'color: {{VALUE}};',
                    '{{WRAPPER}} li p' => 'transition: color 250ms ease-in-out;'
                ],
            ]
        );
        
        $this->addGroupControl(
            GroupControlTypography::getType(),
            [
                'name' => 'icon_typography',
                'selector' => '{{WRAPPER}} li p',
                'scheme' => SchemeTypography::TYPOGRAPHY_3,
            ]
        );

        $this->addResponsiveControl(
            'tile_data_position',
            [
                'label' => __('Alignment'),
                'type' => ControlsManager::CHOOSE,
                'options' => [
                    'left' => [
                        'title' => __('Left'),
                        'icon' => 'eicon-h-align-left',
                    ],
                    'center' => [
                        'title' => __('Center'),
                        'icon' => 'eicon-h-align-center',
                    ],
                    'right' => [
                        'title' => __('Right'),
                        'icon' => 'eicon-h-align-right',
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} li' => 'text-align: {{VALUE}};',
                ],
            ]
        );

        
        $this->addResponsiveControl(
            'title_gap_space',
            [
                'label' => __('Spacing'),
                'type' => ControlsManager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} li img' => 'margin-bottom: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        
        $this->addResponsiveControl(
            'title_bottom_space',
            [
                'label' => __('Tile padding'),
                'type' => ControlsManager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} li' => 'padding: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        
        $this->addResponsiveControl(
            'title_border_radius',
            [
                'label' => __('Tile border radius'),
                'type' => ControlsManager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} li' => 'border-radius: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        
        $this->addControl(
            'toggle_background_color',
            [
                'label' => __('Background Color'),
                'type' => ControlsManager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} li' => 'background-color: {{VALUE}}',
                ],
            ]
        );
        $this->endControlsSection();

    }

    /**
     * Render video widget output on the frontend.
     *
     * Written in PHP and used to generate the final HTML.
     *
     * @since 1.0.0
     */
    protected function render()
    {
        $settings = $this->getSettingsForDisplay();
        ?>
        <ul class="category-tiles-list">
            <?php foreach ($settings['tiles_list'] as $index => $item) : ?>
                <li>
                    <?php if($item['link']['url']) : ?>
                        <a href="<?php echo $item['link']['url']; ?>">
                    <?php endif; ?>

                        <img src="<?php echo $item['selected_icon']['url']; ?>" alt="">
                        <p><?php echo $item['text']; ?></p>
                    
                    <?php if($item['link']['url']) : ?>
                        </a>
                    <?php endif; ?>
                </li>
            <?php endforeach; ?>
        </ul>
        <?php
    }
}