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

   1 /* ***************************************************************************
   2  * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
   3  *
   4  * Permission is hereby granted, free of charge, to any person obtaining a
   5  * copy of this software and associated documentation files (the "Software" ),
   6  * to deal in the Software without restriction, including without limitation
   7  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
   8  * and/or sell copies of the Software, and to permit persons to whom the
   9  * Software is furnished to do so, subject to the following conditions:
  10  *
  11  * The above copyright notice and this permission notice shall be included in
  12  * all copies or substantial portions of the Software.
  13  *
  14  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  15  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  16  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  17  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  18  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  19  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  20  * DEALINGS IN THE SOFTWARE.
  21  * ***************************************************************************
  22  *
  23  *      Author: Minkyu Kang <mk7.kang@samsung.com>
  24  *      Author: Koeun Choi <koeun.choi@samsung.com>
  25  */
  26
  27 /*
  28  * Progressing widget
  29  *
  30  * HTML Attributes
  31  *
  32  *  data-role: set to 'progressing'.
  33  *  data-style: 'circle' or 'pending'.
  34  *
  35  * APIs
  36  *
  37  *  show(): show the progressing.
  38  *  hide(): hide the progressing.
  39  *  running(boolean): start or stop the running.
  40  *
  41  * Events
  42  *
  43  *  N/A
  44  *
  45  * Examples
  46  *
  47  * <li data-role="list-divider">Progress Pending</li>
  48  * <li>
  49  *      <div data-role="progressing" data-style="pending" id="pending"></div>
  50  * </li>
  51  * <li data-role="list-divider">Progress ~ing</li>
  52  * <li>
  53  *      <div data-role="progressing" data-style="circle" id="progressing"></div>Loading..
  54  * </li>
  55  *
  56  * $("#pending").progress( "running", true );
  57  * $("#progressing").progress( "running", true );
  58  *
  59  */
  60
  61 /**
  62         @class Progress
  63         The progress widget shows that an operation is in progress. <br/>To add a progress widget to the application, use the following code:
  64
  65                 <div data-role="progress" data-style="circle"></div>
  66
  67         The progress widget can define a callback for the change event, which is fired when the progress value is changed:
  68
  69                 <div id="foo" data-role="progress"></div>
  70                 $("#foo").bind("change", function(ev, val)
  71                 {
  72                         Console.log("Value is changed to " + val);
  73                 });
  74 */
  75 /**
  76         @property {String} data-style
  77         Sets the style of the progress widget. The style options are pending (pending progress style) and circle (circular progress status style).
  78 */
  79 /**
  80         @method value
  81         The value method is used to set or get the current default progress widget value:
  82
  83                 <div id="foo" data-role="progress"></div>
  84                 var oldVal = $("#foo").progress("option", "value");
  85                 $("#foo").progress("option", "value", 50);
  86 */
  87 /**
  88         @method running
  89         The running method is used to set or get the current running state of the pending or circular progress widget:
  90
  91                 <div id="foo" data-role="progress" data-style="pending"></div>
  92                 var currentRunning = $("#foo").progress("option", "running");
  93                 $("#foo").progress("option", "running", true);
  94 */
  95
  96 (function ( $, window, undefined ) {
  97         $.widget( "tizen.progress", $.mobile.widget, {
  98                 options: {
  99                         style: "circle",
 100                         running: false
 101                 },
 102
 103                 show: function () {
 104                         $( this.element ).show();
 105                 },
 106
 107                 hide: function () {
 108                         $( this.element ).hide();
 109                 },
 110
 111                 _start: function () {
 112                         if ( !this.init ) {
 113                                 $( this.element ).append( this.html );
 114                                 this.init = true;
 115                         }
 116
 117                         this.show();
 118
 119                         $( this.element )
 120                                 .find( ".ui-progress-" + this.options.style )
 121                                 .addClass( this.runningClass );
 122                 },
 123
 124                 _stop: function () {
 125                         $( this.element )
 126                                 .find( ".ui-progress-" + this.options.style )
 127                                 .removeClass( this.runningClass );
 128                 },
 129
 130                 running: function ( running ) {
 131                         if ( running === undefined ) {
 132                                 return this.options.running;
 133                         }
 134
 135                         this._setOption( "running", running );
 136                 },
 137
 138                 _setOption: function ( key, value ) {
 139                         if ( key === "running" ) {
 140                                 if ( typeof value !== "boolean" ) {
 141                                         window.alert( "running value MUST be boolean type!" );
 142                                         return;
 143                                 }
 144
 145                                 this.options.running = value;
 146                                 this._refresh();
 147                         }
 148                 },
 149
 150                 _refresh: function () {
 151                         if ( this.options.running ) {
 152                                 this._start();
 153                         } else {
 154                                 this._stop();
 155                         }
 156                 },
 157
 158                 _create: function () {
 159                         var self = this,
 160                                 element = this.element,
 161                                 style = element.jqmData( "style" ),
 162                                 _html,
 163                                 runningClass;
 164
 165                         if ( style ) {
 166                                 this.options.style = style;
 167                         } else {
 168                                 style = this.options.style;
 169                         }
 170
 171                         _html = '<div class="ui-progress-container-' + style + '">' +
 172                                         '<div class="ui-progress-' + style + '"></div>' +
 173                                 '</div>';
 174
 175                         if ( style === "pending" ) {
 176                                 _html = '<div class="ui-progress-pending-bg">' + _html + '</div>';
 177                         }
 178
 179                         this.html = $( _html );
 180
 181                         if ( style === "pending" ) {
 182                                 this.html.wrap('<div class="ui-progress-bg"></div>');
 183                         }
 184
 185                         runningClass = "ui-progress-" + style + "-running";
 186
 187                         $.extend( this, {
 188                                 init: false,
 189                                 runningClass: runningClass
 190                         } );
 191                         this._refresh();
 192                 }
 193         } ); /* End of widget */
 194
 195         $( document ).bind( "pagecreate", function ( e ) {
 196                 $( e.target ).find( ":jqmData(role='progressing')" ).progress();
 197         } );
 198 }( jQuery, this ));