JavaScript Window Class

Feb 3, 2014
JavaScript Window Class
  • You can make use of Fabrik's window class anywhere on your Joomla site, as long as the Fabrik system plugin is installed.

    To load the window Javascript you need to use this PHP:

    Fabrik 3.1
    PHP:

    <?php
    FabrikHelperHTML::script(FabrikHelperHTML::framework());
    FabrikHelperHTML::iniRequireJS();
    FabrikHelperHTML::windows('a.myFabWin');
    ?>
     
    Fabrik 3.0:
    PHP:
    <?php FabrikHelperHTML::framework();
    FabrikHelperHTML::windows('a.myFabWin'); ?>
    That will first load Fabrik's JavaScript framework, then turn any link with a class 'myFabWin' into a trigger to open the window.

    An example of a link might be:
    HTML:
    <a href="http://fabrikar.com"
     class="myFabWin"
     rel="{'content':'test','height':500,'title':'my link rocks','loadMethod':'iframe'}">
            My Link
    </a>
    The href property is the URL that will be opened in the window.

    The rel property contains a string in a json format. You can include the following properties:
    • width - the window's width in px
    • height - the window's height in px
    • title - the window's title
    • id - a unique id for the window.
    • loadMethod:
      • iframe - will load the URL defined by the href property in an iframe (or by the contentURL property). This is the recommended option to use as it will correctly load external sites, and has fewer issues loading css files which the xhr option sometimes exhibits
        Note: if you are loading a Fabrik page via an iframe please add :
        &iframe=1 to the end of your page's url - this ensures that the fabrik css files are loaded.
      • xhr - will load the URL defined by the href property via an Ajax call
      • html - ignores the href attribute and instead puts the property 'content' in the window
    • content - if loadMethod is html then this content will be placed inside the window. HTML tags can be used.
    • onContentLoaded - a function, if not supplied the default function is to fit the window to the size of its content and to center it on the page. To stop this happening and to force the use of the width/height settings supply a null value e.g.
      Code (HTML5):

      <a href="http://fabrikar.com"
       class="myFabWin"
       rel="{'content':'test','height':500,'title':'my link rocks','loadMethod':'iframe', 'onContentLoaded': null}">
              My Link
      </a>
    Note: If you are loading URL's to internal pages within your Joomla site, it is best to add the querystring '&tmpl=component' to your url, to load only the page's content and not the surrounding Joomla template.


    Opening via JavaScript(top)


    To open a simple window to show some html:
    Code (Javascript):

    Fabrik.getWindow({id:'uniqueid', 'loadMethod': 'html', 'content':'hello'})
     
    To load a page in an iframe:

    Code (Javascript):

    Fabrik.getWindow({id:'uniqueid', 'loadMethod': 'iframe', 'contentURL':'http://fabrikar.com', 'title': 'window title'});