List JavaScript

requirejs(['fab/fabrik'], function() {

    Fabrik.addEvent('fabrik.list.loaded', function(list) {

        var data = list.Options.data;

        // data is an array of Groups, each group is an object of rows, each row has a data object, each data object has a  __pk_val item which will have the row id

        data.each(function (group) {

            group.each(function (row) {

                // do whatever you need with row.data.__pk_val

                console.log(row.data.__pk_val);

            });

        });

    });

});

requirejs(['fab/fabrik'], function () {

  Fabrik.addEvent('fabrik.list.order', function(list, orderBy, orderDir){

      alert('aha! list' + list.id + ' was ordered ' + orderBy + ' ' + orderDir);  }); // Ran for each list on page

     if (list.id == 165) {

             alert('Only run this for list 165');

     }

});

requirejs(['fab/fabrik'], function () {



  // An edit window has been closed

  Fabrik.addEvent('fabrik.list.row.edit.close', function (listRef, rowid, k) {



      // Update the Lists data

      Fabrik.getBlock(listRef).updateRows();

    });

});

/*

* Creates Fixed table headers and footer in a Fabrik list using the default Bootstrap template.

* How to use:

*    1    Open or create the list_#.js file for the list that contains the table you want to have fixed headers

*    2    Include a call to setHeaders() at the end of the requirejs(['fab/fabrik'] function (as shown below)

*    3    Copy the jQuery(window).scroll(function(event) and function setHeaders() code into that js file

*    ( For a default Joomla protostar template using the default Fabrik Bootstrap list template

        you can skip steps 4-7 and just replace all instances of '260' in this code with your List id.)

*    4    Examine the page html and identify the id used for the form object

*    5    Replace all instances of "listform_260_com_fabrik_260" with that form id

*    6    Examine the page html and identify the id for the table object

*    7    Replace all instances of "list_260_com_fabrik_260" with that table id

*    8    Take note of any remarks in code beginning with /*** for additional Options/settings.

*    Enjoy your 'fixed header'!

*    NOTE: It may be necessary to include the setHeaders() call in another fabrik *.js file instead

*    - i.e. if you are also using a Fabrik list or Form module on the same page which might affect when this list is shown.

*/



requirejs(['fab/fabrik'], function () {

    setHeaders();

});



/* this function checks if passed jQuery object is in viewport of browser */

jQuery.fn.inView = function(){

    //Window Object

    var win = jQuery(window);

    //Object to Check

    obj = jQuery(this);

    //the top Scroll Position in the page

    var scrollPosition = win.scrollTop();

    //the end of the visible area in the page, starting from the scroll position

    var visibleArea = win.scrollTop() + win.height();

    //the end of the object to check

    var objEndPos = (obj.offset().top + obj.outerHeight());

    return(visibleArea >= objEndPos && scrollPosition <= objEndPos ? true : false)

};



/* The scroll event listener */

