class Script { static main () { const dateOptions = {dateFormat: 'yy-mm-dd', firstDay: 6}; $ ('#filter-date-start').datepicker (dateOptions); $ ('#filter-date-end').datepicker (dateOptions); const url = new URL (window.location.href); const orderAsc = document.getElementById ('order-asc'); const filterKeyword = document.getElementById ('filter-keyword'); const btnFilter = document.getElementById ('btn-filter'); const filter = ( function (e) { let dateStart = $ ('#filter-date-start').val (); let dateEnd = $ ('#filter-date-end').val (); if ((dateStart !== '') && (dateEnd !== '') && (dateStart > dateEnd)) [dateStart, dateEnd] = [dateEnd, dateStart]; url.searchParams.delete ('p'); url.searchParams.delete ('asc'); url.searchParams.append ('asc', orderAsc.checked ? '1' : '0'); url.searchParams.delete ('q'); url.searchParams.append ('q', filterKeyword.value); url.searchParams.delete ('start'); url.searchParams.delete ('end'); if (dateStart !== '') url.searchParams.append ('start', dateStart); if (dateEnd !== '') url.searchParams.append ('end', dateEnd); window.location.href = url; }); const resetFilter = ( function () { window.location.href = '/'; }); filterKeyword.addEventListener ('keydown', function (e) { if (e.key === 'Enter') filter (e); }); btnFilter.addEventListener ('click', filter); $ ('#btn-reset').on ('click', resetFilter); $ (window).resize (this.setPagination); this.setPagination (); $ ('.pagination').removeClass ('opacity-0'); } static jumpTo (page) { const url = new URL (window.location.href); url.searchParams.delete ('p'); url.searchParams.append ('p', page); window.location.href = url; } static setPagination () { for (let i = 1; i <= 20; ++i) $ (`.page-${i}`).removeClass ('d-none'); for (let i = 20; i > 1; --i) { if ($ ('.pagination').width () >= $ ('body').width () * .8) $ (`.page-${i}`).addClass ('d-none'); else break; } } } Script.main ();