Back button on ebook reader

ragusa87 · Aug 16, 2024 · dbedf8d · dbedf8d
1 parent 3dc8aaa
commit dbedf8d
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 14 deletions.
diff --git a/assets/ReadEbook.vue b/assets/ReadEbook.vue
@@ -1,13 +1,21 @@
 <template>
-  <div id="area" style="width: 100vw; height: 100vh; min-height: 95vh;">
-    <vue-reader
-        :url="props.file"
-        :showToc="true"
-        :getRendition="getRendition"
-        :backgroundColor="props.bgColor"
-        @update:location="locationChange"
-        :location="getInitialLocation()"
-    />
+  <div class="flex">
+    <div class="area-back" v-if="canGoBack()" style="width: 10vw">
+      <button @click="goBack" class="arrow pre">
+        ‹‹
+      </button>
+    </div>
+
+    <div id="area" :style="`width: ${canGoBack() ?80 :  100}vw; height: 100vh; min-height: 95vh;`">
+      <vue-reader
+          :url="props.file"
+          :showToc="true"
+          :getRendition="getRendition"
+          :backgroundColor="props.bgColor"
+          @update:location="locationChange"
+          :location="getInitialLocation()"
+      />
+    </div>
   </div>
 </template>
 
@@ -17,11 +25,12 @@ const props = defineProps({
   'css': String,
   'bgColor': String,
   'percent': String,
-  'progressionUrl': String
+  'progressionUrl': String,
+  'backUrl': { type: String, default: ''}
 })
 import { VueReader } from 'vue-book-reader'
 const initialCfi = new URLSearchParams(window.location.search).get('cfi');
-
+const initialReferrer = document.referrer
 function debounce(func, delay) {
   let timeoutId;
   return function(...args) {
@@ -71,4 +80,12 @@ const getRendition = async (rendition) => {
   rendition.renderer.setStyles([props.css])
 }
 
+const canGoBack = () => {
+  return initialReferrer !== "" || props.backUrl !== ""
+}
+
+const goBack = (e) => {
+  e.preventDefault()
+  window.location.href = props.backUrl ?? initialReferrer;
+}
 </script>
diff --git a/assets/read-ebook.js b/assets/read-ebook.js
@@ -7,12 +7,14 @@ document.addEventListener('DOMContentLoaded', () => {
     const css = document.getElementById(mountId).getAttribute('data-css')
     const bgColor = document.getElementById(mountId).getAttribute('data-background-color')
     const percent = document.getElementById(mountId).getAttribute('data-percent')
-    const progressionUrl = document.getElementById(mountId).getAttribute('data-progressionUrl')
+    const progressionUrl = document.getElementById(mountId).getAttribute('data-progression-url')
+    const backUrl = document.getElementById(mountId).getAttribute('data-back-url')
     createApp(ReadEBook, {
         file: file,
         css: css,
         bgColor: bgColor,
         percent: percent,
-        progressionUrl: progressionUrl
+        progressionUrl: progressionUrl,
+        backUrl: backUrl
     }).mount(`#${mountId}`);
 });
diff --git a/assets/styles/global.scss b/assets/styles/global.scss
@@ -9,6 +9,13 @@ body.bg-darker{
 
 #vue-book-reader{
   width: 100%;
+  .flex{
+    display: flex;
+    button{
+      display: block;
+    }
+  }
+
 }
 
 /*

diff --git a/src/Controller/BookController.php b/src/Controller/BookController.php
@@ -130,6 +130,10 @@ public function read(
                     'file' => $fileSystemManager->getBookPublicPath($book),
                     'body_class' => $themeSelector->isDark() ? 'bg-darker' : '',
                     'isDark' => $themeSelector->isDark(),
+                    'backUrl' => $this->generateUrl('app_book', [
+                        'book' => $book->getId(),
+                        'slug' => $book->getSlug(),
+                    ]),
                 ]);
             case 'pdf':
             case 'cbr':

diff --git a/templates/book/reader-files-epub.html.twig b/templates/book/reader-files-epub.html.twig
@@ -13,7 +13,13 @@
 {% endblock %}
 
 {% block content %}
-    <div id="vue-book-reader" data-progressionUrl="{{ app.request.pathInfo }}" data-percent="{{ percent??'undefined' }}" data-file="{{ file }}" data-css="{{ block('readercss')|e('html_attr') }}" data-background-color="{{ isDark ? '#000' : '#fff' }}">
+    <div id="vue-book-reader"
+         data-progression-url="{{ app.request.pathInfo }}"
+         data-percent="{{ percent??'undefined' }}"
+         data-file="{{ file }}"
+         data-css="{{ block('readercss')|e('html_attr') }}"
+         data-background-color="{{ isDark ? '#000' : '#fff' }}"
+         data-back-url="{{ backUrl }}">
         <a href="{{ file }}">Loading book</a>
     </div>
 {% endblock %}