Button, text input and other interactive form elements should be covered in list of interactive elements in touch handling code (in touchHandling.js)

[sumahadevan]

While debugging the behavior of interactive Javascript form elements in the latest R2 Reader Android build V2.0.0-beta.6, I found that in the Javascript file

https://github.com/readium/r2-testapp-kotlin/blob/develop/r2-testapp/src/main/assets/ReadiumCSS/touchHandling.js

only hyperlinks ('a') are handled in the function handleTouchStart(). Based on earlier resolution of the same issue with different interactive elements in iOS version (readium/swift-toolkit#143), I copied over the simple utility function isInteractiveElement() from the corresponding touch handling Javascript file there

https://github.com/readium/r2-navigator-swift/blob/develop/r2-navigator-swift/EPUB/Resources/Scripts/gestures.js

and duly invoked it in handleTouchStart in touchHandling.js in the Kotlin app.

@aferditamuriqi, this COMPLETELY resolved all the issues with the different interactive elements not being touchable/clickable, in particular fully resolving the problems I had recently mentioned in #249 (as can be easily checked, at least for text inputs and buttons, with the test file button-click-epub3.epub).

Some additional information: the call to isInteractiveElement() was inserted at the start as shown in the following code snippet). Of course, this in turn will most likely require some further changes in touchHandling.js for completeness.

`// When a touch is detected records its starting coordinates and if it's a singleTouchGesture.
var handleTouchStart = function(event) {

if (isInteractiveElement(event.target)) {
  return;
}

if (event.target.nodeName.toUpperCase() === 'A') {
    console.log("Touched a link.");
    // singleTouchGesture = false;
    return;
}
console.log("Touch sent to native code.");
singleTouchGesture = event.touches.length == 1;

var touch = event.changedTouches[0];

startX = touch.screenX % availWidth;
startY = touch.screenY % availHeight;

};`

where the simple routine isInteractiveELement() (taken from gestures.js) is defined by:

`var isInteractiveElement = function(element) {
var interactiveTags = [
'a',
'button',
'input',
'label',
'option',
'select',
'submit',
'textarea',
'video',
]

// https://stackoverflow.com/questions/4878484/difference-between-tagname-and-nodename
if (interactiveTags.indexOf(element.nodeName.toLowerCase()) != -1) {
    return true;
}

// Checks parents recursively because the touch might be for example on an <em> inside a <a>.
if (element.parentElement) {
  return isInteractiveElement(element.parentElement);
}

return false;

}
`
Note: I had to rename the .epub as a .zip to upload it (you may unpack it or rename it as .epub and then look at the code of individual XHTML pages, which is just basic Javascript).

button-click-epub3.zip

[mickael-menu]

Fixed in readium/r2-navigator-kotlin#188