← All changes | js/admin/applications.js +80 -79 6.28 → 6.23 View file →

		@@ -38,10 +38,10 @@
38	38	wp.hooks.addAction( 'frm_application_render_templates', 'formidable', getUrlParamsAndMaybeOpenTemplateModal );
39	39	getApplicationDataAndLoadPage();
40	40	}
41	41
42		- function getUrlParamsAndMaybeOpenTemplateModal( _, { data } = {} ) {
43		- const url = new URL( window.location.href );
	42	+ function getUrlParamsAndMaybeOpenTemplateModal( _, { data } = {}) {
	43	+ const url = new URL( window.location.href );
44	44	const urlParams = url.searchParams;
45	45	if ( ! urlParams.get( 'triggerViewApplicationModal' ) ) {
46	46	return;
47	47	}
		@@ -66,14 +66,14 @@
66	66	state.templates = data.templates;
67	67
68	68	container.innerHTML = '';
69	69
70		- const contentWrapper = div( { className: 'frm-applications-index-content' } );
71		- container.append( contentWrapper );
	70	+ const contentWrapper = div({ className: 'frm-applications-index-content' });
	71	+ container.appendChild( contentWrapper );
72	72
73	73	const customTemplatesNav = getCustomTemplatesNav();
74	74
75		- contentWrapper.append( customTemplatesNav );
	75	+ contentWrapper.appendChild( customTemplatesNav );
76	76	renderFormidableTemplates( contentWrapper, data.templates );
77	77
78	78	const hookName = 'frm_application_render_templates';
79	79	const args = { data, customTemplatesNav };
		@@ -84,9 +84,9 @@
84	84	}
85	85	}
86	86
87	87	function getCustomTemplatesNav() {
88		- return div( {
	88	+ return div({
89	89	className: 'frm-application-templates-nav wrap',
90	90	children: [
91	91	tag(
92	92	'h2',
		@@ -95,37 +95,37 @@
95	95	className: 'frm-h2'
96	96	}
97	97	)
98	98	]
99		- } );
	99	+ });
100	100	}
101	101
102	102	function addCustomApplicationsPlaceholder( customTemplatesNav ) {
103		- const placeholder = div( {
	103	+ const placeholder = div({
104	104	id: 'frm_custom_applications_placeholder',
105	105	className: 'frm_placeholder_block',
106		- child: div( {
	106	+ child: div({
107	107	className: 'frm_grid_container',
108	108	children: [
109		- div( {
	109	+ div({
110	110	className: 'frm10 frm_clearfix',
111	111	children: [
112		- img( { src: getUrlToApplicationsImages() + 'folder.svg' } ),
	112	+ img({ src: getUrlToApplicationsImages() + 'folder.svg' }),
113	113	tag( 'h3', __( 'Improve your workflow with applications', 'formidable' ) ),
114	114	div( __( 'Applications help to organize your workspace by combining forms, Views, and pages into a full solution.', 'formidable' ) ),
115	115	]
116		- } ),
117		- div( {
	116	+ }),
	117	+ div({
118	118	className: 'frm2',
119		- child: a( {
	119	+ child: a({
120	120	className: 'frm-button-primary frm-gradient',
121	121	text: __( 'Upgrade to Pro', 'formidable' ),
122	122	href: frmApplicationsVars.proUpgradeUrl
123		- } )
124		- } )
	123	+ })
	124	+ })
125	125	]
126		- } )
127		- } );
	126	+ })
	127	+ });
128	128	customTemplatesNav.parentNode.insertBefore( placeholder, customTemplatesNav.nextElementSibling );
129	129	}
130	130
131	131	function getUrlToApplicationsImages() {
		@@ -132,20 +132,20 @@
132	132	return frmGlobal.url + '/images/applications/';
133	133	}
134	134
135	135	function renderFormidableTemplates( contentWrapper, templates ) {
136		- elements.templatesGrid = div( {
	136	+ elements.templatesGrid = div({
137	137	id: 'frm_application_templates_grid',
138	138	className: 'frm_grid_container frm-application-cards-grid'
139		- } );
	139	+ });
140	140	addTemplatesToGrid( templates );
141		- contentWrapper.append( getTemplatesNav() );
142		- contentWrapper.append( elements.templatesGrid );
	141	+ contentWrapper.appendChild( getTemplatesNav() );
	142	+ contentWrapper.appendChild( elements.templatesGrid );
143	143	}
144	144
145	145	function addTemplatesToGrid( templates ) {
146	146	templates.forEach(
147		- application => elements.templatesGrid.append( createApplicationCard( application ) )
	147	+ application => elements.templatesGrid.appendChild( createApplicationCard( application ) )
148	148	);
149	149	maybeTriggerSearch();
150	150	}
151	151
		@@ -158,9 +158,9 @@
