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