Skip to content

Instantly share code, notes, and snippets.

@itzikbenh
Last active June 14, 2017 14:41
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save itzikbenh/16578933245342e7d9e8d54dba646cc0 to your computer and use it in GitHub Desktop.
Save itzikbenh/16578933245342e7d9e8d54dba646cc0 to your computer and use it in GitHub Desktop.
This is related to this gist https://gist.github.com/itzikbenh/5cc5fb05b393a1516af70bc0fde3fa18 I'm experimenting with solutions to back button. Not ready yet
(function($) {
//Handles the infinite-scroll part and adds new content to sessionStorage so we can return user to the same position
//when he hits the back button
$(window).scroll(function() {
var url = $('.nav-links .next').attr('href');
if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 150) {
//To avoid repeating calls we set the paginate container to hold only text and we remove the links.
//that way url variable would be empty, thus if statement would return false and not continure to the get call.
$('.navigation').text("Fetching more posts..."); //You can optionally load an icon-loader or something.
$(".loader").removeClass("hidden"); //Show the loader icon
$.get(url, function(data) {
var dom = $(data);
var next_posts = dom.find('.posts-container').html();
var pagination = dom.find('.navigation').html();
$('.posts-container').append(next_posts);
$('.navigation').html(pagination); //We want to load the new pagination with new links.
$(".loader").addClass("hidden"); //Hide the loader icon
//We want to check if we have any post content in session storage.
//If we don't we will set it to empty string just incase an append to it the new data.
var posts_to_append = sessionStorage.getItem("posts_to_append");
if(!posts_to_append) {
posts_to_append = "";
}
sessionStorage.setItem("posts_to_append", posts_to_append + next_posts);
//Here we always need the newest pagination avaiable so we replace instead of appending.
sessionStorage.setItem("pagination_to_append", pagination);
});
}
});
//Handles returning the user to his previous position with the previous loaded content. Also makes sure to reset
//everything on page refresh while user is the posts page.
$(document).ready(function() {
//Some browsers are using caching so we really don't need to remember the user's location. They will do it for us.
//From what I checked it seems the Safari and Firefox are using cache to return the user to his previous location
//when he hits the back button. This is what I'm only doing it manually for Chrome now. Not tested yet in
//IE or Opera.
//Code snippet I found on stackoverflow that detects the user's browser.
// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';
// At least Safari 3+: "[object HTMLElementConstructor]"
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;
if(isChrome) {
//We use to identify when user clicks the refresh icon.
window.onbeforeunload = unloadPage();
function unloadPage() {
var clicked_post_link = sessionStorage.getItem("clicked_post_link");
if(clicked_post_link === "no" || !clicked_post_link) {
sessionStorage.removeItem("posts_to_append");
sessionStorage.removeItem("pagination_to_append");
window.scrollTo(0, 0);
}
}
$(document).on( "click", "a", function(e) {
e.preventDefault();
console.log("clicked link");
//If user doesn't click on a post link we will reset storage to its default.
if($(this).hasClass('post-page')) {
sessionStorage.setItem("scroll_position", $(window).scrollTop());
sessionStorage.setItem("clicked_post_link", "yes");
window.location = $(this).attr('href');
} else {
sessionStorage.removeItem("posts_to_append");
sessionStorage.removeItem("pagination_to_append");
sessionStorage.setItem("clicked_post_link", "no");
window.location = $(this).attr('href');
}
});
var scroll_position = sessionStorage.getItem("scroll_position");
var content = sessionStorage.getItem("posts_to_append");
var pagination = sessionStorage.getItem("pagination_to_append");
if(content) {
$('.posts-container').append(content);
$('.navigation').html(pagination);
window.scrollTo(0, scroll_position);
//We want to reset it so if user click page refresh it will reset the session.
sessionStorage.setItem("clicked_post_link", "no");
}
}
});
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment