-Added a more subtle progress bar which only shows the page number on hover

-Added Current page indicator to the thumbnail list, as well as a hover state
-Thumbnail list now scrolls to the current page on open or page change
-Added @andy29485's request for controlling page with space/shift+space
-Added the book title to the top of the page -Fixed IE11 failing on imagecallback

cps/static/css/kthoom.css

@@ -1,17 +1,21 @@
 body {
-	background: #444;
+  background: #444;
   overflow-x: hidden;
   overflow-y: auto;
-	color: white;
+  color: white;
-	font-family: sans-serif;
+  font-family: sans-serif;
-	margin: 0px;
+  margin: 0px;
 }
 
 #main {
-	text-align: center;
+  text-align: center;
   z-index: 2;
 }
 
+.view {
+  padding-top:0px;
+}
+
 #sidebar a,
 #sidebar ul,
 #sidebar li,
@@ -20,10 +24,28 @@ body {
   text-align: center;
 }
 
+#sidebar ul {
+  position: relative;
+}
+
 #sidebar a {
   display: inline-block;
   position: relative;
   cursor: pointer;
+  padding: 4px;
+
+  transition: all .2s ease;
+}
+
+#sidebar a:hover,
+#sidebar a:focus {
+  outline: none;
+  box-shadow: 0px 2px 8px 1px black;
+}
+
+#sidebar a.active,
+#sidebar a.active img + span {
+  background-color:  #45B29D;
 }
 
 #sidebar li img {
@@ -47,21 +69,65 @@ body {
 }
 
 #progress {
-	position: absolute;
+  position: absolute;
-	display: inline;
+  display: inline;
-  left: 20%;
+  top: 0;
-  right: 20%;
+  left: 0;
-	height: 20px;
+  right: 0;
-  margin-top: 4px;
+  min-height: 4px;
-	text-align: right;
+  font-family: sans-serif;
+  font-size: 10px;
+  line-height: 10px;
+  text-align: right;
+
+  transition: min-height 150ms ease-in-out;
+}
+
+#progress .bar-load,
+#progress .bar-read {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+
+  transition: width 150ms ease-in-out;
+}
+
+#progress .bar-load {
+  color: #000;
+  background-color: #CCC;
+}
+
+#progress .bar-read  {
+  color: #FFF;
+  background-color: #45B29D;
+}
+
+#progress .text {
+  display: none;
+  padding: 0 5px;
+}
+
+#progress.loading,
+#titlebar:hover #progress {
+  min-height: 10px;
+}
+
+#progress.loading .text,
+#titlebar:hover #progress .text {
+  display: inline-block;
 }
 
 .hide {
-	display: none !important;
+  display: none !important;
 }
 
 #mainContent {
   overflow: auto;
+  outline: none;
 }
 
 #mainText {
@@ -82,6 +148,10 @@ body {
   height: auto;
 }
 
+#metainfo {
+  max-width: 70%;
+}
+
 #prev {
   left: 40px;
 }
@@ -176,43 +246,11 @@ th {
   color: #FFF;
 }
 
-.dark-theme .overlay {
+.dark-theme #progress .bar-read {
-  background-color: rgba(0,0,0,0.8);
+  background-color: red;
 }
 
-.view {
-    padding-top:0px;
-}
-
-#Progress {
-  margin: auto;
-  width: 80%;
-  background-color: #ddd;
-  display: inline-block;
-  margin-top: 5px;
-}
-
-#meter {
-  width: 0%;
-  height: 5px;
-  background-color: #1C5484;
-}
 
-#meter2 {
+.dark-theme .overlay {
-  width: 0%;
+  background-color: rgba(0,0,0,0.8);
-  height: 15px;
-  background-color: #028138;
-}
-
-#page {
-  text-align:left;
-  margin-top:-20px;
-  font-size:80%;
-  width: 0%;
-}
-
-#progress_title {
-  text-align:right;
-  margin-top:-15px;
-  font-size:80%;
 }

cps/static/js/kthoom.js

@@ -17,8 +17,6 @@
 */
 /* global screenfull */
 
