Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
start [2023/02/09 22:22] – steve.wangstart [2023/02/10 00:06] (current) – steve.wang
Line 22: Line 22:
         transition-property:left;         transition-property:left;
         transition-duration: 0.5s;         transition-duration: 0.5s;
-        transition-delay: 0.1s;+        transition-delay: 100ms;
         cursor:ew-resize;         cursor:ew-resize;
 } }
Line 705: Line 705:
 if (deviceType!='mobile'){ if (deviceType!='mobile'){
     window.addEventListener("resize", function(e){     window.addEventListener("resize", function(e){
-        console.log('options',deviceType!='mobile',deviceOrientation!='portrait')  
         if (window.innerWidth<window.innerHeight){         if (window.innerWidth<window.innerHeight){
             //document.location.reload()             //document.location.reload()
Line 757: Line 756:
 //screenorientation API: https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation //screenorientation API: https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation
  
-/* 
-let startPoint; 
-window.addEventListener("touchstart", function(e){ 
-    console.log('start',e.touches[0].clientX) 
-    startPoint=JSON.parse(JSON.stringify(new Point(e.touches[0].clientX,e.touches[0].clientY))) 
-}) 
  
-window.addEventListener("touchend", function(e){ 
-    console.log('end',e) 
-    if (startPoint.x<e.clientX){ 
-        console.log('swiped left',e.clientX) 
-        checkIfSwitchImageLeft(e.target) 
-    } 
-    else { 
-        console.log('swiped right') 
-        checkIfSwitchImageRight(e.target) 
-        } 
-}) 
-*/ 
- 
-document.addEventListener('touchstart', handleTouchStart, false);         
-document.addEventListener('touchmove', handleTouchMove, false); 
- 
-var xDown = null;                                                         
-var yDown = null; 
- 
-function getTouches(evt) { 
-  return evt.touches ||             // browser API 
-         evt.originalEvent.touches; // jQuery 
-}                                                      
-                                                                          
-function handleTouchStart(evt) { 
-    const firstTouch = getTouches(evt)[0];                                       
-    xDown = firstTouch.clientX;                                       
-    yDown = firstTouch.clientY;                                       
-};                                                 
-                                                                          
-let swipeCooldown=false 
-function handleTouchMove(evt) { 
-    if ( ! xDown || ! yDown ) { 
-        return; 
-    } 
- 
-    var xUp = evt.touches[0].clientX;                                     
-    var yUp = evt.touches[0].clientY; 
- 
-    var xDiff = xDown - xUp; 
-    var yDiff = yDown - yUp; 
-                                                                          
-    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/ 
-        if ( xDiff > 0 && swipeCooldown==false) { 
-            console.log('swiped left') 
-            swipeCooldown=true 
-            checkIfSwitchImageLeft(evt.target) 
-            setTimeout(()=>{ 
-                swipeCooldown=false 
-            },500) 
-        }  
-        else if (swipeCooldown==false) { 
-            console.log('swiped right') 
-            swipeCooldown=true 
-            checkIfSwitchImageRight(evt.target) 
-            setTimeout(()=>{ 
-                swipeCooldown=false 
-            },500) 
-        }                        
-    } else { 
-        if ( yDiff > 0 ) { 
-            /* down swipe */  
-        } else {  
-            /* up swipe */ 
-        }                                                                  
-    } 
-    /* reset values */ 
-    xDown = null; 
-    yDown = null;                                              
-}; 
- 
-//swiping code by: https://stackoverflow.com/a/23230280/19515980 
  
 function adaptToOrientationChange (){ function adaptToOrientationChange (){
Line 1477: Line 1398:
 buttonsArray.forEach(i => whereButtonsGo.appendChild(i)) buttonsArray.forEach(i => whereButtonsGo.appendChild(i))
  
 +//STEVE CODE:
 +
 +
 +/*
 +let startPoint;
 +window.addEventListener("touchstart", function(e){
 +    console.log('start',e.touches[0].clientX)
 +    startPoint=JSON.parse(JSON.stringify(new Point(e.touches[0].clientX,e.touches[0].clientY)))
 +})
 +
 +window.addEventListener("touchend", function(e){
 +    console.log('end',e)
 +    if (startPoint.x<e.clientX){
 +        console.log('swiped left',e.clientX)
 +        checkIfSwitchImageLeft(e.target)
 +    }
 +    else {
 +        console.log('swiped right')
 +        checkIfSwitchImageRight(e.target)
 +        }
 +})
 +*/
 +
 +window.addEventListener('touchstart', handleTouchStart, false);        
 +window.addEventListener('touchmove', handleTouchMove, false);
 +
 +var xDown = null;                                                        
 +var yDown = null;
 +
 +function getTouches(evt) {
 +  return evt.touches ||             // browser API
 +         evt.originalEvent.touches; // jQuery
 +}                                                     
 +                                                                         
 +function handleTouchStart(evt) {
 +    const firstTouch = getTouches(evt)[0];                                      
 +    xDown = firstTouch.clientX;                                      
 +    yDown = firstTouch.clientY;                                      
 +};                                                
 +                                                                         
 +let swipeCooldown=false
 +function handleTouchMove(evt) {
 +console.log('swipe 1')
 +    if ( ! xDown || ! yDown ) {
 +        return;
 +    }
 +console.log('swipe 2')
 +    var xUp = evt.touches[0].clientX;                                    
 +    var yUp = evt.touches[0].clientY;
 +
 +    var xDiff = xDown - xUp;
 +    var yDiff = yDown - yUp;
 +                                                                         
 +    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
 +        if ( xDiff > 0 && swipeCooldown==false) {
 +            evt.preventDefault()
 +            console.log('swiped left')
 +            swipeCooldown=true
 +            checkIfSwitchImageLeft(evt.target)
 +            setTimeout(()=>{
 +                swipeCooldown=false
 +            },500)
 +        } 
 +        else if (swipeCooldown==false) {
 +            evt.preventDefault()
 +            console.log('swiped right')
 +            swipeCooldown=true
 +            checkIfSwitchImageRight(evt.target)
 +            setTimeout(()=>{
 +                swipeCooldown=false
 +            },500)
 +        }                       
 +    } else {
 +        if ( yDiff > 0 ) {
 +        } else { 
 +        }                                                                 
 +    }
 +    /* reset values */
 +    xDown = null;
 +    yDown = null;                                             
 +};
 +
 +//swiping code by: https://stackoverflow.com/a/23230280/19515980
  
 </script> </script>
  • start.1676010174.txt.gz
  • Last modified: 2023/02/09 22:22
  • by steve.wang