Ticket #49025: index.js.diff

index.js

@@ -4 +4 @@
 
 var twentytwenty = twentytwenty || {};
 
-// Set a default value for scrolled.
-twentytwenty.scrolled = 0;
-
 // polyfill closest
 // https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
 if ( ! Element.prototype.closest ) {
@@ -104 +101 @@
                         // Close on escape key press.
                         this.closeOnEscape();
 
+                        // Close and go to anchor.
+                        this.goToAnchor();
+
                         // Hide and show modals before and after their animations have played out.
                         this.hideAndShowModals();
                 }
@@ -155 +155 @@
                 }.bind( this ) );
         },
 
+        goToAnchor: function () {
+                document.addEventListener('click', function (event) {
+                        let target = event.target.closest('a');
+
+                        if (target && 'a' === target.tagName.toLowerCase() && target.closest('.modal-menu')) {
+                                let targetHref, modal;
+                                targetHref = target.getAttribute('href');
+                                modal = target.closest('.cover-modal.active');
+
+                                if (modal && targetHref.startsWith('#')) {
+                                        this.untoggleModal(modal);
+                                        // fixme this should not be necessary but some other event is interrupting the scrolling
+                                        setTimeout(() => {
+                                                if (!target.hash) {
+                                                        // scroll to top
+                                                        document.body.scrollIntoView();
+                                                } else {
+                                                        let anchorElement = document.getElementById(target.hash.slice(1));
+                                                        if (anchorElement) {
+                                                                anchorElement.scrollIntoView();
+                                                        }
+                                                }
+                                        }, 550);
+                                }
+                        }
+                }.bind(this));
+        },
+
         // Hide and show modals before and after their animations have played out.
         hideAndShowModals: function() {
                 var _doc = document,
-                        _win = window,
-                        modals = _doc.querySelectorAll( '.cover-modal' ),
-                        htmlStyle = _doc.documentElement.style,
-                        adminBar = _doc.querySelector( '#wpadminbar' );
-
-                function getAdminBarHeight( negativeValue ) {
-                        var height,
-                                currentScroll = _win.pageYOffset;
-
-                        if ( adminBar ) {
-                                height = currentScroll + adminBar.getBoundingClientRect().height;
-
-                                return negativeValue ? -height : height;
-                        }
-
-                        return currentScroll === 0 ? 0 : -currentScroll;
-                }
-
-                function htmlStyles() {
-                        var overflow = _win.innerHeight > _doc.documentElement.getBoundingClientRect().height;
-
-                        return {
-                                'overflow-y': overflow ? 'hidden' : 'scroll',
-                                position: 'fixed',
-                                width: '100%',
-                                top: getAdminBarHeight( true ) + 'px',
-                                left: 0
-                        };
-                }
+                        modals = _doc.querySelectorAll( '.cover-modal' );
 
                 // Show the modal.
                 modals.forEach( function( modal ) {
                         modal.addEventListener( 'toggle-target-before-inactive', function( event ) {
-                                var styles = htmlStyles(),
-                                        offsetY = _win.pageYOffset,
-                                        paddingTop = ( Math.abs( getAdminBarHeight() ) - offsetY ) + 'px',
-                                        mQuery = _win.matchMedia( '(max-width: 600px)' );
-
-                                if ( event.target !== modal ) {
-                                        return;
-                                }
-
-                                Object.keys( styles ).forEach( function( styleKey ) {
-                                        htmlStyle.setProperty( styleKey, styles[ styleKey ] );
-                                } );
-
-                                _win.twentytwenty.scrolled = parseInt( styles.top, 10 );
-
-                                if ( adminBar ) {
-                                        _doc.body.style.setProperty( 'padding-top', paddingTop );
-
-                                        if ( mQuery.matches ) {
-                                                if ( offsetY >= getAdminBarHeight() ) {
-                                                        modal.style.setProperty( 'top', 0 );
-                                                } else {
-                                                        modal.style.setProperty( 'top', ( getAdminBarHeight() - offsetY ) + 'px' );
-                                                }
-                                        }
+                                if (event.target === modal) {
+                                        modal.classList.add('show-modal');
                                 }
-
-                                modal.classList.add( 'show-modal' );
                         } );
 
                         // Hide the modal after a delay, so animations have time to play out.
@@ -232 +207 @@
 
                                         modal.classList.remove( 'show-modal' );
 
-                                        Object.keys( htmlStyles() ).forEach( function( styleKey ) {
-                                                htmlStyle.removeProperty( styleKey );
-                                        } );
-
-                                        if ( adminBar ) {
-                                                _doc.body.style.removeProperty( 'padding-top' );
-                                                modal.style.removeProperty( 'top' );
-                                        }
-
                                         if ( clickedEl !== false ) {
                                                 clickedEl.focus();
                                                 clickedEl = false;
                                         }
-
-                                        _win.scrollTo( 0, Math.abs( _win.twentytwenty.scrolled + getAdminBarHeight() ) );
-
-                                        _win.twentytwenty.scrolled = 0;
                                 }, 500 );
                         } );
                 } );