JustNews主题可视化编辑器Filps翻转模块和Tab切换模块

自带的可视化编辑器模块有两个效果没有Filps翻转和Tab切换，也是自己简单写了俩，这两个模块放至主题/modules目录下，建议建子主题，避免更新覆盖。

一、TAB切换模块

该模块主要是基于手风琴模块修改，tab页横向自动切换，当鼠标移动到标题是切换停止，效果如下所示。

<?php
defined( 'ABSPATH' ) || exit;
class WPCOM_Module_zke_tabs extends WPCOM_Module {
    function __construct() {
        $options = array(
            array(
                'tab-name' => '常规设置',
                'title' => array(
                    'name' => '模块标题'
                ),
                'sub-title' => array(
                  'name' => '模块副标题'
                ),
                'tabs' => array(
                    'type' => 'repeat',
                    'name' => '选项卡',
                    'items' => array(
                        'title' => array(
                            'name' => '标题'
                        ),
                        'content' => array(
                            'name' => '内容',
                            'type' => 'e',
                        )
                    )
                ),
                'align' => array(
                    'name' => '对齐',
                    'f' => 'block:0',
                    'v-show' => 1,
                    'type' => 'r',
                    'ux' => 1,
                    'mobile' => 1,
                    'value' => 'center',
                    ),
            ),
            array(
                'tab-name' => '风格样式',
                'color' => array(
                    'name' => '模块标题颜色',
                    'type' => 'color',
                    'gradient' => 1
                ),
                'title-color' => array(
                    'name' => '选项卡标题颜色',
                    'type' => 'color',
                    'desc' => '选项卡标题部分的文字颜色',
                    'gradient' => 1
                ),
                'content-color' => array(
                    'name' => '选项卡内容颜色',
                    'type' => 'color',
                    'desc' => '选项卡内容部分的文字颜色',
                    'gradient' => 1
                ),
                'style' => array(
                    'name' => '显示风格',
                    'type' => 'radio',
                    'ux' => 1,
                    'value' => '0',
                    'o' => array(
                        '0' => '默认风格',
                        '1' => '有背景色'
                    )
                ),
                'bg-color' => array(
                'name' => '选项卡背景颜色',
                'type' => 'c',
                'gradient' => 1
                 ),
                
                'margin' => array(
                'name' => '外边距',
                'type' => 'trbl',
                'mobile' => 1,
                'use' => 'tb',
                'desc' => '和上下模块/元素的间距',
                'units' => 'px, %, vw, vh',
                'value'  => apply_filters('module_default_margin_value', '20px')
                ),
                'padding' => array(
                    'name' => '内边距',
                    'type' => 'trbl',
                    'mobile' => 1,
                    'desc' => '模块内容区域与边界的距离',
                    'units' => 'px, %, vw, vh',
                    'value'  => '20px 0'
                ),
                'mobile-hide' => array(
                'name' => '移动端隐藏',
                'type' => 't',
                'desc' => '开启则在移动端不显示'
                ),
                'box-shadow' => array(
                'name' => '阴影',
                'type' => 'bs',
                'value'  => '',
                'mobile' => 1,
                'desc' => '可选，设置容器阴影'
                 )
            )
        );
        if(!function_exists('wpcom_module_title')){
            unset($options[0]['title']);
            unset($options[0]['sub-title']);
            unset($options[1]['color']);
        }
        parent::__construct('tabs', 'ZK选项卡', $options, 'horizontal_split', '/themer/mod-my-module.png');
    }
    function style( $atts ){
            $bg_color = WPCOM::gradient_color($this->value('bg-color'));
            return array(
                'color' => array(
                    ',.sec-title' => '{{color}};',
                    '.sec-title-wrap:after, .sec-title-wrap:before' => '{{background-color}};'
                ),
                'title-color' => array(
                    '.nav-tabs > li > a' => '{{color}};'
                ),
                'content-color' => array(
                    '.tab-content' => '{{color}};',
                ),
                'bg-color' => array(
                    '.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus' => '{{background-color}};'
                ),
                'box-shadow' => array(
                    '.container-inner' =>  'box-shadow: {{value}};'
                ),
                'align' => array(
                    '.nav-tabs' => 'display: flex !important; justify-content: {{value}};',
                )
            );
        }

