FancyBox

FancyBox In OpenEMR

Fancybox is used in OpenEMR as a replacement for pop-up windows. popups are becoming deprecated in modern browsers, and the window.close() function used to make a popup disappear is disabled in at least one browser.

Versions

Two versions of FancyBox exist in the OpenEMR codebase.

Integrating these two versions is not a big priority, see thread: http://osdir.com/ml/fancybox/2011-12/msg00192.html .

For new code, it is preferred to use the 1.3.4 version, rather than the 1.2.6 version.

Using

Required Javascript

First, a document using the fancybox code must include jquery, and fancybox:

<script type="text/javascript" src="<?php echo $GLOBALS['webroot']; ?>/library/js/jquery.1.3.2.js"></script>
<script type="text/javascript" src="<?php echo $GLOBALS['webroot']; ?>/library/js/fancybox-1.3.4/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo $GLOBALS['webroot']; ?>/library/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="<?php echo $GLOBALS['webroot']; ?>/library/js/common.js"></script>

Please note that the copy of jquery in library/js/jquery.js and in library/js/jquery-1.2.2.min.js will not support FancyBox usage.

If you have to add the above code to a page, it is wise to add it in right before the closing </body> tag. This is so that the elements of the page are loaded and rendered by the web browser before parsing your script. see http://stackoverflow.com/questions/3037725/is-it-wrong-to-place-the-script-tag-after-the-body-tag .

Initialising

Inside of the document's ready function, the following code needs to exist, to initialise each link that is supposed to open a fancybox:

$(document).ready(function(){

  // initialise a link
  $(".linkclass_modal").fancybox( {
    'overlayOpacity' : 0.0,
    'showCloseButton' : true,
    'height' : 400,
    'width' : 500
  });
});

If you have to add a $(document).ready() function to a page, it is wise to add it in a <script> block right before the closing </body> tag. This is so that the elements of the page are loaded and rendered by the web browser before parsing your script. see http://stackoverflow.com/questions/3037725/is-it-wrong-to-place-the-script-tag-after-the-body-tag .

1.2.6 Notes

The 'height' and 'width' fields are referred to as 'frameHeight' and 'frameWidth', respectively.

Using with a link

To open a page into a fancybox, a link must either be clicked, or have its 'click' handler triggered.

This link (an 'a' entity) must have two classes associated with it: 'iframe', and the same ID supplied in the initialisation (linkclass_modal in our example). Example:

<a class="iframe linkclass_modal" href="example_popup.php>Example Link Text</a>

Using inside of an onclick()

To open a page from an onclick() handler, its necessary to trigger the 'click' handle of an invisible link.

for example:

function popupfancybox() {
  $("a.findpatient_modal").trigger("click");
}

<div style="display: none;">
  <a class="iframe findpatient_modal" href="find_patient_popup.php"></a>
</div>

If you are wanting to pass get data to that form, changing the value of the href attribute of that link is going to be required, making the javascript a little more complicated:

function popupfancybox() {
  $('a.findpatient_modal').attr('href','find_patient_popup.php' +
   '?getdata=<?php echo "escaped_getdata" ?>');
  $("a.findpatient_modal").trigger("click");
}

Handling Child

Closing

Close a fancybox differs between versions. To close yourself you can use the following code anywhere javascript is valid:

1.3.4:

<script type="text/javascript>
  window.parent.jQuery.fancybox.close();
</script>

1.2.6:

<script type="text/javascript>
  window.parent.$.fn.fancybox.close();
</script>

Following Parent

Pages being called via fancybox need to be aware that they are in an inframe, and not in a separate popup window.

The simple way to check in javascript, is to see if there is an 'opener' object available. if a page was called as a popup, opener will exist. if it does not exist, it is likely that the page was called as an iframe.

for example:

 if (opener)
 { // we are a popup
   if (!opener.closed)
     {
       if (opener.refreshme) opener.refreshme();
       window.close();
     }
   else alert('Parent was closed!');
 }
 else
 { // we are an iframe
     if (window.parent.refreshme) window.parent.refreshme();
     window.parent.jQuery.fancybox.close();
 }

This code shows a couple of things we should keep in mind, when converting code from being popup-only, to allowing code to be used in a fancybox, namely:

• opener does not exist. to call functions in the page that 'opened' you, use window.parent.
• window.close no longer works. instead, call the parent's fancybox close function: window.parent.jQuery.fancybox.close();
• With version 1.2.6 use window.parent.$.fn.close() instead of window.parent.jQuery.fancybox.close()