Deeptissue.js A Gesture Library For the Modern Web

Chris Love

Last Updated - Sat Jan 09 2021

Today I am announcing Deeptissue.js, a library to make life easier for developers in the modern world. The inspiration for this library is rooted in my selfish need to have something that would bridge the gap between the WebKit Touch API , Internet Explorer's MSPointer API and classic Mouse events.

I think this library will prove to be very important because touch is extremely important for modern client application development and I also feel HTML5 is the developer's first choice today. Having a library that abstracts the differences between Mobile Safari/Android and Windows 8 is extremely important because the two touch APIs are very different and developers need to target multiple platforms and browsers today.

In case you are wondering, Apple created the WebKit Touch APIs for iPhone/iPod etc and later added some gesture support. They never submitted the API for standardization. WebKit folks included touch support (not gesture) in the core browser and tried to submit the API for standardization. Evidently Apple was not happy with that so standardization process has gone no where.

The Internet Explorer team needed to to solve the touch issue for Internet Explorer 10. They decided to take a new approach and created the MSPointer API that abstracts mouse, touch and pen interactions. This is a great approach because now a developer does not need to detect touch support and swap between mouse and touch API differences.

Microsoft has submitted a patch to WebKit for MSPointer support and submitted the API for W3C standardization. So hopefully we will see this happen.

Now for deeptissue.js. The library offers simple methods for different gestures; Tap, Double Tap, Tap Hold, Swipe, Move, Rotate and Scale. To apply deeptissue.js to an element you create a new deeptissue object, passing either a single node or nodeList reference. Then you can apply any of the methods to the element and the library will configure it to fire your callbacks when conditions are met for the gesture.

Here is example code to apply a simple tap:

var
 dt = deeptissue(document.querySelectorAll(
".sgl-tap"
));
dt.tap(
function
 (evt) {
 tl.innerText = 
"Single Tap\n"
 + tl.innerText;
 console.log(evt.type);
 console.log(evt.screenX);
 console.log(evt.screenY);
});

First notice this library is completely third party independent, it is not a jQuery plugin. I do plan on releasing a series of jQuery event method wrappers to make life easier for jQuery developers in the near future. Instead this is a pure VanillaJS library so you need to pass pure DOM elements to the constructor. It will happily accept a single node or a nodeList. So you can use any of the document element selector methods, for example querySelectorAll above.

Next you call the tap method to make the element support the user tapping or clicking the target element(s). The tap method accepts one parameter, a callback. The callback is executed when the gesture happens. In this case as soon as the user presses the element with their finger, clicks it with the mouse or in Internet Explorer taps it with a stylus.

I have tried to include some reasonable documentation and example pages for you to reference. Over time this will expand as I have time.

The library was created to solve a very real problem I have building rich modern web applications that target everything. So I am using this library and I will be making frequent updates to this library as I find and solve issues.

Speaking of issues I am sure there are many. For example I do not support rotate and scale gestures except in mobile Safari and Internet Explorer 10. Android does not support gestures at this time. I don't know if I will write the code to support them in hopes they adopt the MSPointer model soon. The math is rather complicated and will add a lot of weight to the library.

I have a Surface Pro and have been testing Chrome and its not ideal. I have tried to apply both touch and mouse events with no luck. It seems its an either or situation for now. I hope to resolve this issue sooner rather than later. It is #1 on my list.

You will also probably find some quirky issues with the demos here and there. They are not the best demos, but they are sufficient to get up and running and prove the library out. Its not that easy testing touch, you can't really step through the code you have to actually just do it. There are many places where I am trying to log information to help me see what is going on. You will see that as well.

Consider this library early Alpha at this point. Its about 20 hours of code writing and testing on my part over the past 10 days. It will get better as I apply it and clean things up.

To try the library out please visit http://deeptissuejs.com/ and of course you can access the source code on GitHub, https://github.com/docluv/deeptissuejs.. Thanks and I hope you give it a spin and give me some feedback, especially on devices I don't have!