include/javascript/yui/build/progressbar/progressbar.js

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