Merge enhanced UI from ytilis repro

cps/static/css/kthoom.css

@@ -1,27 +1,58 @@
 body {
 	background: #444;
-    overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
 	color: white;
 	font-family: sans-serif;
 	margin: 0px;
 }
 
-.main {
+#main {
-	position: re;
-	left: 5px;
-    overflow: hidden;
-	right: 5px;
 	text-align: center;
-    top: 5px;
+  z-index: 2;
+}
+
+#sidebar a,
+#sidebar ul,
+#sidebar li,
+#sidebar li img {
+  max-width: 100%;
+  text-align: center;
+}
+
+#sidebar a {
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+}
+
+#sidebar li img {
+  display: block;
+  max-height: 200px;
+}
+
+#sidebar li img + span {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  padding: 2px;
+  min-width: 25px;
+  line-height: 25px;
+  background: #6b6b6b;
+  border-top-left-radius: 5px;
+}
+
+#sidebar #panels {
+  z-index: 1;
 }
 
 #progress {
 	position: absolute;
 	display: inline;
-	left: 90px;
+  left: 20%;
-	right: 160px;
+  right: 20%;
 	height: 20px;
-	margin-top: 1px;
+  margin-top: 4px;
 	text-align: right;
 }
 
@@ -29,6 +60,10 @@ body {
 	display: none !important;
 }
 
+#mainContent {
+  overflow: auto;
+}
+
 #mainText {
   text-align: left;
   width: 90%;
@@ -42,29 +77,9 @@ body {
   word-wrap: break-word;
 }
 
-#mainImage{
+#titlebar {
-   margin-top: 32px; 
+  min-height: 25px;
-}
+  height: auto;
-
-#titlebar.main {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  height: 30px;
-  left: 0;
-  right: 0;
-  background-color: black;
-  padding-bottom: 70px;
-  -webkit-transition: opacity 0.2s ease;
-  -moz-transition: opacity 0.2s ease;
-  transition: opacity 0.2s ease;
-  background: -moz-linear-gradient(top, rgba(0,2,34,1) 0%, rgba(0,1,24,1) 30%, rgba(0,0,0,0) 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,2,34,1)), color-stop(30%,rgba(0,1,24,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, rgba(0,2,34,1) 0%,rgba(0,1,24,1) 30%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, rgba(0,2,34,1) 0%,rgba(0,1,24,1) 30%,rgba(0,0,0,0) 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, rgba(0,2,34,1) 0%,rgba(0,1,24,1) 30%,rgba(0,0,0,0) 100%); /* IE10+ */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000222', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
-  background: linear-gradient(top, rgba(0,2,34,1) 0%,rgba(0,1,24,1) 30%,rgba(0,0,0,0) 100%); /* W3C */
 }
 
 #prev {
@@ -100,6 +115,67 @@ body {
   color: #000;
 }
 
+th, td {
+  padding: 5px;
+}
 
+th {
+  text-align: right;
+  vertical-align: top;
+}
 
+.modal {
+  /* Makes the modal responsive. Note sure if this should be moved to main.css */
+  margin: 0;
+  max-width: 96%;
+  transform: translate(-50%, -50%);
+}
 
+.md-content {
+  min-height: 320px;
+  height: auto;
+}
+
+.md-content > div {
+  overflow: hidden;
+}
+
+.md-content > div p {
+  padding: 5px 0;
+}
+
+.settings-column {
+  float: left;
+  min-width: 35%;
+  padding-bottom: 10px;
+}
+
+.inputs {
+  margin: -5px;
+}
+
+.inputs input {
+  vertical-align: middle;
+}
+
+.inputs label {
+  display: inline-block;
+  margin: 5px;
+  white-space: nowrap;
+}
+
+.dark-theme #main {
+  background-color: #000;
+}
+
+.dark-theme #titlebar {
+  color: #DDD;
+}
+
+.dark-theme #titlebar a:active {
+  color: #FFF;
+}
+
+.dark-theme .overlay {
+  background-color: rgba(0,0,0,0.8);
+}

cps/static/js/kthoom.js

@@ -55,9 +55,6 @@ kthoom.Key = {
     RIGHT_SQUARE_BRACKET: 221
 };
 
-// The rotation orientation of the comic.
-kthoom.rotateTimes = 0;
-
 // global variables
 var unarchiver = null;
 var currentImage = 0;
@@ -66,33 +63,45 @@ var imageFilenames = [];
 var totalImages = 0;
 var lastCompletion = 0;
 
