tizen-web-ui-fw/latest/js/src/widgets/jquery.mobile.tizen.progress.js

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