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