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:      03.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 m_require('ui/button.js');
 13 
 14 /**
 15  * @class
 16  *
 17  * This is the prototype for any list item view. It can only be used as child view of a list
 18  * view (M.ListView).
 19  *
 20  * @extends M.View
 21  */
 22 M.ListItemView = M.View.extend(
 23 /** @scope M.ListItemView.prototype */ {
 24 
 25     /**
 26      * The type of this object.
 27      *
 28      * @type String
 29      */
 30     type: 'M.ListItemView',
 31 
 32     /**
 33      * States whether the list view item is currently in edit mode or not. This is mainly used by
 34      * the built-in toggleRemove() functionality of list views.
 35      *
 36      * @type Boolean
 37      */
 38     inEditMode: NO,
 39 
 40     /**
 41      * This property determines whether a list item has one single action that is triggered
 42      * once there is a click anywhere inside the list item or if there are specific actions
 43      * defined for single ui elements within one list item.
 44      *
 45      * @type Boolean
 46      */
 47     hasSingleAction: YES,
 48 
 49     /**
 50      * This property contains the list item's delete button that is automatically shown if the
 51      * list view's built-in toggleRemove() functionality is used.
 52      *
 53      * @type M.ButtonView
 54      */
 55     deleteButton: M.ButtonView.design({
 56         icon: 'delete',
 57         value: ''
 58     }),
 59 
 60     /**
 61      * This property determines whether the list item is a divider or not.
 62      *
 63      * @type Boolean
 64      */
 65     isDivider: NO,
 66 
 67     /**
 68      * This property specifies the recommended events for this type of view.
 69      *
 70      * @type Array
 71      */
 72     recommendedEvents: ['tap'],
 73 
 74     /**
 75      * This property can be used to specify whether a selection list item can be selected or not. Note, that this
 76      * only affects styling stuff. If set to NO, you still can apply e.g. tap events.
 77      */
 78     isSelectable: YES,
 79 
 80     /**
 81      * Renders a list item as an li-tag. The rendering is initiated by the parent list view.
 82      *
 83      * @private
 84      * @returns {String} The list item view's html representation.
 85      */
 86     render: function() {
 87         this.html = '<li id="' + this.id + '"' + this.style();
 88 
 89         if(this.isDivider) {
 90             this.html += ' data-role="list-divider"';
 91         }
 92 
 93         this.html += '>';
 94 
 95         if(this.childViews) {
 96             if(this.inEditMode) {
 97                 this.html += '<a href="#">';
 98                 this.renderChildViews();
 99                 this.html += '</a>';
100 
101                 this.html += this.deleteButton.render();
102             } else {
103                 if(this.isSelectable) {
104                     this.html += '<a href="#">';
105                     this.renderChildViews();
106                     this.html += '</a>';
107                 } else {
108                     this.renderChildViews();
109                 }
110             }
111         } else if(this.value) {
112             this.html += this.value;
113         }
114 
115         this.html += '</li>';
116         
117         return this.html;
118     },
119 
120     /**
121      * This method is responsible for registering events for view elements and its child views. It
122      * basically passes the view's event-property to M.EventDispatcher to bind the appropriate
123      * events.
124      *
125      * It extend M.View's registerEvents method with some special stuff for list item views and
126      * their internal events.
127      */
128     registerEvents: function() {
129         this.internalEvents = {
130             tap: {
131                 target: this.parentView,
132                 action: 'setActiveListItem'
133             }
134         }
135         this.bindToCaller(this, M.View.registerEvents)();
136     },
137 
138     /**
139      * Applies some style-attributes to the list item.
140      *
141      * @private
142      * @returns {String} The list item's styling as html representation.
143      */
144     style: function() {
145         var html = '';
146         if(this.cssClass) {
147             html += ' class="' + this.cssClass + '"';
148         }
149         return html;
150     }
151 
152 });