JS события в Админке WordPress

Различные JS события которые могут пригодится при создании плагина. Все эти события срабатывают в админке WordPress.

В коде ниже:

$document = jQuery( document )

wp-window-resized

Это по сути тоже самое событие что и resize, только с задержкой в 200ms. Для того чтобы при ресайзе экрана событие срабатывало один раз когда ресайз окончен и не срабатывало много раз во время ресайза.

$document.trigger( 'wp-window-resized' );

wp-collapse-menu | wp-menu-state-set

// menuState может быть: open|folded

// Клик по кнопке «Свернуть меню» в админке (левое меню в админке).
$document.trigger( 'wp-collapse-menu', { state: menuState } );

// Срабатывает при установке статуса (свернуто/развернуто) меню админки
// Статус может меняться при ресайзе экрана
$document.trigger( 'wp-menu-state-set', { state: menuState } );

Пример использования

$document.on( 'wp-menu-state-set wp-collapse-menu', function( event, eventData ) {

	if ( 'folded' === eventData.state ) {
		// делаем что-то
	}
});

wp-responsive-activate

Срабатывает при ресайзе экрана, когда ширина экрана становится больше или меньше 782 пикселя:

$document.trigger( 'wp-responsive-activate' );   // ширина экрана < 782
$document.trigger( 'wp-responsive-deactivate' ); // ширина экрана > 782

Пример

$document.on( 'wp-responsive-activate', function(){

	console.log( 'responsive active' )

} );

screen:options:open | screen:options:close

Срабатывают при открытии/закрытии панели опций экрана. При нажатии на эти кнопки:

$document.trigger( 'screen:options:open' );
$document.trigger( 'screen:options:close' );

Пример

$document.on( 'screen:options:open', function(){

	console.log( 'options:open' )

} );