src/widgets/progressbar/js/jquery.mobile.tizen.progressbar.js

   1 /*
   2  * jQuery UI Progressbar @VERSION
   3  *
   4  * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
   5  * Dual licensed under the MIT or GPL Version 2 licenses.
   6  * http://jquery.org/license
   7  *
   8  * http://docs.jquery.com/UI/Progressbar
   9  *
  10  * Depends:
  11  *   jquery.ui.core.js
  12  *   jquery.ui.widget.js
  13  * Original file:
  14  *   jquery.ui.progressbar.js
  15  */
  16 /* This is from jquery ui plugin - progressbar 11/16/2011 */
  17
  18
  19 /**
  20         @class ProgressBar
  21         The progress bar widget shows a control that indicates the progress percentage of an on-going operation. This widget can be scaled to fit inside a parent container.
  22
  23         To add a progress bar widget to the application, use the following code:
  24
  25                 <div id="foo" data-role="progressbar"</div>
  26 */
  27 /**
  28         @event change
  29         The progress bar can define a callback for the change event, which is fired when the progress value is changed:
  30                 <div id="foo" data-role="progressbar"></div>
  31                 $("#foo").bind("change", function (ev, val)
  32                 {
  33                         Console.log("Value is changed to " + val);
  34                 });
  35 */
  36 /**
  37         @method value
  38         You can use the value method with the pickers to set or get the current default progress bar value:
  39
  40                 <div id="foo" data-role="progressbar"></div>
  41                 var oldVal = $("#foo").progress("option", "value");
  42                 $("#foo").progress("option", "value", 50);
  43 */
  44
  45 (function ( $, window, undefined ) {
  46
  47         $.widget( "tizen.progressbar", $.mobile.widget, {
  48                 options: {
  49                         value: 0,
  50                         max: 100
  51                 },
  52
  53                 min: 0,
  54
  55                 _create: function () {
  56                         this.element
  57                                 .addClass( "ui-progressbar" )
  58                                 .attr( {
  59                                         role: "progressbar",
  60                                         "aria-valuemin": this.min,
  61                                         "aria-valuemax": this.options.max,
  62                                         "aria-valuenow": this._value()
  63                                 } );
  64
  65                         this.valueDiv = $( "<div class='ui-progressbar-value'></div>" )
  66                                 .appendTo( this.element );
  67
  68                         this.valueDiv.wrap("<div class='ui-progress-bg'></div>");
  69
  70                         this.oldValue = this._value();
  71                         this._refreshValue();
  72                 },
  73
  74                 _destroy: function () {
  75                         this.element
  76                                 .removeClass( "ui-progressbar" )
  77                                 .removeAttr( "role" )
  78                                 .removeAttr( "aria-valuemin" )
  79                                 .removeAttr( "aria-valuemax" )
  80                                 .removeAttr( "aria-valuenow" );
  81
  82                         this.valueDiv.remove();
  83                 },
  84
  85                 value: function ( newValue ) {
  86                         if ( newValue === undefined ) {
  87                                 return this._value();
  88                         }
  89
  90                         this._setOption( "value", newValue );
  91                         return this;
  92                 },
  93
  94                 _setOption: function ( key, value ) {
  95                         if ( key === "value" ) {
  96                                 this.options.value = value;
  97                                 this._refreshValue();
  98                                 if ( this._value() === this.options.max ) {
  99                                         this._trigger( "complete" );
 100                                 }
 101                         }
 102                         // jquery.ui.widget.js MUST be updated to new version!
 103                         //this._super( "_setOption", key, value );
 104                 },
 105
 106                 _value: function () {
 107                         var val = this.options.value;
 108                         // normalize invalid value
 109                         if ( typeof val !== "number" ) {
 110                                 val = 0;
 111                         }
 112                         return Math.min( this.options.max, Math.max( this.min, val ) );
 113                 },
 114
 115                 _percentage: function () {
 116                         return 100 * this._value() / this.options.max;
 117                 },
 118
 119                 _refreshValue: function () {
 120                         var value = this.value(),
 121                                 percentage = this._percentage();
 122
 123                         if ( this.oldValue !== value ) {
 124                                 this.oldValue = value;
 125                                 this._trigger( "change" );
 126                         }
 127
 128                         this.valueDiv
 129                                 .toggle( value > this.min )
 130                                 .width( percentage.toFixed(0) + "%" );
 131                         this.element.attr( "aria-valuenow", value );
 132                 }
 133         } );
 134
 135         // auto self-init widgets
 136         $( document ).bind( "pagecreate", function ( e ) {
 137                 $( e.target ).find( ":jqmData(role='progressbar')" ).progressbar();
 138         } );
 139
 140 }( jQuery, this ) );