Initial commit

js/app.js

@@ -0,0 +1,216 @@
+const bundleId = urlSearchParams.get('id');
+if (!urlSearchParams.has('id') || !bundleId) nope();
+
+// Hide/show navigation bar title & install button
+let hidden = false;
+window.onscroll = function (e) {
+	const appName = document.querySelector(".app-header .text>.title");
+	const title = document.getElementById("title");
+	const button = document.querySelector("#nav-bar .install");
+
+	if (hidden && appName.getBoundingClientRect().y >= 72) { // App name not visible
+		hidden = false;
+		title.classList.add("hidden");
+		button.classList.add("hidden");
+		button.disaled = true;
+	} else if (!hidden && appName.getBoundingClientRect().y < 72) {
+		hidden = true;
+		title.classList.remove("hidden");
+		button.classList.remove("hidden");
+		button.disaled = false;
+	}
+}
+
+fetch(sourceURL)
+	.then(response => response.json())
+	.then(json => {
+		const apps = json.apps.filter(app => app.bundleIdentifier === bundleId);
+		const app = apps[0];
+		if (!app) {
+			alert(`Unable to find app matching bundle identifier "${bundleId}".\nYou will now be redirected to the home page.`);
+			nope();
+		}
+
+		document.title = `${app.name} - ${json.name}`;
+
+		const tintColor = `#${app.tintColor}`;
+
+		if (tintColor)
+			document.querySelector(':root').style.setProperty("--app-tint-color", `${tintColor}`);
+
+		// Tint back button
+		const backButton = document.getElementById("back");
+		backButton.style.color = tintColor;
+
+		const installButtons = document.querySelectorAll("a.install");
+		installButtons.forEach(button => {
+			button.href = `altstore://install?url=${app.downloadURL}`;
+		});
+
+		const downloadButton = document.getElementById("download");
+		downloadButton.href = app.downloadURL;
+
+		//
+		// Navigation bar
+		//
+		const navBar = document.getElementById("nav-bar");
+		const navBarIcon = navBar.querySelector("#title>img");
+		const navBarTitle = navBar.querySelector("#title>p");
+		const navBarInstallButton = navBar.querySelector(".uibutton");
+
+		navBarTitle.textContent = app.name;
+		navBarIcon.src = app.iconURL;
+		navBarInstallButton.style.backgroundColor = `${tintColor}`;
+
+		//
+		// App header
+		//
+		const appHeader = document.querySelector("#main .app-header");
+		const appHeaderIcon = appHeader.querySelector("img");
+		const appHeaderTitle = appHeader.querySelector(".title");
+		const appHeaderSubtitle = appHeader.querySelector(".subtitle");
+		const appHeaderInstallButton = appHeader.querySelector(".uibutton");
+		const appHeaderBackground = appHeader.querySelector(".background");
+
+		appHeaderIcon.src = app.iconURL;
+		appHeaderTitle.textContent = app.name;
+		appHeaderSubtitle.textContent = app.developerName;
+		appHeaderInstallButton.style.backgroundColor = tintColor;
+		appHeaderBackground.style.backgroundColor = tintColor;
+
+		// 
+		// Preview
+		// 
+		const preview = document.getElementById("preview");
+		const previewSubtitle = preview.querySelector("#subtitle");
+		const previewScreenshots = preview.querySelector("#screenshots");
+		const previewDescription = preview.querySelector("#description");
+
+		previewSubtitle.textContent = app.subtitle;
+		app.screenshotURLs.forEach(url => {
+			previewScreenshots.insertAdjacentHTML("beforeend", `<img src="${url}" alt="">`);
+		});
+
+		let localizedDescription = app.localizedDescription;
+
+		const perviewDescriptionURLs = [...new Set(localizedDescription.match(urlRegex))]; // Creating set from array to remove duplicates
+
+		perviewDescriptionURLs.forEach(url => {
+			localizedDescription = localizedDescription.replaceAll(url, `<a href="${url}">${url}</a>`)
+		});
+
+
+		previewDescription.innerHTML = localizedDescription.replaceAll("\n", "<br>");
+
+		const more = `
+		<a id="more" onclick="revealTruncatedText(this);">
+			<button style="color: ${tintColor};">more</button>
+		</a>`;
+
+		if (previewDescription.scrollHeight > previewDescription.clientHeight)
+			previewDescription.insertAdjacentHTML("beforeend", more);
+
+		// 
+		// Version info
+		// 
+		const versionDate = document.getElementById("version-date");
+		const version = document.getElementById("version");
+		const versionSize = document.getElementById("version-size");
+		const versionDescription = document.getElementById("version-description");
+
+		// Version date
+		const versionDateObject = new Date(app.versionDate),
+			month = versionDateObject.toUTCString().split(" ")[2],
+			date = versionDateObject.getDate(),
+			dateString = `${month} ${date}, ${versionDateObject.getFullYear()}`;
+		const today = new Date();
+		const msPerDay = 60 * 60 * 24 * 1000;
+		const msDifference = today.valueOf() - versionDateObject.valueOf();
+		versionDate.textContent = dateString;
+		if (msDifference <= msPerDay) // Today
+			versionDate.textContent = "Today";
+		else if (msDifference <= msPerDay * 2) // Yesterday
+			versionDate.textContent = "Yesterday";
+
+		// Version number
+		version.textContent = `Version ${app.version}`;
+
+		// Version size
+		const units = ["B", "KB", "MB", "GB"];
+		var appSize = app.size, c = 0;
+		while (appSize > 1024) {
+			appSize = parseFloat(appSize/1024).toFixed(1);
+			c++;
+		}
+		versionSize.textContent = `${appSize} ${units[c]}`;
+
+		// Version description
+		var appVersionDescription = app.versionDescription;
+		const urls = [...new Set(appVersionDescription.match(urlRegex))]; // Creating set from array to remove duplicates
+
+		urls.forEach(url =>
+			appVersionDescription = appVersionDescription.replaceAll(url, `<a href="${url}">${url}</a>`)
+		);
+
+		versionDescription.innerHTML = appVersionDescription.replaceAll("\n", "<br>");
+		if (versionDescription.scrollHeight > versionDescription.clientHeight)
+			versionDescription.insertAdjacentHTML("beforeend", more);
+
+		// 
+		// Permissions
+		// 
+		const permissions = document.getElementById("permissions");
+
+		if (app.permissions)
+			permissions.querySelector(".permission").remove();
+
+		app.permissions?.forEach(permission => {
+			let permissionType = "Unknown", icon = "gear-wide-connected";
+			switch (permission.type) {
+				case "background-audio":
+					permissionType = "Background Audio";
+					// icon = "audio";
+					icon = "volume-up-fill";
+					break;
+				case "background-fetch":
+					permissionType = "Background Fetch";
+					// icon = "fetch";
+					icon = "arrow-repeat"
+					break;
+				case "photos":
+					permissionType = "Photos"
+					// icon = "photos";
+					icon = "image-fill";
+					break;
+				default:
+					break;
+			}
+
+			const html = `
+			<div class="permission">
+				<i class="bi-${icon}" style="color: ${tintColor};"></i>
+				<div class="text">
+					<p class="title">${permissionType}</p>
+					<p class="description">${permission.usageDescription ?? "No description provided."}</p>
+				</div>
+			</div>`;
+
+			permissions.insertAdjacentHTML("beforeend", html);
+		});
+
+		waitForAllImagesToLoad();
+	});
+
+function revealTruncatedText(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)
+}
+
+function nope() {
+	window.location.replace("index.html");
+}

