' )
.attr( 'aria-label', item.label )
.append( jQuery( '' ).text( item.label ) )
.appendTo( ul );
};
}
},
selectBlank: function( e, ui ) {
if ( ui.item === null ) {
this.nextElementSibling.value = '';
}
},
completeSelectFromResults: function( e, ui ) {
e.preventDefault();
this.value = ui.item.value === '' ? '' : ui.item.label;
this.nextElementSibling.value = ui.item.value;
}
};
const search = {
wrapInput: ( searchInput, labelText ) => {
const label = tag(
'label',
{
className: 'screen-reader-text',
text: labelText
}
);
label.setAttribute( 'for', searchInput.id );
return tag(
'p',
{
className: 'frm-search',
children: [
label,
span({ className: 'frmfont frm_search_icon' }),
searchInput
]
}
);
},
newSearchInput: ( id, placeholder, targetClassName, args = {}) => {
const input = getAutoSearchInput( id, placeholder );
const wrappedSearch = search.wrapInput( input, placeholder );
search.init( input, targetClassName, args );
function getAutoSearchInput( id, placeholder ) {
const className = 'frm-search-input frm-auto-search frm-w-full';
const inputArgs = { id, className };
const input = tag( 'input', inputArgs );
input.setAttribute( 'placeholder', placeholder );
return input;
}
return wrappedSearch;
},
init: ( input, targetClassName, { handleSearchResult } = {}) => {
input.setAttribute( 'type', 'search' );
input.setAttribute( 'autocomplete', 'off' );
input.addEventListener( 'input', handleSearch );
input.addEventListener( 'search', handleSearch );
input.addEventListener( 'change', handleSearch );
function handleSearch( event ) {
const searchText = input.value.toLowerCase();
const notEmptySearchText = searchText !== '';
const items = Array.from( document.getElementsByClassName( targetClassName ) );
let foundSomething = false;
items.forEach( toggleSearchClassesForItem );
if ( 'function' === typeof handleSearchResult ) {
handleSearchResult({ foundSomething, notEmptySearchText }, event );
}
function toggleSearchClassesForItem( item ) {
let itemText;
if ( item.hasAttribute( 'frm-search-text' ) ) {
itemText = item.getAttribute( 'frm-search-text' );
} else {
itemText = item.innerText.toLowerCase();
item.setAttribute( 'frm-search-text', itemText );
}
const hide = notEmptySearchText && -1 === itemText.indexOf( searchText );
item.classList.toggle( 'frm_hidden', hide );
const isSearchResult = ! hide && notEmptySearchText;
if ( isSearchResult ) {
foundSomething = true;
}
item.classList.toggle( 'frm-search-result', isSearchResult );
}
}
}
};
const util = {
debounce: ( func, wait = 100 ) => {
let timeout;
return function( ...args ) {
clearTimeout( timeout );
timeout = setTimeout(
() => func.apply( this, args ),
wait
);
};
},
onClickPreventDefault: ( element, callback ) => {
const listener = event => {
event.preventDefault();
callback( event );
};
element?.addEventListener( 'click', listener );
},
/**
* Does the same as jQuery( document ).on( 'event', 'selector', handler ).
*
* @since 6.0
*
* @param {String} event Event name.
* @param {String} selector Selector.
* @param {Function} handler Handler.
* @param {Boolean|Object} options Options to be added to `addEventListener()` method. Default is `false`.
*/
documentOn: ( event, selector, handler, options ) => {
if ( 'undefined' === typeof options ) {
options = false;
}
document.addEventListener( event, function( e ) {
let target;
// loop parent nodes from the target to the delegation node.
for ( target = e.target; target && target != this; target = target.parentNode ) {
if ( target && target.matches && target.matches( selector ) ) {
handler.call( target, e );
break;
}
}
}, options );
},
/**
* Retrieves the value of a cookie by its name.
*
* @param {string} name - The name of the cookie.
* @return {string|null} The value of the cookie, or undefined if the cookie does not exist.
*/
getCookie: ( name ) => {
const cookie = document.cookie.split('; ').find( cookie => cookie.startsWith( `${name}=` ) );
if ( cookie ) {
return cookie.split( '=' )[1];
}
return null;
},
/**
* Sets a cookie with the specified name, value, and expiration time.
*
* @param {string} name - The name of the cookie.
* @param {string} value - The value of the cookie.
* @param {number} minutes - The number of minutes until the cookie expires.
*/
setCookie: ( name, value, minutes ) => {
const expires = new Date();
expires.setTime( expires.getTime() + ( minutes * 60 * 1000 ) );
document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
}
};
const wysiwyg = {
init( editor, { setupCallback, height, addFocusEvents } = {}) {
if ( isTinyMceActive() ) {
setTimeout( resetTinyMce, 0 );
} else {
initQuickTagsButtons();
}
setUpTinyMceVisualButtonListener();
setUpTinyMceHtmlButtonListener();
function initQuickTagsButtons() {
if ( 'function' !== typeof window.quicktags || typeof window.QTags.instances[ editor.id ] !== 'undefined' ) {
return;
}
const id = editor.id;
window.quicktags({
name: 'qt_' + id,
id: id,
canvas: editor,
settings: { id },
toolbar: document.getElementById( 'qt_' + id + '_toolbar' ),
theButtons: {}
});
}
function initRichText() {
const key = Object.keys( tinyMCEPreInit.mceInit )[0];
const orgSettings = tinyMCEPreInit.mceInit[ key ];
const settings = Object.assign(
{},
orgSettings,
{
selector: '#' + editor.id,
body_class: orgSettings.body_class.replace( key, editor.id )
}
);
settings.setup = editor => {
if ( addFocusEvents ) {
function focusInCallback() {
jQuery( editor.targetElm ).trigger( 'focusin' );
editor.off( 'focusin', '**' );
}
editor.on( 'focusin', focusInCallback );
editor.on( 'focusout', function() {
editor.on( 'focusin', focusInCallback );
});
}
if ( setupCallback ) {
setupCallback( editor );
}
};
if ( height ) {
settings.height = height;
}
tinymce.init( settings );
}
function removeRichText() {
tinymce.EditorManager.execCommand( 'mceRemoveEditor', true, editor.id );
}
function resetTinyMce() {
removeRichText();
initRichText();
}
function isTinyMceActive() {
const id = editor.id;
const wrapper = document.getElementById( 'wp-' + id + '-wrap' );
return null !== wrapper && wrapper.classList.contains( 'tmce-active' );
}
function setUpTinyMceVisualButtonListener() {
jQuery( document ).on(
'click', '#' + editor.id + '-html',
function() {
editor.style.visibility = 'visible';
initQuickTagsButtons();
}
);
}
function setUpTinyMceHtmlButtonListener() {
jQuery( '#' + editor.id + '-tmce' ).on( 'click', handleTinyMceHtmlButtonClick );
}
function handleTinyMceHtmlButtonClick() {
if ( isTinyMceActive() ) {
resetTinyMce();
} else {
initRichText();
}
const wrap = document.getElementById( 'wp-' + editor.id + '-wrap' );
wrap.classList.add( 'tmce-active' );
wrap.classList.remove( 'html-active' );
}
}
};
function getModalHelper( modal, appendTo ) {
return function( child, uniqueClassName ) {
let element = modal.querySelector( '.' + uniqueClassName );
if ( null === element ) {
element = div({
child: child,
className: uniqueClassName
});
appendTo.appendChild( element );
} else {
redraw( element, child );
}
};
}
function createEmptyModal( id ) {
const modal = div({ id, className: 'frm-modal' });
const postbox = div({ className: 'postbox' });
const metaboxHolder = div({ className: 'metabox-holder', child: postbox });
modal.appendChild( metaboxHolder );
document.body.appendChild( modal );
return modal;
}
function makeModalIntoADialogAndOpen( modal, { width } = {}) {
const bodyWithModalClassName = 'frm-body-with-open-modal';
const $modal = jQuery( modal );
if ( ! $modal.hasClass( 'frm-dialog' ) ) {
$modal.dialog({
dialogClass: 'frm-dialog',
modal: true,
autoOpen: false,
closeOnEscape: true,
width: width || '550px',
resizable: false,
draggable: false,
open: function() {
jQuery( '.ui-dialog-titlebar' ).addClass( 'frm_hidden' ).removeClass( 'ui-helper-clearfix' );
jQuery( '#wpwrap' ).addClass( 'frm_overlay' );
jQuery( '.frm-dialog' ).removeClass( 'ui-widget ui-widget-content ui-corner-all' );
modal.classList.remove( 'ui-dialog-content', 'ui-widget-content' );
$modal.on( 'click', 'a.dismiss', function( event ) {
event.preventDefault();
$modal.dialog( 'close' );
});
const overlay = document.querySelector( '.ui-widget-overlay' );
if ( overlay ) {
overlay.addEventListener(
'click',
function( event ) {
event.preventDefault();
$modal.dialog( 'close' );
}
);
}
},
close: function() {
document.body.classList.remove( bodyWithModalClassName );
jQuery( '#wpwrap' ).removeClass( 'frm_overlay' );
jQuery( '.spinner' ).css( 'visibility', 'hidden' );
}
});
}
document.body.classList.add( bodyWithModalClassName );
$modal.dialog( 'open' );
return $modal;
}
function div( args ) {
return tag( 'div', args );
}
function span( args ) {
return tag( 'span', args );
}
function a( args = {}) {
const anchor = tag( 'a', args );
anchor.setAttribute( 'href', 'string' === typeof args.href ? args.href : '#' );
if ( 'string' === typeof args.target ) {
anchor.target = args.target;
}
return anchor;
}
function img( args = {}) {
const output = tag( 'img', args );
if ( 'string' === typeof args.src ) {
output.setAttribute( 'src', args.src );
}
if ( 'string' === typeof args.alt ) {
output.setAttribute( 'alt', args.alt );
}
return output;
}
/**
* Get a labelled text input and a matching label.
*
* @since 6.0
*
* @param {String} inputId
* @param {String} labelText
* @param {String} inputName
* @returns {Element}
*/
function labelledTextInput( inputId, labelText, inputName ) {
const label = tag( 'label', labelText );
label.setAttribute( 'for', inputId );
const input = tag(
'input',
{
id: inputId,
className: 'frm_long_input'
}
);
input.type = 'text';
input.setAttribute( 'name', inputName );
return div({ children: [ label, input ] });
}
/**
* Build an element.
*
* @since 6.4.1 Accept a string as one of `children` to append a text node inside the element.
*
* @param {String} type Element tag name.
* @param {Object} args The args.
* @return {Object}
*/
function tag( type, args = {}) {
const output = document.createElement( type );
if ( 'string' === typeof args ) {
// Support passing just a string to a tag for simple text elements.
output.textContent = args;
return output;
}
const { id, className, children, child, text, data } = args;
if ( id ) {
output.id = id;
}
if ( className ) {
output.className = className;
}
if ( children ) {
children.forEach( child => {
if ( 'string' === typeof child ) {
output.appendChild( document.createTextNode( child ) );
} else {
output.appendChild( child )
}
} );
} else if ( child ) {
output.appendChild( child );
} else if ( text ) {
output.textContent = text;
}
if ( data ) {
Object.keys( data ).forEach( function( dataKey ) {
output.setAttribute( 'data-' + dataKey, data[dataKey] );
});
}
return output;
}
function svg({ href, classList } = {}) {
const namespace = 'http://www.w3.org/2000/svg';
const output = document.createElementNS( namespace, 'svg' );
if ( classList ) {
output.classList.add( ...classList );
}
if ( href ) {
const use = document.createElementNS( namespace, 'use' );
use.setAttribute( 'href', href );
output.appendChild( use );
output.classList.add( 'frmsvg' );
}
return output;
}
/**
* Pop up a success message in the lower right corner.
* It then fades out and gets deleted automatically.
*
* @param {HTMLElement|String} content
* @returns {void}
*/
function success( content ) {
const container = document.getElementById( 'wpbody' );
const notice = div({
className: 'frm_updated_message frm-floating-success-message',
child: div({
className: 'frm-satisfied',
child: 'string' === typeof content ? document.createTextNode( content ) : content
})
});
container.appendChild( notice );
setTimeout(
() => jQuery( notice ).fadeOut( () => notice.remove() ),
2000
);
}
function setAttributes( element, attrs ) {
Object.entries( attrs ).forEach(
([ key, value ]) => element.setAttribute( key, value )
);
}
function redraw( element, child ) {
element.innerHTML = '';
element.appendChild( child );
}
const allowedHtml = {
b: [],
div: [ 'class' ],
img: [ 'src', 'alt' ],
p: [],
span: [ 'class' ],
strong: [],
svg: [ 'class' ],
use: [],
a: [ 'href', 'class' ]
};
function cleanNode( node ) {
if ( 'undefined' === typeof node.tagName ) {
if ( '#text' === node.nodeName ) {
return document.createTextNode( node.textContent );
}
return document.createTextNode( '' );
}
const tagType = node.tagName.toLowerCase();
if ( 'svg' === tagType ) {
const svgArgs = {
classList: Array.from( node.classList )
};
const use = node.querySelector( 'use' );
if ( use ) {
svgArgs.href = use.getAttribute( 'xlink:href' );
if ( ! svgArgs.href ) {
svgArgs.href = use.getAttribute( 'href' );
}
}
return svg( svgArgs );
}
const newNode = document.createElement( tagType );
if ( 'undefined' === typeof allowedHtml[ tagType ]) {
// Tag type is not allowed.
return document.createTextNode( '' );
}
allowedHtml[ tagType ].forEach(
allowedTag => {
if ( node.hasAttribute( allowedTag ) ) {
newNode.setAttribute( allowedTag, node.getAttribute( allowedTag ) );
}
}
);
node.childNodes.forEach( child => newNode.appendChild( cleanNode( child ) ) );
return newNode;
}
window.frmDom = { tag, div, span, a, img, labelledTextInput, svg, setAttributes, success, modal, ajax, bootstrap, autocomplete, search, util, wysiwyg, cleanNode };
}() );