| 1 |
/** |
| 2 |
* Handle install/uninstall sample course data on the Tools page. |
| 3 |
* |
| 4 |
* @since 4.4.5 |
| 5 |
* @version 1.0.0 |
| 6 |
*/ |
| 7 |
import * as lpUtils from 'lpAssetsJsPath/utils.js'; |
| 8 |
import * as lpToastify from 'lpAssetsJsPath/lpToastify.js'; |
| 9 |
|
| 10 |
export default class HandleSampleData { |
| 11 |
static selectors = { |
| 12 |
wrapper: '.lp-install-sample', |
| 13 |
form: '.lp-form-handle-sample-data', |
| 14 |
elBtnHandleSampleData: '.lp-btn-install-sample-handle', |
| 15 |
elTriggerToggle: '.lp-install-sample__toggle-options', |
| 16 |
elMessage: '.lp-install-sample-message', |
| 17 |
}; |
| 18 |
|
| 19 |
constructor() { |
| 20 |
this.wrapper = null; |
| 21 |
} |
| 22 |
|
| 23 |
init() { |
| 24 |
this.wrapper = document.querySelector( |
| 25 |
HandleSampleData.selectors.wrapper |
| 26 |
); |
| 27 |
if ( ! this.wrapper ) { |
| 28 |
return; |
| 29 |
} |
| 30 |
|
| 31 |
this.preventFormSubmit(); |
| 32 |
this.events(); |
| 33 |
} |
| 34 |
|
| 35 |
preventFormSubmit() { |
| 36 |
const form = this.wrapper.querySelector( |
| 37 |
HandleSampleData.selectors.form |
| 38 |
); |
| 39 |
if ( form ) { |
| 40 |
form.addEventListener( 'submit', ( e ) => { |
| 41 |
e.preventDefault(); |
| 42 |
} ); |
| 43 |
} |
| 44 |
} |
| 45 |
|
| 46 |
events() { |
| 47 |
if ( HandleSampleData._loadedEvents ) { |
| 48 |
return; |
| 49 |
} |
| 50 |
|
| 51 |
HandleSampleData._loadedEvents = this; |
| 52 |
|
| 53 |
lpUtils.eventHandlers( 'click', [ |
| 54 |
{ |
| 55 |
selector: HandleSampleData.selectors.elBtnHandleSampleData, |
| 56 |
class: this, |
| 57 |
callBack: this.handleAction.name, |
| 58 |
}, |
| 59 |
{ |
| 60 |
selector: HandleSampleData.selectors.elTriggerToggle, |
| 61 |
callBack: ( args ) => { |
| 62 |
const { e, target } = args; |
| 63 |
const elForm = this.wrapper.querySelector( |
| 64 |
HandleSampleData.selectors.form |
| 65 |
); |
| 66 |
if ( elForm ) { |
| 67 |
elForm.classList.toggle( 'lp-hidden' ); |
| 68 |
const textShow = target.dataset.showText; |
| 69 |
const textHide = target.dataset.hideText; |
| 70 |
|
| 71 |
target.textContent = elForm.classList.contains( |
| 72 |
'lp-hidden' |
| 73 |
) |
| 74 |
? textShow |
| 75 |
: textHide; |
| 76 |
} |
| 77 |
}, |
| 78 |
}, |
| 79 |
] ); |
| 80 |
} |
| 81 |
|
| 82 |
handleAction( args ) { |
| 83 |
const { e, target } = args; |
| 84 |
const button = target.closest( |
| 85 |
HandleSampleData.selectors.elBtnHandleSampleData |
| 86 |
); |
| 87 |
|
| 88 |
e.preventDefault(); |
| 89 |
const elMessage = this.wrapper.querySelector( |
| 90 |
HandleSampleData.selectors.elMessage |
| 91 |
); |
| 92 |
|
| 93 |
const message = button.dataset.message; |
| 94 |
if ( ! message || ! confirm( message ) ) { |
| 95 |
return; |
| 96 |
} |
| 97 |
|
| 98 |
elMessage.innerHTML = ''; |
| 99 |
lpUtils.lpSetLoadingEl( button, true ); |
| 100 |
|
| 101 |
const wrapper = button.closest( HandleSampleData.selectors.wrapper ); |
| 102 |
const elForm = wrapper.querySelector( HandleSampleData.selectors.form ); |
| 103 |
|
| 104 |
let dataSend = lpUtils.getDataOfForm( elForm ); |
| 105 |
dataSend.action = button.dataset.action; |
| 106 |
dataSend.id_url = 'handle-sample-data'; |
| 107 |
|
| 108 |
const callBack = { |
| 109 |
success: ( response ) => { |
| 110 |
const { status, message, data } = response; |
| 111 |
if ( 'success' === status ) { |
| 112 |
this.wrapper.querySelector( |
| 113 |
HandleSampleData.selectors.elMessage |
| 114 |
).innerHTML = data.html; |
| 115 |
} else { |
| 116 |
throw new Error( message ); |
| 117 |
} |
| 118 |
}, |
| 119 |
error: ( error ) => { |
| 120 |
lpToastify.show( error, 'error' ); |
| 121 |
}, |
| 122 |
completed: () => { |
| 123 |
lpUtils.lpSetLoadingEl( button, false ); |
| 124 |
setTimeout(() => { |
| 125 |
elMessage.innerHTML = ''; |
| 126 |
}, 3000); |
| 127 |
}, |
| 128 |
}; |
| 129 |
|
| 130 |
window.lpAJAXG.fetchAJAX( dataSend, callBack ); |
| 131 |
} |
| 132 |
} |
| 133 |
|