js/apps.js

@@ -0,0 +1,37 @@
+addNavigationBar("All Apps");
+
+fetch(sourceURL)
+	.then(response => response.json())
+	.then(json => {
+		if (json.tintColor) setTintColor(json.tintColor)
+
+		document.title = `Apps - ${json.name}`;
+
+		json.apps.sort((a, b) => (new Date(b.versionDate)).valueOf() - (new Date(a.versionDate)).valueOf());
+		json.apps.forEach(app => {
+			if (app.beta) return; // Ignore beta apps
+
+			const urls = app.screenshotURLs;
+
+			let html = `
+			<div class="app-container">`;
+			html +=
+				appHeaderHTML(app);
+			html += `
+				<p style="text-align: center; font-size: 0.9em;">${app.subtitle ?? ""}</p>`;
+			if (urls) {
+				html += `
+				<div class="screenshots">`;
+				for (let i = 0; i < urls.length, i < 2; i++) html += `
+					<img src="${urls[i]}" class="screenshot">`;
+				html += `
+				</div>`;
+			}
+			html += `
+			</div>`;
+
+			document.getElementById("apps").insertAdjacentHTML("beforeend", html);
+		});
+
+		waitForAllImagesToLoad();
+	});

js/home.js

@@ -0,0 +1,72 @@
+fetch(sourceURL)
+	.then(response => response.json())
+	.then(json => {
+		document.querySelector("#news a").href = `news.html?source=${sourceURL}`;
+		document.querySelector("#apps a").href = `apps.html?source=${sourceURL}`;
+
+		if (json.tintColor) setTintColor(json.tintColor)
+
+		document.title = json.name;
+		document.getElementById("title").innerText = json.name;
+
+		// Sort apps in descending order
+		json.apps.sort((a, b) => {
+			// If b < a
+			return (new Date(b.versionDate)).valueOf() - (new Date(a.versionDate)).valueOf();
+		});
+		
+		if (json.news && json.news.length >= 1) {
+			// Sort news in decending order (latest first)
+			json.news.sort((a, b) => (new Date(b.date)).valueOf() - (new Date(a.date)).valueOf());
+		
+			// News
+			if (json.news.length == 1) {
+				document.getElementById("news-items").insertAdjacentHTML("beforeend", newsItemHTML(json.news[0], json.apps, true));
+				document.getElementById("news-items").classList.add("one");
+			} else if (json.news.length > 1) {
+				for (let i = 0; i < 5 && i < json.news.length; i++) {
+					document.getElementById("news-items").insertAdjacentHTML("beforeend", newsItemHTML(json.news[i], json.apps, true));
+				}
+			} 
+		} else {
+			document.getElementById("news").remove();
+		}
+
+		// Apps
+		let count = 1;
+		json.apps.forEach(app => {
+			// Max: 3 featured apps if not specified
+			if (count > 3) return; 
+
+			// Ignore beta apps
+			if (app.beta) return;
+
+			// If there are featured apps, ignore non-featured apps
+			if (json.featuredApps && !json.featuredApps.includes(app.bundleIdentifier)) return;
+
+			document.getElementById("apps").insertAdjacentHTML("beforeend", appHeaderHTML(app));
+
+			count++;
+		});
+
+		var description = json.description;
+
+		if (description) {
+			const urls = [...new Set(description.match(urlRegex))]; // Creating set from array to remove duplicates
+
+			urls.forEach(url =>
+				description = description.replaceAll(url, `<a href="${url}">${url}</a>`)
+			);
+
+			document.getElementById("about").insertAdjacentHTML("beforeend", `
+				<div class="item">
+					<p>${description.replaceAll("\n", "<br>")}</p>
+				</div>
+			`);
+		} else {
+			document.getElementById("about").remove();
+		}
+
+
+		waitForAllImagesToLoad();
+	});

