Ze względu na rosnącą liczbę wejść z urządzeń mobilnych na stronę oferującą usługi fotograficzne która korzysta z napisanej przez mnie parę lat temu dedykowanej galerii stanołem przed koniecznością zoptymalizowania jej pod kątem urządzeń z ekranami dotykowymi.
Jak powszechnie wiadomo dominujące na rynku przeglądarki lubią się zwalczać robiąc te same rzeczy w inny sposób, jednocześnie utrudniając prace webmasterom, w czym od zawsze prym wiedzie Internet Explorer. Z tego powodu postanowiłem zacząć od przeszukania frameworku Java Script który pozwolił by w zunifikowany sposób obsłużyć wszystkie dominujące przeglądarki tj. Firefox, Internet Explorer i Google Chrome.
W pierwszej kolejności trafiłem na małą bibliotekę Hand.js która bardzo dobrze unifikuje niskopoziomowe zdarzenia wskaźnika w sposób który moim zdaniem jest najoptymalniejszy – czyli ten zaproponowany przez Microsoft w Internet Explorerze 10 unifikujący obsługę zdarzeń różnych wskaźników (w tym myszki i dotyku). Biblioteka działa dobrze tzn. zdarzenia pointer* (wprowadzone w Internet Explorerem 10 z przedrostkiem MS_) po wczytaniu tej biblioteki zaczynają natychmiast działać także w Firefoxie i Chrome, oraz IE10 bez żadnych dodatkowych zmian w kodzie.
Wspominam o tej bibliotece ponieważ napewno przyda się komuś, kto chciał by stworzyć własne wyskopoziomowe zdarzenia wykorzystujące dotyk lub multidotyk.
Pointer Events Polyfill
(https://github.com/jquery/PEP)
Autor określa tę bibliotekę jako „a unified event system for the web platform”. Nie wiem skąd ten pomysł, bo udostępnione dema nie działają prawidłowo na ekranie dotykowym pod Internet Explorerm 11 i Windowsem 8.1 ani też z firefoxem pod Adroidem 4.4.4 i Windowsem 8.1 więc nie widziałem sensu dalej sprawdzać działania z innymi przeglądarkami i OSami.
jQuery.event.move
(http://stephband.info/jquery.event.move/)
Z kursorem myszki działa prawidłowo z IE 11 pod Win8.1, oraz z FF 38 pod Win8.1 i Linuxem. Natomiast z ekranami dotykowymi działa prawidlowo na Firefoxie i Chrome na Windowsie 7, Androidzie i desktopowum Linuxie, natomiast nie działa prawidłowo dotyk pod Internet Explorerem 11
Hammer.js
(http://hammerjs.github.io/)
Demo dostępne na stronie głównej działa prawidłowo zarówno z kursorem jak i z dotykiem na wszystkich konfiguracjach jakie akurat mam pod ręką tzn. Firefox 38, Chrome 18, 37 i 41 oraz Internet Expololer 11 (tylko win) na trzech z czerech głównych rodzin OSów tzn. Windows 7 i 8.1, Andrid 4.1.1, 4.2.2, 4.4.4, 5.0.2, oraz Linuxie – Fedora 20 i Ubuntu. Niestety nie mam w pobliżu żadnego urządzenia ze stajni Apple.
jQuery Mobile
(http://jquerymobile.com/)
Ponieważ z dotychczasowych testów wynikło, że problemy z obsługą dotyku sprawia najczęściej Internet Explorer, więc od niego postanowiłem zacząć testy stron demonstracyjnych jakie udostępnia jQuery Mobile. Niestety natychmiast okazało się, że jQuery Mobile też nie umie poradzić sobie z obsługą przesunięcia palcem po ekranie wyświetlającym stronę demonstracyjną za pomocą Internet Explorera 11 pod Windowsem 8.1. A ponieważ szukam czegoś co potrafi obsłużyć wszystkie kluczowe przeglądarki, a Hammer.js pokazał już, że potrafi w tej kwestii więcej, więc nie widziałem sensu testowania tego frameworka na innych konfiguracjach.
QuoJS
(http://quojs.tapquo.com/, https://github.com/soyjavi/quojs)
Autor nie udostępnia dema, na swojej stronie, ale inne przykłady dostępne w sieci (np. http://research.ponderdevelopment.com/modules/javascript/swipeusingquojs.aspx) wykorzystujące ten framework, tak samo jak w przypadku większości testowanych bibliotek nie działają prawidłowo z dotykiem w Internet Explorerem 11, co dla mnie dyskfalifikuje ten framework.
jGestures
(http://jgestures.codeplex.com/)
Tak samo jak w wypadku OuoJS brak dema na stronie. O przykładach jakie znalazłem w sieci (np. http://www.kw.nl/~pike/eden/lgi2012/dev/jgestures/) nie można powiedzieć, że całkowicie nie działają z IE11. Jednak praca na Internet Explorer 11 jest znacznie gorsza (brak płynności, sporadycznie reaguje za pierwszym razem) niż pod np. FF38. Bez wątpienia biblioteka działa też znacznie gorzej niż w przypadku dema biblioteki Hammer.js.
Oczywiście przegląd ten nie zawiera wszystkich bibliotek Java Script zawiązanych z obsługą dotyku, a jedynie te które były dla mnie interesujące. A wiec te co do których istaniały przesłanki, że mogą one współpracować ze wszystkimi dominującymi na rynku przeglądarkami tzn. Firefoxem, Chromem i Internet Explorerem, oraz udostępniające wysokopoziomową obsługę przynajamniej „przesuwania palcem po ekranie” – z ang. „swip” lub „pan”.
W wyniki tego przeglądu postanowiłem dokładniej przyjrzeć się bibliotece Hammer.js która jako jedyna wstępnie spełniła oba stawiane warunki, a po głębszych testach wyniki postaram się przedstawić w kolejnym poście.