By wwwizards on

ABSTRACT: A quick tutorial on modifying FCK to create a ShadowBox link.

In Drupal6 with both the shadowbox module and the fckedit module, there was still no clean way of getting a layman to invoke a shadowbox.  Even I  was sick of editing the source code to add rel="ShadowBox" to the anchor tag manually. I figured it kinda' defeats the purpose of having a modular CMS... I mean: if some things could "play nicely" together, this could really enhance the user experience. 

I took a look at the underlying code. There are only two files that are effected:

/modules/fckeditor/fckeditor/editor/dialog/fck_link/ fck_link.js
/modules/fckeditor/fckeditor/editor/dialog/fck_link/fck_link.html

Everything is done in JavaScript on the client side - so, verbosely displaying anything to user is optional. If I were taking a minimalist approach,  I'd probably cut out the debugger code (since I always write error free scripts, anyway;) and eliminate any mods to the .html file. I just left this stuff in there for you guys.  

OK! First I added some hidden table elements to the fck_lnk.html 

<td id="tdShadowBox" style="DISPLAY: none" nowrap="nowrap" width="100%">
      <span fckLang="DlgShadowBox">&nbsp;Rel:</span><br />
      <input id="txtShadowBox" readonly="true" style="WIDTH: 100%" type="text" />
</td>

 

After that, Everything else is done in the fck_lnk.js file. I added a single line to the Regular Expressions Library. This is a very nice way of checking to see if you're editing an existing ShadowBox link.

oRegex.sbMatch = /ShadowBox/gi;

 

Then, I added the following code to the bottom of the window.onload = function()

// (MOD:08-0709JN - LOGIC Wizards ShadowBox Enhancement)
  var sbWiz = oLink.getAttribute( 'rel' ) ;  
  if ( sbWiz )  // check for existing shadowbox link &amp; initialize the FCK form if applicable.
    {
     // window.alert ( sbWiz + ' : ' + oRegex.sbMatch.test( sbWiz ) ) // Verbose Mode - Quick Debugger
     ShadowBoxWizard(); //
    }

NOTE: Again, when I was debugging, I wanted to see what was going on in the hidden properties of the tag's attributes and the regular expression - but, this is all completely optional. So: if you really wanted to - you could cut this entire MOD down to maybe 10 or 12 lines.  

Next I added a helper function to update the appropriate properties...

function ShadowBoxWizard ()
 {
  GetE('cmbTarget').value = 'ShadowBox' ;      // update combo box
  GetE('txtShadowBox').value = 'ShadowBox';    // update hidden form field
  GetE('tdShadowBox').style.display = '' ;     // show form &amp; data
  SetAttribute( oLink, 'rel' , 'ShadowBox' ) ; // add the SB trigger   
 }

To make things nice & pretty I had to make a slightly modified version of the SetTarget() function

function SetTarget( targetType )
{
	GetE('tdTargetFrame').style.display	= ( targetType == 'popup' ? 'none' : '' ) ;
	GetE('tdPopupName').style.display	=
	GetE('tablePopupFeatures').style.display = ( targetType == 'popup' ? '' : 'none' ) ;
	GetE('tdShadowBox').style.display	= ( targetType == 'popup' ? '' : 'none' ) ; 	// (BEGIN MOD:08-0709JN - LOGIC Wizards ShadowBox Enhancement)

	switch ( targetType )
	{ 

		case "ShadowBox":                   // Essentially these line are the guts of this function's MOD;
			ShadowBoxWizard(); // everything else is for aesthetics & elegance. 
			break;                       // Aint it purdiful?
		case "_blank" :
 		    GetE('txtShadowBox').value = '';
			break;			
		case "_self" :
		    GetE('txtShadowBox').value = '';
			break;
		case "_parent" :
		    GetE('txtShadowBox').value = '';
			break;
		case "_top" :
		    GetE('txtShadowBox').value = '';
			GetE('txtTargetFrame').value = targetType ;
			break ;
		case "" :
		    GetE('txtShadowBox').value = '';
			GetE('txtTargetFrame').value = '' ;
			break ;
	}
	// (END MOD:08-0709JN - LOGIC Wizards ShadowBox Enhancement)

	if ( targetType == 'popup' )
		dialog.SetAutoSize( true ) ;
}

THAT'S IT! 

I tested this MOD only with Drupal6 & IE7 on WinXP. In theory Firefox should work too, but there's probably some differences with the hidden frames. I will update more when I have the time...

If you like it, use it. If you get stuck. I'll help if I can, But: please do so at your own risk! Hopefully the FCK guys will integrate it into their product  It's all public domain covered under GNU or Mozilla Public Licenses anyway - take your pick. Drop me a thank you note or (even better) buy me a beer... If you really like it, consider making a donation to the Munn Foundation or Drupal.ORG - in my name.

Joe Negron
LOGIC Wizards

 

⋅ Categories: Drupal 6.x