docbrown/app/assets/javascripts/initializers/initScrolling.js.erb

function initScrolling() {
  checkIfNearBottomOfPage();
}

function checkIfNearBottomOfPage() {
  var elCheck = document.getElementById("index-container");

  if (elCheck) {
    var publicSearchKey = '<%= ALGOLIASEARCH_PUBLIC_SEARCH_ONLY_KEY %>'
    client = algoliasearch('<%= ApplicationConfig["ALGOLIASEARCH_APPLICATION_ID"] %>', publicSearchKey);

    initScrolling.called = true;
    if (document.getElementsByClassName("single-article").length < 2 || location.search.indexOf("q=") > -1 ) {
      document.getElementById("loading-articles").style.display = "none"
      done = true;
    } else {
      document.getElementById("loading-articles").style.display = "block"
    }
    fetchNextPageIfNearBottom();
    setInterval(function(){
      fetchNextPageIfNearBottom();
    },210)
  }
}

function fetchNextPageIfNearBottom() {
  var elCheck = document.getElementById("index-container") && !document.getElementById("query-wrapper");
  if (!elCheck) {
    return;
  }
  if ( !done && !fetching && (window.scrollY) > (document.documentElement.scrollHeight - 3700) ) {
    fetching = true;
    var el = document.getElementById("index-container");
    var indexWhich = el.dataset.which;
    if (indexWhich == "podcast-episodes") {
      fetchNextPodcastPage(el);
    } else if (indexWhich == "videos") {
      fetchNextVideoPage(el)
    } else {
      algoliaPaginate(el.dataset.algoliaTag);
    }
  }
}

function fetchNextVideoPage(el){
  var indexParams = JSON.parse(el.dataset.params);
  var urlParams = Object.keys(indexParams).map(function(k) {
    return encodeURIComponent(k) + '=' + encodeURIComponent(indexParams[k])
  }).join('&');
  if (urlParams.indexOf("q=") > -1 ) {
    return;
  }
  var endpoint = '/api/videos'
  var fetchUrl = (endpoint+'?page='+nextPage+"&"+urlParams+"&signature="+parseInt(Date.now()/400000)).replace("&&","&")
  window.fetch(fetchUrl)
  .then(function(response) {
    response.json().then(function(video_articles) {
      nextPage += 1;
      insertVideos(video_articles);
      if (video_articles.length == 0) {
        document.getElementById("loading-articles").style.display = "none"
        done = true;
      }
    });
  }).catch(function(err) {
    console.log(err);
  });
}

function insertVideos(video_articles) {
  var list = document.getElementById("subvideos");
  var newVideosHTML = "";
  video_articles.forEach(function(video_article){
    var existingEl = document.getElementById("video-article-"+video_article.id);
    if(!existingEl) {
      var newHTML = buildVideoArticleHTML(video_article)
      newVideosHTML += newHTML
    }
  });

  var distanceFromBottom = document.documentElement.scrollHeight - document.body.scrollTop;
  var newNode = document.createElement("div");
  newNode.innerHTML = newVideosHTML;
  newNode.className += "video-collection"
  var singleArticles = document.getElementsByClassName("single-article");
  var lastElement = singleArticles[singleArticles.length - 1];
  insertAfter(newNode, lastElement);
  if (nextPage > 0) {
    fetching = false;
  }
}

function buildVideoArticleHTML(video_article) {
  return '<a class="single-video-article single-article" href="'+video_article.path+'" id="video-article-'+video_article.id+'">\
    <img src="'+video_article.cloudinary_video_url+'">\
    <p><strong>'+video_article.title+'</strong></p>\
    <p>'+video_article.user.name+'</p>\
    <span class="video-timestamp">'+video_article.video_duration_in_minutes+'</span></a>';
}


function fetchNextPodcastPage(el){
  var indexParams = JSON.parse(el.dataset.params);
  var urlParams = Object.keys(indexParams).map(function(k) {
    return encodeURIComponent(k) + '=' + encodeURIComponent(indexParams[k])
  }).join('&');
  if (urlParams.indexOf("q=") > -1 ) {
    return;
  }
  var endpoint = '/api/podcast_episodes'
  var fetchUrl = (endpoint+'?page='+nextPage+"&"+urlParams+"&signature="+parseInt(Date.now()/400000)).replace("&&","&")
  window.fetch(fetchUrl)
  .then(function(response) {
    response.json().then(function(articles) {
      nextPage += 1;
      insertArticles(articles);
      if (articles.length == 0) {
        document.getElementById("loading-articles").style.display = "none"
        done = true;
      }
    });
  }).catch(function(err) {
    console.log(err);
  });
}

function insertArticles(articles) {
  var list = document.getElementById("substories");
  var newArticlesHTML = "";
  var el = document.getElementById("home-articles-object")
  if (el) {el.outerHTML = "";}
  articles.forEach(function(article){
    var existingEl = document.getElementById("article-link-"+article.id);
    if ( existingEl &&
      existingEl.parentElement &&
      existingEl.parentElement.classList.contains('single-article-small-pic') &&
      !document.getElementById("video-player-"+article.id)) {
      existingEl.parentElement.outerHTML = buildArticleHTML(article);
    } else if(!existingEl) {
      var newHTML = buildArticleHTML(article)
      newArticlesHTML += newHTML
      initializeReadingListIcons();
    }
  });
  var distanceFromBottom = document.documentElement.scrollHeight - document.body.scrollTop;
  var newNode = document.createElement("div");
  newNode.innerHTML = newArticlesHTML;
  var singleArticles = document.getElementsByClassName("single-article");
  var lastElement = singleArticles[singleArticles.length - 1];
  insertAfter(newNode, lastElement);
  if (nextPage > 0) {
    fetching = false;
  }
}

function algoliaPaginate(tag){
  var filters = [];
  if (tag && tag.length > 0) {
    filters.push(tag);
  }

  var searchObj = {
      hitsPerPage: 15,
      page: nextPage,
      attributesToHighlight: [],
      tagFilters: filters,
  }

  var homeEl = document.getElementById("index-container");
  if (homeEl.dataset.feed === "base-feed") {
    paginationArticlesIndex = client.initIndex('ordered_articles_<%= Rails.env %>');
  } else if (homeEl.dataset.feed === "latest") {
    paginationArticlesIndex = client.initIndex('ordered_articles_by_published_at_<%= Rails.env %>');
  } else {
    searchObj["filters"] = ('published_at_int > ' + homeEl.dataset.articlesSince);
    paginationArticlesIndex = client.initIndex('ordered_articles_by_positive_reactions_count_<%= Rails.env %>');
  }

  paginationArticlesIndex.search("*", searchObj)
  .then(function searchDone(content) {
    nextPage += 1;
    insertArticles(content.hits);
    if (content.hits.length == 0) {
      document.getElementById("loading-articles").style.display = "none"
      done = true;
    }
  });
}