mirrors/calibre-web
1
0
Fork 0
mirror of https://github.com/janeczku/calibre-web synced 2025-10-31 07:13:02 +00:00
Code Issues Releases Wiki Activity

New progress bar

Browse Source
This commit is contained in:
OzzieIsaacs
2017-11-29 15:54:17 +01:00
parent 03ab03f06e
commit f890fc1553
5 changed files with 70 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
cps/helper.py
View File

@@ -281,7 +281,8 @@ def get_valid_filename(value, replace_whitespace=True):
if replace_whitespace: if replace_whitespace:
#*+:\"/<>? are replaced by _ #*+:\"/<>? are replaced by _
value = re.sub(r'[\*\+:\\\"/<>\?]+', u'_', value, flags=re.U) value = re.sub(r'[\*\+:\\\"/<>\?]+', u'_', value, flags=re.U)
# pipe has to be replaced with comma
value = re.sub(r'[\|]+', u',', value, flags=re.U)
value = value[:128] value = value[:128]
if not value: if not value:
raise ValueError("Filename cannot be empty") raise ValueError("Filename cannot be empty")

37
cps/static/css/kthoom.css
View File

@@ -179,3 +179,40 @@ th {
.dark-theme .overlay { .dark-theme .overlay {
background-color: rgba(0,0,0,0.8); background-color: rgba(0,0,0,0.8);
} }
.view {
padding-top:0px;
}
#Progress {
margin: auto;
width: 80%;
background-color: #ddd;
display: inline-block;
margin-top: 5px;
}
#meter {
width: 0%;
height: 5px;
background-color: #1C5484;
}
#meter2 {
width: 0%;
height: 15px;
background-color: #028138;
}
#page {
text-align:left;
margin-top:-20px;
font-size:80%;
width: 0%;
}
#progress_title {
text-align:right;
margin-top:-15px;
font-size:80%;
}

185
cps/static/js/kthoom.js
View File

