104 lines
2.3 KiB
JavaScript
104 lines
2.3 KiB
JavaScript
|
|
let nextButton = document.querySelector('#next-button');
|
|
let previousButton = document.querySelector('#previous-button');
|
|
let startButton = document.querySelector('#start-button');
|
|
let endButton = document.querySelector('#end-button');
|
|
|
|
let pageCounter = document.querySelector('#page-counter');
|
|
|
|
let leftNavigate = document.querySelector('#left');
|
|
let rightNavigate = document.querySelector('#right');
|
|
|
|
let space = document.querySelector('#pages-container');
|
|
let pages = document.querySelectorAll('.page');
|
|
|
|
|
|
let currentPage = space.dataset.page - 1;
|
|
|
|
function updateURL() {
|
|
|
|
const url = new URL(window.location.href);
|
|
|
|
// console.log(url.href);
|
|
// https://example.com/?a=hello&b=world
|
|
|
|
// console.log(url.origin);
|
|
// https://example.com
|
|
|
|
|
|
const new_params = new URLSearchParams([
|
|
['page', currentPage+1]
|
|
// ...Array.from(url.searchParams.entries()),
|
|
]).toString();
|
|
|
|
// console.log(new_params);
|
|
// a=hello&b=world&c=a&d=2&e=false
|
|
|
|
window.history.replaceState(null, "", `${url.pathname}?${new_params}`)
|
|
}
|
|
|
|
function updatePages() {
|
|
currentPage = Math.max(0, Math.min(currentPage, pages.length-1))
|
|
|
|
for (let i = 0; i < pages.length; i++) {
|
|
pages[i].classList.add("hidden")
|
|
|
|
if (i == currentPage) {
|
|
pages[i].classList.remove("hidden")
|
|
}
|
|
}
|
|
pageCounter.textContent = currentPage + 1;
|
|
|
|
updateURL();
|
|
}
|
|
|
|
function pageUpdater(x) {
|
|
return () => {
|
|
currentPage += x;
|
|
updatePages();
|
|
}
|
|
}
|
|
|
|
function pageSetter(x) {
|
|
return () => {
|
|
currentPage = x;
|
|
updatePages();
|
|
}
|
|
}
|
|
|
|
let nextPage = pageUpdater(1);
|
|
let previousPage = pageUpdater(-1);
|
|
|
|
nextButton.onclick = nextPage;
|
|
previousButton.onclick = previousPage;
|
|
leftNavigate.onclick = previousPage;
|
|
rightNavigate.onclick = nextPage;
|
|
|
|
startButton.onclick = pageSetter(0);
|
|
endButton.onclick = pageSetter(pages.length-1);
|
|
|
|
function pageNav(e) {
|
|
console.log(e.offsetX);
|
|
console.log(e.offsetY);
|
|
console.log(e);
|
|
nextPage();
|
|
}
|
|
|
|
const pz = Panzoom(space, { // nada aqui funciona?
|
|
// onClick: function (e) {
|
|
// console.log(e)
|
|
// return false;
|
|
// },
|
|
// maxScale: 5,
|
|
// maxZoom: 0.1,
|
|
// minZoom: 0.1
|
|
// animate: true,
|
|
// duration: 200,
|
|
// pinchSpeed: 0,
|
|
// zoomSpeed: 0.0001,
|
|
// easing: "ease-in-out",
|
|
});
|
|
|
|
// panzoom.zoom(1 / 1.1);
|
|
space.parentElement.addEventListener('wheel', pz.zoomWithWheel)
|
|
updatePages();
|