Commit f632059f authored by njean42's avatar njean42
Browse files

Store current page in location hash + kbd shortcuts.

parent 275d8a71
......@@ -46,7 +46,7 @@ class HTML:
images_dir: '{images_dir}',
known_panels: {known_panels}
}});
reader.loadPage(0);
reader.start();
</script>
"""
i = -1
......@@ -69,7 +69,7 @@ class HTML:
images_dir: '{images_dir}',
controls: true
}});
reader.loadPage(0);
reader.start();
</script>
""".format(json=js,images_dir=images_dir)
......
......@@ -30,7 +30,7 @@ class Reader {
// init attributes
this.currpage = 0;
this.currpanel = 0;
this.debug = this.gui.hasClass('debug') || window.location.hash == '#debug';
this.debug = this.gui.hasClass('debug') || 'debug' in this.getHashInfo();
if (this.debug)
this.gui.addClass('debug');
......@@ -44,7 +44,7 @@ class Reader {
});
this.gui.append(this.container);
if ('controls' in options && options['controls'])
if (options['controls'])
this.add_controls();
window.addEventListener('orientationchange', function () {
......@@ -52,6 +52,40 @@ class Reader {
}.bind(this));
}
getHashInfo ()
{
var hash = window.location.hash.replace(/^#/,'').split(',');
var info = {};
for (var i in hash)
{
var h = hash[i].split('=');
info[h[0]] = h[1];
}
return info;
}
setHashInfo (newinfo)
{
var info = this.getHashInfo();
for (var i in newinfo)
info[i] = newinfo[i];
info = Object.entries(info).map(function (kv) {
if (kv[1] === null)
return '';
return kv[0] + (kv[1] ? '=' + kv[1] : '');
}).filter(function(v){return v?true:false});
window.location.hash = info.join(',');
}
start ()
{
var page = this.getHashInfo()['page'];
if (!page)
page = 0;
this.loadPage(page);
}
next()
{
if (this.container.is('.zoomed'))
......@@ -71,11 +105,14 @@ class Reader {
loadPrevPage() { return this.loadPage(this.currpage-1); }
loadPage(page=0)
{
page = parseInt(page);
// don't go to a page below 0, or above the number of pages in this comic
if (page < 0 || page >= this.comic.length)
return false;
this.currpage = page;
this.setHashInfo({page: page ? page : null});
$('.pagenb',this.gui).html('page '+(page+1)+' <small>/'+this.comic.length+'</small>')
......@@ -258,12 +295,27 @@ class Reader {
menu.append(menuul);
var btn_debug = $('<label><input type="checkbox" class="toggleDebug" autocomplete="off" />Show panels</label>');
btn_debug.children('.toggleDebug').on('change', function () { _reader.gui.toggleClass('debug'); });
if (this.debug)
btn_debug.children('.toggleDebug').prop('checked',true);
btn_debug.children('.toggleDebug').on('change', function () {
_reader.gui.toggleClass('debug');
_reader.setHashInfo({'debug': _reader.gui.hasClass('debug') ? '' : null});
});
menuul.append(btn_debug);
menuul.append('<i class="exit">X</i>');
menuul.children('.exit').on('click touch', function () { _reader.showMenu(false); })
menuul.append(' \
<li>---</li> \
<li class="kbd"><span>click/tap</span><span>next page/panel</span></li> \
<li class="kbd"><span>right/down</span><span>next page/panel</span></li> \
<li class="kbd"><span>left/up</span><span>previous page/panel</span></li> \
<li class="kbd"><span>p</span><span>switch page/panel view</span></li> \
<li class="kbd"><span>m</span><span>show this menu</span></li> \
<li class="kbd"><span>d</span><span>debug (show panels)</span></li> \
');
this.gui.append(menu);
this.showMenu(false);
......@@ -296,10 +348,12 @@ class Reader {
showMenu(show=true)
{
if (show)
this.gui.children('.menu').show();
else
this.gui.children('.menu').hide();
var menu = this.gui.children('.menu');
if (show == 'toggle')
show = !menu.is(':visible');
show ? menu.show() : menu.hide();
}
}
......@@ -341,13 +395,24 @@ $(document).keydown(function(e) {
switch(e.which) {
case 37: // left
case 38: // up
reader.prev();
break;
case 39: // right
case 40: // down
reader.next();
break;
case 68: // 'd' debug (show panels)
var d = $('input.toggleDebug');
d.prop('checked',d.is(':checked')).change();
break;
case 77: // 'm' key: toggle menu
reader.showMenu('toggle');
break;
case 80: // 'p' key: switch between page and panel reading
$('input[name=viewmode]:not(:checked)').prop('checked',true).change();
break;
......
......@@ -6,6 +6,7 @@ body {
height: 96vh;
margin-top: 2vh;
margin-left: 2vw;
font-family: sans-serif;
}
ul {
......@@ -32,7 +33,6 @@ ul {
z-index: 20;
padding: 0.1em 0.4em;
background-color: #34495e;
opacity: 0.9;
color: #ecf0f1;
font-weight: bold;
}
......@@ -50,10 +50,14 @@ ul {
.menu ul {
display: flex;
flex-direction: column;
border: 2px solid #ecf0f1;
border-radius: 5px;
padding: 2em;
font-size: 150%;
position: relative;
}
.menu .kbd { font-size: 80%; display: flex; justify-content: space-between;}
.menu .kbd span:nth-child(1) { color: #bdc3c7; margin-right: 1em; }
.menu .exit {
position: absolute;
right: 1vmin;
......
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