Ticket #31187: 31187.4.diff

src/wp-admin/js/common.js

@@ -707 +707 @@
 
         window.wpResponsive = {
                 init: function() {
-                        var self = this;
+                        var self = this,
+                        wpTouchMenu = {
+                                started: false,
+                                tracking: false,
+                                startX: 0,
+                                startY: 0,
+                                open: false,
+                                rtl: ( 'rtl' === document.documentElement.getAttribute( 'dir' ) )
+                        };
 
                         // Modify functionality based on custom activate/deactivate event
                         $document.on( 'wp-responsive-activate.wp-responsive', function() {
@@ -725 +733 @@
                                 if ( $wpwrap.hasClass( 'wp-responsive-open' ) ) {
                                         $(this).find('a').attr( 'aria-expanded', 'true' );
                                         $( '#adminmenu a:first' ).focus();
+                                        wpTouchMenu.open = true;
                                 } else {
                                         $(this).find('a').attr( 'aria-expanded', 'false' );
+                                        wpTouchMenu.open = false;
                                 }
                         } );
 
+                        $( window ).on( 'touchstart.wp-responsive', function( e ) {
+                                var touches = e.originalEvent.touches,
+                                touch,
+                                winWidth = Math.max( window.innerWidth, document.documentElement.clientWidth );
+
+                                // if it's multi touch bail
+                                if ( 1 !== touches.length ) {
+                                        return;
+                                }
+
+                                touch = touches[0];
+                                console.log( touch );
+
+                                // start swipe interaction
+                                wpTouchMenu.started = true;
+                                wpTouchMenu.startX = touch.clientX;
+                                wpTouchMenu.startY = touch.clientY;
+                        } );
+
+                        $( window ).on( 'touchmove.wp-responsive', function( e ) {
+                                var touches, touch;
+                                // if it didn't qualify for potential menu
+                                // open bail
+                                if ( ! wpTouchMenu.started ) {
+                                        return;
+                                }
+
+                                touches = e.originalEvent.changedTouches;
+
+                                // no multitouch
+                                if ( 1 !== touches.length ) {
+                                        wpTouchMenu.started = false;
+                                        wpTouchMenu.startX = 0;
+                                        wpTouchMenu.startY = 0;
+                                        return;
+                                }
+
+                                touch = touches[0];
+
+                                // cancel open/close if we're not going in the right direction
+                                if (
+                                        ( ! wpTouchMenu.rtl && ! wpTouchMenu.open && touch.clientX <= wpTouchMenu.startX ) ||
+                                        ( ! wpTouchMenu.rtl && wpTouchMenu.open && wpTouchMenu.startX <= touch.clientX ) ||
+                                        ( wpTouchMenu.rtl && ! wpTouchMenu.open && wpTouchMenu.startX <= touch.clientX ) ||
+                                        ( wpTouchMenu.rtl && wpTouchMenu.open && touch.clientX <= wpTouchMenu.startX )
+                                ) {
+                                        wpTouchMenu.started = false;
+                                        wpTouchMenu.startPosition = 0;
+                                        return;
+                                }
+
+                                wpTouchMenu.tracking = true;
+                        } );
+
+                        $( window ).on( 'touchend.wp-responsive', function( e ) {
+                                var touches = e.originalEvent.changedTouches,
+                                touch,
+                                movedX = 0,
+                                movedY = 0;
+
+                                // only process if we're tracking and it's not multi touch
+                                if ( ! wpTouchMenu.tracking || 1 !== touches.length ) {
+                                        wpTouchMenu.started = false;
+                                        wpTouchMenu.startX = 0;
+                                        wpTouchMenu.startY = 0;
+                                        wpTouchMenu.tracking = false;
+                                        return;
+                                }
+
+                                touch = touches[0];
+                                // calculate how far along the x axis has been moved
+                                if ( wpTouchMenu.rtl ) {
+                                        if ( wpTouchMenu.open ) {
+                                                movedX = touch.clientX - wpTouchMenu.startX;
+                                        } else {
+                                                movedX = wpTouchMenu.startX - touch.clientX;
+                                        }
+                                } else {
+                                        if ( wpTouchMenu.open ) {
+                                                movedX = wpTouchMenu.startX - touch.clientX;
+                                        } else {
+                                                movedX = touch.clientX - wpTouchMenu.startX;
+                                        }
+                                }
+
+                                // calculate y axis movement this should always be positive
+                                if ( touch.clientY < wpTouchMenu.startY ) {
+                                        movedY = wpTouchMenu.startY - touch.clientY;
+                                } else {
+                                        movedY = touch.clientY - wpTouchMenu.startY;
+                                }
+
+                                // if it's 20% or more trigger the menu
+                                if ( movedY < movedX ) {
+                                        $( '#wp-admin-bar-menu-toggle' ).trigger( 'click' );
+                                }
+
+                                // reset our values
+                                wpTouchMenu.started = false;
+                                wpTouchMenu.startX = 0;
+                                wpTouchMenu.startY = 0;
+                                wpTouchMenu.tracking = false;
+                        } );
+
                         // Add menu events
                         $adminmenu.on( 'click.wp-responsive', 'li.wp-has-submenu > a', function( event ) {
                                 if ( ! $adminmenu.data('wp-responsive') ) {