Spaces:
Runtime error
Runtime error
| class Reader { | |
| constructor(options) | |
| { | |
| // Mandatory options | |
| if (!options.container || options.container.length == 0) { | |
| console.error('no container given in options'); | |
| return; | |
| } | |
| this.gui = options.container; | |
| this.gui.data('reader',this); | |
| if (!options.images_dir) { | |
| console.error('no images_dir given in options'); | |
| return; | |
| } | |
| this.images_dir = options.images_dir; | |
| if (!options.comicsJson || typeof options.comicsJson != 'object') { | |
| console.error('no comicsJson given in options, or not a javascript object'); | |
| return; | |
| } | |
| this.comic = options.comicsJson; | |
| this.known_panels = options.known_panels ? options.known_panels : []; | |
| // init attributes | |
| this.currpage = 0; | |
| this.currpanel = 0; | |
| this.debug = this.gui.hasClass('debug') || 'debug' in this.getHashInfo(); | |
| if (this.debug) | |
| this.gui.addClass('debug'); | |
| // add image sub-container | |
| this.container = $('<div class="container"/>'); | |
| this.container.css({ | |
| position: 'relative', | |
| width: '95%', | |
| height: '95%', | |
| margin: 'auto', | |
| }); | |
| this.gui.append(this.container); | |
| if (options['controls']) | |
| this.add_controls(); | |
| window.addEventListener('orientationchange', function () { | |
| setTimeout( function () { this.gotoPanel(this.currpanel); }.bind(this), 500); // slight delay to make it work better, not sure why :) | |
| }.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')) | |
| this.nextPanel(); | |
| else | |
| this.loadNextPage(); | |
| } | |
| prev() | |
| { | |
| if (this.container.is('.zoomed')) | |
| this.prevPanel(); | |
| else | |
| this.loadPrevPage(); | |
| } | |
| loadNextPage() { return this.loadPage(this.currpage+1); } | |
| 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>') | |
| var imginfo = this.comic[page]; | |
| if (!this.gui.hasClass('fullpage')) | |
| this.gui.css({ | |
| width: imginfo.size[0], | |
| height: imginfo.size[1], | |
| padding: '2em', | |
| }); | |
| var imgurl = this.images_dir == 'urls' ? imginfo.filename : this.images_dir + imginfo.filename.split('/').reverse()[0]; | |
| var img = $('<img class="pageimg" src="'+imgurl+'"/>'); | |
| img.css({ | |
| position: 'absolute', | |
| 'width': '100%', | |
| 'height': '100%' | |
| }); | |
| this.container.children('img').remove(); | |
| this.container.prepend(img); | |
| // show license | |
| var license = this.get_license(imginfo); | |
| if (license) | |
| { | |
| this.gui.append('<span class="license"/>'); | |
| this.gui.children('.license').html(license); | |
| } | |
| else | |
| $('.license',this.gui).remove(); | |
| var was_zoomed = this.container.is('.zoomed'); | |
| this.drawPanels(imginfo); | |
| this.dezoom(); | |
| if (this.currpanel == 'last') | |
| this.currpanel = $('.panel').length-1; | |
| else | |
| this.currpanel = 0; | |
| if (was_zoomed) | |
| this.gotoPanel(this.currpanel); | |
| return true; | |
| } | |
| zoomOn (panel) | |
| { | |
| var growth = this.container.parent().width() / panel.width(); | |
| var max = 'x'; | |
| var ygrowth = this.container.parent().height() / panel.height(); | |
| if (ygrowth < growth) { | |
| growth = ygrowth; | |
| max = 'y'; | |
| } | |
| var newcss = { | |
| top: - panel.position().top * growth, | |
| left: - panel.position().left * growth, | |
| height: this.container.height() * growth, | |
| width: this.container.width() * growth | |
| }; | |
| // center panel horizontally or vertically within container's parent | |
| if (max == 'x') | |
| newcss.top += (this.container.parent().height() - panel.height() * growth) / 2; | |
| else | |
| newcss.left += (this.container.parent().width() - panel.width() * growth) / 2; | |
| $('.panel.zoomTarget').removeClass('zoomTarget'); | |
| panel.addClass('zoomTarget'); | |
| this.container.addClass('zoomed'); | |
| this.container.animate(newcss,300); | |
| } | |
| dezoom () | |
| { | |
| var size = this.getImgSize(); | |
| var newcss = { | |
| width: size.w, | |
| height: size.h, | |
| left: 0, | |
| top: 0 | |
| }; | |
| this.container.removeClass('zoomed'); | |
| this.container.css(newcss); | |
| } | |
| getImgSize () | |
| { | |
| var size = { | |
| w: this.container.parent().width(), | |
| h: this.container.parent().height() | |
| }; | |
| var imgsize = this.comic[this.currpage]['size']; | |
| var ratio = imgsize[0] / imgsize[1]; | |
| if (size.w > size.h * ratio) | |
| size.w = size.h * ratio; | |
| else if (size.h > size.w / ratio) | |
| size.h = size.w / ratio; | |
| return size; | |
| } | |
| gotoPanel (i) | |
| { | |
| if (i < 0) { | |
| this.currpanel = 'last'; | |
| var prevpage = this.loadPrevPage(); | |
| if (!prevpage) | |
| this.currpanel = 0; | |
| return; | |
| } | |
| var newPanel = $('.panel').eq(i); | |
| if (newPanel.length > 0) | |
| this.zoomOn(newPanel); | |
| else { | |
| var nextpage = this.loadNextPage(); | |
| if (!nextpage) | |
| this.currpanel--; | |
| } | |
| } | |
| nextPanel () { this.currpanel++; this.gotoPanel(this.currpanel); } | |
| prevPanel () { this.currpanel--; this.gotoPanel(this.currpanel); } | |
| drawPanels (imginfo) | |
| { | |
| this.container.children('*:not(.pageimg)').remove(); | |
| var [imgw,imgh] = imginfo['size']; | |
| var i = 1; | |
| for (var p in imginfo['panels']) | |
| { | |
| var unknown = !this.known_panels.includes(parseInt(p)); | |
| p = imginfo['panels'][p]; | |
| var [x,y,w,h] = p; | |
| var panel = $('<div class="panel"><!-- --></div>'); | |
| if (unknown) | |
| panel.addClass('unknown'); | |
| var panelcss = { | |
| top: '' + y/imgh*100 + '%', | |
| left: '' + x/imgw*100 + '%', | |
| height: '' + h/imgh*100 + '%', | |
| width: '' + w/imgw*100 + '%' | |
| }; | |
| panel.css(panelcss); | |
| panel.append('<span class="panelnb">'+(i++)+'</span>'); | |
| panel.append('<span class="top">'+y); | |
| panel.append('<span class="bottom">'+(y+h)); | |
| panel.append('<span class="left">'+x); | |
| panel.append('<span class="right">'+(x+w)); | |
| this.container.append(panel); | |
| } | |
| } | |
| 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(); }); | |
| this.gui.append(burger); | |
| var btprev = $('<i class="prev">←</i>'); | |
| btprev.data('reader',this); | |
| btprev.on('click touch', function (e) { $(this).data('reader').prev(); }); | |
| this.gui.append(btprev); | |
| var menu = $('<div class="menu"/>'); | |
| var menuul = $('<ul/>'); | |
| 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" autocomplete="off" />Show panels</label>'); | |
| 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); | |
| $(document).ready( function () { | |
| var mode = _reader.debug ? 'page' : 'panel'; | |
| $('input[name=viewmode][value='+mode+']', _reader.gui).prop('checked',true).change(); | |
| }); | |
| } | |
| get_license(page) | |
| { | |
| if (!page.license) | |
| return ''; | |
| var html = []; | |
| for (var i=0; i < 3; i++) | |
| { | |
| var k = ['title','author','license'][i]; | |
| if (k in page.license) | |
| { | |
| var elt = page.license; | |
| html.push( | |
| {title:'',author:'by ',license:''}[k] + | |
| (elt[k+'_link'] ? '<a target="_blank" href="'+elt[k+'_link']+'">'+elt[k]+'</a>' : elt[k]) | |
| ); | |
| } | |
| } | |
| return html.join(', '); | |
| } | |
| showMenu(show=true) | |
| { | |
| var menu = this.gui.children('.menu'); | |
| if (show == 'toggle') | |
| show = !menu.is(':visible'); | |
| show ? menu.show() : menu.hide(); | |
| } | |
| } | |
| // Change view mode | |
| $(document).delegate( 'input[name=viewmode]', 'change', function () { | |
| if (!$(this).is(':checked')) | |
| return; | |
| var reader = $(this).parents('.kumiko-reader:eq(0)').data('reader'); | |
| switch ($(this).val()) { | |
| case 'page': | |
| reader.dezoom(); | |
| break; | |
| case 'panel': | |
| reader.gotoPanel(0); | |
| break; | |
| } | |
| reader.container.focus(); | |
| }); | |
| // Next panel on simple click | |
| $(document).delegate( '.kumiko-reader', 'click touch', function (e) { | |
| if ($(e.target).is('.panel,.kumiko-reader')) | |
| $(this).data('reader').next(); | |
| }); | |
| // Prevent click on page when clicking on license links | |
| $(document).delegate( '.license a', 'click touch', function (e) { | |
| e.stopPropagation(); | |
| }); | |
| /**** KEYBOARD NAVIGATION ****/ | |
| $(document).keydown(function(e) { | |
| if (e.altKey) // alt+left is shortcut for previous page, don't prevent it | |
| return; | |
| 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; | |
| default: | |
| return; // exit this handler for other keys | |
| } | |
| e.preventDefault(); | |
| }); | |