Multi-progress bar support.

Source code can be found for this at:

https://github.com/j-ulrich/jquery-ui-multiprogressbar

www/conservancy/static/css/jquery.ui.multiprogressbar.css

@@ -0,0 +1,18 @@
+@CHARSET "UTF-8";
+
+/*
+ * jQuery UI Multi-Progress Bar 1.1.0
+ * http://github.com/j-ulrich/jquery-ui-multiprogressbar
+ *
+ * Copyright (c) 2012 Jochen Ulrich <jochenulrich@t-online.de>
+ * Licensed under the MIT license (MIT-LICENSE.txt).
+ */
+
+.ju-multiprogressbar .ui-progressbar-value {
+	float: left;
+}
+
+.ju-multiprogressbar .ju-multiprogressbar-valuetext {
+	margin-top: 0.3em;
+	text-align: center;
+}

www/conservancy/static/js/jquery.outerhtml.js

@@ -0,0 +1,20 @@
+/*
+ * jQuery outerHTML
+ *
+ * Copyright (c) 2008 Ca-Phun Ung <caphun at yelotofu dot com>
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * http://yelotofu.com/labs/jquery/snippets/outerhtml/
+ *
+ * outerHTML is based on the outerHTML work done by Brandon Aaron
+ * But adds the ability to replace an element.
+ */
+
+(function($) {
+	$.fn.outerHTML = function(s) {
+		return (s) 
+			? this.before(s).remove() 
+			: $('<p>').append(this.eq(0).clone()).html();
+	}
+})(jQuery);

www/conservancy/static/js/jquery.ui.multiprogressbar.js

