mirror of
https://github.com/discourse/discourse.git
synced 2025-01-21 14:06:14 +08:00
d208396c5c
PERF: improve touch, swipe, panning performance on mobile menus --- * stop event propagation on swipe events: other touch events were stealing a huge amount of time here. Stop event propagation when handling pan events. * animate with [web animations api](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API) * prefer translate3d to hint for gpu rendering. * query document for elements only on start move event, not on subsequent move events * remove unused calculations for directioned velocity and distance: all swipe/pan elements function in x/y direction only. * re-implement scroll locking behavior. re-implemented scroll lock behavior --- With stop event propagation, we need to re-implement scroll locking on menu swipes. Previously, this was using onTouchMove which was costly. We may now use styling with overflow-y:hidden to lock scroll behavior. overflow:hidden on html/body elements is now supported by iOS as of 2022 https://bugs.webkit.org/show_bug.cgi?id=153852 https://bugs.webkit.org/show_bug.cgi?id=220908 UX: improve swipe --- Some improvements to get gestures and swipes feeling a little more polished. This focuses on end gesture, and how we transfer it to a css animation to complete a menu open/close action. Multitouch: events may pan, scroll, and zoom - especially on iOS safari. Cancelling the swipe event allows for a more pleasant zooming experience. * ease-out on menus opening, linear on close * calculate animation duration for opening and closing, attempt to better transfer user swipe velocity to css animation. * more timely close/open and cleanup from calculated animation timing. * add animation to closing menus on cloak tap * correctly animate menus with ease-in and ease-out * add swipe cancel event on multitouch event DEV --- * lean on promises js animations api gives us promises to listen to. Update test waiters to use waitForPromise from @ember/test-waiters instead of reigster/unregister. * convert swipe mixin to its own class. Convert swipe callbacks to custom events on the element. Move shared functions for max animation time and close logic to new shared class. swipe-events lib uses custom events to trigger callbacks, rather than assuming implemented hard coded function from the mixin's base class. Custom events are triggered from the bound element as swipestart, swipeend, swipe Add shared convenience functions for swipe events so they can be more easily shared. A client receives an initial swipe event and can check some state to see if it wants to handle the swipe event and if it doesn't, calling `event.preventDefault();` will prevent `swipe` and `swipeend` events from firing until another distinct swipestart event is fired. Swipe events will auto-cancel on multitouch. The scroll lock has also exposed as its own utility class. |
||
|---|---|---|
| .. | ||
| _index.scss | ||
| _topic-list.scss | ||
| about.scss | ||
| activation.scss | ||
| alert.scss | ||
| bbcode.scss | ||
| cat_reorder.scss | ||
| category-list.scss | ||
| code_highlighting.scss | ||
| colorpicker.scss | ||
| compose.scss | ||
| composer-user-selector.scss | ||
| crawler_layout.scss | ||
| d-icon.scss | ||
| d-image-grid.scss | ||
| dialog.scss | ||
| directory.scss | ||
| discourse.scss | ||
| edit-category.scss | ||
| edit-topic-timer-modal.scss | ||
| ember-select.scss | ||
| emoji.scss | ||
| empty-state.scss | ||
| exception.scss | ||
| explain-reviewable.scss | ||
| faqs.scss | ||
| group.scss | ||
| groups.scss | ||
| header.scss | ||
| history.scss | ||
| lightbox.scss | ||
| login.scss | ||
| magnific-popup.scss | ||
| menu-panel.scss | ||
| modal.scss | ||
| new-user.scss | ||
| not-found.scss | ||
| onebox.scss | ||
| personal-message.scss | ||
| popup-menu.scss | ||
| redirection.scss | ||
| request_access.scss | ||
| request-group-membership-form.scss | ||
| reviewables.scss | ||
| revise-and-reject-post-reviewable.scss | ||
| rtl.scss | ||
| search-menu.scss | ||
| search.scss | ||
| share_link.scss | ||
| shared-drafts.scss | ||
| sidebar-custom-section.scss | ||
| sidebar-footer.scss | ||
| sidebar-more-section-links.scss | ||
| sidebar-section-link.scss | ||
| sidebar-section.scss | ||
| sidebar.scss | ||
| static-login.scss | ||
| tagging.scss | ||
| tooltip.scss | ||
| topic-admin-menu.scss | ||
| topic-post.scss | ||
| topic-summary.scss | ||
| topic.scss | ||
| upload.scss | ||
| user-badges.scss | ||
| user-tips.scss | ||
| user.scss | ||