Update directory structure

common/components/AltStoreBanner.js

@@ -0,0 +1,25 @@
+//
+//  AltStoreBanner.js
+//  altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
+//
+//  Copyright (c) 2023 Foxster.
+//  MIT License.
+//
+
+import { sourceURL } from "../modules/constants.js";
+
+export const AltStoreBanner = (sourceName) => `
+<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 ${sourceName ? "\"" + sourceName + "\"" : "this source"} to AltStore to receive app updates
+            </p>
+        </div>
+        <a href="altstore://source?url=${sourceURL}">
+            <button>Add</button>
+        </a>
+    </div>
+</div>`;

common/components/AppHeader.js

@@ -0,0 +1,28 @@
+//
+//  AppHeader.js
+//  altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
+//
+//  Copyright (c) 2023 Foxster.
+//  MIT License.
+//
+
+import { sourceURL } from "../modules/constants.js";
+
+export const AppHeader = (app, x = ".") => app ? `
+<div class="item">
+    <div class="app-header">
+        <div class="content">
+            <img id="app-icon" 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="${x}/app/?source=${sourceURL}&id=${app.bundleIdentifier}">
+                    <button class="uibutton" style="background-color: #${app.tintColor.replaceAll("#", "")};">View</button>
+                </a>
+            </div>
+        </div>
+        <div class="background" style="background-color: #${app.tintColor.replaceAll("#", "")};"></div>
+    </div>
+</div>` : undefined;

common/components/AppPermissionItem.js

@@ -0,0 +1,13 @@
+// 
+//  AppPermissionItem.js
+//  altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
+//
+//  Copyright (c) 2023 Foxster.
+//  MIT License.
+//
+
+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>`;

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

common/components/NavigationBar.js

@@ -0,0 +1,22 @@
+//
+//  NavigationBar.js
+//  altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
+//
+//  Copyright (c) 2023 Foxster.
+//  MIT License.
+//
+
+export const NavigationBar = (title) => `
+<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>`;

common/components/NewsItem.js

@@ -0,0 +1,25 @@
+//
+//  NewsItem.js
+//  altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
+//
+//  Copyright (c) 2023 Foxster.
+//  MIT License.
+//
+
+import { AppHeader } from "./AppHeader.js";
+
+export const NewsItem = (news, minimal = false) => `
+<div class="news-item-wrapper"> ${news.url ?
+    "<a href='" + news.url + "'>" : ""}
+    <div class="item" style="background-color: #${news.tintColor.replaceAll("#", "")};">
+        <div class="text">
+            <h3>${news.title}</h3>
+            <p>${news.caption}</p>
+        </div>${news.imageURL && !minimal ?
+    "<div class='image-wrapper'>" +
+    "<img src='" + news.imageURL + "'>" +
+    "</div>" : ""} 
+    </div> ${news.url ?
+    "</a>" : ""} ${news.appID && !minimal ?
+        AppHeader(getAppWithBundleId(news.appID), "..") ?? "" : ""}
+</div>`;

common/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>`;