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 /**
  70         @class PageControl
  71         The page control widget shows a numbered list on the screen. It can receive a touch event from each list item, and run a callback for each touch event. <br/>To add a page control widget to the application, use the following code:
  72
  73                 <div id="foo" data-role="pagecontrol" data-max="5" data-value ="3"></div>
  74                 $("#foo").bind("change", function(ev, val)
  75                 {
  76                                 Console.log("Value is changed to " + val);
  77                 } );
  78
  79         The page control can define a callback for the change event, which is fired when a list item value is changed.<br/> You can use the value method with the page control to set or get the current page control value:
  80
  81                 <div id="foo" data-role="pagecontrol"></div>
  82                 var oldVal = $("#foo").pagecontrol("value");
  83                 $("#foo").pagecontrol("value", 2);
  84 */
  85 /**
  86         @property {Number} data-max
  87         Defines the number of items in the list.
  88         The value must be between 1 and 10, and the default value is 1.
  89 */
  90 /**
  91         @property {Number} data-value
  92         Defines the number of the initially selected list item.
  93         The value must be between 1 and data-max, and the default value is 1.
  94 */
  95
  96 (function ($, undefined) {
  97         $.widget( "tizen.pagecontrol", $.mobile.widget, {
  98                 options: {
  99                         initSelector: ":jqmData(role='pagecontrol')"
 100                 },
 101
 102                 // subroutine: find a child by value
 103                 _getBtn: function ( value ) {
 104                         return $( this.element ).children( ":jqmData(value='" + value + "')" );
 105                 },
 106
 107                 // subroutine: change active button by value
 108                 _changeActiveBtn: function ( newNum ) {
 109                         var oldNum = $( this.element ).data( 'value' );
 110
 111                         // Check value
 112                         if ( newNum < 1 || newNum > $( this.element ).data( "max" ) ) {
 113                                 return false;
 114                         }
 115
 116                         this._getBtn( oldNum ).removeClass( 'page_n_selected' )
 117                                         .addClass( 'page_n_unselected' );
 118                         this._getBtn( newNum ).removeClass( 'page_n_unselected' )
 119                                         .addClass( 'page_n_selected' );
 120                 },
 121
 122                 _triggerChange: function ( event ) {
 123                         // Trigger change event
 124                         $( this ).trigger( 'change', $( this ).data( 'value' ) );
 125                 },
 126
 127                 _create: function ( ) {
 128                 },
 129
 130                 _init: function ( ) {
 131                         var self = this,
 132                                 e = this.element,
 133                                 maxVal = e.data( "max" ),
 134                                 value = e.attr( "data-value" ),
 135                                 i = 0,
 136                                 btn = null,
 137                                 buf = null,
 138                                 page_margin_class = 'page_n_margin_42';
 139
 140
 141                         // Set default values
 142                         if ( ! maxVal ) {
 143                                 maxVal = 1;
 144                         } else if ( maxVal > 10 ) {
 145                                 maxVal = 10;
 146                         }
 147                         e.data( "max", maxVal );
 148
 149                         if ( ! value ) {
 150                                 value = 1;
 151                         }
 152                         e.data( "value", value );
 153
 154                         // Set pagecontrol class
 155                         e.addClass( 'pagecontrol' );
 156
 157                         // Set empty callback variable
 158                         self.changeCallback = null;
 159
 160                         // Add icon classes
 161                         for ( i = 1; i <= maxVal; i++ ) {
 162                                 btn = $( '<div class="page_n page_n_unselected ' + page_margin_class + '" data-value="' + i + '"></div>' );
 163                                 e.append( btn );
 164                                 if ( i == value ) {
 165                                         btn.removeClass( 'page_n_unselected' )
 166                                                 .addClass( 'page_n_selected' );
 167                                 }
 168                                 // bind vclick event to each icon
 169                                 btn.bind( 'vclick', this._triggerChange );
 170                         }
 171
 172                         // pagecontrol element's change event
 173                         e.bind( 'change', function ( event, value ) {
 174                                 // 1. Change activated button
 175                                 self._changeActiveBtn( value );
 176
 177                                 // 2. Store new value (DO NOT change this order!)
 178                                 e.data( 'value', value );
 179
 180                         });
 181                 },
 182
 183                 value: function ( val ) {
 184                         var pc = $( this.element );
 185
 186                         if ( val && typeof val == "number" ) {
 187                                 this._changeActiveBtn( val );
 188                                 pc.data( 'value', val );
 189                         } else {
 190                                 return pc.data( "value" );
 191                         }
 192                 }
 193
 194         });     // end: $.widget()
 195
 196
 197         $( document ).bind( "pagecreate create", function ( e ) {
 198                 $( $.tizen.pagecontrol.prototype.options.initSelector, e.target )
 199                         .not( ":jqmData(role='none'), :jqmData(role='nojs')" )
 200                         .pagecontrol( );
 201         });
 202
 203 } ( jQuery ) );
 204