aboutsummaryrefslogtreecommitdiffstats
path: root/js/bramus
diff options
context:
space:
mode:
authorStefan Kangas <stefankangas@gmail.com>2010-12-30 18:04:28 +0100
committerStefan Kangas <stefankangas@gmail.com>2010-12-30 18:04:28 +0100
commit8e43fce8730af7cce7fabc83e1dab7d54c85d1d7 (patch)
tree0423f72fcf4a0f1d9da45ea7afffa4841cf2cf6d /js/bramus
parent03f8403d05ea8c96293945a5a6cc6cf606ef8945 (diff)
Move files for publishing into site/ directory
Diffstat (limited to 'js/bramus')
-rw-r--r--js/bramus/jsProgressBarHandler.js503
1 files changed, 0 insertions, 503 deletions
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(
- '<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