| 1 |
/******/ (() => { // webpackBootstrap |
| 2 |
/*!************************************************!*\ |
| 3 |
!*** ./assets/src/js/admin/course-material.js ***! |
| 4 |
\************************************************/ |
| 5 |
document.addEventListener('DOMContentLoaded', function () { |
| 6 |
const $ = window.jQuery; |
| 7 |
const postID = document.getElementById('current-material-post-id').value, |
| 8 |
max_file_size = document.getElementById('material-max-file-size').value, |
| 9 |
accept_file = document.querySelector('.lp-material--field-upload').getAttribute('accept').split(','), |
| 10 |
can_upload = document.getElementById('available-to-upload'), |
| 11 |
add_btn = document.getElementById('btn-lp--add-material'), |
| 12 |
group_template = document.getElementById('lp-material--add-material-template'), |
| 13 |
material__group_container = document.getElementById('lp-material--group-container'), |
| 14 |
material_tab = document.getElementById('lp-material-container'), |
| 15 |
material_save_btn = document.getElementById('btn-lp--save-material'); |
| 16 |
const getResponse = async (ele, postID) => { |
| 17 |
const elementMaterial = document.querySelector('.lp-material--table tbody'); |
| 18 |
try { |
| 19 |
const url = `${lpDataAdmin.lp_rest_url}lp/v1/material/item-materials/${postID}`; |
| 20 |
fetch(url, { |
| 21 |
method: 'GET', |
| 22 |
headers: { |
| 23 |
'X-WP-Nonce': lpGlobalSettings.nonce, |
| 24 |
'Content-Type': 'application/json' |
| 25 |
} |
| 26 |
}).then(response => response.json()).then(response => { |
| 27 |
const { |
| 28 |
data, |
| 29 |
status |
| 30 |
} = response; |
| 31 |
if (status !== 'success') { |
| 32 |
console.error(response.message); |
| 33 |
return; |
| 34 |
} |
| 35 |
if (data && data.items && data.items.length > 0) { |
| 36 |
const materials = data.items; |
| 37 |
if (ele.querySelector('.lp-skeleton-animation')) { |
| 38 |
ele.querySelector('.lp-skeleton-animation').remove(); |
| 39 |
} |
| 40 |
for (let i = 0; i < materials.length; i++) { |
| 41 |
insertRow(elementMaterial, materials[i]); |
| 42 |
} |
| 43 |
} |
| 44 |
}).catch(err => console.log(err)); |
| 45 |
} catch (error) { |
| 46 |
console.log(error.message); |
| 47 |
} |
| 48 |
}; |
| 49 |
const insertRow = (parent, data) => { |
| 50 |
if (!parent) { |
| 51 |
return; |
| 52 |
} |
| 53 |
const delete_btn_text = document.getElementById('delete-material-row-text').value; |
| 54 |
parent.insertAdjacentHTML('beforeend', `<tr data-id="${data.file_id}" data-sort="${data.orders}" > |
| 55 |
<td class="sort"><span class="dashicons dashicons-menu"></span> ${data.file_name}</td> |
| 56 |
<td>${capitalizeFirstChar(data.method)}</td> |
| 57 |
<td><a href="javascript:void(0)" class="delete-material-row" data-id="${data.file_id}">${delete_btn_text}</a></td> |
| 58 |
</tr>`); |
| 59 |
}; |
| 60 |
const capitalizeFirstChar = str => str.charAt(0).toUpperCase() + str.substring(1); |
| 61 |
//load material data from API |
| 62 |
getResponse(material_tab, postID); |
| 63 |
|
| 64 |
//add material group field |
| 65 |
add_btn.addEventListener('click', function (e) { |
| 66 |
const can_upload_data = ~~this.getAttribute('can-upload'); |
| 67 |
const groups = material__group_container.querySelectorAll('.lp-material--group').length; |
| 68 |
if (groups >= can_upload_data) { |
| 69 |
return false; |
| 70 |
} |
| 71 |
material__group_container.insertAdjacentHTML('afterbegin', group_template.innerHTML); |
| 72 |
}); |
| 73 |
//switch input when change method between "upload" and "external" |
| 74 |
material_tab.addEventListener('change', function (event) { |
| 75 |
const target = event.target; |
| 76 |
if (target.classList.contains('lp-material--field-method')) { |
| 77 |
const method = target.value; |
| 78 |
const upload_field_template = document.getElementById('lp-material--upload-field-template').innerHTML, |
| 79 |
external_field_template = document.getElementById('lp-material--external-field-template').innerHTML; |
| 80 |
switch (method) { |
| 81 |
case 'upload': |
| 82 |
target.parentNode.insertAdjacentHTML('afterend', upload_field_template); |
| 83 |
target.closest('.lp-material--group').querySelector('.lp-material--external-wrap').remove(); |
| 84 |
break; |
| 85 |
case 'external': |
| 86 |
target.parentNode.insertAdjacentHTML('afterend', external_field_template); |
| 87 |
target.closest('.lp-material--group').querySelector('.lp-material--upload-wrap').remove(); |
| 88 |
break; |
| 89 |
} |
| 90 |
} |
| 91 |
if (target.classList.contains('lp-material--field-upload')) { |
| 92 |
if (target.value && target.files.length > 0) { |
| 93 |
if (!accept_file.includes(target.files[0].type)) { |
| 94 |
alert('This file is not allowed! Please choose another file!'); |
| 95 |
target.value = ''; |
| 96 |
} else if (target.files[0].size > max_file_size * 1024 * 1024) { |
| 97 |
alert(`This file size is greater than ${max_file_size}MB! Please choose another file!`); |
| 98 |
target.value = ''; |
| 99 |
} |
| 100 |
} |
| 101 |
} |
| 102 |
}); |
| 103 |
// Dynamic click action ... |
| 104 |
material_tab.addEventListener('click', function (event) { |
| 105 |
const target = event.target; |
| 106 |
if (target.classList.contains('lp-material--delete') && target.nodeName == 'BUTTON') { |
| 107 |
target.closest('.lp-material--group').remove(); |
| 108 |
} else if (target.classList.contains('lp-material-save-field')) { |
| 109 |
// save a file |
| 110 |
let material = target.closest('.lp-material--group'); |
| 111 |
material = singleNode(material); |
| 112 |
// target.classList.add( 'loading' ); |
| 113 |
lpSaveMaterial(material, true, target); |
| 114 |
// target.classList.remove( 'loading' ); |
| 115 |
} |
| 116 |
return false; |
| 117 |
}); |
| 118 |
|
| 119 |
//save all material files |
| 120 |
material_save_btn.addEventListener('click', function (event) { |
| 121 |
const materials = material__group_container.querySelectorAll('.lp-material--group'); |
| 122 |
if (materials.length > 0) { |
| 123 |
// material_save_btn.classList.add( 'loading' ); |
| 124 |
lpSaveMaterial(materials, false, material_save_btn); |
| 125 |
// material_save_btn.classList.remove( 'loading' ); |
| 126 |
} |
| 127 |
}); |
| 128 |
function lpSaveMaterial(materials, is_single = false, target) { |
| 129 |
if (materials.length > 0) { |
| 130 |
let material_data = []; |
| 131 |
let formData = new FormData(), |
| 132 |
send_request = true; |
| 133 |
materials.forEach(function (ele, index) { |
| 134 |
const label = ele.querySelector('.lp-material--field-title').value, |
| 135 |
method = ele.querySelector('.lp-material--field-method').value, |
| 136 |
external_field = ele.querySelector('.lp-material--field-external-link'), |
| 137 |
upload_field = ele.querySelector('.lp-material--field-upload'); |
| 138 |
let file, link; |
| 139 |
if (!label) { |
| 140 |
send_request = false; |
| 141 |
} |
| 142 |
switch (method) { |
| 143 |
case 'upload': |
| 144 |
if (upload_field.value) { |
| 145 |
file = upload_field.files[0].name; |
| 146 |
link = ''; |
| 147 |
formData.append('file[]', upload_field.files[0]); |
| 148 |
} else { |
| 149 |
send_request = false; |
| 150 |
} |
| 151 |
break; |
| 152 |
case 'external': |
| 153 |
link = external_field.value; |
| 154 |
file = ''; |
| 155 |
if (!link) { |
| 156 |
send_request = false; |
| 157 |
} |
| 158 |
break; |
| 159 |
} |
| 160 |
material_data.push({ |
| 161 |
label, |
| 162 |
method, |
| 163 |
file, |
| 164 |
link |
| 165 |
}); |
| 166 |
}); |
| 167 |
if (!send_request) { |
| 168 |
alert('Enter file title, choose file or enter file link!'); |
| 169 |
} else { |
| 170 |
// console.log(material_data); |
| 171 |
material_data = JSON.stringify(material_data); |
| 172 |
const url = `${lpGlobalSettings.rest}lp/v1/material/item-materials/${postID}`; |
| 173 |
formData.append('data', material_data); |
| 174 |
target.classList.add('loading'); |
| 175 |
fetch(url, { |
| 176 |
method: 'POST', |
| 177 |
headers: { |
| 178 |
'X-WP-Nonce': lpGlobalSettings.nonce |
| 179 |
}, |
| 180 |
body: formData |
| 181 |
}) // wrapped |
| 182 |
.then(res => res.text()).then(resString => { |
| 183 |
// console.log( data ); |
| 184 |
if (!is_single) { |
| 185 |
material__group_container.innerHTML = ''; |
| 186 |
} else { |
| 187 |
materials[0].remove(); |
| 188 |
} |
| 189 |
const res = JSON.parse(resString); |
| 190 |
const { |
| 191 |
message, |
| 192 |
data, |
| 193 |
status |
| 194 |
} = res; |
| 195 |
alert(message); |
| 196 |
if (status === 'success') { |
| 197 |
if (data.length > 0) { |
| 198 |
const material_table = document.querySelector('.lp-material--table'); |
| 199 |
const thead = material_table.querySelector('thead'); |
| 200 |
const tbody = material_table.querySelector('tbody'); |
| 201 |
thead.classList.remove('hidden'); |
| 202 |
for (let i = 0; i < data.length; i++) { |
| 203 |
const row = data[i]; |
| 204 |
insertRow(tbody, row); |
| 205 |
} |
| 206 |
can_upload.innerText = parseInt(can_upload.innerText) - data.length; |
| 207 |
add_btn.setAttribute('can-upload', can_upload.innerText); |
| 208 |
} |
| 209 |
} |
| 210 |
}).finally(() => { |
| 211 |
target.classList.remove('loading'); |
| 212 |
}).catch(err => console.log(err)); |
| 213 |
} |
| 214 |
} |
| 215 |
} |
| 216 |
//delete material |
| 217 |
document.addEventListener('click', function (e) { |
| 218 |
const target = e.target; |
| 219 |
if (target.classList.contains('delete-material-row') && target.nodeName == 'A') { |
| 220 |
const rowID = target.getAttribute('data-id'), |
| 221 |
//material file ID |
| 222 |
message = document.getElementById('delete-material-message').value; //Delete message content |
| 223 |
if (confirm(message)) { |
| 224 |
wp.apiFetch({ |
| 225 |
path: `lp/v1/material/${rowID}`, |
| 226 |
method: 'DELETE', |
| 227 |
data: { |
| 228 |
item_id: postID |
| 229 |
} |
| 230 |
}).then(res => { |
| 231 |
// console.log( res ); |
| 232 |
if (res.status !== 200 || !res.delete) { |
| 233 |
alert(res.message); |
| 234 |
} else { |
| 235 |
target.closest('tr').remove(); |
| 236 |
can_upload.innerText = ~~can_upload.innerText + 1; |
| 237 |
add_btn.setAttribute('can-upload', ~~can_upload.innerText); |
| 238 |
} |
| 239 |
}).catch(err => { |
| 240 |
console.log(err); |
| 241 |
}).finally(() => {}); |
| 242 |
} |
| 243 |
} |
| 244 |
}); |
| 245 |
const singleNode = (nodeList => node => { |
| 246 |
const layer = { |
| 247 |
// define our specific case |
| 248 |
0: { |
| 249 |
value: node, |
| 250 |
enumerable: true |
| 251 |
}, |
| 252 |
length: { |
| 253 |
value: 1 |
| 254 |
}, |
| 255 |
item: { |
| 256 |
value(i) { |
| 257 |
return this[+i || 0]; |
| 258 |
}, |
| 259 |
enumerable: true |
| 260 |
} |
| 261 |
}; |
| 262 |
return Object.create(nodeList, layer); // put our case on top of true NodeList |
| 263 |
})(document.createDocumentFragment().childNodes); // scope a true NodeList |
| 264 |
$('.lp-material--table tbody').sortable({ |
| 265 |
items: 'tr', |
| 266 |
cursor: 'move', |
| 267 |
axis: 'y', |
| 268 |
handle: 'td.sort', |
| 269 |
scrollSensitivity: 40, |
| 270 |
forcePlaceholderSize: true, |
| 271 |
helper: 'clone', |
| 272 |
opacity: 0.65, |
| 273 |
update(event, ui) { |
| 274 |
$(this).sortable('option', 'disabled', true); |
| 275 |
updateSort(); |
| 276 |
$(this).sortable('option', 'disabled', false); |
| 277 |
} |
| 278 |
}); |
| 279 |
function updateSort() { |
| 280 |
const items = $('.lp-material--table tbody tr'), |
| 281 |
data = []; |
| 282 |
// $( ".lp-material--table tbody tr" ).sortable( "option", "disabled", true ); |
| 283 |
items.each(function (i, item) { |
| 284 |
$(this).attr('data-sort', i + 1); |
| 285 |
data.push({ |
| 286 |
file_id: ~~$(this).attr('data-id'), |
| 287 |
orders: i + 1 |
| 288 |
}); |
| 289 |
}); |
| 290 |
wp.apiFetch({ |
| 291 |
path: `lp/v1/material/item-materials/${postID}`, |
| 292 |
method: 'PUT', |
| 293 |
data: { |
| 294 |
sort_arr: JSON.stringify(data) |
| 295 |
} |
| 296 |
}).then(res => { |
| 297 |
if (res.status == 200) { |
| 298 |
// |
| 299 |
} else { |
| 300 |
alert('Sort table fail.'); |
| 301 |
} |
| 302 |
}).catch(err => { |
| 303 |
console.log(err); |
| 304 |
}).finally(() => {}); |
| 305 |
// $( ".lp-material--table tbody tr" ).sortable( "option", "disabled", false ); |
| 306 |
// console.log( data ); |
| 307 |
} |
| 308 |
}); |
| 309 |
/******/ })() |
| 310 |
; |
| 311 |
//# sourceMappingURL=course-material.js.map |
