From 4392fec7f5836512fd7d3fc6562ea293f28814a8 Mon Sep 17 00:00:00 2001
From: Ozzie Isaacs <ozzie.fernandez.isaacs@googlemail.com>
Date: Wed, 26 May 2021 19:40:41 +0200
Subject: [PATCH] Added fullscreen cover viewer

---
 cps/static/css/style.css     |  6 +++++
 cps/static/js/fullscreen.js  | 45 ++++++++++++++++++++++++++++++++++++
 cps/templates/book_edit.html |  3 ++-
 cps/templates/detail.html    |  3 ++-
 4 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 cps/static/js/fullscreen.js

diff --git a/cps/static/css/style.css b/cps/static/css/style.css
index f1d38901..5b7715fd 100644
--- a/cps/static/css/style.css
+++ b/cps/static/css/style.css
@@ -417,3 +417,9 @@ div.log {
   white-space: nowrap;
   padding: 0.5em;
 }
+
+#detailcover { cursor:zoom-in; }
+#detailcover:-webkit-full-screen { cursor:zoom-out; }
+#detailcover:-moz-full-screen { cursor:zoom-out; }
+#detailcover:-ms-fullscreen { cursor:zoom-out; }
+#detailcover:fullscreen { cursor:zoom-out; }
diff --git a/cps/static/js/fullscreen.js b/cps/static/js/fullscreen.js
new file mode 100644
index 00000000..cb1c3d19
--- /dev/null
+++ b/cps/static/js/fullscreen.js
@@ -0,0 +1,45 @@
+/* This file is part of the Calibre-Web (https://github.com/janeczku/calibre-web)
+ *    Copyright (C) 2021  OzzieIsaacs
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+function toggleFullscreen(elem) {
+  if (!document.fullscreenElement && !document.mozFullScreenElement &&
+    !document.webkitFullscreenElement && !document.msFullscreenElement) {
+    if (elem.requestFullscreen) {
+      elem.requestFullscreen();
+    } else if (elem.msRequestFullscreen) {
+      elem.msRequestFullscreen();
+    } else if (elem.mozRequestFullScreen) {
+      elem.mozRequestFullScreen();
+    } else if (elem.webkitRequestFullscreen) {
+      elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+    }
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    } else if (document.msExitFullscreen) {
+      document.msExitFullscreen();
+    } else if (document.mozCancelFullScreen) {
+      document.mozCancelFullScreen();
+    } else if (document.webkitExitFullscreen) {
+      document.webkitExitFullscreen();
+    }
+  }
+}
+
+$("#detailcover").click(function() {
+  toggleFullscreen(this);
+});
diff --git a/cps/templates/book_edit.html b/cps/templates/book_edit.html
index 42e9801c..5ecfd876 100644
--- a/cps/templates/book_edit.html
+++ b/cps/templates/book_edit.html
@@ -3,7 +3,7 @@
 {% if book %}
   <div class="col-sm-3 col-lg-3 col-xs-12">
     <div class="cover">
-        <img src="{{ url_for('web.get_cover', book_id=book.id, edit=1|uuidfilter)  }}" alt="{{ book.title }}"/>
+        <img id="detailcover" src="{{ url_for('web.get_cover', book_id=book.id, edit=1|uuidfilter)  }}" alt="{{ book.title }}"/>
     </div>
 {% if g.user.role_delete_books() %}
     <div class="text-center">
@@ -327,6 +327,7 @@
 <script src="{{ url_for('static', filename='js/libs/bootstrap-datepicker/locales/bootstrap-datepicker.' + g.user.locale + '.min.js') }}" charset="UTF-8"></script>
 {% endif %}
 <script src="{{ url_for('static', filename='js/edit_books.js') }}"></script>
+<script src="{{ url_for('static', filename='js/fullscreen.js') }}"></script>
 {% endblock %}
 {% block header %}
 <meta name="referrer" content="never">
diff --git a/cps/templates/detail.html b/cps/templates/detail.html
index dd1934a5..e5a67cde 100644
--- a/cps/templates/detail.html
+++ b/cps/templates/detail.html
@@ -4,7 +4,7 @@
   <div class="row">
     <div class="col-sm-3 col-lg-3 col-xs-5">
       <div class="cover">
-          <img src="{{ url_for('web.get_cover', book_id=entry.id, edit=1|uuidfilter) }}" alt="{{ entry.title }}" />
+          <img id="detailcover" src="{{ url_for('web.get_cover', book_id=entry.id, edit=1|uuidfilter) }}" alt="{{ entry.title }}" />
       </div>
     </div>
     <div class="col-sm-9 col-lg-9 book-meta">
@@ -316,4 +316,5 @@
   </a>
 </script>
 <script src="{{ url_for('static', filename='js/details.js') }}"></script>
+<script src="{{ url_for('static', filename='js/fullscreen.js') }}"></script>
 {% endblock %}