4ab202ab0a
* Execute Reading List searches in Elasticsearch * add additional readinglist front tests
309 lines
11 KiB
Text
309 lines
11 KiB
Text
'use strict';
|
|
|
|
/* global 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: 1px solid ' + 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, "/followings/users", insertNext({ elId: "follows" }, buildFollowsHTML));
|
|
} else if (action.includes("podcasts")) {
|
|
fetchNext(el, "/followings/podcasts", insertNext({ elId: "follows" }, buildFollowsHTML));
|
|
} else if (action.includes("organizations")) {
|
|
fetchNext(el, "/followings/organizations", insertNext({ elId: "follows" }, buildFollowsHTML));
|
|
} else {
|
|
fetchNext(el, "/followings/tags", insertNext({ elId: "follows" }, buildTagsHTML));
|
|
}
|
|
}
|
|
|
|
function fetchNextFollowersPage(el) {
|
|
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 ( !['/', '/top/week', '/top/month', '/top/year', '/top/infinity', '/latest'].includes(window.location.pathname) &&
|
|
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 paginate(tag, params, requiresApproval) {
|
|
const searchHash = { ...{ per_page: 15, page: nextPage }, ...JSON.parse(params) };
|
|
|
|
if (tag && tag.length > 0) {
|
|
searchHash.tag_names = searchHash.tag_names || [];
|
|
searchHash.tag_names.push(tag);
|
|
}
|
|
searchHash.approved = (requiresApproval === 'true') ? 'true' : '';
|
|
|
|
var homeEl = document.getElementById("index-container");
|
|
if (homeEl.dataset.feed === "base-feed") {
|
|
searchHash.class_name = "Article";
|
|
} else if (homeEl.dataset.feed === "latest") {
|
|
searchHash.class_name = "Article";
|
|
searchHash.sort_by = "published_at";
|
|
} else {
|
|
searchHash.class_name = "Article";
|
|
searchHash["published_at[gte]"] = homeEl.dataset.articlesSince;
|
|
searchHash.sort_by = "positive_reactions_count";
|
|
}
|
|
|
|
// Brute force copying code from a utlity for quick fix
|
|
const searchParams = new URLSearchParams();
|
|
Object.keys(searchHash).forEach((key) => {
|
|
const value = searchHash[key];
|
|
if (Array.isArray(value)) {
|
|
value.forEach((arrayValue) => {
|
|
searchParams.append(`${key}[]`, arrayValue);
|
|
});
|
|
} else {
|
|
searchParams.append(key, value);
|
|
}
|
|
});
|
|
|
|
fetch(`/search/feed_content?${searchParams.toString()}`, {
|
|
method: 'GET',
|
|
headers: {
|
|
Accept: 'application/json',
|
|
'X-CSRF-Token': window.csrfToken,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
credentials: 'same-origin',
|
|
})
|
|
.then(response => response.json())
|
|
.then((content) => {
|
|
nextPage += 1;
|
|
insertArticles(content.result);
|
|
const checkBlockedContentEvent = new CustomEvent('checkBlockedContent')
|
|
window.dispatchEvent(checkBlockedContentEvent);
|
|
initializeReadingListIcons();
|
|
if (content.result.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() {
|
|
paginate(
|
|
indexContainer.dataset.tag,
|
|
indexContainer.dataset.params,
|
|
indexContainer.dataset.requiresApproval
|
|
);
|
|
};
|
|
}
|
|
|
|
var scrollableElem = document.getElementById(scrollableElemId);
|
|
|
|
if ( !done && !fetching && (window.scrollY) > (scrollableElem.scrollHeight - 3700) ) {
|
|
fetching = true;
|
|
fetchCallback();
|
|
}
|
|
}
|
|
|
|
function checkIfNearBottomOfPage() {
|
|
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();
|
|
}
|
|
}
|