1 // ==========================================================================
  2 // Project:   The M-Project - Mobile HTML5 Application Framework
  3 // Copyright: (c) 2010 M-Way Solutions GmbH. All rights reserved.
  4 //            (c) 2011 panacoda GmbH. All rights reserved.
  5 // Creator:   Dominik
  6 // Date:      30.11.2010
  7 // License:   Dual licensed under the MIT or GPL Version 2 licenses.
  8 //            http://github.com/mwaylabs/The-M-Project/blob/master/MIT-LICENSE
  9 //            http://github.com/mwaylabs/The-M-Project/blob/master/GPL-LICENSE
 10 // ==========================================================================
 11 
 12 /**
 13  * @class
 14  *
 15  * M.SelectionListItemView defines the prototype of any selection list item. It can only be used
 16  * as a child view for a selection list view.
 17  *
 18  * @extends M.View
 19  */
 20 M.SelectionListItemView = M.View.extend(
 21 /** @scope M.SelectionListItemView.prototype */ {
 22 
 23     /**
 24      * The type of this object.
 25      *
 26      * @type String
 27      */
 28     type: 'M.SelectionListItemView',
 29 
 30     /**
 31      * This property can be used to specify a label for a selection list item. If
 32      * set, the label will be displayed instead of the value, so you can use the
 33      * item's value as an internal value.
 34      *
 35      * E.g. if you use a selection list to select a color, you could set an item's
 36      * value to '#FF0000' but its label to 'Red'. If there is no label specified,
 37      * the value is displayed instead.
 38      *
 39      * @type String
 40      */
 41     label: null,
 42 
 43     /**
 44      * This property states whether a selection list item is selected or not.
 45      *
 46      * @type Boolean
 47      */
 48     isSelected: NO,
 49 
 50     /**
 51      * Renders a selection list item.
 52      * 
 53      * @private
 54      * @returns {String} The selection list item view's html representation.
 55      */
 56     render: function() {
 57         if(this.parentView && (this.parentView.selectionMode === M.SINGLE_SELECTION_DIALOG || this.parentView.selectionMode === M.MULTIPLE_SELECTION_DIALOG)) {
 58             this.html += '<option id="' + this.id + '" value="' + this.value + '"';
 59 
 60             if((this.isSelected && typeof(this.isSelected) === 'boolean') || (this.isSelected === String(YES))) {
 61                 if(!this.parentView.selection) {
 62                     this.html += ' selected="selected"';
 63                     this.parentView.selection = this;
 64                 }
 65             }
 66 
 67             this.html += '>';
 68             
 69             this.html += this.label ? this.label : this.value;
 70 
 71             this.html += '</option>';
 72         } else {
 73             this.html += '<input type="' + this.parentView.selectionMode + '" data-native-menu="false" id="' + this.id + '"';
 74 
 75             if(this.parentView.selectionMode === M.SINGLE_SELECTION) {
 76                 this.html += ' name="' + (this.parentView.name ? this.parentView.name : this.parentView.id) + '"';
 77             } else if(this.parentView.selectionMode === M.MULTIPLE_SELECTION) {
 78                 this.html += ' name="' + (this.name ? this.name : this.id) + '"';
 79             }
 80 
 81             if((this.isSelected && typeof(this.isSelected) === 'boolean') || (this.isSelected === String(YES))) {
 82                 if(this.parentView.selectionMode === M.SINGLE_SELECTION) {
 83                     if(!this.parentView.selection) {
 84                         this.html += ' checked="checked"';
 85                         this.parentView.selection = this;
 86                     }
 87                 } else {
 88                     this.html += ' checked="checked"';
 89 
 90                     if(!this.parentView.selection) {
 91                         this.parentView.selection = [];
 92                     }
 93                     this.parentView.selection.push(this);
 94                 }
 95             }
 96 
 97             this.html += '/>';
 98             this.html += '<label for="' + this.id + '">' + (this.label ? this.label : this.value) + '</label>';
 99         }
100 
101         return this.html;
102     },
103 
104     /**
105      * Triggers the rendering engine, jQuery mobile, to style the selection list item.
106      *
107      * @private
108      */
109     theme: function() {
110         if(this.parentView) {
111             if(this.parentView.selectionMode !== M.SINGLE_SELECTION_DIALOG && this.parentView.selectionMode !== M.MULTIPLE_SELECTION_DIALOG) {
112                 $('#' + this.id).checkboxradio();
113             }
114         }
115     }
116 
117 });