I am currently working on the development of a process to create HTML5 based eBooks for both desktop and mobile use using Adobe InDesign and exporting them with a plugin called In5. This plugin allows for the incorporation of html, css, and javascript during export. The challenge I have run into is that a portion of the smooth swipe JS/JQuery code that I discovered on the In5 forums seems to be causing issues with the text input field on desktop browsers (oddly enough, it does not affect iPads).
$(function(){
$("#container").swipe("destroy");
var pageWidth = parseInt($(".page").width());
var pageChangeThreshold = pageWidth*.001;
var pageWrap = $('.pages'), startPos, vertMode = false,
nextProp = 'left', backProp = 'right', moveProp = 'left';
var cancelSwipe = function(){ //This Function breaks the note taking for some reason, changing name does not fix. removing the function totally breaks the swiping
pageWrap.animate({left:startPos+'px'}, 'fast');
};
$("#container").swipe({
allowPageScroll: (vertMode ? 'horizontal' : 'vertical'), fingers:1,
excludedElements:$.fn.swipe.defaults.excludedElements+',.mejs-overlay-button,map,[onclick],[data-useswipe="1"],[data-tapstart="1"], .panzoom,.scroll-horiz',
swipeStatus:function(event, phase, direction, distance, duration, fingers) {
switch(phase){
case 'start':
startPos = parseInt(pageWrap.css(moveProp));
break;
case 'end':
if(distance > pageChangeThreshold){
switch(direction){
case nextProp:
if(nav.current < nav.numPages) nav.next();
else cancelSwipe();
break;
case backProp:
if(nav.current > 1) nav.back();
else cancelSwipe();
break;
}
} else {
cancelSwipe();
}
break;
case 'move':
switch(direction){
case nextProp:
pageWrap.css(moveProp, (startPos-distance)+'px');
break;
case backProp:
pageWrap.css(moveProp, (startPos+distance)+'px');
break;
}
break;
case 'cancel': //These lines of code seem to break the pop-out menu on iOS, renamed from 'cancel' to 'cancelSwipe' seems to have fixed this
cancelSwipe();
break;
}
},
threshold:4,
maxTimeThreshold:4000
});
})
The exact line causing the issue appears to be:
pageWrap.animate({left:startPos+'px'}, 'fast');
This is the code we designed for the note-taking application:
<div class="allnotes">
<input type="text" id="textInput"><button id="add" class="addButton"></button>
<hr>
<div id="notes" class="notes"></div>
<script>
function get_notes() {
var notes = new Array;
var notes_str = localStorage.getItem('note');
if (notes_str !== null) {
notes = JSON.parse(notes_str);
}
return notes;
}
function add() {
var textInput = " <button id=\"goto" +$('.page').attr('data-name')+"\" class=\"gotopagebutton\">pg. "+$('.page').attr('data-name')+"</button>"+document.getElementById('textInput').value;
var notes = get_notes();
notes.push(textInput);
localStorage.setItem('note', JSON.stringify(notes));
shownotes();
return false;
}
function remove() {
var id = this.getAttribute('id');
var notes = get_notes();
notes.splice(id, 1);
localStorage.setItem('note', JSON.stringify(notes));
shownotes();
return false;
}
function gotopage(destinationpageNumber) {
var currentpagenumber = $('.page').attr('data-name');
currentpagenumber = parseInt(currentpagenumber);
destinationpageNumber = parseInt(destinationpageNumber.split(' ')[1]);
var distance = destinationpageNumber - currentpagenumber;
var offset = currentpagenumber - nav.current;
nav.to(nav.current+distance);
// if (distance == 0) {
// go(event,[{n:1,id:96334,act:'reverse'},{n:1,id:96324,act:'reverse'}]);
// }
}
function shownotes() {
var notes = get_notes();
var html = '<ul>';
for (var i = 0; i < notes.length; i++) {
html += '<li>' + notes[i] + " " + '<button class=\"remove\" id=\"' + i + '\">x</button></li>';
};
html += '</ul>';
document.getElementById('notes').innerHTML = html;
var removebuttons = document.getElementsByClassName('remove');
for (var i = 0; i < removebuttons.length; i++) {
removebuttons[i].addEventListener('click', remove);
};
var gotopagebuttons = document.getElementsByClassName('gotopagebutton');
for (var i = 0; i < gotopagebuttons.length; i++) {
gotopagebuttons[i].addEventListener('click', gotopage.bind(null, gotopagebuttons[i].innerHTML));
};
}
document.getElementById('add').addEventListener('click', add);
shownotes();
</script>
</div>Can someone assist in identifying why the .animate function might disrupt the selection or focus of the text input field? Alternatively, could you suggest another method to cancel a swipe action on a touch screen device (such as an iPad or Windows tablet)?
Here is a sample page showing the problem upon export.