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