js/index.js

@@ -0,0 +1,16 @@
+const textField = document.querySelector("input");
+
+textField.addEventListener("keypress", function (event) {
+	// If the user presses the "Enter" key on the keyboard
+	if (event.key === "Enter") {
+		event.preventDefault();
+
+		const url = textField.value;
+		const urlRegex = /(https?:\/\/[^ ]*)/g;
+
+		if (!url.match(urlRegex)) 
+			alert("Invalid URL.");
+		else 
+			window.location.replace(`home.html?source=${url}`);
+	}
+});

js/main.js

@@ -0,0 +1,132 @@
+const urlSearchParams = new URLSearchParams(window.location.search);
+const sourceURL = urlSearchParams.get('source');
+
+// If no source
+if (!urlSearchParams.has('source') || !sourceURL) {
+	alert(`No source provided.`);
+	window.location.replace("index.html");
+}
+
+// https://stackoverflow.com/a/31760088
+const urlRegex = /(https?:\/\/[^ ]*)/g; // "g": global flag; without this, match() returns only the first matching result
+
+// If source is not a URL
+if (!sourceURL.match(urlRegex)) {
+	alert("Invalid URL.");
+	window.location.replace("index.html");
+}
+
+// Back button
+document.getElementById("back")?.addEventListener("click", () => history.back(1));
+
+// Add to AltStore banner
+document.getElementById("top")?.insertAdjacentHTML("afterbegin", `
+	<div class="uibanner">
+		<img src="https://user-images.githubusercontent.com/705880/65270980-1eb96f80-dad1-11e9-9367-78ccd25ceb02.png" alt="altstore-icon" class="icon">
+		<div class="content">
+			<div class="text-container">
+				<p class="title-text">AltStore <span class="small beta badge"></span></p>
+				<p class="detail-text">
+					Add this source to AltStore to receive app updates (requires AltStore beta)
+				</p>
+			</div>
+			<a href="altstore://source?url=${sourceURL}">
+				<button>Add</button>
+			</a>
+		</div>
+	</div>`);
+
+function waitForAllImagesToLoad() {
+	const allImages = document.querySelectorAll("img");
+	var count = 0;
+
+	allImages.forEach(image => {
+		// New img element that won't be rendered to the DOM
+		var newImage = document.createElement("img");
+		// Attach load listener
+		newImage.addEventListener("load", imageLoaded);
+		// Set src
+		newImage.src = image.src;
+	})
+
+	function imageLoaded() {
+		if (++count == allImages.length) {
+			document.querySelector("body").classList.remove("loading");
+			document.getElementById("loading").remove();
+		}
+	}
+}
+
+function setTintColor(color) {
+	document.querySelector(':root').style.setProperty("--accent-color", `#${color}`);
+}
+
+function addNavigationBar(title) {
+	document.getElementById("top").insertAdjacentHTML("beforeend", `
+	<div id="nav-bar">
+		<button id="back" type="button">
+			<i class="bi bi-chevron-left"></i>
+			Back
+		</button>
+		<div id="title">
+			<p>${title ?? ""}</p>
+		</div>
+		<button id="back" class="hidden">
+			<i class="bi bi-chevron-left"></i>
+			Back
+		</button>
+	</div>`);
+	document.getElementById("back")?.addEventListener("click", () => history.back(1));
+}
+
+function newsItemHTML(news, apps, minimal) {
+	let html = `
+	<div class="news-item-wrapper">`;
+
+	if (news.url) html += `
+		<a href="${news.url}">`;
+	html += `
+		<div class="item" style="background-color: #${news.tintColor};">
+			<div class="text">
+				<h3>${news.title}</h3>
+				<p>${news.caption}</p>
+			</div>`;
+	if (news.imageURL && !minimal) html += `
+			<div class="image-wrapper">
+				<img src="${news.imageURL}">
+			</div>`;
+	html += `
+		</div>`;
+	if (news.url) html +=
+		"</a>";
+
+	if (news.appID && !minimal) {
+		const app = apps.find(app => app.bundleIdentifier == news.appID);
+		if (app) html += appHeaderHTML(app);
+	}
+
+	html += "</div>";
+
+	return html;
+}
+
+function appHeaderHTML(app) {
+	return `
+	<div class="item">
+		<div class="app-header">
+			<div class="content">
+				<img src="${app.iconURL}" alt="">
+				<div class="right">
+					<div class="text">
+						<p class="title">${app.name}</p>
+						<p class="subtitle">${app.developerName}</p>
+					</div>
+					<a href="app.html?source=${sourceURL}&id=${app.bundleIdentifier}">
+					<button class="uibutton" style="background-color: #${app.tintColor};">View</button>
+					</a>
+				</div>
+			</div>
+			<div class="background" style="background-color: #${app.tintColor};"></div>
+		</div>
+	</div>`;
+}

js/news.js

@@ -0,0 +1,16 @@
+addNavigationBar("All News");
+
+fetch(sourceURL)
+	.then(response => response.json())
+	.then(json => {
+		if (json.tintColor) setTintColor(json.tintColor)
+
+		document.title = `News - ${json.name}`;
+
+		json.news.sort((a, b) => (new Date(b.date)).valueOf() - (new Date(a.date)).valueOf());
+		json.news.forEach(news =>
+			document.getElementById("news").insertAdjacentHTML("beforeend", newsItemHTML(news, json.apps))
+		);
+
+		waitForAllImagesToLoad();
+	});