Компонент "Реакции"

+14
1.09K
Компонент "Реакции"

Всем привет! Написала небольшой компонент, который добавляет в записи типов контента возможность голосования при помощи Emodji. Такая фича есть уже во всех популярных CMS, только вот InstantCms до сих пор без нее.

Итак, как это работает. После установки компонента в настройках вашего типа контента появляются новые настройки:

Изображение

Вы можете собрать необходимый набор emodji и он появится внутри записей вашего типа контента:

Изображение

Теперь ваши пользователи смогут выражать свои эмоции к записям.

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

Часть функционала на самом деле есть, просто я пока не включила его в эту версию. Но — он обязательно появится в следующем обновлении. Процесс установки стандартный — после установки не забудьте обновить события в базе данных.

Запланированный функционал:

1) Возможность выбирать группы пользователей которым разрешено оставлять эмоции
2) Создание своих наборов Emodji
3) Возможность создания наборов Emodji из системных иконок InstantCms
4) Возможность уведомления авторов о новых реакциях к его записи
5) Отображение проголосовавших пользователей
6) Возможность тонкой настройки блока с эмоциями

Демо можно посмотреть здесь

До прохождения модерации можно скачать прикрепленный к посту файл.

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

YooMoney: 4100117625208247

Прикреплённый файл:
Скачать 43 Кбскачан 6 раз
+1
Def Def 3 месяца назад #

хорошая идея. Только под гостем при клике надо предлагать авторизоваться, чтобы юзер понимал как проголосовать

Foxman23 Foxman23 3 месяца назад #
Комментарий удален
+1
Panda58dev Panda58dev 3 месяца назад #

Штука нужная и клёвая!
Фидбэк пожалуй будет состоять из «новых плюшек»:
— Если юзверь не авторизирован, и пытаеться поставить реакцию, не просто «return false», а появляется высплывающие уведомление с текстом вроде «Что бы оставлять реакции, вы должны быть зарегестрированы!» или вроде того. Вообще, идеально, если текст можно будет настраивать;
— Добавить в CSS, что-то вроде:

  1. .content_reactions {
  2. -webkit-touch-callout: none;
  3. -webkit-user-select: none;
  4. -khtml-user-select: none;
  5. -moz-user-select: none;
  6. -ms-user-select: none;
  7. user-select: none;
  8. }

Иначе может произойти такое:

Изображение

— В «beta» версии есть лайк (👍🏻), но нет дизлайка (👎🏻). Как понял, в будущем, будет поправлено;
— Имхо, выбранная реакция, лучше смотриться как в примере, в начале статьи, то бишь — увеличенная:

  1. .content_reactions .reaction {
  2. margin: 0 4px;
  3. cursor: pointer;
  4. font-size: 24px;
  5. transition: scale 0.2s;
  6. display: inline-block;
  7. }
  8. .reaction.selected {
  9. scale: 1.5;
  10. }
  11.  

В идеале, если будут глобальные настройки модуля — возможность вставки произвольного css;

— И было бы круто, увидеть код на github/gitflic или т.п.

Foxman23 Foxman23 3 месяца назад #
Комментарий удален
+1
Panda58dev Panda58dev 3 месяца назад #

Не совсем поняла что вы имеете ввиду

Я про эту картинку:

ИзображениеВыбранная реакция, больше, относительно остальных. Подобное решение, ещё было в доке OSX:

ИзображениеПравда, это программы, а не реакции 😅

Думаете это кому-то будет нужно?)))

Ну, например, вместо того, чтобы писать код в комментариях, я и другие разработчики, могли бы прислать pull request) Но, дело ваше, тут настаивать не буду, т.к. на роль мэйнтейнера не претендую :D

Foxman23 Foxman23 3 месяца назад #
Комментарий удален
+2
maxisoft maxisoft 3 месяца назад #

Ну будет полезно если данная разработка не планируется дальше монетизировать его, то да имеет смысл сделать доступны на github, чтобы можно было строним разработчикам также принять участи в разработке. Простой пример понимаю что код еще будет дорабатываться но могу сразу указать на ряд ошибок и оптимизации в коде.

1. стоит оптимизировать код js 

  1. var reactionType = clickedReaction.data('reaction');
  2. var item_id = clickedReaction.closest('.content_reactions').data('item-id');
  3. var ctype_id = clickedReaction.closest('.content_reactions').data('ctype-id');
  4.  
  5.  

стоит 1 раз получить DOM элемент и потом получать сразу всю data-атрибут

