Prototype ¬ Detail

author: majordan [+], Submitted: 03.11.04 2p • Last Edit: 06.28.04 2p

// --public method-- //
// this method needs:
// MovieClip.getNextDepth
// available @: http://proto.layer51.com/d.aspx?f=833
// TextField.indexToHTMLText
// TextField.indexToText
// TextField.__indexRecalc
// TextField.__compareFunc
// available @: http://proto.layer51.com/d.aspx?f=1029
// String.getTagsIndexes
// String.__recGetTags
// String.findTag
// String.getPropsAt
// String.tagsUsed
// available @: http://proto.layer51.com/d.aspx?f=1028
// 8.2003 k-zimir(a)gmx.net
// 3.2004 enhanced for tab accesibility and multiple links in TextField by michael@majordan.net
// makes links show up in a different TextFormat and allows Tab Selection of links
// #style: the textFormat you want to use for the highlighting
// #hoverStyle: the textFormat you want to use for onSetFocus highlighting
// #startTabIndex: the starting tab index for the textField
TextField.prototype.highlightLinks = function( style, hoverStyle, startTabIndex ){
	this.onChanged = function(){
		var dummyVar;
		this._height++;
		dummyVar = this.textHeight;
		this._height--;
	};
	
	// get the original htmlText string
	var origHTML = this.htmlText;

	// replace entities such as &amp; or &apos; with a single character so that they don't mess up the character count
	this.htmlText = this.htmlText.replaceEntities("~");
	
	// get the next available depth 
	var depth = Math.max(1,this._parent.getNextDepth());
	
	var accContainer_mc = this.accContainerClip = this._parent.createEmptyMovieClip("accContainer_mc",depth);
	
	// create a MovieClip in TextField's parent so this TextField is accessible.
	var textField_mc = this.textFieldClip = accContainer_mc.createEmptyMovieClip("textField_"+this._name+"_mc",1000);

	// Get an array of the anchor links in the TextField
	var ind = String(this.htmlText).getTagsIndexes( "A" );
	
	var l = ind.length;
	
	// If there are links...
	if(l>0) {
		//textField_mc.tabChildren = true;
		
		
		// create an array to hold the links in the TextField
		this.anchorLinks = new Array();
		
		// loop through links 
		for (var i=0; i<l; i++) {
			
			//create an anchorLink Object for each link
			var anchorLink = this.anchorLinks[i] = new Object();
			
			// the tag properties for each link
			var tag = this.htmlText.tagPropsAt( ind[i] );
			
			// assign parent
			anchorLink.parent = this;
			
			// !! IMPORTANT !! figure out tag index positions BEFORE setting format for links
			anchorLink.indexes = [this.indexToText( tag.value[0] ),this.indexToText( tag.value[1] ),this.indexToText( tag.value[1] )-this.indexToText( tag.value[0] )];
			
			// get the link text description
			anchorLink.description = this.text.substring( anchorLink.indexes[0] , anchorLink.indexes[1] );
			
			// get the link href attribute
			anchorLink.href = this.htmlText.substring( this.htmlText.indexOf( "HREF=" , tag.open[0] )+6 , this.htmlText.indexOf( "\"" , this.htmlText.indexOf("HREF=",tag.open[0])+6 ) );
			
			// get the link target attribute
			anchorLink.target = this.htmlText.substring( this.htmlText.indexOf( "TARGET=" , tag.open[0] )+8 , this.htmlText.indexOf( "\"" , this.htmlText.indexOf( "TARGET=" , tag.open[0] )+8 ) );
			
			// set the initial TextFormat of the link text if style==null figure out the initial style
			anchorLink.style = (style) ? style : this.getTextFormat(anchorLink.indexes[0],anchorLink.indexes[1]);
			anchorLink.hoverStyle = hoverStyle;
			
			// create a MovieClip button for the link within the textField_mc so we can tab-select it
			anchorLink.button = accContainer_mc.createEmptyMovieClip("anchorLink"+i+"_mc",i+1);
			
			// assign parent to the MovieClip button
			anchorLink.button.parent = anchorLink;
			
			// position MovieClip
			anchorLink.button._x = this._x;
			anchorLink.button._y = this._y;
			anchorLink.button.moveTo(0,0);
			anchorLink.button.beginFill(0xFFFFFF,0);
			anchorLink.button.lineTo(1,0);
			anchorLink.button.lineTo(1,1);
			anchorLink.button.lineTo(0,1);
			anchorLink.button.lineTo(0,0);
			anchorLink.button._focusrect = false;
			anchorLink.button.focusEnabled = true;
			
			
			// assign tabIndex
			anchorLink.button.tabIndex = (startTabIndex) ? startTabIndex+i+1 : (this.tabIndex>0) ? this.tabIndex+i+1 : 500+i+1;
			anchorLink.button.tabEnabled = true;
			
			
			
			// onSetFocus function sets TextFormat to hoverStyle and listens for Key.ENTER and Key.SPACE events (to work around _focusrect=false bug)
			anchorLink.button.onSetFocus = function(){
				if(this.parent.hoverStyle != null) {
					this.parent.parent.setTextFormat( this.parent.indexes[0], this.parent.indexes[1],  this.parent.hoverStyle );
					this.parent.parent.onChanged();
				}
				if(!this.keyListener) this.keyListener = new Object();
				this.keyListener.parent = this;
				this.keyListener.onKeyDown = function(){
					// on Key.ENTER or Key.SPACE execute getURL
					if(Key.getCode() == Key.ENTER || Key.getCode() == Key.SPACE){
						if(this.parent.parent.href!=""){
							trace("\nANCHOR LINK BUTTON CALLED: " + this.parent);
							trace("getURL HREF: " + this.parent.parent.href);
							if(this.parent.parent.target!=""){
								getURL(this.parent.parent.href,this.parent.parent.target);
							} else {
								getURL(this.parent.parent.href);
							}
						}
					}
				}
				Key.addListener(this.keyListener);
			};
			
			// assign Accessibility props so anchorLink.button readable by screen reader
			if(Accessibility.isActive()){
				// onRelease
				anchorLink.button.useHandCursor = false;
				anchorLink.button.onRollOver = function(){
					return;
				};
				anchorLink.button.onRelease = function(){
					if(this.parent.href!=""){
						trace("\nANCHOR LINK BUTTON CALLED: " + this);
						trace("getURL HREF: " + this.parent.href);
						if(this.parent.target!=""){
							getURL(this.parent.href,this.parent.target);
						} else {
							getURL(this.parent.href);
						}
					}
					this.onKillFocus();
				};
				anchorLink.button._accProps = new Object();
				anchorLink.button._accProps.name = "Anchor Link: " + anchorLink.button.parent.description;
				Accessibility.updateProperties();
			}
			
			// onKillFocus function sets TextFormat to style and removes the Key event listener
			anchorLink.button.onKillFocus = function(){
				this.parent.parent.setTextFormat( this.parent.indexes[0], this.parent.indexes[1],  this.parent.style);
				this.parent.parent.onChanged();
				Key.removeListener(this.keyListener);
			};
			
		}
		
		// Now we can loop through the anchorLinks array and set the TextFormat to style

		// Restore the original htmlText string
		this.htmlText = origHTML;

		for (var j=0; j<this.anchorLinks.length; j++) {
			var anchorLink = this.anchorLinks[j];
			this.setTextFormat( anchorLink.indexes[0], anchorLink.indexes[1], anchorLink.style );
			this.onChanged();
			trace( "link description: " + anchorLink.description);
			trace( "link href: " + anchorLink.href);
			if(anchorLink.target!="") trace( "link target: " + anchorLink.target);
			trace( "link start index: "+anchorLink.indexes[0]);
			trace( "link end index: "+ anchorLink.indexes[1]);
			trace( "link string length: "+ anchorLink.indexes[2]);
			trace( "link tabIndex: " + anchorLink.button.tabIndex+"\n");
		}
	} else {
		// Restore the original htmlText string
		this.htmlText = origHTML;
		this.onChanged();
	}
	// position textField_mc and draw a transparent fill to match the TextField's size (for a focus rectangle) 
	textField_mc._x = this._x;
	textField_mc._y = this._y;
	textField_mc.moveTo(0,0);
	textField_mc.beginFill(0xFFFFFF,0);
	textField_mc.lineTo(this._width,0);
	textField_mc.lineTo(this._width,this._height);
	textField_mc.lineTo(0,this._height);
	textField_mc.lineTo(0,0);
	
	// Assign TabIndex 
	textField_mc.tabIndex = (startTabIndex) ? startTabIndex : (this.tabIndex>0) ? this.tabIndex : 500;
	textField_mc.tabEnabled = true;
	textField_mc.focusEnabled = true;
	textField_mc._focusrect = false;
	
	// update Accessibility 
	if(Accessibility.isActive()){
		// assign Accessibility props so TextField readable by screen reader
		textField_mc.useHandCursor = false;
		textField_mc.tabEnabled = true;
		textField_mc.focusEnabled = true;
		textField_mc.tabChildren = false;
		textField_mc._accProps = new Object();
		textField_mc._accProps.name = this.text;
		textField_mc._accProps.forceSimple = true;
		Accessibility.updateProperties();
	} 
	
	trace("text field: "+textField_mc._accProps.name);
	trace("text field tabIndex: "+textField_mc.tabIndex+"\n");
	trace(this.htmlText);
};
ASSetPropFlags( TextField.prototype, ["highlightLinks"], 1 );

