Scroll by dragging plugin

scrollByDrag.js

/*
  scrollByDrag

  Purpose:
      Detect how many pixels a user "drags an element" - more specifically, how many pixels a user moves their mouse between mousing down on an element and mousing up.

  Parameters:
      Container:
        parent element containing .drag-element and .drag-content
      Type:
        "scrub" is for dragging an element horizontally within another parent element, like a podcast scrubber.
        "scroll" is for dragging an element vertiically within another parent element, like a scroll bar.
      Callback:
        Handles the view updating with `pixelsDragged` and `initScroll` as parameters. These values will tell you where the drag started, and how far it went.
*/
function scrollByDrag(container, direction, callback){
  var dragInitial;
  var initScroll;
  var pixelsDragged;
  var dragParent =    document.querySelector(container) || null;

  if(dragParent == null){
    console.warn( 'No parent passed. Must pass a parent element.' );
    return false;
  }

  var dragContent =   dragParent.querySelector('.drag-content') || null;
  var dragElement =   dragParent.querySelector('.drag-element') || null;

  if(dragContent == null || dragElement == null){
    console.warn( 'Proper child elements not found. Please add .drag-element and .drag-content within the parent container.' );
    return false;
  }

  if(isMobile){
    touchDragLogic()
  } else {
    mouseDragLogic()
  }

  function touchDragLogic(){
    console.log('do touch logic..')
    dragElement.addEventListener('touchstart', function(e){
      e.stopPropagation();
      dragInitial = direction == 'scrub' ? e.touches[0].pageX : e.touches[0].pageY;
      initScroll = direction == 'scrub' ? dragElement.offsetLeft : dragContent.scrollTop;
      trackTouchMovement();
    })
    function trackTouchMovement(){
      document.addEventListener('touchmove', handleTouchMove)
      document.addEventListener('touchend', handleTouchMoveEnd);
    }
    function handleTouchMove(e){
      pixelsDragged = direction == 'scrub' ? e.touches[0].pageX - dragInitial : e.touches[0].pageY - dragInitial;
      callback(pixelsDragged, initScroll);
    }
    function handleTouchMoveEnd(e){
      // handleTouchMove(e); //doesnt want to work on mobile, no biggie
      stopTrackingTouchMovement();
    }
    function stopTrackingTouchMovement(){
      initScroll = direction == 'scrub' ? dragElement.offsetLeft : dragContent.scrollTop;
      document.removeEventListener('touchmove', handleTouchMove)
      document.removeEventListener('touchend', handleTouchMoveEnd);
    }
  }



  function mouseDragLogic(){
    console.log('do mouse logic..')
    dragElement.addEventListener('mousedown', function(e){
      dragInitial = direction == 'scrub' ? e.pageX : e.pageY;
      initScroll = direction == 'scrub' ? dragElement.offsetLeft : dragContent.scrollTop;
      trackMouseMovement();
    })
    function trackMouseMovement(){
      dragElement.classList.add('dragging');
      document.addEventListener('mousemove', handleMouseMove)
      document.addEventListener('mouseup', handleMouseMoveEnd);
    }
    function handleMouseMove(e){
      pixelsDragged = direction == 'scrub' ? e.pageX - dragInitial : e.pageY - dragInitial;
      callback(pixelsDragged, initScroll);
    }
    function handleMouseMoveEnd(e){
      handleMouseMove(e);
      stopTrackingMouseMovement();
    }
    function stopTrackingMouseMovement(){
      dragElement.classList.remove('dragging');
      initScroll = direction == 'scrub' ? dragElement.offsetLeft : dragContent.scrollTop;
      document.removeEventListener('mousemove', handleMouseMove)
      document.removeEventListener('mouseup', handleMouseMoveEnd);
    }
  }
}