[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/
Дизайнеры могут подключить свою библиотеку смайликов — черные, белые или даже фотки. Используя данное описание, разобраться достаточно просто.
Сергей Шлоков
01 ноября 2014, 13:37
modx.pro
9
2 977
+12
Поблагодарить автора Отправить деньги

Комментарии: 7

Павел Левин
06 ноября 2014, 19:25
0
Прикольно =) смайлики это хорошо)

Сам же я избегаю регистрацию и юзеров на своих личных проектах, для комментариев, использую hypercomments, просто прикольно придумали инструмент, даже с телефона можно модерацию проводить.
    Jenya Filimonov
    06 октября 2015, 10:46
    0
    Спасибо, за полезный топик. Сделал смайлики себе: )
      Сергей Шлоков
      06 октября 2015, 12:13
      0
      На здоровье!

      П.С. Все никак не соберусь сделать пакет.
        adminixi
        03 октября 2016, 20:23
        0
        Скажите, а это куда вставлять?
        [[!TicketCommentSmiles? &snippetPrepareComment=`parseCommentSmiles` &show_smiles=`1`]]
        Я в tpl.Tickets.comment.form добавила… Неправильно?

        Не выводит смайлы…
          Сергей Шлоков
          03 октября 2016, 21:33
          0
          Этот сниппет вставляется на странице где нужно вывести комментарии.
      Игорь Игамов
      03 февраля 2017, 20:15
      0
      Спасибо за смайлики. А не подскажите, как сделать, чтобы в
      <code></code>
      они не отображались? Спасибо!
        Сергей Шлоков
        04 февраля 2017, 09:34
        0
        Один из вариантов — перед функцией str_replace нужно вырезать код из тега code, а после вернуть обратно.
        Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
        7