Update comic reader

cps/static/js/kthoom.js

@@ -110,7 +110,7 @@ kthoom.ImageFile = function(file) {
 
 kthoom.initProgressMeter = function() {
   var svgns = 'http://www.w3.org/2000/svg';
-  var pdiv = document.getElementById('progress');
+  var pdiv = $('#progress')[0]; // document.getElementById('progress');
   var svg = document.createElementNS(svgns, 'svg');
   svg.style.width = '100%';
   svg.style.height = '100%';
@@ -337,9 +337,9 @@ function updatePage() {
 }
 
 function setImage(url) {
-  var canvas = getElem('mainImage');
+  var canvas = $("#mainImage")[0];
-  var x = canvas.getContext('2d');
+  var x = $("#mainImage")[0].getContext('2d');
-  document.getElementById('mainText').style.display = 'none';
+  $('#mainText').hide();
   if (url == 'loading') {
     updateScale(true);
     canvas.width = innerWidth - 100;
@@ -349,8 +349,8 @@ function setImage(url) {
     x.strokeStyle = 'black';
     x.fillText('Loading Page #' + (currentImage + 1), 100, 100)
   } else {
-    if (document.body.scrollHeight/innerHeight > 1) {
+    if ($('body').css('scrollHeight')/innerHeight > 1) {
-      document.body.style.overflowY = 'scroll';
+        $('body').css('overflowY', 'scroll');
     }
     
     var img = new Image();
@@ -370,16 +370,17 @@ function setImage(url) {
         var xhr = new XMLHttpRequest();
         xhr.open('GET', url, true);
         xhr.onload = function() {
-          document.getElementById('mainText').style.display = '';
+          //document.getElementById('mainText').style.display = '';
-          document.getElementById('mainText').innerHTML = '<iframe style="width:100%;height:700px;border:0" src="data:text/html,'+escape(xhr.responseText)+'"></iframe>';
+          $("#mainText").css("display", "");
+          $("#mainText").innerHTML('<iframe style="width:100%;height:700px;border:0" src="data:text/html,'+escape(xhr.responseText)+'"></iframe>');
         }
         xhr.send(null);
       } else if (!/(jpg|jpeg|png|gif)$/.test(imageFiles[currentImage].filename) && imageFiles[currentImage].data.uncompressedSize < 10*1024) {
         var xhr = new XMLHttpRequest();
         xhr.open('GET', url, true);
         xhr.onload = function() {
-          document.getElementById('mainText').style.display = '';
+          $("#mainText").css("display", "");
-          document.getElementById('mainText').innerText = xhr.responseText;
+          $("#mainText").innerText(xhr.responseText);
         };
         xhr.send(null);
       }
@@ -412,7 +413,7 @@ function setImage(url) {
       updateScale();
         
       canvas.style.display = '';
-      document.body.style.overflowY = '';
+      $("body").css("overflowY", "");
       x.restore();
     };
     img.src = url;
@@ -480,43 +481,18 @@ function updateScale(clear) {
 function keyHandler(evt) {
   var code = evt.keyCode;
 
-  // If the overlay is shown, the only keystroke we handle is closing it.
-  var overlayStyle = getElem('overlay').style;
-  var overlayShown = (overlayStyle.display != 'none');
-  if (overlayShown) {
-    if (code == kthoom.Key.QUESTION_MARK || code == kthoom.Key.ESCAPE) {
-      getElem('menu').classList.remove('opened');
-      overlayStyle.display = 'none';
-    }
-    return;
-  }
-
-
   if (getComputedStyle(getElem('progress')).display == 'none') return;
   canKeyNext = ((document.body.offsetWidth+document.body.scrollLeft)/ document.body.scrollWidth) >= 1;
   canKeyPrev = (scrollX <= 0);
 
   if (evt.ctrlKey || evt.shiftKey || evt.metaKey) return;
   switch(code) {
-    case kthoom.Key.X:
-      toggleToolbar();
-      break;
     case kthoom.Key.LEFT:
       if (canKeyPrev) showPrevPage();
       break;
     case kthoom.Key.RIGHT:
       if (canKeyNext) showNextPage();
       break;
-    case kthoom.Key.LEFT_SQUARE_BRACKET:
-      if (library.currentBookNum > 0) {
-        loadPrevBook();
-      }
-      break;
-    case kthoom.Key.RIGHT_SQUARE_BRACKET:
-      if (library.currentBookNum < library.allBooks.length - 1) {
-        loadNextBook();
-      }
-      break;
     case kthoom.Key.L:
       kthoom.rotateTimes--;
       if (kthoom.rotateTimes < 0) {
@@ -585,13 +561,15 @@ function init(filename) {
     document.body.className += /AppleWebKit/.test(navigator.userAgent) ? ' webkit' : '';
     //kthoom.resetFileUploader();
     kthoom.loadSettings();
-    document.addEventListener('keydown', keyHandler, false);
+    $(document).keydown(keyHandler);
-    window.addEventListener('resize', function() {
+
+    $(window).resize(function() {
         var f = (screen.width - innerWidth < 4 && screen.height - innerHeight < 4);
         getElem('titlebar').className = f ? 'main' : '';
         updateScale();
-    }, false);
+    });
-    getElem('mainImage').addEventListener('click', function(evt) {
+
+    $('#mainImage').click(function(evt) {
         // Firefox does not support offsetX/Y so we have to manually calculate
         // where the user clicked in the image.
         var mainContentWidth = getElem('mainContent').clientWidth;
@@ -625,6 +603,6 @@ function init(filename) {
         } else {
         showNextPage();
         }
-    }, false);
+    });
   }
 }

cps/templates/readcbr.html

@@ -8,7 +8,10 @@
 	<meta name="viewport" content="width=device-width, user-scalable=no">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/kthoom.css') }}" type="text/css"/>
+    <link href="{{ url_for('static', filename='css/libs/bootstrap.min.css') }}" rel="stylesheet" media="screen">
     <script src="{{ url_for('static', filename='js/libs/jquery.min.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/libs/bootstrap.min.js') }}"></script>
+
 	<script src="{{ url_for('static', filename='js/kthoom.js') }}"></script>
 	<script src="{{ url_for('static', filename='js/archive.js') }}"></script>
     <script>
@@ -23,6 +26,12 @@
     <div class="main" id="main">
 	    <div id="titlebar">
 	      <div id="progress" class="hide"></div>
+             <div class="progress2" style="display:none">
+              <div class="progress-bar" role="progressbar" aria-valuenow="70"
+                  aria-valuemin="0" aria-valuemax="100" style="width:70%">
+                70%
+              </div>
+        </div>
 	    </div>
 	    <div id="mainContent">
 	      <div id="mainText" style="display:none"></div>