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

'use strict';

/* global algoliasearch, insertAfter, insertArticles, buildArticleHTML, nextPage:writable, fetching:writable, done:writable */

var client;

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

function insertNext(params, buildCallback) {
  return function insertEntries(entries) {
    var list = document.getElementById(params.listId || "sublist");
    var newFollowersHTML = "";
    entries.forEach(function insertAnEntry(entry){
      let existingEl = document.getElementById((params.elId || "element") + "-" + entry.id);
      if(!existingEl) {
        var newHTML = buildCallback(entry)
        newFollowersHTML += newHTML
      }
    });

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

function buildFollowsHTML(follows) {
  return '<div id="follows-' + follows.id + '" class="single-article">\n' +
         '  <a href="' + follows.path +'" class="block-link">\n' +
         '    <h2>\n' +
         '      <img alt="' + follows.username + ' profile image" src="' + follows.profile_image + '" />\n' +
         '        ' + follows.name + '\n' +
         '      <span class="dashboard-username">@' + follows.username + '</span>\n' +
         '    </h2>\n' +
         '  </a>\n' +
         '</div>';
}

var negativeFollow = -1;
function buildTagsHTML(tag) {
  var tagHTML = '';
  if (tag.points < 0 && negativeFollow === -1){
    tagHTML += '<h2>Negative Tags (anti-follows)</h2>';
    negativeFollow = 0;
  }
  return tagHTML +
        '<div id="follows-' + tag.id + '" class="single-article" style="border-color:' + tag.color + ';box-shadow: 3px 3px 0px ' + tag.color + '">\n' +
        '   <h2>\n' +
        '     <a href="/t/' + tag.name + '">\n' +
        '       ' + tag.name + '\n' +
        '     </a>\n' +
        '     <form class="edit_follow" id="edit_follow_' + tag.id + '" action="/follows/' + tag.id + '" accept-charset="UTF-8" method="post">\n' +
        '       <input name="utf8" type="hidden" value="✓">\n' +
        '       <input type="hidden" name="_method" value="patch">\n' +
        '       <input type="hidden" name="authenticity_token" value="' + tag.token + '">\n' +
        '       <label for="follow_points">Follow Weight:</label>\n' +
        '       <input step="any" required="required" type="number" value="' + tag.points + '" name="follow[points]" id="follow_points">\n' +
        '       <input type="submit" name="commit" value="Submit">\n' +
        '     </form>\n' +
        '   </h2>\n' +
        '</div>';
}

function fetchNextFollowingPage(el){
  var indexParams = JSON.parse(el.dataset.params);
  var action = indexParams.action;
  if (action.includes("users")){
    fetchNext(el, "/api/followings/users", insertNext({ elId: "follows" }, buildFollowsHTML));
  } else if (action.includes("podcasts")){
    fetchNext(el, "/api/followings/podcasts", insertNext({ elId: "follows" }, buildFollowsHTML));
  } else if (action.includes("organizations")){
    fetchNext(el, "/api/followings/organizations", insertNext({ elId: "follows" }, buildFollowsHTML));
  } else {
    fetchNext(el, "/api/followings/tags", insertNext({ elId: "follows" }, buildTagsHTML));
  }
}

function fetchNextFollowersPage(el){
  var indexParams = JSON.parse(el.dataset.params);
  var whichEndpoint = indexParams.which;
  if (whichEndpoint.includes("organization")){
    fetchNext(el, "/api/followers/organizations", insertNext({ elId: "follows" }, buildFollowsHTML));
  } else {
    fetchNext(el, "/api/followers/users", insertNext({ elId: "follows" }, buildFollowsHTML));
  }
}

function buildVideoArticleHTML(videoArticle) {
  return '<a class="single-video-article single-article" href="' + videoArticle.path + '" id="video-article-' + videoArticle.id + '">\n' +
         '  <div class="video-image" style="background-image: url(' + videoArticle.cloudinary_video_url + ')">\n' +
         '     <span class="video-timestamp">' + videoArticle.video_duration_in_minutes + '</span>\n' +
         '   </div>\n' +
         '   <p><strong>' + videoArticle.title + '</strong></p>\n' +
         '  <p>' + videoArticle.user.name + '</p>\n' +
         '</a>';
}

function insertVideos(videoArticles) {
  var list = document.getElementById("subvideos");
  var newVideosHTML = "";
  videoArticles.forEach(function insertAVideo(videoArticle){
    var existingEl = document.getElementById("video-article-"+videoArticle.id);
    if(!existingEl) {
      var newHTML = buildVideoArticleHTML(videoArticle)
      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 fetchNextVideoPage(el){
  fetchNext(el, "/api/videos", insertVideos)
}

function insertArticles(articles) {
  var list = document.getElementById("substories");
  var newArticlesHTML = "";
  var el = document.getElementById("home-articles-object")
  if (el) {el.outerHTML = "";}
  articles.forEach(function insertAnArticle(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 fetchNextPodcastPage(el){
  fetchNext(el, "/api/podcast_episodes", insertArticles)
}

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");
  var paginationArticlesIndex;
  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);
    const checkBlockedContentEvent = new CustomEvent('checkBlockedContent')
    window.dispatchEvent(checkBlockedContentEvent)
    if (content.hits.length === 0) {
      document.getElementById("loading-articles").style.display = "none"
      done = true;
    }
  });
}

function fetchNextPageIfNearBottom() {
  var indexContainer = document.getElementById("index-container");
  var elCheck =  indexContainer && !document.getElementById("query-wrapper");
  if (!elCheck) {
    return;
  }

  var indexWhich = indexContainer.dataset.which;

  var fetchCallback;
  var scrollableElemId;
  if (indexWhich === "podcast-episodes") {
    scrollableElemId = "articles-list";
    fetchCallback = function fetch() {
      fetchNextPodcastPage(indexContainer);
    };
  } else if (indexWhich === "videos") {
    scrollableElemId = "video-collection";
    fetchCallback = function fetch() {
      fetchNextVideoPage(indexContainer);
    };
  } else if (indexWhich === "followers") {
    scrollableElemId = "user-dashboard";
    fetchCallback = function fetch() {
      fetchNextFollowersPage(indexContainer);
    }
  } else if (indexWhich === "following") {
    scrollableElemId = "user-dashboard";
    fetchCallback = function fetch() {
      fetchNextFollowingPage(indexContainer);
    }
  } else {
    scrollableElemId = "articles-list";
    fetchCallback = function fetch() {
      algoliaPaginate(indexContainer.dataset.algoliaTag);
    };
  }

  var scrollableElem = document.getElementById(scrollableElemId);

  if ( !done && !fetching && (window.scrollY) > (scrollableElem.scrollHeight - 3700) ) {
    fetching = true;
    fetchCallback();
  }
}

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

  if (document.getElementsByClassName("single-article").length < 2 || window.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 handleInterval(){
    fetchNextPageIfNearBottom();
  }, 210)
}

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

  if (elCheck) {
    initScrolling.called = true;
    checkIfNearBottomOfPage();
  }
}