You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Lidarr/NzbDrone.Web/Views/Settings/Test.cshtml

136 lines
4.3 KiB

<script>
/*
* jQuery doTimeout: Like setTimeout, but better! - v1.0 - 3/3/2010
* http://benalman.com/projects/jquery-dotimeout-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
(function ($) { var a = {}, c = "doTimeout", d = Array.prototype.slice; $[c] = function () { return b.apply(window, [0].concat(d.call(arguments))) }; $.fn[c] = function () { var f = d.call(arguments), e = b.apply(this, [c + f[0]].concat(f)); return typeof f[0] === "number" || typeof f[1] === "number" ? this : e }; function b(l) { var m = this, h, k = {}, g = l ? $.fn : $, n = arguments, i = 4, f = n[1], j = n[2], p = n[3]; if (typeof f !== "string") { i--; f = l = 0; j = n[1]; p = n[2] } if (l) { h = m.eq(0); h.data(l, k = h.data(l) || {}) } else { if (f) { k = a[f] || (a[f] = {}) } } k.id && clearTimeout(k.id); delete k.id; function e() { if (l) { h.removeData(l) } else { if (f) { delete a[f] } } } function o() { k.id = setTimeout(function () { k.fn() }, j) } if (p) { k.fn = function (q) { if (typeof p === "string") { p = g[p] } p.apply(m, d.call(n, i)) === true && !q ? o() : e() }; o() } else { if (k.fn) { j === undefined ? e() : k.fn(j === false); return true } else { e() } } } })(jQuery);
</script>
<script>
(function ($) {
$.fn.episodeProgress = function (episodes, totalEpisodes) {
return this.each(
function () {
var div = $(this);
var progressBar = div.find(".progress");
var width = Math.round(episodes / totalEpisodes * 100);
progressBar.css("width", width + "%");
if (width > 97) {
progressBar.css("-khtml-border-top-right-radius", "7px");
progressBar.css("border-top-right-radius", "7px");
progressBar.css("-moz-border-top-right-radius", "7px");
progressBar.css("-webkit-border-top-right-radius", "7px");
progressBar.css("-khtml-border-bottom-right-radius", "7px");
progressBar.css("border-bottom-right-radius", "7px");
progressBar.css("-moz-border-bottom-right-radius", "7px");
progressBar.css("-webkit-border-bottom-right-radius", "7px");
}
div.find(".progressText").html(episodes + " / " + totalEpisodes);
}
);
};
})(jQuery);
</script>
<style>
/* progress bar container */
.progressbar
{
border:1px solid grey;
-khtml-border-radius:8px;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
width:125px;
height:20px;
position:relative;
color:black;
}
/* apply curves to the progress bar */
.progress
{
-khtml-border-top-left-radius:7px;
border-top-left-radius:7px;
-moz-border-top-left-radius:7px;
-webkit-border-top-left-radius:7px;
-khtml-border-bottom-left-radius:7px;
border-bottom-left-radius:7px;
-moz-border-bottom-left-radius:7px;
-webkit-border-bottom-left-radius:7px;
}
/* color bar */
.progressbar div.progress
{
position:absolute;
width:0;
height:100%;
overflow:hidden;
background-color:#065EFE;
}
/* text on bar */
.progressbar div.progress .progressText{
position:absolute;
text-align:center;
color:white;
}
/* text off bar */
.progressbar div.progressText{
position:absolute;
width:100%;
height:100%;
text-align:center;
}
</style>
<div id="progressbar" class="progressbar">
<div class="progressText"></div>
<div class="progress">
<span class="progressText" style="width: 125px;"></span>
</div>
</div>
<div id="progressbar2" class="progressbar">
<div class="progressText"></div>
<div class="progress">
<span class="progressText" style="width: 125px;"></span>
</div>
</div>
<script>
$(document).ready(function() {
progress(65, 100, 'progressbar');
progress(22, 25, 'progressbar2');
});
function progress(episodes, episodeTotal, elementName) {
var counter = 0;
var max = episodes + 1;
$.doTimeout(20, function () {
if (counter == max) {
return false;
}
$("#" + elementName).episodeProgress(counter, episodeTotal);
counter++;
return true;
});
};
</script>