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 () {
88 this.element.addClass('ui-dayselector');
90 this.options.type = this.element.jqmData('type') || this.options.type;
92 this.options.theme = this.element.jqmData('theme') ||
94 this.element.closest(':jqmData(theme)').jqmData('theme') ||
97 var days = this.options.days;
99 this.element.attr('data-' + $.mobile.ns + 'type', this.options.type);
101 var parentId = this.element.attr('id') ||
102 'dayselector' + (new Date()).getTime();
104 for (var i = 0; i < days.length; i++) {
106 var letter = day.slice(0, 1);
108 //TODO may some modification required to support
109 // start week day difference upon cultures.
110 letter = Globalize.culture().calendars.standard.days.namesShort[i];
112 var id = parentId + '_' + i;
113 var labelClass = 'ui-dayselector-label-' + i;
115 var checkbox = $('<input type="checkbox"/>')
119 var label = $('<label>' + letter + '</label>')
121 .addClass(labelClass);
123 this.element.append(checkbox);
124 this.element.append(label);
127 this.checkboxes = this.element.find(':checkbox')
128 .checkboxradio({theme: this.options.theme});
130 this.element.controlgroup({excludeInvisible: false});
133 _setOption: function(key, value) {
134 if (key === "disabled")
135 this._setDisabled(value);
138 _setDisabled: function(value) {
139 $.Widget.prototype._setOption.call(this, "disabled", value);
140 this.element[value ? "addClass" : "removeClass"]("ui-disabled");
144 var values = this.checkboxes.filter(':checked').map(function () {
151 selectAll: function () {
152 this.checkboxes.attr('checked', 'checked')
153 .checkboxradio('refresh');
156 }); /* End of Widget */
158 // auto self-init widgets
159 $(document).bind("pagebeforecreate", function (e) {
160 var elts = $($.tizen.dayselector.prototype.options.initSelector, e.target);
161 elts.not(":jqmData(role='none'), :jqmData(role='nojs')").dayselector();