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 (function ( $, window, undefined ) {
  62         $.widget( "tizen.progress", $.mobile.widget, {
  63                 options: {
  64                         style: "circle",
  65                         running: false
  66                 },
  67
  68                 show: function () {
  69                         $( this.element ).show();
  70                 },
  71
  72                 hide: function () {
  73                         $( this.element ).hide();
  74                 },
  75
  76                 _start: function () {
  77                         if ( !this.init ) {
  78                                 $( this.element ).append( this.html );
  79                                 this.init = true;
  80                         }
  81
  82                         this.show();
  83
  84                         $( this.element )
  85                                 .find( ".ui-progress-" + this.options.style )
  86                                 .addClass( this.runningClass );
  87                 },
  88
  89                 _stop: function () {
  90                         $( this.element )
  91                                 .find( ".ui-progress-" + this.options.style )
  92                                 .removeClass( this.runningClass );
  93                 },
  94
  95                 running: function ( running ) {
  96                         if ( running === undefined ) {
  97                                 return this.options.running;
  98                         }
  99
 100                         this._setOption( "running", running );
 101                 },
 102
 103                 _setOption: function ( key, value ) {
 104                         if ( key === "running" ) {
 105                                 if ( typeof value !== "boolean" ) {
 106                                         window.alert( "running value MUST be boolean type!" );
 107                                         return;
 108                                 }
 109
 110                                 this.options.running = value;
 111                                 this._refresh();
 112                         }
 113                 },
 114
 115                 _refresh: function () {
 116                         if ( this.options.running ) {
 117                                 this._start();
 118                         } else {
 119                                 this._stop();
 120                         }
 121                 },
 122
 123                 _create: function () {
 124                         var self = this,
 125                                 element = this.element,
 126                                 style = element.jqmData( "style" ),
 127                                 runningClass;
 128
 129                         if ( style ) {
 130                                 this.options.style = style;
 131                         } else {
 132                                 style = this.options.style;
 133                         }
 134
 135                         this.html = $( '<div class="ui-progress-container-' + style + '">' +
 136                                                 '<div class="ui-progress-' + style + '"></div>' +
 137                                         '</div>' );
 138
 139                         runningClass = "ui-progress-" + style + "-running";
 140
 141                         $.extend( this, {
 142                                 init: false,
 143                                 runningClass: runningClass
 144                         } );
 145                         this._refresh();
 146                 }
 147         } ); /* End of widget */
 148
 149         $( document ).bind( "pagecreate", function ( e ) {
 150                 $( e.target ).find( ":jqmData(role='progressing')" ).progress();
 151         } );
 152 }( jQuery, this ));