Доработка ввода тегов

InstantCMS 2.X

Автоподбор тегов в середине списка тегов при добавлении/редактировании контента.

#1 13 июля 2018 в 12:37
Ребята, кто может подправить функцию автоподбора тегов при вводе в поле тегов при добавлении и редактировании материалов, чтобы варианты предлагались не только для последней фразы (после последней запятой), а и внутри между запятыми? Готов оплатить немного WMR за эту правку.

Пользователи часто хотят добавить тег не в конце списка, а в середине. И тогда автоподбор не работает, люди делают ошибки. Да я и сам хотел бы иметь такое удобство, так как сейчас много работаю с тегами. Поясню на примере:

Человек набрал теги под статьёй: "первый, второй, четвёртый"
Потом понял, что забыл написать "третий", поставил курсор после "второй", набрал "," (запятую). Получил: "первый, второй,(тут курсор), четвёртый"
Так вот, если перед курсором начало строки или запятая, и после него конец строки или запятая, всё набранное между ними можно использовать для автоподбора. То есть, человек набирает "тре", а ему уже подсказывается "третий", если он уже есть где-то в тегах. И после нажатия "Таб" слово автозавершается и подставляется в позицию курсора.

Та же правка будет полезна и при редактировании тегов в середине списка в той же форме добавления/редактирования записи.
Например, человек набрал теги под статьёй: "первый, вторй, третий". Заметил, что неправильно написал "второй", поставил после "р" курсор и нажал "о" — в выпадающем списке автоподбора появилось: "второй, второй тайм, второй шанс" и т.д.

Я понимаю, что сейчас последняя набранная в строке фраза выбирается для автоподбора регуляркой и пушем тут
github.com/instantsoft/icms2/blob/master/templates/default/assets/fields/string.tpl.php#L37
и потом выбранное из выпадающего списка значение тега подставляется вместо неё в конец списка тут
github.com/instantsoft/icms2/blob/master/templates/default/assets/fields/string.tpl.php#L57
Но моих знаний Явы не хватает, чтобы вытащить фразу из той части, где стоит курсор и потом туда подставить. Там всего то это и нужно сделать.

Кто сможет сделать такую правку?
#2 13 июля 2018 в 22:42
Исходя из неимоверной востребованности описанного функционала, огромной очереди на этом сайте из желающих поиграться ради того, чтобы понять, что не зря весьма авторитетный коллега обратился за помощью, смею предположить, кто может подправить функцию (если такое вообще произойдёт), это мой старый добрый друг.
#3 13 июля 2018 в 22:49
Спасибо за столь лестные отзывы, Олег Васильевич я, но сей ещё весьма не старый друг не знает Яву. А то бы уже давно сделал…
#4 13 июля 2018 в 23:02

сей ещё весьма не старый друг

WebMan
$старый друг != $старий друг; //переменная справа на украинском
#5 13 июля 2018 в 23:04

друг не знает Яву

WebMan
А что, таки есть особи человеческого происхождения, которые её знают?
#6 14 июля 2018 в 11:57
Капец. Java — один из самых странных языков, на которых мне приходилось программировать. Страннее только Fort… 😊



В общем, сделал что хотел. Теперь автоподбор работает и для тегов в середине строки, а не только для последнего. Мне всё нравится, стало удобнее. Полную чистоту кода и его оптимальность не гарантирую ввиду незнания Явы, но ошибок в консоли не видел.
Все изменения тут github.com/WebManG/icms2/commit/0807700911c725f2a8c219c3e31f9f4bf7d13dd7
Если кому интересно для тестирования, можете просто сохранить из Гита изменённый файл templates/default/assets/fields/string.tpl.php и заменить им дефолтный.

Немного подожду ваших отзывов и, если не будет выявлено ошибок, сделаю реквест в "коробку" — может Fuze посчитает это полезным.
#7 14 июля 2018 в 12:00
Может кому-то будет полезна ещё одна фича. Мне был очень неудобен белый выпадающий список тегов на белом же фоне сайта. Да и люди его не всегда замечали. Сделал более яркий фон, чтобы список стал заметнее.
  1. /* Выпадающий список автоподбора тегов */
  2. .ui-autocomplete.ui-widget-content {
  3. background-color: #FFFFEE;
  4. }
  5. /* Активная строка в этом списке */
  6. .ui-autocomplete.ui-widget-content .ui-menu-item.ui-state-focus {
  7. background-color: #FFFFCC;
  8. }
