src/widgets/pagecontrol/js/jquery.mobile.tizen.pagecontrol.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: Youmin Ha <youmin.ha@samsung.com>
  24  */
  25
  26 /**
  27  * Pagecontrol widget shows number bullets, receives touch event for each bullet,
  28  * and runs your callback for each touch event.
  29  *
  30  * HTML Attributes:
  31  *
  32  *              Pagecontrol widget uses <div> element as an element itself. It takes following attributes.
  33  *
  34  *              data-role:      This widget must have 'pagecontrol' as data-role value.
  35  *              data-max:       Maximum nimber of pagecontrol bullets. This property must not exceed 10.
  36  *              data-value:     Initially selected value of the pagecontrol widget. Must between 1 and data-max. If this attribute is not given, initial value is set to 1.
  37  *
  38  * APIs:
  39  *
  40  *              setValue( value )
  41  *                      : Set current value. Actually triggers 'change' event to the widget with given value.
  42  *                      @param[in] value        A value to be changed.
  43  *
  44  *              getValue( )
  45  *                      : Get current value.
  46  *                      @return         Current value.
  47  *
  48  * Events:
  49  *
  50  *              change: Raised when a value is changed, by setting it by javascript, or by user's touch event.
  51  *
  52  * Examples:
  53  *
  54  *              <div id="foo" data-role="pagecontrol" data-max="10"></div>
  55  *              ...
  56  *              <script language="text/javascript">
  57  *
  58  *              // Bind callback to value change
  59  *              $('foo').bind('change', function (event, value) {
  60  *                      // event: 'change'
  61  *                      // value: changed value
  62  *              });
  63  *
  64  *              // Set a value to 3
  65  *              $('foo').trigger('change', 3);
  66  *              </script>
  67  */
  68
  69 (function ($, undefined) {
  70         $.widget( "tizen.pagecontrol", $.mobile.widget, {
  71                 options: {
  72                         initSelector: ":jqmData(role='pagecontrol')"
  73                 },
  74
  75                 // subroutine: find a child by value
  76                 _getBtn: function ( value ) {
  77                         return $( this.element ).children( ":jqmData(value='" + value + "')" );
  78                 },
  79
  80                 // subroutine: change active button by value
  81                 _changeActiveBtn: function ( newNum ) {
  82                         var oldNum = $( this.element ).data( 'value' );
  83
  84                         // Check value
  85                         if ( newNum < 1 || newNum > $( this.element ).data( "max" ) ) {
  86                                 return false;
  87                         }
  88
  89                         this._getBtn( oldNum ).removeClass( 'page_n_selected' )
  90                                         .addClass( 'page_n_unselected' );
  91                         this._getBtn( newNum ).removeClass( 'page_n_unselected' )
  92                                         .addClass( 'page_n_selected' );
  93                 },
  94
  95                 _triggerChange: function ( event ) {
  96                         // Trigger change event
  97                         $( this ).trigger( 'change', $( this ).data( 'value' ) );
  98                 },
  99
 100                 _create: function ( ) {
 101                 },
 102
 103                 _init: function ( ) {
 104                         var self = this,
 105                                 e = this.element,
 106                                 maxVal = e.data( "max" ),
 107                                 value = e.attr( "data-value" ),
 108                                 i = 0,
 109                                 btn = null,
 110                                 buf = null,
 111                                 page_margin_class = 'page_n_margin_42';
 112
 113
 114                         // Set default values
 115                         if ( ! maxVal ) {
 116                                 maxVal = 1;
 117                         } else if ( maxVal > 10 ) {
 118                                 maxVal = 10;
 119                         }
 120                         e.data( "max", maxVal );
 121
 122                         if ( ! value ) {
 123                                 value = 1;
 124                         }
 125                         e.data( "value", value );
 126
 127                         // Set pagecontrol class
 128                         e.addClass( 'pagecontrol' );
 129
 130                         // Set empty callback variable
 131                         self.changeCallback = null;
 132
 133                         // Add icon classes
 134                         for ( i = 1; i <= maxVal; i++ ) {
 135                                 btn = $( '<div class="page_n page_n_unselected ' + page_margin_class + '" data-value="' + i + '"></div>' );
 136                                 e.append( btn );
 137                                 if ( i == value ) {
 138                                         btn.removeClass( 'page_n_unselected' )
 139                                                 .addClass( 'page_n_selected' );
 140                                 }
 141                                 // bind vclick event to each icon
 142                                 btn.bind( 'vclick', this._triggerChange );
 143                         }
 144
 145                         // pagecontrol element's change event
 146                         e.bind( 'change', function ( event, value ) {
 147                                 // 1. Change activated button
 148                                 self._changeActiveBtn( value );
 149
 150                                 // 2. Store new value (DO NOT change this order!)
 151                                 e.data( 'value', value );
 152
 153                         });
 154                 },
 155
 156                 value: function ( val ) {
 157                         var pc = $( this.element );
 158
 159                         if ( val && typeof val == "number" ) {
 160                                 this._changeActiveBtn( val );
 161                                 pc.data( 'value', val );
 162                         } else {
 163                                 return pc.data( "value" );
 164                         }
 165                 }
 166
 167         });     // end: $.widget()
 168
 169
 170         $( document ).bind( "pagecreate create", function ( e ) {
 171                 $( $.tizen.pagecontrol.prototype.options.initSelector, e.target )
 172                         .not( ":jqmData(role='none'), :jqmData(role='nojs')" )
 173                         .pagecontrol( );
 174         });
 175
 176 } ( jQuery ) );
 177