1 /** The minplayer namespace. */ 2 var minplayer = minplayer || {}; 3 4 /** 5 * @constructor 6 * @class A class to easily handle images. 7 * @param {object} context The jQuery context. 8 * @param {object} options This components options. 9 */ 10 minplayer.image = function(context, options) { 11 12 // Determine if the image is loaded. 13 this.loaded = false; 14 15 // The image loader. 16 this.loader = null; 17 18 // The ratio of the image. 19 this.ratio = 0; 20 21 // The image element. 22 this.img = null; 23 24 // Derive from display 25 minplayer.display.call(this, 'image', context, options); 26 }; 27 28 /** Derive from minplayer.display. */ 29 minplayer.image.prototype = new minplayer.display(); 30 31 /** Reset the constructor. */ 32 minplayer.image.prototype.constructor = minplayer.image; 33 34 /** 35 * @see minplayer.plugin.construct 36 */ 37 minplayer.image.prototype.construct = function() { 38 39 // Say we need to resize. 40 this.allowResize = true; 41 42 // Call the media display constructor. 43 minplayer.display.prototype.construct.call(this); 44 45 // Set the container to not show any overflow... 46 this.display.css('overflow', 'hidden'); 47 48 // Create the image loader. 49 var _this = this; 50 51 /** The loader for the image. */ 52 this.loader = new Image(); 53 54 /** Register for when the image is loaded within the loader. */ 55 this.loader.onload = function() { 56 _this.loaded = true; 57 _this.ratio = (_this.loader.width / _this.loader.height); 58 _this.resize(); 59 _this.trigger('loaded'); 60 }; 61 62 // We are now ready. 63 this.ready(); 64 }; 65 66 /** 67 * Loads an image. 68 * 69 * @param {string} src The source of the image to load. 70 */ 71 minplayer.image.prototype.load = function(src) { 72 73 // First clear the previous image. 74 this.clear(function() { 75 76 // Create the new image, and append to the display. 77 this.img = jQuery(document.createElement('img')).attr({src: ''}).hide(); 78 this.display.append(this.img); 79 this.loader.src = src; 80 }); 81 }; 82 83 /** 84 * Clears an image. 85 * 86 * @param {function} callback Called when the image is done clearing. 87 */ 88 minplayer.image.prototype.clear = function(callback) { 89 this.loaded = false; 90 if (this.img) { 91 var _this = this; 92 this.img.fadeOut(function() { 93 _this.img.attr('src', ''); 94 _this.loader.src = ''; 95 $(this).remove(); 96 callback.call(_this); 97 }); 98 } 99 else { 100 callback.call(this); 101 } 102 }; 103 104 /** 105 * Resize the image provided a width and height or nothing. 106 * 107 * @param {integer} width (optional) The width of the container. 108 * @param {integer} height (optional) The height of the container. 109 */ 110 minplayer.image.prototype.resize = function(width, height) { 111 width = width || this.display.width(); 112 height = height || this.display.height(); 113 if (width && height && this.loaded) { 114 115 // Get the scaled rectangle. 116 var rect = this.getScaledRect(this.ratio, { 117 width: width, 118 height: height 119 }); 120 121 // Now set this image to the new size. 122 if (this.img) { 123 this.img.attr('src', this.loader.src).css({ 124 marginLeft: rect.x, 125 marginTop: rect.y, 126 width: rect.width, 127 height: rect.height 128 }); 129 } 130 131 // Show the container. 132 this.img.fadeIn(); 133 } 134 }; 135 136 /** 137 * @see minplayer.display#onResize 138 */ 139 minplayer.image.prototype.onResize = function() { 140 141 // Resize the image to fit. 142 this.resize(); 143 }; 144