FCK ShadowBox Wizard

Timezone: America/New York
ABSTRACT: A quick tutorial on modifying FCK to create a ShadowBox link. I posted it on the Drupal site & then I figured FCK is a little more flexible. You guys can use these same steps to duplicate this in Joomla, WordPress, or whatever cms you have running both FCK_Edit & ShadowBox. In about 5 seconds you can probably modify this for LightBox, too. [view working demo @ http://munnlodge.org/cms/FCK_ShadowBox]. When you use it let me know. I'd love to see how useful this post could be...

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 link. Even I (a long-haired overfaired leaping gnome) was sick of editing the source code to add rel="ShadowBox" to the anchor tag manually. It only took a few minutes, but that was a few minutes too many. I figured it kinda' defeats the purpose of having a modular CMS with a WYSIWIG editor... I mean: if some things could "play nicely" together, this could really enhance the user's experience - especially when that user was me!

I took a look at the underlying code. The FCK guys really made an elegant modular framework. In our case, 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 completely 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 this would also eliminate any mods to the .html file. I just left this stuff in there for you guys & for the sake of education.

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() - this checks by parsing the regular expression we just added and sets the select field.

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

NOTE: Again, when I was debugging my code, it was useful 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 & 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. This is so we can turn it off by selecting any other option.

function SetTarget( targetType )
{ 
GetE('tdTargetFrame').style.display = ( targetType == 'popup' ? 'none' : '' ) ; 
GetE('tdPopupName').style.display = GetE('tablePopupFeatures').style.display = ( targetType == 'popup' ? '' : 'none' ) ;
 // (BEGIN MOD:08-0709JN - LOGIC Wizards ShadowBox Enhancement)
 GetE('tdShadowBox').style.display = ( targetType == 'popup' ? '' : 'none' ) ;
 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! Like I said earlier, much of this is fluff. You now can easily how easy it would be to stip this down to a handfull of (maybe 6) lines of code. That's probably the topic for another article.

I tested this MOD only with IE7 on WinXP. I will update more when I have the time...

If you like it, use it at your own risk! It's all public domain covered under GNU or Mozilla Public License - 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.

Joe Negron
LOGIC Wizards