diff --git a/src/js/changelog.js b/src/js/changelog.js index 538bce5..9b91c3c 100644 --- a/src/js/changelog.js +++ b/src/js/changelog.js @@ -4,14 +4,6 @@ import { loadCss } from "./common"; loadCss(require("../css/changelog.css")); -/** @type {string} */ -const apiBase = document.location.hostname.match(/(localhost|127\.0\.0\.1)/) ? "" : "https://bitrise.io"; -const changelogService = new ChangelogService(apiBase); - -const changelogList = new ChangelogList(document.getElementById("changelog-list")); -/** @type {HTMLAnchorElement} */ -const changelogLoadMoreButton = document.getElementById("changelog-load-more-button"); - const now = new Date(); let lastVisitedDate = now; @@ -26,19 +18,61 @@ expires.setMonth(expires.getMonth() + 12); document.cookie = `${cookieName}=${now};expires=${expires};`; const url = new URL(document.location.href); -const queryLAstVisit = url.searchParams.get("lastVisit"); -if (queryLAstVisit) { +const queryLastVisit = url.searchParams.get("lastVisit"); +if (queryLastVisit) { lastVisitedDate = new Date(); - lastVisitedDate.setDate(lastVisitedDate.getDate() - parseInt(queryLAstVisit)); + lastVisitedDate.setDate(lastVisitedDate.getDate() - parseInt(queryLastVisit)); +} +const queryLoadMore = url.searchParams.get("loadMore"); + +/** @type {string} */ +const apiBase = document.location.hostname.match(/(localhost|127\.0\.0\.1)/) ? "" : "https://bitrise.io"; +const changelogService = new ChangelogService(apiBase); + +const changelogList = new ChangelogList(document.getElementById("changelog-list")); +/** @type {HTMLAnchorElement} */ +const changelogLoadMoreButton = document.getElementById("changelog-load-more-button"); + +/** + * @param {string} fullUrl + */ +function renderFullChangelog(fullUrl) { + changelogService.loadTopics(fullUrl).then(topics => { + changelogList.render(topics, lastVisitedDate); + changelogLoadMoreButton.remove(); + }); } -/* -- TEST -- */ -// const testDate = new Date(); -// testDate.setMonth(testDate.getMonth() - 1); -// lastVisitedDate = testDate; -/* -- TEST -- */ +/** + * @param {string} latestUrl + * @param {string} fullUrl + * @param {boolean} autoLoad + */ +function renderLatestChangelog(latestUrl, fullUrl, autoLoad) { + const observer = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.dispatchEvent(new CustomEvent("click", { target: entry.target })); + observer.unobserve(entry.target); + } + }) + }); + + changelogService.loadTopics(latestUrl).then(topics => { + changelogList.render(topics, lastVisitedDate); + if (autoLoad) observer.observe(changelogLoadMoreButton); + }); -changelogLoadMoreButton.remove(); -changelogService.loadTopics("/changelog.json").then(topics => { - changelogList.render(topics, lastVisitedDate); -});}); + changelogLoadMoreButton.addEventListener("click", (event) => { + event.preventDefault(); + changelogLoadMoreButton.innerHTML = "Loading..."; + changelogLoadMoreButton.disabled = true; + renderFullChangelog(fullUrl); + }); +} + +if (queryLoadMore) { + renderLatestChangelog("/changelog_latest.json", "/changelog.json", queryLoadMore === "auto"); +} else { + renderFullChangelog("/changelog.json"); +} diff --git a/src/js/changelog/ChangelogList.js b/src/js/changelog/ChangelogList.js index d54e783..e782229 100644 --- a/src/js/changelog/ChangelogList.js +++ b/src/js/changelog/ChangelogList.js @@ -6,9 +6,6 @@ class ChangelogList /** @type {HTMLUListElement} */ this.list = list; - /** @type {HTMLLIElement[]} */ - this.listItems = []; - /** @type {HTMLLIElement} */ this.unreadListItemTemplate = this.list.querySelector("#changelog-unread-template"); this.unreadListItemTemplate.id = ""; @@ -67,20 +64,16 @@ class ChangelogList this.list.innerHTML = ""; let timestamp = null; for (let topic of topics) { - if (!this.listItems[topic.id]) { - - if (timestamp != topic.createdAt.toLocaleDateString()) { - timestamp = topic.createdAt.toLocaleDateString(); - const timestampListItem = this.timestampListItemTemplate.cloneNode(true); - timestampListItem.innerHTML = timestamp; - this.list.append(timestampListItem); - } - - const isUnread = topic.createdAt.getTime() > lastVisitedDate.getTime(); - const listItem = this.renderListItem(topic, isUnread); - this.listItems[topic.id] = listItem; - this.list.append(listItem); + if (timestamp != topic.createdAt.toLocaleDateString()) { + timestamp = topic.createdAt.toLocaleDateString(); + const timestampListItem = this.timestampListItemTemplate.cloneNode(true); + timestampListItem.innerHTML = timestamp; + this.list.append(timestampListItem); } + + const isUnread = topic.createdAt.getTime() > lastVisitedDate.getTime(); + const listItem = this.renderListItem(topic, isUnread); + this.list.append(listItem); } } }