/* ======================================== ::LL ======================================== Lazy load customer stories LAZY.getStories() nothing to pass in no return (manipulates DOM); ideally should return something like true/false depending on action uses global offset counter to send an ajax request to an EE template on return of html string, add html to the specific story element EE template will return a specific error string if no more results LAZY.getSegment() nothing to pass in returns the string in the second path (EE's Segment_2) assumes url pathname is in format /customer-stories/segment_name LAZY.getPosition() nothing to pass in returns the current scroll position */ var LL = (function() { var public = {}, // counter to tell EE template which entries to return offsetCount = 0, // element containing all of the stories $storyListElem = $('#storyList'), // state of current ajax request; remains 'true' if last request returned no results fetching = false; public.getStories = function() { var theSrc = '', // grab the segment string from the URL theSegment = LL.getSegment(), // set the DOM target element theTarg = $storyListElem, urlPart = ''; // if we are filtering by a segment, we'll send that through to the ajax request if ( theSegment !== '' ) { urlPart = '/'+theSegment; } // url to the EE template that will return html theSrc = 'https://health.ebsco.com/press-releases/story_load/'+offsetCount+urlPart; // if there's no current request running, send an ajax request if (!fetching) { // set our current fetching state fetching = true; // make the get request to the url string $.ajax({ url: theSrc }).done(function(html) { // this test string matches the exact string the EE template returns if it returns no entries var thisTest = html.indexOf(""); //if ( thisTest === -1 ) { // add the html to the story list element $(theTarg).append(html); $(".pages").slideDown(1000); // if needing callbacks... /*if (callback && typeof(callback) === "function") {callback();}*/ // set fetching state fetching = false; //} else { // no more results // window.console && console.log('no additional results'); //} if ( thisTest !== -1 ) { // there are no more results after this, so we need to disable the load more btn $('#loadMore').css('display','none'); } }); // increment the offset counter; note that this range must match the limit set in the EE template offsetCount = offsetCount + 10; } else { // either currently running a request, or the last request returned no entries // window.console && console.log( 'currently fetching; skipping new request'); } }; public.getSegment = function() { // assumes url format /customer-stories/segment_name var segment = (window.location.pathname).split('/')[2]; // if there is no segment, make the segment var an empty string if ( segment === undefined ) { segment = ''; } return segment; }; public.getPosition = function() { /* * if the browser understands window.pageYOffset, use that for the winPos * otherwise, set winPos to documentElement.scrollTop, * or body.parentNode.scrollTop, * or body.scrollTop * adding in the view height */ var winPos = ( (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop ) + $(window).height(); return winPos; }; return public; }(LL || {})); // page load calls $(function() { // set the 'click for more stories' button element var $theBtn = $('#loadMore'); /* * initially run the ajax call to load stories * note: if having the page load the first set of stories via EE (to avoid the inital 'flash'), * be sure to initially set the counter var to the offset (10 by default) */ LL.getStories(); // bind events $theBtn.on('click', function() { LL.getStories(); return false; }); /* * if re-invoking the onscroll fn, make sure to make the var fetching a global var * */ /* window.onscroll = function() { if ( !fetching ) { if ( LL.getPosition() >= $(document).height() - 200 ) {LL.getStories();} } }; */ }); // "back to top" floating button /* * set the offset (after how much scrolling from the top we want the button to appear) * and how long we want the scroll to top effect to last. * use scroll function to make the button visible when user scrolls * grab the current scroll position using scrollTop, check to see if it is greater than our offset * and if it is we show the button using the fadeIn function. * if it's not we make sure the button is not visible using the fadeOut function. */ jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) {jQuery('.backtoTop').fadeIn(duration);} else {jQuery('.backtoTop').fadeOut(duration);} }); /* * to actually scroll to the top, we need to intercept the click event on our button by preventing the default click from being triggered, * and then we scroll back to the top using the animate function, passing in our duration. * finally we return false to ensure that no other events are raised after this. */ jQuery('.backtoTop').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) });