← All changes | js/admin/embed.js +38 -45 6.25 → 5.4 View file →

		@@ -4,9 +4,9 @@
4	4	if ( 'undefined' === typeof ajaxurl || 'undefined' === typeof wp || 'undefined' === typeof frmDom ) {
5	5	return;
6	6	}
7	7
8		- const { __, sprintf } = wp.i18n;
	8	+ const __ = wp.i18n.__;
9	9	const { div, tag, svg } = frmDom;
10	10	const { maybeCreateModal, footerButton } = frmDom.modal;
11	11
12	12	let autoId = 0;
		@@ -44,10 +44,9 @@
44	44	}
45	45	break;
46	46
47	47	case 'svg':
48		- case 'use':
49		- clicked = null !== element.closest( '.frm-embed-form' );
	48	+ clicked = element.parentNode.classList.contains( 'frm-embed-form' );
50	49	if ( clicked ) {
51	50	state.type = 'form';
52	51	}
53	52	break;
		@@ -73,9 +72,9 @@
73	72	}
74	73
75	74	function openEmbedModal() {
76	75	/* translators: %s type: ie form, view. */
77		- const title = sprintf( __( 'Embed %s', 'formidable' ), getTypeDescription() );
	76	+ const title = __( 'Embed %s', 'formidable' ).replace( '%s', getTypeDescription() );
78	77
79	78	modal = maybeCreateModal(
80	79	'frm_embed_modal',
81	80	{
		@@ -92,17 +91,17 @@
92	91	$modal.parent().addClass( 'frm-embed-modal-wrapper' );
93	92	}
94	93
95	94	function getModalFooter() {
96		- const doneButton = footerButton( {
	95	+ const doneButton = footerButton({
97	96	text: __( 'Done', 'formidable' ),
98	97	buttonType: 'primary'
99		- } );
	98	+ });
100	99
101		- const cancelButton = footerButton( {
	100	+ const cancelButton = footerButton({
102	101	text: __( 'Back', 'formidable' ),
103	102	buttonType: 'cancel'
104		- } );
	103	+ });
105	104	cancelButton.addEventListener(
106	105	'click',
107	106	function( event ) {
108	107	event.preventDefault();
		@@ -109,11 +108,11 @@
109	108	openEmbedModal();
110	109	}
111	110	);
112	111
113		- return div( {
	112	+ return div({
114	113	children: [ doneButton, cancelButton ]
115		- } );
	114	+ });
116	115	}
117	116
118	117	function offsetModalY( $modal, amount ) {
119	118	const position = {
		@@ -124,19 +123,19 @@
124	123	$modal.dialog( 'option', 'position', position );
125	124	}
126	125
127	126	function getModalOptions() {
128		- const content = div( { className: 'frm-embed-modal-content frm_wrap' } );
	127	+ const content = div({ className: 'frm-embed-modal-content frm_wrap' });
129	128	const typeDescription = getTypeDescription();
130	129
131	130	/* translators: %s type: ie form, view. */
132		- const existingPageDescription = sprintf( __( 'Embed your %s into an existing page.', 'formidable' ), typeDescription );
	131	+ const existingPageDescription = __( 'Embed your %s into an existing page.', 'formidable' ).replace( '%s', typeDescription );
133	132
134	133	/* translators: %s type: ie form, view. */
135		- const newPageDescription = sprintf( __( 'Put your %s on a newly created page.', 'formidable' ), typeDescription );
	134	+ const newPageDescription = __( 'Put your %s on a newly created page.', 'formidable' ).replace( '%s', typeDescription );
136	135
137	136	/* translators: %s type: ie form, view. */
138		- const insertManuallyDescription = sprintf( __( 'Use shortcodes or PHP code to put the %s anywhere.', 'formidable' ), typeDescription );
	137	+ const insertManuallyDescription = __( 'Use WP shortcodes or PHP code to put the %s in any place.', 'formidable' ).replace( '%s', typeDescription );
139	138
140	139	const options = [
141	140	{
142	141	icon: '#frm_file_icon',
		@@ -155,9 +154,9 @@
155	154	content.appendChild( gap );
156	155
157	156	content.classList.add( 'frm-loading-page-options' );
158	157
159		- jQuery.ajax( {
	158	+ jQuery.ajax({
160	159	type: 'POST',
161	160	url: ajaxurl,
162	161	data: {
163	162	action: 'get_page_dropdown',
		@@ -164,9 +163,9 @@
164	163	nonce: frmGlobal.nonce
165	164	},
166	165	dataType: 'json',
167	166	success: addExistingPageDropdown
168		- } );
	167	+ });
169	168
170	169	function addExistingPageDropdown( response ) {
171	170	if ( 'object' !== typeof response || 'string' !== typeof response.html ) {
172	171	return;
		@@ -177,9 +176,9 @@
177	176
178	177	const typeDescription = getTypeDescription();
179	178
180	179	/* translators: %s: type (ie. view, form). */
181		- const titleText = sprintf( __( 'Select the page you want to embed your %s into.', 'formidable' ), typeDescription );
	180	+ const titleText = __( 'Select the page you want to embed your %s into.', 'formidable' ).replace( '%s', typeDescription );
182	181
183	182	const title = getLabel( titleText );
184	183	title.setAttribute( 'for', 'frm_page_dropdown' );
185	184	content.appendChild( title );
		@@ -188,9 +187,9 @@
188	187
189	188	doneButton = modal.querySelector( '.frm_modal_footer .button-primary' );
190	189	doneButton.classList.remove( 'dismiss' );
191	190	/* translators: %s: type (ie. view, form). */
192		- doneButton.textContent = sprintf( __( 'Insert %s', 'formidable' ), typeDescription );
	191	+ doneButton.textContent = __( 'Insert %s', 'formidable' ).replace( '%s', typeDescription );
193	192	doneButton.addEventListener( 'click', redirectToExistingPageWithInjectedShortcode );
194	193
195	194	const dropdownWrapper = div();
196	195	dropdownWrapper.innerHTML = response.html;
		@@ -208,12 +207,8 @@
208	207	}
209	208
210	209	frmDom.autocomplete.initAutocomplete( 'page', dropdownWrapper );
211	210
212		- // Prevent cutoff issue with the autocomplete dropdown.
213		- // This also adds visible overflow even if autocomplete is not activated, but that's fine for this page.
214		- modal.querySelector( '.postbox' ).style.overflow = 'visible';
215		-
216	211	function redirectToExistingPageWithInjectedShortcode( event ) {
217	212	event.preventDefault();
218	213
219	214	const pageDropdown = modal.querySelector( '[name="frm_page_dropdown"]' );
		@@ -221,9 +216,9 @@
221	216
222	217	const pageId = pageDropdown.value;
223	218
224	219	if ( '0' === pageId || '' === pageId ) {
225		- const error = div( { className: 'frm_error_style' } );
	220	+ const error = div({ className: 'frm_error_style' });
226	221	error.setAttribute( 'role', 'alert' );
227	222	error.textContent = __( 'Please select a page', 'formidable' );
228	223	content.insertBefore( error, title.nextElementSibling );
229	224	return;
		@@ -240,9 +235,9 @@
240	235	description: newPageDescription,
241	236	callback: () => {
242	237	content.innerHTML = '';
243	238
244		- const wrapper = div( { className: 'field-group' } );
	239	+ const wrapper = div({ className: 'field-group' });
245	240	const form = tag( 'form' );
246	241
247	242	const createPageWithShortcode = () => {
248	243	const hookName = 'frm_create_page_with_shortcode_data';
		@@ -255,9 +250,9 @@
255	250	name: input.value,
256	251	nonce: frmGlobal.nonce
257	252	}
258	253	);
259		- jQuery.ajax( {
	254	+ jQuery.ajax({
260	255	type: 'POST',
261	256	url: ajaxurl,
262	257	data,
263	258	dataType: 'json',
		@@ -265,9 +260,9 @@
265	260	if ( 'object' === typeof response && 'string' === typeof response.redirect ) {
266	261	window.location.href = response.redirect;
267	262	}
268	263	}
269		- } );
	264	+ });
270	265	};
271	266
272	267	form.addEventListener(
273	268	'submit',
		@@ -345,9 +340,9 @@
345	340	return __( 'form', 'formidable' );
346	341	}
347	342	}
348	343
349		- function getModalOption( { icon, label, description, callback } ) {
	344	+ function getModalOption({ icon, label, description, callback }) {
350	345	const output = div();
351	346	output.appendChild( wrapModalOptionIcon( icon ) );
352	347	output.className = 'frm-embed-modal-option';
353	348	output.setAttribute( 'tabindex', 0 );
		@@ -357,10 +352,8 @@
357	352	textWrapper.appendChild( getLabel( label ) );
358	353	textWrapper.appendChild( div( description ) );
359	354	output.appendChild( textWrapper );
360	355
361		- output.appendChild( div( { className: 'caret' } ) );
362		-
363	356	output.addEventListener(
364	357	'click',
365	358	function() {
366	359	modal.classList.add( 'frm-on-page-2' );
		@@ -370,12 +363,12 @@
370	363	return output;
371	364	}
372	365
373	366	function wrapModalOptionIcon( iconHref ) {
374		- return div( {
375		- className: 'frm-icon-wrapper',
376		- child: svg( { href: iconHref } )
377		- } );
	367	+ return div({
	368	+ className: 'frm-embed-modal-icon-wrapper',
	369	+ child: svg({ href: iconHref })
	370	+ });
378	371	}
379	372
380	373	function getEmbedFormManualExamples() {
381	374	const formId = state.objectId;
		@@ -383,15 +376,15 @@
383	376
384	377	let examples = [
385	378	{
386	379	label: __( 'WordPress shortcode', 'formidable' ),
387		- example: '[formidable id=' + formId + ']',
	380	+ example: '[formidable id=' + formId + ' title=true description=true]',
388	381	link: 'https://formidableforms.com/knowledgebase/publish-a-form/#kb-insert-the-shortcode-manually',
389	382	linkLabel: __( 'How to use shortcodes in WordPress', 'formidable' )
390	383	},
391	384	{
392	385	label: __( 'Use PHP code', 'formidable' ),
393		- example: '<?php echo FrmFormsController::get_form_shortcode( array( \'id\' => ' + formId + ' ) ); ?>'
	386	+ example: '<?php echo FrmFormsController::get_form_shortcode( array( \'id\' => ' + formId + ', \'title\' => true, \'description\' => true ) ); ?>'
394	387	}
395	388	];
396	389
397	390	const filterArgs = { formId, formKey };
		@@ -399,18 +392,18 @@
399	392
400	393	return examples;
401	394	}
402	395
403		- function getEmbedExample( { label, example, link, linkLabel } ) {
404		- const unique = getAutoId();
	396	+ function getEmbedExample({ label, example, link, linkLabel }) {
	397	+ let unique, element, labelElement, exampleElement, linkElement;
405	398
406		- const labelElement = getLabel( label );
	399	+ unique = getAutoId();
	400	+ element = div();
	401	+
	402	+ labelElement = getLabel( label );
407	403	labelElement.id = 'frm_embed_example_label_' + unique;
408		-
409		- const element = div();
410	404	element.appendChild( labelElement );
411	405
412		- let exampleElement;
413	406	if ( example.length > 80 ) {
414	407	exampleElement = tag( 'textarea' );
415	408	} else {
416	409	exampleElement = tag( 'input' );
		@@ -423,9 +416,9 @@
423	416	exampleElement.readOnly = true;
424	417	exampleElement.setAttribute( 'tabindex', -1 );
425	418
426	419	if ( 'undefined' !== typeof link && 'undefined' !== typeof linkLabel ) {
427		- const linkElement = tag( 'a' );
	420	+ linkElement = tag( 'a' );
428	421	linkElement.href = link;
429	422	linkElement.textContent = linkLabel;
430	423	linkElement.setAttribute( 'target', '_blank' );
431	424	element.appendChild( linkElement );
		@@ -442,14 +435,14 @@
442	435	return tag( 'label', args );
443	436	}
444	437
445	438	function getCopyIcon( label ) {
446		- const icon = svg( { href: '#frm_clone_icon' } );
	439	+ const icon = svg({ href: '#frm_clone_icon' });
447	440	icon.id = 'frm_copy_embed_' + getAutoId();
448	441	icon.setAttribute( 'tabindex', 0 );
449	442	icon.setAttribute( 'role', 'button' );
450	443	/* translators: %s: Example type (ie. WordPress shortcode, API Form script) */
451		- icon.setAttribute( 'aria-label', sprintf( __( 'Copy %s', 'formidable' ), label ) );
	444	+ icon.setAttribute( 'aria-label', __( 'Copy %s', 'formidable' ).replace( '%s', label ) );
452	445	icon.addEventListener(
453	446	'click',
454	447	() => copyExampleToClipboard( icon.parentNode.querySelector( '.frm_embed_example' ) )
455	448	);
		@@ -502,9 +495,9 @@
502	495	* Get a unique id that automatically increments with every function call.
503	496	* Can be used for any UI that requires a unique id.
504	497	* Not to be used in data.
505	498	*
506		- * @return {number} The unique id.
	499	+ * @returns {integer}
507	500	*/
508	501	function getAutoId() {
509	502	return ++autoId;
510	503	}