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