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