mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-26 12:16:07 +00:00
Add prev and next button to navigate through different pages
This commit is contained in:
parent
7ba6962707
commit
99c42033b1
@ -126,4 +126,13 @@ class Page extends BookChild
|
||||
$refreshed->html = (new PageContent($refreshed))->render();
|
||||
return $refreshed;
|
||||
}
|
||||
/**
|
||||
* Get the parent chapter ID.
|
||||
*/
|
||||
public function getParentChapter()
|
||||
{
|
||||
$chapterId = $this->chapter()->visible()
|
||||
->get('id');
|
||||
return $chapterId;
|
||||
}
|
||||
}
|
||||
|
@ -467,4 +467,10 @@ class PageRepo
|
||||
->where('page_id', '=', $page->id)
|
||||
->orderBy('created_at', 'desc');
|
||||
}
|
||||
/**
|
||||
* Get page details by chapter ID.
|
||||
*/
|
||||
public function getPageByChapterID(int $id){
|
||||
return Page::visible()->where('chapter_id', '=', $id)->get(['id','slug']);
|
||||
}
|
||||
}
|
||||
|
@ -142,6 +142,38 @@ class PageController extends Controller
|
||||
$page->load(['comments.createdBy']);
|
||||
}
|
||||
|
||||
$chapterId = $page->getParentChapter();
|
||||
$allPageSlugs = $this->pageRepo->getPageByChapterID($chapterId[0]->id);
|
||||
$pos = 0;
|
||||
foreach ($allPageSlugs as $slug){
|
||||
if($pageSlug === $slug->slug){
|
||||
$currPagePos = $pos;
|
||||
}
|
||||
$pos++;
|
||||
$pageUrl = $this->pageRepo->getBySlug($bookSlug, $slug->slug);
|
||||
$urlLink[] = $pageUrl->getUrl();
|
||||
}
|
||||
for($i=0; $i <= $currPagePos; $i++){
|
||||
$nextCount = $i+1;
|
||||
$prevCount = $i-1;
|
||||
$prevPage = '#';
|
||||
$nextPage = '#';
|
||||
if($nextCount < count($urlLink)){
|
||||
$nextPage = $urlLink[$nextCount];
|
||||
}
|
||||
if($currPagePos == $i && $currPagePos != 0){
|
||||
$prevPage = $urlLink[$prevCount];
|
||||
}
|
||||
}
|
||||
|
||||
$disablePrev = "";
|
||||
$disableNxt = "";
|
||||
if($prevPage == "#"){
|
||||
$disablePrev = "disabled";
|
||||
}
|
||||
if($nextPage == "#"){
|
||||
$disableNxt = "disabled";
|
||||
}
|
||||
Views::add($page);
|
||||
$this->setPageTitle($page->getShortName());
|
||||
return view('pages.show', [
|
||||
@ -150,7 +182,11 @@ class PageController extends Controller
|
||||
'current' => $page,
|
||||
'sidebarTree' => $sidebarTree,
|
||||
'commentsEnabled' => $commentsEnabled,
|
||||
'pageNav' => $pageNav
|
||||
'pageNav' => $pageNav,
|
||||
'prevPage' => $prevPage,
|
||||
'nextPage' => $nextPage,
|
||||
'disablePrev' => $disablePrev,
|
||||
'disableNxt' => $disableNxt
|
||||
]);
|
||||
}
|
||||
|
||||
|
@ -62,6 +62,9 @@
|
||||
}
|
||||
|
||||
@include smaller-than($m) {
|
||||
.grid.third.prev-next:not(.no-break) {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.grid.third:not(.no-break) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
@ -81,12 +84,24 @@
|
||||
.grid.right-focus.reverse-collapse > *:nth-child(1) {
|
||||
order: 1;
|
||||
}
|
||||
.grid.third:not(.no-break) .text-m-left {
|
||||
margin-left: 20%;
|
||||
}
|
||||
.grid.third:not(.no-break) .text-m-right {
|
||||
margin-left: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
@include smaller-than($s) {
|
||||
.grid.third:not(.no-break) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.grid.third:not(.no-break) .text-m-left {
|
||||
margin-left: 18%;
|
||||
}
|
||||
.grid.third:not(.no-break) .text-m-right {
|
||||
margin-left: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@include smaller-than($xs) {
|
||||
@ -359,3 +374,7 @@ body.flexbox {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.prev-next-btn {
|
||||
height: 50px;
|
||||
}
|
||||
|
@ -112,6 +112,12 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
a.disabled {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.blended-links a {
|
||||
color: inherit;
|
||||
svg {
|
||||
|
@ -16,6 +16,18 @@
|
||||
@include('pages.page-display')
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="prev-next-btn">
|
||||
<div class="grid third no-row-gap prev-next">
|
||||
<div class="text-m-left">
|
||||
<a class="{{ $disablePrev }}" href="{{ $prevPage }}">Previous Page</a>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="text-m-right">
|
||||
<a class="{{ $disableNxt }}" href="{{ $nextPage }}">Next Page</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($commentsEnabled)
|
||||
<div class="container small p-none comments-container mb-l print-hidden">
|
||||
|
Loading…
Reference in New Issue
Block a user