YUI Pop Up Preview Component

I’ve been meaning to put this component together for some time. Whenever I look for a document or even a revision of a document in Stellent, I usually use the (HTML) dynamic conversion link as sort of a preview button to see if I have what I’m looking for. The only problem is that the dynamic conversion link takes you to the output’s page requiring you to hit the browser’s back button to get back to the search results or content information pages. What I’ve been looking for is a little pop up window to appear over those pages letting me preview the dynamic conversion’s results.

This sample project utilizes the YUI library to create that pop up as well as to provide a “slide” effect seen when the pop up appears and disappears. I was hoping to use a variety of YUI features, but unfortunately this example turned out to be extremely simple. It uses a similar “Panel” object to the one used in the Security Overrides example, however as you’ll see from this project it does not make any Connection Manager based AJAX calls like that one does.

This component has a couple IDOC resource overrides to add Pop Up Preview links to the Stellent UI, but in terms of actual code there’s a single Javascript class with really just a single major method, callPopUpPreview:

this.callPopUpPreview = function(id,name){
 //set the dID
 _dID = id;
 //set the dDocName
 _dDocName = name;//start the build of our URL
 var url = _httpCgiPath + "?IdcService=GET_DYNAMIC_CONVERSION"//if we have a dID add it to the url
 if(_dID)
  url += "&dID=" + _dID;//if we have a dDocName add it to the url
 if(_dDocName)
  url += "&dDocName=" + _dDocName;//if we have a revisionselectionmethod add it to the url
 if(_RevisionSelectionMethod)
  url += "&RevisionSelectionMethod=" + _RevisionSelectionMethod;//if we have a conversion template add it to the url
 if(_conversionTemplate)
  url += "&conversionTemplate=" + _conversionTemplate;//This line create the panel object
 YAHOO.popUpPreview.container.popupPreview = new YAHOO.widget.Panel("popUpPreviewDiv",
 { //set the width and hieght to the values set in the class
  width : _width + "px",
  height : _height + "px",
  //the pop up should be fixed to the center of the screen
  fixedcenter : true,
  //show a close link
  close:true,
  //don't allow dragging of the pop up
  draggable:false,
  //the panel starts out invisible
  visible:false,
  //this line sets the transision effect, where we are using the slide
  //effect and setting it's duration to .25 seconds.
  effect:[{effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.25}]
  } );//Sets the header / menu bar of the pop up
 YAHOO.popUpPreview.container.popupPreview.setHeader("Dynamic Conversion Preview");
 //Sets the body, note the use of the iframe to load the content. The onload event calls the handleiFrameLoad method to display the pop up
 YAHOO.popUpPreview.container.popupPreview.setBody("<iframe id='popUpPreviewBody' onload='Javascript:" + _objectName + ".handleiFrameLoad();' src='" + url + "'></iframe>");
 //render the panel to the page. this just starts the dynamic conversion call
 YAHOO.popUpPreview.container.popupPreview.render(document.body);
}}

The code does not come through so great on the blog, but what’s occurring is the URL to the dynamic conversion is assembled and then placed in the “src” attribute of an iFrame which is then written to a YUI panel object.  Why the iFrame?  Well when I started I intended to make more of a traditional AJAX call to get the dynamic conversion.  The problem though is that the dynamic converter creates a full HTML document complete with head and body elements, which can wreak havoc on the panel’s divs.  Using the iFrame let’s us encapsulate the dynamic conversion output in it’s own private little window and protects the rest of our panel and page from the variety of HTML that may be rendered in it. 

The callPopUpPreview method takes care of creating the URL to the dynamic conversion, creating the panel object and adding the iFrame to it, but it does not actually cause the panel display on the page.  Dynamic conversions can sometimes take a second or two to render and it’s a much nicer effect if we wait for the conversion before displayiing the pop up window.  So instead of just rendering the panel to the page, the onload event for the iFrame is used to call another method(handleiFrameLoad) in the popUpPreview class that can display the pop up once everything is loaded.  This way the pop up window will only appear once the conversion is complete.

Adding the actual links to the content server’s search results and content information pages requires a couple of resource include overrides: 

Append an additional PopupProps row in the extra_setup_search_results_action_popups include to add a links in the Search Results.
<@dynamichtml extra_setup_search_results_action_popups@> <$exec rsAppendNewRow("PopupProps")$>
<$exec setValue("PopupProps", "label", "Pop Up Preview")$>
<$exec setValue("PopupProps", "function", "Javascript:popUp.callPopUpPreview('<$url(dID)$>','<$url(dDocName)$>');")$>
<$exec setValue("PopupProps", "ifClause", "dcShowExportLink()")$>
<$exec setValue("PopupProps", "class", "document")$> <$exec setValue("PopupProps","id", "popuppreview")$>
<@end@>

The docinfo_conversion_link include can be used to add a link on the Content Information page
<@dynamichtml docinfo_conversion_link@>
<$include super.docinfo_conversion_link$>
<tr><td nowrap align="right"><span class="infoLabel"></span></td>
<td><span class="tableEntry">
<a href="Javascript:;" mce_href="Javascript:;" onclick="Javascript:popUp.callPopUpPreview('<$dID$>','<$dDocName$>');">Pop Up Preview</a></span>
</td></tr>
<@end@>


Also of note is that I used a new editor to create the popuppreview.js file. Rather than my standard text editor, I gave Adobe’s JSEclipse plug in a try. I am not sure I was using it correctly as the experience was not that much different from my text editor(only in eclipse), but as I figure out how to best use it’s features I’ll keep you informed.

The Pop Up Preview component is available for download here:

Pop Up Preview Component