2. проблема с отправкой реакции, стоит сделать проверку на ajax запрос, чтобы не постили простым POST запросом и не спамили. 

  1. public function actionAdd() {
  2.  
  3. if (!$this->request->isAjax()){
  4. cmsCore::error404();
  5. }
  6.  

3. столкнулся с тем что есть ошибка формирования запроса, например на последней версии хромиума (хром, яндекс) не будет нормально работать отправка запроса. Так как вы сделали MIXED тип отправки, сделали POST отправку даных но при этом сделали GET параметр в запросе, из за этого система не может получить данные, корректно 

  1. $.post('/reactions/add?' + $.now(), requestData, function (result) {
Foxman23 Foxman23 3 месяца назад #
Комментарий удален
Foxman23 Foxman23 3 месяца назад #
Комментарий удален
0
F_a_R_i_D F_a_R_i_D 3 месяца назад #

Изображение

Отличный компонент. Смотрю как гость, и я не вижу кто за что проголосовал. Так задумано?

Foxman23 Foxman23 3 месяца назад #
Комментарий удален
0
F_a_R_i_D F_a_R_i_D 3 месяца назад #

И ещё такой вопрос, можно ли его прикрутить к форуму?

Foxman23 Foxman23 3 месяца назад #
Комментарий удален
0
Pawell Pawell 2 месяца назад #

Здравствуйте. Огромное спасибо за нужный компонент!

Столкнулся с проблемой вывода его на стороннем шаблоне (не выводится). В шаблонах Modern и Default работает. Все файлы залиты в шаблон, также, как и в штатном (default) шаблоне. 

Если вставлять код вызова компонента непосредственно в файле шаблона, то отображается текст (like love haha wow sad angry cool confused celebrate heart_eyes clap thinking) вместо значков. В чём может быть ошибка и как подключить компонент в стороннем шаблоне?

Foxman23 Foxman23 2 месяца назад #
Комментарий удален
0
Pawell Pawell 2 месяца назад #

У меня внедрён плагин подгрузки контента на примере этого instantcms.ru/blogs/lunyi-blog/ajax-podgruzka-kontenta-dlja-dvoiki.html но для самого типа контента: записей, новостей и пр. По ходу совместное использование с вашим компонентом вызывает некий конфликт скриптов, так как при подключении вашего компонента перестаёт работать подгрузка контента, работа которого основана на скрипте jquery-ias.min.js 

Потому в шаблоне Modern ваш компонент выводится и работает.

Foxman23 Foxman23 2 месяца назад #
Комментарий удален
0
Pawell Pawell 2 месяца назад #

Сделал. Компонент не выводится и подгрузка пропала. 

Foxman23 Foxman23 2 месяца назад #
Комментарий удален
0
maxisoft maxisoft 2 месяца назад #

чтобы решить проблему нужно видеть что выводиться в косоле dev-tools. Проверял на работе шаблона с ias подгрузкой, все работает нормально. Поэтому нужно смотреть не посредственно на вашем сайте.

0
Pawell Pawell 2 месяца назад #

Создатель компонента видела сайт. Может поможет при обновлении компонента.

Foxman23 Foxman23 2 месяца назад #
Комментарий удален
0
Shuma Shuma 2 месяца назад #

А почему вылезает ошибка Ошибка загрузки исходных карт?

Изображение

Foxman23 Foxman23 2 месяца назад #
Комментарий удален
0
Shuma Shuma 2 месяца назад #

Хм, интересно. Появилось это после установки компонента. При отключении компонента ошибка исчезает

Foxman23 Foxman23 2 месяца назад #
Комментарий удален
0
CEH9I CEH9I 2 месяца назад #

При удалении компонента из списка компонентов, не удаляется таблица в БД и повторная установка дает ошибку Изображение

При установке версии 1.0.1 версия отображается 1.0.0 Изображение

После установки не показывает в «Каталоге дополнений» что компонент установлен 
Изображение

0
CEH9I CEH9I 2 месяца назад #

Прописал в таблице БД вот так и все ок стало отображаться, но нужно вам подправить

Изображение

0
CEH9I CEH9I 2 месяца назад #

В общем я хз, ничего не работает
Изображение
Изображение

Изображение


Изображение

События обновлены, файлы все подключились, сыроват компонент конечно.

Изображение

Изображение

Foxman23 Foxman23 2 месяца назад #
Комментарий удален
0
R161Net R161Net 2 месяца назад #

Когда будет обновление?

0
Kuper Kuper 2 месяца назад #

Замечательно, только мона еще и в списке сделать их помимо записи

0
TOPg TOPg 2 месяца назад #

Добавлять бы еще в ленту активности событие

0
Наталья Наталья 19 дней назад #

Совместимость заявлена 2.14.2-2.16.3,

но на 2.15 не устанавливается

Изображение

0
Юран Юран 19 дней назад #

Поставил на 2.16.3 — в настройках типа контента вот это 

Изображение

не появилось:(   Может где то что то нужно прописать?

Поторопился написать. В типе контента «Новости» опция появилась. Как и где подключить кдругим типам контента, например к постам?

0
Юран Юран 18 дней назад #

Извиняюсь… появилось во всех типах контента, наверное кеш не сбросил как следует:)

Еще от автора

Проверка сложности пароля перед регистрацией
Написала небольшое дополнение, которое в момент регистрации показывает пользователю сложность его используемого пароля.
Виджет "Конструктор модальных окон"
Конструктор модальных окон — функциональный виджет, который позволяет создавать на сайте модальные окна с различным содержимым и управлять их поведени
Виджет "Гонка пользователей"
Дополнительный виджет для компонента «Пользователи», позволяющий выводить юзеров в виде прогресс-бара, устраивая соревновательный эффект.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.