158	158	}
159	159	}
160	160
161	161	function getTemplatesNav() {
162		- return div( {
	162	+ return div({
163	163	className: 'frm-application-templates-nav wrap',
164	164	children: [
165	165	tag(
166	166	'h2',
		@@ -171,9 +171,9 @@
171	171	),
172	172	getCategoryOptions(),
173	173	getTemplateSearch()
174	174	]
175		- } );
	175	+ });
176	176	}
177	177
178	178	function getCategoryOptions() {
179	179	if ( state.templates.length < 8 ) {
		@@ -181,14 +181,14 @@
181	181	return document.createTextNode( '' );
182	182	}
183	183
184	184	const categories = [ getAllItemsCategory() ].concat( state.categories );
185		- const wrapper = div( { id: 'frm_application_category_filter', className: 'subsubsub' } );
	185	+ const wrapper = div({ id: 'frm_application_category_filter', className: 'subsubsub' });
186	186
187	187	categories.forEach( addCategoryToWrapper );
188	188	function addCategoryToWrapper( category, index ) {
189	189	if ( 0 !== index ) {
190		- wrapper.append( document.createTextNode( '|' ) );
	190	+ wrapper.appendChild( document.createTextNode( '|' ) );
191	191	}
192	192	const anchor = a( category );
193	193	if ( 0 === index ) {
194	194	anchor.classList.add( 'current' );
		@@ -205,9 +205,9 @@
205	205	anchor.classList.add( 'current' );
206	206	elements.activeCategoryAnchor = anchor;
207	207	}
208	208	);
209		- wrapper.append( anchor );
	209	+ wrapper.appendChild( anchor );
210	210	}
211	211
212	212	return wrapper;
213	213	}
		@@ -240,15 +240,16 @@
240	240	const id = 'frm-application-search';
241	241	const placeholder = __( 'Search Templates', 'formidable' );
242	242	const targetClassName = 'frm-application-template-card';
243	243	const args = { handleSearchResult: handleTemplateSearch };
244		- return newSearchInput( id, placeholder, targetClassName, args );
	244	+ const wrappedInput = newSearchInput( id, placeholder, targetClassName, args );
	245	+ return wrappedInput;
