SHARE
TWEET

Untitled

a guest Jan 12th, 2010 289 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*****************************************************************
  2.  *
  3.  * jsProgressBarHandler 0.3.3 - by Bramus! - http://www.bram.us/
  4.  *
  5.  * v 0.3.3 - 2008.11.10 - UPD: fixed IE compatibility issue (thanks Kevin - Sep 19 2008 / 6pm)
  6.  *                      - UPD: setPercentage now parses the targetPercentage to an Integer to avoid infinite loop (thanks Jack - Sep 07 2008 / 9pm)
  7.  *                      - 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.
  8.  *                      - UPD: setPercentage now takes an overrideQueue param. If set the current queue is cleared.
  9.  *                      - ADD: Added onTick callback event which gets called when the percentage is updated.
  10.  *                      - ADD: Added stable (as in "non-crashing") versions of the additions which first surfaced in the (unreleased) 0.3.2 release
  11.  *                             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)
  12.  * v 0.3.2 - 2008.04.09 (*UNRELEASED*)
  13.  *                      - ADD: implemented preloading of images to avoid slight flicker when switching images (BUGGY!)
  14.  *                      - ADD: percentage image now has class percentImage and percentage Text now has class percentText; This allows you to style the output easily.
  15.  * v 0.3.1 - 2008.02.20 - UPD: fixed queue bug when animate was set to false (thanks Jamie Chong)
  16.  *                      - UPD: update Prototype to version 1.6.0.2
  17.  * v 0.3.0 - 2008.02.01 - ADD: animation queue, prevents from the progressbar getting stuck when multiple calls are made during an animation
  18.  *                      - UPD: multiple barImages now work properly in Safari
  19.  * v 0.2.1 - 2007.12.20 - ADD: option : set boxImage
  20.  *                        ADD: option : set barImage (one or more)
  21.  *                        ADD: option : showText
  22.  * v 0.2   - 2007.12.13 - SYS: rewrite in 2 classs including optimisations
  23.  *                        ADD: Config options
  24.  * v 0.1   - 2007.08.02 - initial release
  25.  *
  26.  * @see http://www.barenakedapp.com/the-design/displaying-percentages on how to create a progressBar Background Image!
  27.  *
  28.  * Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
  29.  *
  30.  *****************************************************************/
  31.  
  32.  
  33.  /**
  34.   * CONFIG
  35.   * -------------------------------------------------------------
  36.   */
  37.  
  38.         // Should jsProgressBarHandler hook itself to all span.progressBar elements? - default : true
  39.                 var autoHook    = true;
  40.  
  41.         // Default Options
  42.                 var defaultOptions = {
  43.                         animate         : true,                                                                         // Animate the progress? - default: true
  44.                         showText        : true,                                                                         // show text with percentage in next to the progressbar? - default : true
  45.                         width           : 120,                                                                          // Width of the progressbar - don't forget to adjust your image too!!!
  46.                         boxImage        : 'images/bramus/percentImage.png',                     // boxImage : image around the progress bar
  47.                         barImage        : 'images/bramus/percentImage_back.png',        // Image to use in the progressbar. Can be an array of images too.
  48.                         height          : 12,                                                                           // Height of the progressbar - don't forget to adjust your image too!!!
  49.                         onTick          : function(pbObj) { return true }
  50.                 }
  51.  
  52.  /**
  53.   * NO NEED TO CHANGE ANYTHING BENEATH THIS LINE
  54.   * -------------------------------------------------------------
  55.   */
  56.  
  57.         /**
  58.          * JS_BRAMUS Object
  59.          * -------------------------------------------------------------
  60.          */
  61.  
  62.                 if (!JS_BRAMUS) { var JS_BRAMUS = new Object(); }
  63.  
  64.  
  65.         /**
  66.          * ProgressBar Class
  67.          * -------------------------------------------------------------
  68.          */
  69.  
  70.                 JS_BRAMUS.jsProgressBar = Class.create();
  71.  
  72.                 JS_BRAMUS.jsProgressBar.prototype = {
  73.  
  74.  
  75.  
  76.                         /**
  77.                          * Constructor
  78.                          *
  79.                          * @param HTMLElement el
  80.                          * @param string id
  81.                          * @param int percentage
  82.                          * @return void
  83.                          * -------------------------------------------------------------
  84.                          */
  85.                          
  86.                                 initialize              : function(el, percentage, options) {
  87.  
  88.                                         // get the options
  89.                                         this.options                    = Object.clone(defaultOptions);
  90.                                         Object.extend(this.options, options || {});
  91.  
  92.                                         // datamembers from arguments
  93.                                         this.el                         = $(el);
  94.  
  95.                                         this.percentage         = 0;                                                    // Set to 0 intially, we'll change this later.
  96.                                         this.backIndex          = 0;                                                    // Set to 0 initially
  97.                                         this.numPreloaded       = 0;                                                    // Set to 0 initially
  98.                                         this.running            = false;                                                // Set to false initially
  99.                                         this.queue                      = Array();                                              // Set to empty Array initially
  100.                                         this.imageElement       = null;                                                 // The image that will be handled
  101.                                         this.textElement        = null;                                                 // The text that will be handled
  102.  
  103.                                         // datamembers which are calculatef
  104.                                         this.imgWidth           = this.options.width * 2;               // define the width of the image (twice the width of the progressbar)
  105.                                         this.initialPos         = this.options.width * (-1);    // Initial postion of the background in the progressbar (0% is the middle of our image!)
  106.                                         this.pxPerPercent       = this.options.width / 100;             // Define how much pixels go into 1%
  107.                                         this.initialPerc        = percentage;                                   // Store this, we'll need it later.
  108.  
  109.                                         // enfore backimage array
  110.                                         if (this.options.barImage.constructor != Array) {       // used to be (but doesn't work in Safari): if (this.options.barImage.constructor.toString().indexOf("Array") == -1) {
  111.                                                 this.options.barImage = Array(this.options.barImage);
  112.                                         }
  113.  
  114.                                         // preload Images
  115.                                         this.preloadImages();
  116.  
  117.                                 },
  118.  
  119.  
  120.                         /**
  121.                          * Preloads the images needed for the progressbar
  122.                          *
  123.                          * @return void
  124.                          * -------------------------------------------------------------
  125.                          */
  126.  
  127.                                 preloadImages   : function() {
  128.  
  129.                                         // loop all barimages
  130.                                         for (i = 0; i < this.options.barImage.length; i++) {
  131.  
  132.                                                 // create new image ref
  133.                                                 var newImage = null;
  134.                                                 newImage = new Image();
  135.  
  136.                                                 // set onload, onerror and onabort functions
  137.                                                 newImage.onload         = function() { this.numPreloaded++; }.bind(this);
  138.                                                 newImage.onerror        = function() { this.numPreloaded++; }.bind(this);
  139.                                                 newImage.onabort        = function() { this.numPreloaded++; }.bind(this);
  140.  
  141.                                                 // set image source (preload it!)
  142.                                                 newImage.src = this.options.barImage[i];
  143.  
  144.                                                 // image is in cache
  145.                                                 if (newImage.complete) {
  146.                                                         this.numPreloaded++;
  147.                                                 }
  148.                                                
  149.                                         }
  150.  
  151.                                         // if not IE, check if they're loaded
  152.                                         if (!Prototype.Browser.IE) {
  153.                                                 this.checkPreloadedImages();
  154.  
  155.                                         // if IE, just init the visuals as it's quite hard to tame all IE's
  156.                                         } else {
  157.                                                 this.initVisuals();
  158.                                         }
  159.  
  160.                                 },
  161.  
  162.  
  163.                         /**
  164.                          * Check whether all images are preloaded and loads the percentage if so
  165.                          *
  166.                          * @return void
  167.                          * -------------------------------------------------------------
  168.                          */
  169.  
  170.                                 checkPreloadedImages    : function() {
  171.  
  172.                                         // all images are loaded, go init the visuals
  173.                                         if (parseInt(this.numPreloaded,10) >= parseInt(this.options.barImage.length,10) ) {
  174.  
  175.                                                 // initVisuals
  176.                                                 this.initVisuals();
  177.  
  178.                                         // not all images are loaded ... wait a little and then retry
  179.                                         } else {
  180.  
  181.                                                 if ( parseInt(this.numPreloaded,10) <= parseInt(this.options.barImage.length,10) ) {
  182.                                                         // $(this.el).update(this.id + ' : ' + this.numPreloaded + '/' + this.options.barImage.length);
  183.                                                         setTimeout(function() { this.checkPreloadedImages(); }.bind(this), 100);
  184.                                                 }
  185.  
  186.                                         }
  187.  
  188.                                 },
  189.  
  190.  
  191.                         /**
  192.                          * Intializes the visual output and sets the percentage
  193.                          *
  194.                          * @return void
  195.                          * -------------------------------------------------------------
  196.                          */                            
  197.                                
  198.                                 initVisuals             : function () {
  199.                                        
  200.                                         // create the visual aspect of the progressBar
  201.                                         this.el.update(
  202.                                                 this.imageElement = new Element('img', {'src' : this.options.boxImage, 'alt':'0%' })
  203.                                                 .setStyle({ 'width': (this.options.width+'px') ,
  204.                                                 'height': (this.options.height+'px') ,
  205.                                                 'backgroundPosition': (this.initialPos + 'px 50%') ,
  206.                                                 'backgroundImage': 'url(' + this.options.barImage[this.backIndex] + ')' ,
  207.                                                 'padding':0,
  208.                                                 'margin':0})
  209.                                         ).addClassName('percentImage');
  210.  
  211.                                         if(this.options.showText)
  212.                                                 this.el.insert(this.textElement = new Element('span').update('0%')).addClassName('percentText');
  213.                                        
  214.                                         this.setPercentage(this.initialPerc);
  215.                                 },
  216.                        
  217.                        
  218.                         /**
  219.                          * Sets the percentage of the progressbar
  220.                          *
  221.                          * @param string targetPercentage
  222.                          * @param boolen clearQueue
  223.                          * @return void
  224.                          * -------------------------------------------------------------
  225.                          */
  226.                                 setPercentage   : function(targetPercentage, clearQueue) {
  227.                                        
  228.                                         // if clearQueue is set, empty the queue and then set the percentage
  229.                                         if (clearQueue) {
  230.                                                
  231.                                                 this.percentage = (this.queue.length != 0) ? this.queue[0] : targetPercentage;
  232.                                                 this.timer              = null;
  233.                                                 this.queue              = [];
  234.                                                
  235.                                                 setTimeout(function() { this.setPercentage(targetPercentage); }.bind(this), 10);
  236.                                                
  237.                                         // no clearQueue defined, set the percentage
  238.                                         } else {
  239.                                        
  240.                                                 // add the percentage on the queue
  241.                                                 this.queue.push(targetPercentage);
  242.                                                
  243.                                                 // process the queue (if not running already)
  244.                                                 if (this.running == false) {
  245.                                                         this.processQueue();
  246.                                                 }
  247.                                         }
  248.                                        
  249.                                 },
  250.                        
  251.                        
  252.                         /**
  253.                          * Processes the queue
  254.                          *
  255.                          * @return void
  256.                          * -------------------------------------------------------------
  257.                          */
  258.                                
  259.                                 processQueue    : function() {
  260.                                        
  261.                                         // stuff on queue?
  262.                                         if (this.queue.length > 0) {
  263.                                                
  264.                                                 // tell the world that we're busy
  265.                                                 this.running = true;
  266.                                                
  267.                                                 // process the entry
  268.                                                 this.processQueueEntry(this.queue[0]);
  269.                                                
  270.                                         // no stuff on queue
  271.                                         } else {
  272.                                                        
  273.                                                 // return;
  274.                                                 return;
  275.                                                        
  276.                                         }
  277.                                        
  278.                                 },
  279.                        
  280.                        
  281.                         /**
  282.                          * Processes an entry from the queue (viz. animates it)
  283.                          *
  284.                          * @param string targetPercentage
  285.                          * @return void
  286.                          * -------------------------------------------------------------
  287.                          */
  288.                                
  289.                                 processQueueEntry       : function(targetPercentage) {
  290.                                                                                
  291.                                         // get the current percentage
  292.                                         var curPercentage       = parseInt(this.percentage,10);
  293.                                        
  294.                                         // define the new percentage
  295.                                         if ((targetPercentage.toString().substring(0,1) == "+") || (targetPercentage.toString().substring(0,1) == "-")) {
  296.                                                 targetPercentage        = curPercentage + parseInt(targetPercentage);
  297.                                         }
  298.                                
  299.                                         // min and max percentages
  300.                                         if (targetPercentage < 0)               targetPercentage = 0;
  301.                                         if (targetPercentage > 100)             targetPercentage = 100;
  302.                                        
  303.                                         // if we don't need to animate, just change the background position right now and return
  304.                                         if (this.options.animate == false) {
  305.                                                
  306.                                                 // remove the entry from the queue
  307.                                                 this.queue.splice(0,1); // @see: http://www.bram.us/projects/js_bramus/jsprogressbarhandler/#comment-174878
  308.                                                
  309.                                                 // Change the background position (and update this.percentage)
  310.                                                 this._setBgPosition(targetPercentage);
  311.                                        
  312.                                                 // call onTick
  313.                                                 if (!this.options.onTick(this)) {
  314.                                                         return;
  315.                                                 }
  316.                                                
  317.                                                 // we're not running anymore
  318.                                                 this.running = false;
  319.                                                
  320.                                                 // continue processing the queue
  321.                                                 this.processQueue();
  322.                                                
  323.                                                 // we're done!
  324.                                                 return;
  325.                                         }
  326.                                        
  327.                                         // define if we need to add/subtract something to the current percentage in order to reach the target percentage
  328.                                         if (targetPercentage != curPercentage) {                                       
  329.                                                 if (curPercentage < targetPercentage) {
  330.                                                         newPercentage = curPercentage + 1;
  331.                                                 } else {
  332.                                                         newPercentage = curPercentage - 1;     
  333.                                                 }                                              
  334.                                                 callTick = true;                                               
  335.                                         } else {
  336.                                                 newPercentage = curPercentage;
  337.                                                 callTick = false;
  338.                                         }                                                                                      
  339.                                                                                        
  340.                                         // Change the background position (and update this.percentage)
  341.                                         this._setBgPosition(newPercentage);
  342.                                        
  343.                                         // call onTick
  344.                                         if (callTick && !this.options.onTick(this)) {
  345.                                                 return;
  346.                                         }
  347.                                        
  348.                                         // Percentage not reached yet : continue processing entry
  349.                                         if (curPercentage != newPercentage) {
  350.                                                
  351.                                                 this.timer = setTimeout(function() { this.processQueueEntry(targetPercentage); }.bind(this), 10);
  352.                                                
  353.                                         // Percentage reached!
  354.                                         } else {
  355.                                                                                                                  
  356.                                                 // remove the entry from the queue
  357.                                                 this.queue.splice(0,1);
  358.                                                
  359.                                                 // we're not running anymore
  360.                                                 this.running = false;  
  361.                                                
  362.                                                 // unset timer
  363.                                                 this.timer = null;
  364.                                                
  365.                                                 // process the rest of the queue
  366.                                                 this.processQueue();
  367.                                                
  368.                                                 // we're done!
  369.                                                 return;
  370.                                         }
  371.                                        
  372.                                 },
  373.                        
  374.                        
  375.                         /**
  376.                          * Gets the percentage of the progressbar
  377.                          *
  378.                          * @return int
  379.                          */
  380.                                 getPercentage           : function(id) {
  381.                                         return this.percentage;
  382.                                 },
  383.                        
  384.                        
  385.                         /**
  386.                          * Set the background position
  387.                          *
  388.                          * @param int percentage
  389.                          */
  390.                                 _setBgPosition          : function(percentage) {
  391.                                         // adjust the background position
  392.                                                 this.imageElement.style.backgroundPosition      = (this.initialPos + (percentage * this.pxPerPercent)) + "px 50%";
  393.                                                                                                
  394.                                         // adjust the background image and backIndex
  395.                                                 var newBackIndex                                                                                = Math.floor((percentage-1) / (100/this.options.barImage.length));
  396.                                                
  397.                                                 if ((newBackIndex != this.backIndex) && (this.options.barImage[newBackIndex] != undefined)) {
  398.                                                         this.imageElement.style.backgroundImage         = "url(" + this.options.barImage[newBackIndex] + ")";
  399.                                                 }
  400.                                                
  401.                                                 this.backIndex                                                                                  = newBackIndex;
  402.                                        
  403.                                         // Adjust the alt & title of the image
  404.                                                 this.imageElement.alt                                           = percentage + "%";
  405.                                                 this.imageElement.title                                                 = percentage + "%";
  406.                                                
  407.                                         // Update the text
  408.                                                 if (this.options.showText == true) {
  409.                                                         this.textElement.update("" + percentage + "%");
  410.                                                 }
  411.                                                
  412.                                         // adjust datamember to stock the percentage
  413.                                                 this.percentage = percentage;
  414.                                 }
  415.                 }
  416.  
  417.  
  418.         /**
  419.          * ProgressHandlerBar Class - automatically create ProgressBar instances
  420.          * -------------------------------------------------------------
  421.          */
  422.          
  423.                 JS_BRAMUS.jsProgressBarHandler = Class.create();
  424.  
  425.        
  426.                 JS_BRAMUS.jsProgressBarHandler.prototype = {
  427.                        
  428.                        
  429.                         /**
  430.                          * Datamembers
  431.                          * -------------------------------------------------------------
  432.                          */
  433.                          
  434.                                 pbArray                         : new Array(),          // Array of progressBars
  435.                
  436.                
  437.                         /**
  438.                          * Constructor
  439.                          *
  440.                          * @return void
  441.                          * -------------------------------------------------------------
  442.                          */
  443.                          
  444.                                 initialize                      : function() {         
  445.                                
  446.                                         // get all span.progressBar elements
  447.                                         $$('span.progressBar').each(function(el) {
  448.                                                                                                                  
  449.                                                 // create a progressBar for each element
  450.                                                 this.pbArray[el.id]     = new JS_BRAMUS.jsProgressBar(el, parseInt(el.innerHTML.replace("%","")));
  451.                                        
  452.                                         }.bind(this));
  453.                                 },
  454.                
  455.                
  456.                         /**
  457.                          * Set the percentage of a progressbar
  458.                          *
  459.                          * @param string el
  460.                          * @param string percentage
  461.                          * @return void
  462.                          * -------------------------------------------------------------
  463.                          */
  464.                                 setPercentage           : function(el, percentage, clearQueue) {
  465.                                         this.pbArray[el].setPercentage(percentage, clearQueue);
  466.                                 },
  467.                
  468.                
  469.                         /**
  470.                          * Get the percentage of a progressbar
  471.                          *
  472.                          * @param string el
  473.                          * @return int percentage
  474.                          * -------------------------------------------------------------
  475.                          */
  476.                                 getPercentage           : function(el) {
  477.                                         return this.pbArray[el].getPercentage();
  478.                                 }
  479.                        
  480.                 }
  481.  
  482.  
  483.         /**
  484.          * ProgressHandlerBar Class - hook me or not?
  485.          * -------------------------------------------------------------
  486.          */
  487.        
  488.                 if (autoHook == true) {
  489.                         function initProgressBarHandler() { myJsProgressBarHandler = new JS_BRAMUS.jsProgressBarHandler(); }
  490.                         document.observe('dom:loaded', initProgressBarHandler, false);
  491.                 }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top