README

SavvyPanel 是一个帮助库，用于使用标签、部分和控件创建更具吸引力的设置仪表板。

通过 composer 添加库

composer require badabingbreda/savvy-panel dev-main

它假定仪表板面板是通过插件添加的，如果未在早期定义，则将自动创建 SAVVYPANEL_URL 常量。如果要在其他位置加载，请将此常量设置为正确位置。

添加仪表板

确保在安装 composer 包后自动加载 vendor/autoload.php 文件。

<?php
class PluginDashboard {

    public function __construct() {

        add_action( 'init' , __CLASS__ . '::init' , 10 );
    }

    public static function init() {

        new \SavvyPanel\Dashboard( [ 
            'id' => 'beavercss',
            'menu_title' => 'Beaver CSS',
            'title' => 'Beaver CSS',
            'heading' => 'Beaver CSS Settings',
            'type' => 'menu',
        ] ); 

        /**
        * 
        * Viewport
        * 
        */
        new \SavvyPanel\Tab( [
            'id' => 'viewport',
            'dashboard' => 'beavercss',     // our dashboard id
            'title' => 'Main',              // comment out this key if you don't want the title rendered above the controls
            'menu_title' => 'Viewport',
            'menu_slug' => 'viewport',
            'priority' => 10,
        ]);

        new \SavvyPanel\Controls\ControlSection([
            'id' => 'breakpoints',
            'dashboard' => 'beavercss',
            'tab' => 'viewport',
            'label' => 'Breakpoints',
        ]);

        new \SavvyPanel\Controls\ControlText([
            'dashboard' => 'beavercss',
            'tab' => 'viewport',
            'section' => 'breakpoints',
            'id' => 'media-breakpoint-s',
            'label' => "Breakpoint Small",
            'suffix' => "px",
            'value' => \get_option( 'media-breakpoint-s' , 640 ),
        ]);


    }
}

new PluginDashboard();

发送更新设置

您可以通过在标题中添加加载的 JavaScript 来挂钩 Savvy 面板更新操作，如下所示

<?php
class ScriptStyle {

    public function __construct() {
        add_action( 'admin_enqueue_scripts' , __CLASS__ . '::admin_files' , 10 , 1 );
    }
    
    public static function admin_files() {
        wp_enqueue_script( 'savvypanel-handler', plugin_url( '/' , __FILE__ ) . 'js/savvy-panel.js', null, '1.0.0', false );
    }
}

new ScriptStyle();

您可以在加载策略中添加额外的检查，以确保它们仅在管理员和页面中加载。

在您的 savvy-panel.js 文件中，添加对 Savvy 钩子的回调，如下所示

document.savvyPanelActions = [
    { 
        hook : 'savvyUpdate',
        priority : 10,
        callback: ( savvy ) => {

            savvy.sending = true;

            const settings = savvy.collectSettings();
    
            // use fetch
            fetch( SAVVYPANEL_LOCAL.admin_ajax_url + `?action=savvypanel_update`,
            {
                method: 'POST',
                headers: { 
                    'Accept' : 'application/json',
                    'Content-Type': 'application/json',
                    'X-WP-Nonce': SAVVYPANEL_LOCAL._wpnonce,
                },
                body: savvy.asFormData( settings ),
            } )
            .then( ( response ) => response.json() )
            .then( ( data ) => {
                    savvy.sending = false;
                    data.notifications.forEach( (noti, index) => {
                        setTimeout( () => { notis.create( { title : noti.title , description : noti.description , duration: 5 ,  status: noti.status, destroyOnClick: true } ); } , index * 300 );
                    });
            })
            .catch( (error) => {
                savvy.sending = false;
                console.log( 'I messed up ' , error );
            } );
        }
    }
];

在此示例中，回调将在点击面板上的“保存更改”按钮时触发。变量 savvy 是浏览器中存在的 Savvy 面板实例，可以用于收集所有标签的设置并将它们格式化为表单数据。请注意，您还可以使用 SAVVYPANEL_LOCAL 变量，该变量用于将 savvy 脚本本地化，并使用 admin-ajax.php URL 和服务器生成的 nonce。

在此回调中，使用了操作 savvypanel_update，您需要在自己的插件中注册此操作，如下所示

add_action( 'wp_ajax_savvypanel_update' , 'your_custom_callback' , 10 , 1 );

在那里，请确保在执行任何操作之前检查 nonce。

function your_custom_callback() {

    if ( !wp_verify_nonce( $_SERVER[ 'HTTP_X_WP_NONCE' ] , 'savvypanel_update_settings' ) ) {
        return wp_encode_json( [ 
            'success' => false, 
            'notifications' => [
                [ 
                    'status' => 'error',
                    'title' => 'Nonce Failed',
                    'description' => 'Unable to verify nonce or failed.',
                ]
            ],
        ] );
        wp_die();
    }

    //
    // rest of your code
    //

    return wp_encode_json( [ 
        'success' => true, 
        'notifications' => [
                [ 
                    'status' => 'success',
                    'title' => 'Well done!',
                    'description' => 'Settings have been updated. Feel free to make some more!',
                ]
        ],
    ] );
    
    wp_die();
}

过滤器

您可以使用过滤器钩子来禁用默认通知和/或仪表板 CSS 的队列。

add_filter( 'savvypanel/css/notifications' , '__return_false' );
add_filter( 'savvypanel/css/dashboard' , '__return_false' );

您可以使用位于包中的 scss 文件，并使用您选择的预处理器生成自己的样式。