|
// I hope this over-commenting helps. Let's do this! |
|
// Let's use the 'active' variable to let us know when we're using it |
|
let active = false; |
|
// and define our dom elements to make it easier to read |
|
let scrollerMiddle = document.querySelector('.scroller-middle'); |
|
let scrollerTop = document.querySelector('.scroller-top'); |
|
|
|
|
|
// First we'll have to set up our event listeners |
|
// We want to watch for clicks on our scroller |
|
scrollerMiddle.addEventListener('mousedown',function(){ |
|
active = "middle"; |
|
// Add our scrolling class so the scroller has full opacity while active |
|
scrollerMiddle.classList.add('scrolling'); |
|
}); |
|
// We also want to watch the body for changes to the state, |
|
// like moving around and releasing the click |
|
// so let's set up our event listeners |
|
document.body.addEventListener('mouseup',function(){ |
|
active = false; |
|
scrollerMiddle.classList.remove('scrolling'); |
|
}); |
|
document.body.addEventListener('mouseleave',function(){ |
|
active = false; |
|
scrollerMiddle.classList.remove('scrolling'); |
|
}); |
|
// We'll have to do the same for our top scroller |
|
scrollerTop.addEventListener('mousedown',function(){ |
|
active = "top"; |
|
scrollerTop.classList.add('scrolling'); |
|
}); |
|
document.body.addEventListener('mouseup',function(){ |
|
active = false; |
|
scrollerTop.classList.remove('scrolling'); |
|
}); |
|
document.body.addEventListener('mouseleave',function(){ |
|
active = false; |
|
scrollerTop.classList.remove('scrolling'); |
|
}); |
|
|
|
// Let's figure out where their mouse is at |
|
document.body.addEventListener('mousemove',function(e){ |
|
if (!active) return; |
|
// Their mouse is here... |
|
let x = e.pageX; |
|
// but we want it relative to our wrapper |
|
x -= document.querySelector('.wrapper').getBoundingClientRect().left; |
|
// Okay let's change our state |
|
scrollIt(x); |
|
}); |
|
|
|
// Let's use this function |
|
function scrollIt(x){ |
|
// Calculate our transform |
|
let transform = Math.max(0,(Math.min(x,document.querySelector('.wrapper').offsetWidth))); |
|
// we show all our bottom image but how much of our middle and top, |
|
// that'll depend on what we're dragging |
|
// if we're dragging the middle slider |
|
if (active==="middle"){ |
|
document.querySelector('.middle').style.width = transform+"px"; |
|
scrollerMiddle.style.left = transform-25+"px"; |
|
// if we're using scroller-middle, middle must always be to the right of top |
|
if (scrollerTop.getBoundingClientRect().left>scrollerMiddle.getBoundingClientRect().left-5){ |
|
document.querySelector('.top').style.width = transform-5+"px"; |
|
scrollerTop.style.left = transform-30+"px"; |
|
} |
|
} |
|
// if we're dragging the top slider |
|
if (active==="top"){ |
|
document.querySelector('.top').style.width = transform+"px"; |
|
scrollerTop.style.left = transform-25+"px"; |
|
// if we're using scroller-top, top must always be to the left |
|
if (scrollerTop.getBoundingClientRect().left>scrollerMiddle.getBoundingClientRect().left-5){ |
|
document.querySelector('.middle').style.width = transform+5+"px"; |
|
scrollerMiddle.style.left = transform-20+"px"; |
|
} |
|
} |
|
} |
|
|
|
// Let's set our opening state based off the width, |
|
// we want to show a bit of both images so the user can see what's going on |
|
active = "middle"; |
|
scrollIt(460); |
|
active = "top"; |
|
scrollIt(230); |
|
active = false; |
|
|
|
|
|
// And finally let's repeat the process for touch events |
|
// first our middle scroller... |
|
scrollerMiddle.addEventListener('touchstart',function(){ |
|
active = "middle"; |
|
scrollerMiddle.classList.add('scrolling'); |
|
}); |
|
document.body.addEventListener('touchend',function(){ |
|
active = false; |
|
scrollerMiddle.classList.remove('scrolling'); |
|
}); |
|
document.body.addEventListener('touchcancel',function(){ |
|
active = false; |
|
scrollerMiddle.classList.remove('scrolling'); |
|
}); |
|
|
|
// then scroller top, our second scroller |
|
scrollerTop.addEventListener('touchstart',function(){ |
|
active = "top"; |
|
scrollerTop.classList.add('scrolling'); |
|
}); |
|
document.body.addEventListener('touchend',function(){ |
|
active = false; |
|
scrollerTop.classList.remove('scrolling'); |
|
}); |
|
document.body.addEventListener('touchcancel',function(){ |
|
active = false; |
|
scrollerTop.classList.remove('scrolling'); |
|
}); |
|
|
|
document.querySelector('.wrapper').addEventListener('touchmove',function(e){ |
|
if (!active) return; |
|
e.preventDefault(); |
|
let x = e.touches[0].pageX; |
|
x -= document.querySelector('.wrapper').getBoundingClientRect().left; |
|
scrollIt(x); |
|
}); |