LearnPress – WordPress LMS Plugin for Create and Sell Online Courses / 4.3.8

LearnPress – WordPress LMS Plugin for Create and Sell Online Courses v4.3.8

learnpress / assets / src / js / frontend / course-builder / builder-course / extra-info.js

extra-info.js in LearnPress – WordPress LMS Plugin for Create and Sell Online Courses 4.3.8, at assets/src/js/frontend/course-builder/builder-course/extra-info.js

170 lines 4.4 KB

Raw Download Zip

1	import * as lpUtils from 'lpAssetsJsPath/utils.js';
2	import Sortable from 'sortablejs';
3
4	export class MetaboxExtraInfo {
5	constructor() {
6	this.init();
7	}
8
9	static selectors = {
10	elExtraMetaboxAdd: '.lp_course_extra_meta_box__add',
11	elExtraMetaboxContent: '.lp_course_extra_meta_box__content',
12	elExtraMetaboxFields: '.lp_course_extra_meta_box__fields',
13	elExtraMetaboxField: '.lp_course_extra_meta_box__field',
14	elExtraMetaboxDelete: '.lp_course_extra_meta_box__fields a.delete',
15
16	elFaqMetaboxAdd: '.lp_course_faq_meta_box__add',
17	elFaqMetaboxContent: '.lp_course_faq_meta_box__content',
18	elFaqMetaboxFields: '.lp_course_faq_meta_box__fields',
19	elFaqMetaboxField: '.lp_course_faq_meta_box__field',
20	elFaqMetaboxDelete: '.lp_course_faq_meta_box__fields a.delete',
21	};
22
23	init() {
24	this.initSortable();
25	this.events();
26	}
27
28	events() {
29	if ( MetaboxExtraInfo._loadedEvents ) {
30	return;
31	}
32	MetaboxExtraInfo._loadedEvents = true;
33
34	lpUtils.eventHandlers( 'click', [
35	{
36	selector: MetaboxExtraInfo.selectors.elExtraMetaboxAdd,
37	class: this,
38	callBack: this.handleExtraMetaboxAdd.name,
39	},
40	{
41	selector: MetaboxExtraInfo.selectors.elExtraMetaboxDelete,
42	class: this,
43	callBack: this.handleExtraMetaboxDelete.name,
44	},
45	{
46	selector: MetaboxExtraInfo.selectors.elFaqMetaboxAdd,
47	class: this,
48	callBack: this.handleFaqMetaboxAdd.name,
49	},
50	{
51	selector: MetaboxExtraInfo.selectors.elFaqMetaboxDelete,
52	class: this,
53	callBack: this.handleFaqMetaboxDelete.name,
54	},
55	] );
56	}
57
58	handleExtraMetaboxAdd( args ) {
59	const { e, target } = args;
60	e.preventDefault();
61
62	const content = target.closest( MetaboxExtraInfo.selectors.elExtraMetaboxContent );
63	if ( ! content ) return;
64
65	const fields = content.querySelector( MetaboxExtraInfo.selectors.elExtraMetaboxFields );
66	const addData = target.dataset.add;
67
68	if ( fields && addData ) {
69	fields.insertAdjacentHTML( 'beforeend', addData );
70
71	const lastField = fields.querySelector(
72	`${ MetaboxExtraInfo.selectors.elExtraMetaboxField }:last-child`
73	);
74	if ( lastField ) {
75	const input = lastField.querySelector( 'input' );
76	if ( input ) {
77	setTimeout( () => input.focus(), 100 );
78	}
79	}
80	}
81
82	return false;
83	}
84
85	handleExtraMetaboxDelete( args ) {
86	const { e, target } = args;
87	e.preventDefault();
88
89	const field = target.closest( MetaboxExtraInfo.selectors.elExtraMetaboxField );
90	if ( field ) {
91	field.remove();
92	}
93
94	return false;
95	}
96
97	handleFaqMetaboxAdd( args ) {
98	const { e, target } = args;
99	e.preventDefault();
100
101	const content = target.closest( MetaboxExtraInfo.selectors.elFaqMetaboxContent );
102	if ( ! content ) return;
103
104	const fields = content.querySelector( MetaboxExtraInfo.selectors.elFaqMetaboxFields );
105	const addData = target.dataset.add;
106
107	if ( fields && addData ) {
108	fields.insertAdjacentHTML( 'beforeend', addData );
109	}
110
111	return false;
112	}
113
114	handleFaqMetaboxDelete( args ) {
115	const { e, target } = args;
116	e.preventDefault();
117
118	const field = target.closest( MetaboxExtraInfo.selectors.elFaqMetaboxField );
119	if ( field ) {
120	field.remove();
121	}
122
123	return false;
124	}
125
126	initSortable() {
127	const extraFieldsContainers = document.querySelectorAll( '.lp_course_extra_meta_box__fields' );
128
129	extraFieldsContainers.forEach( ( container ) => {
130	new Sortable( container, {
131	animation: 150,
132	handle: '.sort',
133	draggable: '.lp_course_extra_meta_box__field',
134	ghostClass: 'sortable-ghost',
135	chosenClass: 'sortable-chosen',
136	dragClass: 'sortable-drag',
137	forceFallback: false,
138	scrollSensitivity: 40,
139	onStart: ( evt ) => {
140	evt.item.classList.add( 'is-dragging' );
141	},
142	onEnd: ( evt ) => {
143	evt.item.classList.remove( 'is-dragging' );
144	},
145	} );
146	} );
147
148	const faqFieldsContainers = document.querySelectorAll( '.lp_course_faq_meta_box__fields' );
149
150	faqFieldsContainers.forEach( ( container ) => {
151	new Sortable( container, {
152	animation: 150,
153	handle: '.sort',
154	draggable: '.lp_course_faq_meta_box__field',
155	ghostClass: 'sortable-ghost',
156	chosenClass: 'sortable-chosen',
157	dragClass: 'sortable-drag',
158	forceFallback: false,
159	scrollSensitivity: 40,
160	onStart: ( evt ) => {
161	evt.item.classList.add( 'is-dragging' );
162	},
163	onEnd: ( evt ) => {
164	evt.item.classList.remove( 'is-dragging' );
165	},
166	} );
167	} );
168	}
169	}
170