Смайлики для комментариев. iCMS2

4488
Бесплатный хак для instantCMS 2, который добавить в форму комментарий, множество видов смайликов. Сама картинка в виде спрайта в формате png, т.е. все смайлики объединены в один файл, по этому загружается, кэшируется и отображаются.
""

Установка

Скачаем архив и загрузим в корень сайта.
Откроем файл \templates\default\controllers\comments\list.tpl.php в строку 6 добавим
Код PHP:
  1. <!--START smiles-->
  2. <?php $this->addCSS('templates/default/assets/ui/smiles/css/emojione.sprites.css'); ?>
  3. <?php $this->addCSS('templates/default/assets/ui/smiles/css/emojionearea.min.css'); ?>
  4. <?php $this->addJS('templates/default/assets/ui/smiles/js/emojione.min.js'); ?>
  5. <?php $this->addJS('templates/default/assets/ui/smiles/js/emojionearea.min.js'); ?>
  6. <!--END smiles-->
В строке 99 находим
Код PHP:
  1. <?php echo $user->is_logged ? html_editor('content') : html_textarea('content'); ?>
После добавим
Код PHP:
  1. <div id="smiles_container"></div>
В конце файла найти
Код PHP:
  1. <script>
  2. <?php echo $this->getLangJS('LANG_SEND', 'LANG_SAVE', 'LANG_COMMENT_DELETED', 'LANG_COMMENT_DELETE_CONFIRM'); ?>
  3. <?php if ($is_highlight_new){ ?>icms.commments.showFirstSelected();<?php } ?>
  4. </script>
и заменить на
Код PHP:
  1. <script>
  2. <?php echo $this->getLangJS('LANG_SEND', 'LANG_SAVE', 'LANG_COMMENT_DELETED', 'LANG_COMMENT_DELETE_CONFIRM'); ?>
  3. <?php if ($is_highlight_new){ ?>icms.commments.showFirstSelected();<?php } ?>
  4. $(document).ready(function() {
  5. emojione.imageType = 'png';
  6. emojione.ascii = true;
  7. emojione.sprites = true;
  8. $("#comments_add_form .textarea").emojioneArea({container: "#smiles_container",hideSource: true});
  9. });
  10. </script>
После этого у вас на форме комментирования, должны появиться смайлики, но при добавлении мы видим просто текст а не смайлик.

Что бы это исправить, откроем файл \templates\default\controllers\comments\comment.tpl.php и в строку 2 добавим
Код PHP:
  1. <?php $this->addCSS('templates/default/assets/ui/smiles/css/emojione.sprites.css'); ?>
  2. <?php $this->addJS('templates/default/assets/ui/smiles/js/emojione.min.js'); ?>
И в конце, перед <?php } ?> добавим
Код PHP:
  1. <script>
  2. $(document).ready(function() {
  3. emojione.imageType = 'png';
  4. emojione.ascii = true;
  5. emojione.sprites = true;
  6. $(".comment .text").each(function() {$(this).html(emojione.shortnameToImage($(this).html()));});
  7. });
  8. </script>
Теперь в место текстов, на комментариях отображаться смайлики, но при нажатии Предпросмотр всё ровно отображается текст и кнопка Редактировать не работает.

Что бы это исправить, откроем файл \templates\default\js\comments.js и в строку 60 после
Код PHP:
  1. $('textarea', form).val('').focus();
добавим
Код PHP:
  1. $('.emojionearea-editor', form).text('');
Строку 134 заменим на
Код PHP:
  1. $('.preview_box', form).html( emojione.shortnameToImage(result.html) ).slideDown();
В строке 238 находим
Код PHP:
  1. if (result.html){
  2. this.append(result);
  3. }
и заменим на
Код PHP:
  1. if (result.html){
  2. result.html = emojione.shortnameToImage(result.html);
  3. this.append(result);
  4. }
