From 8e43fce8730af7cce7fabc83e1dab7d54c85d1d7 Mon Sep 17 00:00:00 2001 From: Stefan Kangas Date: Thu, 30 Dec 2010 18:04:28 +0100 Subject: Move files for publishing into site/ directory --- js/bramus/jsProgressBarHandler.js | 503 -------------------------------------- 1 file changed, 503 deletions(-) delete mode 100644 js/bramus/jsProgressBarHandler.js (limited to 'js/bramus/jsProgressBarHandler.js') diff --git a/js/bramus/jsProgressBarHandler.js b/js/bramus/jsProgressBarHandler.js deleted file mode 100644 index 933a95a..0000000 --- a/js/bramus/jsProgressBarHandler.js +++ /dev/null @@ -1,503 +0,0 @@ -/***************************************************************** - * - * 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( - '0%' + - ((this.options.showText == true)?'0%':'')); - - // 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 -- cgit v1.2.3