| 1 |
import { lpAddQueryArgs, lpFetchAPI, lpGetCurrentURLNoParam } from '../../apps/js/utils/utils'; |
| 2 |
import Cookie from '../utils/cookie'; |
| 3 |
|
| 4 |
window.lpElWidgetCoursesByPage = ( () => { |
| 5 |
const classCoursesWrapper = 'list-courses-elm-wrapper'; |
| 6 |
const classListCourse = 'list-courses-elm'; |
| 7 |
const classPaginationCourse = 'learn-press-pagination'; |
| 8 |
const classCoursesPageResult = 'courses-page-result'; |
| 9 |
const classSkeleton = 'lp-skeleton-animation'; |
| 10 |
let filterCourses = {}; |
| 11 |
const currentUrl = lpGetCurrentURLNoParam(); |
| 12 |
let urlAPI; |
| 13 |
let typePagination = 'number'; |
| 14 |
let firstLoad = true; |
| 15 |
let timeOutSearch; |
| 16 |
let isLoadingInfinite = false; |
| 17 |
const isLoadRest = false; |
| 18 |
const fetchAPI = ( args, callBack = {} ) => { |
| 19 |
//console.log( 'Fetch API Courses' ); |
| 20 |
const paramsFetch = { |
| 21 |
method: 'POST', |
| 22 |
body: JSON.stringify( args ), |
| 23 |
headers: { |
| 24 |
'Content-Type': 'application/json', // Set the content type to JSON |
| 25 |
}, |
| 26 |
}; |
| 27 |
|
| 28 |
if ( 'undefined' !== typeof args.nonce ) { |
| 29 |
paramsFetch.headers[ 'X-WP-Nonce' ] = args.nonce; |
| 30 |
} |
| 31 |
|
| 32 |
lpFetchAPI( urlAPI + 'lp/v1/courses/courses-widget-by-page', paramsFetch, callBack ); |
| 33 |
}; |
| 34 |
const callBackFilter = ( elCoursesWrapper ) => { |
| 35 |
if ( ! elCoursesWrapper ) { |
| 36 |
return; |
| 37 |
} |
| 38 |
const skeleton = elCoursesWrapper.querySelector( `.${ classSkeleton }` ); |
| 39 |
const elListCourse = elCoursesWrapper.querySelector( `.${ classListCourse }` ); |
| 40 |
const elPagination = elCoursesWrapper.querySelector( `.${ classPaginationCourse }` ); |
| 41 |
const elCoursesPageResult = elCoursesWrapper.querySelector( `.${ classCoursesPageResult }` ); |
| 42 |
|
| 43 |
return { |
| 44 |
before: () => { |
| 45 |
|
| 46 |
}, |
| 47 |
success: ( res ) => { |
| 48 |
const divTmp = document.createElement( 'div' ); |
| 49 |
divTmp.innerHTML = res.data.content || ''; |
| 50 |
const elListCourseTmp = divTmp.querySelector( `.${ classListCourse }` ); |
| 51 |
const elPaginationTmp = divTmp.querySelector( `.${ classPaginationCourse }` ); |
| 52 |
const elCoursesPageResultTmp = divTmp.querySelector( `.${ classCoursesPageResult }` ); |
| 53 |
|
| 54 |
if ( elListCourse ) { |
| 55 |
elListCourse.innerHTML = elListCourseTmp.innerHTML; |
| 56 |
|
| 57 |
if ( elPagination ) { |
| 58 |
elPagination.innerHTML = elPaginationTmp.innerHTML; |
| 59 |
} |
| 60 |
|
| 61 |
if ( elCoursesPageResult ) { |
| 62 |
elCoursesPageResult.innerHTML = elCoursesPageResultTmp.innerHTML; |
| 63 |
} |
| 64 |
|
| 65 |
// Scroll to el |
| 66 |
const optionScroll = { behavior: 'smooth' }; |
| 67 |
elListCourse.scrollIntoView( optionScroll ); |
| 68 |
} else { |
| 69 |
elCoursesWrapper.insertAdjacentHTML( 'beforeend', res.data.content || '' ); |
| 70 |
} |
| 71 |
|
| 72 |
if ( res.data.pagination ) { |
| 73 |
elCoursesWrapper.insertAdjacentHTML( 'beforeend', res.data.pagination || '' ); |
| 74 |
} |
| 75 |
}, |
| 76 |
error: ( error ) => { |
| 77 |
|
| 78 |
}, |
| 79 |
completed: () => { |
| 80 |
if ( skeleton ) { |
| 81 |
skeleton.style.display = 'none'; |
| 82 |
} |
| 83 |
}, |
| 84 |
}; |
| 85 |
}; |
| 86 |
const callBackPaginationTypeLoadMore = ( elCoursesWrapper ) => { |
| 87 |
const btnLoadMore = elCoursesWrapper.querySelector( '.courses-btn-load-more' ); |
| 88 |
let elLoading; |
| 89 |
if ( btnLoadMore ) { |
| 90 |
elLoading = btnLoadMore.querySelector( '.lp-loading-circle' ); |
| 91 |
} |
| 92 |
const skeleton = elCoursesWrapper.querySelector( `.${ classSkeleton }` ); |
| 93 |
const elListCourse = elCoursesWrapper.querySelector( `.${ classListCourse }` ); |
| 94 |
|
| 95 |
return { |
| 96 |
before: () => { |
| 97 |
if ( btnLoadMore ) { |
| 98 |
elLoading.classList.remove( 'hide' ); |
| 99 |
btnLoadMore.setAttribute( 'disabled', 'disabled' ); |
| 100 |
} |
| 101 |
}, |
| 102 |
success: ( res ) => { |
| 103 |
const divTmp = document.createElement( 'div' ); |
| 104 |
divTmp.innerHTML = res.data.content || ''; |
| 105 |
const elListCourseTmp = divTmp.querySelector( `.${ classListCourse }` ); |
| 106 |
const elPaginationTmp = divTmp.querySelector( `.${ classPaginationCourse }` ); |
| 107 |
|
| 108 |
if ( elListCourse ) { |
| 109 |
elListCourse.insertAdjacentHTML( 'beforeend', elListCourseTmp.innerHTML ); |
| 110 |
if ( ! elPaginationTmp ) { |
| 111 |
btnLoadMore.remove(); |
| 112 |
} |
| 113 |
} else { |
| 114 |
elCoursesWrapper.insertAdjacentHTML( 'beforeend', res.data.content || '' ); |
| 115 |
} |
| 116 |
|
| 117 |
if ( res.data.pagination ) { |
| 118 |
elCoursesWrapper.insertAdjacentHTML( 'beforeend', res.data.pagination || '' ); |
| 119 |
} |
| 120 |
}, |
| 121 |
error: ( error ) => { |
| 122 |
|
| 123 |
}, |
| 124 |
completed: () => { |
| 125 |
if ( skeleton ) { |
| 126 |
skeleton.style.display = 'none'; |
| 127 |
} |
| 128 |
if ( btnLoadMore ) { |
| 129 |
elLoading.classList.add( 'hide' ); |
| 130 |
btnLoadMore.removeAttribute( 'disabled' ); |
| 131 |
} |
| 132 |
}, |
| 133 |
}; |
| 134 |
}; |
| 135 |
const callBackPaginationTypeInfinite = ( elCoursesWrapper ) => { |
| 136 |
const skeleton = elCoursesWrapper.querySelector( `.${ classSkeleton }` ); |
| 137 |
const elInfinite = elCoursesWrapper.querySelector( '.courses-load-infinite' ); |
| 138 |
let loading; |
| 139 |
if ( elInfinite ) { |
| 140 |
loading = elInfinite.querySelector( '.lp-loading-circle' ); |
| 141 |
} |
| 142 |
const elListCourse = elCoursesWrapper.querySelector( `.${ classListCourse }` ); |
| 143 |
|
| 144 |
return { |
| 145 |
before: () => { |
| 146 |
isLoadingInfinite = true; |
| 147 |
if ( loading ) { |
| 148 |
loading.classList.remove( 'hide' ); |
| 149 |
} |
| 150 |
}, |
| 151 |
success: ( res ) => { |
| 152 |
const divTmp = document.createElement( 'div' ); |
| 153 |
divTmp.innerHTML = res.data.content || ''; |
| 154 |
const elListCourseTmp = divTmp.querySelector( `.${ classListCourse }` ); |
| 155 |
const elPaginationTmp = divTmp.querySelector( `.${ classPaginationCourse }` ); |
| 156 |
|
| 157 |
if ( elListCourse ) { |
| 158 |
elListCourse.insertAdjacentHTML( 'beforeend', elListCourseTmp.innerHTML ); |
| 159 |
if ( ! elPaginationTmp ) { |
| 160 |
elInfinite.remove(); |
| 161 |
} |
| 162 |
} else { |
| 163 |
elCoursesWrapper.insertAdjacentHTML( 'beforeend', res.data.content || '' ); |
| 164 |
} |
| 165 |
|
| 166 |
if ( res.data.pagination ) { |
| 167 |
elCoursesWrapper.insertAdjacentHTML( 'beforeend', res.data.pagination || '' ); |
| 168 |
} |
| 169 |
}, |
| 170 |
error: ( error ) => { |
| 171 |
|
| 172 |
}, |
| 173 |
completed: () => { |
| 174 |
isLoadingInfinite = false; |
| 175 |
if ( skeleton ) { |
| 176 |
skeleton.style.display = 'none'; |
| 177 |
} |
| 178 |
if ( elInfinite ) { |
| 179 |
loading.classList.add( 'hide' ); |
| 180 |
} |
| 181 |
}, |
| 182 |
}; |
| 183 |
}; |
| 184 |
const callApiCoursesOfWidget = ( elCoursesWrapper, args = {} ) => { |
| 185 |
console.log( '/*** loadApiCoursesOfWidget ***/' ); |
| 186 |
const idWidget = elCoursesWrapper.dataset.widgetId; |
| 187 |
let settingsWidget = window[ `lpWidget_${ idWidget }` ]; |
| 188 |
|
| 189 |
if ( ! settingsWidget ) { |
| 190 |
return; |
| 191 |
} |
| 192 |
if ( 'yes' !== settingsWidget.courses_rest ) { |
| 193 |
return; |
| 194 |
} |
| 195 |
if ( 'yes' === settingsWidget.courses_rest_no_load_page && firstLoad ) { |
| 196 |
firstLoad = false; |
| 197 |
return; |
| 198 |
} |
| 199 |
|
| 200 |
settingsWidget = { ...settingsWidget, ...args }; |
| 201 |
|
| 202 |
urlAPI = settingsWidget.lp_rest_url ?? ''; |
| 203 |
typePagination = settingsWidget.courses_rest_pagination_type ?? 'number'; |
| 204 |
|
| 205 |
let callBack; |
| 206 |
switch ( typePagination ) { |
| 207 |
case 'load-more': |
| 208 |
callBack = callBackPaginationTypeLoadMore( elCoursesWrapper ); |
| 209 |
break; |
| 210 |
case 'infinite': |
| 211 |
callBack = callBackPaginationTypeInfinite( elCoursesWrapper ); |
| 212 |
break; |
| 213 |
default: // number |
| 214 |
callBack = callBackFilter( elCoursesWrapper ); |
| 215 |
break; |
| 216 |
} |
| 217 |
|
| 218 |
if ( ! callBack ) { |
| 219 |
return; |
| 220 |
} |
| 221 |
|
| 222 |
fetchAPI( settingsWidget, callBack ); |
| 223 |
}; |
| 224 |
const findAllWidgetCoursesByPage = () => { |
| 225 |
const elCoursesWrappers = document.querySelectorAll( `.${ classCoursesWrapper }` ); |
| 226 |
if ( ! elCoursesWrappers ) { |
| 227 |
return; |
| 228 |
} |
| 229 |
|
| 230 |
elCoursesWrappers.forEach( ( el ) => { |
| 231 |
callApiCoursesOfWidget( el ); |
| 232 |
} ); |
| 233 |
}; |
| 234 |
const onChangeSortBy = ( e, target ) => { |
| 235 |
if ( ! target.classList.contains( 'courses-order-by' ) ) { |
| 236 |
return; |
| 237 |
} |
| 238 |
const elCoursesWrapper = target.closest( `.${ classCoursesWrapper }` ); |
| 239 |
if ( ! elCoursesWrapper ) { |
| 240 |
return; |
| 241 |
} |
| 242 |
|
| 243 |
e.preventDefault(); |
| 244 |
const idWidget = elCoursesWrapper.dataset.widgetId; |
| 245 |
const settingsWidget = window[ `lpWidget_${ idWidget }` ]; |
| 246 |
filterCourses.order_by = target.value; |
| 247 |
filterCourses.paged = 1; |
| 248 |
|
| 249 |
if ( 'yes' !== settingsWidget.courses_rest ) { |
| 250 |
window.location.href = lpAddQueryArgs( currentUrl, filterCourses ); |
| 251 |
} else { |
| 252 |
callApiCoursesOfWidget( elCoursesWrapper, filterCourses ); |
| 253 |
} |
| 254 |
}; |
| 255 |
const onChangeLayout = ( e, target ) => { |
| 256 |
if ( ! target.classList.contains( 'courses-layout' ) ) { |
| 257 |
if ( ! target.closest( '.courses-layout' ) ) { |
| 258 |
return; |
| 259 |
} |
| 260 |
target = target.closest( '.courses-layout' ); |
| 261 |
} |
| 262 |
const elCoursesWrapper = target.closest( `.${ classCoursesWrapper }` ); |
| 263 |
if ( ! elCoursesWrapper ) { |
| 264 |
return; |
| 265 |
} |
| 266 |
e.preventDefault(); |
| 267 |
const elListCourse = elCoursesWrapper.querySelector( `.${ classListCourse }` ); |
| 268 |
const elUlLayouts = target.closest( '.courses-layouts-display-list' ); |
| 269 |
const widgetId = elCoursesWrapper.dataset.widgetId; |
| 270 |
const elLayouts = elUlLayouts.querySelectorAll( 'li' ); |
| 271 |
elLayouts.forEach( ( el ) => { |
| 272 |
el.classList.remove( 'active' ); |
| 273 |
} ); |
| 274 |
const layout = target.dataset.layout; |
| 275 |
target.classList.add( 'active' ); |
| 276 |
elListCourse.classList.remove( 'grid', 'list' ); |
| 277 |
elListCourse.classList.add( layout ); |
| 278 |
Cookie.set( `layout_widget_${ widgetId }`, layout, 7 ); |
| 279 |
}; |
| 280 |
const events = () => { |
| 281 |
document.addEventListener( 'change', function( e ) { |
| 282 |
const target = e.target; |
| 283 |
|
| 284 |
onChangeSortBy( e, target ); |
| 285 |
} ); |
| 286 |
document.addEventListener( 'click', function( e ) { |
| 287 |
const target = e.target; |
| 288 |
|
| 289 |
clickLoadMore( e, target ); |
| 290 |
clickNumberPage( e, target ); |
| 291 |
onChangeLayout( e, target ); |
| 292 |
} ); |
| 293 |
document.addEventListener( 'scroll', function( e ) { |
| 294 |
const target = e.target; |
| 295 |
|
| 296 |
scrollInfinite( e, target ); |
| 297 |
} ); |
| 298 |
document.addEventListener( 'keyup', function( e ) { |
| 299 |
const target = e.target; |
| 300 |
|
| 301 |
//window.lpCourseList.searchCourse( e, target ); |
| 302 |
} ); |
| 303 |
document.addEventListener( 'submit', function( e ) { |
| 304 |
const target = e.target; |
| 305 |
|
| 306 |
//window.lpCourseList.searchCourse( e, target ); |
| 307 |
} ); |
| 308 |
}; |
| 309 |
const clickNumberPage = ( e, target ) => { |
| 310 |
if ( ! target.classList.contains( 'page-numbers' ) ) { |
| 311 |
if ( ! target.closest( '.page-numbers' ) ) { |
| 312 |
return; |
| 313 |
} |
| 314 |
target = target.closest( '.page-numbers' ); |
| 315 |
} |
| 316 |
const elCoursesWrapper = target.closest( `.${ classCoursesWrapper }` ); |
| 317 |
if ( ! elCoursesWrapper ) { |
| 318 |
return; |
| 319 |
} |
| 320 |
const idWidget = elCoursesWrapper.dataset.widgetId; |
| 321 |
const settingsWidget = window[ `lpWidget_${ idWidget }` ]; |
| 322 |
if ( ! settingsWidget || 'yes' !== settingsWidget.courses_rest ) { |
| 323 |
return; |
| 324 |
} |
| 325 |
|
| 326 |
e.preventDefault(); |
| 327 |
const pageCurrent = filterCourses.paged; |
| 328 |
if ( target.classList.contains( 'prev' ) ) { |
| 329 |
filterCourses.paged = pageCurrent - 1; |
| 330 |
} else if ( target.classList.contains( 'next' ) ) { |
| 331 |
filterCourses.paged = pageCurrent + 1; |
| 332 |
} else { |
| 333 |
filterCourses.paged = parseInt( target.textContent ); |
| 334 |
} |
| 335 |
|
| 336 |
callApiCoursesOfWidget( elCoursesWrapper, filterCourses ); |
| 337 |
}; |
| 338 |
const clickLoadMore = ( e, target ) => { |
| 339 |
if ( ! target.classList.contains( 'courses-btn-load-more' ) ) { |
| 340 |
if ( ! target.closest( '.courses-btn-load-more' ) ) { |
| 341 |
return; |
| 342 |
} |
| 343 |
target = target.closest( '.courses-btn-load-more' ); |
| 344 |
} |
| 345 |
const elCoursesWrapper = target.closest( `.${ classCoursesWrapper }` ); |
| 346 |
if ( ! elCoursesWrapper ) { |
| 347 |
return; |
| 348 |
} |
| 349 |
const idWidget = elCoursesWrapper.dataset.widgetId; |
| 350 |
const settingsWidget = window[ `lpWidget_${ idWidget }` ]; |
| 351 |
if ( ! settingsWidget || 'yes' !== settingsWidget.courses_rest ) { |
| 352 |
return; |
| 353 |
} |
| 354 |
|
| 355 |
e.preventDefault(); |
| 356 |
++filterCourses.paged; |
| 357 |
|
| 358 |
callApiCoursesOfWidget( elCoursesWrapper, filterCourses ); |
| 359 |
}; |
| 360 |
const scrollInfinite = ( e, target ) => { |
| 361 |
const elCoursesWrapper = document.querySelector( `.${ classCoursesWrapper }` ); |
| 362 |
if ( ! elCoursesWrapper ) { |
| 363 |
return; |
| 364 |
} |
| 365 |
const elInfinite = elCoursesWrapper.querySelector( '.courses-load-infinite' ); |
| 366 |
if ( ! elInfinite ) { |
| 367 |
return; |
| 368 |
} |
| 369 |
const idWidget = elCoursesWrapper.dataset.widgetId; |
| 370 |
const settingsWidget = window[ `lpWidget_${ idWidget }` ]; |
| 371 |
if ( ! settingsWidget || 'yes' !== settingsWidget.courses_rest ) { |
| 372 |
return; |
| 373 |
} |
| 374 |
|
| 375 |
// Create an IntersectionObserver object. |
| 376 |
const observer = new IntersectionObserver( function( entries ) { |
| 377 |
for ( const entry of entries ) { |
| 378 |
// If the entry is intersecting, load the image. |
| 379 |
if ( entry.isIntersecting ) { |
| 380 |
if ( isLoadingInfinite ) { |
| 381 |
return; |
| 382 |
} |
| 383 |
|
| 384 |
++filterCourses.paged; |
| 385 |
callApiCoursesOfWidget( elCoursesWrapper, filterCourses ); |
| 386 |
observer.unobserve( entry.target ); |
| 387 |
} |
| 388 |
} |
| 389 |
} ); |
| 390 |
|
| 391 |
observer.observe( elInfinite ); |
| 392 |
}; |
| 393 |
return { |
| 394 |
init: () => { |
| 395 |
const urlParams = {}; |
| 396 |
const urlQueryString = window.location.search; |
| 397 |
const urlSearchParams = new URLSearchParams( urlQueryString ); |
| 398 |
for ( const [ key, val ] of urlSearchParams.entries() ) { |
| 399 |
urlParams[ key ] = val; |
| 400 |
} |
| 401 |
|
| 402 |
//filterCourses = { ...lpArchiveSkeletonParam, ...urlParams }; |
| 403 |
filterCourses = { ...urlParams }; |
| 404 |
filterCourses.paged = parseInt( filterCourses.paged || 1 ); |
| 405 |
findAllWidgetCoursesByPage(); |
| 406 |
events(); |
| 407 |
}, |
| 408 |
}; |
| 409 |
} )(); |
| 410 |
|
| 411 |
document.addEventListener( 'DOMContentLoaded', function() { |
| 412 |
window.lpElWidgetCoursesByPage.init(); |
| 413 |
} ); |
| 414 |
|
