From ec49db8aa25961e85e1fdfd5d943c98569c5d1ba Mon Sep 17 00:00:00 2001
From: IemetsO <oksana.v.iemets@gmail.com>
Date: Mon, 9 May 2022 21:47:14 +0300
Subject: [PATCH] paginationFixed
---
src/index.js | 9 ++---
src/js/pagination.js | 86 ++++++++++++++++++++++----------------------
2 files changed, 45 insertions(+), 50 deletions(-)
diff --git a/src/index.js b/src/index.js
index a79b74f..4d0640a 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 6d5bf8f..d607e3f 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)
--
GitLab