Difference between revisions of "FancyBox"

From OpenEMR Project Wiki
 
(14 intermediate revisions by 2 users not shown)
Line 15: Line 15:


  <nowiki><script type="text/javascript" src="<?php echo $GLOBALS['webroot']; ?>/library/js/jquery.1.3.2.js"></script></nowiki>
  <nowiki><script type="text/javascript" src="<?php echo $GLOBALS['webroot']; ?>/library/js/jquery.1.3.2.js"></script></nowiki>
  <nowiki><script type="text/javascript" src=".<?php echo $GLOBALS['webroot']; ?>/library/js/fancybox-1.3.4/jquery.fancybox-1.3.4.pack.js"></script></nowiki>
  <nowiki><script type="text/javascript" src="<?php echo $GLOBALS['webroot']; ?>/library/js/fancybox-1.3.4/jquery.fancybox-1.3.4.pack.js"></script></nowiki>
  <nowiki><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" /></nowiki>
  <nowiki><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" /></nowiki>
  <nowiki><script type="text/javascript" src="<?php echo $GLOBALS['webroot']; ?>/library/js/common.js"></script></nowiki>
  <nowiki><script type="text/javascript" src="<?php echo $GLOBALS['webroot']; ?>/library/js/common.js"></script></nowiki>
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 <nowiki></body></nowiki> 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 ===
=== Initialising ===
Line 24: Line 28:


  $(document).ready(function(){
  $(document).ready(function(){
  // initialise fancy box
  enable_modals();
   
   
   // initialise a link
   // initialise a link
Line 31: Line 33:
     'overlayOpacity' : 0.0,
     'overlayOpacity' : 0.0,
     'showCloseButton' : true,
     'showCloseButton' : true,
     'frameHeight' : 400,
     'height' : 400,
     'frameWidth' : 500
     'width' : 500
   });
   });
  });
  });
If you have to add a $(document).ready() function to a page, it is wise to add it in a <nowiki><script></nowiki> block right before the closing <nowiki></body></nowiki> 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 ===
=== Using with a link ===
To open a page into a fancybox, a link must either be clicked, or have its 'click' handler triggered.
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).
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:
 
<nowiki><a class="iframe linkclass_modal" href="example_popup.php>Example Link Text</a></nowiki>


=== Using inside of an onclick() ===
=== Using inside of an onclick() ===
Line 61: Line 70:
  }
  }


== Converting ==
== 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.
Pages being called via fancybox need to be aware that they are in an inframe, and not in a separate popup window.


Line 71: Line 94:
   if (opener)
   if (opener)
   { // we are a popup
   { // we are a popup
     if (!opener.closed && opener.refreshme)
     if (!opener.closed)
       {
       {
         opener.refreshme();
         if (opener.refreshme) opener.refreshme();
         window.close();
         window.close();
       }
       }
    else alert('Parent was closed!');
   }
   }
   else
   else
   { // we are an iframe
   { // we are an iframe
       {
       if (window.parent.refreshme) window.parent.refreshme();
        window.parent.refreshme();
      window.parent.jQuery.fancybox.close();
        window.parent.$.fn.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:
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.
:* 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.$.fn.fancybox.close();
:* 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()

Latest revision as of 10:38, 22 January 2013

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()