+ /*
+ * Abort if the event target is not the body (the default) and not inside of #customize-controls.
+ * This ensures that ESC meant to collapse a modal dialog or a TinyMCE toolbar won't collapse something else.
+ */
+ if ( ! $( event.target ).is( 'body' ) && ! $.contains( $( '#customize-controls' )[0], event.target ) ) {
+ return;
+ }
+
+ // Check for expanded expandable controls (e.g. widgets and nav menus items), sections, and panels.
+ api.control.each( function( control ) {
+ if ( control.expanded && control.expanded() && _.isFunction( control.collapse ) ) {
+ expandedControls.push( control );
+ }
+ });
+ api.section.each( function( section ) {
+ if ( section.expanded() ) {
+ expandedSections.push( section );
+ }
+ });
+ api.panel.each( function( panel ) {
+ if ( panel.expanded() ) {
+ expandedPanels.push( panel );
+ }
+ });
+
+ // Skip collapsing expanded controls if there are no expanded sections.
+ if ( expandedControls.length > 0 && 0 === expandedSections.length ) {
+ expandedControls.length = 0;
+ }
+
+ // Collapse the most granular expanded object.
+ collapsedObject = expandedControls[0] || expandedSections[0] || expandedPanels[0];
+ if ( collapsedObject ) {
+ collapsedObject.collapse();
+ event.preventDefault();
+ }
+ });
+
+ $( '.customize-controls-preview-toggle' ).on( 'click', function() {
+ api.state( 'paneVisible' ).set( ! api.state( 'paneVisible' ).get() );
+ });
+
+ /*
+ * Sticky header feature.
+ */
+ (function initStickyHeaders() {
+ var parentContainer = $( '.wp-full-overlay-sidebar-content' ),
+ changeContainer, getHeaderHeight, releaseStickyHeader, resetStickyHeader, positionStickyHeader,
+ activeHeader, lastScrollTop;
+
+ /**
+ * Determine which panel or section is currently expanded.
+ *
+ * @since 4.7.0
+ * @access private
+ *
+ * @param {wp.customize.Panel|wp.customize.Section} container Construct.
+ * @returns {void}
+ */
+ changeContainer = function( container ) {
+ var newInstance = container,
+ expandedSection = api.state( 'expandedSection' ).get(),
+ expandedPanel = api.state( 'expandedPanel' ).get(),
+ headerElement;
+
+ // Release previously active header element.
+ if ( activeHeader && activeHeader.element ) {
+ releaseStickyHeader( activeHeader.element );
+ }
+
+ if ( ! newInstance ) {
+ if ( ! expandedSection && expandedPanel && expandedPanel.contentContainer ) {
+ newInstance = expandedPanel;
+ } else if ( ! expandedPanel && expandedSection && expandedSection.contentContainer ) {
+ newInstance = expandedSection;
+ } else {
+ activeHeader = false;
+ return;
+ }
+ }
+
+ headerElement = newInstance.contentContainer.find( '.customize-section-title, .panel-meta' ).first();
+ if ( headerElement.length ) {
+ activeHeader = {
+ instance: newInstance,
+ element: headerElement,
+ parent: headerElement.closest( '.customize-pane-child' ),
+ height: getHeaderHeight( headerElement )
+ };
+ if ( expandedSection ) {
+ resetStickyHeader( activeHeader.element, activeHeader.parent );
+ }
+ } else {
+ activeHeader = false;
+ }
+ };
+ api.state( 'expandedSection' ).bind( changeContainer );
+ api.state( 'expandedPanel' ).bind( changeContainer );
+
+ // Throttled scroll event handler.
+ parentContainer.on( 'scroll', _.throttle( function() {
+ if ( ! activeHeader ) {
+ return;
+ }
+
+ var scrollTop = parentContainer.scrollTop(),
+ isScrollingUp = ( lastScrollTop ) ? scrollTop <= lastScrollTop : true;
+
+ lastScrollTop = scrollTop;
+ positionStickyHeader( activeHeader, scrollTop, isScrollingUp );
+ }, 8 ) );
+
+ // Release header element if it is sticky.
+ releaseStickyHeader = function( headerElement ) {
+ if ( ! headerElement.hasClass( 'is-sticky' ) ) {
+ return;
+ }
+ headerElement
+ .removeClass( 'is-sticky' )
+ .addClass( 'maybe-sticky is-in-view' )
+ .css( 'top', parentContainer.scrollTop() + 'px' );
+ };
+
+ // Reset position of the sticky header.
+ resetStickyHeader = function( headerElement, headerParent ) {
+ headerElement
+ .removeClass( 'maybe-sticky is-in-view' )
+ .css( {
+ width: '',
+ top: ''
+ } );
+ headerParent.css( 'padding-top', '' );
+ };
+
+ /**
+ * Get header height.
+ *
+ * @since 4.7.0
+ * @access private
+ *
+ * @param {jQuery} headerElement Header element.
+ * @returns {number} Height.
+ */
+ getHeaderHeight = function( headerElement ) {
+ var height = headerElement.data( 'height' );
+ if ( ! height ) {
+ height = headerElement.outerHeight();
+ headerElement.data( 'height', height );
+ }
+ return height;
+ };
+
+ /**
+ * Reposition header on throttled `scroll` event.
+ *
+ * @since 4.7.0
+ * @access private
+ *
+ * @param {object} header Header.
+ * @param {number} scrollTop Scroll top.
+ * @param {boolean} isScrollingUp Is scrolling up?
+ * @returns {void}
+ */
+ positionStickyHeader = function( header, scrollTop, isScrollingUp ) {
+ var headerElement = header.element,
+ headerParent = header.parent,
+ headerHeight = header.height,
+ headerTop = parseInt( headerElement.css( 'top' ), 10 ),
+ maybeSticky = headerElement.hasClass( 'maybe-sticky' ),
+ isSticky = headerElement.hasClass( 'is-sticky' ),
+ isInView = headerElement.hasClass( 'is-in-view' );
+
+ // When scrolling down, gradually hide sticky header.
+ if ( ! isScrollingUp ) {
+ if ( isSticky ) {
+ headerTop = scrollTop;
+ headerElement
+ .removeClass( 'is-sticky' )
+ .css( {
+ top: headerTop + 'px',
+ width: ''
+ } );
+ }
+ if ( isInView && scrollTop > headerTop + headerHeight ) {
+ headerElement.removeClass( 'is-in-view' );
+ headerParent.css( 'padding-top', '' );
+ }
+ return;
+ }
+
+ // Scrolling up.
+ if ( ! maybeSticky && scrollTop >= headerHeight ) {
+ maybeSticky = true;
+ headerElement.addClass( 'maybe-sticky' );
+ } else if ( 0 === scrollTop ) {
+ // Reset header in base position.
+ headerElement
+ .removeClass( 'maybe-sticky is-in-view is-sticky' )
+ .css( {
+ top: '',
+ width: ''
+ } );
+ headerParent.css( 'padding-top', '' );
+ return;
+ }
+
+ if ( isInView && ! isSticky ) {
+ // Header is in the view but is not yet sticky.
+ if ( headerTop >= scrollTop ) {
+ // Header is fully visible.
+ headerElement
+ .addClass( 'is-sticky' )
+ .css( {
+ top: '',
+ width: headerParent.outerWidth() + 'px'
+ } );
+ }
+ } else if ( maybeSticky && ! isInView ) {
+ // Header is out of the view.
+ headerElement
+ .addClass( 'is-in-view' )
+ .css( 'top', ( scrollTop - headerHeight ) + 'px' );
+ headerParent.css( 'padding-top', headerHeight + 'px' );
+ }
+ };
+ }());
+
+ // Previewed device bindings.
+ api.previewedDevice = new api.Value();
+
+ // Set the default device.
+ api.bind( 'ready', function() {
+ _.find( api.settings.previewableDevices, function( value, key ) {
+ if ( true === value['default'] ) {
+ api.previewedDevice.set( key );
+ return true;
+ }
+ } );
+ } );
+
+ // Set the toggled device.
+ footerActions.find( '.devices button' ).on( 'click', function( event ) {
+ api.previewedDevice.set( $( event.currentTarget ).data( 'device' ) );