From 675e8dd5cdcb7303d0d90cc955925bfb4a8f00f4 Mon Sep 17 00:00:00 2001
From: Jonathan Rehm <jonathan@rehm.me>
Date: Thu, 6 Jul 2017 09:21:35 -0700
Subject: [PATCH] Show book details in modal dialog

With them shown in a modal, you don't lose your place in the pagination. If the request comes via Ajax, the minimal layout is used. If via a normal request, the full layout is used. That lets you open the details in a new tab and have the full experience, but if you're clicking through the results of a search, you can view many without losing your place.
---
 cps/static/js/main.js       | 11 +++++++++++
 cps/templates/detail.html   |  2 +-
 cps/templates/discover.html |  2 +-
 cps/templates/fragment.html |  4 ++++
 cps/templates/index.html    |  4 ++--
 cps/templates/layout.html   | 14 ++++++++++++++
 cps/templates/search.html   |  2 +-
 cps/templates/shelf.html    |  2 +-
 cps/web.py                  |  7 ++++++-
 9 files changed, 41 insertions(+), 7 deletions(-)
 create mode 100644 cps/templates/fragment.html

diff --git a/cps/static/js/main.js b/cps/static/js/main.js
index d759a3b8..55ea42b3 100644
--- a/cps/static/js/main.js
+++ b/cps/static/js/main.js
@@ -121,6 +121,17 @@ $(function() {
         });
     });
 
+    $('#bookDetailsModal')
+      .on('show.bs.modal', function(e) {
+        var $modalBody = $(this).find('.modal-body');
+        $.get(e.relatedTarget.href).done(function(content) {
+          $modalBody.html(content);
+        });
+      })
+      .on('hidden.bs.modal', function() {
+        $(this).find('.modal-body').html('...');
+      });
+
     $(window).resize(function(event) {
         $(".discover .row").isotope("reLayout");
     });
diff --git a/cps/templates/detail.html b/cps/templates/detail.html
index 14389809..1d6efe0e 100644
--- a/cps/templates/detail.html
+++ b/cps/templates/detail.html
@@ -1,4 +1,4 @@
-{% extends "layout.html" %}
+{% extends is_xhr|yesno("fragment.html", "layout.html") %}
 {% block body %}
 <div class="single">
   <div class="row">
diff --git a/cps/templates/discover.html b/cps/templates/discover.html
index 32f89a47..ff79c23b 100644
--- a/cps/templates/discover.html
+++ b/cps/templates/discover.html
@@ -8,7 +8,7 @@
     <div class="col-sm-3 col-lg-2 col-xs-6 book">
       <div class="cover">
         {% if entry.has_cover is defined %}
-          <a href="{{ url_for('show_book', book_id=entry.id) }}">
+          <a href="{{ url_for('show_book', book_id=entry.id) }}" data-toggle="modal" data-target="#bookDetailsModal" data-remote="false">
             <img src="{{ url_for('get_cover', cover_path=entry.path.replace('\\','/')) }}" />
           </a>
         {% endif %}
diff --git a/cps/templates/fragment.html b/cps/templates/fragment.html
new file mode 100644
index 00000000..1421ea6a
--- /dev/null
+++ b/cps/templates/fragment.html
@@ -0,0 +1,4 @@
+<div class="container-fluid">
+  {% block body %}{% endblock %}
+</div>
+{% block js %}{% endblock %}
diff --git a/cps/templates/index.html b/cps/templates/index.html
index 768c28bd..72df252a 100755
--- a/cps/templates/index.html
+++ b/cps/templates/index.html
@@ -8,7 +8,7 @@
     {% for entry in random %}
     <div id="books_rand" class="col-sm-3 col-lg-2 col-xs-6 book">
       <div class="cover">
