diff --git a/app.html b/app.html index e2fcc76..32b55db 100644 --- a/app.html +++ b/app.html @@ -80,11 +80,12 @@

What's New

-

Apr 10, 2023

+ + Version History

Version 2.0

-

0 KB

+

Apr 10, 2023

The quick brown fox jumps over the lazy dog. diff --git a/css/app.css b/css/app.css index 464c83c..fac7434 100644 --- a/css/app.css +++ b/css/app.css @@ -126,12 +126,8 @@ a { padding: 0; } -#whats-new .header>p:first-of-type { - opacity: 0.5; -} - #whats-new .header>p { - opacity: 0.35; + opacity: 0.5; } #whats-new #version-date { diff --git a/css/style.css b/css/style.css index b5e886f..12d1ba7 100644 --- a/css/style.css +++ b/css/style.css @@ -220,7 +220,7 @@ body { .header { display: flex; flex-direction: row; - align-items: center; + align-items: baseline; justify-content: space-between; padding: 0 1rem; } diff --git a/css/version-history.css b/css/version-history.css new file mode 100644 index 0000000..6399297 --- /dev/null +++ b/css/version-history.css @@ -0,0 +1,81 @@ +#main { + padding-top: 8rem; +} + +a { + color: var(--app-tint-color); +} + +#versions { + padding: 0 1rem; + display: flex; + flex-direction: column; + /* gap: 1em; */ +} + +.version { + display: flex; + flex-direction: column; + border-bottom: 0.1px solid var(--color-separator); + padding: 1.25em 0; +} + +.version:first-of-type { + padding-top: 0; +} + +@media (prefers-color-scheme: dark) { + .version { + border-color: var(--color-separator-dark) !important; + } +} + +.version-header, .version-options { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-bottom: 0.5em; +} + +.version-options { + color: var(--app-tint-color); +} + +.version-number { + font-weight: 600; +} + +.version-date { + opacity: 0.5; +} + +.version-description { + -webkit-line-clamp: 3; + line-clamp: 3; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + position: relative; + word-wrap: break-word; + line-height: 1.5em; +} + +#more button { + min-width: 0 !important; + margin-left: 2px !important; + padding: 0; + font-size: 15px; + font-weight: 500; + text-transform: none; + border-radius: 4px; + border: none; + background: unset; + color: var(--accent-color); + cursor: pointer; + position: absolute; + bottom: 0; + right: 0; + padding-left: 36px; + background: linear-gradient(to right, transparent, var(--color-bg) 35%); + line-height: 1.5em; +} diff --git a/js/app.js b/js/app.js index d6b9ad7..f591123 100644 --- a/js/app.js +++ b/js/app.js @@ -7,7 +7,7 @@ // import { urlSearchParams, sourceURL, legacyPermissions } from "./constants.js"; -import { formatString, insertSpaceInCamelString, insertSpaceInSnakeString } from "./utilities.js"; +import { formatString, insertSpaceInCamelString, insertSpaceInSnakeString, exit, formatVersionDate } from "./utilities.js"; import { main } from "./main.js"; import { privacy, entitlements } from "./constants.js"; import { AppPermissionItem } from "./components/AppPermissionItem.js"; @@ -129,19 +129,9 @@ main((json) => { const versionNumberElement = document.getElementById("version"); const versionSizeElement = document.getElementById("version-size"); const versionDescriptionElement = document.getElementById("version-description"); - const versionDate = new Date(app.versionDate), - month = versionDate.toUTCString().split(" ")[2], - date = versionDate.getDate(); - const today = new Date(); - const msPerDay = 60 * 60 * 24 * 1000; - const msDifference = today.valueOf() - versionDate.valueOf(); // Version date - versionDateElement.textContent = versionDate.valueOf() ? `${month} ${date}, ${versionDate.getFullYear()}` : app.versionDate.split("T")[0]; - if (msDifference <= msPerDay && today.getDate() == versionDate.getDate()) - versionDateElement.textContent = "Today"; - else if (msDifference <= msPerDay * 2) - versionDateElement.textContent = "Yesterday"; + versionDateElement.textContent = formatVersionDate(app.versionDate); // Version number versionNumberElement.textContent = `Version ${app.version}`; @@ -153,13 +143,16 @@ main((json) => { i++; appSize = parseFloat(appSize / 1024).toFixed(1); } - versionSizeElement.textContent = `${appSize} ${units[i]}`; + // versionSizeElement.textContent = `${appSize} ${units[i]}`; // Version description versionDescriptionElement.innerHTML = formatString(app.versionDescription); if (versionDescriptionElement.scrollHeight > versionDescriptionElement.clientHeight) versionDescriptionElement.insertAdjacentHTML("beforeend", more); + // Version history + document.getElementById("version-history").href = `version-history.html?source=${sourceURL}&id=${app.bundleIdentifier}`; + // // Permissions @@ -223,7 +216,3 @@ main((json) => { sourceContainer.href = `index.html?source=${sourceURL}`; sourceSubtitle.innerText = json.description ?? "Tap to get started"; }); - -function exit() { - window.location.replace(`index.html?source=${sourceURL}`); -} diff --git a/js/components/AppPermissionItem.js b/js/components/AppPermissionItem.js index ce2ceba..5446268 100644 --- a/js/components/AppPermissionItem.js +++ b/js/components/AppPermissionItem.js @@ -6,10 +6,7 @@ // export const AppPermissionItem = (name, icon, details) => ` - -

