← All changes | assets/src/js/frontend/course-builder/builder-course/extra-info.js +169 -169 4.3.9 → 4.4.9 View file →

		@@ -1,169 +1,169 @@
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		-}
	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	+}