' )
.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';
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() {
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 });
}
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 );
}
};
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 $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.style.overflowY = 'initial';
jQuery( '#wpwrap' ).removeClass( 'frm_overlay' );
jQuery( '.spinner' ).css( 'visibility', 'hidden' );
}
});
}
document.body.style.overflowY = 'hidden';
$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 );
}
return output;
}
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 } = args;
if ( id ) {
output.id = id;
}
if ( className ) {
output.className = className;
}
if ( children ) {
children.forEach( child => output.appendChild( child ) );
} else if ( child ) {
output.appendChild( child );
} else if ( text ) {
output.textContent = text;
}
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;
}
function setAttributes( element, attrs ) {
Object.entries( attrs ).forEach(
([ key, value ]) => element.setAttribute( key, value )
);
}
function redraw( element, child ) {
element.innerHTML = '';
element.appendChild( child );
}
window.frmDom = { tag, div, span, a, img, svg, setAttributes, modal, ajax, bootstrap, autocomplete, search, util };
}() );