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 });