/* Create inital variables ======================= */ // Store the amount of items we have loaded, this is used in an AJAX request to know // what the next amount of event dates are that we need to load var nLoadOffset = 0; // Store the amount of items we need to load when we change page or press the back button // This is used in the 'Before window unload' unload section, so please see comments there var nExtraAmountOfItemsWeWantToLoadIfChangedPage = 0; // Store the observer, this is what will detect if an element has interacted / come into view var oObserver = false; // Store the last element that we are observing, as if this comes into view, we want to load more event dates var oLastElementWeAreObserving = false; // STore the amoutn of elements we load at any given time, if you change this here you'll // need to also change in the php scripts var nAmountOfElementsLoadedAtATime = 12; /* Before window unload ==================== This is fired before we change page. It simply does an AJAX request to update the session for the amount of extra items that we are wanting to load in php when we come back to this page. This is to prevent scroll janking, as when we only load 12 in php and let javascript do the rest the scroll position is out of the correct location and its very confusing on mobile */ $(window).on("beforeunload", function() { $.ajax({ type: 'GET', url: 'ajax/visit/get-upcoming-event-dates.php?nLoadOffset=' + nExtraAmountOfItemsWeWantToLoadIfChangedPage + '&bJustUpdateSession=1', async: false }); }); /* Document ready ============== When the document is ready, intialise all the observers and default values */ $(document).ready( function() { // Store all the event wrappers var aElements = $('.event-wrapper'); // Store the default load offset nLoadOffset = aElements.length; // Create the observer function, to invoke the callback when the first element in the last row // comes into view oObserver = new IntersectionObserver( function( aObservedElements ) { // Loop over all the elements we have observed (It'll only be 1) for( var nIndex = 0; nIndex < aObservedElements.length; nIndex++ ) { // If the element we are observing is intersecting if( aObservedElements[nIndex].isIntersecting == true ) { // Update the load offset that we use for php nExtraAmountOfItemsWeWantToLoadIfChangedPage = parseInt( $( aObservedElements[nIndex].target ).attr("data-offset") ); // Call the function to load the next set of elements if( aObservedElements[nIndex].target == oLastElementWeAreObserving ) { fLoadNextSetOfEventDates(); } } } }); // If we have at least 12 elements (Meaning we have loaded 12 in php, no more no less) if( aElements.length == nAmountOfElementsLoadedAtATime ) { // we want the first element to be observed, and when that comse into view we // want to tell the php variable that is used to track the offset on page change // to say, we don't need an offset, as we have only loaded the first few on the page // // This is done in the observer callback var oElementToObserve = aElements[0]; $(oElementToObserve).attr("data-offset", 0); oObserver.observe( oElementToObserve ); // Store the element that we want to trigger the next load of event dates to load oElementToObserve = aElements[ aElements.length - 4 ]; // Initalise the observation on the element, and set the data-offset so we know // what the next set of elements is that we are wanting to load oLastElementWeAreObserving = oElementToObserve; $(oLastElementWeAreObserving).attr("data-offset", aElements.length ); oObserver.observe( oElementToObserve ); } else // If we have more than 12 elements, then we must have // loaded some extra elemnts in php from session, as such // lets observe each 12th element so we know what the offset it // for the next time we either need to load more dates, or press the back button if( aElements.length > nAmountOfElementsLoadedAtATime ) { // Loop through each 12 items for( var nIndex = 0; nIndex < aElements.length; nIndex += (nAmountOfElementsLoadedAtATime - 1) ) { // Store the element that we want to trigger the next load of event dates to load var oElementToObserve = aElements[nIndex]; // Initalise the observation on the element, and set the data-offset so we know // what the next set of elements is that we are wanting to load oLastElementWeAreObserving = oElementToObserve; $(oElementToObserve).attr("data-offset", (nIndex == 0 ? nIndex : nIndex + 1 ) ); oObserver.observe( oElementToObserve ); nExtraAmountOfItemsWeWantToLoadIfChangedPage = nIndex; } } }); /* fLoadNextSetOfEventDates() ========================== This function makes an Ajax request to get more event dates whenever the viewer scrolls past the last row of events and then reassigns an observer to the first element in the newest last row */ function fLoadNextSetOfEventDates() { // Make an AJAX query (as GET request to call the php script that handles the getting of upcoming event dates) $.ajax ({ url: "ajax/visit/get-upcoming-event-dates.php?nLoadOffset=" + nLoadOffset, success: function(sEventDates_JSON) { // If we have a valid JSON response from the AJAX request if(sEventDates_JSON != "") { // Store the element that we want to clone var oElementToClone = $('.event-wrapper').last(); // Parse the json and store the result aCurrentDateSelected_Info = $.parseJSON(sEventDates_JSON); // Loop over all the elements we have for( var nIndex = 0; nIndex < aCurrentDateSelected_Info.length; nIndex++ ) { // Create dom element with jquery by using one of the existing event dates we have listed var oDateEntryDOM = oElementToClone.clone(); // In this neweley created DOM element, set the image path, name, date, buy tickets path and short description etc oDateEntryDOM.find("a").attr("href",aCurrentDateSelected_Info[nIndex]["sURL"]); oDateEntryDOM.find(".event-image").css('background-image', "url('" + aCurrentDateSelected_Info[nIndex]["sEvent_ImagePath"] + "')"); oDateEntryDOM.find(".event-date").html(aCurrentDateSelected_Info[nIndex]["sDate"]); oDateEntryDOM.find(".event-title").html(aCurrentDateSelected_Info[nIndex]["sEventName"]); oDateEntryDOM.find(".event-description").html(aCurrentDateSelected_Info[nIndex]["sShortDescription"]); // Append the dom element added to the dom $("#content").append(oDateEntryDOM); } // Store all the event wrappers var aElements = $('.event-wrapper'); // Store the first item in the last row of elements var oElementToObserve = aElements[ aElements.length - 4 ]; // Initalise the observation on the element (add 12 to the offset as that's how many we load at any given time) $(oElementToObserve).attr("data-offset", nLoadOffset + nAmountOfElementsLoadedAtATime ); oObserver.observe( oElementToObserve ); oLastElementWeAreObserving = oElementToObserve; // Recalculate the load offset nLoadOffset = aElements.length; } else { // There is no element to observe, so set the elem to false oElementToObserve = false; } } }); }