[Summary view] [Print] [Text view]

   1  /*    -----------------------------------------------------------------------------------------------
   2      Namespace
   3  --------------------------------------------------------------------------------------------------- */
   4  
   5  var twentytwenty = twentytwenty || {};
   6  
   7  // Set a default value for scrolled.
   8  twentytwenty.scrolled = 0;
   9  
  10  // polyfill closest
  11  // https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
  12  if ( ! Element.prototype.closest ) {
  13      Element.prototype.closest = function( s ) {
  14          var el = this;
  15  
  16          do {
  17              if ( el.matches( s ) ) {
  18                  return el;
  19              }
  20  
  21              el = el.parentElement || el.parentNode;
  22          } while ( el !== null && el.nodeType === 1 );
  23  
  24          return null;
  25      };
  26  }
  27  
  28  // polyfill forEach
  29  // https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach#Polyfill
  30  if ( window.NodeList && ! NodeList.prototype.forEach ) {
  31      NodeList.prototype.forEach = function( callback, thisArg ) {
  32          var i;
  33          var len = this.length;
  34  
  35          thisArg = thisArg || window;
  36  
  37          for ( i = 0; i < len; i++ ) {
  38              callback.call( thisArg, this[ i ], i, this );
  39          }
  40      };
  41  }
  42  
  43  // event "polyfill"
  44  twentytwenty.createEvent = function( eventName ) {
  45      var event;
  46      if ( typeof window.Event === 'function' ) {
  47          event = new Event( eventName );
  48      } else {
  49          event = document.createEvent( 'Event' );
  50          event.initEvent( eventName, true, false );
  51      }
  52      return event;
  53  };
  54  
  55  // matches "polyfill"
  56  // https://developer.mozilla.org/es/docs/Web/API/Element/matches
  57  if ( ! Element.prototype.matches ) {
  58      Element.prototype.matches =
  59          Element.prototype.matchesSelector ||
  60          Element.prototype.mozMatchesSelector ||
  61          Element.prototype.msMatchesSelector ||
  62          Element.prototype.oMatchesSelector ||
  63          Element.prototype.webkitMatchesSelector ||
  64          function( s ) {
  65              var matches = ( this.document || this.ownerDocument ).querySelectorAll( s ),
  66                  i = matches.length;
  67              while ( --i >= 0 && matches.item( i ) !== this ) {}
  68              return i > -1;
  69          };
  70  }
  71  
  72  // Add a class to the body for when touch is enabled for browsers that don't support media queries
  73  // for interaction media features. Adapted from <https://codepen.io/Ferie/pen/vQOMmO>.
  74  twentytwenty.touchEnabled = {
  75  
  76      init: function() {
  77          var matchMedia = function() {
  78              // Include the 'heartz' as a way to have a non-matching MQ to help terminate the join. See <https://git.io/vznFH>.
  79              var prefixes = [ '-webkit-', '-moz-', '-o-', '-ms-' ];
  80              var query = [ '(', prefixes.join( 'touch-enabled),(' ), 'heartz', ')' ].join( '' );
  81              return window.matchMedia && window.matchMedia( query ).matches;
  82          };
  83  
  84          if ( ( 'ontouchstart' in window ) || ( window.DocumentTouch && document instanceof window.DocumentTouch ) || matchMedia() ) {
  85              document.body.classList.add( 'touch-enabled' );
  86          }
  87      }
  88  }; // twentytwenty.touchEnabled
  89  
  90  /*    -----------------------------------------------------------------------------------------------
  91      Cover Modals
  92  --------------------------------------------------------------------------------------------------- */
  93  
  94  twentytwenty.coverModals = {
  95  
  96      init: function() {
  97          if ( document.querySelector( '.cover-modal' ) ) {
  98              // Handle cover modals when they're toggled.
  99              this.onToggle();
 100  
 101              // When toggled, untoggle if visitor clicks on the wrapping element of the modal.
 102              this.outsideUntoggle();
 103  
 104              // Close on escape key press.
 105              this.closeOnEscape();
 106  
 107              // Hide and show modals before and after their animations have played out.
 108              this.hideAndShowModals();
 109          }
 110      },
 111  
 112      // Handle cover modals when they're toggled.
 113      onToggle: function() {
 114          document.querySelectorAll( '.cover-modal' ).forEach( function( element ) {
 115              element.addEventListener( 'toggled', function( event ) {
 116                  var modal = event.target,
 117                      body = document.body;
 118  
 119                  if ( modal.classList.contains( 'active' ) ) {
 120                      body.classList.add( 'showing-modal' );
 121                  } else {
 122                      body.classList.remove( 'showing-modal' );
 123                      body.classList.add( 'hiding-modal' );
 124  
 125                      // Remove the hiding class after a delay, when animations have been run.
 126                      setTimeout( function() {
 127                          body.classList.remove( 'hiding-modal' );
 128                      }, 500 );
 129                  }
 130              } );
 131          } );
 132      },
 133  
 134      // Close modal on outside click.
 135      outsideUntoggle: function() {
 136          document.addEventListener( 'click', function( event ) {
 137              var target = event.target;
 138              var modal = document.querySelector( '.cover-modal.active' );
 139  
 140              // if target onclick is <a> with # within the href attribute
 141              if ( event.target.tagName.toLowerCase() === 'a' && event.target.hash.includes( '#' ) && modal !== null ) {
 142                  // untoggle the modal
 143                  this.untoggleModal( modal );
 144                  // wait 550 and scroll to the anchor
 145                  setTimeout( function() {
 146                      var anchor = document.getElementById( event.target.hash.slice( 1 ) );
 147                      anchor.scrollIntoView();
 148                  }, 550 );
 149              }
 150  
 151              if ( target === modal ) {
 152                  this.untoggleModal( target );
 153              }
 154          }.bind( this ) );
 155      },
 156  
 157      // Close modal on escape key press.
 158      closeOnEscape: function() {
 159          document.addEventListener( 'keydown', function( event ) {
 160              if ( event.keyCode === 27 ) {
 161                  event.preventDefault();
 162                  document.querySelectorAll( '.cover-modal.active' ).forEach( function( element ) {
 163                      this.untoggleModal( element );
 164                  }.bind( this ) );
 165              }
 166          }.bind( this ) );
 167      },
 168  
 169      // Hide and show modals before and after their animations have played out.
 170      hideAndShowModals: function() {
 171          var _doc = document,
 172              _win = window,
 173              modals = _doc.querySelectorAll( '.cover-modal' ),
 174              htmlStyle = _doc.documentElement.style,
 175              adminBar = _doc.querySelector( '#wpadminbar' );
 176  
 177  		function getAdminBarHeight( negativeValue ) {
 178              var height,
 179                  currentScroll = _win.pageYOffset;
 180  
 181              if ( adminBar ) {
 182                  height = currentScroll + adminBar.getBoundingClientRect().height;
 183  
 184                  return negativeValue ? -height : height;
 185              }
 186  
 187              return currentScroll === 0 ? 0 : -currentScroll;
 188          }
 189  
 190  		function htmlStyles() {
 191              var overflow = _win.innerHeight > _doc.documentElement.getBoundingClientRect().height;
 192  
 193              return {
 194                  'overflow-y': overflow ? 'hidden' : 'scroll',
 195                  position: 'fixed',
 196                  width: '100%',
 197                  top: getAdminBarHeight( true ) + 'px',
 198                  left: 0
 199              };
 200          }
 201  
 202          // Show the modal.
 203          modals.forEach( function( modal ) {
 204              modal.addEventListener( 'toggle-target-before-inactive', function( event ) {
 205                  var styles = htmlStyles(),
 206                      offsetY = _win.pageYOffset,
 207                      paddingTop = ( Math.abs( getAdminBarHeight() ) - offsetY ) + 'px',
 208                      mQuery = _win.matchMedia( '(max-width: 600px)' );
 209  
 210                  if ( event.target !== modal ) {
 211                      return;
 212                  }
 213  
 214                  Object.keys( styles ).forEach( function( styleKey ) {
 215                      htmlStyle.setProperty( styleKey, styles[ styleKey ] );
 216                  } );
 217  
 218                  _win.twentytwenty.scrolled = parseInt( styles.top, 10 );
 219  
 220                  if ( adminBar ) {
 221                      _doc.body.style.setProperty( 'padding-top', paddingTop );
 222  
 223                      if ( mQuery.matches ) {
 224                          if ( offsetY >= getAdminBarHeight() ) {
 225                              modal.style.setProperty( 'top', 0 );
 226                          } else {
 227                              modal.style.setProperty( 'top', ( getAdminBarHeight() - offsetY ) + 'px' );
 228                          }
 229                      }
 230                  }
 231  
 232                  modal.classList.add( 'show-modal' );
 233              } );
 234  
 235              // Hide the modal after a delay, so animations have time to play out.
 236              modal.addEventListener( 'toggle-target-after-inactive', function( event ) {
 237                  if ( event.target !== modal ) {
 238                      return;
 239                  }
 240  
 241                  setTimeout( function() {
 242                      var clickedEl = twentytwenty.toggles.clickedEl;
 243  
 244                      modal.classList.remove( 'show-modal' );
 245  
 246                      Object.keys( htmlStyles() ).forEach( function( styleKey ) {
 247                          htmlStyle.removeProperty( styleKey );
 248                      } );
 249  
 250                      if ( adminBar ) {
 251                          _doc.body.style.removeProperty( 'padding-top' );
 252                          modal.style.removeProperty( 'top' );
 253                      }
 254  
 255                      if ( clickedEl !== false ) {
 256                          clickedEl.focus();
 257                          clickedEl = false;
 258                      }
 259  
 260                      _win.scrollTo( 0, Math.abs( _win.twentytwenty.scrolled + getAdminBarHeight() ) );
 261  
 262                      _win.twentytwenty.scrolled = 0;
 263                  }, 500 );
 264              } );
 265          } );
 266      },
 267  
 268      // Untoggle a modal.
 269      untoggleModal: function( modal ) {
 270          var modalTargetClass,
 271              modalToggle = false;
 272  
 273          // If the modal has specified the string (ID or class) used by toggles to target it, untoggle the toggles with that target string.
 274          // The modal-target-string must match the string toggles use to target the modal.
 275          if ( modal.dataset.modalTargetString ) {
 276              modalTargetClass = modal.dataset.modalTargetString;
 277  
 278              modalToggle = document.querySelector( '*[data-toggle-target="' + modalTargetClass + '"]' );
 279          }
 280  
 281          // If a modal toggle exists, trigger it so all of the toggle options are included.
 282          if ( modalToggle ) {
 283              modalToggle.click();
 284  
 285              // If one doesn't exist, just hide the modal.
 286          } else {
 287              modal.classList.remove( 'active' );
 288          }
 289      }
 290  
 291  }; // twentytwenty.coverModals
 292  
 293  /*    -----------------------------------------------------------------------------------------------
 294      Intrinsic Ratio Embeds
 295  --------------------------------------------------------------------------------------------------- */
 296  
 297  twentytwenty.intrinsicRatioVideos = {
 298  
 299      init: function() {
 300          this.makeFit();
 301  
 302          window.addEventListener( 'resize', function() {
 303              this.makeFit();
 304          }.bind( this ) );
 305      },
 306  
 307      makeFit: function() {
 308          document.querySelectorAll( 'iframe, object, video' ).forEach( function( video ) {
 309              var ratio, iTargetWidth,
 310                  container = video.parentNode;
 311  
 312              // Skip videos we want to ignore.
 313              if ( video.classList.contains( 'intrinsic-ignore' ) || video.parentNode.classList.contains( 'intrinsic-ignore' ) ) {
 314                  return true;
 315              }
 316  
 317              if ( ! video.dataset.origwidth ) {
 318                  // Get the video element proportions.
 319                  video.setAttribute( 'data-origwidth', video.width );
 320                  video.setAttribute( 'data-origheight', video.height );
 321              }
 322  
 323              iTargetWidth = container.offsetWidth;
 324  
 325              // Get ratio from proportions.
 326              ratio = iTargetWidth / video.dataset.origwidth;
 327  
 328              // Scale based on ratio, thus retaining proportions.
 329              video.style.width = iTargetWidth + 'px';
 330              video.style.height = ( video.dataset.origheight * ratio ) + 'px';
 331          } );
 332      }
 333  
 334  }; // twentytwenty.intrinsicRatioVideos
 335  
 336  /*    -----------------------------------------------------------------------------------------------
 337      Modal Menu
 338  --------------------------------------------------------------------------------------------------- */
 339  twentytwenty.modalMenu = {
 340  
 341      init: function() {
 342          // If the current menu item is in a sub level, expand all the levels higher up on load.
 343          this.expandLevel();
 344          this.keepFocusInModal();
 345      },
 346  
 347      expandLevel: function() {
 348          var modalMenus = document.querySelectorAll( '.modal-menu' );
 349  
 350          modalMenus.forEach( function( modalMenu ) {
 351              var activeMenuItem = modalMenu.querySelector( '.current-menu-item' );
 352  
 353              if ( activeMenuItem ) {
 354                  twentytwentyFindParents( activeMenuItem, 'li' ).forEach( function( element ) {
 355                      var subMenuToggle = element.querySelector( '.sub-menu-toggle' );
 356                      if ( subMenuToggle ) {
 357                          twentytwenty.toggles.performToggle( subMenuToggle, true );
 358                      }
 359                  } );
 360              }
 361          } );
 362      },
 363  
 364      keepFocusInModal: function() {
 365          var _doc = document;
 366  
 367          _doc.addEventListener( 'keydown', function( event ) {
 368              var toggleTarget, modal, selectors, elements, menuType, bottomMenu, activeEl, lastEl, firstEl, tabKey, shiftKey,
 369                  clickedEl = twentytwenty.toggles.clickedEl;
 370  
 371              if ( clickedEl && _doc.body.classList.contains( 'showing-modal' ) ) {
 372                  toggleTarget = clickedEl.dataset.toggleTarget;
 373                  selectors = 'input, a, button';
 374                  modal = _doc.querySelector( toggleTarget );
 375  
 376                  elements = modal.querySelectorAll( selectors );
 377                  elements = Array.prototype.slice.call( elements );
 378  
 379                  if ( '.menu-modal' === toggleTarget ) {
 380                      menuType = window.matchMedia( '(min-width: 1000px)' ).matches;
 381                      menuType = menuType ? '.expanded-menu' : '.mobile-menu';
 382  
 383                      elements = elements.filter( function( element ) {
 384                          return null !== element.closest( menuType ) && null !== element.offsetParent;
 385                      } );
 386  
 387                      elements.unshift( _doc.querySelector( '.close-nav-toggle' ) );
 388  
 389                      bottomMenu = _doc.querySelector( '.menu-bottom > nav' );
 390  
 391                      if ( bottomMenu ) {
 392                          bottomMenu.querySelectorAll( selectors ).forEach( function( element ) {
 393                              elements.push( element );
 394                          } );
 395                      }
 396                  }
 397  
 398                  lastEl = elements[ elements.length - 1 ];
 399                  firstEl = elements[0];
 400                  activeEl = _doc.activeElement;
 401                  tabKey = event.keyCode === 9;
 402                  shiftKey = event.shiftKey;
 403  
 404                  if ( ! shiftKey && tabKey && lastEl === activeEl ) {
 405                      event.preventDefault();
 406                      firstEl.focus();
 407                  }
 408  
 409                  if ( shiftKey && tabKey && firstEl === activeEl ) {
 410                      event.preventDefault();
 411                      lastEl.focus();
 412                  }
 413              }
 414          } );
 415      }
 416  }; // twentytwenty.modalMenu
 417  
 418  /*    -----------------------------------------------------------------------------------------------
 419      Primary Menu
 420  --------------------------------------------------------------------------------------------------- */
 421  
 422  twentytwenty.primaryMenu = {
 423  
 424      init: function() {
 425          this.focusMenuWithChildren();
 426      },
 427  
 428      // The focusMenuWithChildren() function implements Keyboard Navigation in the Primary Menu
 429      // by adding the '.focus' class to all 'li.menu-item-has-children' when the focus is on the 'a' element.
 430      focusMenuWithChildren: function() {
 431          // Get all the link elements within the primary menu.
 432          var links, i, len,
 433              menu = document.querySelector( '.primary-menu-wrapper' );
 434  
 435          if ( ! menu ) {
 436              return false;
 437          }
 438  
 439          links = menu.getElementsByTagName( 'a' );
 440  
 441          // Each time a menu link is focused, update focus.
 442          for ( i = 0, len = links.length; i < len; i++ ) {
 443              links[i].addEventListener( 'focus', updateFocus, true );
 444          }
 445  
 446          menu.addEventListener( 'focusout', removeFocus, true );
 447  
 448          // Remove focus classes from menu.
 449  		function removeFocus(e){
 450              const leavingMenu = ! menu.contains( e.relatedTarget );
 451  
 452              if ( leavingMenu ) {
 453                  // Remove focus from all li elements of primary-menu.
 454                  menu.querySelectorAll( 'li' ).forEach( function( el ) {
 455                      if ( el.classList.contains( 'focus' ) ) {
 456                          el.classList.remove( 'focus', 'closed' );
 457                      }
 458                  });
 459              }
 460          }
 461  
 462          // Update focus class on an element.
 463  		function updateFocus() {
 464              var self = this;
 465  
 466              // Remove focus from all li elements of primary-menu.
 467              menu.querySelectorAll( 'li' ).forEach( function( el ){
 468                  if ( el.classList.contains( 'closed' ) ) {
 469                      el.classList.remove( 'closed' );
 470                  }
 471                  if ( el.classList.contains( 'focus' ) ) {
 472                      el.classList.remove( 'focus' );
 473                  }
 474              });
 475              
 476              // Set focus on current `a` element's parent `li`.
 477              self.parentElement.classList.add( 'focus' );
 478              // If current element is inside sub-menu find main parent li and add focus.
 479              if ( self.closest( '.menu-item-has-children' ) ) {
 480                  twentytwentyFindParents( self, 'li.menu-item-has-children' ).forEach( function( element ) {
 481                      element.classList.add( 'focus' );
 482                  });
 483              }
 484          }
 485  
 486          // When the `esc` key is pressed while in menu, move focus up one level.
 487          menu.addEventListener( 'keydown', removeFocusEsc, true );
 488  
 489          // Remove focus when `esc` key pressed.
 490  		function removeFocusEsc( e ) {
 491              e = e || window.event;
 492              var isEscape = false,
 493                  focusedElement = e.target;
 494  
 495              // Find if pressed key is `esc`.
 496              if ( 'key' in e ) {
 497                  isEscape = ( e.key === 'Escape' || e.key === 'Esc' );
 498              } else {
 499                  isEscape = ( e.keyCode === 27 );
 500              }
 501  
 502              // If pressed key is esc, remove focus class from parent menu li.
 503              if ( isEscape ) {
 504                  var parentLi = focusedElement.closest( 'li' ),
 505                      nestedParent = closestExcludingSelf( parentLi, 'li.menu-item-has-children' ),
 506                      focusPosition = nestedParent ? nestedParent.querySelector('a') : false;
 507  
 508                      if ( null !== nestedParent ) {
 509                          nestedParent.classList.add( 'focus' );
 510                          focusPosition.focus();
 511                      } else {
 512                          parentLi.classList.remove( 'focus' );
 513                          parentLi.classList.add( 'closed' );
 514                      }
 515              }
 516          }
 517  
 518  		function closestExcludingSelf(element, selector) {
 519              if ( ! element || ! selector ) {
 520                  return null;
 521              }
 522              const parent = element.parentElement;
 523  
 524              return parent ? parent.closest(selector) : null;
 525          }
 526      }
 527  }; // twentytwenty.primaryMenu
 528  
 529  /*    -----------------------------------------------------------------------------------------------
 530      Toggles
 531  --------------------------------------------------------------------------------------------------- */
 532  
 533  twentytwenty.toggles = {
 534  
 535      clickedEl: false,
 536  
 537      init: function() {
 538          // Do the toggle.
 539          this.toggle();
 540  
 541          // Check for toggle/untoggle on resize.
 542          this.resizeCheck();
 543  
 544          // Check for untoggle on escape key press.
 545          this.untoggleOnEscapeKeyPress();
 546      },
 547  
 548      performToggle: function( element, instantly ) {
 549          var target, timeOutTime, classToToggle,
 550              self = this,
 551              _doc = document,
 552              // Get our targets.
 553              toggle = element,
 554              targetString = toggle.dataset.toggleTarget,
 555              activeClass = 'active';
 556  
 557          // Elements to focus after modals are closed.
 558          if ( ! _doc.querySelectorAll( '.show-modal' ).length ) {
 559              self.clickedEl = _doc.activeElement;
 560          }
 561  
 562          if ( targetString === 'next' ) {
 563              target = toggle.nextSibling;
 564          } else {
 565              target = _doc.querySelector( targetString );
 566          }
 567  
 568          // Trigger events on the toggle targets before they are toggled.
 569          if ( target.classList.contains( activeClass ) ) {
 570              target.dispatchEvent( twentytwenty.createEvent( 'toggle-target-before-active' ) );
 571          } else {
 572              target.dispatchEvent( twentytwenty.createEvent( 'toggle-target-before-inactive' ) );
 573          }
 574  
 575          // Get the class to toggle, if specified.
 576          classToToggle = toggle.dataset.classToToggle ? toggle.dataset.classToToggle : activeClass;
 577  
 578          // For cover modals, set a short timeout duration so the class animations have time to play out.
 579          timeOutTime = 0;
 580  
 581          if ( target.classList.contains( 'cover-modal' ) ) {
 582              timeOutTime = 10;
 583          }
 584  
 585          setTimeout( function() {
 586              var focusElement,
 587                  subMenued = target.classList.contains( 'sub-menu' ),
 588                  newTarget = subMenued ? toggle.closest( '.menu-item' ).querySelector( '.sub-menu' ) : target,
 589                  duration = toggle.dataset.toggleDuration;
 590  
 591              // Toggle the target of the clicked toggle.
 592              if ( toggle.dataset.toggleType === 'slidetoggle' && ! instantly && duration !== '0' ) {
 593                  twentytwentyMenuToggle( newTarget, duration );
 594              } else {
 595                  newTarget.classList.toggle( classToToggle );
 596              }
 597  
 598              // If the toggle target is 'next', only give the clicked toggle the active class.
 599              if ( targetString === 'next' ) {
 600                  toggle.classList.toggle( activeClass );
 601              } else if ( target.classList.contains( 'sub-menu' ) ) {
 602                  toggle.classList.toggle( activeClass );
 603              } else {
 604                  // If not, toggle all toggles with this toggle target.
 605                  _doc.querySelector( '*[data-toggle-target="' + targetString + '"]' ).classList.toggle( activeClass );
 606              }
 607  
 608              // Toggle aria-expanded on the toggle.
 609              twentytwentyToggleAttribute( toggle, 'aria-expanded', 'true', 'false' );
 610  
 611              if ( self.clickedEl && -1 !== toggle.getAttribute( 'class' ).indexOf( 'close-' ) ) {
 612                  twentytwentyToggleAttribute( self.clickedEl, 'aria-expanded', 'true', 'false' );
 613              }
 614  
 615              // Toggle body class.
 616              if ( toggle.dataset.toggleBodyClass ) {
 617                  _doc.body.classList.toggle( toggle.dataset.toggleBodyClass );
 618              }
 619  
 620              // Check whether to set focus.
 621              if ( toggle.dataset.setFocus ) {
 622                  focusElement = _doc.querySelector( toggle.dataset.setFocus );
 623  
 624                  if ( focusElement ) {
 625                      if ( target.classList.contains( activeClass ) ) {
 626                          focusElement.focus();
 627                      } else {
 628                          focusElement.blur();
 629                      }
 630                  }
 631              }
 632  
 633              // Trigger the toggled event on the toggle target.
 634              target.dispatchEvent( twentytwenty.createEvent( 'toggled' ) );
 635  
 636              // Trigger events on the toggle targets after they are toggled.
 637              if ( target.classList.contains( activeClass ) ) {
 638                  target.dispatchEvent( twentytwenty.createEvent( 'toggle-target-after-active' ) );
 639              } else {
 640                  target.dispatchEvent( twentytwenty.createEvent( 'toggle-target-after-inactive' ) );
 641              }
 642          }, timeOutTime );
 643      },
 644  
 645      // Do the toggle.
 646      toggle: function() {
 647          var self = this;
 648  
 649          document.querySelectorAll( '*[data-toggle-target]' ).forEach( function( element ) {
 650              element.addEventListener( 'click', function( event ) {
 651                  event.preventDefault();
 652                  self.performToggle( element );
 653              } );
 654          } );
 655      },
 656  
 657      // Check for toggle/untoggle on screen resize.
 658      resizeCheck: function() {
 659          if ( document.querySelectorAll( '*[data-untoggle-above], *[data-untoggle-below], *[data-toggle-above], *[data-toggle-below]' ).length ) {
 660              window.addEventListener( 'resize', function() {
 661                  var winWidth = window.innerWidth,
 662                      toggles = document.querySelectorAll( '.toggle' );
 663  
 664                  toggles.forEach( function( toggle ) {
 665                      var unToggleAbove = toggle.dataset.untoggleAbove,
 666                          unToggleBelow = toggle.dataset.untoggleBelow,
 667                          toggleAbove = toggle.dataset.toggleAbove,
 668                          toggleBelow = toggle.dataset.toggleBelow;
 669  
 670                      // If no width comparison is set, continue.
 671                      if ( ! unToggleAbove && ! unToggleBelow && ! toggleAbove && ! toggleBelow ) {
 672                          return;
 673                      }
 674  
 675                      // If the toggle width comparison is true, toggle the toggle.
 676                      if (
 677                          ( ( ( unToggleAbove && winWidth > unToggleAbove ) ||
 678                              ( unToggleBelow && winWidth < unToggleBelow ) ) &&
 679                              toggle.classList.contains( 'active' ) ) ||
 680                          ( ( ( toggleAbove && winWidth > toggleAbove ) ||
 681                              ( toggleBelow && winWidth < toggleBelow ) ) &&
 682                              ! toggle.classList.contains( 'active' ) )
 683                      ) {
 684                          toggle.click();
 685                      }
 686                  } );
 687              } );
 688          }
 689      },
 690  
 691      // Close toggle on escape key press.
 692      untoggleOnEscapeKeyPress: function() {
 693          document.addEventListener( 'keyup', function( event ) {
 694              if ( event.key === 'Escape' ) {
 695                  document.querySelectorAll( '*[data-untoggle-on-escape].active' ).forEach( function( element ) {
 696                      if ( element.classList.contains( 'active' ) ) {
 697                          element.click();
 698                      }
 699                  } );
 700              }
 701          } );
 702      }
 703  
 704  }; // twentytwenty.toggles
 705  
 706  /**
 707   * Is the DOM ready?
 708   *
 709   * This implementation is coming from https://gomakethings.com/a-native-javascript-equivalent-of-jquerys-ready-method/
 710   *
 711   * @since Twenty Twenty 1.0
 712   *
 713   * @param {Function} fn Callback function to run.
 714   */
 715  function twentytwentyDomReady( fn ) {
 716      if ( typeof fn !== 'function' ) {
 717          return;
 718      }
 719  
 720      if ( document.readyState === 'interactive' || document.readyState === 'complete' ) {
 721          return fn();
 722      }
 723  
 724      document.addEventListener( 'DOMContentLoaded', fn, false );
 725  }
 726  
 727  twentytwentyDomReady( function() {
 728      twentytwenty.toggles.init();              // Handle toggles.
 729      twentytwenty.coverModals.init();          // Handle cover modals.
 730      twentytwenty.intrinsicRatioVideos.init(); // Retain aspect ratio of videos on window resize.
 731      twentytwenty.modalMenu.init();            // Modal Menu.
 732      twentytwenty.primaryMenu.init();          // Primary Menu.
 733      twentytwenty.touchEnabled.init();         // Add class to body if device is touch-enabled.
 734  } );
 735  
 736  /*    -----------------------------------------------------------------------------------------------
 737      Helper functions
 738  --------------------------------------------------------------------------------------------------- */
 739  
 740  /* Toggle an attribute ----------------------- */
 741  
 742  function twentytwentyToggleAttribute( element, attribute, trueVal, falseVal ) {
 743      var toggles;
 744  
 745      if ( ! element.hasAttribute( attribute ) ) {
 746          return;
 747      }
 748  
 749      if ( trueVal === undefined ) {
 750          trueVal = true;
 751      }
 752      if ( falseVal === undefined ) {
 753          falseVal = false;
 754      }
 755  
 756      /*
 757       * Take into account multiple toggle elements that need their state to be
 758       * synced. For example: the Search toggle buttons for desktop and mobile.
 759       */
 760      toggles = document.querySelectorAll( '[data-toggle-target="' + element.dataset.toggleTarget + '"]' );
 761  
 762      toggles.forEach( function( toggle ) {
 763          if ( ! toggle.hasAttribute( attribute ) ) {
 764              return;
 765          }
 766  
 767          if ( toggle.getAttribute( attribute ) !== trueVal ) {
 768              toggle.setAttribute( attribute, trueVal );
 769          } else {
 770              toggle.setAttribute( attribute, falseVal );
 771          }
 772      } );
 773  }
 774  
 775  /**
 776   * Toggle a menu item on or off.
 777   *
 778   * @since Twenty Twenty 1.0
 779   *
 780   * @param {HTMLElement} target
 781   * @param {number} duration
 782   */
 783  function twentytwentyMenuToggle( target, duration ) {
 784      var initialParentHeight, finalParentHeight, menu, menuItems, transitionListener,
 785          initialPositions = [],
 786          finalPositions = [];
 787  
 788      if ( ! target ) {
 789          return;
 790      }
 791  
 792      menu = target.closest( '.menu-wrapper' );
 793  
 794      // Step 1: look at the initial positions of every menu item.
 795      menuItems = menu.querySelectorAll( '.menu-item' );
 796  
 797      menuItems.forEach( function( menuItem, index ) {
 798          initialPositions[ index ] = { x: menuItem.offsetLeft, y: menuItem.offsetTop };
 799      } );
 800      initialParentHeight = target.parentElement.offsetHeight;
 801  
 802      target.classList.add( 'toggling-target' );
 803  
 804      // Step 2: toggle target menu item and look at the final positions of every menu item.
 805      target.classList.toggle( 'active' );
 806  
 807      menuItems.forEach( function( menuItem, index ) {
 808          finalPositions[ index ] = { x: menuItem.offsetLeft, y: menuItem.offsetTop };
 809      } );
 810      finalParentHeight = target.parentElement.offsetHeight;
 811  
 812      // Step 3: close target menu item again.
 813      // The whole process happens without giving the browser a chance to render, so it's invisible.
 814      target.classList.toggle( 'active' );
 815  
 816      /*
 817       * Step 4: prepare animation.
 818       * Position all the items with absolute offsets, at the same starting position.
 819       * Shouldn't result in any visual changes if done right.
 820       */
 821      menu.classList.add( 'is-toggling' );
 822      target.classList.toggle( 'active' );
 823      menuItems.forEach( function( menuItem, index ) {
 824          var initialPosition = initialPositions[ index ];
 825          if ( initialPosition.y === 0 && menuItem.parentElement === target ) {
 826              initialPosition.y = initialParentHeight;
 827          }
 828          menuItem.style.transform = 'translate(' + initialPosition.x + 'px, ' + initialPosition.y + 'px)';
 829      } );
 830  
 831      /*
 832       * The double rAF is unfortunately needed, since we're toggling CSS classes, and
 833       * the only way to ensure layout completion here across browsers is to wait twice.
 834       * This just delays the start of the animation by 2 frames and is thus not an issue.
 835       */
 836      requestAnimationFrame( function() {
 837          requestAnimationFrame( function() {
 838              /*
 839               * Step 5: start animation by moving everything to final position.
 840               * All the layout work has already happened, while we were preparing for the animation.
 841               * The animation now runs entirely in CSS, using cheap CSS properties (opacity and transform)
 842               * that don't trigger the layout or paint stages.
 843               */
 844              menu.classList.add( 'is-animating' );
 845              menuItems.forEach( function( menuItem, index ) {
 846                  var finalPosition = finalPositions[ index ];
 847                  if ( finalPosition.y === 0 && menuItem.parentElement === target ) {
 848                      finalPosition.y = finalParentHeight;
 849                  }
 850                  if ( duration !== undefined ) {
 851                      menuItem.style.transitionDuration = duration + 'ms';
 852                  }
 853                  menuItem.style.transform = 'translate(' + finalPosition.x + 'px, ' + finalPosition.y + 'px)';
 854              } );
 855              if ( duration !== undefined ) {
 856                  target.style.transitionDuration = duration + 'ms';
 857              }
 858          } );
 859  
 860          // Step 6: finish toggling.
 861          // Remove all transient classes when the animation ends.
 862          transitionListener = function() {
 863              menu.classList.remove( 'is-animating' );
 864              menu.classList.remove( 'is-toggling' );
 865              target.classList.remove( 'toggling-target' );
 866              menuItems.forEach( function( menuItem ) {
 867                  menuItem.style.transform = '';
 868                  menuItem.style.transitionDuration = '';
 869              } );
 870              target.style.transitionDuration = '';
 871              target.removeEventListener( 'transitionend', transitionListener );
 872          };
 873  
 874          target.addEventListener( 'transitionend', transitionListener );
 875      } );
 876  }
 877  
 878  /**
 879   * Traverses the DOM up to find elements matching the query.
 880   *
 881   * @since Twenty Twenty 1.0
 882   *
 883   * @param {HTMLElement} target
 884   * @param {string} query
 885   * @return {NodeList} parents matching query
 886   */
 887  function twentytwentyFindParents( target, query ) {
 888      var parents = [];
 889  
 890      // Recursively go up the DOM adding matches to the parents array.
 891  	function traverse( item ) {
 892          var parent = item.parentNode;
 893          if ( parent instanceof HTMLElement ) {
 894              if ( parent.matches( query ) ) {
 895                  parents.push( parent );
 896              }
 897              traverse( parent );
 898          }
 899      }
 900  
 901      traverse( target );
 902  
 903      return parents;
 904  }