WP Kitchen Meetup Spring 2015 - Виктор Кулебякин: WordPress JavaScript Utils

JAVASCRIPT
WORDPRESS UTILS
JAVASCRIPT УТИЛИТЫ В ЯДРЕ
WORDPRESS, КОТОРЫЕ МОГУТ
СДЕЛАТЬ ЖИЗНЬ РАЗРАБОТЧИКА
ПРОЩЕ.
Докладчик: /Viktor Kuliebiakin victor@pingbull.no

О ЧЕМ ПОЙДЕТ РЕЧЬ?
/**
* Namespace
*/
wp.{ object }

КАК ПОДКЛЮЧИТЬ?
wp_enqueue_script( 'script_name' );

Зачем изобретать велосипед, если кто-то уже это
сделал?

ГДЕ ИСКАТЬ ОПИСАНИЕ?

var frame;
// some magic
frame = wp.media({
title: 'Insert Image(s)',
multiple: true,
library: {
type: 'image'
},
button: {
text: 'Insert into gallery'
}
});
// some magic
frame.open();

WP.AJAX
wp_enqueue_script( 'wp-util' );

ПЕРЕД ТЕМ КАК НАЧАТЬ
$some_function = function () {
// do something
};
/**
* For logged in users
*/
add_action( 'wp_ajax_some_action', $some_function );
/**
* For not logged in users
*/
add_action( 'wp_ajax_nopriv_some_action', $some_function );

КОЕ-ЧТО ЕЩЕ
wp_send_json( [
'success' => false,
'data' => [
'email' => __( 'Email is invalid.' )
]
] );

wp_send_json_success();
...
wp_send_json_success( [
// some answer
] );
...
wp_send_json_error( [
'email' => __( 'Invalid email address.' )
] );

JQUERY ONLY
jQuery.ajax('http://site.com/wp-admin/admin-ajax.php', {
data: {
action: 'some_action',
email: 'some@mail.com',
...
},
method: 'POST',
success: function (response) {
if (response.success) {
// do something with response.data
} else {
// show error etc. from response.data
}
}
});

WP.AJAX
wp.ajax.send('some_action', {
data: {
email: 'some@mail.com',
...
},
success: function (response) {
// do something with response
},
error: function (error) {
// show error etc.
}
});

WP.TEMPLATE
wp_enqueue_script( 'wp-util' );

НЕСКОЛЬКО ПРАВИЛ ПРИ РАБОТЕ С
ШАБЛОНОМ
Синтаксис похож на
Для вывода данных используется {{{ ... }}}
Для вывода HTML-безопасных данных {{ ... }}
Для вычислений <# ... #>
Данные доступны из объекта data
Mustache

<article>
<h3>{{{data.title}}}</h3>
<# if (data.image) { #>
<figure>
<img src="{{data.image}}" alt="thumbnail">
</figure>
<# } #>
{{{data.excerpt}}}
<a href="{{data.permalink}}">Read more</a>
</article>

var tmpl = wp.template('post');
$('.post-list').append(template({
title: 'Hello World!',
image: 'path/to/image.jpg',
excerpt: '<p>Welcome to WordPress. This is your first post.</p>'
permalink: 'https://site.com/2015/05/29/hello-world/'
}));

<article>
<h3>Hello World!</h3>
<figure>
<img src="path/to/image.jpg" alt="thumbnail">
</figure>
<p>Welcome to WordPress. This is your first post.</p>
<a href="https://site.com/2015/05/29/hello-world/">Read more</a>
</article>

WP.HTML
wp_enqueue_script( 'shortcode' );

wp.html.string({
tag: 'input',
single: true,
attrs: {
type: 'email',
id: 'contact-email-1',
name: 'email',
'class': 'input-field',
placeholder: 'Your Email'
}
});

WP.SHORTCODE
wp_enqueue_script( 'shortcode' );

var button = new wp.shortcode({
tag: 'button',
type: 'closed', // closed - default, single, self-closed
attrs: {
title: 'Click me!',
type: 'primary',
icon: 'palmtree'
},
content: 'Click me!'
});

button.string();
[button title="Click me!"
type="primary" icon="palmtree"]Click me![/button]

ЕЩЕ ПАРУ ПОЛЕЗНЫХ МЕТОДОВ
wp.shortcode.next(tag, text, index);
wp.shortcode.replace(tag, text, callback);

someText = wp.shortcode.replace('button', someText,
function (shortcode) {
return wp.html.string({
tag: 'button',
content: shortcode.content,
attrs: {
'class': shortcode.get('type')
+ '-button dashicons-' + shortcode.get('icon'),
title: shortcode.get('title')
}
});
}
);

some text
...
<button class="primary-button dashicons-palmtree"
title="Click me!">Click me!</button>
...
some text

WP.MCE
wp_enqueue_script( 'mce-view' );

wp.mce.views.register('view_id', { object });

WP.HEARTBEAT
wp_enqueue_script( 'heartbeat' );

ДОБАВЛЯЕМ ДАННЫЕ ДЛЯ
ОТПРАВКИ НА СЕРВЕР
newData = {
some: 'data'
};
data = wp.heartbeat.isQueued('your-key');
if (data) {
newData = jQuery.extend(data, newData);
}
wp.heartbeat.enqueue(
'your-key',
newData,
true
);

ПОЛУЧАЕМ ЗАПРОС НА СЕРВЕРЕ С
ПОМОЩЬЮ ЭКШЕНОВ И ФИЛЬТРОВ
heartbeat_received
$response, $data, $screen_id
heartbeat_send
$response, $screen_id
heartbeat_tick
$response, $screen_id

ПОЛУЧАЕМ ОТВЕТ В БРАУЗЕРЕ С
ПОМОЩЪЮ СОБЫТИЙ
jQuery(document).on('heartbeat-tick', function(event, data) {
if (data.hasOwnProperty('your-key')) {
// do something with data
}
});

ЧТО ХОТЕЛОСЬ БЫ СКАЗАТЬ В
КОНЦЕ
Загрузка дополнительных файлов,
дополнительные запросы
Использование на больших проектах
Использование в админке

СПАСИБО ЗА ВНИМАНИЕ!
E-mail: victor@pingbull.no

WP Kitchen Meetup Spring 2015 - Виктор Кулебякин: WordPress JavaScript Utils

More Related Content

What's hot (9)

Viewers also liked (10)

More from WordCamp Kyiv (9)

WP Kitchen Meetup Spring 2015 - Виктор Кулебякин: WordPress JavaScript Utils