1 // ========================================================================== 2 // Project: The M-Project - Mobile HTML5 Application Framework 3 // Copyright: (c) 2010 M-Way Solutions GmbH. All rights reserved. 4 // (c) 2011 panacoda GmbH. All rights reserved. 5 // Creator: Dominik 6 // Date: 04.11.2010 7 // License: Dual licensed under the MIT or GPL Version 2 licenses. 8 // http://github.com/mwaylabs/The-M-Project/blob/master/MIT-LICENSE 9 // http://github.com/mwaylabs/The-M-Project/blob/master/GPL-LICENSE 10 // ========================================================================== 11 12 /** 13 * @class 14 * 15 * The is the prototype of any image view. It basically renders a simple image and 16 * can be styled using a css class. 17 * 18 * @extends M.View 19 */ 20 M.ImageView = M.View.extend( 21 /** @scope M.ImageView.prototype */ { 22 23 /** 24 * The type of this object. 25 * 26 * @type String 27 */ 28 type: 'M.ImageView', 29 30 /** 31 * This property specifies the recommended events for this type of view. 32 * 33 * @type Array 34 */ 35 recommendedEvents: ['click', 'tap', 'error', 'load'], 36 37 /** 38 * Renders an image view based on the specified layout. 39 * 40 * @private 41 * @returns {String} The image view's html representation. 42 */ 43 render: function() { 44 this.computeValue(); 45 this.html += '<img id="' + this.id + '" src="' + (this.value && typeof(this.value) === 'string' ? this.value : '') + '"' + this.style() + '>'; 46 return this.html; 47 }, 48 49 /** 50 * This method is responsible for registering events for view elements and its child views. It 51 * basically passes the view's event-property to M.EventDispatcher to bind the appropriate 52 * events. 53 * 54 * It extend M.View's registerEvents method with some special stuff for image views and 55 * their internal events. 56 */ 57 registerEvents: function() { 58 this.internalEvents = { 59 error: { 60 target: this, 61 action: 'sourceIsInvalid' 62 }, 63 load: { 64 target: this, 65 action: 'sourceIsValid' 66 } 67 } 68 this.bindToCaller(this, M.View.registerEvents)(); 69 }, 70 71 72 /** 73 * Updates the value of the label with DOM access by jQuery. 74 * 75 * @private 76 */ 77 renderUpdate: function() { 78 this.computeValue(); 79 $('#' + this.id).attr('src', this.value); 80 }, 81 82 /** 83 * Triggers the rendering engine, jQuery mobile, to style the image. 84 * 85 * @private 86 */ 87 theme: function() { 88 }, 89 90 /** 91 * Applies some style-attributes to the image view. 92 * 93 * @private 94 * @returns {String} The image view's styling as html representation. 95 */ 96 style: function() { 97 var html = ''; 98 if(this.cssClass) { 99 html += ' class="' + this.cssClass + '"'; 100 } 101 return html; 102 }, 103 104 sourceIsInvalid: function(id, event, nextEvent) { 105 M.Logger.log('The source \'' + this.value + '\' is invalid, so we hide the image!', M.WARN); 106 $('#' + this.id).hide(); 107 108 if(nextEvent) { 109 M.EventDispatcher.callHandler(nextEvent, event, YES); 110 } 111 }, 112 113 sourceIsValid: function(id, event, nextEvent) { 114 $('#' + this.id).show(); 115 116 if(nextEvent) { 117 M.EventDispatcher.callHandler(nextEvent, event, YES); 118 } 119 } 120 121 });