Your IP : 18.226.172.200
/* global wpforms_edit_post_education */
/**
* WPForms Edit Post Education function.
*
* @since 1.8.1
*/
'use strict';
const WPFormsEditPostEducation = window.WPFormsEditPostEducation || ( function( document, window, $ ) {
/**
* Public functions and properties.
*
* @since 1.8.1
*
* @type {object}
*/
const app = {
/**
* Determine if the notice was showed before.
*
* @since 1.8.1
*/
isNoticeVisible: false,
/**
* Start the engine.
*
* @since 1.8.1
*/
init: function() {
$( window ).on( 'load', function() {
// In the case of jQuery 3.+, we need to wait for a ready event first.
if ( typeof $.ready.then === 'function' ) {
$.ready.then( app.load );
} else {
app.load();
}
} );
},
/**
* Page load.
*
* @since 1.8.1
*/
load: function() {
if ( ! app.isGutenbergEditor() ) {
app.maybeShowClassicNotice();
app.bindClassicEvents();
return;
}
const blockLoadedInterval = setInterval( function() {
if ( ! document.querySelector( '.editor-post-title__input, iframe[name="editor-canvas"]' ) ) {
return;
}
clearInterval( blockLoadedInterval );
if ( ! app.isFse() ) {
app.maybeShowGutenbergNotice();
app.bindGutenbergEvents();
return;
}
const iframe = document.querySelector( 'iframe[name="editor-canvas"]' );
const observer = new MutationObserver( function() {
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document || {};
if ( iframeDocument.readyState === 'complete' && iframeDocument.querySelector( '.editor-post-title__input' ) ) {
app.maybeShowGutenbergNotice();
app.bindFseEvents();
observer.disconnect();
}
} );
observer.observe( document.body, { subtree: true, childList: true } );
}, 200 );
},
/**
* Bind events for Classic Editor.
*
* @since 1.8.1
*/
bindClassicEvents: function() {
const $document = $( document );
if ( ! app.isNoticeVisible ) {
$document.on( 'input', '#title', _.debounce( app.maybeShowClassicNotice, 1000 ) );
}
$document.on( 'click', '.wpforms-edit-post-education-notice-close', app.closeNotice );
},
/**
* Bind events for Gutenberg Editor.
*
* @since 1.8.1
*/
bindGutenbergEvents: function() {
const $document = $( document );
$document
.on( 'DOMSubtreeModified', '.edit-post-layout', app.distractionFreeModeToggle );
if ( app.isNoticeVisible ) {
return;
}
$document
.on( 'input', '.editor-post-title__input', _.debounce( app.maybeShowGutenbergNotice, 1000 ) )
.on( 'DOMSubtreeModified', '.editor-post-title__input', _.debounce( app.maybeShowGutenbergNotice, 1000 ) );
},
/**
* Bind events for Gutenberg Editor in FSE mode.
*
* @since 1.8.1
*/
bindFseEvents: function() {
const $iframe = $( 'iframe[name="editor-canvas"]' );
$( document )
.on( 'DOMSubtreeModified', '.edit-post-layout', app.distractionFreeModeToggle );
$iframe.contents()
.on( 'DOMSubtreeModified', '.editor-post-title__input', _.debounce( app.maybeShowGutenbergNotice, 1000 ) );
},
/**
* Determine if the editor is Gutenberg.
*
* @since 1.8.1
*
* @returns {boolean} True if the editor is Gutenberg.
*/
isGutenbergEditor: function() {
return typeof wp !== 'undefined' && typeof wp.blocks !== 'undefined';
},
/**
* Determine if the editor is Gutenberg in FSE mode.
*
* @since 1.8.1
*
* @returns {boolean} True if the Gutenberg editor in FSE mode.
*/
isFse: function() {
return Boolean( $( 'iframe[name="editor-canvas"]' ).length );
},
/**
* Create a notice for Gutenberg.
*
* @since 1.8.1
*/
showGutenbergNotice() {
wp.data.dispatch( 'core/notices' ).createInfoNotice(
wpforms_edit_post_education.gutenberg_notice.template,
app.getGutenbergNoticeSettings()
);
// The notice component doesn't have a way to add HTML id or class to the notice.
// Also, the notice became visible with a delay on old Gutenberg versions.
const hasNotice = setInterval( function() {
const noticeBody = $( '.wpforms-edit-post-education-notice-body' );
if ( ! noticeBody.length ) {
return;
}
const $notice = noticeBody.closest( '.components-notice' );
$notice.addClass( 'wpforms-edit-post-education-notice' );
$notice.find( '.is-secondary, .is-link' ).removeClass( 'is-secondary' ).removeClass( 'is-link' ).addClass( 'is-primary' );
// We can't use onDismiss callback as it was introduced in WordPress 6.0 only.
const dismissButton = $notice.find( '.components-notice__dismiss' );
if ( dismissButton ) {
dismissButton.on( 'click', function() {
app.updateUserMeta();
} );
}
clearInterval( hasNotice );
}, 100 );
},
/**
* Get settings for the Gutenberg notice.
*
* @since 1.8.1
*
* @returns {object} Notice settings.
*/
getGutenbergNoticeSettings: function() {
const pluginName = 'wpforms-edit-post-product-education-guide';
const noticeSettings = {
id: pluginName,
isDismissible: true,
HTML: true,
__unstableHTML: true,
actions: [
{
className: 'wpforms-edit-post-education-notice-guide-button',
variant: 'primary',
label: wpforms_edit_post_education.gutenberg_notice.button,
},
],
};
if ( ! wpforms_edit_post_education.gutenberg_guide ) {
noticeSettings.actions[0].url = wpforms_edit_post_education.gutenberg_notice.url;
return noticeSettings;
}
const Guide = wp.components.Guide;
const useState = wp.element.useState;
const registerPlugin = wp.plugins.registerPlugin;
const unregisterPlugin = wp.plugins.unregisterPlugin;
const GutenbergTutorial = function() {
const [ isOpen, setIsOpen ] = useState( true );
if ( ! isOpen ) {
return null;
}
return (
// eslint-disable-next-line react/react-in-jsx-scope
<Guide
className="edit-post-welcome-guide"
onFinish={ () => {
unregisterPlugin( pluginName );
setIsOpen( false );
} }
pages={ app.getGuidePages() }
/>
);
};
noticeSettings.actions[0].onClick = () => registerPlugin( pluginName, { render: GutenbergTutorial } );
return noticeSettings;
},
/**
* Get Guide pages in proper format.
*
* @since 1.8.1
*
* @returns {Array} Guide Pages.
*/
getGuidePages: function() {
const pages = [];
wpforms_edit_post_education.gutenberg_guide.forEach( function( page ) {
pages.push(
{
/* eslint-disable react/react-in-jsx-scope */
content: (
<>
<h1 className="edit-post-welcome-guide__heading">{ page.title }</h1>
<p className="edit-post-welcome-guide__text">{ page.content }</p>
</>
),
image: <img className="edit-post-welcome-guide__image" src={ page.image } alt={ page.title } />,
/* eslint-enable react/react-in-jsx-scope */
}
);
} );
return pages;
},
/**
* Show notice if the page title matches some keywords for Classic Editor.
*
* @since 1.8.1
*/
maybeShowClassicNotice: function() {
if ( app.isNoticeVisible ) {
return;
}
if ( app.isTitleMatchKeywords( $( '#title' ).val() ) ) {
app.isNoticeVisible = true;
$( '.wpforms-edit-post-education-notice' ).removeClass( 'wpforms-hidden' );
}
},
/**
* Show notice if the page title matches some keywords for Gutenberg Editor.
*
* @since 1.8.1
*/
maybeShowGutenbergNotice: function() {
if ( app.isNoticeVisible ) {
return;
}
const $postTitle = app.isFse() ?
$( 'iframe[name="editor-canvas"]' ).contents().find( '.editor-post-title__input' ) :
$( '.editor-post-title__input' );
const tagName = $postTitle.prop( 'tagName' );
const title = tagName === 'TEXTAREA' ? $postTitle.val() : $postTitle.text();
if ( app.isTitleMatchKeywords( title ) ) {
app.isNoticeVisible = true;
app.showGutenbergNotice();
}
},
/**
* Add notice class when the distraction mode is enabled.
*
* @since 1.8.1.2
*/
distractionFreeModeToggle: function() {
if ( ! app.isNoticeVisible ) {
return;
}
const $document = $( document );
const isDistractionFreeMode = Boolean( $document.find( '.is-distraction-free' ).length );
if ( ! isDistractionFreeMode ) {
return;
}
const isNoticeHasClass = Boolean( $( '.wpforms-edit-post-education-notice' ).length );
if ( isNoticeHasClass ) {
return;
}
const $noticeBody = $document.find( '.wpforms-edit-post-education-notice-body' );
const $notice = $noticeBody.closest( '.components-notice' );
$notice.addClass( 'wpforms-edit-post-education-notice' );
},
/**
* Determine if the title matches keywords.
*
* @since 1.8.1
*
* @param {string} titleValue Page title value.
*
* @returns {boolean} True if the title matches some keywords.
*/
isTitleMatchKeywords: function( titleValue ) {
const expectedTitleRegex = new RegExp( /\b(contact|form)\b/i );
return expectedTitleRegex.test( titleValue );
},
/**
* Close a notice.
*
* @since 1.8.1
*/
closeNotice: function() {
$( this ).closest( '.wpforms-edit-post-education-notice' ).remove();
app.updateUserMeta();
},
/**
* Update user meta and don't show the notice next time.
*
* @since 1.8.1
*/
updateUserMeta() {
$.post(
wpforms_edit_post_education.ajax_url,
{
action: 'wpforms_education_dismiss',
nonce: wpforms_edit_post_education.education_nonce,
section: 'edit-post-notice',
}
);
},
};
return app;
}( document, window, jQuery ) );
WPFormsEditPostEducation.init();