@@ -0,0 +1,188 @@
+/*jslint white: true vars: true browser: true todo: true */
+/*jshint camelcase:true, plusplus:true, forin:true, noarg:true, noempty:true, eqeqeq:true, bitwise:true, strict:true, undef:true, unused:true, curly:true, browser:true, devel:true, maxerr:100, white:false, onevar:false */
+/*global jQuery:true $:true */
+
+/* jQuery UI Multi-Progress Bar 1.1.0
+ * http://github.com/j-ulrich/jquery-ui-multiprogressbar
+ *
+ * Copyright (c) 2012 Jochen Ulrich <jochenulrich@t-online.de>
+ * Licensed under the MIT license (MIT-LICENSE.txt).
+ */
+
+/**
+ * @file jQuery UI Multi-Progress Bar
+ * @version 1.0
+ * @copyright 2012 Jochen Ulrich
+ * @license MIT (MIT-LICENSE.txt)
+ */
+
+(function($) {
+	"use strict";
+	
+	/**
+	 * Constructs a multiprogressbar.
+	 * @name multiprogressbar
+	 * @public
+	 * @function
+	 * @memberOf jQuery.ju
+	 */
+	$.widget("ju.multiprogressbar", 
+	
+	/**
+	 * @lends jQuery.ju.multiprogressbar.prototype
+	 */
+	{
+		
+		// Options
+		/**
+		 * Default values of the options.
+		 * @since 1.0
+		 */
+		options: {
+			parts: [{value: 0, barClass: "", text: false, textClass: ""}]
+		},
+		
+		/**
+		 * Constructor for multiprogressbars.
+		 * @private
+		 * @author julrich
+		 * @since 1.0
+		 */
+		_create: function() {
+			var self = this;
+			self.element.progressbar({value: 0, disabled: self.options.disabled}); // Creates one part with width 0%
+			self.element.addClass("ju-multiprogressbar");
+			
+			// Use the part generated by jQuery UI progressbar as template for the other parts
+			self._partTemplate = self._getPartElements().outerHTML();
+			self._createParts(self.options.parts);
+			$.extend(self,{
+				created: true
+			});
+		},
+		
+		/**
+		 * @returns {Object} a jQuery object containing all part elements.
+		 * @private
+		 * @author julrich
+		 * @since 1.0
+		 */
+		_getPartElements: function() {
+			return this.element.children(".ui-progressbar-value");
+		},
+		
+		/**
+		 * (Re)creates the markup of the parts.
+		 * @param {Array} parts - Array of part objects defining the properties of the parts to be created.
+		 * @fires multiprogressbar#change when the function is called <b>after</b> the creation of the multiprogressbar
+		 * (i.e. the event is not fired during the creation).
+		 * @fires multiprogressbar#complete when the total progress reaches or exceeds 100%.
+		 * @private
+		 * @author julrich
+		 * @since 1.0
+		 */
+		_createParts: function(parts) {
+			var self = this;
+			
+			self._getPartElements().remove(); // Remove all existing parts and then rebuild them
+			var first = true;
+			var lastVisibleElement = null;
+			var totalValue = 0;
+			$.each(parts, function(i, part) {
+				var partElement = $(self._partTemplate).appendTo(self.element);
+				
+				if (first === false) {
+					partElement.removeClass("ui-corner-left");
+				}
+				if (part.value > 0 && totalValue < 100) {
+					first = false;
+					// Check if the part would exceed the 100% and cut it at 100%
+					part.value = totalValue+part.value > 100 ? 100-totalValue : part.value; 
+					partElement.css('width', part.value+"%").show();
+					lastVisibleElement = partElement;
+					totalValue += part.value;
+				}
+				else {
+					// Hide part if the progress is <= 0 or if we exceeded 100% already 
+					part.value = 0;
+					partElement.hide();
+				}
+				
+				partElement.addClass(part.barClass);
+				
+				if (part.text !== undefined && part.text !== null && part.text !== false) {
+					var textForPart;
+					if (part.text === true) {
+						textForPart = Math.round(part.value)+"%";
+					}
+					else if ($.trim(part.text) !== "") {
+						textForPart = part.text;
+					}
+					$('<div></div>').addClass("ju-multiprogressbar-valuetext").text(textForPart).addClass(part.textClass).appendTo(partElement);
+				}
+			});
+			if (self.created === true) { // Don't trigger "change" when we are creating the progressbar for the first time 
+				self._trigger("change", null, {parts: parts});
+			}
+			if (totalValue >= 99.9) {
+				lastVisibleElement.addClass("ui-corner-right");
+				// Trigger complete
+				self._trigger("complete");
+			}
+		},
+		
+		/**
+		 * Restores the element to it's original state.
+		 * @public
+		 * @author julrich
+		 * @since 1.0
+		 */
+		destroy: function() {
+			var self = this;
+			self._getPartElements().remove();
+			self.element.progressbar("destroy");
+		},
+		
+		/**
+		 * Changes an option.
+		 * @param {String} option - name of the option to be set.
+		 * @param value - new value for the option.
+		 * @private
+		 * @author julrich
+		 * @since 1.0
+		 */
+		_setOption: function(option, value) {
+			var self = this;
+			$.Widget.prototype._setOption.apply( self, arguments );
+			
+			switch(option) {
+			case "parts":
+				self._createParts(value);
+				break;
+			case "dummy":
+				break;
+			default:
+				break;
+			}
+		},
+		
+		/**
+		 * @return {Numeric} the sum of the progress of all visible parts.
+		 * <b>Note:</b> When the sum of the progress of the parts exceeds 100, the progress
+		 * will be truncated at 100 and the value of successive parts will be set to 0. This means
+		 * that this function will always return a value in the range [0,100].
+		 * @public
+		 * @author julrich
+		 * @since 1.0
+		 */
+		total: function() {
+			var self = this;
+			var totalValue = 0;
+			$.each(self.options.parts, function(i, part) {
+				totalValue += part.value;
+			});
+			
+			return totalValue;
+		}
+	});
+}(jQuery));

www/conservancy/templates/base_conservancy.html

@@ -10,8 +10,11 @@
     <link rel="stylesheet" type="text/css" media="screen, projection" href="/conservancy.css" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="stylesheet" href="/css/jquery-ui-1.8.22.custom.css" />
+    <link rel="stylesheet" href="/css/jquery.ui.multiprogressbar.css" />
     <script type="text/javascript" src="/js/jquery-1.7.2.js"></script>
     <script type="text/javascript" src="/js/jquery-ui-1.8.22.custom.min.js"></script>
+    <script type="text/javascript" src="/js/jquery.outerhtml.js"></script>
+    <script type="text/javascript" src="/js/jquery.ui.multiprogressbar.js"></script>
     <script type="text/javascript" src="/supporter-page.js"></script>
     {% block head %}{% endblock %}
   </head>