From 54a05c8bcf11cfe8529a66ac6be7a115f6b3f389 Mon Sep 17 00:00:00 2001 From: Arsenii Date: Sun, 16 Feb 2020 01:27:49 -0500 Subject: [PATCH] Add "touchY" plugin --- build.js | 3 +- src/plugins/touchY/touchY.js | 67 ++++++++++++++++++++++++++++++++++++ 2 files changed, 69 insertions(+), 1 deletion(-) create mode 100644 src/plugins/touchY/touchY.js diff --git a/build.js b/build.js index eac7e89bb..05a5cd0a8 100644 --- a/build.js +++ b/build.js @@ -27,6 +27,7 @@ files.push('src/plugins/autoplay/autoplay.js', 'src/plugins/stop/stop.js', 'src/plugins/substep/substep.js', 'src/plugins/touch/touch.js', + 'src/plugins/touchY/touchY.js', 'src/plugins/toolbar/toolbar.js') var output = files.map((f)=>{ return fs.readFileSync(f).toString(); @@ -71,4 +72,4 @@ html += '\n' filename = path.resolve(__dirname, 'examples', 'index.html'); fs.writeFileSync(filename, html); -console.log(filename); \ No newline at end of file +console.log(filename); diff --git a/src/plugins/touchY/touchY.js b/src/plugins/touchY/touchY.js new file mode 100644 index 000000000..170a399f6 --- /dev/null +++ b/src/plugins/touchY/touchY.js @@ -0,0 +1,67 @@ +/** + * Support for swipe and tap on touch devices + * + * This plugin implements navigation for plugin devices, via swiping up/down, + * or tapping on the up/down edges of the screen. + * + * This is a modified "touch" plugin for impress.js, 2020: Arsenii Lyzenko + * (@pticagovorun) + * + * + * MIT License + */ +/* global document, window */ +( function( document, window ) { + "use strict"; + + // Touch handler to detect swiping up and down based on window size. + // If the difference in Y change is bigger than 1/20 of the screen height, + // we simply call an appropriate API function to complete the transition. + var startY = 0; + var lastY = 0; + var lastDY = 0; + var threshold = window.innerHeight / 20; + + document.addEventListener( "touchstart", function( event ) { + lastY = startY = event.touches[ 0 ].clientY; + } ); + + document.addEventListener( "touchmove", function( event ) { + var y = event.touches[ 0 ].clientY; + var diff = y - startY; + + // To be used in touchend + lastDY = lastY - y; + lastY = y; + + window.impress().swipe( diff / window.innerHeight ); + } ); + + document.addEventListener( "touchend", function() { + var totalDiff = lastY - startY; + if ( Math.abs( totalDiff ) > window.innerHeight / 5 && ( totalDiff * lastDY ) <= 0 ) { + if ( totalDiff > window.innerHeight / 5 && lastDY <= 0 ) { + window.impress().prev(); + } else if ( totalDiff < -window.innerHeight / 5 && lastDY >= 0 ) { + window.impress().next(); + } + } else if ( Math.abs( lastDY ) > threshold ) { + if ( lastDY < -threshold ) { + window.impress().prev(); + } else if ( lastDY > threshold ) { + window.impress().next(); + } + } else { + + // No movement - move (back) to the current slide + window.impress().goto( document.querySelector( "#impress .step.active" ) ); + } + } ); + + document.addEventListener( "touchcancel", function() { + + // Move (back) to the current slide + window.impress().goto( document.querySelector( "#impress .step.active" ) ); + } ); + +} )( document, window );