Commit b171c254 authored by njean42's avatar njean42
Browse files

Get rid of html-debug option, "Show Panels" is now in the menu.

parent 85aef40e
......@@ -24,7 +24,7 @@ An HTML file is generated under `./tests/results/` that you can open locally (ad
It will show you all the differences between the previous git version and yours!
Take a look at the differencs between *Kumiko* versions:
Take a look at the differences between *Kumiko* versions:
* [v1.2.1 and v1.2](https://kumiko-demo.njean.me/tests/results/diff-v1.2-v1.2.1.html)
* [v1.2 and v1.1](https://kumiko-demo.njean.me/tests/results/diff-v1.1-v1.2.html)
* [v1.1 and v1.0](https://kumiko-demo.njean.me/tests/results/diff-v1.0-v1.1.html)
......@@ -11,7 +11,7 @@ More detailed help can be found by running `kumiko --help`.
kumiko -i /path/to/comicbook/page001.jpg
(Add `--html-debug -b firefox` to view the panels, on top of given image, in your browser!)
(Add `-b firefox` to view the panels, on top of given image, in your browser! 'Show panels' option is in the menu.)
The result would look like the following:
......@@ -50,7 +50,7 @@ The `filename`s in our JSON object are relative to the working directory from wh
kumiko -i /path/to/comicbook/
(Add `--html-debug -b firefox` to view the panels for all pages, on top your images, in your browser!)
(Add `-b firefox` to view the panels for all pages, on top of your images, in your browser! 'Show panels' option is in the menu.)
The result of such a command would be a JSON-formatted array of all images in the folder:
......
......@@ -19,7 +19,6 @@ parser.add_argument('-o', '--output', nargs=1, help='A file name to save json/ht
# HTML reader page options
parser.add_argument('-b', '--browser', nargs=1, help='Opens given browser to read your comic page(s) panel-by-panel! (implies --html)', choices=['firefox','konqueror','chromium'])
parser.add_argument('--html', action='store_true', help='Generates an HTML file for reading')
parser.add_argument('--html-debug', action='store_true', help='Shows debug information on resulting HTML page (implies --html)')
parser.add_argument('--html-static-dir', nargs=1, help='When generating HTML, this will be the relative directory for javascript files: <script src="$static-dir/..."> (implies --html)')
# Configuration tweaks
......@@ -67,17 +66,17 @@ info = json.dumps(info)
# Generate HTML
if args.html or args.browser or args.html_debug or args.html_static_dir:
if args.html or args.browser or args.html_static_dir:
images_dir = os.path.relpath(folder,'tests/results')+'/' if folder else 'urls'
html = ''
html += HTML.header(reldir = args.html_static_dir[0] if args.html_static_dir else '../../')
html += HTML.reader(info,images_dir,args.html_debug)
html += HTML.reader(info,images_dir)
html += HTML.footer
if args.output:
html_file = args.output[0]
if args.browser or args.html_debug or args.output:
if args.browser or args.output:
fh = open(html_file, 'w')
fh.write(html)
fh.close()
......
......@@ -7,7 +7,9 @@ class HTML:
<html>
<head>
<title>Kumiko Reader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="{reldir}jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="{reldir}jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="{reldir}reader.js"></script>
......@@ -58,10 +60,9 @@ class HTML:
return html
def reader(js,images_dir,debug):
debug = 'debug' if debug else ''
def reader(js,images_dir):
return """
<div id="reader" class="kumiko-reader {debug} fullpage"></div>
<div id="reader" class="kumiko-reader fullpage"></div>
<script type="text/javascript">
var reader = new Reader({{
container: $('#reader'),
......@@ -71,7 +72,7 @@ class HTML:
}});
reader.loadPage(0);
</script>
""".format(json=js,images_dir=images_dir,debug=debug)
""".format(json=js,images_dir=images_dir)
footer = """
......
......@@ -30,7 +30,9 @@ class Reader {
// init attributes
this.currpage = 0;
this.currpanel = 0;
this.debug = this.gui.hasClass('debug');
this.debug = this.gui.hasClass('debug') || window.location.hash == '#debug';
if (this.debug)
this.gui.addClass('debug');
// add image sub-container
this.container = $('<div class="container"/>');
......@@ -238,17 +240,34 @@ class Reader {
add_controls()
{
var _reader = this;
// add controls and page info
this.gui.append('<span class="pagenb"/>');
var burger = $('<i class="burger">☰</i>');
burger.data('reader',this);
burger.on('click touch', function (e) {
$(this).data('reader').showMenu();
e.stopPropagation();
});
this.gui.append(burger);
var menu = $('<div class="menu"/>');
var menuul = $('<ul/>');
menuul.append('<li><label><input type="radio" name="viewmode" value="page" autocomplete="off" />read page by page</label></li>');
menuul.append('<li><label><input type="radio" name="viewmode" value="panel" autocomplete="off" />read panel by panel</label></li>');
menuul.append('<li><label><input type="radio" name="viewmode" value="page" autocomplete="off" />Page</label></li>');
menuul.append('<li><label><input type="radio" name="viewmode" value="panel" autocomplete="off" />Panel</label></li>');
menu.append(menuul);
var btn_debug = $('<label><input type="checkbox" class="toggleDebug" />Show panels</label>');
btn_debug.children('.toggleDebug').on('change', function () { _reader.gui.toggleClass('debug'); });
menuul.append(btn_debug);
menuul.append('<i class="exit">X</i>');
menuul.children('.exit').on('click touch', function () { _reader.showMenu(false); })
this.gui.append(menu);
this.showMenu(false);
var _reader = this;
$(document).ready( function () {
var mode = _reader.debug ? 'page' : 'panel';
$('input[name=viewmode][value='+mode+']', _reader.gui).prop('checked',true).change();
......@@ -279,9 +298,15 @@ class Reader {
showMenu(show=true)
{
if (show)
{
this.gui.children('.menu').show();
this.gui.children('.burger').hide();
}
else
{
this.gui.children('.menu').hide();
this.gui.children('.burger').show();
}
}
toggleMenu()
{
......@@ -309,7 +334,8 @@ $(document).delegate( 'input[name=viewmode]', 'change', function () {
// Next panel on simple click
$(document).delegate( '.kumiko-reader', 'click touch', function (e) {
$(this).data('reader').next();
if ($(e.target).is('.panel,.kumiko-reader'))
$(this).data('reader').next();
});
// Prevent click on page when clicking on license links
......@@ -318,12 +344,6 @@ $(document).delegate( '.license a', 'click touch', function (e) {
});
// Show menu on double click
$(document).delegate( '.kumiko-reader', 'dblclick', function (e) {
$(this).data('reader').showMenu();
});
/**** KEYBOARD NAVIGATION ****/
$(document).keydown(function(e) {
......@@ -356,7 +376,7 @@ $(document).keydown(function(e) {
/**** MOBILE NAVIGATION ****/
// Navigate on swipe left/right, show menu on tap hold
// Navigate on swipe left/right
$(function() {
$('.kumiko-reader').swipe({
swipe: function(event, direction, distance, duration, fingerCount, fingerData)
......@@ -370,10 +390,6 @@ $(function() {
$(this).data('reader').next();
break;
}
},
hold: function(event, target)
{
$(this).data('reader').showMenu();
}
});
$('.kumiko-reader').swipe( {fingers:2} );
......
......@@ -28,7 +28,7 @@ ul {
position: relative;
}
.kumiko-reader > *:not(.container) {
.page-nb, .burger, .menu > ul {
z-index: 20;
padding: 0.3em 0.5em;
background-color: #34495e;
......@@ -39,8 +39,33 @@ ul {
.menu {
position: absolute;
bottom: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.menu ul {
display: flex;
flex-direction: column;
padding: 2em;
font-size: 150%;
position: relative;
}
.menu .exit {
position: absolute;
right: 1vmin;
top: 1vmin;
font-style: normal;
}
.burger {
position: absolute;
left: 0;
bottom: 0;
font-size: 6vmin;
font-style: normal;
}
.pagenb {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment