Галерея для ExtJS 6 з підтримкою touch подій

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

Touch події

В даний момент існує не так багато основних touch-подій, основний перелік ви можете побачити на зображенні:
image

Підтримка touch подій в ExtJS

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

  • DoubleTap — подвійне швидке натискання
  • Drag — перетягування
  • EdgeSwipe — перетягування від краю контейнера
  • LongPress — довго натискання
  • Pinch — див. зображення вище
  • Rotate — поворот, див. зображення вище
  • Swipe — перегортання від центру контейнера
  • Tap — перегортання від центру контейнера
Опустимо створення тестової програми, т. до це описано в попередніх статті.
Для відображення галереї зображень modern toolkit пропонує свій компонент carousel, із самих головних недоліків відсутність масштабування і поворотів зображень. Дана задача вже вирішувалася на офіційному форумі, але лише для старої версії Sencha Touch 2.0.1.1. Переписаний плагін я залишу тут, за браком особистого блогу. Сподіваюся він кому-небудь знадобиться. Провів наступний перелік робіт:
  • Переписана логіка роботи, для підтримки ExtJS 6
  • Виправлені баги пов'язані з масштабуванням і перегортанням
  • carousel додані додаткові параметри дозволяють відображати toolbar який містить лічильник зображень, кнопки для повороту і скачування даного зображення (зручно, якщо переглядати документи)
  • Додано події повороту і скачування зображення
Посилання на github

PS: Якщо знайдете баги, пишіть в коментарях або на github, завжди буду радий допомогти.

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


Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.