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