Allow slide away of header and footer even if there is no scroll possible in iframe

[Jaifroid]

Once I have merged #1140 (#1139), it will finally be possible to address the issues in #337 and #435, as we'll have tested functions for hiding and showing the UI elements.

We'll need to handle mousedown and touchstart events on the window (possible also on the iframe), and test if there has been a "swipe down" or "swipe up" without a scroll. Boilerplate code would look something like this (untested):

let start = null;

function startHandler(e) {
  if (e.type === 'touchstart') {
    start = e.changedTouches[0];
  } else if (e.type === 'mousedown') {
    start = e;
  }
}

function endHandler(e) {
  let end;
  if (e.type === 'touchend') {
    end = e.changedTouches[0];
  } else if (e.type === 'mouseup') {
    end = e;
  }

  if (end.screenY - start.screenY > 0) {
    console.log('scrolling up');
    document.getElementById('status').innerHTML = 'scrolling up';
  } else if (end.screenY - start.screenY < 0) {
    console.log('scrolling down');
    document.getElementById('status').innerHTML = 'scrolling down';
  }
}

window.addEventListener('touchstart', startHandler);
window.addEventListener('mousedown', startHandler);
window.addEventListener('touchend', endHandler);
window.addEventListener('mouseup', endHandler);

This code listens for both touchstart/mousedown and touchend/mouseup events on the window. When a touch or mouse button press starts, it records the starting position. When the touch ends or mouse button is released, it checks if the end position is greater than or less than the start position to determine if the swipe was up or down.

[Jaifroid]

Touch events work, but not mouse events.

[Jaifroid]

The wheel event works.