← All changes | js/admin/embed.js +68 -72 6.33 → 6.2 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;
		@@ -73,9 +73,9 @@
73	73	}
74	74
75	75	function openEmbedModal() {
76	76	/* translators: %s type: ie form, view. */
77		- const title = sprintf( __( 'Embed %s', 'formidable' ), getTypeDescription() );
	77	+ const title = __( 'Embed %s', 'formidable' ).replace( '%s', getTypeDescription() );
78	78
79	79	modal = maybeCreateModal(
80	80	'frm_embed_modal',
81	81	{
		@@ -92,17 +92,17 @@
92	92	$modal.parent().addClass( 'frm-embed-modal-wrapper' );
93	93	}
94	94
95	95	function getModalFooter() {
96		- const doneButton = footerButton( {
	96	+ const doneButton = footerButton({
97	97	text: __( 'Done', 'formidable' ),
98	98	buttonType: 'primary'
99		- } );
	99	+ });
100	100
101		- const cancelButton = footerButton( {
	101	+ const cancelButton = footerButton({
102	102	text: __( 'Back', 'formidable' ),
103	103	buttonType: 'cancel'
104		- } );
	104	+ });
105	105	cancelButton.addEventListener(
106	106	'click',
107	107	function( event ) {
108	108	event.preventDefault();
		@@ -109,17 +109,17 @@
109	109	openEmbedModal();
110	110	}
111	111	);
112	112
113		- return div( {
	113	+ return div({
114	114	children: [ doneButton, cancelButton ]
115		- } );
	115	+ });
116	116	}
117	117
118	118	function offsetModalY( $modal, amount ) {
119	119	const position = {
120	120	my: 'top',
121		- at: `top+${ amount }`,
	121	+ at: 'top+' + amount,
122	122	of: window
123	123	};
124	124	$modal.dialog( 'option', 'position', position );
125	125	}
		@@ -124,19 +124,19 @@
124	124	$modal.dialog( 'option', 'position', position );
125	125	}
126	126
127	127	function getModalOptions() {
128		- const content = div( { className: 'frm-embed-modal-content frm_wrap' } );
	128	+ const content = div({ className: 'frm-embed-modal-content frm_wrap' });
129	129	const typeDescription = getTypeDescription();
130	130
131	131	/* translators: %s type: ie form, view. */
132		- const existingPageDescription = sprintf( __( 'Embed your %s into an existing page.', 'formidable' ), typeDescription );
	132	+ const existingPageDescription = __( 'Embed your %s into an existing page.', 'formidable' ).replace( '%s', typeDescription );
133	133
134	134	/* translators: %s type: ie form, view. */
135		- const newPageDescription = sprintf( __( 'Put your %s on a newly created page.', 'formidable' ), typeDescription );
	135	+ const newPageDescription = __( 'Put your %s on a newly created page.', 'formidable' ).replace( '%s', typeDescription );
136	136
137	137	/* translators: %s type: ie form, view. */
138		- const insertManuallyDescription = sprintf( __( 'Use shortcodes or PHP code to put the %s anywhere.', 'formidable' ), typeDescription );
	138	+ const insertManuallyDescription = __( 'Use shortcodes or PHP code to put the %s anywhere.', 'formidable' ).replace( '%s', typeDescription );
139	139
140	140	const options = [
141	141	{
142	142	icon: '#frm_file_icon',
		@@ -147,17 +147,17 @@
147	147
148	148	const spinner = tag( 'span' );
149	149	spinner.className = 'frm-wait frm_spinner';
150	150	spinner.style.visibility = 'visible';
151		- content.append( spinner );
	151	+ content.appendChild( spinner );
152	152
153	153	const gap = div();
154	154	gap.style.height = '20px';
155		- content.append( gap );
	155	+ content.appendChild( gap );
156	156
157	157	content.classList.add( 'frm-loading-page-options' );
158	158
159		- jQuery.ajax( {
	159	+ jQuery.ajax({
160	160	type: 'POST',
161	161	url: ajaxurl,
162	162	data: {
163	163	action: 'get_page_dropdown',
		@@ -164,9 +164,9 @@
164	164	nonce: frmGlobal.nonce
165	165	},
166	166	dataType: 'json',
167	167	success: addExistingPageDropdown
168		- } );
	168	+ });
169	169
170	170	function addExistingPageDropdown( response ) {
171	171	if ( 'object' !== typeof response || 'string' !== typeof response.html ) {
172	172	return;
		@@ -177,28 +177,28 @@
177	177
178	178	const typeDescription = getTypeDescription();
179	179
180	180	/* translators: %s: type (ie. view, form). */
181		- const titleText = sprintf( __( 'Select the page you want to embed your %s into.', 'formidable' ), typeDescription );
	181	+ const titleText = __( 'Select the page you want to embed your %s into.', 'formidable' ).replace( '%s', typeDescription );
182	182
183	183	const title = getLabel( titleText );
184	184	title.setAttribute( 'for', 'frm_page_dropdown' );
185		- content.append( title );
	185	+ content.appendChild( title );
186	186
187	187	let editPageUrl;
188	188
189		- const doneButton = modal.querySelector( '.frm_modal_footer .button-primary' );
	189	+ doneButton = modal.querySelector( '.frm_modal_footer .button-primary' );
190	190	doneButton.classList.remove( 'dismiss' );
191	191	/* translators: %s: type (ie. view, form). */
192		- doneButton.textContent = sprintf( __( 'Insert %s', 'formidable' ), typeDescription );
	192	+ doneButton.textContent = __( 'Insert %s', 'formidable' ).replace( '%s', typeDescription );
193	193	doneButton.addEventListener( 'click', redirectToExistingPageWithInjectedShortcode );
194	194
195	195	const dropdownWrapper = div();
196	196	dropdownWrapper.innerHTML = response.html;
197		- content.append( dropdownWrapper );
	197	+ content.appendChild( dropdownWrapper );
198	198
199	199	if ( 'form' === state.type ) {
200		- editPageUrl = `${ response.edit_page_url }&frmForm=${ state.objectId }`;
	200	+ editPageUrl = response.edit_page_url + '&frmForm=' + state.objectId;
201	201	} else {
202	202	const hookName = 'frm_embed_edit_page_url';
203	203	const hookArgs = {
204	204	objectId: state.objectId,
		@@ -208,12 +208,8 @@
208	208	}
209	209
210	210	frmDom.autocomplete.initAutocomplete( 'page', dropdownWrapper );
211	211
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	212	function redirectToExistingPageWithInjectedShortcode( event ) {
217	213	event.preventDefault();
218	214
219	215	const pageDropdown = modal.querySelector( '[name="frm_page_dropdown"]' );
		@@ -221,9 +217,9 @@
221	217
222	218	const pageId = pageDropdown.value;
223	219
224	220	if ( '0' === pageId || '' === pageId ) {
225		- const error = div( { className: 'frm_error_style' } );
	221	+ const error = div({ className: 'frm_error_style' });
226	222	error.setAttribute( 'role', 'alert' );
227	223	error.textContent = __( 'Please select a page', 'formidable' );
228	224	content.insertBefore( error, title.nextElementSibling );
229	225	return;
		@@ -228,9 +224,9 @@
228	224	content.insertBefore( error, title.nextElementSibling );
229	225	return;
230	226	}
231	227
232		- window.location.href = editPageUrl.replace( 'post=0', `post=${ pageId }` );
	228	+ window.location.href = editPageUrl.replace( 'post=0', 'post=' + pageId );
233	229	}
234	230	}
235	231	}
236	232	},
		@@ -240,9 +236,9 @@
240	236	description: newPageDescription,
241	237	callback: () => {
242	238	content.innerHTML = '';
243	239
244		- const wrapper = div( { className: 'field-group' } );
	240	+ const wrapper = div({ className: 'field-group' });
245	241	const form = tag( 'form' );
246	242
247	243	const createPageWithShortcode = () => {
248	244	const hookName = 'frm_create_page_with_shortcode_data';
		@@ -255,19 +251,19 @@
255	251	name: input.value,
256	252	nonce: frmGlobal.nonce
257	253	}
258	254	);
259		- jQuery.ajax( {
	255	+ jQuery.ajax({
260	256	type: 'POST',
261	257	url: ajaxurl,
262	258	data,
263	259	dataType: 'json',
264		- success( response ) {
	260	+ success: function( response ) {
265	261	if ( 'object' === typeof response && 'string' === typeof response.redirect ) {
266	262	window.location.href = response.redirect;
267	263	}
268	264	}
269		- } );
	265	+ });
270	266	};
271	267
272	268	form.addEventListener(
273	269	'submit',
		@@ -280,22 +276,22 @@
280	276	);
281	277
282	278	const title = getLabel( __( 'What will you call the new page?', 'formidable' ) );
283	279	title.setAttribute( 'for', 'frm_name_your_page' );
284		- form.append( title );
	280	+ form.appendChild( title );
285	281
286	282	const input = tag( 'input' );
287	283	input.id = 'frm_name_your_page';
288	284	input.placeholder = __( 'Name your page', 'formidable' );
289		- form.append( input );
	285	+ form.appendChild( input );
290	286
291		- wrapper.append( form );
292		- content.append( wrapper );
	287	+ wrapper.appendChild( form );
	288	+ content.appendChild( wrapper );
293	289
294	290	input.type = 'text';
295	291	input.focus();
296	292
297		- const doneButton = modal.querySelector( '.frm_modal_footer .button-primary' );
	293	+ doneButton = modal.querySelector( '.frm_modal_footer .button-primary' );
298	294	doneButton.textContent = __( 'Create page', 'formidable' );
299	295	doneButton.addEventListener(
300	296	'click',
301	297	function( event ) {
		@@ -312,9 +308,9 @@
312	308	callback: () => {
313	309	content.innerHTML = '';
314	310
315	311	if ( 'form' === state.type ) {
316		- getEmbedFormManualExamples().forEach( example => content.append( getEmbedExample( example ) ) );
	312	+ getEmbedFormManualExamples().forEach( example => content.appendChild( getEmbedExample( example ) ) );
317	313	} else {
318	314	const hookName = 'frm_embed_examples';
319	315	const hookArgs = {
320	316	type: state.type,
		@@ -321,9 +317,9 @@
321	317	objectId: state.objectId,
322	318	objectKey: state.objectKey
323	319	};
324	320	wp.hooks.applyFilters( hookName, [], hookArgs ).forEach(
325		- example => content.append( getEmbedExample( example ) )
	321	+ example => content.appendChild( getEmbedExample( example ) )
326	322	);
327	323	}
328	324	}
329	325	}
		@@ -329,9 +325,9 @@
329	325	}
330	326	];
331	327
332	328	options.forEach(
333		- option => content.append( getModalOption( option ) )
	329	+ option => content.appendChild( getModalOption( option ) )
334	330	);
335	331
336	332	return content;
337	333	}
		@@ -345,21 +341,21 @@
345	341	return __( 'form', 'formidable' );
346	342	}
347	343	}
348	344
349		- function getModalOption( { icon, label, description, callback } ) {
	345	+ function getModalOption({ icon, label, description, callback }) {
350	346	const output = div();
351		- output.append( wrapModalOptionIcon( icon ) );
	347	+ output.appendChild( wrapModalOptionIcon( icon ) );
352	348	output.className = 'frm-embed-modal-option';
353	349	output.setAttribute( 'tabindex', 0 );
354	350	output.setAttribute( 'role', 'button' );
355	351
356	352	const textWrapper = div();
357		- textWrapper.append( getLabel( label ) );
358		- textWrapper.append( div( description ) );
359		- output.append( textWrapper );
	353	+ textWrapper.appendChild( getLabel( label ) );
	354	+ textWrapper.appendChild( div( description ) );
	355	+ output.appendChild( textWrapper );
360	356
361		- output.append( div( { className: 'caret' } ) );
	357	+ output.appendChild( div({ className: 'caret' }) );
362	358
363	359	output.addEventListener(
364	360	'click',
365	361	function() {
		@@ -370,12 +366,12 @@
370	366	return output;
371	367	}
372	368
373	369	function wrapModalOptionIcon( iconHref ) {
374		- return div( {
	370	+ return div({
375	371	className: 'frm-icon-wrapper',
376		- child: svg( { href: iconHref } )
377		- } );
	372	+ child: svg({ href: iconHref })
	373	+ });
378	374	}
379	375
380	376	function getEmbedFormManualExamples() {
381	377	const formId = state.objectId;
		@@ -383,15 +379,15 @@
383	379
384	380	let examples = [
385	381	{
386	382	label: __( 'WordPress shortcode', 'formidable' ),
387		- example: `[formidable id=${ formId }]`,
	383	+ example: '[formidable id=' + formId + ']',
388	384	link: 'https://formidableforms.com/knowledgebase/publish-a-form/#kb-insert-the-shortcode-manually',
389	385	linkLabel: __( 'How to use shortcodes in WordPress', 'formidable' )
390	386	},
391	387	{
392	388	label: __( 'Use PHP code', 'formidable' ),
393		- example: `<?php echo FrmFormsController::get_form_shortcode( array( 'id' => ${ formId } ) ); ?>`
	389	+ example: '<?php echo FrmFormsController::get_form_shortcode( array( \'id\' => ' + formId + ' ) ); ?>'
394	390	}
395	391	];
396	392
397	393	const filterArgs = { formId, formKey };
		@@ -399,18 +395,18 @@
399	395
400	396	return examples;
401	397	}
402	398
403		- function getEmbedExample( { label, example, link, linkLabel } ) {
404		- const unique = getAutoId();
	399	+ function getEmbedExample({ label, example, link, linkLabel }) {
	400	+ let unique, element, labelElement, exampleElement, linkElement;
405	401
406		- const labelElement = getLabel( label );
407		- labelElement.id = `frm_embed_example_label_${ unique }`;
	402	+ unique = getAutoId();
	403	+ element = div();
408	404
409		- const element = div();
410		- element.append( labelElement );
	405	+ labelElement = getLabel( label );
	406	+ labelElement.id = 'frm_embed_example_label_' + unique;
	407	+ element.appendChild( labelElement );
411	408
412		- let exampleElement;
413	409	if ( example.length > 80 ) {
414	410	exampleElement = tag( 'textarea' );
415	411	} else {
416	412	exampleElement = tag( 'input' );
		@@ -416,24 +412,24 @@
416	412	exampleElement = tag( 'input' );
417	413	exampleElement.type = 'text';
418	414	}
419	415
420		- exampleElement.id = `frm_embed_example_${ unique }`;
	416	+ exampleElement.id = 'frm_embed_example_' + unique;
421	417	exampleElement.className = 'frm_embed_example';
422	418	exampleElement.value = example;
423	419	exampleElement.readOnly = true;
424	420	exampleElement.setAttribute( 'tabindex', -1 );
425	421
426		- if ( link !== undefined && linkLabel !== undefined ) {
427		- const linkElement = tag( 'a' );
	422	+ if ( 'undefined' !== typeof link && 'undefined' !== typeof linkLabel ) {
	423	+ linkElement = tag( 'a' );
428	424	linkElement.href = link;
429	425	linkElement.textContent = linkLabel;
430	426	linkElement.setAttribute( 'target', '_blank' );
431		- element.append( linkElement );
	427	+ element.appendChild( linkElement );
432	428	}
433	429
434		- element.append( exampleElement );
435		- element.append( getCopyIcon( label ) );
	430	+ element.appendChild( exampleElement );
	431	+ element.appendChild( getCopyIcon( label ) );
436	432
437	433	return element;
438	434	}
439	435
		@@ -442,14 +438,14 @@
442	438	return tag( 'label', args );
443	439	}
444	440
445	441	function getCopyIcon( label ) {
446		- const icon = svg( { href: '#frm_clone_icon' } );
447		- icon.id = `frm_copy_embed_${ getAutoId() }`;
	442	+ const icon = svg({ href: '#frm_clone_icon' });
	443	+ icon.id = 'frm_copy_embed_' + getAutoId();
448	444	icon.setAttribute( 'tabindex', 0 );
449	445	icon.setAttribute( 'role', 'button' );
450	446	/* translators: %s: Example type (ie. WordPress shortcode, API Form script) */
451		- icon.setAttribute( 'aria-label', sprintf( __( 'Copy %s', 'formidable' ), label ) );
	447	+ icon.setAttribute( 'aria-label', __( 'Copy %s', 'formidable' ).replace( '%s', label ) );
452	448	icon.addEventListener(
453	449	'click',
454	450	() => copyExampleToClipboard( icon.parentNode.querySelector( '.frm_embed_example' ) )
455	451	);
		@@ -486,17 +482,17 @@
486	482	}
487	483
488	484	function speak( message ) {
489	485	const element = document.createElement( 'div' );
490		- const id = `speak-${ getAutoId() }`;
	486	+ const id = 'speak-' + getAutoId();
491	487
492	488	element.setAttribute( 'aria-live', 'assertive' );
493	489	element.setAttribute( 'id', id );
494	490	element.className = 'frm_screen_reader frm_hidden';
495	491	element.textContent = message;
496		- document.body.append( element );
	492	+ document.body.appendChild( element );
497	493
498		- setTimeout( () => element.remove(), 1000 );
	494	+ setTimeout( () => document.body.removeChild( element ), 1000 );
499	495	}
500	496
501	497	/**
502	498	* Get a unique id that automatically increments with every function call.
		@@ -502,9 +498,9 @@
502	498	* Get a unique id that automatically increments with every function call.
503	499	* Can be used for any UI that requires a unique id.
504	500	* Not to be used in data.
505	501	*
506		- * @return {number} The unique id.
	502	+ * @returns {integer}
507	503	*/
508	504	function getAutoId() {
509	505	return ++autoId;
510	506	}