- PVSM.RU - https://www.pvsm.ru -

Галерея для ExtJS 6 с поддержкой touch событий

Добрый день, сейчас я попробую описать создание галереи изображений для мобильных устройств в среде ExtJS 6 (modern toolkit). Основная причина создания статьи, это отсутствие поддержки жестов при просмотре изображений стандартными средствами. В стандартном компоненте carousel нет поддержки touch событий для масштабирования. Данная статья призвана исправить этот недостаток.

Touch события

В данный момент существует не так много основных touch-событий, основной перечень вы можете увидеть на изображении:

image

Поддержка touch событий в ExtJS

Поддержка touch событий была добавлена в ExtJS 5. В последней доступной версии ExtJS 6.0.1.250, существуют следующие touch события (можете провести аналогию с картинкой):

  • DoubleTap [1] — двойное быстрое нажатие
  • Drag [2] — перетаскивание
  • EdgeSwipe [3] — перетаскивание от края контейнера
  • LongPress [4] — долго нажатие
  • Pinch [5] — см. изображение выше
  • Rotate [6] — поворот, см. изображение выше
  • Swipe [7] — перелистывание от центра контейнера
  • Tap [8] — перелистывание от центра контейнера

Опустим создание тестового приложения, т.к это описано в предыдущих статьях [9].
Для отображения галереи изображений modern toolkit предлагает свой компонент carousel [10], из самых главных недостатков отсутствие масштабирования и поворотов изображений. Данная задача уже решалась на официальном форуме, но лишь для старой версии Sencha Touch 2.0.1.1 [11]. Переписанный плагин я оставлю тут, за не имением личного блога. Надеюсь он кому нибудь пригодится. Провёл следующий перечень работ:

  • Переписана логика работы, для поддержки ExtJS 6
  • Исправлены баги связанные с масштабированием и перелистыванием
  • В carousel добавлены опциональные параметры позволяющие отображать toolbar который содержит счетчик изображений, кнопки для поворота и скачивания данного изображения (удобно если просматривать документы)
  • Добавлены события поворота и скачивания изображения

Ссылка на github [12]

PS: Если найдёте баги, пишите в комментариях или на github, всегда буду рад помочь.

Демонстрация

Демонстрация
image

Автор: Swat2k

Источник [13]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/biblioteka-extjs-sencha/117449

Ссылки в тексте:

[1] DoubleTap: https://docs.sencha.com/extjs/6.0/6.0.1-modern/#!/api/Ext.event.gesture.DoubleTap

[2] Drag: https://docs.sencha.com/extjs/6.0/6.0.1-modern/#!/api/Ext.event.gesture.Drag

[3] EdgeSwipe: https://docs.sencha.com/extjs/6.0/6.0.1-modern/#!/api/Ext.event.gesture.EdgeSwipe

[4] LongPress: https://docs.sencha.com/extjs/6.0/6.0.1-modern/#!/api/Ext.event.gesture.LongPress

[5] Pinch: https://docs.sencha.com/extjs/6.0/6.0.1-modern/#!/api/Ext.event.gesture.Pinch

[6] Rotate: https://docs.sencha.com/extjs/6.0/6.0.1-modern/#!/api/Ext.event.gesture.Rotate

[7] Swipe: https://docs.sencha.com/extjs/6.0/6.0.1-modern/#!/api/Ext.event.gesture.Swipe

[8] Tap: https://docs.sencha.com/extjs/6.0/6.0.1-modern/#!/api/Ext.event.gesture.Tap

[9] статьях: https://habrahabr.ru/post/270343/

[10] carousel: https://docs.sencha.com/extjs/6.0/6.0.0-modern/#!/api/Ext.carousel.Carousel

[11] Sencha Touch 2.0.1.1: https://github.com/SunboX/ST2_ImageViewer

[12] github: https://github.com/Swat2k/ExtJS-pinch-carousel

[13] Источник: https://habrahabr.ru/post/278387/