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

   1 /*
   2  * jQuery Mobile Widget @VERSION
   3  *
   4  * This software is licensed under the MIT licence (as defined by the OSI at
   5  * http://www.opensource.org/licenses/mit-license.php)
   6  *
   7  * ***************************************************************************
   8  * Copyright (C) 2011 by Intel Corporation Ltd.
   9  *
  10  * Permission is hereby granted, free of charge, to any person obtaining a
  11  * copy of this software and associated documentation files (the "Software"),
  12  * to deal in the Software without restriction, including without limitation
  13  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
  14  * and/or sell copies of the Software, and to permit persons to whom the
  15  * Software is furnished to do so, subject to the following conditions:
  16  *
  17  * The above copyright notice and this permission notice shall be included in
  18  * all copies or substantial portions of the Software.
  19  *
  20  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  21  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  22  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  23  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  24  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  25  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  26  * DEALINGS IN THE SOFTWARE.
  27  * ***************************************************************************
  28  *
  29  * Authors: Rijubrata Bhaumik <rijubrata.bhaumik@intel.com>
  30  *          Elliot Smith <elliot.smith@intel.com>
  31  */
  32
  33 // Displays a day selector element: a control group with 7 check
  34 // boxes which can be toggled on and off.
  35 //
  36 // The widget can be invoked on fieldset element with
  37 // $(element).dayselector() or by creating a fieldset element with
  38 // data-role="dayselector". If you try to apply it to an element
  39 // of type other than fieldset, results will be unpredictable.
  40 //
  41 // The default is to display the controlgroup horizontally; you can
  42 // override this by setting data-type="vertical" on the fieldset,
  43 // or by passing a type option to the constructor. The data-type
  44 // attribute has precedence.
  45 //
  46 // If no ID is supplied for the dayselector, one will be generated
  47 // automatically.
  48 //
  49 // Methods:
  50 //
  51 //     value: Return the day numbers (0=Sunday, ..., 6=Saturday) of
  52 //            the selected checkboxes as an array.
  53 //
  54 //     selectAll: Select all 7 days of the week by automatically "ticking"
  55 //                all of the checkboxes.
  56 //
  57 // Options:
  58 //
  59 //     theme : Override the data-theme of the widget; note that the
  60 //             order of preference is: 1) set from data-theme attribute;
  61 //             2) set from option; 3) set from closest parent data-theme;
  62 //             4) default to 'c'
  63 //
  64 //     type: 'horizontal' (default) or 'vertical'; specifies the type
  65 //           of controlgroup to create around the day check boxes.
  66 //
  67 //     days: array of day names, Sunday first; defaults to English day
  68 //           names; the first letters are used as text for the checkboxes
  69 /**
  70         @class Dayselector
  71         The day selector widget shows a grouped button on the screen for selecting weekdays. <br/> To add a day selector widget to the application, use the following code:
  72
  73                 <fieldset id="dayselector1" data-role="dayselector" data-type="horizontal">
  74                         <legend><!-- Day selector description --></legend>
  75                 </fieldset>
  76 */
  77 (function ( $, window, undefined ) {
  78         $.widget( "tizen.dayselector", $.mobile.widget, {
  79                 options: {
  80                         initSelector: 'fieldset:jqmData(role="dayselector")',
  81                         theme: null,
  82                         type: 'horizontal',
  83                         days: ['Sunday',
  84                                'Monday',
  85                                'Tuesday',
  86                                'Wednesday',
  87                                'Thursday',
  88                                'Friday',
  89                                'Saturday']
  90                 },
  91
  92                 defaultTheme: 's',
  93
  94                 _create: function () {
  95                         var days,
  96                                 parentId,
  97                                 i,
  98                                 day,
  99                                 letter,
 100                                 id,
 101                                 labelClass,
 102                                 checkbox,
 103                                 label;
 104
 105                         this.element.addClass( 'ui-dayselector' );
 106
 107                         this.options.type = this.element.jqmData( 'type' ) || this.options.type;
 108
 109                         this.options.theme = this.element.jqmData( 'theme' ) ||
 110                                                                         this.options.theme ||
 111                                                                         this.element.closest( ':jqmData(theme)').jqmData('theme' ) ||
 112                                                                         this.defaultTheme;
 113
 114                         days = this.options.days;
 115
 116                         this.element.attr( 'data-' + $.mobile.ns + 'type', this.options.type );
 117
 118                         parentId = this.element.attr( 'id' ) ||
 119                                                         'dayselector' + ( new Date() ).getTime();
 120
 121                         for ( i = 0; i < days.length; i++ ) {
 122                                 day = days[i];
 123                                 letter = day.slice(0, 1);
 124
 125                                 if ( window.Globalize ) {
 126                                         //TODO may some modification required to support
 127                                         //      start week day difference upon cultures.
 128                                         letter = window.Globalize.culture().calendars.standard.days.namesShort[i];
 129                                 }
 130                                 id = parentId + '_' + i;
 131                                 labelClass = 'ui-dayselector-label-' + i;
 132
 133                                 checkbox = $( '<input type="checkbox"/>' )
 134                                                         .attr( 'id', id )
 135                                                         .attr( 'value', i );
 136
 137                                 label = $( '<label>' + letter + '</label>' )
 138                                                 .attr( 'for', id )
 139                                                 .addClass( labelClass );
 140
 141                                 this.element.append( checkbox );
 142                                 this.element.append( label );
 143                         }
 144
 145                         this.checkboxes = this.element
 146                                                                 .find( ':checkbox' )
 147                                                                 .checkboxradio( { theme: this.options.theme } );
 148
 149                         this.element.controlgroup( { excludeInvisible: false } );
 150                 },
 151
 152                 _setOption: function ( key, value ) {
 153                         if ( key === "disabled" ) {
 154                                 this._setDisabled( value );
 155                         }
 156                 },
 157
 158                 _setDisabled: function ( value ) {
 159                         $.Widget.prototype._setOption.call(this, "disabled", value);
 160                         this.element[value ? "addClass" : "removeClass"]("ui-disabled");
 161                 },
 162
 163                 value: function () {
 164                         var values = this.checkboxes.filter( ':checked' ).map( function () {
 165                                 return this.value;
 166                         } ).get();
 167
 168                         return values;
 169                 },
 170
 171                 selectAll: function () {
 172                         this.checkboxes
 173                                 .attr( 'checked', 'checked' )
 174                                 .checkboxradio( 'refresh' );
 175                 }
 176
 177         } ); /* End of Widget */
 178
 179         // auto self-init widgets
 180         $( document ).bind( "pagebeforecreate", function ( e ) {
 181                 var elts = $( $.tizen.dayselector.prototype.options.initSelector, e.target );
 182                 elts.not( ":jqmData(role='none'), :jqmData(role='nojs')" ).dayselector();
 183         } );
 184
 185 }( jQuery, this ) );