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 (function ($, window, undefined) {
  71     $.widget("tizen.dayselector", $.mobile.widget, {
  72         options: {
  73             initSelector: 'fieldset:jqmData(role="dayselector")',
  74             theme: null,
  75             type: 'horizontal',
  76             days: ['Sunday',
  77                    'Monday',
  78                    'Tuesday',
  79                    'Wednesday',
  80                    'Thursday',
  81                    'Friday',
  82                    'Saturday']
  83         },
  84
  85         defaultTheme: 'c',
  86
  87         _create: function () {
  88             this.element.addClass('ui-dayselector');
  89
  90             this.options.type = this.element.jqmData('type') || this.options.type;
  91
  92             this.options.theme = this.element.jqmData('theme') ||
  93                                  this.options.theme ||
  94                                  this.element.closest(':jqmData(theme)').jqmData('theme') ||
  95                                  this.defaultTheme;
  96
  97             var days = this.options.days;
  98
  99             this.element.attr('data-' + $.mobile.ns + 'type', this.options.type);
 100
 101             var parentId = this.element.attr('id') ||
 102                            'dayselector' + (new Date()).getTime();
 103
 104             for (var i = 0; i < days.length; i++) {
 105                 var day = days[i];
 106                 var letter = day.slice(0, 1);
 107                                 if ( Globalize ) {
 108                                         //TODO may some modification required to support
 109                                         //      start week day difference upon cultures.
 110                                         letter = Globalize.culture().calendars.standard.days.namesShort[i];
 111                                 }
 112                 var id = parentId + '_' + i;
 113                 var labelClass = 'ui-dayselector-label-' + i;
 114
 115                 var checkbox = $('<input type="checkbox"/>')
 116                                .attr('id', id)
 117                                .attr('value', i);
 118
 119                 var label = $('<label>' + letter + '</label>')
 120                             .attr('for', id)
 121                             .addClass(labelClass);
 122
 123                 this.element.append(checkbox);
 124                 this.element.append(label);
 125             }
 126
 127             this.checkboxes = this.element.find(':checkbox')
 128                                           .checkboxradio({theme: this.options.theme});
 129
 130             this.element.controlgroup({excludeInvisible: false});
 131         },
 132
 133         _setOption: function(key, value) {
 134             if (key === "disabled")
 135                 this._setDisabled(value);
 136         },
 137
 138         _setDisabled: function(value) {
 139             $.Widget.prototype._setOption.call(this, "disabled", value);
 140             this.element[value ? "addClass" : "removeClass"]("ui-disabled");
 141         },
 142
 143         value: function () {
 144             var values = this.checkboxes.filter(':checked').map(function () {
 145                 return this.value;
 146             }).get();
 147
 148             return values;
 149         },
 150
 151         selectAll: function () {
 152             this.checkboxes.attr('checked', 'checked')
 153                            .checkboxradio('refresh');
 154         }
 155
 156     }); /* End of Widget */
 157
 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();
 162     });
 163
 164 })(jQuery, this);