   function template( $atts, $depth ){
    $style = $this->value('style') ? ' tab-style-2' : '';
    if(function_exists('wpcom_module_title')){
        wpcom_module_title($this->value('title'), $this->value('sub-title'));
    }

    ?>
    <div class="wp-block-wpcom-tabs<?php echo $style;?>" id="tabs-<?php echo $this->value('modules-id');?>" role="tabpanel">
        <div class="tab-slider-wrap">
            <ul class="nav nav-tabs" role="tablist">
                <?php 
                if($this->value('tabs')){
                    foreach($this->value('tabs') as $index => $item) {
                        $active_class = '';
                        if ($index == 0) {
                            $active_class = ' active';
                        }
                ?>
                <li role="presentation" class="<?php echo $active_class; ?>"><a href="#tab-<?php echo $this->value('modules-id');?>-<?php echo $index; ?>" aria-controls="tab-<?php echo $this->value('modules-id');?>-<?php echo $index; ?>" role="tab" data-toggle="tab"><?php echo $item['title']; ?></a></li>
                <?php 
                    }
                }
                ?>
            </ul>
            <div class="tab-content">
                <?php 
                if($this->value('tabs')){
                    foreach($this->value('tabs') as $index => $item) {
                        $active_class = '';
                        if ($index == 0) {
                            $active_class = ' in active';
                        }
                ?>
                <div role="tabpanel" class="tab-pane fade<?php echo $active_class; ?>" id="tab-<?php echo $this->value('modules-id');?>-<?php echo $index; ?>">
                    <?php echo wpautop($item['content']); ?>
                </div>
                <?php 
                    }
                }
                ?>
            </div>
        </div>
    </div>
    <style>
    .nav-tabs li.active a {
        /* 添加选项卡被激活时的样式 */
        background-color: var(--theme-color);
        border-color: var(--theme-color);
        color: white;
    }
    </style>
    <script>
    jQuery(document).ready(function($) {
        var currentIndex = 0;
        var numTabs = <?php echo count($this->value('tabs')); ?>;
        var intervalId; 

        // 激活第一个tab
        $('#tabs-<?php echo $this->value('modules-id'); ?> a:first').tab('show');

        // 每隔3秒切换
        intervalId = setInterval(function() {
            $('#tabs-<?php echo $this->value('modules-id'); ?> li:eq(' + currentIndex + ') a').tab('show');
            currentIndex = (currentIndex + 1) % numTabs;
        }, 3000);

        // 鼠标移动上去后停止切换
        $('#tabs-<?php echo $this->value('modules-id'); ?> li').hover(
            function() {
                clearInterval(intervalId);
            },
            function() {
                intervalId = setInterval(function() {
                    $('#tabs-<?php echo $this->value('modules-id'); ?> li:eq(' + currentIndex + ') a').tab('show');
                    currentIndex = (currentIndex + 1) % numTabs;
                }, 2000);
            }
        );
    });
</script>
<?php 
} 


}

register_module( 'WPCOM_Module_zke_tabs' );

二、Filps翻转模块

这个模块主要实现的是3D反转，可设置背景渐变等，可选择横向或纵向的翻转，效果如下所示：

<?php
class WPCOM_Module_zke_flips extends WPCOM_Module {
    function __construct() {
        $options = array(
            array(
                'tab-name' => '翻转内容',
                'mobile-hide' => array(
                'name' => '移动端隐藏',
                'type' => 't',
                'desc' => '开启则在移动端不显示'
            ),
                'enable-flip' => array(
                    'name' => '开启翻转',
                    'type' => 't',
                    'value' => 1,
                    'desc' => '开启后将展示正反两面内容'
                ),
                'front-content' => array(
                    'name' => 'HTML代码',
                    'type' => 'ta',
                    'rows' => 20,
                    'code' => ''
                ),
                'back-content' => array(
                    'name' => 'HTML代码',
                    'type' => 'ta',
                    'rows' => 20,
                    'code' => ''
                ),
                'content-margin' => array(
                    'name' => '内容外边距',
                    'type' => 'trbl',
                    'mobile' => 1,
                    'use' => 'tb',
                    'desc' => '和上下模块/元素的间距',
                    'units' => 'px, %, vw, vh',
                    'value'  => apply_filters('module_default_margin_value', '10px')
                ),
                'content-padding' => array(
                    'name' => '内容内边距',
                    'type' => 'trbl',
                    'mobile' => 1,
                    'desc' => '模块内容区域与边界的距离',
                    'units' => 'px, %, vw, vh',
                    'value'  => '10px'
                )
            ),
            array(
                'tab-name' => '风格样式',
                'direction' => array(
                    'name' => '翻转方向',
                    'type' => 'select',
                    'options' => array(
                        'lr' => '从左到右',
                        'rl' => '从右到左',
                        'tb' => '从上到下',
                        'bt' => '从下到上',
                    ),
                    'value' => 'tb',
                    'desc' => '选择翻转的方向',
                ),

                'margin' => array(
                    'name' => '模块外边距',
                    'type' => 'trbl',
                    'mobile' => 1,
                    'use' => 'tb',
                    'desc' => '和上下模块/元素的间距',
                    'units' => 'px, %, vw, vh',
                    'value'  => apply_filters('module_default_margin_value', '10px')
                ),
                'padding' => array(
                    'name' => '模块内边距',
                    'type' => 'trbl',
                    'mobile' => 1,
                    'desc' => '模块内容区域与边界的距离',
                    'units' => 'px, %, vw, vh',
                    'value'  => '10px'
                ),
                'front-bg-color' => array(
                    'name' => '正面背景颜色',
                    'type' => 'color',
                    'gradient' => 1
                ),
                'back-bg-color' => array(
                    'name' => '反面背景颜色',
                    'type' => 'color',
                    'gradient' => 1
                )
            )
        );
        parent::__construct('zke_flips', 'ZK翻转卡片', $options, 'horizontal_split', '/themer/mod-my-module.png');
    }

