var blackHairList;
var blondeHairList;
var brownHairList;
var numberOfItems;
const numberPerPage = 9;
var currentPage = 1;
const numberOfPages = Math.ceil(numberOfItems / numberPerPage);
$('#next-pagination-button').click(function (e) {
if (currentPage === numberOfPages) return;
currentPage += 1;
buildPage(currentPage);
});
$('#prev-pagination-button').click(function (e) {
if (currentPage === 1) return;
currentPage -= 1;
buildPage(currentPage);
});
function getElements() {
blackHairList = document.querySelectorAll(
'.hair-collection-wrapper.black .hair-style-container'
);
// eslint-disable-next-line prettier/prettier
blondeHairList = document.querySelectorAll(
'.hair-collection-wrapper.blonde .hair-style-container'
);
brownHairList = document.querySelectorAll(
'.hair-collection-wrapper.brown .hair-style-container'
);
numberOfItems = blackHairList.length;
}
function buildPage(currPage) {
getElements();
const trimStart = (currPage - 1) * numberPerPage;
const trimEnd = trimStart + numberPerPage;
// will need to do this for each colour
var blackElems = Array.prototype.slice.call(blackHairList, trimStart, trimEnd);
var blondeElems = Array.prototype.slice.call(blondeHairList, trimStart, trimEnd);
var brownElems = Array.prototype.slice.call(brownHairList, trimStart, trimEnd);
// // Prev button diabled if current page is 1
// if (currPage === 1) {
// $('#prev-pagination-button').addClass('disable-click');
// }
// // Next button disabled if current page == number of pages
// if (currPage === numberOfPages) {
// $('#next-pagination-button').attr('disabled', 'disabled');
// }
// hide all
[].forEach.call(blackHairList, function (item) {
item.style.display = 'none';
});
[].forEach.call(blondeHairList, function (item) {
item.style.display = 'none';
});
[].forEach.call(brownHairList, function (item) {
item.style.display = 'none';
});
// show selected 9
[].forEach.call(blackElems, function (item) {
item.style.display = 'block';
});
[].forEach.call(blondeElems, function (item) {
item.style.display = 'block';
});
[].forEach.call(brownElems, function (item) {
item.style.display = 'block';
});
}