Guest User

Untitled

a guest
Jan 12th, 2010
353
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

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×