-

${name}

-
-`; \ No newline at end of file + +

+

${name}

+
`; \ No newline at end of file diff --git a/js/components/MoreButton.js b/js/components/MoreButton.js new file mode 100644 index 0000000..53b8ca2 --- /dev/null +++ b/js/components/MoreButton.js @@ -0,0 +1,23 @@ +// +// MoreButton.js +// altsource-viewer (https://github.com/therealFoxster/altsource-viewer) +// +// Copyright (c) 2023 Foxster. +// MIT License. +// + +export const MoreButton = tintColor => ` + + +`; + +window.revealTruncatedText = moreButton => { + console.log(moreButton); + const textId = moreButton.parentNode.id; + const text = document.getElementById(textId); + text.style.display = "block"; + text.style.overflow = "auto"; + text.style.webkitLineClamp = "none"; + text.style.lineClamp = "none"; + text.removeChild(moreButton) +}; \ No newline at end of file diff --git a/js/components/VersionHistoryItem.js b/js/components/VersionHistoryItem.js new file mode 100644 index 0000000..f340da1 --- /dev/null +++ b/js/components/VersionHistoryItem.js @@ -0,0 +1,20 @@ +// +// VersionHistoryItem.js +// altsource-viewer (https://github.com/therealFoxster/altsource-viewer) +// +// Copyright (c) 2023 Foxster. +// MIT License. +// + +export const VersionHistoryItem = (number, date, description, url, i) => ` +
+
+

${number}

+

${date}

+
+ +

${description}

+
`; \ No newline at end of file diff --git a/js/utilities.js b/js/utilities.js index c4c0458..c929520 100644 --- a/js/utilities.js +++ b/js/utilities.js @@ -10,6 +10,27 @@ import { AltStoreBanner } from "./components/AltStoreBanner.js"; import { NavigationBar } from "./components/NavigationBar.js"; import { urlRegex } from "./constants.js"; +export function formatVersionDate(arg) { + const versionDate = new Date(arg), + month = versionDate.toUTCString().split(" ")[2], + date = versionDate.getDate(); + const today = new Date(); + const msPerDay = 60 * 60 * 24 * 1000; + const msDifference = today.valueOf() - versionDate.valueOf(); + + let dateString = versionDate.valueOf() ? `${month} ${date}, ${versionDate.getFullYear()}` : app.versionDate.split("T")[0]; + if (msDifference <= msPerDay && today.getDate() == versionDate.getDate()) + dateString = "Today"; + else if (msDifference <= msPerDay * 2) + dateString = "Yesterday"; + + return dateString; +} + +export function exit() { + window.location.replace(`index.html?source=${sourceURL}`); +} + export function insertSpaceInSnakeString(string) { return string.split(".").slice(-1)[0].split("-").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" "); } @@ -67,7 +88,7 @@ export function setTintColor(color) { } export function setUpBackButton() { - document.getElementById("back")?.addEventListener("click", () => history.back(1)); + document.getElementById("back")?.addEventListener("click", () => history.back()); } export function search() { diff --git a/js/versionHistory.js b/js/versionHistory.js new file mode 100644 index 0000000..7729f74 --- /dev/null +++ b/js/versionHistory.js @@ -0,0 +1,46 @@ +// +// versionHistory.js +// altsource-viewer (https://github.com/therealFoxster/altsource-viewer) +// +// Copyright (c) 2023 Foxster. +// MIT License. +// + +import { urlSearchParams } from "./constants.js"; +import { insertNavigationBar, exit, formatVersionDate, formatString } from "./utilities.js"; +import { main } from "./main.js"; +import { MoreButton } from "./components/MoreButton.js"; +import { VersionHistoryItem } from "./components/VersionHistoryItem.js"; + +if (!urlSearchParams.has('id')) exit(); +const bundleId = urlSearchParams.get('id'); + +insertNavigationBar("Version History"); + +main((json) => { + const app = getAppWithBundleId(bundleId); + console.log(app.versions); + + // Set tab title + document.title = `Version History - ${app.name}`; + + // Set tint color + const tintColor = `#${app.tintColor?.replaceAll("#", "")}`; + if (tintColor) document.querySelector(':root').style.setProperty("--app-tint-color", `${tintColor}`); + document.getElementById("back").style.color = tintColor; + + const versionsContainer = document.getElementById("versions"); + if (app.versions) { + app.versions.forEach((version, i) => { + versionsContainer.insertAdjacentHTML("beforeend", VersionHistoryItem(version.version, formatVersionDate(version.date), formatString(version.localizedDescription), version.downloadURL, i)) + }); + } else { + versionsContainer.insertAdjacentHTML("beforeend", VersionHistoryItem(app.version, formatVersionDate(app.versionDate), formatString(app.versionDescription), app.downloadURL, 0)) + } + + document.querySelectorAll(".version-description").forEach(element => { + console.log(MoreButton(tintColor)); + if (element.scrollHeight > element.clientHeight) + element.insertAdjacentHTML("beforeend", MoreButton(tintColor)); + }); +}); \ No newline at end of file diff --git a/version-history.html b/version-history.html new file mode 100644 index 0000000..d9ab651 --- /dev/null +++ b/version-history.html @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + +
+ loading +

Loading

+
+ +
+
+
+
+ + + + \ No newline at end of file