@@ -56,12 +56,10 @@ kthoom.Key = {
}; };
// global variables // global variables
// var unarchiver = null;
var currentImage = 0; var currentImage = 0;
var imageFiles = []; var imageFiles = [];
var imageFilenames = []; var imageFilenames = [];
var totalImages = 0; var totalImages = 0;
var lastCompletion = 0;
var settings = { var settings = {
hflip: false, hflip: false,
@@ -71,8 +69,6 @@ var settings = {
theme: "light" theme: "light"
}; };
// var canKeyNext = true, canKeyPrev = true;
kthoom.saveSettings = function() { kthoom.saveSettings = function() {
localStorage.kthoomSettings = JSON.stringify(settings); localStorage.kthoomSettings = JSON.stringify(settings);
}; };
@@ -102,35 +98,6 @@ kthoom.setSettings = function() {
}); });
}; };
/* var createURLFromArray = function(array, mimeType) {
var offset = array.byteOffset, len = array.byteLength;
var url;
var blob;
// TODO: Move all this browser support testing to a common place
// and do it just once.
// Blob constructor, see http://dev.w3.org/2006/webapi/FileAPI/#dfn-Blob.
if (typeof Blob === "function") {
blob = new Blob([array], {type: mimeType});
} else {
throw "Browser support for Blobs is missing.";
}
if (blob.slice) {
blob = blob.slice(offset, offset + len, mimeType);
} else {
throw "Browser support for Blobs is missing.";
}
if ((typeof URL !== "function" && typeof URL !== "object") ||
typeof URL.createObjectURL !== "function") {
throw "Browser support for Object URLs is missing";
}
return URL.createObjectURL(blob);
};*/
// Stores an image filename and its data: URI. // Stores an image filename and its data: URI.
kthoom.ImageFile = function(file) { kthoom.ImageFile = function(file) {
@@ -141,136 +108,32 @@ kthoom.ImageFile = function(file) {
kthoom.initProgressMeter = function() { kthoom.initProgressMeter = function() {
var svgns = "http://www.w3.org/2000/svg"; $("#Progress").removeClass("hide");
var pdiv = $("#progress")[0]; $("#Progress").click(function(e) {
var svg = document.createElementNS(svgns, "svg"); var page = Math.max(1, Math.ceil((e.offsetX / $(this).width()) * totalImages)) - 1;
svg.style.width = "100%";
svg.style.height = "100%";
var defs = document.createElementNS(svgns, "defs");
var patt = document.createElementNS(svgns, "pattern");
patt.id = "progress_pattern";
patt.setAttribute("width", "30");
patt.setAttribute("height", "20");
patt.setAttribute("patternUnits", "userSpaceOnUse");
var rect = document.createElementNS(svgns, "rect");
rect.setAttribute("width", "100%");
rect.setAttribute("height", "100%");
rect.setAttribute("fill", "#cc2929");
var poly = document.createElementNS(svgns, "polygon");
poly.setAttribute("fill", "yellow");
poly.setAttribute("points", "15,0 30,0 15,20 0,20");
patt.appendChild(rect);
patt.appendChild(poly);
defs.appendChild(patt);
svg.appendChild(defs);
var g = document.createElementNS(svgns, "g");
var outline = document.createElementNS(svgns, "rect");
outline.setAttribute("y", "1");
outline.setAttribute("width", "100%");
outline.setAttribute("height", "15");
outline.setAttribute("fill", "#777");
outline.setAttribute("stroke", "white");
outline.setAttribute("rx", "5");
outline.setAttribute("ry", "5");
g.appendChild(outline);
var title = document.createElementNS(svgns, "text");
title.id = "progress_title";
title.appendChild(document.createTextNode("0%"));
title.setAttribute("y", "13");
title.setAttribute("x", "99.5%");
title.setAttribute("fill", "white");
title.setAttribute("font-size", "12px");
title.setAttribute("text-anchor", "end");
g.appendChild(title);
var meter = document.createElementNS(svgns, "rect");
meter.id = "meter";
meter.setAttribute("width", "0%");
meter.setAttribute("height", "17");
meter.setAttribute("fill", "url(#progress_pattern)");
meter.setAttribute("rx", "5");
meter.setAttribute("ry", "5");
var meter2 = document.createElementNS(svgns, "rect");
meter2.id = "meter2";
meter2.setAttribute("width", "0%");
meter2.setAttribute("height", "17");
meter2.setAttribute("opacity", "0.8");
meter2.setAttribute("fill", "#007fff");
meter2.setAttribute("rx", "5");
meter2.setAttribute("ry", "5");
g.appendChild(meter);
g.appendChild(meter2);
var page = document.createElementNS(svgns, "text");
page.id = "page";
page.appendChild(document.createTextNode("0/0"));
page.setAttribute("y", "13");
page.setAttribute("x", "0.5%");
page.setAttribute("fill", "white");
page.setAttribute("font-size", "12px");
g.appendChild(page);
svg.appendChild(g);
pdiv.appendChild(svg);
svg.onclick = function(e) {
var l = 0;
for (var x = pdiv; x !== document.documentElement; x = x.parentNode) l += x.offsetLeft;
var page = Math.max(1, Math.ceil(((e.clientX - l) / pdiv.offsetWidth) * totalImages)) - 1;
currentImage = page; currentImage = page;
updatePage(); updatePage();
}; });
}; };
kthoom.setProgressMeter = function(pct, optLabel) { kthoom.setProgressMeter = function(optLabel) {
pct = (pct * 100); var pct = imageFiles.length / totalImages * 100;
var part = 1 / totalImages; if (pct === 100) {
var remain = ((pct - lastCompletion) / 100) / part; //smartpct = 100;
var fract = Math.min(1, remain); getElem("progress_title").innerHTML = "Complete";
var smartpct = ((imageFiles.length / totalImages) + (fract * part)) * 100; } else {
if (totalImages === 0) smartpct = pct;
// + Math.min((pct - lastCompletion), 100/totalImages * 0.9 + (pct - lastCompletion - 100/totalImages)/2, 100/totalImages);
var oldval = parseFloat(getElem("meter").getAttribute("width"));
if (isNaN(oldval)) oldval = 0;
var weight = 0.5;
smartpct = ((weight * smartpct) + ((1 - weight) * oldval));
if (pct === 100) smartpct = 100;
if (!isNaN(smartpct)) {
getElem("meter").setAttribute("width", smartpct + "%");
}
var title = getElem("progress_title");
while (title.firstChild) title.removeChild(title.firstChild);
var labelText = pct.toFixed(2) + "% " + imageFiles.length + "/" + totalImages + ""; var labelText = pct.toFixed(2) + "% " + imageFiles.length + "/" + totalImages + "";
if (optLabel) { if (optLabel) {
labelText = optLabel + " " + labelText; labelText = optLabel + " " + labelText;
} }
title.appendChild(document.createTextNode(labelText)); getElem("progress_title").innerHTML=labelText;
getElem("meter2").setAttribute("width",
100 * (totalImages === 0 ? 0 : ((currentImage + 1) / totalImages)) + "%");
var titlePage = getElem("page");
while (titlePage.firstChild) titlePage.removeChild(titlePage.firstChild);
titlePage.appendChild(document.createTextNode( (currentImage + 1) + "/" + totalImages ));
if (pct > 0) {
//getElem('nav').className = '';
getElem("progress").className = "";
} }
if (!isNaN(pct)) {
getElem("meter").style.width = pct + "%";
}
getElem("meter2").style.width= 100 * (totalImages === 0 ? 0 : ((currentImage + 1) / totalImages)) + "%";
getElem("page").innerHTML=(currentImage + 1) + "/" + totalImages ;
}; };
function loadFromArrayBuffer(ab) { function loadFromArrayBuffer(ab) {
@@ -292,10 +155,10 @@ function loadFromArrayBuffer(ab) {
"</li>" "</li>"
); );
} }
var percentage = (ab.page + 1) / (ab.last + 1); // var percentage = (ab.page + 1) / (ab.last + 1);
totalImages = ab.last + 1; totalImages = ab.last + 1;
kthoom.setProgressMeter(percentage, "Unzipping"); kthoom.setProgressMeter("Unzipping");
lastCompletion = percentage * 100; // lastCompletion = percentage * 100;
// display first page if we haven't yet // display first page if we haven't yet
if (imageFiles.length === currentImage + 1) { if (imageFiles.length === currentImage + 1) {
@@ -305,12 +168,8 @@ function loadFromArrayBuffer(ab) {
function updatePage() { function updatePage() {
var title = getElem("page"); getElem("page").innerHTML=(currentImage + 1) + "/" + totalImages ;
while (title.firstChild) title.removeChild(title.firstChild); getElem("meter2").style.width= 100 * (totalImages === 0 ? 0 : ((currentImage + 1) / totalImages)) + "%";
title.appendChild(document.createTextNode( (currentImage + 1 ) + "/" + totalImages ));
getElem("meter2").setAttribute("width",
100 * (totalImages === 0 ? 0 : ((currentImage + 1 ) / totalImages)) + "%");
if (imageFiles[currentImage]) { if (imageFiles[currentImage]) {
setImage(imageFiles[currentImage].dataURI); setImage(imageFiles[currentImage].dataURI);
} else { } else {

16
cps/templates/readcbr.html
View File

@@ -25,10 +25,10 @@
</head> </head>
<body> <body>
<div id="sidebar"> <div id="sidebar">
<div id="panels"> <!--div id="panels"-->
<!-- <a id="show-Toc" class="show_view icon-list-1 active" data-view="Toc">TOC</a> --> <!-- <a id="show-Toc" class="show_view icon-list-1 active" data-view="Toc">TOC</a> -->
<!-- <a id="show-Bookmarks" class="show_view icon-bookmark" data-view="Bookmarks">Bookmarks</a> --> <!-- <a id="show-Bookmarks" class="show_view icon-bookmark" data-view="Bookmarks">Bookmarks</a> -->
</div> <!--/div-->
<div id="tocView" class="view"> <div id="tocView" class="view">
<ul id="thumbnails"></ul> <ul id="thumbnails"></ul>
</div> </div>
@@ -47,18 +47,14 @@
<span id="title-seperator">&nbsp;&nbsp;–&nbsp;&nbsp;</span> <span id="title-seperator">&nbsp;&nbsp;–&nbsp;&nbsp;</span>
<span id="chapter-title"></span> <span id="chapter-title"></span>
</div> </div>
<div id="Progress" class="hide">
<div id="meter2"></div><div class="progress_title" id="progress_title" ></div>
<div id="meter"></div><div class="page" id="page" ></div>
</div>
<div id="title-controls"> <div id="title-controls">
<a id="setting" class="icon-cog">Settings</a> <a id="setting" class="icon-cog">Settings</a>
<a id="fullscreen" class="icon-resize-full">Fullscreen</a> <a id="fullscreen" class="icon-resize-full">Fullscreen</a>
</div> </div>
<div id="progress" class="hide"></div>
<div class="progress2" style="display:none">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
</div> </div>
<div id="mainContent"> <div id="mainContent">

2
cps/web.py
View File

@@ -608,7 +608,7 @@ def modify_database_object(input_elements, db_book_object, db_object, db_session
# if no element is found add it # if no element is found add it
if new_element is None: if new_element is None:
if db_type == 'author': if db_type == 'author':
new_element = db_object(add_element, add_element, "") new_element = db_object(add_element, add_element.replace('|',','), "")
elif db_type == 'series': elif db_type == 'series':
new_element = db_object(add_element, add_element) new_element = db_object(add_element, add_element)
elif db_type == 'custom': elif db_type == 'custom':