koha-tt/intranet-tmpl/prog/en/lib/yui/progressbar/progressbar-debug.js

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