src/widgets/pagecontrol/js/jquery.mobile.tizen.pagecontrol.js

   1 /*
   2  *      Author: Youmin Ha <youmin.ha@samsung.com>
   3 */
   4
   5 /**
   6  * Pagecontrol widget shows number bullets, receives touch event for each bullet,
   7  * and runs your callback for each touch event.
   8  *
   9  * HTML Attributes:
  10  *
  11  *              Pagecontrol widget uses <div> element as an element itself. It takes following attributes.
  12  *
  13  *              data-role:      This widget must have 'pagecontrol' as data-role value.
  14  *              data-max:       Maximum nimber of pagecontrol bullets. This property must not exceed 10.
  15  *              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.
  16  *
  17  * APIs:
  18  *
  19  *              setValue( value )
  20  *                      : Set current value. Actually triggers 'change' event to the widget with given value.
  21  *                      @param[in] value        A value to be changed.
  22  *
  23  *              getValue( )
  24  *                      : Get current value.
  25  *                      @return         Current value.
  26  *
  27  * Events:
  28  *
  29  *              change: Raised when a value is changed, by setting it by javascript, or by user's touch event.
  30  *
  31  * Examples:
  32  *
  33  *              <div id="foo" data-role="pagecontrol" data-max="10"></div>
  34  *              ...
  35  *              <script language="text/javascript">
  36  *
  37  *              // Bind callback to value change
  38  *              $('foo').bind('change', function(event, value) {
  39  *                      // event: 'change'
  40  *                      // value: changed value
  41  *              });
  42  *
  43  *              // Set a value to 3
  44  *              $('foo').trigger('change', 3);
  45  *              </script>
  46  */
  47
  48 (function ($, undefined) {
  49
  50 $.widget("tizen.pagecontrol", $.mobile.widget, {
  51         options: {
  52                 initSelector: ":jqmData(role='pagecontrol')",
  53         },
  54
  55         _create: function () {
  56         },
  57
  58         _init: function() {
  59                 var self = this,
  60                         e = this.element,
  61                         maxVal = e.data("max"),
  62                         currentVal = e.attr("data-initVal"),
  63                         i = 0,
  64                         btn = null,
  65                         buf = null,
  66                         page_margin_class = 'page_n_margin_44';
  67
  68
  69                 // Set default values
  70                 if(!maxVal) {
  71                         maxVal = 1;
  72                 } else if(maxVal > 10) {
  73                         maxVal = 10;
  74                 }
  75                 e.data("max", maxVal);
  76
  77                 if(!currentVal) {
  78                         currentVal = 1;
  79                 }
  80                 e.data("current", currentVal);
  81
  82                 // Set pagecontrol class
  83                 e.addClass('pagecontrol');
  84
  85                 // Set empty callback variable
  86                 self.changeCallback = null;
  87
  88                 // Calculate left/right margin
  89                 if(maxVal <= 7) {
  90                         page_margin_class = 'page_n_margin_44';
  91                 } else if(maxVal == 8) {
  92                         page_margin_class = 'page_n_margin_35';
  93                 } else if(maxVal == 9) {
  94                         page_margin_class = 'page_n_margin_26';
  95                 } else {
  96                         page_margin_class = 'page_n_margin_19';
  97                 }
  98
  99                 // subroutine: find a child by value
 100                 function getBtn(value) {
 101                         return e.children(":jqmData(value='" + value + "')");
 102                 }
 103
 104                 // subroutine: change active button by value
 105                 function changeActiveBtn(newNum) {
 106                         // Check value
 107                         if(newNum < 1 || newNum > e.max) return false;
 108
 109                         // get old and new btns
 110                         var oldNum = e.data('current');
 111
 112                         getBtn(oldNum).removeClass('page_n_' + oldNum)
 113                                         .addClass('page_n_dot');
 114                         getBtn(newNum).removeClass('page_n_dot')
 115                                         .addClass('page_n_' + newNum);
 116                 }
 117
 118                 // Add dot icons
 119                 for(i=1; i<=maxVal; i++) {
 120                         btn = $('<div class="page_n page_n_dot ' + page_margin_class + '" data-value="' + i + '"></div>');
 121                         e.append(btn);
 122                         if(i == currentVal) {
 123                                 btn.removeClass('page_n_dot').
 124                                         addClass('page_n_'+i);
 125                         }
 126                         // bind vclick event to each icon
 127                         btn.bind('vclick', function(event) {
 128                                 // Trigger change event
 129                                 e.trigger('change', $(this).data('value'));
 130                         });
 131                 }
 132
 133                 // pagecontrol element's change event
 134                 e.bind('change', function(event, value) {
 135                         // 1. Change activated button
 136                         changeActiveBtn(value);
 137
 138                         // 2. Store new value (DO NOT change this order!)
 139                         e.data('current', value);
 140
 141                 });
 142         },
 143 });     // end: $.widget()
 144
 145
 146 $(document).bind("pagecreate create", function(e) {
 147                 $($.tizen.pagecontrol.prototype.options.initSelector, e.target)
 148                 .not(":jqmData(role='none'), :jqmData(role='nojs')")
 149                 .pagecontrol();
 150 });
 151
 152 }) (jQuery);