#8 16 июля 2018 в 01:45
За пару дней тестирования проблем или ошибок не заметил, поэтому сделал пул-реквест по описанной выше доработке. Буду ждать решения Fuze.

Придумал ещё одно улучшение — отбор подходящих тегов содержащих введённую строку не только с начала, а и в любом месте. При этом сортировка делается так, чтобы сначала показывались теги, где искомая строка идёт вначале, а потом остальные (в середине тега). В каждом из этих блоков сделана сортировка по алфавиту (две стрелки на скрине).


Кстати, в дефолтной версии сортировка делается по внутреннему номеру тега, то есть, для пользователя это выглядит, как будто теги в списке выводятся в случайном порядке, что очень неудобно, на мой взгляд.

Доработка очень проста, но является хаком — при обновлении движка слетит и нужно будет её повторять.
В файле \system\controllers\tags\actions\autocomplete.php меняем строку 13
  1. $tags = $this->model->filterLike("tag", "{$term}%")->getTags();
на
  1. // >> WebMan:
  2. // 1. фильтр по любой части тега, а не только начинающиеся с введённой строки,
  3. // 2. сортировка (по алфавиту + сначала теги, начинающиеся с введённой строки
  4. $tags = $this->model->
  5. select("(LEFT(`tag`, ".mb_strlen($term).") = '{$term}')", "tag_order")->
  6. filterLike("tag", "%{$term}%")->
  7. orderByList(array(
  8. array('by' => "tag_order", 'to' => 'desc', 'strict' => true),
  9. array('by' => "tag", 'to' => 'asc')
  10. ))->
  11. getTags();
  12. // << WebMan
Естественно, такой запрос, в отличие от дефолтного, для сортировки создаёт отдельную временную таблицу с результатами выборки. Это не очень красиво, может вызывать тормоза на больших таблицах тегов, поэтому Fuze, скорее всего, такую доработку в "коробку" не пустит. Поэтому я пул-реквест не делал, оставляю код тут для тех, кому такой подбор тегов понравится больше стандартного.
Тестирование показало, что на среднем сервере на таблице более тысячи тегов такой запрос работает очень быстро, занимая меньше 0,1 мс, что лично меня вполне устраивает.
#9 16 июля 2018 в 12:49
WebMan, Хорошее решение. встречается кстати везде, т.е. так и должно быть в коробке
#10 16 июля 2018 в 13:25

занимая меньше 0,1 м

WebMan
Когда потратишь на оформление статьи минут 5, то конечно, ждать запрос в 0,1 мс покажется вечностью smile
Хорошее решение!
#11 22 июля 2018 в 11:14
Немного доработал автоподбор. Добавил обрезку пробелов справа — теперь они не будут мешать при подборе тегов между запятыми. Я так пользуюсь уже почти неделю — удобно.
Последняя версия тут github.com/WebManG/icms2/commit/0807700911c725f2a8c219c3e31f9f4bf7d13dd7
Если у вас свой шаблон, можете просто скачать файл string.tpl.php с Гита и скопировать его в
templates/НАЗВАНИЕ_ВАШЕГО_ШАБЛОНА/assets/fields/string.tpl.php

Кстати, этот автоподбор будет работать везде, где используется дефолтное строковое поле, если указать нужные параметры поля (классы, атрибуты ['autocomplete'] / ['autocomplete']['multiple'] / ['autocomplete']['url']).
#12 7 ноября 2018 в 23:49
Прошло три месяца. Как результат, за счёт более удобного и наглядного автоподбора тегов при создании публикаций, сократилось количество ошибок при вводе тегов пользователями, они стали чаще использовать уже существующие теги. Да и мне самому тоже стало удобнее. Мне всё нравится. v
#13 8 ноября 2018 в 01:16
WebMan, моим пользователям не удобно ставить запятую…
многие хотят, как вконтакте или facebook — ставить #тег #тег

может возможно обработчик поля доработать так, чтобы он воспринимал формат как с запятой так и с #
#14 8 ноября 2018 в 01:34
@IRIPUS, в соцсетях немного другая концепция, там теги берутся прямо из текста.
Теоретически, можно включить поддержку хештегов, отключить в нужном типе контента теги (чтобы вообще убрать поле ввода тегов) и написать свой хук, который при сохранении записей будет добавлять теги из её текстовых полей в таблицу тегов сайта.
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.