// used to replace HTML entities with a single character
String.prototype.replaceEntities = function(char) {
	var c = char ? char : "~";
	var s = this;
	a = s.split("&quot;"); s = a.join(c);
	a = s.split("&amp;"); s = a.join(c);
	a = s.split("&apos;"); s = a.join(c);
	a = s.split("&lt;"); s = a.join(c);
	a = s.split("&gt;"); s = a.join(c);
	a = s.split("&nbsp;"); s = a.join(c);
	return s;
};
ASSetPropFlags( String.prototype, ["replaceEntities"], 1 );

usage

This is an enhancement of [url="http://proto.layer51.com/up.aspx?u=k-zimir"]k-zimir[/url]'s [url="http://proto.layer51.com/d.aspx?f=1031"]Textfield: highlight link with different textFormat[/url].

It allows the user to tab through one or more text-links in a TextField highlighting the focused link.

Sample usage:
[code]
[i]// New textField[/i]
this.createTextField( "test_txt", 0, 50, 100, 450, 20 );
var test = this.test_txt;
test.autoSize = "center";
test.multiline = true;
test.wordWrap = true;
test.html = true;
test.htmlText = "The output should be this <a href=\"asfunction:repeatWord,word\">word</a> three times. This links to <a href=\"http://www.eduplace.com\" target=\"_blank\">Education Place</a>.";

[i]// Default textFormat[/i]
var styleD = new TextFormat();
styleD.bold = false;
styleD.underline = false;
styleD.color = 0x000000;
styleD.size = "20";
styleD.font ="_sans";

[i]// Link textFormat[/i]
var styleA = new TextFormat();
styleA.bold = true;
styleA.underline = true;
styleA.color = 0x0000FF;
styleA.size = "20";
styleA.font ="_typewriter";

[i]// Link Hover textFormat[/i]
var styleH = new TextFormat();
styleH.bold = true;
styleH.underline = true;
styleH.color = 0xff0000;
styleH.size = "20";
styleH.font ="_typewriter";

test.setTextFormat(styleD);

[i]// [/i][i]textFieldInstance[/i].highlightLinks( [i]link_style[/i], [i]hover_style[/i], [i]start_tabIndex[/i] );
test.highlightLinks(styleA,styleH,25);

// sample asfunction
function repeatWord(word){
	var i=0;
	while(i++<3){
		trace(word);
	}
}
[/code]

[swf width="400" height="200" quality="high"]http://www.majordan.net/highlighttest.swf[/swf]