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 /**
  68         @property {String} data-style
  69         Sets the style of the progress widget. The style options are pending (pending progress style) and circle (circular progress status style).
  70 */
  71 /**
  72         @method running
  73         The running method is used to set the current running state of the pending or circular progress widget:
  74
  75                 <div id="foo" data-role="progress" data-style="pending"></div>
  76                 $("#foo").progress("running", true);
  77 */
  78 /**
  79         @method show
  80         The show method is used to show the pending or circular progress widget:
  81
  82                 <div id="foo" data-role="progress" data-style="pending"></div>
  83                 $("#foo").progress("show");
  84 */
  85 /**
  86         @method hide
  87         The show method is used to hide the pending or circular progress widget:
  88
  89                 <div id="foo" data-role="progress" data-style="pending"></div>
  90                 $("#foo").progress("hide");
  91 */
  92
  93 (function ( $, window, undefined ) {
  94         $.widget( "tizen.progress", $.mobile.widget, {
  95                 options: {
  96                         style: "circle",
  97                         running: false
  98                 },
  99
 100                 show: function () {
 101                         $( this.element ).show();
 102                 },
 103
 104                 hide: function () {
 105                         $( this.element ).hide();
 106                 },
 107
 108                 _start: function () {
 109                         if ( !this.init ) {
 110                                 $( this.element ).append( this.html );
 111                                 this.init = true;
 112                         }
 113
 114                         this.show();
 115
 116                         $( this.element )
 117                                 .find( ".ui-progress-" + this.options.style )
 118                                 .addClass( this.runningClass );
 119                 },
 120
 121                 _stop: function () {
 122                         $( this.element )
 123                                 .find( ".ui-progress-" + this.options.style )
 124                                 .removeClass( this.runningClass );
 125                 },
 126
 127                 running: function ( running ) {
 128                         if ( running === undefined ) {
 129                                 return this.options.running;
 130                         }
 131
 132                         this._setOption( "running", running );
 133                 },
 134
 135                 _setOption: function ( key, value ) {
 136                         if ( key === "running" ) {
 137                                 if ( typeof value !== "boolean" ) {
 138                                         window.alert( "running value MUST be boolean type!" );
 139                                         return;
 140                                 }
 141
 142                                 this.options.running = value;
 143                                 this._refresh();
 144                         }
 145                 },
 146
 147                 _refresh: function () {
 148                         if ( this.options.running ) {
 149                                 this._start();
 150                         } else {
 151                                 this._stop();
 152                         }
 153                 },
 154
 155                 _create: function () {
 156                         var self = this,
 157                                 element = this.element,
 158                                 style = element.jqmData( "style" ),
 159                                 _html,
 160                                 runningClass;
 161
 162                         if ( style ) {
 163                                 this.options.style = style;
 164                         } else {
 165                                 style = this.options.style;
 166                         }
 167
 168                         if ( style == "circle" ) {
 169                                 _html = '<div class="ui-progress-container-circle">' +
 170                                                 '<div class="ui-progress-circle"></div>' +
 171                                         '</div>';
 172                         } else if ( style === "pending" ) {
 173                                 _html = '<div class="ui-progressbar">' +
 174                                                 '<div class="ui-progressbar-bg">' +
 175                                                         '<div class="ui-progress-pending"></div>' +
 176                                                 '</div">' +
 177                                         '</div>';
 178                         }
 179
 180                         this.html = $( _html );
 181
 182                         if ( style === "pending" ) {
 183                                 this.html.wrap('<div class="ui-progress-bg"></div>');
 184                         }
 185
 186                         runningClass = "ui-progress-" + style + "-running";
 187
 188                         $.extend( this, {
 189                                 init: false,
 190                                 runningClass: runningClass
 191                         } );
 192                         this._refresh();
 193                 }
 194         } ); /* End of widget */
 195
 196         $( document ).bind( "pagecreate", function ( e ) {
 197                 $( e.target ).find( ":jqmData(role='progressing')" ).progress();
 198         } );
 199 }( jQuery, this ));