   function style( $atts ) {
            // 获取前面和后面的背景颜色
            $front_bg_color = WPCOM::gradient_color($this->value('front-bg-color'));
            $back_bg_color = WPCOM::gradient_color($this->value('back-bg-color'));
        
            // 根据翻转方向定义样式属性
            $direction = $this->value('direction');
            switch ($direction) {
                case 'lr':
                    $default_back_transform = 'translateX(110px) rotateY(-90deg)';
                    $front_transform = 'translateX(-110px) rotateY(90deg)';
                    $back_transform = 'translateX(0) rotateY(0)';
                    
                    break;
                case 'rl':
                    $default_back_transform = 'translateX(-110px) rotateY(90deg)';
                    $front_transform = 'translateX(110px) rotateY(-90deg)';
                    $back_transform = 'translateX(0) rotateY(0)';
                    break;
                case 'bt':
                    $default_back_transform = 'translateY(110px) rotateX(-90deg)';
                    $front_transform = 'translateY(-110px) rotateX(90deg)';
                    $back_transform = 'translateY(0) rotateX(0)';
                    break;
                case 'tb':
                    $default_back_transform = 'translateY(-110px) rotateX(90deg)';
                    $front_transform = 'translateY(110px) rotateX(-90deg)';
                    $back_transform = 'translateY(0) rotateX(0)';
                    break;
            }
        
            // 定义样式属性
            return array(
                'front-bg-color' => array(
                    '.front-flip ' => $front_bg_color
                ),
                'back-bg-color' => array(
                    '.back-flip ' => $back_bg_color
                ),
                'padding' => array(
                    '.container-inner' => 'padding: {{value}};'
                ),
                'margin' => array(
                    '.container-inner' => 'margin: {{value}};'
                ),
                'content-margin' => array(
                    '.front-content,.back-content' => 'margin: {{value}};'
                ),
                'content-padding' => array(
                    '.front-content,.back-content' => 'padding: {{value}}; '
                ),
                'enable-flip' => $this->value('enable-flip') ? array(
                    '*' => 'margin:0;padding:0;box-sizing:border-box;',
                    '.zke-flips-block' => 'display:flex;flex-wrap:wrap;justify-content:center;',
                    '.zke-flips' => 'width:100%;height: 100%;margin:10px;text-align:center;position:relative;transform-style:preserve-3d;perspective:3000px;',
                    '.zke-flips .front-flip' => 'width:100%;height: 100%;display:flex;flex-direction:column;justify-content:center;box-shadow:0 5px 20px rgba(0,0,0,0.1);transition:0.5s ease;',
                    '.zke-flips .back-flip' => 'position:absolute;top:0;left:0;z-index:1;width:100%;height: 100%;color:#fff;opacity:0;transform:'.$default_back_transform.';transition:0.5s ease;',
                    '.zke-flips:hover .front-flip' => 'opacity:0;transform: ' . $front_transform . ';',
                    '.zke-flips:hover .back-flip' => 'opacity:1;transform: ' . $back_transform . ';'
                    
                ) : '',
                'mobile-hide' => array(
                    '@[(max-width: 767px)]' =>  $this->value('mobile-hide') ? 'display: none;' : ''
                )
            );
        }


        function template( $atts, $depth ) {
            if(function_exists('wpcom_module_title')){
                wpcom_module_title($this->value('title'), $this->value('sub-title'));
            } ?>
        
            <div class="zke-flips-block">
                <div class="zke-flips <?php echo $this->value('direction'); ?>">
                    <div class="front-flip">
                        <div class="front-content"><?php echo wpautop($this->value('front-content')); ?></div>
                    </div>
                    <div class="back-flip">
                        <div class="back-content" ><?php echo wpautop($this->value('back-content')); ?></div>
                    </div>
                </div>  
            </div>
        <?php
        }

}

register_module( 'WPCOM_Module_zke_flips' );