245	246	}
246	247
247		- function handleTemplateSearch( { foundSomething, notEmptySearchText } ) {
	248	+ function handleTemplateSearch({ foundSomething, notEmptySearchText }) {
248	249	if ( false === elements.noTemplateSearchResultsPlaceholder ) {
249	250	elements.noTemplateSearchResultsPlaceholder = getNoResultsPlaceholder();
250		- elements.templatesGrid.append( elements.noTemplateSearchResultsPlaceholder );
	251	+ elements.templatesGrid.appendChild( elements.noTemplateSearchResultsPlaceholder );
251	252	}
252	253	elements.noTemplateSearchResultsPlaceholder.classList.toggle( 'frm_hidden', ! notEmptySearchText || foundSomething );
253	254	}
254	255
		@@ -261,21 +262,21 @@
261	262	}
262	263
263	264	function createApplicationCard( data ) {
264	265	const isTemplate = ! data.termId;
265		- const card = div( {
	266	+ const card = div({
266	267	className: 'frm-application-card frm-card-item',
267	268	children: [
268	269	getCardHeader(),
269		- div( { className: 'frm-flex' } )
	270	+ div({ className: 'frm-flex' })
270	271	]
271		- } );
	272	+ });
272	273
273	274	if ( isTemplate ) {
274	275	card.classList.add( 'frm-application-template-card' );
275	276	card.classList.add( 'frm-locked-application-template' );
276		- card.append( tag( 'hr' ) );
277		- card.append( getCardContent() );
	277	+ card.appendChild( tag( 'hr' ) );
	278	+ card.appendChild( getCardContent() );
278	279
279	280	card.addEventListener(
280	281	'click',
281	282	event => 'a' !== event.target.nodeName.toLowerCase() && card.querySelector( 'a' ).click()
		@@ -282,9 +283,9 @@
282	283	);
283	284	}
284	285
285	286	const hookName = 'frm_application_index_card';
286		- const args = { data };
	287	+ const args = { data };
287	288	wp.hooks.doAction( hookName, card, args );
288	289
289	290	function getCardHeader() {
290	291	const titleWrapper = tag(
		@@ -290,32 +291,32 @@
290	291	const titleWrapper = tag(
291	292	'h3',
292	293	{
293	294	children: [
294		- svg( { href: '#frm_lock_icon' } ),
295		- span( { className: 'frm-inner-text', text: data.name } )
	295	+ svg({ href: '#frm_lock_icon' }),
	296	+ span({ className: 'frm-inner-text', text: data.name })
296	297	]
297	298	}
298	299	);
299		- const header = div( {
	300	+ const header = div({
300	301	children: [
301	302	titleWrapper
302	303	]
303		- } );
	304	+ });
304	305
305	306	const templateControl = getUseThisTemplateControl( data );
306		- if ( templateControl.classList.contains( 'frm-delete-application-trigger' ) ) {
307		- header.append( templateControl );
	307	+ if ( templateControl.classList.contains('frm-delete-application-trigger' ) ) {
	308	+ header.appendChild( templateControl );
308	309	} else {
309		- titleWrapper.append( templateControl );
	310	+ titleWrapper.appendChild( templateControl );
310	311	}
311	312	if ( data.isNew ) {
312		- titleWrapper.append( span( { className: 'frm-new-pill frm-meta-tag frm-fadein', text: __( 'NEW', 'formidable' ) } ) );
	313	+ titleWrapper.appendChild( span({ className: 'frm-new-pill frm-meta-tag frm-fadein', text: __( 'NEW', 'formidable' ) }) );
313	314	}
314	315
315	316	const counter = getItemCounter();
316	317	if ( false !== counter ) {
317		- header.append( counter );
	318	+ header.appendChild( counter );
318	319	}
319	320
320	321	return header;
321	322	}
		@@ -327,19 +328,19 @@
327	328	}
328	329
329	330	function getCardContent() {
330	331	const thumbnailFolderUrl = getUrlToApplicationsImages() + 'thumbnails/';
331		- const filenameToUse = data.hasLiteThumbnail ? data.key + ( data.isWebp ? '.webp' : '.png' ) : 'placeholder.svg';
332		- return div( {
	332	+ const filenameToUse = data.hasLiteThumbnail ? data.key + ( data.isWebp ? '.webp' : '.png' ) : 'placeholder.svg';
	333	+ return div({
333	334	className: 'frm-application-card-image-wrapper',
334		- child: img( { src: thumbnailFolderUrl + filenameToUse } )
335		- } );
	335	+ child: img({ src: thumbnailFolderUrl + filenameToUse })
	336	+ });
336	337	}
337	338
338	339	return card;
339	340	}
340	341
341		- function filterItemCount( counter, { data } ) {
	342	+ function filterItemCount( counter, { data }) {
342	343	const hasForms = 'undefined' !== typeof data.formCount && '0' !== data.formCount;
343	344	const hasViews = 'undefined' !== typeof data.viewCount && '0' !== data.viewCount;
344	345	const hasPages = 'undefined' !== typeof data.pageCount && '0' !== data.pageCount;
345	346
		@@ -346,9 +347,9 @@
346	347	if ( ! hasForms && ! hasViews && ! hasPages ) {
347	348	return counter;
348	349	}
349	350
350		- counter = div( { className: 'frm-application-item-count' } );
	351	+ counter = div({ className: 'frm-application-item-count' });
351	352
352	353	if ( hasForms ) {
353	354	addCount( data.formCount, __( 'Forms', 'formidable' ), __( 'Form', 'formidable' ) );
354	355	}
		@@ -362,13 +363,13 @@
362	363	}
363	364
364	365	function addCount( countValue, pluralDescriptor, singularDescriptor ) {
365	366	if ( counter.children.length ) {
366		- counter.append( document.createTextNode( ' | ' ) );
	367	+ counter.appendChild( document.createTextNode( ' | ' ) );
367	368	}
368	369
369	370	const descriptor = '1' === countValue ? singularDescriptor : pluralDescriptor;
370		- counter.append(
	371	+ counter.appendChild(
371	372	span( countValue + ' ' + descriptor )
372	373	);
373	374	}
374	375
		@@ -375,12 +376,12 @@
375	376	return counter;
376	377	}
377	378
378	379	function getUseThisTemplateControl( data ) {
379		- let control = a( {
	380	+ let control = a({
380	381	className: 'button frm-button-secondary frm-button-sm frm-fadein',
381	382	text: __( 'Learn More', 'formidable' )
382		- } );
	383	+ });
383	384	control.setAttribute( 'role', 'button' );
384	385	/* translators: %s: Application Template Name */
385	386	const ariaDescription = sprintf( __( '%s Template', 'formidable' ), data.name );
386	387	control.setAttribute( 'aria-description', ariaDescription );
		@@ -421,9 +422,9 @@
421	422	const children = [];
422	423
423	424	if ( data.upgradeUrl ) {
424	425	children.push(
425		- div( {
	426	+ div({
426	427	className: 'frm_note_style2',
427	428	children: [
428	429	span(
429	430	/* translators: %s: The required license type (ie. Plus, Business, or Elite) */
		@@ -428,19 +429,19 @@
428	429	span(
429	430	/* translators: %s: The required license type (ie. Plus, Business, or Elite) */
430	431	sprintf( __( 'Access to this application requires the %s plan.', 'formidable' ), data.requires )
431	432	),
432		- a( {
	433	+ a({
433	434	className: 'frm-gradient frm-button-primary frm-button-sm',
434	435	text: getUpgradeNowText(),
435	436	href: data.upgradeUrl
436		- } )
	437	+ })
437	438	]
438		- } )
	439	+ })
439	440	);
440	441	}
441	442
442		- const placeholderImage = img( { src: getUrlToApplicationsImages() + 'placeholder.png' } );
	443	+ const placeholderImage = img({ src: getUrlToApplicationsImages() + 'placeholder.png' });
443	444	if ( placeholderImage.complete ) {
444	445	setTimeout( maybeCenterViewApplicationModal, 0 );
445	446	} else {
446	447	placeholderImage.addEventListener( 'load', maybeCenterViewApplicationModal );
		@@ -446,40 +447,40 @@
446	447	placeholderImage.addEventListener( 'load', maybeCenterViewApplicationModal );
447	448	}
448	449
449	450	const detailsChildren = [
450		- div( {
	451	+ div({
451	452	className: 'frm-application-modal-label',
452	453	text: __( 'Description', 'formidable' )
453		- } ),
	454	+ }),
454	455	div( data.description )
455	456	];
456	457
457	458	if ( data.usedAddons && data.usedAddons.length ) {
458	459	detailsChildren.push(
459		- div( {
	460	+ div({
460	461	className: 'frm-application-modal-label',
461	462	text: __( 'Required Add-ons', 'formidable-pro' )
462		- } ),
	463	+ }),
463	464	getBasicList( data.usedAddons )
464	465	);
465	466	}
466	467
467	468	children.push(
468		- div( {
	469	+ div({
469	470	className: 'frm-application-image-wrapper',
470	471	child: placeholderImage
471		- } ),
472		- div( {
	472	+ }),
	473	+ div({
473	474	className: 'frm-application-modal-details',
474	475	children: detailsChildren
475		- } )
	476	+ })
476	477	);
477	478
478		- const output = div( { children } );
	479	+ const output = div({ children });
479	480
480	481	const hookName = 'frm_view_application_modal_content';
481		- const args = { data };
	482	+ const args = { data };
482	483	wp.hooks.doAction( hookName, output, args );
483	484
484	485	return output;
485	486	}
		@@ -505,23 +506,23 @@
505	506	my: 'center',
506	507	at: 'center',
507	508	of: window
508	509	};
509		- jQuery( modal ).dialog( { position } );
	510	+ jQuery( modal ).dialog({ position });
510	511	}
511	512
512	513	function getViewApplicationModalFooter( data ) {
513		- const viewDemoSiteButton = footerButton( {
	514	+ const viewDemoSiteButton = footerButton({
514	515	text: __( 'Learn More', 'formidable' ),
515	516	buttonType: 'secondary'
516		- } );
	517	+ });
517	518	viewDemoSiteButton.href = data.link;
518	519	viewDemoSiteButton.target = '_blank';
519	520
520		- let primaryActionButton = footerButton( {
	521	+ let primaryActionButton = footerButton({
521	522	text: getUpgradeNowText(),
522	523	buttonType: 'primary'
523		- } );
	524	+ });
524	525
525	526	if ( data.upgradeUrl ) {
526	527	primaryActionButton.classList.remove( 'dismiss' );
527	528	primaryActionButton.setAttribute( 'href', data.upgradeUrl );
		@@ -527,12 +528,12 @@
527	528	primaryActionButton.setAttribute( 'href', data.upgradeUrl );
528	529	}
529	530
530	531	const hookName = 'frm_view_application_modal_primary_action_button';
531		- const args = { data };
	532	+ const args = { data };
532	533	primaryActionButton = wp.hooks.applyFilters( hookName, primaryActionButton, args );
533	534
534		- return div( {
	535	+ return div({
535	536	children: [ viewDemoSiteButton, primaryActionButton ]
536		- } );
	537	+ });
537	538	}
538	539	}() );