var CBRJS = CBRJS || {}; CBRJS.VERSION = "0.0.1"; CBRJS.basePath = CBRJS.basePath || ""; CBRJS.session = CBRJS.session || {}; CBRJS.Reader = function(bookPath, _options) { var reader = this, $progressbar = $('.bar'), search = window.location.search, parameters, options, found; this.options = options = $.extend(true, _options || {}, { bookPath: bookPath, session: {} }); // Overide options with search parameters if(search) { parameters = search.slice(1).split("&"); parameters.forEach(function(p){ var split = p.split("="); var name = split[0]; var value = split[1] || ''; reader.options[name] = decodeURIComponent(value); }); } function extractImages(url, opts) { var images = [], xhr = new XMLHttpRequest(), filename = decodeURIComponent(url.split('/').pop()), re_file_ext = new RegExp(/\.([a-z]+)$/), format = filename.toLowerCase().match(re_file_ext)[1], archive_class = ({ cbz: 'Unzipper', cbr: 'Unrarrer' })[format], options = $.extend({ start: function () {}, extract: function (page_url) {}, progress: function (percent_complete) {}, finish: function (images) {} }, opts); if (!archive_class) { alert('invalid file type, only cbz and cbr are supported.'); return false; } xhr.open('GET',url, true); options.start(filename); xhr.responseType = "arraybuffer"; xhr.onprogress = function (e) { if (e.lengthComputable) { $progressbar.css('width', Math.floor((e.loaded / e.total) * 100) + '%'); } }; xhr.onloadstart = function (e) { $progressbar.css('width', '0%'); }; xhr.onloadend = function (e) { $('.icon-cloud_download').addClass('ok'); reader.options.session.size = e.total; }; xhr.onload = function () { if ((this.status === 200) && this.response) { var done = false; var ua = new bitjs.archive[archive_class](this.response, document.head.dataset.staticpath + 'vendor/bitjs/'); ua.addEventListener(bitjs.archive.UnarchiveEvent.Type.START, function (e) { $progressbar.css('width', '0%'); $('.icon-unarchive').addClass('active'); }); ua.addEventListener(bitjs.archive.UnarchiveEvent.Type.EXTRACT, function (e) { var mimetype, blob, url; var file_extension = e.unarchivedFile.filename.toLowerCase().match(re_file_ext)[1]; switch (file_extension) { case 'jpg': case 'jpeg': mimetype = 'image/jpeg'; break; case 'png': mimetype = 'image/png'; break; case 'gif': mimetype = 'image/gif'; break; default: return false; } blob = new Blob([e.unarchivedFile.fileData], { type: mimetype }); url = window.URL.createObjectURL(blob); images.push(url); options.extract(url, blob); }); ua.addEventListener(bitjs.archive.UnarchiveEvent.Type.PROGRESS, function (e) { options.progress(Math.floor(e.currentBytesUnarchived / e.totalUncompressedBytesInArchive * 100)); }); ua.addEventListener(bitjs.archive.UnarchiveEvent.Type.FINISH, function (e) { options.finish(images); }); ua.addEventListener(bitjs.archive.UnarchiveEvent.Type.ERROR, function (e) { $('.icon-unarchive').removeClass('active'); $('.icon-unarchive').addClass('error'); $('#message').text('Failed to extract images from archive, file corrupted?'); }); } ua.start(); }; xhr.send(); } function openComicArchive(url, options) { var title, page = 0; extractImages(url, { start: function (filename) { this.filename = filename; $('.toolbar').addClass('hide'); $('.navigation').addClass('hide'); $('.icon-cloud_download').addClass('active'); $('.message-text').text(filename); $('#progressbar').show(); }, extract: function (url, blob) { $('.message-text').text('extracting page #' + ++page); }, progress: function (percent_complete) { $progressbar.css('width', percent_complete + '%'); }, finish: function (pages) { $('.icon-unarchive').addClass('ok'); var name = this.filename.replace(/\.[a-z]+$/, ''); var id = encodeURIComponent(name.toLowerCase()); var book = new ComicBook('viewer', pages, options); document.title = name; $('.toolbar').removeClass('hide'); $('.navigation').removeClass('hide'); $('#progressbar').hide(); $('#viewer').show(); book.draw(); $(window).on('resize', function () { book.draw(); }); $(window).on('beforeunload', function(e) { book.destroy(); }); } }); } function getPref (arr, name) { if ((arr.constructor === Array) && (found = arr.filter(function(e) { return e.name === name; }))) { if (found.hasOwnProperty("value")) { return found.value; } } }; openComicArchive(bookPath, { currentPage: parseInt(options.session.cursor.value) || 0, enhance: getPref(options.session.preferences, "enhance") || {}, manga: getPref(options.session.preferences, "manga") || false, thumbnails: getPref(options.session.defaults, "thumbnails"), thumbnailWidth: parseInt(getPref(options.session.defaults, "thumbnailWidth")) || 200, session: options.session }); return this; }; var ComicBook; ComicBook = (function ($) { 'use strict'; /** * Merge two arrays. Any properties in b will replace the same properties in * a. New properties from b will be added to a. * * @param a {Object} * @param b {Object} */ function merge(a, b) { var prop; if (typeof b === 'undefined') { b = {}; } for (prop in a) { if (a.hasOwnProperty(prop)) { if (prop in b) { continue; } b[prop] = a[prop]; } } return b; } /** * Exception class. Always throw an instance of this when throwing exceptions. * * @param {String} type * @param {Object} object * @returns {ComicBookException} */ var ComicBookException = { INVALID_ACTION: 'invalid action', INVALID_PAGE: 'invalid page', INVALID_PAGE_TYPE: 'invalid page type', UNDEFINED_CONTROL: 'undefined control', INVALID_ZOOM_MODE: 'invalid zoom mode', INVALID_NAVIGATION_EVENT: 'invalid navigation event' }; function ComicBook(id, srcs, opts) { var self = this; var canvas_id = id; // canvas element id this.srcs = srcs; // array of image srcs for pages var defaults = { displayMode: (window.innerWidth > window.innerHeight) ? 'double' : 'single', // single / double zoomMode: 'fitWindow', // manual / fitWidth / fitWindow manga: false, // true / false fullscreen: false, // true / false enhance: {}, // image filters to use thumbnails: true, // true / false (use thumbnails in index) thumbnailWidth: 200, // width of thumbnail sidebarWide: false, // use wide sidbar currentPage: 0, // current page keyboard: { 32: 'next', // space 34: 'next', // page-down 39: 'next', // cursor-right 33: 'previous', // page-up 37: 'previous', // cursor-left 36: 'first', // home 35: 'last', // end 83: 'sidebar', // s 84: 'toolbar', // t 76: 'toggleLayout', // l 70: 'toggleFullscreen', // f 27: 'closeSidebar' // esc }, vendorPath: document.head.dataset.staticpath + 'vendor/', forward_buffer: 3, session: { getCursor: function() {}, setCursor: function(value) {}, getBookmark: function(name, type) {}, setBookmark: function(name, value, type, content) {}, getDefault: function(name) {}, setDefault: function(name, value) {}, getPreference: function(name) {}, setPreference: function(name, value) {} } }; var options = {}; this.isMobile = false; // mobile enhancements if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile/i.test(navigator.userAgent)) { this.isMobile = true; document.body.classList.add('mobile'); window.addEventListener('load', function () { setTimeout(function () { window.scrollTo(0, 1); }, 0); }); } window.addEventListener('resize', function () { self.setLayout((window.innerWidth > window.innerHeight) ? 'double' : 'single'); }); $.extend(true, options, defaults, opts); // options array for internal use var no_pages = srcs.length; var pages = []; // array of preloaded Image objects var canvas; // the HTML5 canvas object var context; // the 2d drawing context var tcv = document.createElement("canvas"); // canvas used for thumbnailer var tctx = tcv.getContext('2d'); // context used for thumbnailer var toc = document.getElementById('toc'); // context used for thumbnailer var loaded = []; // the images that have been loaded so far var scale = 1; // page zoom scale, 1 = 100% var is_double_page_spread = false; var controlsRendered = false; // have the user controls been inserted into the dom yet? var page_requested = false; // used to request non preloaded pages var shiv = false; /** * Gets the window.innerWidth - scrollbars */ function windowWidth() { var height = window.innerHeight + 1; if (shiv === false) { shiv = $(document.createElement('div')) .attr('id', 'cbr-width-shiv') .css({ width: '100%', position: 'absolute', top: 0, zIndex: '-1000' }); $('body').append(shiv); } shiv.height(height); return shiv.innerWidth(); } /** * enables the back button */ function checkHash() { var hash = getHash(); if (hash !== options.currentPage && loaded.indexOf(hash) > -1) { options.currentPage = hash; self.draw(); } } function getHash() { var hash = parseInt(location.hash.substring(1), 10) - 1 || 0; if (hash < 0) { setHash(0); hash = 0; } return hash; } function setHash(pageNo) { location.hash = pageNo; } // page hash on first load var hash = getHash(); /** * Setup the canvas element for use throughout the class. */ function init() { // setup canvas canvas = document.getElementById(canvas_id); context = canvas.getContext('2d'); // render user controls if (controlsRendered === false) { self.renderControls(); self.tocCreate(no_pages); controlsRendered = true; } // add page controls window.addEventListener('keydown', self.navigation, false); window.addEventListener('hashchange', checkHash, false); // fill in metadata options.session.pagecount = srcs.length; $('.book-title').text(options.session.title); $('.book-format').text(options.session.format); $('.book-pagecount').text(options.session.pagecount); $('.book-size').text(options.session.size); } window.addEventListener('touchstart', function (e) { var $el = $(e.target); if ($el.attr('id') === 'viewer') { self.toggleToolbar(); } }, false); /** * Connect controls to events */ ComicBook.prototype.renderControls = function () { var controls = {}, $toolbar; // set values from preferences or defaults // do this before connecting listeners to avoid triggering callbacks for (var prop in options.enhance) { if(options.enhance.hasOwnProperty(prop)) { switch (prop) { case 'brightness': document.getElementById('brightness').value = options.enhance.brightness['brightness']; document.getElementById('contrast').value = options.enhance.brightness['contrast']; break; case 'sharpen': document.getElementById('sharpen').value = options.enhance.sharpen['strength']; break; case 'desaturate': $('#image-desaturate').prop('checked', true); break; case 'removenoise': $('#image-removenoise').prop('checked', true); break; default: console.log("unknown enhancement: " + JSON.stringify(prop)); } } }; // thumbnail controls $('#thumbnail-generate').prop('checked', options.thumbnails); $('#thumbnail-width').val(options.thumbnailWidth); if (!options.thumbnails) { $('#toc-populate').addClass('open'); $('#thumbnail-width').prop('disabled', true); } // connect callbacks $('.control').each(function () { controls[$(this).attr('name')] = $(this); // add event listeners to controls that specify callbacks $(this).find('*').andSelf().filter('[data-action][data-trigger]').each(function () { var $this = $(this); var trigger = $this.data('trigger'); var action = $this.data('action'); // trigger a direct method if exists if (typeof self[$this.data('action')] === 'function') { $this.on(trigger, self[action]); } // throw an event to be caught outside if the app code $this.on(trigger, function (e) { $(self).trigger(trigger, e); }); }); }); this.controls = controls; $toolbar = this.getControl('toolbar'); $toolbar .find('.manga-' + options.manga).show().end() .find('.manga-' + !options.manga).hide().end() .find('.layout').hide().end().find('.layout-' + options.displayMode).show().end() .find('.fullscreen-' + options.fullscreen).show().end() .find('.fullscreen-' + !options.fullscreen).hide(); if (parent !== window) { $('.close').removeClass('hide'); $('.close').on('click', function() { parent.OCA.Epubreader.Plugin.hide(); }); } }; ComicBook.prototype.getControl = function (control) { if (typeof this.controls[control] !== 'object') { throw ComicBookException.UNDEFINED_CONTROL + ' ' + control; } return this.controls[control]; }; ComicBook.prototype.showControl = function (control) { this.getControl(control).show().addClass('open'); }; ComicBook.prototype.hideControl = function (control) { this.getControl(control).removeClass('open').hide(); }; ComicBook.prototype.toggleControl = function (control) { this.getControl(control).toggle().toggleClass('open'); }; ComicBook.prototype.toggleLayout = function () { self.setLayout((options.displayMode === 'single') ? 'double' : 'single'); }; ComicBook.prototype.setLayout = function (layout) { var $toolbar = self.getControl('toolbar'); options.displayMode = (layout === 'single') ? 'single' : 'double'; $toolbar.find('.layout').hide().end().find('.layout-' + options.displayMode).show(); self.drawPage(); }; /** * Create thumbnail for image * * @return Image */ ComicBook.prototype.getThumb = function (image) { var thumb = new Image(); var scale = image.width / options.thumbnailWidth; tcv.width = options.thumbnailWidth; tcv.height = Math.floor(image.height / scale); tctx.drawImage(image, 0, 0, tcv.width, tcv.height); thumb.src = tcv.toDataURL(); tctx.clearRect(0, 0, tcv.width, tcv.height); return thumb; }; /** * Create empty TOC with placeholder images */ ComicBook.prototype.tocCreate = function (no_pages) { // use small image with reasonable aspect ratio tcv.width = 5; tcv.height = 7; // transparent, style with .placeholder in CSS tctx.fillStyle = "rgba(200, 200, 200, 0)"; tctx.fillRect(0, 0, tcv.width, tcv.height); var imgsrc = tcv.toDataURL(); for(var i = 0; i < no_pages; i++) { var item = document.createElement('li'); item.setAttribute("id", "page-" + parseInt(i + 1)); var placeholder = new Image(); placeholder.src = imgsrc; var label = document.createElement('span'); label.innerHTML = i + 1; item.appendChild(placeholder); item.appendChild(label); toc.appendChild(item); } }; /** * Insert thumbnail into TOC */ ComicBook.prototype.tocInsert = function (image, page, replace) { var placeholder = toc.children[page].firstChild; if (replace === true) { placeholder.parentNode.replaceChild( self.getThumb(image), placeholder ); } toc.children[page].addEventListener('click', function (e) { self.drawPage(page + 1, true); }); }; /** * Populate TOC on demand */ ComicBook.prototype.tocPopulate = function () { var i = 0; while (i < srcs.length) { self.tocInsert(pages[i], i, true); i++; } // set, but don't save for future sessions options.thumbnails = true; $('#toc-populate').removeClass('open'); }; /** * Get the image for a given page. * * @return Image */ ComicBook.prototype.getPage = function (i) { if (i < 0 || i > srcs.length - 1) { throw ComicBookException.INVALID_PAGE + ' ' + i; } if (typeof pages[i] === 'object') { return pages[i]; } else { page_requested = i; this.showControl('loadingOverlay'); } }; /** * @see #preload */ ComicBook.prototype.draw = function () { init(); // resize navigation controls $('.navigate').outerHeight(window.innerHeight); $('.overlay').outerWidth(windowWidth()).height(window.innerHeight); // preload images if needed if (pages.length !== no_pages) { this.preload(); } else { this.drawPage(); } }; /** * Zoom the canvas * * @param new_scale {Number} Scale the canvas to this ratio */ ComicBook.prototype.zoom = function (new_scale) { options.zoomMode = 'manual'; scale = new_scale; if (typeof this.getPage(options.currentPage) === 'object') { this.drawPage(); } }; ComicBook.prototype.zoomIn = function () { self.zoom(scale + 0.1); }; ComicBook.prototype.zoomOut = function () { self.zoom(scale - 0.1); }; ComicBook.prototype.fitWidth = function () { options.zoomMode = 'fitWidth'; self.drawPage(); }; ComicBook.prototype.fitWindow = function () { options.zoomMode = 'fitWindow'; self.drawPage(); }; /** * Preload all images, draw the page only after a given number have been loaded. * * @see #drawPage */ ComicBook.prototype.preload = function () { var i = options.currentPage; // the current page counter for this method var rendered = false; var queue = []; this.showControl('loadingOverlay'); function loadImage(i) { var page = new Image(); page.src = srcs[i]; page.onload = function () { pages[i] = this; self.tocInsert(this, i, options.thumbnails); loaded.push(i); $('#cbr-progress-bar .progressbar-value').css('width', Math.floor((loaded.length / no_pages) * 100) + '%'); // double page mode needs an extra page added var buffer = (options.displayMode === 'double' && options.currentPage < srcs.length - 1) ? 1 : 0; // start rendering the comic when the requested page is ready if ((rendered === false && ($.inArray(options.currentPage + buffer, loaded) !== -1) || (typeof page_requested === 'number' && $.inArray(page_requested, loaded) !== -1))) { // if the user is waiting for a page to be loaded, render that one instead of the default options.currentPage if (typeof page_requested === 'number') { options.currentPage = page_requested - 1; page_requested = false; } self.drawPage(); self.hideControl('loadingOverlay'); rendered = true; } if (queue.length) { loadImage(queue[0]); queue.splice(0, 1); } else { $('#cbr-status').delay(500).fadeOut(); } }; } // loads pages in both directions so you don't have to wait for all pages // to be loaded before you can scroll backwards function preload(start, stop) { var j = 0; var count = 1; var forward = start; var backward = start - 1; while (forward <= stop) { if (count > options.forward_buffer && backward > -1) { queue.push(backward); backward--; count = 0; } else { queue.push(forward); forward++; } count++; } while (backward > -1) { queue.push(backward); backward--; } loadImage(queue[j]); } preload(i, srcs.length - 1); }; ComicBook.prototype.pageLoaded = function (page_no) { return (typeof loaded[page_no - 1] !== 'undefined'); }; /** * Draw the current page in the canvas */ ComicBook.prototype.drawPage = function (page_no, reset_scroll) { var scrollY; reset_scroll = (typeof reset_scroll !== 'undefined') ? reset_scroll : true; scrollY = reset_scroll ? 0 : window.scrollY; // if a specific page is given try to render it, if not bail and wait for preload() to render it if (typeof page_no === 'number' && page_no < srcs.length && page_no > 0) { options.currentPage = page_no - 1; if (!this.pageLoaded(page_no)) { this.showControl('loadingOverlay'); return; } } if (options.currentPage < 0) { options.currentPage = 0; } var zoom_scale; var offsetW = 0, offsetH = 0; var page = self.getPage(options.currentPage); var page2 = false; if (options.displayMode === 'double' && options.currentPage < srcs.length - 1) { page2 = self.getPage(options.currentPage + 1); } if (typeof page !== 'object') { throw ComicBookException.INVALID_PAGE_TYPE + ' ' + typeof page; } var width = page.width, height = page.height; // reset the canvas to stop duplicate pages showing canvas.width = 0; canvas.height = 0; // show double page spreads on a single page is_double_page_spread = ( typeof page2 === 'object' && (page.width > page.height || page2.width > page2.height) && options.displayMode === 'double' ); if (is_double_page_spread) { options.displayMode = 'single'; } if (options.displayMode === 'double') { // for double page spreads, factor in the width of both pages if (typeof page2 === 'object') { width += page2.width; } // if this is the last page and there is no page2, still keep the canvas wide else { width += width; } } // update the page scale if a non manual mode has been chosen switch (options.zoomMode) { case 'manual': document.body.style.overflowX = 'auto'; zoom_scale = (options.displayMode === 'double') ? scale * 2 : scale; break; case 'fitWidth': document.body.style.overflowX = 'hidden'; // scale up if the window is wider than the page, scale down if the window // is narrower than the page zoom_scale = (windowWidth() > width) ? ((windowWidth() - width) / windowWidth()) + 1 : windowWidth() / width; // update the interal scale var so switching zoomModes while zooming will be smooth scale = zoom_scale; break; case 'fitWindow': document.body.style.overflowX = 'hidden'; var width_scale = (windowWidth() > width) ? ((windowWidth() - width) / windowWidth()) + 1 // scale up if the window is wider than the page : windowWidth() / width; // scale down if the window is narrower than the page var windowHeight = window.innerHeight; var height_scale = (windowHeight > height) ? ((windowHeight - height) / windowHeight) + 1 // scale up if the window is wider than the page : windowHeight / height; // scale down if the window is narrower than the page zoom_scale = (width_scale > height_scale) ? height_scale : width_scale; scale = zoom_scale; break; default: throw ComicBookException.INVALID_ZOOM_MODE + ' ' + options.zoomMode; } var canvas_width = page.width * zoom_scale; var canvas_height = page.height * zoom_scale; var page_width = (options.zoomMode === 'manual') ? page.width * scale : canvas_width; var page_height = (options.zoomMode === 'manual') ? page.height * scale : canvas_height; canvas_height = page_height; // make sure the canvas is always at least full screen, even if the page is more narrow than the screen canvas.width = (canvas_width < windowWidth()) ? windowWidth() : canvas_width; canvas.height = (canvas_height < window.innerHeight) ? window.innerHeight : canvas_height; // always keep pages centered if (options.zoomMode === 'manual' || options.zoomMode === 'fitWindow') { // work out a horizontal position if (canvas_width < windowWidth()) { offsetW = (windowWidth() - page_width) / 2; if (options.displayMode === 'double') { offsetW = offsetW - page_width / 2; } } // work out a vertical position if (canvas_height < window.innerHeight) { offsetH = (window.innerHeight - page_height) / 2; } } // in manga double page mode reverse the page(s) if (options.manga && options.displayMode === 'double' && typeof page2 === 'object') { var tmpPage = page; var tmpPage2 = page2; page = tmpPage2; page2 = tmpPage; } // draw the page(s) context.drawImage(page, offsetW, offsetH, page_width, page_height); if (options.displayMode === 'double' && typeof page2 === 'object') { context.drawImage(page2, page_width + offsetW, offsetH, page_width, page_height); } this.pixastic = new Pixastic(context, options.vendorPath + 'pixastic/'); // apply any image enhancements previously defined $.each(options.enhance, function (action, options) { self.enhance[action](options); }); var current_page = (options.displayMode === 'double' && options.currentPage + 2 <= srcs.length) ? (options.currentPage + 1) + '-' + (options.currentPage + 2) : options.currentPage + 1; this.getControl('toolbar') .find('.current-page').text(current_page) .end() .find('.page-count').text(srcs.length); // revert page mode back to double if it was auto switched for a double page spread if (is_double_page_spread) { options.displayMode = 'double'; } // disable the fit width button if needed $('button.cbr-fit-width').attr('disabled', (options.zoomMode === 'fitWidth')); $('button.cbr-fit-window').attr('disabled', (options.zoomMode === 'fitWindow')); // disable prev/next buttons if not needed $('.navigate').show(); if (options.currentPage === 0) { if (options.manga) { $('.navigate-left').show(); $('.navigate-right').hide(); } else { $('.navigate-left').hide(); $('.navigate-right').show(); } } if (options.currentPage === srcs.length - 1 || (typeof page2 === 'object' && options.currentPage === srcs.length - 2)) { if (options.manga) { $('.navigate-left').hide(); $('.navigate-right').show(); } else { $('.navigate-left').show(); $('.navigate-right').hide(); } } if (options.currentPage !== getHash()) { $(this).trigger('navigate'); } // update hash location if (getHash() !== options.currentPage) { setHash(options.currentPage + 1); } options.session.setCursor(options.currentPage); }; /** * Increment the counter and draw the page in the canvas * * @see #drawPage */ ComicBook.prototype.drawNextPage = function () { var page; try { page = self.getPage(options.currentPage + 1); } catch (e) { } if (!page) { return false; } if (options.currentPage + 1 < pages.length) { options.currentPage += (options.displayMode === 'single' || is_double_page_spread) ? 1 : 2; try { self.drawPage(); } catch (e) { } } // make sure the top of the page is in view window.scroll(0, 0); }; /** * Decrement the counter and draw the page in the canvas * * @see #drawPage */ ComicBook.prototype.drawPrevPage = function () { var page; try { page = self.getPage(options.currentPage - 1); } catch (e) { } if (!page) { return false; } is_double_page_spread = (page.width > page.height); // need to run double page check again here as we are going backwards if (options.currentPage > 0) { options.currentPage -= (options.displayMode === 'single' || is_double_page_spread) ? 1 : 2; self.drawPage(); } // make sure the top of the page is in view window.scroll(0, 0); }; /* default settings */ ComicBook.prototype.thumbnails = function() { if ($(this).is(':checked')) { options.thumbnails = true; document.getElementById('thumbnail-width').disabled = false; } else { options.thumbnails = false; document.getElementById('thumbnail-width').disabled = true; } options.session.setDefault("thumbnails", options.thumbnails); }; ComicBook.prototype.thumbnailWidth = function() { options.thumbnailWidth = $(this).val(); options.session.setDefault("thumbnailWidth", options.thumbnailWidth); }; ComicBook.prototype.sidebarWide = function (wide) { if (typeof(wide) !== "boolean") { wide = ($(this).is(':checked') === true); } if (wide) { options.sidebarWide = true; document.getElementById('sidebar').classList.add('wide'); } else { options.sidebarWide = false; document.getElementById('sidebar').classList.remove('wide'); self.sidebarWidth(0); } options.session.setDefault("sidebarWide", options.sidebarWide); }; ComicBook.prototype.sidebarWidth = function(width) { if (typeof(width) !== "number") { width = $(this).val(); } options.sidebarWidth = width; // width === 0 is interpreted as 'use value from CSS' if (options.sidebarWidth > 0) { document.getElementById('sidebar').style.width = options.sidebarWidth + "%"; } else { document.getElementById('sidebar').style.width = ""; } options.session.setDefault("sidebarWidth", options.sidebarWidth); }; ComicBook.prototype.resetSidebar = function () { self.sidebarWide(false); self.sidebarWidth(0); }; /* book-specific settings */ ComicBook.prototype.brightness = function () { var $brightness = { brightness: $('#brightness').val(), contrast: $('#contrast').val() }; self.enhance.brightness($brightness); options.enhance.brightness = $brightness; options.session.setPreference("enhance",options.enhance); }; ComicBook.prototype.sharpen = function () { options.enhance.sharpen = $(this).val(); self.enhance.sharpen({ strength: options.enhance.sharpen }); options.session.setPreference("enhance",options.enhance); }; ComicBook.prototype.desaturate = function () { if ($(this).is(':checked')) { options.enhance.desaturate = {}; self.enhance.desaturate(); } else { delete options.enhance.desaturate; self.enhance.resaturate(); } options.session.setPreference("enhance",options.enhance); }; ComicBook.prototype.removenoise = function () { if ($(this).is(':checked')) { options.enhance.removenoise = {}; self.enhance.removenoise(); } else { delete options.enhance.removenoise; self.enhance.unremovenoise(); } options.session.setPreference("enhance",options.enhance); }; ComicBook.prototype.resetEnhancements = function () { self.enhance.reset(); options.session.setPreference("enhance",options.enhance); }; /** * Apply image enhancements to the canvas. */ ComicBook.prototype.enhance = { /** * Reset enhancements. * This can reset a specific enhancement if the method name is passed, or * it will reset all. * * @param method {string} the specific enhancement to reset */ reset: function (method) { if (!method) { options.enhance = {}; } else { delete options.enhance[method]; } self.drawPage(null, false); }, /** * Pixastic progress callback * @param {float} progress */ // progress: function (progress) { progress: function () { // console.info(Math.floor(progress * 100)); }, /** * Pixastic on complete callback */ done: function () { }, /** * Adjust brightness / contrast * * params * brightness (int) -150 to 150 * contrast: (float) -1 to infinity * * @param {Object} params Brightness & contrast levels * @param {Boolean} reset Reset before applying more enhancements? */ brightness: function (params, reset) { if (reset !== false) { this.reset('brightness'); } // merge user options with defaults var opts = merge({ brightness: 0, contrast: 0 }, params); options.enhance.brightness = opts; // run the enhancement self.pixastic.brightness({ brightness: opts.brightness, contrast: opts.contrast }).done(this.done, this.progress); }, /** * Force black and white */ desaturate: function () { options.enhance.desaturate = {}; self.pixastic.desaturate().done(this.done, this.progress); }, /** * Undo desaturate */ resaturate: function () { delete options.enhance.desaturate; self.drawPage(null, false); }, /** * Sharpen * * options: * strength: number (-1 to infinity) * * @param {Object} options */ sharpen: function (params) { this.desharpen(); var opts = merge({ strength: 0 }, params); options.enhance.sharpen = opts; self.pixastic.sharpen3x3({ strength: opts.strength }).done(this.done, this.progress); }, desharpen: function () { delete options.enhance.sharpen; self.drawPage(null, false); }, /** * Remove noise */ removenoise: function () { options.enhance.removenoise = {}; self.pixastic.removenoise().done(this.done, this.progress); }, unremovenoise: function () { delete options.enhance.removenoise; self.drawPage(null, false); } }; ComicBook.prototype.navigation = function (e) { // disable navigation when the overlay is showing if ($('#cbr-loading-overlay').is(':visible')) { return false; } var side = false, page_no = false; switch (e.type) { case 'click': side = e.currentTarget.getAttribute('data-navigate-side'); break; case 'keydown': // console.log("keydown: " + e.keyCode); switch (options.keyboard[e.keyCode]) { case 'previous': side = 'left'; break; case 'next': side = 'right'; break; case 'first': page_no = 1; break; case 'last': page_no = srcs.length - 1; break; case 'sidebar': self.toggleSidebar(); break; case 'toolbar': self.toggleToolbar(); break; case 'toggleLayout': self.toggleLayout(); break; case 'toggleFullscreen': self.toggleFullscreen(); break; case 'closeSidebar': self.closeSidebar(); break; default: /* throw ComicBookException.INVALID_NAVIGATION_EVENT + ' ' + e.type; */ } break; default: throw ComicBookException.INVALID_NAVIGATION_EVENT + ' ' + e.type; } if (side) { e.stopPropagation(); // western style (left to right) if (!options.manga) { if (side === 'left') { self.drawPrevPage(); } if (side === 'right') { self.drawNextPage(); } } // manga style (right to left) else { if (side === 'left') { self.drawNextPage(); } if (side === 'right') { self.drawPrevPage(); } } return false; } if (page_no) { self.drawPage(page_no, true); return false; } }; ComicBook.prototype.toggleReadingMode = function () { options.manga = !options.manga; self.getControl('toolbar') .find('.manga-' + options.manga).show().end() .find('.manga-' + !options.manga).hide(); options.session.setPreference("manga",options.manga); }; ComicBook.prototype.toggleToolbar = function () { self.toggleControl('toolbar'); }; ComicBook.prototype.openSidebar = function () { $('.sidebar').addClass('open'); $('.toolbar').addClass('open'); self.showControl('busyOverlay'); self.scrollToc(); }; ComicBook.prototype.closeSidebar = function () { $('.sidebar').removeClass('open'); $('.toolbar').removeClass('open'); self.toggleToolbar(); self.hideControl('busyOverlay'); }; ComicBook.prototype.toggleSidebar = function () { $('.sidebar').hasClass('open') ? self.closeSidebar() : self.openSidebar(); }; ComicBook.prototype.toggleFullscreen = function () { options.fullscreen = !options.fullscreen; self.getControl('toolbar') .find('.fullscreen-' + options.fullscreen).show().end() .find('.fullscreen-' + !options.fullscreen).hide(); if (options.fullscreen) { screenfull.request($('#container')[0]); } else { screenfull.exit($('#container')[0]); } }; /* * Scroll TOC to page (default: current page) */ ComicBook.prototype.scrollToc = function (page) { if (page === undefined) { page = options.currentPage; } document.getElementById('toc').parentNode.scrollTop = document.getElementById('page-' + String(page + 1)).offsetTop - Math.floor($('.panels').height() * 1.5); }; ComicBook.prototype.showToc = function () { self.getControl('sidebar') .find('.open').removeClass('open').end() .find('.toc-view').addClass('open'); if (!options.thumbnails) { $('#toc-populate').addClass('open'); } }; ComicBook.prototype.showBookSettings = function () { self.getControl('sidebar') .find('.open').removeClass('open').end() .find('.book-settings-view').addClass('open'); }; ComicBook.prototype.showSettings = function () { self.getControl('sidebar') .find('.open').removeClass('open').end() .find('.settings-view').addClass('open'); }; ComicBook.prototype.destroy = function () { $.each(this.controls, function (name, $control) { $control.remove(); }); canvas.width = 0; canvas.height = 0; window.removeEventListener('keydown', this.navigation, false); window.removeEventListener('hashchange', checkHash, false); setHash(''); // $(this).trigger('destroy'); }; } return ComicBook; })(jQuery); (function(root, $) { var previousReader = root.cbReader || {}; var cbReader = root.cbReader = function(path, options) { return new CBRJS.Reader(path, options); }; //exports to multiple environments if (typeof define === 'function' && define.amd) { //AMD define(function(){ return Reader; }); } else if (typeof module != "undefined" && module.exports) { //Node module.exports = cbReader; } })(window, jQuery);