Add reading direction settings to readcbr page

pull/908/head
subdiox 6 years ago
parent 204de4aef6
commit c2bfb29726

@ -152,11 +152,11 @@ body {
max-width: 70%;
}
#prev {
#left {
left: 40px;
}
#next {
#right {
right: 40px;
}

@ -66,7 +66,8 @@ var settings = {
vflip: false,
rotateTimes: 0,
fitMode: kthoom.Key.B,
theme: "light"
theme: "light",
direction: 0 // 0 = Left to Right, 1 = Right to Left
};
kthoom.saveSettings = function() {
@ -367,6 +368,22 @@ function setImage(url) {
}
}
function showLeftPage() {
if (settings.direction === 0) {
showPrevPage()
} else {
showNextPage()
}
}
function showRightPage() {
if (settings.direction === 0) {
showNextPage()
} else {
showPrevPage()
}
}
function showPrevPage() {
currentImage--;
if (currentImage < 0) {
@ -421,11 +438,11 @@ function keyHandler(evt) {
switch (evt.keyCode) {
case kthoom.Key.LEFT:
if (hasModifier) break;
showPrevPage();
showLeftPage();
break;
case kthoom.Key.RIGHT:
if (hasModifier) break;
showNextPage();
showRightPage();
break;
case kthoom.Key.L:
if (hasModifier) break;
@ -486,11 +503,11 @@ function keyHandler(evt) {
if (evt.shiftKey && atTop) {
evt.preventDefault();
// If it's Shift + Space and the container is at the top of the page
showPrevPage();
showLeftPage();
} else if (!evt.shiftKey && atBottom) {
evt.preventDefault();
// If you're at the bottom of the page and you only pressed space
showNextPage();
showRightPage();
container.scrollTop(0);
}
break;
@ -621,25 +638,25 @@ function init(filename) {
// Determine if the user clicked/tapped the left side or the
// right side of the page.
var clickedPrev = false;
var clickedLeft = false;
switch (settings.rotateTimes) {
case 0:
clickedPrev = clickX < (comicWidth / 2);
clickedLeft = clickX < (comicWidth / 2);
break;
case 1:
clickedPrev = clickY < (comicHeight / 2);
clickedLeft = clickY < (comicHeight / 2);
break;
case 2:
clickedPrev = clickX > (comicWidth / 2);
clickedLeft = clickX > (comicWidth / 2);
break;
case 3:
clickedPrev = clickY > (comicHeight / 2);
clickedLeft = clickY > (comicHeight / 2);
break;
}
if (clickedPrev) {
showPrevPage();
if (clickedLeft) {
showLeftPage();
} else {
showNextPage();
showRightPage();
}
});
}

@ -17,9 +17,19 @@
<script src="{{ url_for('static', filename='js/kthoom.js') }}"></script>
<script src="{{ url_for('static', filename='js/archive.js') }}"></script>
<script>
var updateArrows = function() {
if ($('input[name="direction"]:checked').val() === "0") {
$("#prev_page_key").html("&larr;");
$("#next_page_key").html("&rarr;");
} else {
$("#prev_page_key").html("&rarr;");
$("#next_page_key").html("&larr;");
}
};
document.onreadystatechange = function () {
if (document.readyState == "complete") {
init("{{ url_for('serve_book', book_id=comicfile, book_format=extension) }}");
init("{{ url_for('serve_book', book_id=comicfile, book_format=extension) }}");
updateArrows();
}
};
</script>
@ -70,8 +80,8 @@
<div id="mainText" style="display:none"></div>
<canvas id="mainImage"></canvas>
</div>
<div id="prev" class="arrow" onclick="showPrevPage()"></div>
<div id="next" class="arrow" onclick="showNextPage()"></div>
<div id="left" class="arrow" onclick="showLeftPage()"></div>
<div id="right" class="arrow" onclick="showRightPage()"></div>
</div>
<div class="modal md-effect-1" id="settings-modal">
@ -84,8 +94,8 @@
<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 id="prev_page_key">&larr;</td> <td>{{_('Previous Page')}}</td></tr>
<tr><td id="next_page_key">&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>
@ -144,6 +154,15 @@
</div>
</td>
</tr>
<tr>
<th>{{_('Direction')}}:</th>
<td>
<div class="inputs">
<label for="leftToRight"><input type="radio" id="leftToRight" name="direction" value="0" /> {{_('Left to Right')}}</label>
<label for="rightToLeft"><input type="radio" id="rightToLeft" name="direction" value="1" /> {{_('Right to Left')}}</label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
@ -152,6 +171,10 @@
</div>
</div>
<div class="overlay"></div>
<script>
$('input[name="direction"]').change(function() {
updateArrows();
});
</script>
</body>
</html>

Loading…
Cancel
Save