[Summary view] [Print] [Text view]

   1  ( function() {
   2      var bpBackCompatAdminTabs = function() {
   3          var wrap = document.querySelector( '.nav-tab-wrapper' ).closest( '.wrap' );
   4  
   5          if ( wrap ) {
   6              // 1. Add the tabbed class to the body tag.
   7              document.body.classList.add( 'bp-is-tabbed-screen' );
   8  
   9              // 2. Make the wrapping div the BuddyPress body.
  10              wrap.classList.add( 'buddypress-body' );
  11              wrap.classList.remove( 'wrap' );
  12  
  13              // 3. Create the BuddyPress header.
  14              var buddypressHeader = document.createElement( 'div' );
  15              buddypressHeader.classList.add( 'buddypress-header' );
  16  
  17              var headings = wrap.querySelectorAll( 'h1' );
  18              var buddypressTitleSection = document.createElement( 'div' );
  19              buddypressTitleSection.classList.add( 'buddypress-title-section' );
  20  
  21              // 4. Move the document title in it.
  22              if ( headings && headings[0] ) {
  23                  var buddyPressLogo = document.createElement( 'span' );
  24                  buddyPressLogo.classList.add( 'bp-badge' );
  25                  headings[0].innerHTML = ' ' + headings[0].innerHTML;
  26                  headings[0].prepend( buddyPressLogo );
  27                  buddypressTitleSection.appendChild( headings[0] );
  28              }
  29  
  30              buddypressHeader.appendChild( buddypressTitleSection );
  31  
  32              // 5. Move the tabs in it.
  33              var headerNavTabs = document.createElement( 'nav' );
  34              headerNavTabs.classList.add( 'buddypress-tabs-wrapper' );
  35  
  36              var bpAdminTabs = document.querySelectorAll( '.buddypress-nav-tab' );
  37              var columns = [];
  38              bpAdminTabs.forEach( function( tabItem ) {
  39                  headerNavTabs.appendChild( tabItem );
  40                  columns.push( '1fr' );
  41              } );
  42  
  43              // 6. Add the header's nav tabs into the header.
  44              buddypressHeader.appendChild( headerNavTabs );
  45  
  46              // 7. Edit the number of grid columns.
  47              if ( columns.length > 0 ) {
  48                  headerNavTabs.setAttribute( 'style', '-ms-grid-columns: ' + columns.join( ' ' ) + '; grid-template-columns: ' + columns.join( ' ' ) + ';');
  49              }
  50  
  51              // 8. Create the header's separator.
  52              var headerSeparator = document.createElement( 'hr' );
  53              headerSeparator.classList.add( 'wp-header-end' );
  54  
  55              // 9. Insert the BuddyPress header into the document.
  56              document.querySelector('#wpbody-content').insertBefore( buddypressHeader, wrap );
  57              document.querySelector('#wpbody-content').insertBefore( headerSeparator, wrap );
  58          }
  59      };
  60  
  61      if ( 'loading' === document.readyState ) {
  62          document.addEventListener( 'DOMContentLoaded', bpBackCompatAdminTabs );
  63      } else {
  64          bpBackCompatAdminTabs;
  65      }
  66  } )();