-// var start = 0;
-
 if (window.opera) {
     window.console.log = function(str) {
         opera.postError(str);
@@ -44,6 +42,7 @@ if (typeof window.kthoom === "undefined" ) {
 // key codes
 kthoom.Key = {
     ESCAPE: 27,
+    SPACE: 32,
     LEFT: 37,
     UP: 38,
     RIGHT: 39,
@@ -106,41 +105,9 @@ kthoom.ImageFile = function(file) {
     this.data = file;
 };
 
-
-kthoom.initProgressMeter = function() {
-    $("#Progress").removeClass("hide");
-    $("#Progress").click(function(e) {
-        var page = Math.max(1, Math.ceil((e.offsetX / $(this).width()) * totalImages)) - 1;
-        currentImage = page;
-        updatePage();
-    });
-};
-
-kthoom.setProgressMeter = function(optLabel) {
-    var pct = imageFiles.length / totalImages * 100;
-    if (pct === 100) {
-        //smartpct = 100;
-        getElem("progress_title").innerHTML = "Complete";
-    } else {
-        var labelText = pct.toFixed(2) + "% " + imageFiles.length + "/" + totalImages + "";
-        if (optLabel) {
-            labelText = optLabel + " " + labelText;
-        }
-        getElem("progress_title").innerHTML=labelText;
-    }
-    if (!isNaN(pct)) {
-        getElem("meter").style.width = pct + "%";
-    }
-
-    getElem("meter2").style.width= 100 * (totalImages === 0 ? 0 : ((currentImage + 1) / totalImages)) + "%";
-    getElem("page").innerHTML=(currentImage + 1) + "/" + totalImages ;
-};
-
 function loadFromArrayBuffer(ab) {
     var f = [];
-    if (typeof ab !== "object") {
+
-        ab = JSON.parse(ab);
-    }
     f.fileData = ab.content;
     f.filename = ab.name;
     // add any new pages based on the filename
@@ -158,10 +125,10 @@ function loadFromArrayBuffer(ab) {
             "</li>"
         );
     }
-    // var percentage = (ab.page + 1) / (ab.last + 1);
+    var percentage = ((ab.page + 1) / (ab.last + 1)) * 100;
+    updateProgress(percentage);
+
     totalImages = ab.last + 1;
-    kthoom.setProgressMeter("Unzipping");
-    // lastCompletion = percentage * 100;
 
     // display first page if we haven't yet
     if (imageFiles.length === currentImage + 1) {
@@ -169,10 +136,28 @@ function loadFromArrayBuffer(ab) {
     }
 }
 
+function scrollTocToActive() {
+    // Scroll to the thumbnail in the TOC on page change
+    $('#tocView').stop().animate({
+        scrollTop: $('#tocView a.active').position().top
+    }, 200);
+}
 
 function updatePage() {
-    getElem("page").innerHTML=(currentImage + 1) + "/" + totalImages ;
+    $('.page').text((currentImage + 1 ) + "/" + totalImages);
-    getElem("meter2").style.width= 100 * (totalImages === 0 ? 0 : ((currentImage + 1) / totalImages)) + "%";
+
+    // Mark the current page in the TOC
+    $('#tocView a[data-page]')
+    // Remove the currently active thumbnail
+        .removeClass('active')
+        // Find the new one
+        .filter('[data-page='+ (currentImage + 1) +']')
+        // Set it to active
+        .addClass('active');
+
+    scrollTocToActive();
+    updateProgress();
+
     if (imageFiles[currentImage]) {
         setImage(imageFiles[currentImage].dataURI);
     } else {
@@ -185,6 +170,22 @@ function updatePage() {
     kthoom.saveSettings();
 }
 
+function updateProgress(loadPercentage) {
+    // Set the load/unzip progress if it's passed in
+    if (loadPercentage) {
+        $("#progress .bar-load").css({ width: loadPercentage + "%" });
+
+        if (loadPercentage === 100) {
+            $("#progress")
+                .removeClass('loading')
+                .find(".load").text('');
+        }
+    }
+
+    // Set page progress bar
+    $("#progress .bar-read").css({ width: totalImages === 0 ? 0 : Math.round((currentImage + 1) / totalImages * 100) + "%"});
+}
+
 function setImage(url) {
     var canvas = $("#mainImage")[0];
     var x = $("#mainImage")[0].getContext("2d");
@@ -332,23 +333,18 @@ function updateScale(clear) {
 }
 
 function keyHandler(evt) {
-    var code = evt.keyCode;
+    var hasModifier = evt.ctrlKey || evt.shiftKey || evt.metaKey;
-
+    switch (evt.keyCode) {
-    if ($("#progress").css("display") === "none") {
-        return;
-    }
-    // canKeyNext = (($("body").css("offsetWidth") + $("body").css("scrollLeft")) / $("body").css("scrollWidth")) >= 1;
-    // canKeyPrev = (scrollX <= 0);
-
-    if (evt.ctrlKey || evt.shiftKey || evt.metaKey) return;
-    switch (code) {
         case kthoom.Key.LEFT:
+            if (hasModifier) break;
             showPrevPage();
             break;
         case kthoom.Key.RIGHT:
+            if (hasModifier) break;
             showNextPage();
             break;
         case kthoom.Key.L:
+            if (hasModifier) break;
             settings.rotateTimes--;
             if (settings.rotateTimes < 0) {
                 settings.rotateTimes = 3;
@@ -356,6 +352,7 @@ function keyHandler(evt) {
             updatePage();
             break;
         case kthoom.Key.R:
+            if (hasModifier) break;
             settings.rotateTimes++;
             if (settings.rotateTimes > 3) {
                 settings.rotateTimes = 0;
@@ -363,6 +360,7 @@ function keyHandler(evt) {
             updatePage();
             break;
         case kthoom.Key.F:
+            if (hasModifier) break;
             if (!settings.hflip && !settings.vflip) {
                 settings.hflip = true;
             } else if (settings.hflip === true && settings.vflip === true) {
@@ -377,23 +375,43 @@ function keyHandler(evt) {
             updatePage();
             break;
         case kthoom.Key.W:
+            if (hasModifier) break;
             settings.fitMode = kthoom.Key.W;
             updateScale(false);
             break;
         case kthoom.Key.H:
+            if (hasModifier) break;
             settings.fitMode = kthoom.Key.H;
             updateScale(false);
             break;
         case kthoom.Key.B:
+            if (hasModifier) break;
             settings.fitMode = kthoom.Key.B;
             updateScale(false);
             break;
         case kthoom.Key.N:
+            if (hasModifier) break;
             settings.fitMode = kthoom.Key.N;
             updateScale(false);
             break;
+        case kthoom.Key.SPACE:
+            var container = $('#mainContent');
+            var atTop = container.scrollTop() === 0;
+            var atBottom = container.scrollTop() >= container[0].scrollHeight - container.height();
+
+            if (evt.shiftKey && atTop) {
+                evt.preventDefault();
+                // If it's Shift + Space and the container is at the top of the page
+                showPrevPage();
+            } else if (!evt.shiftKey && atBottom) {
+                evt.preventDefault();
+                // If you're at the bottom of the page and you only pressed space
+                showNextPage();
+                container.scrollTop(0);
+            }
+            break;
         default:
-            //console.log('KeyCode = ' + code);
+            //console.log('KeyCode', evt.keyCode);
             break;
     }
 }
@@ -404,31 +422,31 @@ function ImageLoadCallback() {
     if (jso === null) {
         setImage("error");
     } else {
+        // IE 11 sometimes sees the response as a string
+        if (typeof jso !== "object") {
+            jso = JSON.parse(jso);
+        }
+
         if (jso.page !== jso.last) {
             this.open("GET", this.fileid + "/" + (jso.page + 1));
             this.addEventListener("load", ImageLoadCallback);
             this.send();
         }
-        /*else
+
-        {
-            var diff = ((new Date).getTime() - start) / 1000;
-            console.log("Transfer done in " + diff + "s");
-        }*/
         loadFromArrayBuffer(jso);
     }
 }
 function init(fileid) {
-    // start = (new Date).getTime();
     var request = new XMLHttpRequest();
     request.open("GET", fileid);
     request.responseType = "json";
     request.fileid = fileid.substring(0, fileid.length - 2);
     request.addEventListener("load", ImageLoadCallback);
     request.send();
-    kthoom.initProgressMeter();
     document.body.className += /AppleWebKit/.test(navigator.userAgent) ? " webkit" : "";
     kthoom.loadSettings();
     updateScale(true);
+
     $(document).keydown(keyHandler);
 
     $(window).resize(function() {
@@ -440,6 +458,13 @@ function init(fileid) {
         $("#sidebar").toggleClass("open");
         $("#main").toggleClass("closed");
         $(this).toggleClass("icon-menu icon-right");
+
+        // We need this in a timeout because if we call it during the CSS transition, IE11 shakes the page ¯\_(ツ)_/¯
+        setTimeout(function(){
+            // Focus on the TOC or the main content area, depending on which is open
+            $('#main:not(.closed) #mainContent, #sidebar.open #tocView').focus();
+            scrollTocToActive();
+        }, 500);
     });
 
     // Open Settings modal
@@ -487,6 +512,9 @@ function init(fileid) {
         }
     }
 
+    // Focus the scrollable area so that keyboard scrolling work as expected
+    $('#mainContent').focus();
+
     $("#mainImage").click(function(evt) {
         // Firefox does not support offsetX/Y so we have to manually calculate
         // where the user clicked in the image.

cps/templates/readcbr.html

@@ -1,148 +1,156 @@
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
-  	<meta charset="utf-8">
+  <meta charset="utf-8">
-  	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <title>Comic Reader</title>
+  <title>Comic Reader</title>
-    <meta name="description" content="">
+  <meta name="description" content="">
-	<meta name="viewport" content="width=device-width, user-scalable=no">
+  <meta name="viewport" content="width=device-width, user-scalable=no">
-    <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
 
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/libs/normalize.css') }}">
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/libs/normalize.css') }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" type="text/css"/>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" type="text/css"/>
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/kthoom.css') }}" type="text/css"/>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/kthoom.css') }}" type="text/css"/>
 
-    <script src="{{ url_for('static', filename='js/libs/jquery.min.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/libs/jquery.min.js') }}"></script>
-	<script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>
-	<script src="{{ url_for('static', filename='js/kthoom.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/kthoom.js') }}"></script>
-    <script>
+  <script>
-            document.onreadystatechange = function () {
+    document.onreadystatechange = function () {
-              if (document.readyState == "complete") {
+      if (document.readyState == "complete") {
-                init("{{ url_for('get_comic_book', book_id=comicfile, book_format=extension, page=0) }}");
+        init("{{ url_for('get_comic_book', book_id=comicfile, book_format=extension, page=0) }}");
-                }                
+      }
-            };
+    };
-    </script>    
+  </script>
-  </head>
+</head>
-  <body>
+<body>
-    <div id="sidebar">
+<div id="sidebar">
-      <!--div id="panels"-->
+  <!--
-        <!-- <a id="show-Toc" class="show_view icon-list-1 active" data-view="Toc">TOC</a> -->
+  <div id="panels">
-        <!-- <a id="show-Bookmarks" class="show_view icon-bookmark" data-view="Bookmarks">Bookmarks</a> -->
+     <a id="show-Toc" class="show_view icon-list-1 active" data-view="Toc">TOC</a>
-      <!--/div-->
+     <a id="show-Bookmarks" class="show_view icon-bookmark" data-view="Bookmarks">Bookmarks</a>
-      <div id="tocView" class="view">
+  </div>
-        <ul id="thumbnails"></ul>
+  -->
+  <div id="tocView" class="view" tabindex="-1">
+    <ul id="thumbnails"></ul>
+  </div>
+  <div id="bookmarksView" class="view">
+    <ul id="bookmarks"></ul>
+  </div>
+</div>
+
+<div id="main" class="main">
+  <div id="titlebar" class="main">
+    <div id="opener">
+      <a id="slider" class="icon-menu">Menu</a>
+    </div>
+    <div id="metainfo">
+      <span id="book-title">{{ book.title | shortentitle }}</span>
+      <span id="title-seperator">&nbsp;&nbsp;–&nbsp;&nbsp;</span>
+      <span id="chapter-title"></span>
+    </div>
+    <div id="title-controls">
+      <a id="setting" class="icon-cog">Settings</a>
+      <a id="fullscreen" class="icon-resize-full">Fullscreen</a>
+    </div>
+    <div id="progress" role="progressbar" class="loading">
+      <div class="bar-load">
+        <div class="text load">
+          Loading...
+        </div>
       </div>
-      <div id="bookmarksView" class="view">
+      <div class="bar-read">
-        <ul id="bookmarks"></ul>
+        <div class="text page"></div>
       </div>
     </div>
+  </div>
 
-    <div id="main" class="main">
+  <div id="mainContent" tabindex="-1">
-      <div id="titlebar" class="main">
+    <div id="mainText" style="display:none"></div>
-        <div id="opener">
+    <canvas id="mainImage"></canvas>
-          <a id="slider" class="icon-menu">Menu</a>
+  </div>
-        </div>
+  <div id="prev" class="arrow" onclick="showPrevPage()">‹</div>
-        <div id="metainfo">
+  <div id="next" class="arrow" onclick="showNextPage()">›</div>
-          <span id="book-title"></span>
+</div>
-          <span id="title-seperator">&nbsp;&nbsp;–&nbsp;&nbsp;</span>
-          <span id="chapter-title"></span>
-        </div>
-          <div id="Progress" class="hide">
-              <div id="meter2"></div><div class="progress_title" id="progress_title" ></div>
-              <div id="meter"></div><div class="page" id="page" ></div>
-          </div>
-        <div id="title-controls">
-          <a id="setting" class="icon-cog">Settings</a>
-          <a id="fullscreen" class="icon-resize-full">Fullscreen</a>
-        </div>
-	    </div>
 
-	    <div id="mainContent">
+<div class="modal md-effect-1" id="settings-modal">
-	      <div id="mainText" style="display:none"></div>
+  <div class="md-content">
-      	<canvas id="mainImage"></canvas>
+    <h3>{{_('Settings')}}</h3>
-	    </div>
+    <div>
-          <div id="prev" class="arrow" onclick="showPrevPage()">‹</div>
+      <div class="settings-column">
-          <div id="next" class="arrow" onclick="showNextPage()">›</div>
+        <table>
-    </div>
+          <thead>
-
+          <tr><th colspan="2">{{_('Keyboard Shortcuts')}}</th></tr>
-    <div class="modal md-effect-1" id="settings-modal">
+          </thead>
-        <div class="md-content">
+          <tbody>
-            <h3>{{_('Settings')}}</h3>
+          <tr><td>&larr;</td> <td>{{_('Previous Page')}}</td></tr>
-            <div>
+          <tr><td>&rarr;</td> <td>{{_('Next Page')}}</td></tr>
-              <div class="settings-column">
+          <tr><td>B</td>      <td>{{_('Scale to Best')}}</td></tr>
-                <table>
+          <tr><td>W</td>      <td>{{_('Scale to Width')}}</td></tr>
-                  <thead>
+          <tr><td>H</td>      <td>{{_('Scale to Height')}}</td></tr>
-                    <tr><th colspan="2">{{_('Keyboard Shortcuts')}}</th></tr>
+          <tr><td>N</td>      <td>{{_('Scale to Native')}}</td></tr>
-                  </thead>
+          <tr><td>R</td>      <td>{{_('Rotate Right')}}</td></tr>
-                  <tbody>
+          <tr><td>L</td>      <td>{{_('Rotate Left')}}</td></tr>
-                    <tr><td>&larr;</td> <td>{{_('Previous Page')}}</td></tr>
+          <tr><td>F</td>      <td>{{_('Flip Image')}}</td></tr>
-                    <tr><td>&rarr;</td> <td>{{_('Next Page')}}</td></tr>
+          </tbody>
-                    <tr><td>B</td>      <td>{{_('Scale to Best')}}</td></tr>
+        </table>
-                    <tr><td>W</td>      <td>{{_('Scale to Width')}}</td></tr>
+      </div>
-                    <tr><td>H</td>      <td>{{_('Scale to Height')}}</td></tr>
+      <div class="settings-column">
-                    <tr><td>N</td>      <td>{{_('Scale to Native')}}</td></tr>
+        <table id="settings">
-                    <tr><td>R</td>      <td>{{_('Rotate Right')}}</td></tr>
+          <thead>
-                    <tr><td>L</td>      <td>{{_('Rotate Left')}}</td></tr>
+          <tr>
-                    <tr><td>F</td>      <td>{{_('Flip Image')}}</td></tr>
+            <th>{{_('Settings')}}</th>
-                  </tbody>
+          </tr>
-                </table>
+          </thead>
+          <tbody>
+          <tr>
+            <th>{{_('Theme')}}:</th>
+            <td>
+              <div class="inputs">
+                <label for="lightTheme"><input type="radio" id="lightTheme" name="theme" value="light" /> {{_('Light')}}</label>
+                <label for="darkTheme"><input type="radio" id="darkTheme" name="theme" value="dark" /> {{_('Dark')}}</label>
               </div>
-              <div class="settings-column">
+            </td>
-                <table id="settings">
+          </tr>
-                  <thead>
+          <tr>
-                    <tr>
+            <th>{{_('Scale')}}:</th>
-                      <th>{{_('Settings')}}</th>
+            <td>
-                    </tr>
+              <div class="inputs">
-                  </thead>
+                <label for="fitBest"><input type="radio" id="fitBest" name="fitMode" value="66" /> {{_('Best')}}</label>
-                  <tbody>
+                <label for="fitWidth"><input type="radio" id="fitWidth" name="fitMode" value="87" /> {{_('Width')}}</label>
-                    <tr>
+                <label for="fitHeight"><input type="radio" id="fitHeight" name="fitMode" value="72" /> {{_('Height')}}</label>
-                      <th>{{_('Theme')}}:</th>
+                <label for="fitNative"><input type="radio" id="fitNative" name="fitMode" value="78" /> {{_('Native')}}</label>
-                      <td>
-                        <div class="inputs">
-                          <label for="lightTheme"><input type="radio" id="lightTheme" name="theme" value="light" /> {{_('Light')}}</label>
-                          <label for="darkTheme"><input type="radio" id="darkTheme" name="theme" value="dark" /> {{_('Dark')}}</label>
-                        </div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <th>{{_('Scale')}}:</th>
-                      <td>
-                        <div class="inputs">                              
-                          <label for="fitBest"><input type="radio" id="fitBest" name="fitMode" value="66" /> {{_('Best')}}</label>
-                          <label for="fitWidth"><input type="radio" id="fitWidth" name="fitMode" value="87" /> {{_('Width')}}</label>
-                          <label for="fitHeight"><input type="radio" id="fitHeight" name="fitMode" value="72" /> {{_('Height')}}</label>
-                          <label for="fitNative"><input type="radio" id="fitNative" name="fitMode" value="78" /> {{_('Native')}}</label>
-                        </div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <th>{{_('Rotate')}}:</th>
-                      <td>
-                        <div class="inputs">                              
-                          <label for="r0"><input type="radio" id="r0" name="rotateTimes" value="0" /> 0&deg;</label>
-                          <label for="r90"><input type="radio" id="r90" name="rotateTimes" value="1" /> 90&deg;</label>
-                          <label for="r180"><input type="radio" id="r180" name="rotateTimes" value="2" /> 180&deg;</label>
-                          <label for="r270"><input type="radio" id="r270" name="rotateTimes" value="3" /> 270&deg;</label>
-                        </div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <th>{{_('Flip')}}:</th>
-                      <td>
-                        <div class="inputs">                              
-                          <label for="vflip"><input type="checkbox" id="vflip" name="vflip" /> {{_('Horizontal')}}</label>
-                          <label for="hflip"><input type="checkbox" id="hflip" name="hflip" /> {{_('Vertical')}}</label>
-                        </div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
               </div>
-            </div>
+            </td>
-            <div class="closer icon-cancel-circled"></div>
+          </tr>
-        </div>
+          <tr>
+            <th>{{_('Rotate')}}:</th>
+            <td>
+              <div class="inputs">
+                <label for="r0"><input type="radio" id="r0" name="rotateTimes" value="0" /> 0&deg;</label>
+                <label for="r90"><input type="radio" id="r90" name="rotateTimes" value="1" /> 90&deg;</label>
+                <label for="r180"><input type="radio" id="r180" name="rotateTimes" value="2" /> 180&deg;</label>
+                <label for="r270"><input type="radio" id="r270" name="rotateTimes" value="3" /> 270&deg;</label>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <th>{{_('Flip')}}:</th>
+            <td>
+              <div class="inputs">
+                <label for="vflip"><input type="checkbox" id="vflip" name="vflip" /> {{_('Horizontal')}}</label>
+                <label for="hflip"><input type="checkbox" id="hflip" name="hflip" /> {{_('Vertical')}}</label>
+              </div>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
-    <div class="overlay"></div>
+    <div class="closer icon-cancel-circled"></div>
+  </div>
+</div>
+<div class="overlay"></div>
 
-  </body>
+</body>
 </html>

cps/web.py

@@ -1972,7 +1972,7 @@ def read_book(book_id, book_format):
             extensionList = ["cbt","cbz"]
         for fileext in extensionList:
             if book_format.lower() == fileext:
-                return render_title_template('readcbr.html', comicfile=book_id, extension=fileext, title=_(u"Read a Book"))
+                return render_title_template('readcbr.html', comicfile=book_id, extension=fileext, title=_(u"Read a Book"), book=book)
         flash(_(u"Error opening eBook. File does not exist or file is not accessible."), category="error")
         return redirect(url_for("index"))