Advertisement
Guest User

Untitled

a guest
Jan 12th, 2010
516
0
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.         }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement