[Suggestion] Make the entire web structure available to skinners

Unfortunately there is no HTML file in Jar: all the HTML is generated at runtime directly by the code (there is no template).

I could "externalize" the javascript though. Let me know if this would be useful to you even without the ability to modify the HTML.

Thanks for replying, Tom. Using JavaScript I could move around all of the page elements, but that would be a really big hassle -_-

Using a HTML template would, of course, be the easiest for both you and I in the future to update. That would clean up some of your JAVA by getting rid of the HTML strings and make it easier for me to manipulate.

In addition, if you used a template that would open the door for skinners, like myself, to access all of the comic and book metadata. For example, if I have a simple span where I want to print the issue name and publication date I could write: "<span>{meta_book_issue_name} ({meta_book_volume_publication_date})</span>" and in your JAVA you'd simply import the template as a string then do string replace for every variable you make available to skinners.

However, I know that your code may be intricately woven with the HTML so moving everything to a template may be way too much work for the benefit right now. and I understand if this gets shifted lower in priority.

I've been reading through this forum and people really like how simple and easy to use the comic reader is currently.

The html generator places the page image in to:

<div id="pageContent">
	<img id="displayedpage" src="/comicreader/80160?page=3&amp;width=1200">
</div>

using:

(JavaScript):
document.getElementById('pageContent').innerHTML="<img id=displayedpage src=\"" + readerSubUrl + documentId + "?page=" + currentPage + "&width=" + targetWidth + "\">";

(jQuery):
var page_url = readerSubUrl + documentId + '?page=' + currentPage + '&width=' + targetWidth;
$("#pageContent").html('<img id="displayedpage" src="'+page_url+'">');

#displayedpage is replaced every time a page is turned. If you appended the image tag to #pageContent and gave it a data-page attribute then we could make use of the browsers' cache to speed up displaying previously loaded pages as well as create a page-dragging effect like on Android OS and also a thumbnail gallery for jumping to pages.

<div id="pageContent">
	<img src="/comicreader/80160?page=0&width=1200" data-page="0">
	<img src="/comicreader/80160?page=1&width=1200" data-page="1">
	<img src="/comicreader/80160?page=2&width=1200" data-page="2">
	<img class="displayedpage" src="/comicreader/80160?page=3&amp;width=1200" data-page="3">
	<img src="/comicreader/80160?page=4&width=1200" data-page="4">
</div>

This is an example of how you'd append the images and check for their existence to speed up loading previous pages. Of course, the pages would have to be changed from no display to simply being displayed off page when you add the swiping functionality.

<style type="text/css">
	/* Make sure that all of the images in the page content div are hidden except for the displayed page. */
	#pageContent img:not(.displayedpage) { display: none; }
</style>

<script type="text/javascript">
$("document").ready( function() {
	var pageContent = $("#pageContent");
	
	function loadDocPage() {
		...
		var page_url = readerSubUrl + documentId + '?page=' + currentPage + '&width=' + targetWidth;
		
		if(pageContent.find("img[data-page='"+currentPage+"']").length > 1) {
			//The image for the requested page has already been loaded once. Show the image instead of requesting it from the server.
			
			//Remove the displayedpage class from the last page.
			pageContent.find(".displayedpage").removeClass("displayedpage");
			
			//Add the displayedpage class to the current page.
			$("img[data-page='"+currentPage+"']").addClass("displayedpage");
		}
		else {
			//The image for the requested page has not yet been loaded. Request the page from the server.
			$("#pageContent").append('<img id="displayedpage" src="'+page_url+'">');
		}
		...
	}
});
<script>

Thanks for the suggestion.
I already tried to implement image caching in the reader, but it's not working well. Your code will be helpful.
However I'll try to keep the reader as simple as possible as it's the easiest way to achieve a maximum compatibility with different devices. And because I'm not a big fan of Javascript development. So I'm not sold yet on the swiping and the use of JQuery, we'll see...

Regarding the HTML templates, the problem is not really the use of a template engine, as some very simple ones are available (I'm thinking Mustache for instance), but rather the way the HTML is currently generated: heavily coupled with the code.

"heavily coupled": Right, I was afraid of that. I understand.