[Summary view] [Print] [Text view]

   1  YUI.add('yui2-progressbar', function(Y) {
   2      var YAHOO    = Y.YUI2;
   3      /*
   4  Copyright (c) 2011, Yahoo! Inc. All rights reserved.
   5  Code licensed under the BSD License:
   6  http://developer.yahoo.com/yui/license.html
   7  version: 2.9.0
   8  */
   9  /**
  10   *
  11   * @module progressbar
  12   * @requires yahoo, dom, event, element
  13   * @optional animation
  14   * @title ProgressBar Widget
  15   */
  16  
  17  (function () {
  18      var Dom = YAHOO.util.Dom,
  19          Lang = YAHOO.lang,
  20          // ClassNames
  21          CLASS_PROGBAR = 'yui-pb',
  22          CLASS_MASK = CLASS_PROGBAR + '-mask',
  23          CLASS_BAR = CLASS_PROGBAR + '-bar',
  24          CLASS_ANIM = CLASS_PROGBAR + '-anim',
  25          CLASS_TL = CLASS_PROGBAR + '-tl',
  26          CLASS_TR = CLASS_PROGBAR + '-tr',
  27          CLASS_BL = CLASS_PROGBAR + '-bl',
  28          CLASS_BR = CLASS_PROGBAR + '-br',
  29          
  30          // Configuration attributes
  31          WIDTH = 'width',
  32          HEIGHT = 'height',
  33          MIN_VALUE = 'minValue',
  34          MAX_VALUE = 'maxValue',
  35          VALUE = 'value',
  36          ANIM = 'anim',
  37          DIRECTION = 'direction',
  38          DIRECTION_LTR = 'ltr',
  39          DIRECTION_RTL = 'rtl',
  40          DIRECTION_TTB = 'ttb',
  41          DIRECTION_BTT = 'btt',
  42          BAR_EL = 'barEl',
  43          MASK_EL = 'maskEl',
  44          ARIA_TEXT_TEMPLATE = 'ariaTextTemplate',
  45          ACC = 'animAcceleration',
  46          BG_POSITION = 'background-position',
  47          PX = 'px',
  48          // Events
  49          START = 'start',
  50          PROGRESS = 'progress',
  51          COMPLETE = 'complete';
  52      
  53      /**
  54       * The ProgressBar widget provides an easy way to draw a bar depicting progress of an operation,
  55       * a level meter, rating or any such simple linear measure.
  56       * It allows for highly customized styles including animation, vertical or horizontal and forward or reverse.
  57       * @namespace YAHOO.widget
  58       * @class ProgressBar
  59       * @extends YAHOO.util.Element
  60       * @param oConfigs {object} An object containing any configuration attributes to be set 
  61       * @constructor
  62       */        
  63      var Prog = function(oConfigs) {
  64          YAHOO.log('Creating ProgressBar instance','info','ProgressBar');
  65          
  66          Prog.superclass.constructor.call(this, document.createElement('div') , oConfigs);
  67          this._init(oConfigs);
  68          
  69      };
  70      
  71      YAHOO.widget.ProgressBar = Prog;
  72  
  73      /**
  74       * String containing the HTML string which is the basis for the Progress
  75       * Bar. Value is inserted into the DOM with innerHTML.
  76       *
  77       * @property ProgressBar.MARKUP
  78       * @type HTML
  79       * @static
  80       * @final
  81       * @default (too long)
  82       */
  83      Prog.MARKUP = [
  84          '<div class="',
  85          CLASS_BAR,
  86          '"></div><div class="',
  87          CLASS_MASK,
  88          '"><div class="',
  89          CLASS_TL,
  90          '"></div><div class="',
  91          CLASS_TR,
  92          '"></div><div class="',
  93          CLASS_BL,
  94          '"></div><div class="',
  95          CLASS_BR,
  96          '"></div></div>'
  97      ].join('');
  98  
  99      
 100      Lang.extend(Prog, YAHOO.util.Element, {
 101          /**
 102           * Initialization code for the widget, separate from the constructor to allow for overriding/patching.
 103           * It is called after <a href="#method_initAttributes">initAttributes</a>
 104           *
 105           * @method _init
 106           * @param oConfigs {Object} (Optional) Object literal definition of configuration values.  
 107           * @protected
 108           */    
 109           _init: function (oConfigs) {
 110              /**
 111               * Fires when the value is about to change.  It reports the starting value
 112               * @event start
 113               * @type CustomEvent
 114               * @param value {Number} the current (initial) value
 115               */
 116              // No actual creation required, event will be created when subscribed to
 117              //this.createEvent(START);
 118              /**
 119               * If animation is active, it will trigger several times during the animation providing intermediate values
 120               * If animation is not active, it will fire only once providing the end value
 121               * @event progress
 122               * @type CustomEvent
 123               * @param  value{Number} the current, changing value
 124               */
 125              // No actual creation required, event will be created when subscribed to
 126              //this.createEvent(PROGRESS);
 127              /**
 128               * Fires at the end of the animation or immediately upon changing values if animation is not loaded
 129               * @event complete
 130               * @type CustomEvent
 131               * @param value {Number} the current (final)  value
 132               */
 133              // No actual creation required, event will be created when listened to
 134              //this.createEvent(COMPLETE);
 135              
 136  
 137          },
 138          /**
 139           * Implementation of Element's abstract method. Sets up config values.
 140           *
 141           * @method initAttributes
 142           * @param oConfigs {Object} (Optional) Object literal definition of configuration values.
 143           * @private
 144           */    
 145          initAttributes: function (oConfigs) {
 146              YAHOO.log('Initializing configuration attributes','info','ProgressBar');
 147  
 148              Prog.superclass.initAttributes.call(this, oConfigs);
 149              this.set('innerHTML',Prog.MARKUP);
 150              this.addClass(CLASS_PROGBAR);
 151              
 152              // I need to apply at least the following styles, if present in oConfigs, 
 153              // to the ProgressBar so when it later reads the width and height, 
 154              // they are already set to the correct values.
 155              // id is important because it can be used as a CSS selector.
 156              var key, presets = ['id',WIDTH,HEIGHT,'class','style'];
 157              while((key = presets.pop())) {
 158                  if (key in oConfigs) {
 159                      this.set(key,oConfigs[key]);
 160                  }
 161              }
 162              
 163  
 164              /**
 165               * @attribute barEl
 166               * @description Reference to the HTML object that makes the moving bar (read-only)
 167               * @type HTMLElement (div)
 168               * @readonly
 169               */            
 170              this.setAttributeConfig(BAR_EL, {
 171                  readOnly: true,
 172                  value: this.getElementsByClassName(CLASS_BAR)[0]
 173              });
 174              /**
 175               * @attribute maskEl
 176               * @description Reference to the HTML object that overlays the bar providing the mask. (read-only)
 177               * @type HTMLElement (table)
 178               * @readonly
 179               */            
 180              this.setAttributeConfig(MASK_EL, {
 181                  readOnly: true,
 182                  value: this.getElementsByClassName(CLASS_MASK)[0]
 183              });
 184              
 185              
 186              /**
 187               * @attribute direction
 188               * @description Direction of movement of the bar.  
 189               *    It can be any of 'ltr' (left to right), 'rtl' (the reverse) , 'ttb' (top to bottom) or 'btt'.
 190               *    Can only be set before rendering.
 191               * @default 'ltr'
 192               * @type String (any of "ltr", "rtl", "ttb" or "btt")
 193               */            
 194              this.setAttributeConfig(DIRECTION, {
 195                  value:DIRECTION_LTR,
 196                  validator:function(value) {
 197                      if (this._rendered) { return false; }
 198                      switch (value) {
 199                          case DIRECTION_LTR:
 200                          case DIRECTION_RTL:
 201                          case DIRECTION_TTB:
 202                          case DIRECTION_BTT:
 203                              return true;
 204                          default:
 205                              return false;
 206                      }
 207                  }
 208              });
 209              
 210              /**
 211               * @attribute maxValue
 212               * @description Represents the top value for the bar. 
 213               *   The bar will be fully extended when reaching this value.  
 214               *   Values higher than this will be ignored. 
 215               * @default 100
 216               * @type Number
 217               */                    
 218              this.setAttributeConfig(MAX_VALUE, {
 219                  value: 100,
 220                  validator: Lang.isNumber,
 221                  method: function (value) {
 222                      this.get('element').setAttribute('aria-valuemax',value);
 223                      if (this.get(VALUE) > value) { this.set(VALUE,value); }
 224                  }
 225              });
 226              
 227              /**
 228               * @attribute minValue
 229               * @description Represents the lowest value for the bar. 
 230               *   The bar will be totally collapsed when reaching this value.  
 231               *    Values lower than this will be ignored. 
 232               * @default 0
 233               * @type Number
 234               */                
 235  
 236              this.setAttributeConfig(MIN_VALUE, {
 237                  value: 0,
 238                  validator: Lang.isNumber,
 239                  method: function (value) {
 240                      this.get('element').setAttribute('aria-valuemin',value);
 241                      if (this.get(VALUE) < value) { this.set(VALUE,value); }
 242                  }
 243              });
 244              /**
 245               * @attribute width
 246               * @description Pixel width of the ProgressBar, i.e., 200 or "200px".
 247               *     It will always be returned as a string including units.
 248               * @default "200px"
 249               * @type Number or String
 250               */                
 251  
 252              this.setAttributeConfig(WIDTH, {
 253                  getter: function() {
 254                      return this.getStyle(WIDTH);
 255                  },
 256                  method: this._widthChange
 257              });
 258          
 259  
 260              /**
 261               * @attribute height
 262               * @description Pixel height of the ProgressBar, i.e., 200 or "200px".
 263               *     It will always be returned as a string including units.
 264               * @default "20px"
 265               * @type Number or String
 266               */                
 267              this.setAttributeConfig(HEIGHT, {
 268                  getter:function() {
 269                      return this.getStyle(HEIGHT);
 270                  },
 271                  method: this._heightChange
 272              });
 273              
 274              
 275      
 276              /**
 277               * @attribute ariaTextTemplate 
 278               * @description Text to be voiced by screen readers.
 279               *     The text is processed by <a href="YAHOO.lang.html#method_substitute">YAHOO.lang.substitute</a>.  
 280               *     It can use the placeholders {value}, {minValue} and {maxValue}
 281               * @default "{value}"
 282               * @type String
 283               */                
 284              this.setAttributeConfig(ARIA_TEXT_TEMPLATE, {
 285                  value:'{value}'
 286              });
 287              
 288              /**
 289               * @attribute value
 290               * @description The value for the bar.  
 291               *     Valid values are in between the minValue and maxValue attributes.
 292               * @default 0
 293               * @type Number
 294               */            
 295              this.setAttributeConfig(VALUE, {
 296                  value: 0,
 297                  validator: function(value) {
 298                      return Lang.isNumber(value) && value >= this.get(MIN_VALUE) && value <= this.get(MAX_VALUE);
 299                  },
 300                  method: this._valueChange
 301              });
 302              
 303              /**
 304               * @attribute anim
 305               * @description It accepts either a boolean (recommended) or an instance of <a href="YAHOO.util.Anim.html">YAHOO.util.Anim</a>.
 306               *   If a boolean, it will enable/disable animation creating its own instance of the animation utility.  
 307               *   If given an instance of <a href="YAHOO.util.Anim.html">YAHOO.util.Anim</a> it will use that instance.
 308               *   The <a href="YAHOO.util.Anim.html">animation</a> utility needs to be loaded.
 309               *   When read, it returns the instance of the animation utility in use or null if none.  
 310               *   It can be used to set the animation parameters such as easing methods or duration.
 311               * @default null
 312               * @type {boolean} or {instance of YAHOO.util.Anim}
 313               */                        
 314              this.setAttributeConfig(ANIM, {
 315                  validator: function(value) {
 316                      return !!YAHOO.util.Anim;
 317                  },
 318                  setter: this._animSetter
 319              });
 320              
 321              /**
 322               * @attribute animAcceleration
 323               * @description It accepts a number or null to cancel.  
 324               * If a number, it is how fast the background image for the bar will move in the 
 325               * opposite direction to the bar itself. null or 0 means the background won't move.
 326               * Negative values will make the background move along the bar.
 327               * Only valid with animation active and it requires a suitable background image to make it evident.
 328               * @default null
 329               * @type {number} or {null}
 330               */
 331              
 332              this.setAttributeConfig(ACC, {
 333                  value:null,
 334                  validator: function(value) {
 335                      return Lang.isNumber(value) || Lang.isNull(value);
 336                  },
 337                  method: function(value) {
 338                      this._fixAnim(this.get(ANIM),value);
 339                  }
 340              });
 341              
 342          },
 343          /** 
 344           *  Renders the ProgressBar into the given container.  
 345           *  If the container has other content, the ProgressBar will be appended to it.
 346           *  If the second argument is provided, the ProgressBar will be inserted before the given child.
 347           * The method is chainable since it returns a reference to this instance.
 348           * @method render
 349           * @param el {HTML Element}  HTML element that will contain the ProgressBar
 350           * @param before {HTML Element}  (optional) If present, the ProgressBar will be inserted before this element.
 351           * @return {YAHOO.widget.ProgressBar}
 352           * @chainable
 353           */
 354          render: function(parent, before) {
 355  
 356              YAHOO.log('start render','info','ProgressBar');
 357              if (this._rendered) { return; }
 358              this._rendered = true;
 359              
 360              var direction = this.get(DIRECTION);
 361  
 362              // If the developer set a className attribute on initialization, 
 363              // Element would have wiped out my own classNames
 364              // So I need to insist on them, plus add the one for direction.
 365              this.addClass(CLASS_PROGBAR);
 366              this.addClass(CLASS_PROGBAR + '-' + direction);
 367  
 368              var container = this.get('element');
 369              container.tabIndex = 0;
 370              container.setAttribute('role','progressbar');
 371              container.setAttribute('aria-valuemin',this.get(MIN_VALUE));
 372              container.setAttribute('aria-valuemax',this.get(MAX_VALUE));
 373  
 374              this.appendTo(parent,before);
 375              
 376                      
 377              this.redraw(false);
 378              this._previousValue = this.get(VALUE);
 379              this._fixEdges();
 380  
 381              this.on('minValueChange',this.redraw);
 382              this.on('maxValueChange',this.redraw);
 383  
 384              return this;
 385          },
 386  
 387          /** 
 388           * Recalculates the bar size and position and redraws it
 389           * @method redraw
 390           * @param noAnim {boolean} Don't use animation to redraw
 391           * @return  void
 392           */
 393          redraw: function (noAnim) {
 394              YAHOO.log('Redraw','info','ProgressBar');
 395              this._recalculateConstants();
 396              this._valueChange(this.get(VALUE), noAnim);
 397          },
 398              
 399          /** 
 400           * Destroys the ProgressBar, related objects and unsubscribes from all events
 401           * @method destroy
 402           * @return  void
 403           */
 404          destroy: function() {
 405              YAHOO.log('destroy','info','ProgressBar');
 406              this.set(ANIM,false);
 407              this.unsubscribeAll();
 408              var el = this.get('element');
 409              if (el.parentNode) { el.parentNode.removeChild(el); }
 410          },
 411          /**
 412           * The previous value setting for the bar.  Used mostly as information to event listeners
 413           * @property _previousValue
 414           * @type Number
 415           * @private
 416           * @default  0
 417           */
 418          _previousValue:0,
 419          /**
 420           * The actual space (in pixels) available for the bar within the mask (excludes margins)
 421           * @property _barSpace
 422           * @type Number
 423           * @private
 424           * @default  100
 425           */
 426          _barSpace:100,
 427          /**
 428           * The factor to convert the actual value of the bar into pixels
 429           * @property _barSpace
 430           * @type Number
 431           * @private
 432           * @default  1
 433           */
 434          _barFactor:1,
 435          
 436          /**
 437           * A flag to signal that rendering has already happened
 438           * @property _rendered
 439           * @type boolean
 440           * @private
 441           * @default  false
 442           */
 443          _rendered:false,
 444          
 445          
 446          /** 
 447           * Method called when the height attribute is changed
 448           * @method _heightChange
 449           * @param {int or string} value New height, in pixels if int or string including units
 450           * @return void
 451           * @private
 452           */
 453          _heightChange: function(value) {
 454              if (Lang.isNumber(value)) {
 455                  value += PX;
 456              }
 457              this.setStyle(HEIGHT,value);
 458              this._fixEdges();
 459              this.redraw(false);
 460          },
 461  
 462          /** 
 463           * Method called when the height attribute is changed
 464           * @method _widthChange
 465           * @param {int or string} value New width, in pixels if int or string including units
 466           * @return void
 467           * @private
 468           */
 469          _widthChange: function(value) {
 470              if (Lang.isNumber(value)) {
 471                  value += PX;
 472              }
 473              this.setStyle(WIDTH,value);
 474              this._fixEdges();
 475              this.redraw(false);
 476          },
 477          
 478          /** 
 479           * Due to rounding differences, some browsers fail to cover the whole area 
 480           * with the mask quadrants when the width or height is odd.  This method
 481           * stretches the lower and/or right quadrants to make the difference.
 482           * @method _fixEdges
 483           * @return void
 484           * @private
 485           */
 486          _fixEdges:function() {
 487              if (!this._rendered || YAHOO.env.ua.ie || YAHOO.env.ua.gecko ) { return; }
 488              var maskEl = this.get(MASK_EL),
 489                  tlEl = Dom.getElementsByClassName(CLASS_TL,undefined,maskEl)[0],
 490                  trEl = Dom.getElementsByClassName(CLASS_TR,undefined,maskEl)[0],
 491                  blEl = Dom.getElementsByClassName(CLASS_BL,undefined,maskEl)[0],
 492                  brEl = Dom.getElementsByClassName(CLASS_BR,undefined,maskEl)[0],
 493                  newSize = (parseInt(Dom.getStyle(maskEl,HEIGHT),10) -
 494                  parseInt(Dom.getStyle(tlEl,HEIGHT),10)) + PX;
 495                  
 496              Dom.setStyle(blEl,HEIGHT,newSize);
 497              Dom.setStyle(brEl,HEIGHT,newSize);
 498              newSize = (parseInt(Dom.getStyle(maskEl,WIDTH),10) -
 499                  parseInt(Dom.getStyle(tlEl,WIDTH),10)) + PX;
 500              Dom.setStyle(trEl,WIDTH,newSize);
 501              Dom.setStyle(brEl,WIDTH,newSize);
 502          },
 503                      
 504                  
 505          
 506          /** 
 507           * Calculates some auxiliary values to make the rendering faster
 508           * @method _recalculateConstants
 509           * @return  void
 510           * @private
 511           */        
 512          _recalculateConstants: function() {
 513              YAHOO.log('Recalculating auxiliary factors','info','ProgressBar');
 514              var barEl = this.get(BAR_EL);
 515  
 516              switch (this.get(DIRECTION)) {
 517                  case DIRECTION_LTR:
 518                  case DIRECTION_RTL:
 519                      this._barSpace = parseInt(this.get(WIDTH),10) - 
 520                          (parseInt(Dom.getStyle(barEl,'marginLeft'),10) || 0) -
 521                          (parseInt(Dom.getStyle(barEl,'marginRight'),10) || 0);
 522                      break;
 523                  case DIRECTION_TTB:
 524                  case DIRECTION_BTT:
 525                      this._barSpace = parseInt(this.get(HEIGHT),10) -
 526                          (parseInt(Dom.getStyle(barEl,'marginTop'),10) || 0)-
 527                          (parseInt(Dom.getStyle(barEl,'marginBottom'),10) || 0); 
 528                      break;
 529              }
 530              this._barFactor = this._barSpace / (this.get(MAX_VALUE) - (this.get(MIN_VALUE) || 0))  || 1;
 531          },
 532          
 533          /** 
 534           * Called in response to a change in the <a href="#config_anim">anim</a> attribute.
 535           * It creates and sets up or destroys the instance of the animation utility that will move the bar
 536           * @method _animSetter
 537           * @param value {boolean ,YAHOO.util.Anim} Enable animation or set to specific instance
 538           * @return  void
 539           * @private
 540           */        
 541          _animSetter: function (value) {
 542              var anim, barEl = this.get(BAR_EL);
 543              if (value) {
 544                  YAHOO.log('Turning animation on','info','ProgressBar');
 545                  if (value instanceof YAHOO.util.Anim) {
 546                      anim = value;
 547                  } else {
 548                      anim = new YAHOO.util.Anim(barEl);
 549                  }
 550                  anim.onTween.subscribe(this._animOnTween,this,true);
 551                  anim.onComplete.subscribe(this._animComplete,this,true);
 552                  
 553                  this._fixAnim(anim,this.get(ACC));
 554                  
 555              } else {
 556                  YAHOO.log('Turning animation off','info','ProgressBar');
 557                  anim = this.get(ANIM);
 558                  if (anim) {
 559                      anim.onTween.unsubscribeAll();
 560                      anim.onComplete.unsubscribeAll();
 561                  }
 562                  anim = null;
 563              }
 564              return anim;
 565          },
 566          /** 
 567           * Temporary solution until http://yuilibrary.com/projects/yui2/ticket/2528222 gets solved.
 568           * Also fixes: http://yuilibrary.com/projects/yui2/ticket/2528919.
 569           * It also handles moving the background as per the animAcceleration configuration attribute
 570           * since it turned out to be the best place to handle it.
 571           * @method _fixAnim
 572           * @param anim {YAHOO.util.Anim} Instance of Animation to fix
 573           * @param acc {number} Value of animAcceleration attribute
 574           * @return  void
 575           * @private
 576           */    
 577          _fixAnim: function(anim, acc) {
 578  
 579  
 580              if (anim) {
 581                  if (!this._oldSetAttribute) {
 582                      this._oldSetAttribute = anim.setAttribute;
 583                  }
 584                  var    pb = this;
 585                  switch(this.get(DIRECTION)) {
 586                      case DIRECTION_LTR:
 587                          anim.setAttribute = function(attr , val , unit) {
 588                              val = Math.round(val);
 589                              pb._oldSetAttribute.call(this,attr,val,unit);
 590                              if (attr == WIDTH) {
 591                                  pb._oldSetAttribute.call(this,BG_POSITION,-val * acc,PX);
 592                              }
 593                          };
 594                          break;
 595                      case DIRECTION_RTL:
 596                          anim.setAttribute = function(attr , val , unit) {
 597                              val = Math.round(val);
 598                              pb._oldSetAttribute.call(this,attr,val,unit);
 599                              if (attr == WIDTH) {
 600                                  var left = pb._barSpace - val;
 601                                  pb._oldSetAttribute.call(this,'left',left, PX);
 602                                  pb._oldSetAttribute.call(this, BG_POSITION, -left +  val * acc, PX);
 603                              }
 604                          };
 605                          break;
 606                      case DIRECTION_TTB:
 607                          anim.setAttribute = function(attr , val , unit) {
 608                              val = Math.round(val);
 609                              pb._oldSetAttribute.call(this,attr,val,unit);
 610                              if (attr == HEIGHT) {
 611                                  pb._oldSetAttribute.call(this,BG_POSITION,'center ' + (- val * acc),PX);
 612                              }
 613                          };
 614                          break;
 615                      
 616                      case DIRECTION_BTT:
 617                          anim.setAttribute = function(attr , val , unit) {
 618                              val = Math.round(val);
 619                              pb._oldSetAttribute.call(this,attr,val,unit);
 620                              if (attr == HEIGHT) {
 621                                  var top = pb._barSpace - val;
 622                                  pb._oldSetAttribute.call(this,'top',top, PX);
 623                                  pb._oldSetAttribute.call(this, BG_POSITION,'center ' + (val * acc - top), PX);
 624                              }
 625                          };
 626                          break;
 627                  }
 628                  // up to here
 629              }
 630          },
 631          /** 
 632           * Called when the animation signals it has completed.
 633           * @method _animComplete
 634           * @return  void
 635           * @private
 636           */            
 637          _animComplete: function() {
 638              YAHOO.log('Animation completed','info','ProgressBar');
 639              var value = this.get(VALUE);
 640              this._previousValue = value;
 641              this.fireEvent(PROGRESS,value);
 642              this.fireEvent(COMPLETE, value);
 643              Dom.removeClass(this.get(BAR_EL),CLASS_ANIM);
 644          },
 645          /** 
 646           * Called for each onTween event of the animation instance.
 647           * @method _animComplete
 648           * @param name {string} Name of the event fired
 649           * @param oArgs {object} Arguments provided by the Anim instance
 650           * @return  void
 651           * @private
 652           */            
 653          _animOnTween:function (name,oArgs) {
 654              var value = Math.floor(this._tweenFactor * oArgs[0].currentFrame + this._previousValue);
 655              // The following fills the logger window too fast
 656              //YAHOO.log('Animation onTween at: ' + value,'info','ProgressBar');
 657              this.fireEvent(PROGRESS,value);
 658          },
 659          
 660          /** 
 661           * Called in response to a change in the <a href="#config_value">value</a> attribute.
 662           * Moves the bar to reflect the new value
 663           * @method _valueChange
 664           * @param value {number} New value to be set
 665           * @param noAnim {boolean} Disable animation for this redraw
 666           * @return  void
 667           * @private
 668           */        
 669          _valueChange: function (value, noAnim) {
 670              YAHOO.log('set value: ' + value,'info','ProgressBar');
 671              var anim = this.get(ANIM),
 672                  pixelValue = Math.floor((value - this.get(MIN_VALUE)) * this._barFactor);
 673              
 674              this._setAriaText(value);
 675              if (this._rendered) {
 676                  if (anim) {
 677                      anim.stop();
 678                      if (anim.isAnimated()) { anim._onComplete.fire(); } // see: http://yuilibrary.com/projects/yui2/ticket/2528217
 679                  }
 680                  this.fireEvent(START,this._previousValue);
 681                  Prog._barSizeFunctions[((noAnim !== false) && anim)?1:0][this.get(DIRECTION)].call(this, value, pixelValue, this.get(BAR_EL), anim);
 682              }
 683          },
 684  
 685          /** 
 686           * Utility method to set the ARIA value attributes
 687           * @method _setAriaText
 688           * @param value {number} Value to be voiced
 689           * @return  void
 690           * @private
 691           */
 692           _setAriaText: function(value) {
 693              // When animated, this fills the logger window too fast
 694               //YAHOO.log('Show template','info','ProgressBar');
 695  
 696              var container = this.get('element'),
 697                  text = Lang.substitute(this.get(ARIA_TEXT_TEMPLATE),{
 698                      value:value,
 699                      minValue:this.get(MIN_VALUE),
 700                      maxValue:this.get(MAX_VALUE)
 701                  });
 702              container.setAttribute('aria-valuenow',value);
 703              container.setAttribute('aria-valuetext',text);
 704          }
 705      });
 706      /**
 707       * Collection of functions used to calculate the size of the bar.
 708       * One of this will be used depending on direction and whether animation is active.
 709       * @property _barSizeFunctions
 710       * @type {collection of functions}
 711       * @private
 712       * @static
 713       */
 714      var b = [{},{}];
 715      Prog._barSizeFunctions = b;
 716      
 717      b[0][DIRECTION_LTR] = function(value, pixelValue, barEl, anim) {
 718          Dom.setStyle(barEl,WIDTH,  pixelValue + PX);
 719          this.fireEvent(PROGRESS,value);
 720          this.fireEvent(COMPLETE,value);
 721      };
 722      b[0][DIRECTION_RTL] = function(value, pixelValue, barEl, anim) {
 723          Dom.setStyle(barEl,WIDTH,  pixelValue + PX);
 724          Dom.setStyle(barEl,'left',(this._barSpace - pixelValue) + PX);
 725          this.fireEvent(PROGRESS,value);
 726          this.fireEvent(COMPLETE,value);
 727      };
 728      b[0][DIRECTION_TTB] = function(value, pixelValue, barEl, anim) {
 729          Dom.setStyle(barEl,HEIGHT,  pixelValue + PX);
 730          this.fireEvent(PROGRESS,value);
 731          this.fireEvent(COMPLETE,value);
 732      };
 733      b[0][DIRECTION_BTT] = function(value, pixelValue, barEl, anim) {
 734          Dom.setStyle(barEl,HEIGHT,  pixelValue + PX);
 735          Dom.setStyle(barEl,'top',  (this._barSpace - pixelValue) + PX);
 736          this.fireEvent(PROGRESS,value);
 737          this.fireEvent(COMPLETE,value);
 738      };
 739      b[1][DIRECTION_LTR] = function(value, pixelValue, barEl, anim) {
 740          Dom.addClass(barEl,CLASS_ANIM);
 741          this._tweenFactor = (value - this._previousValue) / anim.totalFrames  / anim.duration;
 742          anim.attributes = {width:{ to: pixelValue }}; 
 743          anim.animate();
 744      };
 745      b[1][DIRECTION_RTL] = b[1][DIRECTION_LTR]; 
 746      b[1][DIRECTION_TTB] = function(value, pixelValue, barEl, anim) {
 747          Dom.addClass(barEl,CLASS_ANIM);
 748          this._tweenFactor = (value - this._previousValue) / anim.totalFrames  / anim.duration;
 749          anim.attributes = {height:{to: pixelValue}};
 750          anim.animate();
 751      };
 752      b[1][DIRECTION_BTT] = b[1][DIRECTION_TTB]; 
 753                  
 754  })();
 755  
 756  YAHOO.register("progressbar", YAHOO.widget.ProgressBar, {version: "2.9.0", build: "2800"});
 757  
 758  }, '2.9.0' ,{"requires": ["yui2-yahoo", "yui2-dom", "yui2-event", "yui2-element", "yui2-skin-sam-progressbar"], "optional": ["yui2-animation"]});