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-initVal:   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                 _create: function ( ) {
  76                 },
  77
  78                 _init: function ( ) {
  79                         var self = this,
  80                                 e = this.element,
  81                                 maxVal = e.data( "max" ),
  82                                 currentVal = e.attr( "data-initVal" ),
  83                                 i = 0,
  84                                 btn = null,
  85                                 buf = null,
  86                                 page_margin_class = 'page_n_margin_44';
  87
  88
  89                         // Set default values
  90                         if ( ! maxVal ) {
  91                                 maxVal = 1;
  92                         } else if ( maxVal > 10 ) {
  93                                 maxVal = 10;
  94                         }
  95                         e.data( "max", maxVal );
  96
  97                         if ( ! currentVal ) {
  98                                 currentVal = 1;
  99                         }
 100                         e.data( "current", currentVal );
 101
 102                         // Set pagecontrol class
 103                         e.addClass( 'pagecontrol' );
 104
 105                         // Set empty callback variable
 106                         self.changeCallback = null;
 107
 108                         // Calculate left/right margin
 109                         if ( maxVal <= 7 ) {
 110                                 page_margin_class = 'page_n_margin_44';
 111                         } else if ( maxVal == 8 ) {
 112                                 page_margin_class = 'page_n_margin_35';
 113                         } else if ( maxVal == 9 ) {
 114                                 page_margin_class = 'page_n_margin_26';
 115                         } else {
 116                                 page_margin_class = 'page_n_margin_19';
 117                         }
 118
 119                         // subroutine: find a child by value
 120                         function getBtn( value ) {
 121                                 return e.children( ":jqmData(value='" + value + "')" );
 122                         }
 123
 124                         // subroutine: change active button by value
 125                         function changeActiveBtn( newNum ) {
 126                                 var oldNum = e.data( 'current' );
 127
 128                                 // Check value
 129                                 if ( newNum < 1 || newNum > e.max ) {
 130                                         return false;
 131                                 }
 132
 133                                 getBtn( oldNum ).removeClass( 'page_n_' + oldNum )
 134                                                 .addClass( 'page_n_dot' );
 135                                 getBtn( newNum ).removeClass( 'page_n_dot' )
 136                                                 .addClass( 'page_n_' + newNum );
 137                         }
 138
 139                         function triggerChange( event ) {
 140                                 // Trigger change event
 141                                 e.trigger( 'change', $( this ).data( 'value' ) );
 142                         }
 143
 144                         // Add dot icons
 145                         for ( i = 1; i <= maxVal; i++ ) {
 146                                 btn = $( '<div class="page_n page_n_dot ' + page_margin_class + '" data-value="' + i + '"></div>' );
 147                                 e.append( btn );
 148                                 if ( i == currentVal ) {
 149                                         btn.removeClass( 'page_n_dot' )
 150                                                 .addClass( 'page_n_' + i );
 151                                 }
 152                                 // bind vclick event to each icon
 153                                 btn.bind( 'vclick', triggerChange );
 154                         }
 155
 156                         // pagecontrol element's change event
 157                         e.bind( 'change', function ( event, value ) {
 158                                 // 1. Change activated button
 159                                 changeActiveBtn( value );
 160
 161                                 // 2. Store new value (DO NOT change this order!)
 162                                 e.data( 'current', value );
 163
 164                         });
 165                 }
 166         });     // end: $.widget()
 167
 168
 169         $( document ).bind( "pagecreate create", function ( e ) {
 170                 $( $.tizen.pagecontrol.prototype.options.initSelector, e.target )
 171                         .not( ":jqmData(role='none'), :jqmData(role='nojs')" )
 172                         .pagecontrol( );
 173         });
 174
 175 } ( jQuery ) );
 176