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