Adding touchEvents for navigation

Question

I'm building a little site with full page horizontal and vertical scrolling. Check out a codepen demo here. There is a bug with the demo, the 'left' and 'up' buttons don't work how they're supposed to. The 'right' and 'down' buttons work fine. I just threw that together to show you what I'm talking about (excuse my inline styling).

First off, I need to incorporate touchEvents to make the full page scrolling work on mobile devices. If the user swipes left, right, down, or up, the page should move accordingly. I'm still learning the fundamentals of JS and I have no idea where to start with that.

Secondly, I have a few doubts about whether or not I'm using best practices in my JS. For one thing, I repeat myself a lot. For another, I'm pretty sure there's a simpler method for what I'm trying to do. I'd appreciate it if you could take a look at my code and give me some suggestions. Thanks!

Answer 1

You need to modify these two in CSS:

#center.cslide-up {
  top: 100vh;
}

#center.cslide-left {
  left: 100vw;
}

• First one: When the up button is clicked, it will move 100vh down from top position.
• Second one: When the left button is clicked, it will move 100vw right from left position.

As far as for mobile phones, I'd suggest try using:

• Hammer.js : https://hammerjs.github.io/
• Or Refer this answer: https://stackoverflow.com/a/23230280/2474466

And you can reduce the lines of code by cooking up a function and calling it like this: (Make sure to declare panel2 variable globally)

btnL.addEventListener('click', function() {
  swiper("left");
});
btnLBack.addEventListener('click', function() {
  swiper("left");
});


function swiper(dir){
panelC.classList.toggle('cslide-'+dir);
if(dir=="up") panel2=panelU;
else if(dir=="right") panel2=panelR;
else if(dir=="left") panel2=panelL;
else if(dir=="down") panel2=panelD;
panel2.classList.toggle('slide-'+dir);
}

• The function swiper takes a single argument dir which determines in which direction it has to be moved. And you can concatenate the dir with cslide- to move the center container. And use if/else conditions to determine which panel to move and use the same idea for it as well.
• And to make it more simpler and a bit efficient, if you're not making use of any other eventlisteners for the buttons or panels and the only aim is to toggle the class around, you can just use inline onClick="swiper('direction');" attribute on the panels and buttons to trigger it only when needed instead of defining the eventlisteners in the script.

var panel2;
var panelC = document.getElementById('center');
var panelU = document.getElementById('up');
var panelR = document.getElementById('right');
var panelD = document.getElementById('down');
var panelL = document.getElementById('left');
var btnU = document.getElementById('btn-up');
var btnR = document.getElementById('btn-right');
var btnD = document.getElementById('btn-down');
var btnL = document.getElementById('btn-left');
var btnUBack = document.getElementById('btn-up-back');
var btnRBack = document.getElementById('btn-right-back');
var btnDBack = document.getElementById('btn-down-back');
var btnLBack = document.getElementById('btn-left-back');

btnU.addEventListener('click', function() {
  swiper("up");
});
btnUBack.addEventListener('click', function() {
  swiper("up");
});

btnR.addEventListener('click', function() {
  swiper("right");
});
btnRBack.addEventListener('click', function() {
 swiper("right");
});

btnD.addEventListener('click', function() {
  swiper("down");
});
btnDBack.addEventListener('click', function() {
  swiper("down");
});

btnL.addEventListener('click', function() {
  swiper("left");
});
btnLBack.addEventListener('click', function() {
  swiper("left");
});


function swiper(dir){
panelC.classList.toggle('cslide-'+dir);
if(dir=="up") panel2=panelU;
else if(dir=="right") panel2=panelR;
else if(dir=="left") panel2=panelL;
else if(dir=="down") panel2=panelD;
panel2.classList.toggle('slide-'+dir);
}

* {
  margin: 0;
  padding: 0;
  transition: 1.5s ease;
  -webkit-transition: 1.5s ease;
  overflow: hidden;
  background: white;
}

.panel {
  width: 100vw;
  height: 100vh;
  display: block;
  position: absolute;
  border: 1px solid blue;
}

.btn {
  position: absolute;
  padding: 16px;
  cursor: pointer;
}

#center {
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

#center.cslide-up {
  top: 100vh;
}

#center.cslide-left {
  left: 100vw;
}

#center.cslide-right {
  left: -100vw;
}

#center.cslide-down {
  top: -100vh;
}



#up {
  top: -100vh;
}

#up.slide-up {
  top: 0;
}

#right {
  right: -100vw;
}

#right.slide-right {
  right: 0;
}

#down {
  bottom: -100vh;
}

#down.slide-down {
  bottom: 0;
}

#left {
  left: -100vw
}

#left.slide-left {
  left: 0;
}

<div class="panel" id="center">
  <div class="btn" id="btn-up" style="text-align: center; width: 100%;">
    up
  </div>
  <div class="btn" id="btn-right" style="right: 0; top: 50%;">
    right
  </div>
  <div class="btn" id="btn-down" style="text-align: center; bottom: 0; width: 100%;">
    down
  </div>
  <div class="btn" id="btn-left" style="top: 50%;">
    left
  </div>
</div>

<div class="panel" id="up">
  <div class="btn" id="btn-up-back" style="bottom: 0; width: 100%; text-align: center;">
    back
  </div>
</div>

<div class="panel" id="right">
  <div class="btn" id="btn-right-back" style="left: 0; top: 50%;">
    back
  </div>
</div>

<div class="panel" id="down">
  <div class="btn" id="btn-down-back" style="top: 0; width: 100%; text-align: center;">
    back
  </div>
</div>

<div class="panel" id="left">
  <div class="btn" id="btn-left-back" style="right: 0; top: 50%;">
    back
  </div>
</div>