Add version history

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}`);
-}

js/components/AppPermissionItem.js

@@ -6,10 +6,7 @@
 //
 
 export const AppPermissionItem = (name, icon, details) => `
-    <a class="permission-item"
-        onclick="alert('${details?.replace(/(['"])/g, "\\$1") ?? "altsource-viewer does not have detailed information about this entitlement."}');"
-    >
-        <p><i class="bi-${icon}"></i></p>
-        <p class="title">${name}</p>
-    </a>
-`;
+<a class="permission-item" onclick="alert('${details?.replace(/(['"])/g, "\\$1") ?? "altsource-viewer does not have detailed information about this entitlement."}');">
+    <p><i class="bi-${icon}"></i></p>
+    <p class="title">${name}</p>
+</a>`;

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 => `
+<a id="more" onclick="revealTruncatedText(this);">
+    <button style="color: ${tintColor};">more</button>
+</a>`;
+
+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)
+};

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) => `
+<div class="version">
+    <div class="version-header">
+        <p class="version-number">${number}</p>
+        <p class="version-date">${date}</p>
+    </div>
+    <div class="version-options">
+        <a class="version-install" href="altstore://install?url=${url}">Install with AltStore</a>
+        <a class="version-download" href="${url}">Download IPA</a>
+    </div>
+    <p class="version-description" id="description${i}">${description}</p>
+</div>`;

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() {

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));
+    });
+});