cockpit-project / cockpit-project.github.io

Cockpit Project Website
https://cockpit-project.org/
MIT License
115 stars 206 forks source link

Enhance front page screenshot navigation with swiping #400

Open garrett opened 3 years ago

garrett commented 3 years ago

As a follow-up to #398, we should have swiping to get from one screenshot to the next.

Previously, I had a commit with that, but reverted it, as it didn't have animation.

A better approach might be to add all screenshots in an element that's ((# of screenshots + padding) × screenwidth), have it longer then the page, constrain it to page width, make sure it scrolls, and add scroll stops.

This would:

  1. reduce the amount of JavaScript necessary
  2. use accelerated rendering (including GPU acceleration)
  3. feel natural, as it would use the same scroll swiping as a native platform
  4. be a testbed to see how CSS scroll stops work, as they could be useful in parts of Cockpit too
garrett commented 3 years ago

For reference, the deleted code that handled swiping via touch was:

  $(document).on('touchstart', function(ev){
    if (!previewIsVisible()) { return; }
    touchX = ev.touches[0].clientX;
    touchY = ev.touches[0].clientY;
  }).on('touchmove', function(ev){
    if (!previewIsVisible()) { return; }
    if (!touchX || !touchY) { return; }

    var action;
    var swipeThreshold = 10;
    var distanceX = touchX - ev.touches[0].clientX;
    var distanceY = touchY - ev.touches[0].clientY;

    // Choose swipe distance based on greater direction
    var distance = (Math.abs(distanceX) > Math.abs(distanceY)) ? distanceX : distanceY;

    // Exit if threshold is not met
    if (Math.abs(distance) < swipeThreshold) {
      return;
    }

    // Check direction (either up/down, left/right) based on positive/negative
    action = (distance > 0) ? 'next' : 'prev';
    switchPreview(action);
  });