Строку 257 заменим на
Код PHP:
  1. $('#comments_list #comment_'+result.id+' .text').html( emojione.shortnameToImage(result.html) );
В строку 297 добавим
Код PHP:
  1. $('.emojionearea-editor', form).text(result.html).focus();
в строке 447 находим
Код PHP:
  1. $('textarea', form).val('');
и после добавим
Код PHP:
  1. $('.emojionearea-editor', form).text('');

Виджеты

Что бы смайлики отображались в виджетах комментарии, откройте файл:
\templates\default\controllers\comments\widgets\list\list.tpl.php и в строку 2 добавить
Код PHP:
  1. <?php $this->addCSS('templates/default/assets/ui/smiles/css/emojione.sprites.css'); ?>
  2. <?php $this->addJS('templates/default/assets/ui/smiles/js/emojione.min.js'); ?>
И в конце, перед <?php } ?> добавим
Код PHP:
  1. <script>
  2. $(document).ready(function() {
  3. emojione.imageType = 'png';
  4. emojione.ascii = true;
  5. emojione.sprites = true;
  6. $(".widget_comments_list .text").each(function() {$(this).html(emojione.shortnameToImage($(this).html()));});
  7. });
  8. </script>
Вот и всё :)

Плагин взял от сюда: https://github.com/mervick/emojionearea

Внимание: обнаружили баг, после данного хака, перестают работать bb-кнопки

Скачать

Вы можете скачать только файлы и настроить сами (код выше) либо скачать готовые файлы и загрузить с заменой.

Демо здесь | [email protected] - 123456
Поле Семейное положение | Отзывы для InstantCMS 2
Комментарии (30)
Melon 12 октября 2015 в 15:35 +1
За разработку плюс, но сделайте кто-нибудь вот эти смайлы

http://rghost.ru/6VPSvKDDy
Melon 12 октября 2015 в 15:36 0
Как на этом форуме, чтобы были gif файлы с анимацией и смайлы от квипа
HostelB 12 октября 2015 в 21:12 +2
Evanescence, это шикарно!!! Это просто мега супер! Мои смайлы курят в сторонке laugh

