Add prev and next button to navigate through different pages

diff --git a/app/Entities/Models/Page.php b/app/Entities/Models/Page.php
index 739927aff6dad8561672a5687d504d18848079ee..b60da01212f4c5ac8bf2fc5cd69efa0c501401c5 100644 (file)
--- a/app/Entities/Models/Page.php
+++ b/app/Entities/Models/Page.php
@@ -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;
+    }
 }

diff --git a/app/Entities/Repos/PageRepo.php b/app/Entities/Repos/PageRepo.php
index 4c59db4688bed3b3a6dcb758ea6f4ed0f1ae2f66..ca5748c86569fcf1a388ea91a63ca60174c8c189 100644 (file)
--- a/app/Entities/Repos/PageRepo.php
+++ b/app/Entities/Repos/PageRepo.php
@@ -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']);
+    }
 }

diff --git a/app/Http/Controllers/PageController.php b/app/Http/Controllers/PageController.php
index 7d8e54382961006db647b5f1b1b4fe9982337a2d..2bfd55fa0cf07b1797a22d31060773d6e34ec758 100644 (file)
--- a/app/Http/Controllers/PageController.php
+++ b/app/Http/Controllers/PageController.php
@@ -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
         ]);
     }
 

diff --git a/resources/sass/_layout.scss b/resources/sass/_layout.scss
index 4873ff2da651ee1575a048a4973f95069fa0a343..57800d41ef436f791062f62d0b0288387866c0fb 100644 (file)
--- a/resources/sass/_layout.scss
+++ b/resources/sass/_layout.scss
@@ -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;
+}

diff --git a/resources/sass/_text.scss b/resources/sass/_text.scss
index 4322cb5a606da731f00a692ed97f1c8ee325a723..4ece0ea201e8f4031b1c5d908b700f636abc1219 100644 (file)
--- a/resources/sass/_text.scss
+++ b/resources/sass/_text.scss
@@ -112,6 +112,12 @@ a {
   }
 }
 
+a.disabled {
+  pointer-events: none;
+  cursor: default;
+  opacity: 0.6;
+}
+
 .blended-links a {
   color: inherit;
   svg {

diff --git a/resources/views/pages/show.blade.php b/resources/views/pages/show.blade.php
index 13125464a7114396012f3685fa56e38ae23b81b9..38e819a9e1baecd2dc6d037409cc97fe3770ca43 100644 (file)
--- a/resources/views/pages/show.blade.php
+++ b/resources/views/pages/show.blade.php
@@ -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">