1 // ==========================================================================
  2 // Project:   The M-Project - Mobile HTML5 Application Framework
  3 // Copyright: (c) 2011 panacoda GmbH. All rights reserved.
  4 // Creator:   Dominik
  5 // Date:      09.08.2011
  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 /**
 12  * @class
 13  *
 14  * A dashboard itm view contains an icon and a label and can be used as the only
 15  * kind of childviews for a dashboard view.
 16  *
 17  * @extends M.View
 18  */
 19 M.DashboardItemView = M.View.extend(
 20 /** @scope M.DashboardItemView.prototype */ {
 21 
 22     /**
 23      * The type of this object.
 24      *
 25      * @type String
 26      */
 27     type: 'M.DashboardItemView',
 28 
 29     /**
 30      * The path/url to the dashboard item's icon.
 31      *
 32      * @type String
 33      */
 34     icon: null,
 35 
 36     /**
 37      * The label for the dashboard item. If no label is specified, the value will be
 38      * displayed instead.
 39      *
 40      * @type String
 41      */
 42     label: null,
 43 
 44     /**
 45      * This property specifies the recommended events for this type of view.
 46      *
 47      * @type Array
 48      */
 49     recommendedEvents: ['click', 'tap', 'taphold', 'touchstart', 'touchmove', 'touchend', 'mousedown', 'mousemove', 'mouseup'],
 50 
 51     /**
 52      * Renders a dashboard item.
 53      *
 54      * @private
 55      * @returns {String} The dashboard item view's html representation.
 56      */
 57     render: function() {
 58         //this.computeValue();
 59 
 60         /* reset html property */
 61         this.html = '';
 62 
 63         if(!this.icon) {
 64             M.Logger.log('Please provide an icon for a dashboard item view!', M.WARN);
 65             return this.html;
 66         }
 67 
 68         this.html += '<div id="' + this.id + '" class="tmp-dashboard-item" ' + this.style() + '>';
 69 
 70         /* add image */
 71         var image = M.ImageView.design({
 72             value: this.icon
 73         });
 74         this.html += image.render();
 75 
 76         /* add label */
 77         this.html += '<div class="tmp-dashboard-item-label">' + (this.label ? this.label : this.value) + '</div>';
 78 
 79         this.html += '</div>';
 80 
 81         return this.html;
 82     },
 83 
 84     /**
 85      * This method is responsible for registering events for view elements and its child views. It
 86      * basically passes the view's event-property to M.EventDispatcher to bind the appropriate
 87      * events.
 88      *
 89      * It extend M.View's registerEvents method with some special stuff for list item views and
 90      * their internal events.
 91      */
 92     registerEvents: function() {
 93         this.internalEvents = {
 94             taphold: {
 95                 target: this.parentView,
 96                 action: 'editDashboard'
 97             },
 98             tap: {
 99                 target: this.parentView,
100                 action: 'dispatchTapEvent'
101             }
102         }
103         this.bindToCaller(this, M.View.registerEvents)();
104     },
105 
106     /**
107      * Applies some style-attributes to the dashboard item.
108      *
109      * @private
110      * @returns {String} The button's styling as html representation.
111      */
112     style: function() {
113         var html = '';
114         if(this.cssStyle) {
115             html += 'style="' + this.cssStyle + '"';
116         }
117         return html;
118     }
119 
120 });