112 lines
2.9 KiB
JavaScript
112 lines
2.9 KiB
JavaScript
import Component from '../component/index';
|
|
import routeService from '../../services/RouteService';
|
|
import {createElement} from '../../utils/elementUtils';
|
|
import {prepareToNumber} from '../../utils/urlUtils';
|
|
|
|
const LEFT_ICON = '«';
|
|
const RIGHT_ICON = '»';
|
|
|
|
const CHAGE_PAGE = 'changePage';
|
|
|
|
class Pagination extends Component {
|
|
buttons = [];
|
|
|
|
constructor (parentNode) {
|
|
super('#pagination', parentNode);
|
|
|
|
this.currentPage = 0;
|
|
this.countPages = 0;
|
|
|
|
this.container = this.mainNode.querySelector('.pagination');
|
|
|
|
routeService.onChange(() => {
|
|
this.renderButtons();
|
|
});
|
|
}
|
|
|
|
renderOneButton = (text, isDisabled = false) => {
|
|
const li = createElement({
|
|
tagName: 'li',
|
|
parentNode: this.container,
|
|
options: {
|
|
className: 'page-item',
|
|
disabled: isDisabled,
|
|
},
|
|
});
|
|
const button = createElement({
|
|
tagName: 'button',
|
|
parentNode: li,
|
|
options: {
|
|
className: 'page-link pe-auto',
|
|
innerHTML: text,
|
|
},
|
|
});
|
|
if (isDisabled) {
|
|
li.classList.add('disabled');
|
|
button.setAttribute('disabled', 'true');
|
|
}
|
|
if (text === this.currentPage) {
|
|
li.classList.add('active');
|
|
}
|
|
this.addEventListener(button, 'click', () => {
|
|
const nextPage = (() => {
|
|
if (text === LEFT_ICON) {
|
|
return this.currentPage - 1;
|
|
}
|
|
if (text === RIGHT_ICON) {
|
|
return this.currentPage + 1;
|
|
}
|
|
return text;
|
|
})();
|
|
|
|
routeService.pushQuery({
|
|
pageNumber: nextPage,
|
|
});
|
|
});
|
|
this.buttons.push(li);
|
|
}
|
|
|
|
clearButtons = () => {
|
|
this.buttons.forEach((b) => {
|
|
b.remove();
|
|
});
|
|
|
|
this.clearListeners();
|
|
|
|
this.buttons = [];
|
|
}
|
|
|
|
changeCountPages = (countPages) => {
|
|
if (countPages !== this.countPages) {
|
|
this.countPages = countPages;
|
|
|
|
this.renderButtons();
|
|
}
|
|
}
|
|
|
|
renderButtons = () => {
|
|
this.clearButtons();
|
|
const {pageNumber} = routeService.getUrlData().query;
|
|
this.currentPage = prepareToNumber(pageNumber, this.countPages);
|
|
|
|
const start = this.currentPage < 3 ? 1 : this.currentPage - 2;
|
|
const end = start + 4 > this.countPages ? this.countPages : start + 4;
|
|
|
|
this.renderOneButton(LEFT_ICON, this.currentPage <= 1);
|
|
|
|
for (let i = start; i <= end; i += 1) {
|
|
this.renderOneButton(i);
|
|
}
|
|
|
|
this.renderOneButton(RIGHT_ICON, this.currentPage >= this.countPages);
|
|
|
|
this.next(CHAGE_PAGE, this.currentPage);
|
|
}
|
|
|
|
onPageChange = (listener) => {
|
|
this.subscribe(CHAGE_PAGE, listener);
|
|
}
|
|
}
|
|
|
|
export default Pagination;
|