Deeptissue.js is a helper library to abstract away the differences between the MSPointer, WebKit (Apple) Touch and Mouse event APIs. There are many JavaScript libraries publicly available that support the WebKit API and a few that help with the MSPointer API, but I found nothing that bridged the gap. So I decided I would create a library to do just that.
Clone the Source Code On GitHub
The library was written with no 3rd party library, like jQuery, dependencies. The library does work just fine with jQuery. In fact I will have an additional jQuery file that provides extension methods structured consistently with the way jQuery abstracts standard browser events.
In the initial release the following actions are supported:
- Tap
- Double Tap
- Tap Hold
- Move
- Horizontal Move
- Vertical Move
- Swipe Left
- Swipe Right
- Swipe Up
- Swipe Down
For Internet Explorer 10 and Mobile Safari these additional gestures are supported:
- Rotate
- Scale
In the near future I may add Android gesture support. I am sort of holding out to see if they will adopt the MSPointer model soon. If so then boom! it should work. If not then it is a lot of calculations and testing required.
I also have a list of additional gestures I hope to support in the near future:
- Multi-Finger Taps
- Multi-Finger Swipes
- Swipe To Select
Some things to note:
I have not been able to get Rotate to work on Windows Phone. I have confirmed this is a bug in the browser and we will just have to wait for them to fix it now. It does work in Windows 8.
Unit Testing
Before you ding me for my Unit testing hear me out. I have a very small set of unit tests but will add more over time. Here is the thing, this is a UX library and its hard to AssertIsCool, AssertIsFluid, AssertIsAmazing. Sure there are some things I can test and I will. What is hard though is trying to write an entire mock and stub infrastructure to mimic both MSPointer and WebKit Touch APIs. You also need a full fledge CSSMatrix stub, etc. There is a lot of back plumbing to truly have a solid set of unit tests covering the entire set of functionality.
You also need to consider this has started as a learning curve project. There are lots of things I had to 'experience' across devices if you will. In my opinion there is not the deep documentation available for any of the APIs that would help with knowing what can and cannot be done, what to expect, etc. There is a lot of setting breakpoints, stepping through, watches, console.write's etc involved.
Instead I chose to create pages I could test different scenarios in real-life. I mean the real tests after all involve actually actions and seeing what happens.
You can visit these pages by selecting them in the header or footer navigation. Like Unit tests I will most likely add more of these pages over time. Each page will generally have one or more target test items with a log element to echo relevant values.
Documentation
You can always reference the test pages. I have also included a set of documentation files that will hopefully help you as well.
Conclusion
Please feel free to use this library. I am integrating it to my web sites and will list the as they come online, so I am dogfooding this library. I consider it early Alpha if you will because I really want to do more testing. If you have any comments or questions drop me a line, Twitter is probably the best way, @ChrisLove. My blog is ProfessionalAspNet.com. I am new to this GitHub thing so I may or may not know proper GitHub etiquette, so please forgive my missteps there.