diff options
Diffstat (limited to 'site/js/bramus')
| -rw-r--r-- | site/js/bramus/jsProgressBarHandler.js | 503 |
1 files changed, 503 insertions, 0 deletions
diff --git a/site/js/bramus/jsProgressBarHandler.js b/site/js/bramus/jsProgressBarHandler.js new file mode 100644 index 0000000..933a95a --- /dev/null +++ b/site/js/bramus/jsProgressBarHandler.js @@ -0,0 +1,503 @@ +/*****************************************************************
+ *
+ * jsProgressBarHandler 0.3.3 - by Bramus! - http://www.bram.us/
+ *
+ * v 0.3.3 - 2008.11.10 - UPD: fixed IE compatibility issue (thanks Kevin - Sep 19 2008 / 6pm)
+ * - UPD: setPercentage now parses the targetPercentage to an Integer to avoid infinite loop (thanks Jack - Sep 07 2008 / 9pm)
+ * - UPD: Moved from Event.Observe(window, 'load', fn) to document.observe('dom:loaded', fn) in order to force people to use an up to date Prototype release.
+ * - UPD: setPercentage now takes an overrideQueue param. If set the current queue is cleared.
+ * - ADD: Added onTick callback event which gets called when the percentage is updated.
+ * - ADD: Added stable (as in "non-crashing") versions of the additions which first surfaced in the (unreleased) 0.3.2 release
+ * Preloading support partially implemented in IE as all versions (IE6,7&8) are quite hard to tame (one time they work, the next reload they don't anymore)
+ * v 0.3.2 - 2008.04.09 (*UNRELEASED*)
+ * - ADD: implemented preloading of images to avoid slight flicker when switching images (BUGGY!)
+ * - ADD: percentage image now has class percentImage and percentage Text now has class percentText; This allows you to style the output easily.
+ * v 0.3.1 - 2008.02.20 - UPD: fixed queue bug when animate was set to false (thanks Jamie Chong)
+ * - UPD: update Prototype to version 1.6.0.2
+ * v 0.3.0 - 2008.02.01 - ADD: animation queue, prevents from the progressbar getting stuck when multiple calls are made during an animation
+ * - UPD: multiple barImages now work properly in Safari
+ * v 0.2.1 - 2007.12.20 - ADD: option : set boxImage
+ * ADD: option : set barImage (one or more)
+ * ADD: option : showText
+ * v 0.2 - 2007.12.13 - SYS: rewrite in 2 classs including optimisations
+ * ADD: Config options
+ * v 0.1 - 2007.08.02 - initial release
+ *
+ * @see http://www.barenakedapp.com/the-design/displaying-percentages on how to create a progressBar Background Image!
+ *
+ * Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
+ *
+ *****************************************************************/
+
+
+ /**
+ * CONFIG
+ * -------------------------------------------------------------
+ */
+
+ // Should jsProgressBarHandler hook itself to all span.progressBar elements? - default : true
+ var autoHook = true;
+
+ // Default Options
+ var defaultOptions = {
+ animate : true, // Animate the progress? - default: true
+ showText : true, // show text with percentage in next to the progressbar? - default : true
+ width : 120, // Width of the progressbar - don't forget to adjust your image too!!!
+ boxImage : 'images/bramus/percentImage.png', // boxImage : image around the progress bar
+ barImage : 'images/bramus/percentImage_back.png', // Image to use in the progressbar. Can be an array of images too.
+ height : 12, // Height of the progressbar - don't forget to adjust your image too!!!
+ onTick : function(pbObj) { return true }
+ }
+
+ /**
+ * NO NEED TO CHANGE ANYTHING BENEATH THIS LINE
+ * -------------------------------------------------------------
+ */
+
+ /**
+ * JS_BRAMUS Object
+ * -------------------------------------------------------------
+ */
+
+ if (!JS_BRAMUS) { var JS_BRAMUS = new Object(); }
+
+
+ /**
+ * ProgressBar Class
+ * -------------------------------------------------------------
+ */
+
+ JS_BRAMUS.jsProgressBar = Class.create();
+
+ JS_BRAMUS.jsProgressBar.prototype = {
+
+
+ /**
+ * Datamembers
+ * -------------------------------------------------------------
+ */
+
+ el : null, // Element where to render the progressBar in
+ id : null, // Unique ID of the progressbar
+ percentage : null, // Percentage of the progressbar
+
+ options : null, // The options
+
+ initialPos : null, // Initial postion of the background in the progressbar
+ initialPerc : null, // Initial percentage the progressbar should hold
+ pxPerPercent : null, // Number of pixels per 1 percent
+
+ backIndex : null, // index in the array of background images currently used
+ numPreloaded : null, // number of images preloaded
+
+ running : null, // is this one running (being animated) or not?
+
+ queue : false, // queue of percentages to set to
+
+
+ /**
+ * Constructor
+ *
+ * @param HTMLElement el
+ * @param string id
+ * @param int percentage
+ * @return void
+ * -------------------------------------------------------------
+ */
+
+ initialize : function(el, percentage, options) {
+
+ // get the options
+ this.options = Object.clone(defaultOptions);
+ Object.extend(this.options, options || {});
+
+ // datamembers from arguments
+ this.el = $(el);
+ this.id = $(el).id;
+ this.percentage = 0; // Set to 0 intially, we'll change this later.
+ this.backIndex = 0; // Set to 0 initially
+ this.numPreloaded = 0; // Set to 0 initially
+ this.running = false; // Set to false initially
+ this.queue = Array(); // Set to empty Array initially
+
+ // datamembers which are calculatef
+ this.imgWidth = this.options.width * 2; // define the width of the image (twice the width of the progressbar)
+ this.initialPos = this.options.width * (-1); // Initial postion of the background in the progressbar (0% is the middle of our image!)
+ this.pxPerPercent = this.options.width / 100; // Define how much pixels go into 1%
+ this.initialPerc = percentage; // Store this, we'll need it later.
+
+ // enfore backimage array
+ if (this.options.barImage.constructor != Array) { // used to be (but doesn't work in Safari): if (this.options.barImage.constructor.toString().indexOf("Array") == -1) {
+ this.options.barImage = Array(this.options.barImage);
+ }
+
+ // preload Images
+ this.preloadImages();
+
+ },
+
+
+ /**
+ * Preloads the images needed for the progressbar
+ *
+ * @return void
+ * -------------------------------------------------------------
+ */
+
+ preloadImages : function() {
+
+ // loop all barimages
+ for (i = 0; i < this.options.barImage.length; i++) {
+
+ // create new image ref
+ var newImage = null;
+ newImage = new Image();
+
+ // set onload, onerror and onabort functions
+ newImage.onload = function() { this.numPreloaded++; }.bind(this);
+ newImage.onerror = function() { this.numPreloaded++; }.bind(this);
+ newImage.onabort = function() { this.numPreloaded++; }.bind(this);
+
+ // set image source (preload it!)
+ newImage.src = this.options.barImage[i];
+
+ // image is in cache
+ if (newImage.complete) {
+ this.numPreloaded++;
+ }
+
+ }
+
+ // if not IE, check if they're loaded
+ if (!Prototype.Browser.IE) {
+ this.checkPreloadedImages();
+
+ // if IE, just init the visuals as it's quite hard to tame all IE's
+ } else {
+ this.initVisuals();
+ }
+
+ },
+
+
+ /**
+ * Check whether all images are preloaded and loads the percentage if so
+ *
+ * @return void
+ * -------------------------------------------------------------
+ */
+
+ checkPreloadedImages : function() {
+
+ // all images are loaded, go init the visuals
+ if (parseInt(this.numPreloaded,10) >= parseInt(this.options.barImage.length,10) ) {
+
+ // initVisuals
+ this.initVisuals();
+
+ // not all images are loaded ... wait a little and then retry
+ } else {
+
+ if ( parseInt(this.numPreloaded,10) <= parseInt(this.options.barImage.length,10) ) {
+ // $(this.el).update(this.id + ' : ' + this.numPreloaded + '/' + this.options.barImage.length);
+ setTimeout(function() { this.checkPreloadedImages(); }.bind(this), 100);
+ }
+
+ }
+
+ },
+
+
+ /**
+ * Intializes the visual output and sets the percentage
+ *
+ * @return void
+ * -------------------------------------------------------------
+ */
+
+ initVisuals : function () {
+
+ // create the visual aspect of the progressBar
+ $(this.el).update(
+ '<img id="' + this.id + '_percentImage" src="' + this.options.boxImage + '" alt="0%" style="width: ' + this.options.width + 'px; height: ' + this.options.height + 'px; background-position: ' + this.initialPos + 'px 50%; background-image: url(' + this.options.barImage[this.backIndex] + '); padding: 0; margin: 0;" class="percentImage" />' +
+ ((this.options.showText == true)?'<span id="' + this.id + '_percentText" class="percentText">0%</span>':''));
+
+ // set the percentage
+ this.setPercentage(this.initialPerc);
+ },
+
+
+ /**
+ * Sets the percentage of the progressbar
+ *
+ * @param string targetPercentage
+ * @param boolen clearQueue
+ * @return void
+ * -------------------------------------------------------------
+ */
+ setPercentage : function(targetPercentage, clearQueue) {
+
+ // if clearQueue is set, empty the queue and then set the percentage
+ if (clearQueue) {
+
+ this.percentage = (this.queue.length != 0) ? this.queue[0] : targetPercentage;
+ this.timer = null;
+ this.queue = [];
+
+ setTimeout(function() { this.setPercentage(targetPercentage); }.bind(this), 10);
+
+ // no clearQueue defined, set the percentage
+ } else {
+
+ // add the percentage on the queue
+ this.queue.push(targetPercentage);
+
+ // process the queue (if not running already)
+ if (this.running == false) {
+ this.processQueue();
+ }
+ }
+
+ },
+
+
+ /**
+ * Processes the queue
+ *
+ * @return void
+ * -------------------------------------------------------------
+ */
+
+ processQueue : function() {
+
+ // stuff on queue?
+ if (this.queue.length > 0) {
+
+ // tell the world that we're busy
+ this.running = true;
+
+ // process the entry
+ this.processQueueEntry(this.queue[0]);
+
+ // no stuff on queue
+ } else {
+
+ // return;
+ return;
+
+ }
+
+ },
+
+
+ /**
+ * Processes an entry from the queue (viz. animates it)
+ *
+ * @param string targetPercentage
+ * @return void
+ * -------------------------------------------------------------
+ */
+
+ processQueueEntry : function(targetPercentage) {
+
+ // get the current percentage
+ var curPercentage = parseInt(this.percentage,10);
+
+ // define the new percentage
+ if ((targetPercentage.toString().substring(0,1) == "+") || (targetPercentage.toString().substring(0,1) == "-")) {
+ targetPercentage = curPercentage + parseInt(targetPercentage);
+ }
+
+ // min and max percentages
+ if (targetPercentage < 0) targetPercentage = 0;
+ if (targetPercentage > 100) targetPercentage = 100;
+
+ // if we don't need to animate, just change the background position right now and return
+ if (this.options.animate == false) {
+
+ // remove the entry from the queue
+ this.queue.splice(0,1); // @see: http://www.bram.us/projects/js_bramus/jsprogressbarhandler/#comment-174878
+
+ // Change the background position (and update this.percentage)
+ this._setBgPosition(targetPercentage);
+
+ // call onTick
+ if (!this.options.onTick(this)) {
+ return;
+ }
+
+ // we're not running anymore
+ this.running = false;
+
+ // continue processing the queue
+ this.processQueue();
+
+ // we're done!
+ return;
+ }
+
+ // define if we need to add/subtract something to the current percentage in order to reach the target percentage
+ if (targetPercentage != curPercentage) {
+ if (curPercentage < targetPercentage) {
+ newPercentage = curPercentage + 1;
+ } else {
+ newPercentage = curPercentage - 1;
+ }
+ callTick = true;
+ } else {
+ newPercentage = curPercentage;
+ callTick = false;
+ }
+
+ // Change the background position (and update this.percentage)
+ this._setBgPosition(newPercentage);
+
+ // call onTick
+ if (callTick && !this.options.onTick(this)) {
+ return;
+ }
+
+ // Percentage not reached yet : continue processing entry
+ if (curPercentage != newPercentage) {
+
+ this.timer = setTimeout(function() { this.processQueueEntry(targetPercentage); }.bind(this), 10);
+
+ // Percentage reached!
+ } else {
+
+ // remove the entry from the queue
+ this.queue.splice(0,1);
+
+ // we're not running anymore
+ this.running = false;
+
+ // unset timer
+ this.timer = null;
+
+ // process the rest of the queue
+ this.processQueue();
+
+ // we're done!
+ return;
+ }
+
+ },
+
+
+ /**
+ * Gets the percentage of the progressbar
+ *
+ * @return int
+ */
+ getPercentage : function(id) {
+ return this.percentage;
+ },
+
+
+ /**
+ * Set the background position
+ *
+ * @param int percentage
+ */
+ _setBgPosition : function(percentage) {
+ // adjust the background position
+ $(this.id + "_percentImage").style.backgroundPosition = (this.initialPos + (percentage * this.pxPerPercent)) + "px 50%";
+
+ // adjust the background image and backIndex
+ var newBackIndex = Math.floor((percentage-1) / (100/this.options.barImage.length));
+
+ if ((newBackIndex != this.backIndex) && (this.options.barImage[newBackIndex] != undefined)) {
+ $(this.id + "_percentImage").style.backgroundImage = "url(" + this.options.barImage[newBackIndex] + ")";
+ }
+
+ this.backIndex = newBackIndex;
+
+ // Adjust the alt & title of the image
+ $(this.id + "_percentImage").alt = percentage + "%";
+ $(this.id + "_percentImage").title = percentage + "%";
+
+ // Update the text
+ if (this.options.showText == true) {
+ $(this.id + "_percentText").update("" + percentage + "%");
+ }
+
+ // adjust datamember to stock the percentage
+ this.percentage = percentage;
+ }
+ }
+
+
+ /**
+ * ProgressHandlerBar Class - automatically create ProgressBar instances
+ * -------------------------------------------------------------
+ */
+
+ JS_BRAMUS.jsProgressBarHandler = Class.create();
+
+
+ JS_BRAMUS.jsProgressBarHandler.prototype = {
+
+
+ /**
+ * Datamembers
+ * -------------------------------------------------------------
+ */
+
+ pbArray : new Array(), // Array of progressBars
+
+
+ /**
+ * Constructor
+ *
+ * @return void
+ * -------------------------------------------------------------
+ */
+
+ initialize : function() {
+
+ // get all span.progressBar elements
+ $$('span.progressBar').each(function(el) {
+
+ // create a progressBar for each element
+ this.pbArray[el.id] = new JS_BRAMUS.jsProgressBar(el, parseInt(el.innerHTML.replace("%","")));
+
+ }.bind(this));
+ },
+
+
+ /**
+ * Set the percentage of a progressbar
+ *
+ * @param string el
+ * @param string percentage
+ * @return void
+ * -------------------------------------------------------------
+ */
+ setPercentage : function(el, percentage, clearQueue) {
+ this.pbArray[el].setPercentage(percentage, clearQueue);
+ },
+
+
+ /**
+ * Get the percentage of a progressbar
+ *
+ * @param string el
+ * @return int percentage
+ * -------------------------------------------------------------
+ */
+ getPercentage : function(el) {
+ return this.pbArray[el].getPercentage();
+ }
+
+ }
+
+
+ /**
+ * ProgressHandlerBar Class - hook me or not?
+ * -------------------------------------------------------------
+ */
+
+ if (autoHook == true) {
+ function initProgressBarHandler() { myJsProgressBarHandler = new JS_BRAMUS.jsProgressBarHandler(); }
+ document.observe('dom:loaded', initProgressBarHandler, false);
+ }
\ No newline at end of file |