Добрый день, сейчас я попробую описать создание галереи изображений для мобильных устройств в среде ExtJS 6 (modern toolkit). Основная причина создания статьи, это отсутствие поддержки жестов при просмотре изображений стандартными средствами. В стандартном компоненте carousel нет поддержки touch событий для масштабирования. Данная статья призвана исправить этот недостаток.
В данный момент существует не так много основных touch-событий, основной перечень вы можете увидеть на изображении:
Поддержка touch событий была добавлена в ExtJS 5. В последней доступной версии ExtJS 6.0.1.250, существуют следующие touch события (можете провести аналогию с картинкой):
Опустим создание тестового приложения, т.к это описано в предыдущих статьях.
Для отображения галереи изображений modern toolkit предлагает свой компонент carousel, из самых главных недостатков отсутствие масштабирования и поворотов изображений. Данная задача уже решалась на официальном форуме, но лишь для старой версии Sencha Touch 2.0.1.1. Переписанный плагин я оставлю тут, за не имением личного блога. Надеюсь он кому нибудь пригодится. Провёл следующий перечень работ:
Ссылка на github
PS: Если найдёте баги, пишите в комментариях или на github, всегда буду рад помочь.
Touch события
В данный момент существует не так много основных touch-событий, основной перечень вы можете увидеть на изображении:
Поддержка 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, всегда буду рад помочь.
Демонстрация
Демонстрация
Shannon
Попробуйте http://photoswipe.com/ (правда придется потратить время, чтобы прикрутить к ExtJS, но в целом ничего сложного)
Нет зависимостей, настраиваемый toolbar, любые кнопки, выпадающие меню, события, производительность (актуально для старых устройств), жесты, анимации приближения, swipe-to-close и т.д. Но для изображений требуется указывать width и height при инициализации, что может стать минусом
Swat2k
Действительно, очень хорошая библиотека, я буду иметь её ввиду, спасибо, странно что я на неё не наткнулся. Я пытался использовать swiper, но мне он не подошел по причине зависимостей (хочется работать в одной экосистеме с ExtJS). У всех библиотек которые я просматривал по этой теме нет совмещенного функционала pinchzoom & client side rotate. Исключением пожалуй является DivaJS но это отдельный монстр.
Vadiok
> Я пытался использовать swiper, но мне он не подошел по причине зависимостей
А какие у него зависимости? У него есть версии как с зависимостью от jQuery, так и без нее.
Swat2k
В тот момент не хотелось вникать в 4к строк кода, я написал свой велосипед, который делает только то что необходимо. Половина функционала мне не требовалось, а там все достаточно связано. В итоге задача выполнена, кода у меня в 5 раз меньше, и есть полное понимание его работы.