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 %}