initScrolling.js.erb without linting errors

initScrolling.js.erb

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

'use strict';

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">
            <a href="${follows.path$}" class="block-link">
              <h2>
                <img alt="${follows.username} profile image" src="${follows.profile_image}" />
                ${follows.name}
                <span class="dashboard-username">@${follows.username}</span>
              </h2>
            </a>
          </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}">
        <h2>
          <a href="/t/${tag.name}">
            ${tag.name}
          </a>
          <form class="edit_follow" id="edit_follow_${tag.id}" action="/follows/${tag.id}" accept-charset="UTF-8" method="post">
            <input name="utf8" type="hidden" value="✓">
            <input type="hidden" name="_method" value="patch">
            <input type="hidden" name="authenticity_token" value="${tag.token}">
            <label for="follow_points">Follow Weight:</label>
            <input step="any" required="required" type="number" value="${tag.points}" name="follow[points]" id="follow_points">
            <input type="submit" name="commit" value="Submit">
          </form>
        </h2>
      </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}">
            <div class="video-image" style="background-image: url(${videoArticle.cloudinary_video_url})">
              <span class="video-timestamp">${videoArticle.video_duration_in_minutes}</span>
            </div>
            <p><strong>${videoArticle.title}</strong></p>
           <p>${videoArticle.user.name}</p>
          </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);
    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();
  }
}