← All changes | assets/src/js/admin/share/dropdown-pages.js +311 -121 4.3.7 → 4.4.8 View file →

		@@ -1,141 +1,331 @@
1		-( function( $ ) {
2		- function DropdownPages( el, options ) {
3		- this.options = $.extend( {
4		- ID: '',
5		- name: 'Add new page',
6		- }, options || {} );
7		- const $element = $( el ),
8		- $select = $element.find( 'select' ),
9		- $listWrap = $element.find( '.list-pages-wrapper' ),
10		- $actions = $element.find( '.quick-add-page-actions' ),
11		- $form = $element.find( '.quick-add-page-inline' );
	1	+/**
	2	+ * Dropdown Pages
	3	+ *
	4	+ * @since 4.2.5.1
	5	+ * @version 1.0.0
	6	+ */
	7	+import * as lpUtils from 'lpAssetsJsPath/utils.js';
	8	+import * as lpToastify from 'lpAssetsJsPath/lpToastify.js';
12	9
13		- function addNewPageToList( args ) {
14		- const $new_option = $( '<option value="' + args.ID + '">' + args.name + '</option>' );
15		- const position = $.inArray( args.ID + '', args.positions );
	10	+export class DropdownPages {
	11	+ static selectors = {
	12	+ elDropdown: '.learn-press-dropdown-pages',
	13	+ elSelect: 'select',
	14	+ elListWrap: '.list-pages-wrapper',
	15	+ elActions: '.quick-add-page-actions',
	16	+ elForm: '.quick-add-page-inline',
	17	+ elButtonQuickAdd: '.button-quick-add-page',
	18	+ elInput: '.quick-add-page-inline input[type="text"]',
	19	+ elButtonSubmit: '.quick-add-page-inline button',
	20	+ elButtonCancel: '.quick-add-page-inline a',
	21	+ };
16	22
17		- $( '.learn-press-dropdown-pages select' ).each( function() {
18		- const $sel = $( this ),
19		- $option = $new_option.clone();
20		- if ( position === 0 ) {
21		- $( 'option', $sel ).each( function() {
22		- if ( parseInt( $( this ).val() ) ) {
23		- $option.insertBefore( $( this ) );
24		- return false;
25		- }
26		- } );
27		- } else if ( position === args.positions.length - 1 ) {
28		- $sel.append( $option );
29		- } else {
30		- $option.insertAfter( $( 'option[value="' + args.positions[ position - 1 ] + '"]', $sel ) );
	23	+ constructor() {
	24	+ this.elDropdowns = [];
	25	+ }
	26	+
	27	+ init() {
	28	+ this.elDropdowns = document.querySelectorAll( DropdownPages.selectors.elDropdown );
	29	+ if ( ! this.elDropdowns.length ) {
	30	+ return;
	31	+ }
	32	+
	33	+ this.events();
	34	+ }
	35	+
	36	+ events() {
	37	+ // Check and attach events only once
	38	+ if ( DropdownPages._loadedEvents ) {
	39	+ return;
	40	+ }
	41	+
	42	+ DropdownPages._loadedEvents = this;
	43	+
	44	+ // Change events
	45	+ lpUtils.eventHandlers( 'change', [
	46	+ {
	47	+ selector: DropdownPages.selectors.elDropdown,
	48	+ class: this,
	49	+ callBack: this.handleChangeSelect.name,
	50	+ },
	51	+ ] );
	52	+
	53	+ // Click events
	54	+ lpUtils.eventHandlers( 'click', [
	55	+ {
	56	+ selector: DropdownPages.selectors.elButtonSubmit,
	57	+ class: this,
	58	+ callBack: this.handleSubmit.name,
	59	+ },
	60	+ {
	61	+ selector: DropdownPages.selectors.elButtonCancel,
	62	+ class: this,
	63	+ callBack: this.handleCancel.name,
	64	+ },
	65	+ {
	66	+ selector: DropdownPages.selectors.elButtonQuickAdd,
	67	+ class: this,
	68	+ callBack: this.handleQuickAdd.name,
	69	+ },
	70	+ ] );
	71	+
	72	+ // Keydown events
	73	+ lpUtils.eventHandlers( 'keydown', [
	74	+ {
	75	+ selector: DropdownPages.selectors.elInput,
	76	+ class: this,
	77	+ callBack: this.handleInputEnter.name,
	78	+ checkIsEventEnter: true,
	79	+ },
	80	+ {
	81	+ selector: DropdownPages.selectors.elInput,
	82	+ class: this,
	83	+ callBack: this.handleInputEscape.name,
	84	+ },
	85	+ ] );
	86	+ }
	87	+
	88	+ handleChangeSelect( args ) {
	89	+ const { e } = args;
	90	+ const elSelect = e.target;
	91	+ if ( ! elSelect.matches( DropdownPages.selectors.elSelect ) ) {
	92	+ return;
	93	+ }
	94	+
	95	+ const elDropdown = elSelect.closest( DropdownPages.selectors.elDropdown );
	96	+ if ( ! elDropdown ) {
	97	+ return;
	98	+ }
	99	+
	100	+ const elActions = elDropdown.querySelector( DropdownPages.selectors.elActions );
	101	+
	102	+ if ( elActions ) {
	103	+ elActions.classList.add( 'hide-if-js' );
	104	+ }
	105	+
	106	+ if ( parseInt( elSelect.value, 10 ) ) {
	107	+ if ( elActions ) {
	108	+ const editLink = elActions.querySelector( 'a.edit-page' );
	109	+ const viewLink = elActions.querySelector( 'a.view-page' );
	110	+ if ( editLink ) {
	111	+ editLink.href = `post.php?post=${ elSelect.value }&action=edit`;
31	112	}
32		- } );
	113	+ if ( viewLink ) {
	114	+ viewLink.href = `${ window.lpGlobalSettings.siteurl }?page_id=${ elSelect.value }`;
	115	+ }
	116	+ elActions.classList.remove( 'hide-if-js' );
	117	+ }
	118	+ elSelect.setAttribute( 'data-selected', elSelect.value );
33	119	}
	120	+ }
34	121
35		- $select.on( 'change', function() {
36		- $actions.addClass( 'hide-if-js' );
37		- if ( this.value !== 'add_new_page' ) {
38		- if ( parseInt( this.value ) ) {
39		- $actions.find( 'a.edit-page' ).attr( 'href', 'post.php?post=' + this.value + '&action=edit' );
40		- $actions.find( 'a.view-page' ).attr( 'href', lpGlobalSettings.siteurl + '?page_id=' + this.value );
41		- $actions.removeClass( 'hide-if-js' );
42		- $select.attr( 'data-selected', this.value );
43		- }
44		- return;
	122	+ openQuickAddForm( elDropdown ) {
	123	+ const elListWrap = elDropdown.querySelector( DropdownPages.selectors.elListWrap );
	124	+ const elForm = elDropdown.querySelector( DropdownPages.selectors.elForm );
	125	+
	126	+ if ( elListWrap ) {
	127	+ elListWrap.classList.add( 'hide-if-js' );
	128	+ }
	129	+ if ( elForm ) {
	130	+ elForm.classList.remove( 'hide-if-js' );
	131	+ const elInput = elForm.querySelector( 'input' );
	132	+ if ( elInput ) {
	133	+ elInput.value = '';
	134	+ elInput.focus();
45	135	}
46		- $listWrap.addClass( 'hide-if-js' );
47		- $form.removeClass( 'hide-if-js' ).find( 'input' ).trigger( 'focus' ).val( '' );
48		- } );
	136	+ }
	137	+ }
49	138
50		- // Select 2
51		- // $select
52		- // .css( 'width', $select.width() + 50 )
53		- // .find( 'option' ).each( function() {
54		- // $( this ).html( $( this ).html().replace( /&nbsp;&nbsp;&nbsp;/g, '' ) );
55		- // } );
	139	+ handleSubmit( args ) {
	140	+ const { e } = args;
	141	+ e.preventDefault();
56	142
57		- // $select.select2( {
58		- // allowClear: true,
59		- // placeholder: lpDataAdmin.i18n.select_page,
60		- // } );
	143	+ const elButton = e.target.closest( DropdownPages.selectors.elButtonSubmit );
	144	+ if ( ! elButton ) {
	145	+ return;
	146	+ }
61	147
62		- // $select.on( 'select2:select', function( e ) {
63		- // const data = e.params.data;
64		- // } );
65		- //end
	148	+ const elForm = elButton.closest( DropdownPages.selectors.elForm );
	149	+ if ( ! elForm ) {
	150	+ return;
	151	+ }
66	152
67		- $element.on( 'click', '.quick-add-page-inline button', function() {
68		- const $button = $( this ),
69		- $input = $form.find( 'input' ),
70		- page_name = $input.val();
71		- if ( ! page_name ) {
72		- alert( 'Please enter the name of page' );
73		- $input.trigger( 'focus' );
74		- return;
	153	+ const elDropdown = elForm.closest( DropdownPages.selectors.elDropdown );
	154	+ if ( ! elDropdown ) {
	155	+ return;
	156	+ }
	157	+
	158	+ const elInput = elForm.querySelector( 'input' );
	159	+ const elListWrap = elDropdown.querySelector( DropdownPages.selectors.elListWrap );
	160	+ const pageName = elInput ? elInput.value.trim() : '';
	161	+
	162	+ if ( ! pageName ) {
	163	+ alert( 'Please enter the name of page' );
	164	+ if ( elInput ) {
	165	+ elInput.focus();
75	166	}
76		- $button.prop( 'disabled', true );
	167	+ return;
	168	+ }
77	169
78		- const tr = $button.closest( 'tr' );
79		- let field_name = '';
80		- if ( tr.length ) {
81		- field_name = tr.find( '.field_name' ).attr( 'name' );
82		- }
	170	+ elButton.disabled = true;
83	171
84		- $.ajax( {
85		- url: lpGlobalSettings.ajax,
86		- data: {
87		- action: 'learnpress_create_page',
88		- page_name,
89		- field_name,
90		- nonce: lpDataAdmin.nonce,
91		- },
92		- type: 'post',
93		- dataType: 'html',
94		- success( response ) {
95		- response = LP.parseJSON( response );
96		- if ( response.page ) {
97		- addNewPageToList( {
98		- ID: response.page.ID,
99		- name: response.page.post_title,
100		- positions: response.positions,
101		- } );
102		- /*$select.val( response.page.ID ).trigger( 'focus' );
103		- $select.val( response.page.ID ).trigger( 'change' );*/
	172	+ let fieldName = '';
	173	+ const elFieldName = elDropdown.querySelector( 'select' );
	174	+ fieldName = elFieldName ? elFieldName.name : '';
	175	+
	176	+ if ( ! window.lpGlobalSettings || ! window.lpGlobalSettings.ajax || ! window.lpDataAdmin || ! window.lpDataAdmin.nonce ) {
	177	+ elButton.disabled = false;
	178	+ return;
	179	+ }
	180	+
	181	+ const formData = new FormData();
	182	+ formData.append( 'action', 'learnpress_create_page' );
	183	+ formData.append( 'page_name', pageName );
	184	+ formData.append( 'field_name', fieldName );
	185	+ formData.append( 'nonce', window.lpDataAdmin.nonce );
	186	+
	187	+ fetch( window.lpGlobalSettings.ajax, {
	188	+ method: 'POST',
	189	+ body: formData,
	190	+ } )
	191	+ .then( ( response ) => response.json() )
	192	+ .then( ( response ) => {
	193	+ const { message, status, data } = response;
	194	+ if ( status === 'success' ) {
	195	+ elForm.classList.add( 'hide-if-js' );
	196	+
	197	+ lpToastify.show( message, 'success' );
	198	+
	199	+ setTimeout( () => {
104	200	window.location.reload();
105		- $form.addClass( 'hide-if-js' );
106		- } else if ( response.error ) {
107		- alert( response.error );
	201	+ }, 1000 )
	202	+ } else {
	203	+ throw new Error( message );
	204	+ }
	205	+ } )
	206	+ .catch( ( error ) => {
	207	+ lpToastify.show( error.message, 'error' );
	208	+ } )
	209	+ .finally( () => {
	210	+ elButton.disabled = false;
	211	+ if ( elListWrap ) {
	212	+ elListWrap.classList.remove( 'hide-if-js' );
	213	+ }
	214	+ } );
	215	+ }
	216	+
	217	+ addNewPageToList( args ) {
	218	+ const { ID, name, positions } = args;
	219	+ const option = document.createElement( 'option' );
	220	+ option.value = ID;
	221	+ option.textContent = name;
	222	+
	223	+ const position = positions.indexOf( ID + '' );
	224	+
	225	+ document.querySelectorAll( `${ DropdownPages.selectors.elDropdown } ${ DropdownPages.selectors.elSelect }` ).forEach( ( select ) => {
	226	+ const newOption = option.cloneNode( true );
	227	+ if ( position === 0 ) {
	228	+ const options = select.querySelectorAll( 'option' );
	229	+ for ( const opt of options ) {
	230	+ if ( parseInt( opt.value, 10 ) ) {
	231	+ opt.before( newOption );
	232	+ break;
108	233	}
109		- $button.prop( 'disabled', false );
110		- $listWrap.removeClass( 'hide-if-js' );
111		- },
112		- } );
113		- } ).on( 'click', '.quick-add-page-inline a', function( e ) {
114		- e.preventDefault();
115		- $form.addClass( 'hide-if-js' );
116		- $select.val( $select.attr( 'data-selected' ) + '' ).removeAttr( 'disabled' ).trigger( 'change' );
117		- $listWrap.removeClass( 'hide-if-js' );
118		- } ).on( 'click', '.button-quick-add-page', function( e ) {
119		- $select.val( 'add_new_page' ).trigger( 'change' );
120		- } ).on( 'keypress keydown', '.quick-add-page-inline input[type="text"]', function( e ) {
121		- if ( e.key == 'Enter' && e.type == 'keypress' ) {
122		- e.preventDefault();
123		- $( this ).siblings( 'button' ).trigger( 'click' );
124		- } else if ( e.key == 'Escape' && e.type == 'keydown' ) {
125		- $( this ).siblings( 'a' ).trigger( 'click' );
	234	+ }
	235	+ } else if ( position === positions.length - 1 ) {
	236	+ select.appendChild( newOption );
	237	+ } else {
	238	+ const prevOption = select.querySelector( `option[value="${ positions[ position - 1 ] }"]` );
	239	+ if ( prevOption ) {
	240	+ prevOption.after( newOption );
	241	+ } else {
	242	+ select.appendChild( newOption );
	243	+ }
126	244	}
127	245	} );
128	246	}
129	247
130		- $.fn.LP( 'DropdownPages', function() {
131		- return $.each( this, function() {
132		- let $instance = $( this ).data( 'DropdownPages' );
133		- if ( ! $instance ) {
134		- $instance = new DropdownPages( this, {} );
135		- $( this ).data( 'DropdownPages', $instance );
136		- }
137		- return $instance;
138		- } );
139		- } );
140		-}( jQuery ) );
	248	+ handleCancel( args ) {
	249	+ const { e } = args;
	250	+ e.preventDefault();
	251	+
	252	+ const elCancel = e.target.closest( DropdownPages.selectors.elButtonCancel );
	253	+ if ( ! elCancel ) {
	254	+ return;
	255	+ }
	256	+
	257	+ const elForm = elCancel.closest( DropdownPages.selectors.elForm );
	258	+ if ( ! elForm ) {
	259	+ return;
	260	+ }
	261	+
	262	+ const elDropdown = elForm.closest( DropdownPages.selectors.elDropdown );
	263	+ if ( ! elDropdown ) {
	264	+ return;
	265	+ }
	266	+
	267	+ const elSelect = elDropdown.querySelector( DropdownPages.selectors.elSelect );
	268	+ const elListWrap = elDropdown.querySelector( DropdownPages.selectors.elListWrap );
	269	+ const selected = elSelect ? elSelect.getAttribute( 'data-selected' ) : '';
	270	+
	271	+ elForm.classList.add( 'hide-if-js' );
	272	+ if ( elSelect ) {
	273	+ elSelect.value = selected + '';
	274	+ elSelect.removeAttribute( 'disabled' );
	275	+ elSelect.dispatchEvent( new Event( 'change', { bubbles: true } ) );
	276	+ }
	277	+ if ( elListWrap ) {
	278	+ elListWrap.classList.remove( 'hide-if-js' );
	279	+ }
	280	+ }
	281	+
	282	+ handleQuickAdd( args ) {
	283	+ const { e } = args;
	284	+ const elButton = e.target.closest( DropdownPages.selectors.elButtonQuickAdd );
	285	+ if ( ! elButton ) {
	286	+ return;
	287	+ }
	288	+
	289	+ const elDropdown = elButton.closest( DropdownPages.selectors.elDropdown );
	290	+ if ( ! elDropdown ) {
	291	+ return;
	292	+ }
	293	+
	294	+ this.openQuickAddForm( elDropdown );
	295	+ }
	296	+
	297	+ handleInputEnter( args ) {
	298	+ const { e } = args;
	299	+ e.preventDefault();
	300	+
	301	+ const elInput = e.target;
	302	+ const elForm = elInput.closest( DropdownPages.selectors.elForm );
	303	+ if ( ! elForm ) {
	304	+ return;
	305	+ }
	306	+
	307	+ const elButton = elForm.querySelector( 'button' );
	308	+ if ( elButton ) {
	309	+ elButton.click();
	310	+ }
	311	+ }
	312	+
	313	+ handleInputEscape( args ) {
	314	+ const { e } = args;
	315	+ if ( e.key !== 'Escape' ) {
	316	+ return;
	317	+ }
	318	+
	319	+ const elInput = e.target;
	320	+ const elForm = elInput.closest( DropdownPages.selectors.elForm );
	321	+ if ( ! elForm ) {
	322	+ return;
	323	+ }
	324	+
	325	+ const elCancel = elForm.querySelector( 'a' );
	326	+ if ( elCancel ) {
	327	+ elCancel.click();
	328	+ }
	329	+ }
	330	+}
141	331