Onebyone Design

While, normally I dislike popups, they are definitely an occasional necessary evil. This little utility class can make them much easier to create. Simply pass it the path of an image file (i.e. a .jpg) and it will open up a popup window containing that image and automatically resize itself to fit the picture. Only the path to picture is required, but you can also include a title to display in the popup window as well as specify the usual features of a popup (scrollbars, resizable, status, etc.).

So far I’ve only tested in IE and Firefox on Windows XP, so if someone tries it on another browser/system, let me know if it works. Admittedly, I’m not that javascript savvy.

The util class:

/** 
* Use to create a popup an image file that automatically resizes to fit its content. 
* Works ONLY with image files. 
* 
* usage: 
* 
* OBO_Popup.pop("path/image.jpg", ["Window Title", "yes", "yes", "yes", "yes", "yes", "yes"]); 
* 
* Only the path to image is required - all other arguments are optional. If not supplied, 
* the default window title is "Image". 
* 
* @author Devon O. 
*/        

package com.onebyonedesign.extras {        

	import flash.external.ExternalInterface;        

	public class OBO_Popup {        

		public static function pop(url:String, title:String = "Image", resizable:String = "no", toolbar:String = "no", menubar:String = "no", status:String = "no", directories:String = "no", location:String = "no"):void { 
			if (ExternalInterface.available) {        

				//	does browser use layers or divs? 
				var hasLayers:Boolean = ExternalInterface.call('document.layers');        

				//	open popup 
				ExternalInterface.call('imgWin=window.open', '', '', 'scrollbars=no, resizable=' + resizable + ', toolbar=' + toolbar + ', menubar=' + menubar + ', status=' + status + ', directories=' + directories + ', location=' + location + 'scrollbars=0, width=50, height=50, left=50, top=50');        

				//	begin html 
				ExternalInterface.call('imgWin.document.writeln', ''); 
				ExternalInterface.call('imgWin.document.writeln', '');        

				if (hasLayers) { 
					ExternalInterface.call('imgWin.document.writeln', ''); 
				} else { 
					ExternalInterface.call('imgWin.document.writeln', '
'); 
				}        

				ExternalInterface.call('imgWin.document.writeln', '');        

				if (hasLayers) { 
					ExternalInterface.call('imgWin.document.writeln', ''); 
				} else { 
					ExternalInterface.call('imgWin.document.writeln', '       

'); 
				} 
				ExternalInterface.call('imgWin.document.close'); 
				ExternalInterface.call('return', 'false'); 
			} else { 
				trace ("Cannot call javascript functions from current container."); 
			} 
		} 
	} 
}

and an example document class:

package {    

	import com.onebyonedesign.extras.OBO_Popup; 
	import flash.display.Sprite; 
	import flash.events.TextEvent; 
	import flash.text.TextField; 
	import flash.text.TextFieldAutoSize; 
	import flash.text.TextFormat;    

	public class PopupExample extends Sprite {    

		public function PopupExample():void { 
			var fmt:TextFormat = new TextFormat("_sans", 12);    

			var html:String = "Click here to open a resizing popup.\n\n"; 
			html += "Or, click here to open another."    

			var textField:TextField = new TextField(); 
			textField.defaultTextFormat = fmt; 
			textField.autoSize = TextFieldAutoSize.LEFT; 
			textField.addEventListener(TextEvent.LINK, openPopup); 
			textField.htmlText = html; 
			textField.x = 50; 
			textField.y = 50; 
			addChild(textField); 
		}    

		private function openPopup(te:TextEvent):void { 
			var argumentArray:Array = te.text.split("|"); 
			var url:String = argumentArray[0]; 
			var title:String = argumentArray[1]; 
			OBO_Popup.pop(url, title); 
		} 
	} 
}

which yields:

[kml_flashembed movie=”/wp-content/uploads/2008/01/popupExample.swf” height=”150″ width=”400″ fversion=”9″ /]

EDIT: I just realized that class is all but completely illegible thanks to the AS parsing script I use. Below is a link to the actual .as file for anyone actually interested..

OBO_Popup