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