diff --git a/src/index.js b/src/index.js index a79b74fff3f932d223e653d8da025cad8524af44..4d0640abb82005409ae36ad84db076b7e9b31904 100644 --- a/src/index.js +++ b/src/index.js @@ -8,12 +8,7 @@ import './js/add-to-watched'; import './js/pagination' import '@fortawesome/fontawesome-free/js/all.js'; import './js/theme-switcher'; -import pagination from "./js/pagination"; + showMovieGallery(); -pagination.on('afterMove', (event) => { - console.log(event) - const currentPage = event.page; - localStorage.setItem("pagination-page", JSON.stringify(currentPage)) - showMovieGallery(); -}); + diff --git a/src/js/pagination.js b/src/js/pagination.js index 6d5bf8f044a708535a6b897ae5f81712acb06b54..d607e3fd0d20e587a04b8192b490a662019d4d52 100644 --- a/src/js/pagination.js +++ b/src/js/pagination.js @@ -1,54 +1,54 @@ // import 'tui-pagination/dist/tui-pagination.css'; import Pagination from 'tui-pagination'; -import showMovieGallery from './showMovieGallery'; - - const options = { - totalItems: 200, - visiblePages: 5, - itemsPerPage: 20, - page: getPage(), - usageStatistics: false, - centerAlign: true, - firstItemClassName: 'tui-first-child', - lastItemClassName: 'tui-last-child', - template: { - page: '<a href="#" class="tui-page-btn">{{page}}</a>', - currentPage: '<strong class="tui-page-btn tui-is-selected">{{page}}</strong>', - moveButton: - '<a href="#" class="tui-page-btn tui-{{type}}">' + - '<span class="tui-ico-{{type}}">{{type}}</span>' + - '</a>', - disabledMoveButton: - '<span class="tui-page-btn tui-is-disabled tui-{{type}}">' + - '<span class="tui-ico-{{type}}">{{type}}</span>' + - '</span>', - moreButton: - '<a href="#" class="tui-page-btn tui-{{type}}-is-ellip">' + - '<span class="tui-ico-ellip">...</span>' + - '</a>' - } - }; - +import renderPopFilms from './showMovieGallery'; + +const options = { + totalItems: 200, + visiblePages: 5, + itemsPerPage: 20, + page: getPage(), + usageStatistics: false, + centerAlign: true, + firstItemClassName: 'tui-first-child', + lastItemClassName: 'tui-last-child', + template: { + page: '<a href="#" class="tui-page-btn">{{page}}</a>', + currentPage: '<strong class="tui-page-btn tui-is-selected">{{page}}</strong>', + moveButton: + '<a href="#" class="tui-page-btn tui-{{type}}">' + + '<span class="tui-ico-{{type}}">{{type}}</span>' + + '</a>', + disabledMoveButton: + '<span class="tui-page-btn tui-is-disabled tui-{{type}}">' + + '<span class="tui-ico-{{type}}">{{type}}</span>' + + '</span>', + moreButton: + '<a href="#" class="tui-page-btn tui-{{type}}-is-ellip">' + + '<span class="tui-ico-ellip">...</span>' + + '</a>', + }, +}; const pagination = new Pagination('pagination', options); // внесення номеру сторінки в local Storage -pagination.on('afterMove', (event) => { - console.log(event) +pagination.on('afterMove', event => { const currentPage = event.page; - localStorage.setItem("pagination-page", JSON.stringify(currentPage)) - showMovieGallery(); -}); + localStorage.setItem('pagination-page', JSON.stringify(currentPage)); + const paginationData = localStorage.getItem('pagination-page'); + if (paginationData) { + const pageFromLS = JSON.parse(paginationData); + renderPopFilms(pageFromLS); +}}); // забираємо з local Storage номер сторінки -function getPage () {const paginationData = localStorage.getItem("pagination-page"); -if(paginationData) { - const pageFromLS = JSON.parse(paginationData); - return pageFromLS} -else { -return 1} +function getPage() { + const paginationData = localStorage.getItem('pagination-page'); + if (paginationData) { + const pageFromLS = JSON.parse(paginationData); + return pageFromLS; + } else { + return 1; + } } - - -console.log(pagination)