Your comments
I've updated the code to fix the width issue for Firefox.
Thanks!
I'll take a look and see where the Firefox incompatibility is. Thanks for pointing that out!
Here you go, let me know if this works for you:
https://github.com/Justin27482/plextheme-progress
I'm also thinking about trying to add similar to Comixology V2 Theme as well. Thoughts?
So I got bored and couldn't leave it alone. I've also added filter buttons at the top to filter the current page to All, In Progress, Completed and New as well as a counter indicating how many books are visible. I started with the concept by Starcrouz, but switched over to using basic jQuery hide and show functions so that the buttons work without reloads. The page does not refresh after closing the reader overlay, I might look at that later. I've also integrated the DeDup added by Starcrouz, and the progress bars by Jace. You will need to update two files for this to work themeScript.js and comic.css.
Screenshots:
Showing All:
Showing Completed:
Showing In Progress books:
Code for themeScript.js
// Anonymous "self-invoking" function
(function() {
var startingTime = new Date().getTime();
// Load the script
var script = document.createElement("SCRIPT");
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js';
script.type = 'text/javascript';
document.getElementsByTagName("head")[0].appendChild(script);
// Poll for jQuery to come into existance
var checkReady = function(callback) {
if (window.jQuery) {
callback(jQuery);
} else {
window.setTimeout(function() { checkReady(callback); }, 20);
}
};
// Start polling...
checkReady(function($) {
//////////////////////////////////
//Add currently reading condition to comic
//////////////////////////////////
var last_book_name = ""; // Used by the de-duplicator
var last_book_file_format = "";
$('.thumb a img').each(function(){
raw_src = $(this).attr('src')
page_num = '0';
//sort comics from folders
if (raw_src.search("folder") >= 0){
//console.log("raw_src: "+raw_src);
} else {
//extract Comic ID
thing = $(this);
src = $(this).attr('src'); //console.log("source: "+src);
$(this).closest('.thumb').append('');
var comicid = src.split('/'); //console.log("Comic ID: "+comicid[2]);
// START of the de-duplicator (excepted line "last_book_name..." above)
var book_file_format = src.slice(src.lastIndexOf(".")+1, src.lastIndexOf("?")); // CBZ, CBR and PDF or of the book : EPUB, MOBI, AZW, PDF and DJVU
var book_name = src.slice(src.lastIndexOf("/")+1,src.lastIndexOf("."));
// console.log(book_file_format + " / " + book_name)
if(book_name == last_book_name) { // 2 books have the same name (but not the same format...)
if(book_file_format == "pdf") { // PDF format is not welcome if a CBR or CBZ file exists for the same comic
thing.parents('.cellcontainer').hide(); // hide the duplicate book if it is in pdf
console.log('duplicate book file hidden : ' + decodeURI(book_name) + '.pdf');
}
if(last_book_file_format == "pdf") { // usefull when user watch the "latest comics" page
thing.parents('.cellcontainer').prev().hide(); // hide the duplicate book if it is in pdf
console.log('duplicate book file hidden : ' + decodeURI(book_name) + '.pdf');
}
}
last_book_name = book_name // memorize the book name
last_book_file_format = book_file_format // memorize the book format
// END of the de-duplicator
//get comic meta from server
json_url = window.location.origin+"/user-api/bookmark?docId="+comicid[2]; //console.log("url: "+json_url);
$.getJSON( json_url, function() {
//console.log( "json_url success" );
}).done(function( data ) {
current_this = thing;
if (data != null){
var items = [];
var c_id = '';
var c_pages = '';
var page_num = '';
$.each( data, function( key, val ) {
if (key == 'docId'){ c_id = val;}
if (key == 'mark'){ page_num = val;}
});
if (page_num != '0'){
// get total pages from server
content_url = window.location.origin+"/comicdetails/"+c_id; //console.log("url: "+content_url);
$.get( content_url, function() {
//console.log( "content_url success" );
}).done(function( data ) {
details = $('<details>').append($.parseHTML(data));
size_div = $('#details_size', details).html();
c_pages = size_div.match(/\d+/)[0];
thumb = $("img[src*='"+c_id+"']").closest('.thumb');
thumb.css({ 'display' : 'flex',
'justify-content' : 'flex-end',
'flex-direction' : 'column'});
base_thumb_content = thumb.html();
// set reading if page_num < total_pages
if (page_num >= (c_pages - 1)) {
progress_percent = 100;
progress_string = "Completed";
progress_color = "rgba(213, 92, 92,0.7)";
thumb.parent().parent().addClass("Completed") // Add Completed Class To cellcontainer for Book
} else {
progress_percent = ((page_num/c_pages) * 100);
page_int = Number(page_num);
progress_string = (page_int++) + " of " + c_pages;
progress_color = "rgba(50, 200, 50, 0.7)"
thumb.parent().parent().addClass("InProgress") // Add InProgress Class To cellcontainer for Book
}
//Add Progressbar / page count to book Thumb
modified_thumb_content = "<div class="progress-container" style="position: absolute; z-index: 9; width: -webkit-fill-available; background: rgba(00, 00, 00, 0.6)">" +
"<div class="progress_percent" style="bottom: 0px; left: 0px; background: "+ progress_color +"; width: " + progress_percent + "%;"> </div>" +
"<div class="progress_string" style="bottom: 0px; left: 0px; position: absolute; color: #FFF; width: 100%; height: 100%;">" + progress_string + "</div>" +
"</div>" + base_thumb_content;
// console.log(modified_thumb_content);
thumb.html(modified_thumb_content);
});
}
//console.log("page_num "+page_num);
} else { //If we don't have bookmark data it is an unread book, lets mark those too!
content_url = window.location.origin+"/comicdetails/"+comicid[2]; //console.log("url: "+content_url);
$.get( content_url, function() {
//console.log( "content_url success" );
}).done(function( data ) {
details = $('<details>').append($.parseHTML(data));
size_div = $('#details_size', details).html();
c_pages = size_div.match(/\d+/)[0];
thumb = $("img[src*='"+comicid[2]+"']").closest('.thumb');
thumb.css({ 'display' : 'flex',
'justify-content' : 'flex-end',
'flex-direction' : 'column'});
base_thumb_content = thumb.html();
// set reading if page_num < total_pages
progress_percent = 100;
progress_string = "Unread 0 of " + c_pages;
progress_color = "rgba(92, 92, 213, 0.7)"
thumb.parent().parent().addClass("New") // Add New Class To cellcontainer for Book
//Add Progressbar to book Thumbnail
modified_thumb_content = "<div class="progress-container" style="position: absolute; z-index: 9; width: -webkit-fill-available; background: rgba(00, 00, 00, 0.6)">" +
"<div class="progress_percent" style="bottom: 0px; left: 0px; background: "+ progress_color +"; width: " + progress_percent + "%;"> </div>" +
"<div class="progress_string" style="bottom: 0px; left: 0px; position: absolute; color: #FFF; width: 100%; height: 100%;">" + progress_string + "</div>" +
"</div>" + base_thumb_content;
// console.log(modified_thumb_content);
thumb.html(modified_thumb_content);
});
}
}).fail(function(){});
}
//console.log("triggered");
});
//Add View Filter Buttons
$('<li><a title="All" href="#" onclick="$(\'.InProgress\').show();$(\'.New\').show();$(\'.Completed\').show();$(\'#VisCount\').text($(\'.cellcontainer:visible\').length);return false;"><i class="glyphicon all"></i></a></li><li><a title="In Progress" href="#" onclick="$(\'.InProgress\').show();$(\'.New\').hide();$(\'.Completed\').hide();$(\'#VisCount\').text($(\'.cellcontainer:visible\').length);return false;"><i class="glyphicon eye"></i></a></li><li><a title="Unread" href="#" onclick="$(\'.InProgress\').hide();$(\'.New\').show();$(\'.Completed\').hide();$(\'#VisCount\').text($(\'.cellcontainer:visible\').length);return false;"><i class="glyphicon unread"></i></a></li><li><a title="Completed" href="#" onclick="$(\'.InProgress\').hide();$(\'.New\').hide();$(\'.Completed\').show();$(\'#VisCount\').text($(\'.cellcontainer:visible\').length);return false;"><i class="glyphicon book-read"></i></a></li>').insertAfter('.navigation li:eq(2)');
$('<li style="padding-top: 5%;"><span><div style="float:left"> Showing </div><div id="VisCount" style="float:left"></div><div style="float:left"> of </div><div id="TotalCount" style="float:left"></div></span></li>').insertBefore('.navigation li:eq(2)');
$("#VisCount").text($(".cellcontainer:visible").length); //Set Visible books on page.
$("#TotalCount").text($(".cellcontainer:visible").length); //Set total books on page.
});
})();
// end Anonymous "self-invoking" function</details></details>Code for comic.css (styles for Glyphicons font)
@font-face {
font-family: "Glyphicons Regular";
src: url(./static/glyphicons.woff) format("woff");
font-weight: 400;
font-style: normal
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: Glyphicons Regular;
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.glyphicon.home:before {
content: "\E021"
}
.glyphicon.heart:before {
content: "\E020"
}
.glyphicon.unread:before {
content: "\E072"
}
.glyphicon.eye:before {
content: "\E052"
}
.glyphicon.book-read:before {
content: "\E088"
}
.glyphicon.all:before {
content: "\E464"
}
.glyphicon.chevron-left:before {
content: "\E225"
}
.glyphicon.settings:before {
content: "\E281"
}
.glyphicon.random:before {
content: "\E084"
}
.glyphicon.log-out:before {
content: "\E388"
}Hopefully this helps someone, if this doesn't work it is probably due to the cut and paste into the forum. I'll look into uploading to GitHub if need be.
Sweet Mod. I hope you don't mind, but I adjusted it slightly and added colors (red, green, blue) for Completed, In Progress and Unread. I also added total pages for New books as sometimes I want an idea of what I'm getting into before starting a book.
Screenshot:
Adjusted Code:
// Anonymous "self-invoking" function
(function() {
var startingTime = new Date().getTime();
// Load the script
var script = document.createElement("SCRIPT");
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js';
script.type = 'text/javascript';
document.getElementsByTagName("head")[0].appendChild(script);
// Poll for jQuery to come into existance
var checkReady = function(callback) {
if (window.jQuery) {
callback(jQuery);
} else {
window.setTimeout(function() { checkReady(callback); }, 20);
}
};
// Start polling...
checkReady(function($) {
//////////////////////////////////
//Add currently reading condition to comic
//////////////////////////////////
$('.thumb a img').each(function(){
raw_src = $(this).attr('src')
page_num = '0';
//sort comics from folders
if (raw_src.search("folder") >= 0){
//console.log("raw_src: "+raw_src);
} else {
//extract Comic ID
thing = $(this);
src = $(this).attr('src'); //console.log("source: "+src);
$(this).closest('.thumb').append('');
var comicid = src.split('/'); //console.log("Comic ID: "+comicid[2]);
//get comic meta from server
json_url = window.location.origin+"/user-api/bookmark?docId="+comicid[2]; //console.log("url: "+json_url);
$.getJSON( json_url, function() {
//console.log( "json_url success" );
}).done(function( data ) {
current_this = thing;
if (data != null){
var items = [];
var c_id = '';
var c_pages = '';
var page_num = '';
$.each( data, function( key, val ) {
if (key == 'docId'){ c_id = val;}
if (key == 'mark'){ page_num = val;}
});
if (page_num != '0'){
// get total pages from server
content_url = window.location.origin+"/comicdetails/"+c_id; //console.log("url: "+content_url);
$.get( content_url, function() {
//console.log( "content_url success" );
}).done(function( data ) {
details = $('<details>').append($.parseHTML(data));
size_div = $('#details_size', details).html();
c_pages = size_div.match(/\d+/)[0];
thumb = $("img[src*='"+c_id+"']").closest('.thumb');
thumb.css({ 'display' : 'flex',
'justify-content' : 'flex-end',
'flex-direction' : 'column'});
base_thumb_content = thumb.html();
// set reading if page_num < total_pages
if (page_num >= (c_pages - 1)) {
progress_percent = 100;
progress_string = "Completed";
progress_color = "rgba(213, 92, 92,0.7)";
} else {
progress_percent = ((page_num/c_pages) * 100);
page_int = Number(page_num);
progress_string = (page_int++) + " of " + c_pages;
progress_color = "rgba(50, 200, 50, 0.7)"
}
modified_thumb_content = "<div class='progress-container' style='position: absolute; z-index: 9; width: -webkit-fill-available; background: rgba(00, 00, 00, 0.6)'>" +
"<div class='progress_percent' style='bottom: 0px; left: 0px; background: "+ progress_color +"; width: " + progress_percent + "%;'> </div>" +
"<div class='progress_string' style='bottom: 0px; left: 0px; position: absolute; color: #FFF; width: 100%; height: 100%;'>" + progress_string + "</div>" +
"</div>" + base_thumb_content;
console.log(modified_thumb_content);
thumb.html(modified_thumb_content);
});
}
//console.log("page_num "+page_num);
} else {
content_url = window.location.origin+"/comicdetails/"+comicid[2]; //console.log("url: "+content_url);
$.get( content_url, function() {
//console.log( "content_url success" );
}).done(function( data ) {
details = $('<details>').append($.parseHTML(data));
size_div = $('#details_size', details).html();
c_pages = size_div.match(/\d+/)[0];
thumb = $("img[src*='"+comicid[2]+"']").closest('.thumb');
thumb.css({ 'display' : 'flex',
'justify-content' : 'flex-end',
'flex-direction' : 'column'});
base_thumb_content = thumb.html();
// set reading if page_num < total_pages
progress_percent = 100;
progress_string = "Unread 0 of " + c_pages;
progress_color = "rgba(92, 92, 213, 0.7)"
modified_thumb_content = "<div class='progress-container' style="position: absolute; z-index: 9; width: -webkit-fill-available; background: rgba(00, 00, 00, 0.6)'>" +
"<div class='progress_percent' style="bottom: 0px; left: 0px; background: "+ progress_color +"; width: " + progress_percent + "%;'> </div>" +
"<div class='progress_string' style="bottom: 0px; left: 0px; position: absolute; color: #FFF; width: 100%; height: 100%;'>" + progress_string + "</div>" +
"</div>" + base_thumb_content;
console.log(modified_thumb_content);
thumb.html(modified_thumb_content);
});
}
}).fail(function(){});
}
//console.log("triggered");
});
});
})();
// end Anonymous "self-invoking" function
Customer support service by UserEcho
Did you open both ports in and out? Are you sure you opened the firewall on the correct "network type"? Remember, Windows autodetects the type of network, so it may be that you opened the ports on the private network, but for some strange reason it believes your lan is a public network and it is still blocking.