Update menu swipe (PR #13277)

Refactor the mobile swipe events in Discourse:

Sets the styles through css properties so that behavior can be overridden in stylesheets if needed. Refactor finish animation , and implement these as simple CSS animations through a temporary animate class over the course of the animation.

Prefer element moves using translations, rather than other css properties as translations and opacity triggers are less resource intensive. From testing on my android, this makes the pull out menus MUCH smoother.

I also made all menu animations adhere to reduced motion preferences for a11y improvements.

GitHub

This looks great! Looking forward to trying this out on iOS.

There is a fair bit of jQuery usage here though that we should replace by vanilla JS.

Maybe it’s worth removing all the jQuery while you’re in there?

sure, can do!

Oooooh yeah that’s nice!

Still doing a bit more cleanup, will also attempt to look into touch tests too.

            panel.style.top !== `${menuTop}px` ||

OK, I’ve added tests as well as updated some code to allow those tests to run. The test environment was breaking a few things so I’ve cleaned some stuff up. The main points here are:

  • Zoom methods on test windows – through non-testem environments this was using a non-standard zoom property. Through testem environments, this was using a transform property. I’ve updated the non-testem to use more standard transforms for zooming.
  • I’ve updated the detection for dropdown vs slide-in header modes. Mobile test detection on header should always be ‘slide-in’. It takes the difference of header width vs document width, and in tests, the display window is always going to be tiny in comparison with the body.

@eviltrout when you have a moment, would you mind doing a quick sanity check for these? Reasons for the changes is in the comment above :point_up:

Looks good to me!