2 * jQuery Mobile Widget @VERSION
4 * This software is licensed under the MIT licence (as defined by the OSI at
5 * http://www.opensource.org/licenses/mit-license.php)
7 * ***************************************************************************
8 * Copyright (C) 2011 by Intel Corporation Ltd.
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:
17 * The above copyright notice and this permission notice shall be included in
18 * all copies or substantial portions of the Software.
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 * ***************************************************************************
29 * Authors: Rijubrata Bhaumik <rijubrata.bhaumik@intel.com>
30 * Elliot Smith <elliot.smith@intel.com>
33 // Displays a day selector element: a control group with 7 check
34 // boxes which can be toggled on and off.
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.
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.
46 // If no ID is supplied for the dayselector, one will be generated
51 // value: Return the day numbers (0=Sunday, ..., 6=Saturday) of
52 // the selected checkboxes as an array.
54 // selectAll: Select all 7 days of the week by automatically "ticking"
55 // all of the checkboxes.
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;
64 // type: 'horizontal' (default) or 'vertical'; specifies the type
65 // of controlgroup to create around the day check boxes.
67 // days: array of day names, Sunday first; defaults to English day
68 // names; the first letters are used as text for the checkboxes
70 (function ( $, window, undefined ) {
71 $.widget( "tizen.dayselector", $.mobile.widget, {
73 initSelector: 'fieldset:jqmData(role="dayselector")',
87 _create: function () {
98 this.element.addClass( 'ui-dayselector' );
100 this.options.type = this.element.jqmData( 'type' ) || this.options.type;
102 this.options.theme = this.element.jqmData( 'theme' ) ||
103 this.options.theme ||
104 this.element.closest( ':jqmData(theme)').jqmData('theme' ) ||
107 days = this.options.days;
109 this.element.attr( 'data-' + $.mobile.ns + 'type', this.options.type );
111 parentId = this.element.attr( 'id' ) ||
112 'dayselector' + ( new Date() ).getTime();
114 for ( i = 0; i < days.length; i++ ) {
116 letter = day.slice(0, 1);
118 if ( window.Globalize ) {
119 //TODO may some modification required to support
120 // start week day difference upon cultures.
121 letter = window.Globalize.culture().calendars.standard.days.namesShort[i];
123 id = parentId + '_' + i;
124 labelClass = 'ui-dayselector-label-' + i;
126 checkbox = $( '<input type="checkbox"/>' )
130 label = $( '<label>' + letter + '</label>' )
132 .addClass( labelClass );
134 this.element.append( checkbox );
135 this.element.append( label );
138 this.checkboxes = this.element
140 .checkboxradio( { theme: this.options.theme } );
142 this.element.controlgroup( { excludeInvisible: false } );
145 _setOption: function ( key, value ) {
146 if ( key === "disabled" ) {
147 this._setDisabled( value );
151 _setDisabled: function ( value ) {
152 $.Widget.prototype._setOption.call(this, "disabled", value);
153 this.element[value ? "addClass" : "removeClass"]("ui-disabled");
157 var values = this.checkboxes.filter( ':checked' ).map( function () {
164 selectAll: function () {
166 .attr( 'checked', 'checked' )
167 .checkboxradio( 'refresh' );
170 } ); /* End of Widget */
172 // auto self-init widgets
173 $( document ).bind( "pagebeforecreate", function ( e ) {
174 var elts = $( $.tizen.dayselector.prototype.options.initSelector, e.target );
175 elts.not( ":jqmData(role='none'), :jqmData(role='nojs')" ).dayselector();