-var hflip = false, vflip = false, fitMode = kthoom.Key.B;
+var settings = {
+    hflip: false, 
+    vflip: false, 
+    rotateTimes: 0,
+    fitMode: kthoom.Key.B,
+    theme: 'light'
+};
+
 var canKeyNext = true, canKeyPrev = true;
 
 kthoom.saveSettings = function() {
-    localStorage.kthoomSettings = JSON.stringify({
+    localStorage.kthoomSettings = JSON.stringify(settings);
-        rotateTimes: kthoom.rotateTimes,
-        hflip: hflip,
-        vflip: vflip,
-        fitMode: fitMode
-    });
 };
 
 kthoom.loadSettings = function() {
     try {
-        if (localStorage.kthoomSettings.length < 10){
+        if (!localStorage.kthoomSettings){
             return;
         }
-        var s = JSON.parse(localStorage.kthoomSettings);
+
-        kthoom.rotateTimes = s.rotateTimes;
+        $.extend(settings, JSON.parse(localStorage.kthoomSettings));
-        hflip = s.hflip;
+
-        vflip = s.vflip;
+        kthoom.setSettings();
-        fitMode = s.fitMode;
     } catch (err) {
         alert("Error load settings");
     }
 };
 
+kthoom.setSettings = function() {
+    // Set settings control values
+    $.each(settings, function(key, value) {
+        if (typeof value === "boolean") {
+            $('input[name='+key+']').prop('checked', value);
+        } else {
+            $('input[name='+key+']').val([value]);
+        }
+    });
+};
+
 var createURLFromArray = function(array, mimeType) {
     var offset = array.byteOffset, len = array.byteLength;
     var url;
@@ -279,6 +288,17 @@ function loadFromArrayBuffer(ab) {
     if (imageFilenames.indexOf(f.filename) === -1) {
         imageFilenames.push(f.filename);
         imageFiles.push(new kthoom.ImageFile(f));
+                        
+                        // add thumbnails to the TOC list
+                        $('#thumbnails').append(
+                            "<li> \
+                                <a data-page='"+ imageFiles.length +"'> \
+                                    <img src='"+ imageFiles[imageFiles.length - 1].dataURI +"' /> \
+                                    <span>"+ imageFiles.length +"</span> \
+                                </a> \
+                            </li>"
+                        );
+                    //}
     }
     var percentage = (ab.page+1) / (ab.last+1);
     totalImages = ab.last+1;
@@ -304,6 +324,11 @@ function updatePage() {
     } else {
         setImage("loading");
     }
+
+    $('body').toggleClass('dark-theme', settings.theme === 'dark');
+
+    kthoom.setSettings();
+    kthoom.saveSettings();
 }
 
 function setImage(url) {
@@ -359,22 +384,22 @@ function setImage(url) {
                 w = img.width,
                 sw = w,
                 sh = h;
-            kthoom.rotateTimes =  (4 + kthoom.rotateTimes) % 4;
+            settings.rotateTimes =  (4 + settings.rotateTimes) % 4;
             x.save();
-            if (kthoom.rotateTimes % 2 === 1) {
+            if (settings.rotateTimes % 2 === 1) {
                 sh = w;
                 sw = h;
             }
             canvas.height = sh;
             canvas.width = sw;
             x.translate(sw / 2, sh / 2);
-            x.rotate(Math.PI / 2 * kthoom.rotateTimes);
+            x.rotate(Math.PI / 2 * settings.rotateTimes);
             x.translate(-w / 2, -h / 2);
-            if (vflip) {
+            if (settings.vflip) {
                 x.scale(1, -1);
                 x.translate(0, -h);
             }
-            if (hflip) {
+            if (settings.hflip) {
                 x.scale(-1, 1);
                 x.translate(-w, 0);
             }
@@ -418,19 +443,19 @@ function updateScale(clear) {
     mainImageStyle.height = "";
     mainImageStyle.maxWidth = "";
     mainImageStyle.maxHeight = "";
-    var maxheight = innerHeight - 15;
+    var maxheight = innerHeight - 50;
-    if (!/main/.test(getElem("titlebar").className)) {
+
-        maxheight -= 25;
+    if (clear || settings.fitMode === kthoom.Key.N) {
-    }
+    } else if (settings.fitMode === kthoom.Key.B) {
-    if (clear || fitMode === kthoom.Key.N) {
-    } else if (fitMode === kthoom.Key.B) {
         mainImageStyle.maxWidth = "100%";
         mainImageStyle.maxHeight = maxheight + "px";
-    } else if (fitMode === kthoom.Key.H) {
+    } else if (settings.fitMode === kthoom.Key.H) {
         mainImageStyle.height = maxheight + "px";
-    } else if (fitMode === kthoom.Key.W) {
+    } else if (settings.fitMode === kthoom.Key.W) {
         mainImageStyle.width = "100%";
     }
+    $('#mainContent').css({maxHeight: maxheight + 5});
+    kthoom.setSettings();
     kthoom.saveSettings();
 }
 
@@ -446,50 +471,53 @@ function keyHandler(evt) {
     if (evt.ctrlKey || evt.shiftKey || evt.metaKey) return;
     switch (code) {
         case kthoom.Key.LEFT:
-            if (canKeyPrev) showPrevPage();
+            showPrevPage();
             break;
         case kthoom.Key.RIGHT:
-            if (canKeyNext) showNextPage();
+            showNextPage();
             break;
         case kthoom.Key.L:
-            kthoom.rotateTimes--;
+            settings.rotateTimes--;
-            if (kthoom.rotateTimes < 0) {
+            if (settings.rotateTimes < 0) {
-                kthoom.rotateTimes = 3;
+                settings.rotateTimes = 3;
             }
             updatePage();
             break;
         case kthoom.Key.R:
-            kthoom.rotateTimes++;
+            settings.rotateTimes++;
-            if (kthoom.rotateTimes > 3) {
+            if (settings.rotateTimes > 3) {
-                kthoom.rotateTimes = 0;
+                settings.rotateTimes = 0;
             }
             updatePage();
             break;
         case kthoom.Key.F:
-            if (!hflip && !vflip) {
+            if (!settings.hflip && !settings.vflip) {
-                hflip = true;
+                settings.hflip = true;
-            } else if (hflip === true) {
+            } else if (settings.hflip === true && settings.vflip === true) {
-                vflip = true;
+                settings.vflip = false;
-                hflip = false;
+                settings.hflip = false;
-            } else if (vflip === true) {
+            } else if (settings.hflip === true) {
-                vflip = false;
+                settings.vflip = true;
+                settings.hflip = false;
+            } else if (settings.vflip === true) {
+                settings.hflip = true;
             }
             updatePage();
             break;
         case kthoom.Key.W:
-            fitMode = kthoom.Key.W;
+            settings.fitMode = kthoom.Key.W;
             updateScale();
             break;
         case kthoom.Key.H:
-            fitMode = kthoom.Key.H;
+            settings.fitMode = kthoom.Key.H;
             updateScale();
             break;
         case kthoom.Key.B:
-            fitMode = kthoom.Key.B;
+            settings.fitMode = kthoom.Key.B;
             updateScale();
             break;
         case kthoom.Key.N:
-            fitMode = kthoom.Key.N;
+            settings.fitMode = kthoom.Key.N;
             updateScale();
             break;
         default:
@@ -520,35 +548,70 @@ function init(fileid) {
     request.open("GET", fileid);
     request.responseType = "json";
     request.fileid=fileid.substring(0,fileid.length - 2);
-    request.addEventListener("load",ImageLoadCallback);/* function(event) {
+    request.addEventListener("load",ImageLoadCallback);
-        var jso=request.response;
-        if (jso.page!=jso.length)
-        {
-            // var secRequest = new XMLHttpRequest();
-            request.open("GET", fileid + "/../"+(jso.page+1));
-            request.send();
-            //secRequest.responseType = "json";
-            //finished;
-        }
-        loadFromArrayBuffer(jso);
-
-        // var byteArray = new Uint8Array(request.response);
-        // if you want to access the bytes:
-    });*/
     request.send();
-
     kthoom.initProgressMeter();
     document.body.className += /AppleWebKit/.test(navigator.userAgent) ? " webkit" : "";
-    updateScale(true);
     kthoom.loadSettings();
+        updateScale(true);
     $(document).keydown(keyHandler);
 
     $(window).resize(function() {
-        var f = (screen.width - innerWidth < 4 && screen.height - innerHeight < 4);
-        getElem("titlebar").className = f ? "main" : "";
         updateScale();
     });
 
+        // Open TOC menu
+        $("#slider").click(function(evt) {
+            $('#sidebar').toggleClass('open');
+            $('#main').toggleClass('closed');
+            $(this).toggleClass('icon-menu icon-right');
+        });
+
+        // Open Settings modal
+        $("#setting").click(function(evt) {
+            $("#settings-modal").toggleClass('md-show');
+        });
+
+        // On Settings input change
+        $("#settings input").on("change", function(evt){
+            // Get either the checked boolean or the assigned value
+            var value = this.type === 'checkbox' ? this.checked : this.value;
+
+            // If it's purely numeric, parse it to an integer
+            value = /^\d+$/.test(value) ? parseInt(value) : value;
+            
+            settings[this.name] = value;
+            updatePage();
+            updateScale();            
+        });
+
+        // Close modal
+        $(".closer, .overlay").click(function(evt) {
+            $(".md-show").removeClass('md-show');
+        });
+
+        // TOC thumbnail pagination
+        $('#thumbnails').on("click", "a", function(evt) {
+            currentImage = $(this).data('page') - 1;
+            updatePage();
+        });
+
+        // Fullscreen mode
+        if (typeof screenfull !== "undefined") {
+            $('#fullscreen').click(function(evt) {
+                screenfull.toggle($("#container")[0])
+            });
+
+            if (screenfull.raw) {
+                var $button = $('#fullscreen');
+                document.addEventListener(screenfull.raw.fullscreenchange,function(){
+                    screenfull.isFullscreen 
+                    ? $button.addClass("icon-resize-small").removeClass("icon-resize-full")
+                    : $button.addClass("icon-resize-full").removeClass("icon-resize-small")
+                });
+            }
+        }
+
     $("#mainImage").click(function(evt) {
         // Firefox does not support offsetX/Y so we have to manually calculate
         // where the user clicked in the image.
@@ -564,7 +627,7 @@ function init(fileid) {
         // Determine if the user clicked/tapped the left side or the
         // right side of the page.
         var clickedPrev = false;
-        switch (kthoom.rotateTimes) {
+            switch (settings.rotateTimes) {
         case 0:
           clickedPrev = clickX < (comicWidth / 2);
           break;

cps/templates/readcbr.html

@@ -7,13 +7,14 @@
     <meta name="description" content="">
 	<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>
     
+    <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/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/screenfull.min.js') }}"></script>
 	<script src="{{ url_for('static', filename='js/kthoom.js') }}"></script>
-	<!--script src="{{ url_for('static', filename='js/archive.js') }}"></script-->
     <script>
             document.onreadystatechange = function () {
               if (document.readyState == "complete") {
@@ -23,8 +24,34 @@
     </script>    
   </head>
   <body>
-    <div class="main" id="main">
+    <div id="sidebar">
-	    <div id="titlebar">
+      <div id="panels">
+        <!-- <a id="show-Toc" class="show_view icon-list-1 active" data-view="Toc">TOC</a> -->
+        <!-- <a id="show-Bookmarks" class="show_view icon-bookmark" data-view="Bookmarks">Bookmarks</a> -->
+      </div>
+      <div id="tocView" class="view">
+        <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"></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" class="hide"></div>
              <div class="progress2" style="display:none">
               <div class="progress-bar" role="progressbar" aria-valuenow="70"
@@ -33,6 +60,7 @@
               </div>
         </div>
 	    </div>
+      
 	    <div id="mainContent">
 	      <div id="mainText" style="display:none"></div>
       	<canvas id="mainImage"></canvas>
@@ -40,5 +68,85 @@
           <div id="prev" class="arrow" onclick="showPrevPage()">‹</div>
           <div id="next" class="arrow" onclick="showNextPage()">›</div>
     </div>
+
+    <div class="modal md-effect-1" id="settings-modal">
+        <div class="md-content">
+            <h3>{{_('Settings')}}</h3>
+            <div>
+              <div class="settings-column">
+                <table>
+                  <thead>
+                    <tr><th colspan="2">{{_('Keyboard Shortcuts')}}</th></tr>
+                  </thead>
+                  <tbody>
+                    <tr><td>&larr;</td> <td>{{_('Previous Page')}}</td></tr>
+                    <tr><td>&rarr;</td> <td>{{_('Next Page')}}</td></tr>
+                    <tr><td>B</td>      <td>{{_('Scale to Best')}}</td></tr>
+                    <tr><td>W</td>      <td>{{_('Scale to Width')}}</td></tr>
+                    <tr><td>H</td>      <td>{{_('Scale to Height')}}</td></tr>
+                    <tr><td>N</td>      <td>{{_('Scale to Native')}}</td></tr>
+                    <tr><td>R</td>      <td>{{_('Rotate Right')}}</td></tr>
+                    <tr><td>L</td>      <td>{{_('Rotate Left')}}</td></tr>
+                    <tr><td>F</td>      <td>{{_('Flip Image')}}</td></tr>
+                  </tbody>
+                </table>
+              </div>
+              <div class="settings-column">
+                <table id="settings">
+                  <thead>
+                    <tr>
+                      <th>{{_('Settings')}}</th>
+                    </tr>
+                  </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>
+                      </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>
+            <div class="closer icon-cancel-circled"></div>
+        </div>
+    </div>
+    <div class="overlay"></div>
+
   </body>
 </html>