Edit File: customizer.js
/* global _wpCustomizeSFGuidedTourSteps */ ( function ( wp, $ ) { 'use strict'; if ( ! wp || ! wp.customize ) { return; } // Set up our namespace. const api = wp.customize; api.SFGuidedTourSteps = []; if ( typeof _wpCustomizeSFGuidedTourSteps !== 'undefined' ) { $.extend( api.SFGuidedTourSteps, _wpCustomizeSFGuidedTourSteps ); } /** * wp.customize.SFGuidedTour * */ api.SFGuidedTour = { $container: null, currentStep: -1, init() { this._setupUI(); }, _setupUI() { const self = this, $wpCustomize = $( 'body.wp-customizer .wp-full-overlay' ); this.$container = $( '<div/>' ).addClass( 'sf-guided-tour' ); // Add guided tour div $wpCustomize.prepend( this.$container ); // Add listeners this._addListeners(); // Initial position this.$container .css( ! $( 'body' ).hasClass( 'rtl' ) ? 'left' : 'right', $( '#customize-controls' ).width() + 10 + 'px' ) .on( 'transitionend', function () { self.$container.addClass( 'sf-loaded' ); } ); // Show first step this._showNextStep(); $( document ).on( 'click', '.sf-guided-tour-step .sf-nux-button', function () { self._showNextStep(); return false; } ); $( document ).on( 'click', '.sf-guided-tour-step .sf-guided-tour-skip', function () { if ( self.currentStep === 0 ) { self._hideTour( true ); } else { self._showNextStep(); } return false; } ); }, _addListeners() { const self = this; api.state( 'expandedSection' ).bind( function () { self._adjustPosition(); } ); api.state( 'expandedPanel' ).bind( function () { self._adjustPosition(); } ); }, _adjustPosition() { const step = this._getCurrentStep(); if ( ! step ) { return; } this.$container.removeClass( 'sf-inside-section' ); const expandedSection = api.state( 'expandedSection' ).get(); const expandedPanel = api.state( 'expandedPanel' ).get(); if ( expandedSection && step.section === expandedSection.id ) { this._moveContainer( $( expandedSection.container[ 1 ] ).find( '.customize-section-title' ) ); this.$container.addClass( 'sf-inside-section' ); } else if ( expandedSection === false && expandedPanel === false ) { if ( this._isTourHidden() ) { this._revealTour(); } else { const selector = this._getSelector( step.section ); this._moveContainer( selector ); } } else { this._hideTour(); } }, _hideTour( remove ) { const self = this; // Already hidden? if ( this._isTourHidden() ) { return; } const containerOffset = this.$container.offset(); this.$container.css( { transform: '', top: containerOffset.top, } ); $( 'body' ) .addClass( 'sf-exiting' ) .on( 'animationend.storefront webkitAnimationEnd.storefront', function () { $( this ) .removeClass( 'sf-exiting' ) .off( 'animationend.storefront webkitAnimationEnd.storefront' ) .addClass( 'sf-hidden' ); self.$container.hide(); if ( typeof remove !== 'undefined' && remove === true ) { self._removeTour(); } } ); }, _revealTour() { const self = this; $( 'body' ).removeClass( 'sf-hidden' ); self.$container.show(); const containerOffset = this.$container.offset(); const offsetTop = parseInt( containerOffset.top, 10 ); $( 'body' ) .addClass( 'sf-entering' ) .on( 'animationend.storefront webkitAnimationEnd.storefront', function () { $( this ) .removeClass( 'sf-entering' ) .off( 'animationend.storefront webkitAnimationEnd.storefront' ); self.$container.css( { top: 'auto', transform: 'translateY(' + offsetTop + 'px)', } ); } ); }, _removeTour() { this.$container.remove(); }, _closeAllSections() { api.section.each( function ( section ) { section.collapse( { duration: 0 } ); } ); api.panel.each( function ( panel ) { panel.collapse( { duration: 0 } ); } ); }, _showNextStep() { if ( this._isLastStep() ) { this._hideTour( true ); return; } this._closeAllSections(); // Get next step const step = this._getNextStep(); // Convert line breaks to paragraphs step.message = this._lineBreaksToParagraphs( step.message ); // Load template const template = wp.template( 'sf-guided-tour-step' ); this.$container.removeClass( 'sf-first-step' ); if ( this.currentStep === 0 ) { step.first_step = true; this.$container.addClass( 'sf-first-step' ); } if ( this._isLastStep() ) { step.last_step = true; this.$container.addClass( 'sf-last-step' ); } this._moveContainer( this._getSelector( step.section ) ); this.$container.html( template( step ) ); }, _moveContainer( $selector ) { const self = this; if ( ! $selector ) { return; } const position = parseInt( $selector.offset().top, 10 ) + $selector.height() / 2 - 44; this.$container .addClass( 'sf-moving' ) .css( { transform: 'translateY(' + position + 'px)', } ) .on( 'transitionend.storefront', function () { self.$container.removeClass( 'sf-moving' ); self.$container.off( 'transitionend.storefront' ); } ); }, _getSelector( pointTo ) { const sectionOrPanel = api.section( pointTo ) ? api.section( pointTo ) : api.panel( pointTo ); // Check whether this is a section, panel, or a regular selector if ( typeof sectionOrPanel !== 'undefined' ) { return $( sectionOrPanel.container[ 0 ] ); } return $( pointTo ); }, _getCurrentStep() { return api.SFGuidedTourSteps[ this.currentStep ]; }, _getNextStep() { this.currentStep = this.currentStep + 1; return api.SFGuidedTourSteps[ this.currentStep ]; }, _isTourHidden() { return $( 'body' ).hasClass( 'sf-hidden' ) ? true : false; }, _isLastStep() { return this.currentStep + 1 < api.SFGuidedTourSteps.length ? false : true; }, _lineBreaksToParagraphs( message ) { return '<p>' + message.replace( '\n\n', '</p><p>' ) + '</p>'; }, }; $( document ).ready( function () { api.SFGuidedTour.init(); } ); } )( window.wp, jQuery );