From cf15e3c61a33516dc96618945875e9abce6fc362 Mon Sep 17 00:00:00 2001 From: Mathieu Sanchez Date: Fri, 2 Nov 2018 13:05:22 +0900 Subject: [PATCH] Add scroll to open history on mobile --- index.html | 15 +++++++--- ressources/index.css | 5 ++++ ressources/index.js | 68 +++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 83 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index a01df25..c805463 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,14 @@ + Calculator - - + + + @@ -99,8 +101,13 @@ ) -
- / +
+
+ / +
+
+ % +
* diff --git a/ressources/index.css b/ressources/index.css index a0b3e10..6e6b7be 100644 --- a/ressources/index.css +++ b/ressources/index.css @@ -1,5 +1,6 @@ body, html { height: 100%; + overscroll-behavior: contain; } * { @@ -110,6 +111,10 @@ body, html { transition: font 0.3s ease; } +.display.error { + color: #c62828; +} + .display.big { font-size: 60px; } diff --git a/ressources/index.js b/ressources/index.js index 715b30d..08e5a01 100644 --- a/ressources/index.js +++ b/ressources/index.js @@ -190,4 +190,70 @@ $( document ).on( "click", "#delete-history", function () { operations = []; localStorage.setItem( "operations", JSON.stringify( operations ) ); insertHistory(); -} ); \ No newline at end of file +} ); + +function swipedetect( el, callback ) { + + let touchsurface = el, + swipedir, + startX, + startY, + distX, + distY, + threshold = 150, //required min distance traveled to be considered swipe + restraint = 100, // maximum distance allowed at the same time in perpendicular direction + allowedTime = 300, // maximum time allowed to travel that distance + elapsedTime, + startTime, + handleswipe = callback || function (swipedir) { + }; + + touchsurface.addEventListener('touchstart', function (e) { + var touchobj = e.changedTouches[0]; + swipedir = 'none'; + dist = 0; + startX = touchobj.pageX; + startY = touchobj.pageY; + startTime = new Date().getTime(); // record time when finger first makes contact with surface + // e.preventDefault() + }, false); + + touchsurface.addEventListener('touchmove', function (e) { + // e.preventDefault() // prevent scrolling when inside DIV + }, false); + + touchsurface.addEventListener('touchend', function (e) { + var touchobj = e.changedTouches[0]; + distX = touchobj.pageX - startX; // get horizontal dist traveled by finger while in contact with surface + distY = touchobj.pageY - startY; // get vertical dist traveled by finger while in contact with surface + elapsedTime = new Date().getTime() - startTime; // get time elapsed + if (elapsedTime <= allowedTime) { // first condition for awipe met + if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) { // 2nd condition for horizontal swipe met + swipedir = (distX < 0) ? 'left' : 'right' // if dist traveled is negative, it indicates left swipe + } + else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) { // 2nd condition for vertical swipe met + swipedir = (distY < 0) ? 'up' : 'down' // if dist traveled is negative, it indicates up swipe + } + } + handleswipe(swipedir); + // e.preventDefault(); + }, false) +} + +$( window ).on( "load", function () { + + swipedetect( document.getElementsByClassName( "display-container" )[0], function ( dir ) { + if ( dir === "down" ) { + $( ".container" ).addClass( "history" ); + } + } ); + + let historyContainer = document.getElementsByClassName( "history-container" ); + + swipedetect( historyContainer[0], function ( dir ) { + if ( dir === "up" && ( ( historyContainer[0].scrollTop + historyContainer[0].offsetHeight ) === historyContainer[0].scrollHeight ) ) { + $( ".container" ).removeClass( "history" ); + } + } ) + +} );