jQuery(window).scroll(function(event){



    /* Get the current table vertical position as page is scrolled */

    window.tableFromTop = window.thisTable.getBoundingClientRect().top + window.pageYOffset;



    /* Get the vertical scroll position of entire document */

    var tgBodyTop = jQuery(window).scrollTop();



    /* Get the horizontal scroll position of entire document */

    var tgBodyLeft = document.getElementById("list_260_com_fabrik_260").offsetLeft - jQuery(window).scrollLeft();



    /* detach/attach table header */

    if(tgBodyTop > window.tableFromTop) {

        if(jQuery("#listform_260_com_fabrik_260 div.fabrikDataContainer table.temptable").length==0){

            var temphead = jQuery("table#list_260_com_fabrik_260 thead").clone();

            jQuery(temphead).prop('id','temphead');



            /* Create fixed header */

            var tableclasses = document.getElementById("list_260_com_fabrik_260").className;

            /* The z-index may have to be set higher if the fixed header is not 'on top' */

            jQuery("#listform_260_com_fabrik_260 div.fabrikDataContainer").prepend('<table class="'+tableclasses+' temptable" style="width:'+window.tablewidth+'px;z-index:1"><thead>'+jQuery(temphead).html()+'</thead></table>');



            /* Note: Set the "top:" fixed position for table header in function setHeaders() */

            jQuery("table.temptable").css({"position":"fixed","top":window.fixedMenuHeight+"px","left":tgBodyLeft+"px"});

        }

    }else{

        if(jQuery("#listform_260_com_fabrik_260 div.fabrikDataContainer table.temptable").length){

            jQuery("#listform_260_com_fabrik_260 div.fabrikDataContainer table.temptable").remove();

        }

    }



    /*** Remove this section to not process detach/attach table footer ***/

    if(jQuery("#bottdiv").inView() == true  || tgBodyTop+window.viewHeight < window.tableFromTop+window.theadHeight+window.tfootHeight+1) {

        /* Un-dock footer if table is outside viewport or normal footer would already be in viewport */

        jQuery(".docked").css({"position":"","bottom":"","width":"","display":""});

        jQuery(".docked").removeClass();

    }else{

        /* Dock the footer if table is in viewport and normal footer is outside of viewport */

        if(tgBodyTop+window.viewHeight-window.theadHeight-window.tfootHeight > window.tableFromTop) {

            jQuery("#list_260_com_fabrik_260 tfoot").addClass("docked");

            /* May need to increase z-index value if any list Elements overlay footer when scrolled */

            jQuery(".docked").css({"position":"fixed","bottom":"0px","left":tgBodyLeft+"px","width":window.tablewidth+"px","display":"inherit","z-index":"1"});

        }

    }



});



/* Reset the fixed headers if window gets resized */

jQuery( window ).resize(function() {

    setHeaders();

});



/* main function call for fixed headers/footer -

   call this function as the last line in the requirejs(['fab/fabrik'], function () */

function setHeaders() {

    /*** Set window.fixedMenuHeight to the height of fixed page header/menu - 0 if none) ***/

    window.fixedMenuHeight = 34;



    /* clear settings if any are set */

    jQuery("#list_260_com_fabrik_260 tfoot").removeClass("docked");

    jQuery("#listform_260_com_fabrik_260 div.fabrikDataContainer table.temptable").remove();

    jQuery("#bottdiv").remove();



    /* initialize window variables */

    window.thisTable = document.getElementById("list_260_com_fabrik_260");

    window.tableFromTop = window.thisTable.getBoundingClientRect().top + window.pageYOffset;

    window.theadHeight = document.getElementById("list_260_com_fabrik_260").getElementsByTagName('thead')[0].clientHeight;

    window.tfootHeight = document.getElementById("list_260_com_fabrik_260").getElementsByTagName('tfoot')[0].clientHeight;

    window.viewHeight = jQuery(window).height();



    /* Create an empty div to identify the bottom of the table view, where the footer would normally be */

    jQuery(jQuery("<div>",{id:"bottdiv"})).appendTo("#listform_260_com_fabrik_260 div.fabrikDataContainer");



    /* initializes vars for css styling of each table header (th) - width, padding */

    window.tablewidth = document.getElementById("list_260_com_fabrik_260").clientWidth;

    var xwidth,xpad;

    // sets width and padding of each column as css style so cloned header will have it

    jQuery("table#list_260_com_fabrik_260 thead tr th").each(function (){

        xwidth = jQuery(this).width();

        xpad = jQuery(this).css('padding');

        jQuery(this).css({'width':xwidth+'px','padding':xpad});

    });



    /*** Note each remark for scrollTop Options. ***/

    /* This topPos value would scroll to the top of the list form */

    // var topPos = document.getElementById("listform_260_com_fabrik_260").getBoundingClientRect().top + window.pageYOffset - window.fixedMenuHeight ;

    /* This topPos value would scroll to the top of the table */

    // var topPos = document.getElementById("list_260_com_fabrik_260").getBoundingClientRect().top + window.pageYOffset - window.fixedMenuHeight ;

    /* If you have included a page class in the menu this would scroll to the top of the page (replace "onlinesurvey" with your page class name) */

    var topPos = document.getElementsByClassName("onlinesurvey")[0].getBoundingClientRect().top + window.pageYOffset - window.fixedMenuHeight;

    /*** Remark out the next line or remove this section if you don't want to scroll to the list/table/page on page load ***/

    jQuery("html, body").animate({ scrollTop: topPos });

}