Make the current page indicator a button to jump to an exact page

Closes #43
This commit is contained in:
chylex 2018-09-19 15:53:11 +02:00
parent 665f0d1247
commit 4ca33c3b57
4 changed files with 24 additions and 16 deletions

View File

@ -33,11 +33,11 @@
</div>
<div class="nav">
<button id="nav-first" data-nav="first">&laquo;</button>
<button id="nav-prev" data-nav="prev">&lsaquo;</button>
<p>Page <span id="nav-page-current">1</span>/<span id="nav-page-total">?</span></p>
<button id="nav-next" data-nav="next">&rsaquo;</button>
<button id="nav-last" data-nav="last">&raquo;</button>
<button id="nav-first" data-nav="first" class="icon">&laquo;</button>
<button id="nav-prev" data-nav="prev" class="icon">&lsaquo;</button>
<button id="nav-pick" data-nav="pick">Page <span id="nav-page-current">1</span>/<span id="nav-page-total">?</span></button>
<button id="nav-next" data-nav="next" class="icon">&rsaquo;</button>
<button id="nav-last" data-nav="last" class="icon">&raquo;</button>
</div>
<div class="splitter"></div>

View File

@ -178,6 +178,7 @@ var GUI = (function(){
DOM.id("nav-first").disabled = currentPage === 1;
DOM.id("nav-prev").disabled = currentPage === 1;
DOM.id("nav-pick").disabled = (totalPages || 0) <= 1;
DOM.id("nav-next").disabled = currentPage === (totalPages || 1);
DOM.id("nav-last").disabled = currentPage === (totalPages || 1);
},

View File

@ -198,18 +198,28 @@ var STATE = (function(){
case "prev": currentPage = Math.max(1, currentPage-1); break;
case "next": currentPage = Math.min(ROOT.getPageCount(), currentPage+1); break;
case "last": currentPage = ROOT.getPageCount(); break;
case "pick":
var page = parseInt(prompt("Select page:", currentPage), 10);
if (!page){
return;
}
currentPage = Math.max(1, Math.min(ROOT.getPageCount(), page));
break;
}
triggerMessagesRefreshed();
};
ROOT.getCurrentPage = function(){
var total = ROOT.getPageCount();
if (currentPage > total && total > 0){
currentPage = total;
}
return currentPage || 1;
};

View File

@ -45,14 +45,6 @@
border: 0;
}
#menu p {
font-size: 16px;
padding: 8px;
background-color: #7E7E7E;
color: #FFF;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
}
#menu .nav {
display: flex;
flex-direction: row;
@ -60,7 +52,12 @@
}
#menu .nav > button {
font-size: 14px;
}
#menu .nav > button.icon {
font-family: Lucida Console, monospace;
font-size: 17px;
padding: 0 8px;
}