Не хотите объединить усилия и сделать крутой компонент для вставки ваших смайлов в мой компонент "Система комментирования"? Я немного по другому реализовал вывод стикеров и комментариев, но ваш меня покорил)
Evanescence 12 октября 2015 в 21:18 +2
Спасибо)
HostelB:
Не хотите объединить усилия и сделать крутой компонент для вставки ваших смайлов в мой компонент
Конечно, что от меня требуется?
HostelB 12 октября 2015 в 21:20 +1
Я не шибко в CSS силён...Если сброшу компонент (почти готовый - косяки есть, но в систему установится), сможете ваши смайлы внедрить в таком же виде как сейчас?
Evanescence 12 октября 2015 в 21:23 0
есть демо компонента? хотелось бы посмотреть на форму
HostelB 12 октября 2015 в 22:01 0
Нет, дэмо увы нет. Могу только предоставить установочный пакет - на локалке разворачивается нормально
Evanescence 13 октября 2015 в 06:21 0
хорошо, отправьте пакет сюда [email protected]
Shuma 12 октября 2015 в 22:55 +2
Ваши не то что курят в стороне, ваши не работают:)
DenzeL 13 октября 2015 в 01:21 0
Работает! Ура! Спасибо плюсанул! Долой скучные коменты dance
Birles 13 октября 2015 в 12:41 0
Не смог установить ваши готовые файлы в сторонний шаблон, не посоветуете что можно сделать? Готовые файлы закачал в корень дефолтного шаблона, затем их же закачал в корень стороннего шаблона, ничего не получилось, может я что то делаю не так?
Evanescence 13 октября 2015 в 13:53 0
ошибку выдает или что?
Если можно, ссылку на сайт дайте.
Birles 13 октября 2015 в 22:22 0
Нет, ошибку не выдает, просто ничего нету. Вот тестовый сайт на поддомене, http://test.akziaplus.kz/ мой испытательный полигон компонентов и виджетов. Здесь проверяю их работоспособность и только потом переношу в основной сайт. Так вот на этом поддомене смайлы и не работают.
Evanescence 14 октября 2015 в 07:19 0
В исходном коде сайта, не вижу подключенные js файлы.
Вы точно загружаете файлы из архива, из папки /templates/default/ в папку вашего сайта /templates/news/ ?
Либо их нет, либо права неправильно установлены http://test.akziaplus.kz/templates/news/assets/ui/smiles/css/emojione.sprites.css
Birles 13 октября 2015 в 22:28 0
Кстати, забыл написать. С дефолтным шаблоном все работает, смайлики есть и вставляются в комментарии без проблем. А эти смайлики можно заменить самому и как это сделать, а то они какие то невзрачные и не привлекательные)
Evanescence 14 октября 2015 в 07:22 0
Если знаете фотошоп, то можете заменить какие то смайлики на свои, но не советую изменить позицию смайлика.
Вот файл /templates/default/assets/ui/smiles/css/emojione.sprites.png
Birles 14 октября 2015 в 10:30 0
Спасибо дорогой, что подсказали. Теперь все работает!
Birles 14 октября 2015 в 11:00 0
Подскажите пожалуйста. Ваш хак может повлиять на работу биллинга? У меня в объявлениях есть оплата за выделение цветом и поднятие в поиске. При отмеченных галочках все работает, выделяется цветом и поднимается в поиске. Но перестала работать система оплаты взимаемая за эти действия, баллы с биллинга не списываются.
Evanescence 14 октября 2015 в 14:17 0
Система оплаты находится на странице добавления, а хак находиться на странице просмотр материала и влияет только на java script, к биллингу не имеет никакого отношения.
В любом случаи можете отключить Комментарий в объявлениях и проверить будет ли работать...
Birles 14 октября 2015 в 14:58 0
Спасибо, понял. Возможно проблема в чем то другом .
Андрей 14 октября 2015 в 21:45 +1
Смотрю демо. Смайлики работают, а всё остальное (цитата, картинка, ссылка...) работать перестало. Браузер Файрфокс.
Evanescence 15 октября 2015 в 06:03 0
Да, есть такой баг, попробую исправить.
Игорь Lu 20 октября 2015 в 22:25 0
Не исправили ещё баг который заблокировал добавление цитат картинок и ссылок?
Evanescence 20 октября 2015 в 22:49 0
Исправили, соединил со скриптом, который дал Андрей, пока времени нету редактировать пост, если хотите, дам готовый архив.
Как будет свободное время, обновлю пост
Андрей 16 октября 2015 в 03:49 +1
Вот мой вариант этих же смайликов:
http://instantcms.ru/users/files/download5507.html
Может не так красиво как задумано, зато всё работает. Хак только в одном файле.
Evanescence 16 октября 2015 в 08:00 0
Спасибо, работает только одним файлом не обойтись, так как на страницах http://сайт/comments и в виджетах смайлики не будут отображаться.
Андрей 17 октября 2015 в 15:50 +1
Да, в таком списке не работает. Если хотите, можете сделать что-то среднее из двух вариантов и выложить. Моих авторских прав учитывать не нужно :)
Александр 12 ноября 2015 в 06:12 0
А такое можно сделать для первого InstantCMS или просто как сделать дополнительную панель смайликов для первой. заранее благодарю и спасибо!
Александр 12 ноября 2015 в 06:38 0
Вот, что то типа такого http://instantcms.ru/blogs/masterskaja-jashi/dopolnitelnaja-smail-panel-v2.html для первой.
ivanish 30 июня 2016 в 22:59 0
Доброй ночи! А реально добавить смайлики не только в комменты, но и в текст?
Чтобы при написании статьи или поста в группу тоже можно было бы шалить?