Merge enhanced UI from ytilis repro

pull/394/head
OzzieIsaacs 7 years ago
parent 8c573ff6d8
commit 9f8cbe8c1f

@ -1,27 +1,58 @@
body { body {
background: #444; background: #444;
overflow: hidden; overflow-x: hidden;
overflow-y: auto;
color: white; color: white;
font-family: sans-serif; font-family: sans-serif;
margin: 0px; margin: 0px;
} }
.main { #main {
position: re;
left: 5px;
overflow: hidden;
right: 5px;
text-align: center; 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 { #progress {
position: absolute; position: absolute;
display: inline; display: inline;
left: 90px; left: 20%;
right: 160px; right: 20%;
height: 20px; height: 20px;
margin-top: 1px; margin-top: 4px;
text-align: right; text-align: right;
} }
@ -29,6 +60,10 @@ body {
display: none !important; display: none !important;
} }
#mainContent {
overflow: auto;
}
#mainText { #mainText {
text-align: left; text-align: left;
width: 90%; width: 90%;
@ -42,29 +77,9 @@ body {
word-wrap: break-word; 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 { #prev {
@ -100,6 +115,67 @@ body {
color: #000; 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);
}

@ -55,9 +55,6 @@ kthoom.Key = {
RIGHT_SQUARE_BRACKET: 221 RIGHT_SQUARE_BRACKET: 221
}; };
// The rotation orientation of the comic.
kthoom.rotateTimes = 0;
// global variables // global variables
var unarchiver = null; var unarchiver = null;
var currentImage = 0; var currentImage = 0;
@ -66,33 +63,45 @@ var imageFilenames = [];
var totalImages = 0; var totalImages = 0;
var lastCompletion = 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; var canKeyNext = true, canKeyPrev = true;
kthoom.saveSettings = function() { kthoom.saveSettings = function() {
localStorage.kthoomSettings = JSON.stringify({ localStorage.kthoomSettings = JSON.stringify(settings);
rotateTimes: kthoom.rotateTimes,
hflip: hflip,
vflip: vflip,
fitMode: fitMode
});
}; };
kthoom.loadSettings = function() { kthoom.loadSettings = function() {
try { try {
if (localStorage.kthoomSettings.length < 10){ if (!localStorage.kthoomSettings){
return; 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) { } catch (err) {
alert("Error load settings"); 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 createURLFromArray = function(array, mimeType) {
var offset = array.byteOffset, len = array.byteLength; var offset = array.byteOffset, len = array.byteLength;
var url; var url;
@ -279,6 +288,17 @@ function loadFromArrayBuffer(ab) {
if (imageFilenames.indexOf(f.filename) === -1) { if (imageFilenames.indexOf(f.filename) === -1) {
imageFilenames.push(f.filename); imageFilenames.push(f.filename);
imageFiles.push(new kthoom.ImageFile(f)); 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); var percentage = (ab.page+1) / (ab.last+1);
totalImages = ab.last+1; totalImages = ab.last+1;
@ -304,6 +324,11 @@ function updatePage() {
} else { } else {
setImage("loading"); setImage("loading");
} }
$('body').toggleClass('dark-theme', settings.theme === 'dark');
kthoom.setSettings();
kthoom.saveSettings();
} }
function setImage(url) { function setImage(url) {
@ -359,22 +384,22 @@ function setImage(url) {
w = img.width, w = img.width,
sw = w, sw = w,
sh = h; sh = h;
kthoom.rotateTimes = (4 + kthoom.rotateTimes) % 4; settings.rotateTimes = (4 + settings.rotateTimes) % 4;
x.save(); x.save();
if (kthoom.rotateTimes % 2 === 1) { if (settings.rotateTimes % 2 === 1) {
sh = w; sh = w;
sw = h; sw = h;
} }
canvas.height = sh; canvas.height = sh;
canvas.width = sw; canvas.width = sw;
x.translate(sw / 2, sh / 2); 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); x.translate(-w / 2, -h / 2);
if (vflip) { if (settings.vflip) {
x.scale(1, -1); x.scale(1, -1);
x.translate(0, -h); x.translate(0, -h);
} }
if (hflip) { if (settings.hflip) {
x.scale(-1, 1); x.scale(-1, 1);
x.translate(-w, 0); x.translate(-w, 0);
} }
@ -418,19 +443,19 @@ function updateScale(clear) {
mainImageStyle.height = ""; mainImageStyle.height = "";
mainImageStyle.maxWidth = ""; mainImageStyle.maxWidth = "";
mainImageStyle.maxHeight = ""; 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.maxWidth = "100%";
mainImageStyle.maxHeight = maxheight + "px"; mainImageStyle.maxHeight = maxheight + "px";
} else if (fitMode === kthoom.Key.H) { } else if (settings.fitMode === kthoom.Key.H) {
mainImageStyle.height = maxheight + "px"; mainImageStyle.height = maxheight + "px";
} else if (fitMode === kthoom.Key.W) { } else if (settings.fitMode === kthoom.Key.W) {
mainImageStyle.width = "100%"; mainImageStyle.width = "100%";
} }
$('#mainContent').css({maxHeight: maxheight + 5});
kthoom.setSettings();
kthoom.saveSettings(); kthoom.saveSettings();
} }
@ -446,50 +471,53 @@ function keyHandler(evt) {
if (evt.ctrlKey || evt.shiftKey || evt.metaKey) return; if (evt.ctrlKey || evt.shiftKey || evt.metaKey) return;
switch (code) { switch (code) {
case kthoom.Key.LEFT: case kthoom.Key.LEFT:
if (canKeyPrev) showPrevPage(); showPrevPage();
break; break;
case kthoom.Key.RIGHT: case kthoom.Key.RIGHT:
if (canKeyNext) showNextPage(); showNextPage();
break; break;
case kthoom.Key.L: case kthoom.Key.L:
kthoom.rotateTimes--; settings.rotateTimes--;
if (kthoom.rotateTimes < 0) { if (settings.rotateTimes < 0) {
kthoom.rotateTimes = 3; settings.rotateTimes = 3;
} }
updatePage(); updatePage();
break; break;
case kthoom.Key.R: case kthoom.Key.R:
kthoom.rotateTimes++; settings.rotateTimes++;
if (kthoom.rotateTimes > 3) { if (settings.rotateTimes > 3) {
kthoom.rotateTimes = 0; settings.rotateTimes = 0;
} }
updatePage(); updatePage();
break; break;
case kthoom.Key.F: 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(); updatePage();
break; break;
case kthoom.Key.W: case kthoom.Key.W:
fitMode = kthoom.Key.W; settings.fitMode = kthoom.Key.W;
updateScale(); updateScale();
break; break;
case kthoom.Key.H: case kthoom.Key.H:
fitMode = kthoom.Key.H; settings.fitMode = kthoom.Key.H;
updateScale(); updateScale();
break; break;
case kthoom.Key.B: case kthoom.Key.B:
fitMode = kthoom.Key.B; settings.fitMode = kthoom.Key.B;
updateScale(); updateScale();
break; break;
case kthoom.Key.N: case kthoom.Key.N:
fitMode = kthoom.Key.N; settings.fitMode = kthoom.Key.N;
updateScale(); updateScale();
break; break;
default: default:
@ -520,35 +548,70 @@ function init(fileid) {
request.open("GET", fileid); request.open("GET", fileid);
request.responseType = "json"; request.responseType = "json";
request.fileid=fileid.substring(0,fileid.length - 2); 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(); request.send();
kthoom.initProgressMeter(); kthoom.initProgressMeter();
document.body.className += /AppleWebKit/.test(navigator.userAgent) ? " webkit" : ""; document.body.className += /AppleWebKit/.test(navigator.userAgent) ? " webkit" : "";
updateScale(true);
kthoom.loadSettings(); kthoom.loadSettings();
updateScale(true);
$(document).keydown(keyHandler); $(document).keydown(keyHandler);
$(window).resize(function() { $(window).resize(function() {
var f = (screen.width - innerWidth < 4 && screen.height - innerHeight < 4);
getElem("titlebar").className = f ? "main" : "";
updateScale(); 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) { $("#mainImage").click(function(evt) {
// Firefox does not support offsetX/Y so we have to manually calculate // Firefox does not support offsetX/Y so we have to manually calculate
// where the user clicked in the image. // 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 // Determine if the user clicked/tapped the left side or the
// right side of the page. // right side of the page.
var clickedPrev = false; var clickedPrev = false;
switch (kthoom.rotateTimes) { switch (settings.rotateTimes) {
case 0: case 0:
clickedPrev = clickX < (comicWidth / 2); clickedPrev = clickX < (comicWidth / 2);
break; break;

@ -7,13 +7,14 @@
<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/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"/>
<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/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/kthoom.js') }}"></script>
<!--script src="{{ url_for('static', filename='js/archive.js') }}"></script-->
<script> <script>
document.onreadystatechange = function () { document.onreadystatechange = function () {
if (document.readyState == "complete") { if (document.readyState == "complete") {
@ -23,8 +24,34 @@
</script> </script>
</head> </head>
<body> <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 id="progress" class="hide"></div>
<div class="progress2" style="display:none"> <div class="progress2" style="display:none">
<div class="progress-bar" role="progressbar" aria-valuenow="70" <div class="progress-bar" role="progressbar" aria-valuenow="70"
@ -33,6 +60,7 @@
</div> </div>
</div> </div>
</div> </div>
<div id="mainContent"> <div id="mainContent">
<div id="mainText" style="display:none"></div> <div id="mainText" style="display:none"></div>
<canvas id="mainImage"></canvas> <canvas id="mainImage"></canvas>
@ -40,5 +68,85 @@
<div id="prev" class="arrow" onclick="showPrevPage()"></div> <div id="prev" class="arrow" onclick="showPrevPage()"></div>
<div id="next" class="arrow" onclick="showNextPage()"></div> <div id="next" class="arrow" onclick="showNextPage()"></div>
</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> </body>
</html> </html>

Loading…
Cancel
Save