Переход к следующей/предыдущей ноде свайпом

Главные вкладки

Аватар пользователя marassa marassa 24 августа 2020 в 12:47

Есть такой замечательный модуль - Entity Pager. Он позволяет со страницы ноды одним кликом перейти на "следующую" и "предыдущую" ноду. Естественно, из контекста должно быть интуитивно понятно, что такое "следующая" и "предыдущая" нода, иначе смысла нет. Порядок нод задается через специальное view. Давно использую этот модуль в десктопной версии, переход осуществляется стрелочками влево-вправо.
Запустил худо-бедно мобильную версию. Стрелочки там, конечно, работают, но душа (и ожидания мобильных юзеров) просят свайпа: свайпнул влево - перешел на предыдущую ноду, свайпнул вправо - на следующую.
Модуль Entity Pager свайпинга не поддерживает. По сути надо сделать некий div таскабельным, причем только влево-вправо, и по обнаружению свайпа имитировать нажатие стрелочки энтити пейджера. Как бы вы это делали на друпале?

Комментарии

Аватар пользователя marassa marassa 24 августа 2020 в 13:17

Хороший вопрос Wink С ходу даже и не придумаю, может и не видел такого нигде. Я вообще, будучи человеком старым, крайне редко хожу по сайтам с телефона Wink
На самом деле хочется аналогии с фотосвайпом - при просмотре фотогалереи в фуллскрине по краям экрана есть стрелочки для перемещения между фото, но можно и свайпнуть. Хочется точно такого же при просмотре нод (в моем случае - домов, в каждом своя фотогалерея, но это уже детали).

Аватар пользователя bumble bumble 24 августа 2020 в 16:06

но душа (и ожидания мобильных юзеров) просят свайпа: свайпнул влево - перешел на предыдущую ноду, свайпнул вправо - на следующую.

А вот и не факт. Я б не ожидал, что сайт решит меня перекинуть на другую страницу после того как я, к примеру, на кочке, сидя в автобусе, ткну в экран своим пальцем.

Да и нет такой UX-фичи, как переход на другую страницу свайпом. В контексте просмотра фоток - это логично. Может иметь место в случае SPA. На обычном сайте будет либо "вау-фичей", либо "шозанах-фичей".

"Не свайпи, подумой!"

Аватар пользователя marassa marassa 24 августа 2020 в 16:17

bumble wrote: Я б не ожидал, что сайт решит меня перекинуть на другую страницу после того как я, к примеру, на кочке, сидя в автобусе, ткну в экран своим пальцем.

На кочке пальцем можно и в ссылку случайно попасть, тогда перекинет точно Wink

bumble wrote: На обычном сайте будет либо "вау-фичей", либо "шозанах-фичей".

У меня не совсем "обычный сайт" со страничками и менюшками, а скорее база данных. На обычном сайте и стрелочки "предыдущая/следующая" мало востребованы судя по количеству юзеров модуля Entity Pager, а у меня очень удобно. Почему-то кажется, что и свайпать будет удобно.

Аватар пользователя marassa marassa 24 августа 2020 в 16:24

Да я сейчас собственно ищу лёгкого решения - вдруг оно где-то на поверхности, а я не вижу Wink Если не найду такого, то наверно и не буду делать пока - не самая приоритетная задача на сегодня. А если найду, то что ж не попробовать? Не понравится - отключу.

Аватар пользователя bumble bumble 24 августа 2020 в 16:31

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

Аватар пользователя gun_dose gun_dose 25 августа 2020 в 10:31

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

Аватар пользователя bumble bumble 25 августа 2020 в 11:12

Кстати, бесит такой бехейвор. Читаешь себе, читаешь, а оно все не кончается и не кончается... А ты уже 100510ю статейку читаешь, и далеко не по той теме как на старте. Smile

Аватар пользователя marassa marassa 25 августа 2020 в 11:04

gun_dose wrote: Обычно это делается не свайпом

Охотно верю про "обычно".

gun_dose wrote: подгружается следующая статья, когда долистываешь до низу

Только у меня нет "статей", и листать "до низу" особо некуда. Есть короткие "карточки объектов".

Аватар пользователя marassa marassa 25 августа 2020 в 21:13

Да нет, как "вручную" сделать мне примерно понятно, хотелось бы более-менее готового решения. А так библиотеки, отлавливающие "событие свайпа" вообще не озабачиваются визуальным фидбеком (а юзер же должен видеть, что он что-то схватил и куда-то потащил), а те, у которых всё нормально с визуальным рядом, являются слайдерами/каруселями, то есть рассчитывают ВСЁ "слайд-шоу" заранее иметь в DOMе, что в моем случае дико.
А мой личный опыт самостоятельного ковыряния css/js руками часто приводит к тому, что внезапно выясняется, что небольшая правка, внесенная 4 месяца назад, напрочь убила сайт на Safari Wink Воистину, Safari - новый IE, жуткое какое-то угробище (но сейчас не об этом) Wink

Аватар пользователя gun_dose gun_dose 26 августа 2020 в 9:54

У того же слика есть опции добавления и удаления слайдов. Единственное, когда в нём всего один слайд, то он не инициализируется вообще. Ну можно подгрузить сразу три карточки - одну предыдущую и одну следующую, тогда он будет ездить. И на свайп вызывать аякс и догружать следующий или предыдущий слайд. Тут ещё есть один плюс в таком подходе - за счёт того, что грузишь карточки наперёд, оно должно листаться без лагов.

В общем, вот тут: https://kenwheeler.github.io/slick/ смотри примеры Add & Remove и событие swipe
,