-          <a href="{{ url_for('show_book', book_id=entry.id) }}">
+          <a href="{{ url_for('show_book', book_id=entry.id) }}" data-toggle="modal" data-target="#bookDetailsModal" data-remote="false">
             {% if entry.has_cover %}
               <img src="{{ url_for('get_cover', cover_path=entry.path.replace('\\','/')) }}" />
             {% else %}
@@ -44,7 +44,7 @@
     {% for entry in entries %}
     <div id="books" class="col-sm-3 col-lg-2 col-xs-6 book">
       <div class="cover">
-          <a href="{{ url_for('show_book', book_id=entry.id) }}">
+          <a href="{{ url_for('show_book', book_id=entry.id) }}" data-toggle="modal" data-target="#bookDetailsModal" data-remote="false">
             {% if entry.has_cover %}
               <img src="{{ url_for('get_cover', cover_path=entry.path.replace('\\','/')) }}" />
             {% else %}
diff --git a/cps/templates/layout.html b/cps/templates/layout.html
index 1833df5c..60a4caf9 100644
--- a/cps/templates/layout.html
+++ b/cps/templates/layout.html
@@ -188,6 +188,20 @@
         </div>
       </div>
     </div>
+    <div class="modal fade" id="bookDetailsModal" tabindex="-1" role="dialog" aria-labelledby="bookDetailsModalLabel">
+      <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+            <h4 class="modal-title" id="bookDetailsModalLabel">{{_('Book Details')}}</h4>
+          </div>
+          <div class="modal-body">...</div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">{{_('Close')}}</button>
+          </div>
+        </div>
+      </div>
+    </div>
     {% block modal %}{% endblock %}
     {% block js %}{% endblock %}
   </body>
diff --git a/cps/templates/search.html b/cps/templates/search.html
index 7e82c1fc..3f705c47 100644
--- a/cps/templates/search.html
+++ b/cps/templates/search.html
@@ -15,7 +15,7 @@
     <div class="col-sm-3 col-lg-2 col-xs-6 book">
       <div class="cover">
         {% if entry.has_cover is defined %}
-           <a href="{{ url_for('show_book', book_id=entry.id) }}">
+           <a href="{{ url_for('show_book', book_id=entry.id) }}" data-toggle="modal" data-target="#bookDetailsModal" data-remote="false">
             <img src="{{ url_for('get_cover', cover_path=entry.path.replace('\\','/')) }}" />
           </a>
         {% endif %}
diff --git a/cps/templates/shelf.html b/cps/templates/shelf.html
index a81538e1..46586925 100644
--- a/cps/templates/shelf.html
+++ b/cps/templates/shelf.html
@@ -15,7 +15,7 @@
     <div class="col-sm-3 col-lg-2 col-xs-6 book">
       <div class="cover">
         {% if entry.has_cover is defined %}
-          <a href="{{ url_for('show_book', book_id=entry.id) }}">
+          <a href="{{ url_for('show_book', book_id=entry.id) }}" data-toggle="modal" data-target="#bookDetailsModal" data-remote="false">
             <img src="{{ url_for('get_cover', cover_path=entry.path.replace('\\','/')) }}" />
           </a>
         {% endif %}
diff --git a/cps/web.py b/cps/web.py
index 8b588650..9d73b173 100755
--- a/cps/web.py
+++ b/cps/web.py
@@ -411,6 +411,11 @@ def timestamptodate(date, fmt=None):
     return native.strftime(time_format)
 
 
+@app.template_filter('yesno')
+def yesno(str, yes, no):
+    return yes if str else no
+
+
 def admin_required(f):
     """
     Checks if current_user.role == 1
@@ -1233,7 +1238,7 @@ def show_book(book_id):
         else:
             have_read = None
 
-        return render_title_template('detail.html', entry=entries, cc=cc,
+        return render_title_template('detail.html', entry=entries, cc=cc, is_xhr=request.is_xhr,
                                      title=entries.title, books_shelfs=book_in_shelfs, have_read=have_read)
     else:
         flash(_(u"Error opening eBook. File does not exist or file is not accessible:"), category="error")