Навигация по краям

Можете ли вы порекомендовать библиотеку JS, которая на самом деле обеспечивает функциональность смахивания краев при работе с простыми HTML и CSS?

Я искал повсюду и не нашел источника правды для этой проблемы. Я видел много-много библиотек, позволяющих проводить жесты, но не краевые.

Моя последняя попытка была использовать Hammer.js, который я пытался реализовать как:

var swipe = new Hammer(document);
// detect swipe and call to a function
swipe.on('swiperight swipeleft', function (e) {
    e.preventDefault();
    var endPoint = e.pointers[0].pageX;
    var distance = e.distance;
    var origin = endPoint - distance;

    //swipe right to open nav
    if (origin <= 15 && e.type == 'swiperight') {
        // open main menu
        $('#navigation-menu').animate({
            left: '0'
        });
    } else {
        // close/hide menu(s)
        $('#navigation-menu').animate({
            left: '-100%'
        });
    }
});

Кроме того, если я не использую какую-либо библиотеку, как я могу реализовать мобильное сглаживание, чтобы показать и скрыть контент (в моем случае это было бы меню навигации) с vanilla JS?

На данный момент я открыт для любого решения / направления.

Источник

3 ответа

Решение

Вот решение, вы можете установить thresholdStart, End, Milliseconds. Возможно, вы захотите привести в порядок код и перенести его на сенсорные события (я проще использовал события мыши для тестирования в своем браузере).

Используйте: функцию swipeEdgeFromLeft и функцию swipeEdgeFromRight.

var div = document.body;
var mouse = {
  isDown: false,
  inLeft: false,
  inRight: false,
  downTimestamp: null
};
var width, thresholdStart, thresholdEnd, thresholdMilliseconds;

function resize(){
  width = window.innerWidth;
  thresholdStart = 0.1*width;//within 10% of screen width
  thresholdEnd = 0.13*width;//beyond 13% of screen width
  thresholdMilliseconds = 500;//must be done in 500 milliseconds
}
document.addEventListener("resize", resize, false);
resize();//initialize

div.addEventListener('mousedown'/*'touchstart'*/, function(e){
 var x = e./*touches[0].*/pageX;
 mouse.isDown = true;
 mouse.downTimestamp = performance.now();

 if(x < thresholdStart){
  mouse.inLeft = true;
 } else if(x > width-thresholdStart){
  mouse.inRight = true;
 }
});
div.addEventListener('mousemove'/*'touchmove'*/, function(e){
 
  var x = e./*touches[0].*/pageX;
  if(mouse.inLeft && x > thresholdEnd){
    mouse.inLeft = false;
    if(performance.now() - mouse.downTimestamp < thresholdMilliseconds){
      swipeEdgeFromLeft();
    }
  } else if(mouse.inRight && x < width-thresholdEnd){
    mouse.inRight = false;
    if(performance.now() - mouse.downTimestamp < thresholdMilliseconds){
      swipeEdgeFromRight();
    }
  }
});
div.addEventListener('mouseup'/*'touchend'*/, function(e){
 //var x = e./*changedTouches[0].*/pageX;
 mouse.isDown = false;
 mouse.inLeft = false;
 mouse.inRight = false;
 mouse.downTimestamp = null;
});
function swipeEdgeFromLeft(){
 console.log("edge swipe from left");
}
function swipeEdgeFromRight(){
 console.log("edge swipe from right");
}
body {
  max-width: 100vw;
  height: 100vh;
}
.bar {
  height: 100vh;
  background-color: rgba(0,0,0,0.4);
  position: fixed;
  pointer-events: none;
}
#left-inner-threshold {
  width: calc(0.1 * 100vw);
  left: 0;
}
#right-inner-threshold {
  width: calc(0.1 * 100vw);
  right: 0;
}
#left-outer-threshold {
  width: calc(0.13 * 100vw);
  left: 0;
}
#right-outer-threshold {
  width: calc(0.13 * 100vw);
  right: 0;
}
<div id="left-inner-threshold" class="bar"></div>
<div id="left-outer-threshold" class="bar"></div>
<div id="right-inner-threshold" class="bar"></div>
<div id="right-outer-threshold" class="bar"></div>

Источник

Вот решение вашего существующего кода с использованием Hammer.js v2.0.8

Объяснение того, как добиться смахивания края, можно найти здесь, на который отвечает @jovinbm.

$(document).ready(function () {

    const swipe = new Hammer(document);
    function getStartPosition(e) {
        const delta_x = e.deltaX;
        const delta_y = e.deltaY;
        const final_x = e.srcEvent.pageX || e.srcEvent.screenX || 0;
        const final_y = e.srcEvent.pageY || e.srcEvent.screenY || 0;

        return {
            x: final_x - delta_x,
            y: final_y - delta_y
        }
    };

    swipe.on('swiperight swipeleft', function (e) {
        e.preventDefault();
        const { x } = getStartPosition(e);
        console.log(x);
        //swipe right to open nav /* note the condition here */
        if (e.type == 'swiperight' && x >= 0 && x <= 50) {
            // open menu
            $('#navigation').animate({
                left: '0'
            });
            //swiping left should slide out nav and/or sub-nav
        } else {
            // close/hide menu
            $('#navigation, #task-menu').animate({
                left: '-100%'
            });
        }
    });
});

Вот ручка, показывающая это в действии:

Источник

Для свайпов, только финал pointerup событие включено как srcEvent в объекте события, переданном вашему обработчику (см. http://hammerjs.github.io/api/). Начальный pointerdown Событие, содержащее сведения о начальной позиции, где началось событие удара, не предоставлено в объекте события молотка. К счастью, вы можете использовать srcEvent в объекте события, чтобы получить начальную позицию начального события pointerdown событие.

const getStartPosition = (e) => {
  const delta_x = e.deltaX;
  const delta_y = e.deltaY;
  const final_x = e.srcEvent.pageX || e.srcEvent.screenX || 0;
  const final_y = e.srcEvent.pageY || e.srcEvent.screenY || 0;

  return {
    x: final_x - delta_x,
    y: final_y - delta_y
  };
};

const handleSwipe = (e) => {
  const {x} = getStartPosition(e);

  if (x >= 0 && x <= 50) {
    // handle swipe from left edge e.t.c
  }
  else {
    // handle other case
  }
};

srcEvent это просто обычное событие JavaScript, которое наследует свойства от UIEvent, следовательно, pageX/pageY API выше. Это, вероятно, не будет работать в других браузерах, так как некоторые из них не стандартизированы

Источник
Другие вопросы по тегам