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

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