NunoSempere/calibre-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 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
Show Stats 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:
#*+:\"/<>? are replaced by _
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]
if not value:
raise ValueError("Filename cannot be empty")

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

@ -179,3 +179,40 @@ th {
.dark-theme .overlay {
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
// var unarchiver = null;
var currentImage = 0;
var imageFiles = [];
var imageFilenames = [];
var totalImages = 0;
var lastCompletion = 0;
var settings = {
hflip: false,
@ -71,8 +69,6 @@ var settings = {
theme: "light"
};
// var canKeyNext = true, canKeyPrev = true;
kthoom.saveSettings = function() {
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.
kthoom.ImageFile = function(file) {
@ -141,136 +108,32 @@ kthoom.ImageFile = function(file) {
kthoom.initProgressMeter = function() {
var svgns = "http://www.w3.org/2000/svg";
var pdiv = $("#progress")[0];
var svg = document.createElementNS(svgns, "svg");
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;
$("#Progress").removeClass("hide");
$("#Progress").click(function(e) {
var page = Math.max(1, Math.ceil((e.offsetX / $(this).width()) * totalImages)) - 1;
currentImage = page;
updatePage();
};
});
};
kthoom.setProgressMeter = function(pct, optLabel) {
pct = (pct * 100);
var part = 1 / totalImages;
var remain = ((pct - lastCompletion) / 100) / part;
var fract = Math.min(1, remain);
var smartpct = ((imageFiles.length / totalImages) + (fract * part)) * 100;
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);
kthoom.setProgressMeter = function(optLabel) {
var pct = imageFiles.length / totalImages * 100;
if (pct === 100) {
//smartpct = 100;
getElem("progress_title").innerHTML = "Complete";
} else {
var labelText = pct.toFixed(2) + "% " + imageFiles.length + "/" + totalImages + "";
if (optLabel) {
labelText = optLabel + " " + labelText;
}
title.appendChild(document.createTextNode(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 = "";
getElem("progress_title").innerHTML=labelText;
}
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) {
@ -292,10 +155,10 @@ function loadFromArrayBuffer(ab) {
"</li>"
);
}
var percentage = (ab.page + 1) / (ab.last + 1);
// var percentage = (ab.page + 1) / (ab.last + 1);
totalImages = ab.last + 1;
kthoom.setProgressMeter(percentage, "Unzipping");
lastCompletion = percentage * 100;
kthoom.setProgressMeter("Unzipping");
// lastCompletion = percentage * 100;
// display first page if we haven't yet
if (imageFiles.length === currentImage + 1) {
@ -305,12 +168,8 @@ function loadFromArrayBuffer(ab) {
function updatePage() {
var title = getElem("page");
while (title.firstChild) title.removeChild(title.firstChild);
title.appendChild(document.createTextNode( (currentImage + 1 ) + "/" + totalImages ));
getElem("meter2").setAttribute("width",
100 * (totalImages === 0 ? 0 : ((currentImage + 1 ) / totalImages)) + "%");
getElem("page").innerHTML=(currentImage + 1) + "/" + totalImages ;
getElem("meter2").style.width= 100 * (totalImages === 0 ? 0 : ((currentImage + 1) / totalImages)) + "%";
if (imageFiles[currentImage]) {
setImage(imageFiles[currentImage].dataURI);
} else {

16
cps/templates/readcbr.html
View File

@ -25,10 +25,10 @@
</head>
<body>
<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-Bookmarks" class="show_view icon-bookmark" data-view="Bookmarks">Bookmarks</a> -->
</div>
<!--/div-->
<div id="tocView" class="view">
<ul id="thumbnails"></ul>
</div>
@ -47,18 +47,14 @@
<span id="title-seperator">&nbsp;&nbsp;–&nbsp;&nbsp;</span>
<span id="chapter-title"></span>
</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">
<a id="setting" class="icon-cog">Settings</a>
<a id="fullscreen" class="icon-resize-full">Fullscreen</a>
</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 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 new_element is None:
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':
new_element = db_object(add_element, add_element)
elif db_type == 'custom':