WordPress.org

Make WordPress Core

Ticket #49025: index.js.diff

File index.js.diff, 4.1 KB (added by raQai, 19 months ago)

changes of the index.js to allow anchor navigation

  • index.js

    old new  
    44
    55var twentytwenty = twentytwenty || {};
    66
    7 // Set a default value for scrolled.
    8 twentytwenty.scrolled = 0;
    9 
    107// polyfill closest
    118// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
    129if ( ! Element.prototype.closest ) {
     
    104101                        // Close on escape key press.
    105102                        this.closeOnEscape();
    106103
     104                        // Close and go to anchor.
     105                        this.goToAnchor();
     106
    107107                        // Hide and show modals before and after their animations have played out.
    108108                        this.hideAndShowModals();
    109109                }
     
    155155                }.bind( this ) );
    156156        },
    157157
     158        goToAnchor: function () {
     159                document.addEventListener('click', function (event) {
     160                        let target = event.target.closest('a');
     161
     162                        if (target && 'a' === target.tagName.toLowerCase() && target.closest('.modal-menu')) {
     163                                let targetHref, modal;
     164                                targetHref = target.getAttribute('href');
     165                                modal = target.closest('.cover-modal.active');
     166
     167                                if (modal && targetHref.startsWith('#')) {
     168                                        this.untoggleModal(modal);
     169                                        // fixme this should not be necessary but some other event is interrupting the scrolling
     170                                        setTimeout(() => {
     171                                                if (!target.hash) {
     172                                                        // scroll to top
     173                                                        document.body.scrollIntoView();
     174                                                } else {
     175                                                        let anchorElement = document.getElementById(target.hash.slice(1));
     176                                                        if (anchorElement) {
     177                                                                anchorElement.scrollIntoView();
     178                                                        }
     179                                                }
     180                                        }, 550);
     181                                }
     182                        }
     183                }.bind(this));
     184        },
     185
    158186        // Hide and show modals before and after their animations have played out.
    159187        hideAndShowModals: function() {
    160188                var _doc = document,
    161                         _win = window,
    162                         modals = _doc.querySelectorAll( '.cover-modal' ),
    163                         htmlStyle = _doc.documentElement.style,
    164                         adminBar = _doc.querySelector( '#wpadminbar' );
    165 
    166                 function getAdminBarHeight( negativeValue ) {
    167                         var height,
    168                                 currentScroll = _win.pageYOffset;
    169 
    170                         if ( adminBar ) {
    171                                 height = currentScroll + adminBar.getBoundingClientRect().height;
    172 
    173                                 return negativeValue ? -height : height;
    174                         }
    175 
    176                         return currentScroll === 0 ? 0 : -currentScroll;
    177                 }
    178 
    179                 function htmlStyles() {
    180                         var overflow = _win.innerHeight > _doc.documentElement.getBoundingClientRect().height;
    181 
    182                         return {
    183                                 'overflow-y': overflow ? 'hidden' : 'scroll',
    184                                 position: 'fixed',
    185                                 width: '100%',
    186                                 top: getAdminBarHeight( true ) + 'px',
    187                                 left: 0
    188                         };
    189                 }
     189                        modals = _doc.querySelectorAll( '.cover-modal' );
    190190
    191191                // Show the modal.
    192192                modals.forEach( function( modal ) {
    193193                        modal.addEventListener( 'toggle-target-before-inactive', function( event ) {
    194                                 var styles = htmlStyles(),
    195                                         offsetY = _win.pageYOffset,
    196                                         paddingTop = ( Math.abs( getAdminBarHeight() ) - offsetY ) + 'px',
    197                                         mQuery = _win.matchMedia( '(max-width: 600px)' );
    198 
    199                                 if ( event.target !== modal ) {
    200                                         return;
    201                                 }
    202 
    203                                 Object.keys( styles ).forEach( function( styleKey ) {
    204                                         htmlStyle.setProperty( styleKey, styles[ styleKey ] );
    205                                 } );
    206 
    207                                 _win.twentytwenty.scrolled = parseInt( styles.top, 10 );
    208 
    209                                 if ( adminBar ) {
    210                                         _doc.body.style.setProperty( 'padding-top', paddingTop );
    211 
    212                                         if ( mQuery.matches ) {
    213                                                 if ( offsetY >= getAdminBarHeight() ) {
    214                                                         modal.style.setProperty( 'top', 0 );
    215                                                 } else {
    216                                                         modal.style.setProperty( 'top', ( getAdminBarHeight() - offsetY ) + 'px' );
    217                                                 }
    218                                         }
     194                                if (event.target === modal) {
     195                                        modal.classList.add('show-modal');
    219196                                }
    220 
    221                                 modal.classList.add( 'show-modal' );
    222197                        } );
    223198
    224199                        // Hide the modal after a delay, so animations have time to play out.
     
    232207
    233208                                        modal.classList.remove( 'show-modal' );
    234209
    235                                         Object.keys( htmlStyles() ).forEach( function( styleKey ) {
    236                                                 htmlStyle.removeProperty( styleKey );
    237                                         } );
    238 
    239                                         if ( adminBar ) {
    240                                                 _doc.body.style.removeProperty( 'padding-top' );
    241                                                 modal.style.removeProperty( 'top' );
    242                                         }
    243 
    244210                                        if ( clickedEl !== false ) {
    245211                                                clickedEl.focus();
    246212                                                clickedEl = false;
    247213                                        }
    248 
    249                                         _win.scrollTo( 0, Math.abs( _win.twentytwenty.scrolled + getAdminBarHeight() ) );
    250 
    251                                         _win.twentytwenty.scrolled = 0;
    252214                                }, 500 );
    253215                        } );
    254216                } );