[Tickets] Комментарии со смайликами

Вот дошли до второй части описания книги отзывов. Здесь я расскажу, как добавить колобков к комментариям.

В первой части я написал, что ajax — самая простая часть. На самом деле — добавить смайлики к комментариям так же просто. Всего те же простых 3 шага.

1. Редактируем сниппет TicketComment. Так же как и в первой части, советую сделать его копию (например, TicketCommentSmiles) и внести небольшие изменения.

1.1. В начале сниппета строчку

$scriptProperties['snippetPrepareComment'] = $modx->getOption('tickets.snippet_prepare_comment');

меняем на

$scriptProperties['snippetPrepareComment'] = isset($snippetPrepareComment) ? $snippetPrepareComment : $modx->getOption('tickets.snippet_prepare_comment');

Зачем, будет понятно в шаге 2.

1.2. Дальше ищем строчку $Tickets = $modx->getService и вставляем после нее блок со смайликами, который затем и будем наблюдать в форме комментария:

if (isset($show_smiles) && $show_smiles) {
if ($this->config['show_smiles']) {
	$smiles_path =$Tickets->config['imagesUrl'].'smiles/';
	$smiles = "<div class=\"form-group smiles\">
    	<a href=\"#\"><img alt=\":p\" src=\"{$smiles_path}s1.gif\"></a> <a href=\"#\"><img alt=\":)\" src=\"{$smiles_path}s2.gif\"></a> 
    	<a href=\"#\"><img alt=\":a\" src=\"{$smiles_path}s3.gif\"></a> <a href=\"#\"><img alt=\":q\" src=\"{$smiles_path}s4.gif\"></a> 
    	<a href=\"#\"><img alt=\":s\" src=\"{$smiles_path}s5.gif\"></a> <a href=\"#\"><img alt=\":r\" src=\"{$smiles_path}s6.gif\"></a> 
    	<a href=\"#\"><img alt=\":v\" src=\"{$smiles_path}s7.gif\"></a> <a href=\"#\"><img alt=\":w\" src=\"{$smiles_path}s8.gif\"></a> 
    	<a href=\"#\"><img alt=\";)\" src=\"{$smiles_path}s9.gif\"></a> <a href=\"#\"><img alt=\":(\" src=\"{$smiles_path}s10.gif\"></a>
    	<a href=\"#\"><img alt=\":E\" src=\"{$smiles_path}s11.gif\"></a><a href=\"#\"><img alt=\":j\" src=\"{$smiles_path}s12.gif\"></a>
    	<a href=\"#\"><img alt=\":u\" src=\"{$smiles_path}s13.gif\"></a><a href=\"#\"><img alt=\":\ \" src=\"{$smiles_path}s14.gif\"></a>
    	<a href=\"#\"><img alt=\":o\" src=\"{$smiles_path}s15.gif\"></a>
    </div>";
} else {
    $smiles = '';
}

1.3. Идем в конец сниппета и находим строчку:

$pls = array('thread' => $scriptProperties['thread']);

Сразу после нее добавляем:

$pls['smiles'] = $smiles;

Вот полный код сниппета.

2. Следующим шагом используем замечательную возможность компонента Tickets подключать пользовательский сниппет для обработки комментариев.
Для этого создадим сниппет, который будет парсить коды смайликов, и назовем его parseCommentSmiles.
Он не очень большой, поэтому я приведу его целиком.

<?php
/** @var array $data */
$data['gravatar'] = $this->config['gravatarUrl'] . md5(strtolower($data['email'])) .'?s=' . $this->config['gravatarSize'] . '&d=' . $this->config['gravatarIcon'];
$data['avatar'] = !empty($data['photo'])
	? $data['photo']
	: $data['gravatar'];
if (!empty($data['resource'])) {
	$data['url'] = $this->modx->makeUrl($data['resource'], '', '', 'full');
}
$data['date_ago'] = $this->dateFormat($data['createdon']);
/*Смайлики*/
if ($this->config['show_smiles']) {
    $smiles_path=$this->config['imagesUrl'].'smiles/';
    $smiles_code = array(':p',':)',':a',':q',':s',':r',':v',':w',';)',':(',':E',':j',':u',':\\',':o');
    $smiles_image = array('<img alt=":p" src="'.$smiles_path.'s1.gif">','<img alt=":)" src="'.$smiles_path.'s2.gif">','<img alt=":a" src="'.$smiles_path.'s3.gif">',
    	'<img alt=":q" src="'.$smiles_path.'s4.gif">','<img alt=":s" src="'.$smiles_path.'s5.gif">','<img alt=":r" src="'.$smiles_path.'s6.gif">',
    	'<img alt=":v" src="'.$smiles_path.'s7.gif">','<img alt=":w" src="'.$smiles_path.'s8.gif">','<img alt=";)" src="'.$smiles_path.'s9.gif">',
    	'<img alt=":(" src="'.$smiles_path.'s10.gif">','<img alt=":E" src="'.$smiles_path.'s11.gif">','<img alt=":j" src="'.$smiles_path.'s12.gif">',
    	'<img alt=":u" src="'.$smiles_path.'s13.gif">','<img alt=":\" src="'.$smiles_path.'s14.gif">','<img alt=":o" src="'.$smiles_path.'s15.gif">');
    $data['text'] = str_replace($smiles_code, $smiles_image, $data['text']);
}

return $data;

3. Теперь осталось поправить чанк с формой, чтобы смайлики отображались. Точнее пару чанков:

• tpl.Tickets.comment.form — для авторизованных пользователей;
• tpl.Tickets.comment.form.guest — для гостей.

В начало чанка добавляем скрипт, который вставляет в текст код смайлика при клике на нем:

<script type="text/javascript">
$(document).on('click', '.smiles > a', function(e) {
		e.preventDefault();
		var comment = $("#comment-editor");
		comment.val( comment.val() + $("img",this).attr('alt') );
});
</script>

А после div с textarea вставляем плейсхолдер [[+smiles]].

Это всё. Кто боялся, открываем глаза и пишем вызов сниппета:

[[!TicketCommentSmiles? &snippetPrepareComment=`parseCommentSmiles` &show_smiles=`1`]]

Вызываем сниппет с 2-мя параметрами:

• snippetPrepareComment — в нем указываем наш сниппет, который будет парсить комментарии.
• show_smiles — включает обработку смайликов.

Собственно, ничего сложного. Единственное замечание, смайлики в данном исполнении будут под формой.

Вариации.
1. Можно только парсить смайлики, без отображения их в форме: написал человек — :), а получил смайлик, как в яндексе. Тогда можно ограничится только пунктом 1.1 и шагом 2, а остальное пропустить.
2. Чтобы перекинуть смайлики в панель инструментов как у меня, придется выполнить еще одно несложное действие — в исходном /assets/components/tickets/js/web/default.js в конце блока $(document).ready (где-то в районе 130 строки) дописать код:

$(".smiles").appendTo( ".markItUpHeader" );

Вроде ничего не забыл. Пробуйте. А нет, забыл. Вот собственно сами смайлики. Положить их нужно в папку

/assets/components/tickets/img/

Дизайнеры могут подключить свою библиотеку смайликов — черные, белые или даже фотки. Используя данное описание, разобраться достаточно просто.

<code></code>