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