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

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