mirror of
https://github.com/driftywinds/driftywinds.github.io.git
synced 2025-12-19 11:03:32 +00:00
Refactor
This commit is contained in:
15
app.html
15
app.html
@@ -1,11 +1,18 @@
|
||||
<!--
|
||||
app.html
|
||||
altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
|
||||
|
||||
Copyright (c) 2023 Foxster.
|
||||
MIT License.
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/shared.css">
|
||||
<link rel="stylesheet" href="css/uibanner.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
</head>
|
||||
<body class="loading">
|
||||
@@ -113,8 +120,6 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/shared.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/app.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
15
apps.html
15
apps.html
@@ -1,11 +1,18 @@
|
||||
<!--
|
||||
apps.html
|
||||
altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
|
||||
|
||||
Copyright (c) 2023 Foxster.
|
||||
MIT License.
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/shared.css">
|
||||
<link rel="stylesheet" href="css/uibanner.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/apps.css">
|
||||
</head>
|
||||
<body class="loading">
|
||||
@@ -18,8 +25,6 @@
|
||||
<div id="main">
|
||||
<div id="apps"></div>
|
||||
</div>
|
||||
<script src="js/shared.js"></script>
|
||||
<script src="js/apps.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/apps.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,3 +1,11 @@
|
||||
/*
|
||||
app.css
|
||||
altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
|
||||
|
||||
Copyright (c) 2023 Foxster.
|
||||
MIT License.
|
||||
*/
|
||||
|
||||
a {
|
||||
color: var(--app-tint-color)
|
||||
}
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
/*
|
||||
apps.css
|
||||
altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
|
||||
|
||||
Copyright (c) 2023 Foxster.
|
||||
MIT License.
|
||||
*/
|
||||
|
||||
#main {
|
||||
padding-top: 7rem;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
/*
|
||||
news.css
|
||||
altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
|
||||
|
||||
Copyright (c) 2023 Foxster.
|
||||
MIT License.
|
||||
*/
|
||||
|
||||
#main {
|
||||
padding-top: 8rem;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
/*
|
||||
search.css
|
||||
altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
|
||||
|
||||
Copyright (c) 2023 Foxster.
|
||||
MIT License.
|
||||
*/
|
||||
|
||||
#main {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
/*
|
||||
style.css
|
||||
altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
|
||||
|
||||
Copyright (c) 2023 Foxster.
|
||||
MIT License.
|
||||
*/
|
||||
|
||||
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css");
|
||||
|
||||
:root {
|
||||
@@ -422,3 +430,75 @@ a>button {
|
||||
.small.badge {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
/* uibanner */
|
||||
|
||||
.uibanner .icon {
|
||||
max-width: 30px;
|
||||
border-radius: 7px;
|
||||
border: 0.75px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.uibanner {
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 1px;
|
||||
border-bottom: 0.1px solid var(--color-separator);
|
||||
}
|
||||
|
||||
.uibanner {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.uibanner>.icon {
|
||||
margin-left: 14px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.uibanner>.content {
|
||||
min-height: 28px;
|
||||
width: 100%;
|
||||
margin-left: 8px;
|
||||
padding: 8px 16px 8px 0px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uibanner>.content>.text-container>.title-text {
|
||||
padding-bottom: 0 !important;
|
||||
font-weight: 600;
|
||||
font-size: 12.95px !important;
|
||||
}
|
||||
|
||||
.uibanner>.content>.text-container>.detail-text {
|
||||
padding-top: 0 !important;
|
||||
font-size: 11px !important;
|
||||
font-weight: 400;
|
||||
line-height: 12px !important;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.uibanner>.content button {
|
||||
min-width: 68px !important;
|
||||
padding: 5px 13px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
color: white;
|
||||
background-color: rgb(0, 122, 254);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.uibanner>.content a {
|
||||
margin-left: 6px;
|
||||
text-decoration: none;
|
||||
color: unset;
|
||||
font-weight: 600;
|
||||
|
||||
color: white;
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
.uibanner .icon {
|
||||
max-width: 30px;
|
||||
border-radius: 7px;
|
||||
border: 0.75px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.uibanner {
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 1px;
|
||||
border-bottom: 0.1px solid var(--color-separator);
|
||||
}
|
||||
|
||||
.uibanner {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.uibanner>.icon {
|
||||
margin-left: 14px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.uibanner>.content {
|
||||
min-height: 28px;
|
||||
width: 100%;
|
||||
margin-left: 8px;
|
||||
padding: 8px 16px 8px 0px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uibanner>.content>.text-container>.title-text {
|
||||
padding-bottom: 0 !important;
|
||||
font-weight: 600;
|
||||
font-size: 12.95px !important;
|
||||
}
|
||||
|
||||
.uibanner>.content>.text-container>.detail-text {
|
||||
padding-top: 0 !important;
|
||||
font-size: 11px !important;
|
||||
font-weight: 400;
|
||||
line-height: 12px !important;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.uibanner>.content button {
|
||||
min-width: 68px !important;
|
||||
padding: 5px 13px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
color: white;
|
||||
background-color: rgb(0, 122, 254);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.uibanner>.content a {
|
||||
margin-left: 6px;
|
||||
text-decoration: none;
|
||||
color: unset;
|
||||
font-weight: 600;
|
||||
|
||||
color: white;
|
||||
}
|
||||
15
index.html
15
index.html
@@ -1,11 +1,18 @@
|
||||
<!--
|
||||
index.html
|
||||
altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
|
||||
|
||||
Copyright (c) 2023 Foxster.
|
||||
MIT License.
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/shared.css">
|
||||
<link rel="stylesheet" href="css/uibanner.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body class="loading">
|
||||
<div id="loading">
|
||||
@@ -39,8 +46,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/shared.js"></script>
|
||||
<script src="js/index.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/index.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
20
js/app.js
20
js/app.js
@@ -1,3 +1,14 @@
|
||||
//
|
||||
// app.js
|
||||
// altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
|
||||
//
|
||||
// Copyright (c) 2023 Foxster.
|
||||
// MIT License.
|
||||
//
|
||||
|
||||
import { urlSearchParams, formatString, sourceURL } from "./utilities.js";
|
||||
import { main } from "./main.js";
|
||||
|
||||
if (!urlSearchParams.has('id')) exit();
|
||||
const bundleId = urlSearchParams.get('id');
|
||||
|
||||
@@ -23,7 +34,7 @@ const bundleId = urlSearchParams.get('id');
|
||||
}
|
||||
})();
|
||||
|
||||
function main(json) {
|
||||
main((json) => {
|
||||
const app = getAppWithBundleId(bundleId);
|
||||
if (!app) exit();
|
||||
|
||||
@@ -74,7 +85,7 @@ function main(json) {
|
||||
<button style="color: ${tintColor};">more</button>
|
||||
</a>`;
|
||||
|
||||
this.revealTruncatedText = moreButton => {
|
||||
window.revealTruncatedText = moreButton => {
|
||||
const textId = moreButton.parentNode.id;
|
||||
const text = document.getElementById(textId);
|
||||
text.style.display = "block";
|
||||
@@ -125,7 +136,8 @@ function main(json) {
|
||||
// Version size
|
||||
const units = ["B", "KB", "MB", "GB"];
|
||||
var appSize = app.size, i = 0;
|
||||
while (appSize > 1024) { i++;
|
||||
while (appSize > 1024) {
|
||||
i++;
|
||||
appSize = parseFloat(appSize / 1024).toFixed(1);
|
||||
}
|
||||
versionSizeElement.textContent = `${appSize} ${units[i]}`;
|
||||
@@ -235,7 +247,7 @@ function main(json) {
|
||||
sourceTitle.innerText = json.name;
|
||||
sourceContainer.href = `index.html?source=${sourceURL}`;
|
||||
sourceSubtitle.innerText = json.description ?? "Tap to get started";
|
||||
}
|
||||
});
|
||||
|
||||
function exit() {
|
||||
window.location.replace(`index.html?source=${sourceURL}`);
|
||||
|
||||
18
js/apps.js
18
js/apps.js
@@ -1,6 +1,18 @@
|
||||
//
|
||||
// apps.js
|
||||
// altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
|
||||
//
|
||||
// Copyright (c) 2023 Foxster.
|
||||
// MIT License.
|
||||
//
|
||||
|
||||
import { insertNavigationBar } from "./utilities.js";
|
||||
import { AppHeader } from "./components/AppHeader.js";
|
||||
import { main } from "./main.js";
|
||||
|
||||
insertNavigationBar("All Apps");
|
||||
|
||||
function main(json) {
|
||||
main((json) => {
|
||||
// Set tab title
|
||||
document.title = `Apps - ${json.name}`;
|
||||
|
||||
@@ -13,7 +25,7 @@ function main(json) {
|
||||
|
||||
let html = `
|
||||
<div class="app-container">
|
||||
${appHeaderHTML(app) }
|
||||
${AppHeader(app)}
|
||||
<p style="text-align: center; font-size: 0.9em;">${app.subtitle ?? ""}</p>`;
|
||||
if (app.screenshotURLs) {
|
||||
html += `
|
||||
@@ -28,4 +40,4 @@ function main(json) {
|
||||
|
||||
document.getElementById("apps").insertAdjacentHTML("beforeend", html);
|
||||
});
|
||||
}
|
||||
});
|
||||
25
js/components/AltStoreBanner.js
Normal file
25
js/components/AltStoreBanner.js
Normal file
@@ -0,0 +1,25 @@
|
||||
//
|
||||
// AltStoreBanner.js
|
||||
// altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
|
||||
//
|
||||
// Copyright (c) 2023 Foxster.
|
||||
// MIT License.
|
||||
//
|
||||
|
||||
import { sourceURL } from "../utilities.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>`;
|
||||
28
js/components/AppHeader.js
Normal file
28
js/components/AppHeader.js
Normal file
@@ -0,0 +1,28 @@
|
||||
//
|
||||
// AppHeader.js
|
||||
// altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
|
||||
//
|
||||
// Copyright (c) 2023 Foxster.
|
||||
// MIT License.
|
||||
//
|
||||
|
||||
import { sourceURL } from "../utilities.js";
|
||||
|
||||
export const AppHeader = app => 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="app.html?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;
|
||||
22
js/components/NavigationBar.js
Normal file
22
js/components/NavigationBar.js
Normal file
@@ -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>`;
|
||||
25
js/components/NewsItem.js
Normal file
25
js/components/NewsItem.js
Normal file
@@ -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>`;
|
||||
23
js/index.js
23
js/index.js
@@ -1,4 +1,17 @@
|
||||
function main(json) {
|
||||
//
|
||||
// index.js
|
||||
// altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
|
||||
//
|
||||
// Copyright (c) 2023 Foxster.
|
||||
// MIT License.
|
||||
//
|
||||
|
||||
import { sourceURL, formatString } from "./utilities.js";
|
||||
import { NewsItem } from "./components/NewsItem.js";
|
||||
import { AppHeader } from "./components/AppHeader.js";
|
||||
import { main } from "./main.js";
|
||||
|
||||
main((json) => {
|
||||
// Set "View All News" link
|
||||
document.querySelector("#news a").href = `news.html?source=${sourceURL}`;
|
||||
// Set "View All Apps" link
|
||||
@@ -17,10 +30,10 @@ function main(json) {
|
||||
(new Date(b.date)).valueOf() - (new Date(a.date)).valueOf());
|
||||
|
||||
if (json.news.length == 1) {
|
||||
document.getElementById("news-items").insertAdjacentHTML("beforeend", newsItemHTML(json.news[0], true));
|
||||
document.getElementById("news-items").insertAdjacentHTML("beforeend", NewsItem(json.news[0], true));
|
||||
document.getElementById("news-items").classList.add("one");
|
||||
} else for (let i = 0; i < 5 && i < json.news.length; i++)
|
||||
document.getElementById("news-items").insertAdjacentHTML("beforeend", newsItemHTML(json.news[i], true));
|
||||
document.getElementById("news-items").insertAdjacentHTML("beforeend", NewsItem(json.news[i], true));
|
||||
} else document.getElementById("news").remove();
|
||||
|
||||
// Sort apps in descending order of version date
|
||||
@@ -39,7 +52,7 @@ function main(json) {
|
||||
// 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));
|
||||
document.getElementById("apps").insertAdjacentHTML("beforeend", AppHeader(app));
|
||||
|
||||
count++;
|
||||
});
|
||||
@@ -53,4 +66,4 @@ function main(json) {
|
||||
</div>
|
||||
`);
|
||||
else document.getElementById("about").remove();
|
||||
}
|
||||
});
|
||||
27
js/main.js
27
js/main.js
@@ -1,4 +1,15 @@
|
||||
(function () {
|
||||
//
|
||||
// main.js
|
||||
// altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
|
||||
//
|
||||
// Copyright (c) 2023 Foxster.
|
||||
// MIT License.
|
||||
//
|
||||
|
||||
import { urlSearchParams, sourceURL, search, isValidHTTPURL, setTintColor, insertAltStoreBanner, setUpBackButton } from "./utilities.js";
|
||||
|
||||
export function main(callback) {
|
||||
(() => {
|
||||
// If no source
|
||||
if (!urlSearchParams.has('source'))
|
||||
search();
|
||||
@@ -7,6 +18,14 @@
|
||||
alert("Invalid HTTP URL.");
|
||||
search();
|
||||
}
|
||||
|
||||
var apps;
|
||||
window.setApps = array =>
|
||||
apps = array;
|
||||
window.getAppWithBundleId = bundleId =>
|
||||
apps?.find(app => app.bundleIdentifier == bundleId) ?? undefined;
|
||||
|
||||
setUpBackButton();
|
||||
})();
|
||||
|
||||
fetch(sourceURL)
|
||||
@@ -16,10 +35,11 @@ fetch(sourceURL)
|
||||
const tintColor = json.tintColor?.replaceAll("#", "");
|
||||
if (tintColor) setTintColor(tintColor);
|
||||
|
||||
insertAddToAltStoreBanner(json.name);
|
||||
insertAltStoreBanner(json.name);
|
||||
|
||||
setApps(json.apps);
|
||||
main(json);
|
||||
// main(json);
|
||||
callback(json);
|
||||
waitForAllImagesToLoad();
|
||||
})
|
||||
.catch(error => console.error("An error occurred.", error));
|
||||
@@ -52,3 +72,4 @@ function waitForAllImagesToLoad() {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
18
js/news.js
18
js/news.js
@@ -1,6 +1,18 @@
|
||||
//
|
||||
// news.js
|
||||
// altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
|
||||
//
|
||||
// Copyright (c) 2023 Foxster.
|
||||
// MIT License.
|
||||
//
|
||||
|
||||
import { insertNavigationBar } from "./utilities.js";
|
||||
import { NewsItem } from "./components/NewsItem.js";
|
||||
import { main } from "./main.js";
|
||||
|
||||
insertNavigationBar("All News");
|
||||
|
||||
function main(json) {
|
||||
main((json) => {
|
||||
// Set tab title
|
||||
document.title = `News - ${json.name}`;
|
||||
|
||||
@@ -8,5 +20,5 @@ function main(json) {
|
||||
json.news.sort((a, b) => (new Date(b.date)).valueOf() - (new Date(a.date)).valueOf());
|
||||
|
||||
// Create & insert news items
|
||||
json.news.forEach(news => document.getElementById("news").insertAdjacentHTML("beforeend", newsItemHTML(news)));
|
||||
}
|
||||
json.news.forEach(news => document.getElementById("news").insertAdjacentHTML("beforeend", NewsItem(news)));
|
||||
});
|
||||
10
js/search.js
10
js/search.js
@@ -1,3 +1,13 @@
|
||||
//
|
||||
// search.js
|
||||
// altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
|
||||
//
|
||||
// Copyright (c) 2023 Foxster.
|
||||
// MIT License.
|
||||
//
|
||||
|
||||
import { urlSearchParams, sourceURL } from "./utilities.js";
|
||||
|
||||
(function main() {
|
||||
const success = url => window.location.replace(`index.html?source=${url}`);
|
||||
|
||||
|
||||
135
js/shared.js
135
js/shared.js
@@ -1,135 +0,0 @@
|
||||
const urlSearchParams = new URLSearchParams(window.location.search);
|
||||
const sourceURL = urlSearchParams.get('source')?.replaceAll("+", "%2B");
|
||||
// https://stackoverflow.com/a/8943487
|
||||
const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
|
||||
|
||||
(function (global) {
|
||||
var apps;
|
||||
global.setApps = array =>
|
||||
apps = array;
|
||||
global.getAppWithBundleId = bundleId =>
|
||||
apps?.find(app => app.bundleIdentifier == bundleId) ?? undefined;
|
||||
|
||||
setUpBackButton();
|
||||
})(this);
|
||||
|
||||
const newsItemHTML = (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 ?
|
||||
appHeaderHTML(getAppWithBundleId(news.appID)) ?? "" : ""}
|
||||
</div>`;
|
||||
|
||||
const appHeaderHTML = app => 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="app.html?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;
|
||||
|
||||
function insertAddToAltStoreBanner(source) {
|
||||
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 ${source ? "\"" + source + "\"" : "this source"} to AltStore to receive app updates
|
||||
</p>
|
||||
</div>
|
||||
<a href="altstore://source?url=${sourceURL}">
|
||||
<button>Add</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>`);
|
||||
}
|
||||
|
||||
function insertNavigationBar(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>`);
|
||||
setUpBackButton();
|
||||
}
|
||||
|
||||
// https://stackoverflow.com/a/43467144/19227228
|
||||
function isValidHTTPURL(string) {
|
||||
var url;
|
||||
try {
|
||||
url = new URL(string);
|
||||
} catch (error) {
|
||||
console.error("An error occurred.", error);
|
||||
return false;
|
||||
}
|
||||
return url.protocol == "http:" || url.protocol == "https:";
|
||||
}
|
||||
|
||||
function formatString(string) {
|
||||
if (!string) return undefined;
|
||||
|
||||
// URLs
|
||||
const urlArray = string.match(urlRegex);
|
||||
// const urlSet = [...new Set(urlArray)]; // Converting to set to remove duplicates
|
||||
var result = "";
|
||||
urlArray?.forEach(url => {
|
||||
string = string.replace(url, `<a href="${url}">${url}</a>`)
|
||||
// Remove formatted substring so it won't get formatted again (prevents <a> tag within the href attribute another <a> tag)
|
||||
let endIndexOfClosingTag = string.indexOf("</a>") + 4;
|
||||
let formattedSubstring = string.substring(0, endIndexOfClosingTag);
|
||||
result += formattedSubstring;
|
||||
string = string.replace(formattedSubstring, "");
|
||||
});
|
||||
|
||||
result += string;
|
||||
|
||||
// New lines
|
||||
return result.replaceAll("\n", "<br>");
|
||||
}
|
||||
|
||||
function setTintColor(color) {
|
||||
document.querySelector(':root')?.style.setProperty("--accent-color", `#${color}`);
|
||||
}
|
||||
|
||||
function setUpBackButton() {
|
||||
document.getElementById("back")?.addEventListener("click", () => history.back(1));
|
||||
}
|
||||
|
||||
function search() {
|
||||
window.location.replace("search.html");
|
||||
}
|
||||
|
||||
const $ = selector => selector.startsWith("#") && !selector.includes(".") && !selector.includes(" ")
|
||||
? document.getElementById(selector.substring(1))
|
||||
: document.querySelectorAll(selector);
|
||||
74
js/utilities.js
Normal file
74
js/utilities.js
Normal file
@@ -0,0 +1,74 @@
|
||||
//
|
||||
// utilities.js
|
||||
// altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
|
||||
//
|
||||
// Copyright (c) 2023 Foxster.
|
||||
// MIT License.
|
||||
//
|
||||
|
||||
import { AltStoreBanner } from "./components/AltStoreBanner.js";
|
||||
import { NavigationBar } from "./components/NavigationBar.js";
|
||||
|
||||
export const urlSearchParams = new URLSearchParams(window.location.search);
|
||||
export const sourceURL = urlSearchParams.get('source')?.replaceAll("+", "%2B");
|
||||
// https://stackoverflow.com/a/8943487
|
||||
export const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
|
||||
|
||||
export function insertAltStoreBanner(sourceName) {
|
||||
document.getElementById("top")?.insertAdjacentHTML("afterbegin", AltStoreBanner(sourceName));
|
||||
}
|
||||
|
||||
export function insertNavigationBar(title) {
|
||||
document.getElementById("top")?.insertAdjacentHTML("beforeend", NavigationBar(title));
|
||||
setUpBackButton();
|
||||
}
|
||||
|
||||
// https://stackoverflow.com/a/43467144/19227228
|
||||
export function isValidHTTPURL(string) {
|
||||
var url;
|
||||
try {
|
||||
url = new URL(string);
|
||||
} catch (error) {
|
||||
console.error("An error occurred.", error);
|
||||
return false;
|
||||
}
|
||||
return url.protocol == "http:" || url.protocol == "https:";
|
||||
}
|
||||
|
||||
export function formatString(string) {
|
||||
if (!string) return undefined;
|
||||
|
||||
// URLs
|
||||
const urlArray = string.match(urlRegex);
|
||||
// const urlSet = [...new Set(urlArray)]; // Converting to set to remove duplicates
|
||||
var result = "";
|
||||
urlArray?.forEach(url => {
|
||||
string = string.replace(url, `<a href="${url}">${url}</a>`)
|
||||
// Remove formatted substring so it won't get formatted again (prevents <a> tag within the href attribute another <a> tag)
|
||||
let endIndexOfClosingTag = string.indexOf("</a>") + 4;
|
||||
let formattedSubstring = string.substring(0, endIndexOfClosingTag);
|
||||
result += formattedSubstring;
|
||||
string = string.replace(formattedSubstring, "");
|
||||
});
|
||||
|
||||
result += string;
|
||||
|
||||
// New lines
|
||||
return result.replaceAll("\n", "<br>");
|
||||
}
|
||||
|
||||
export function setTintColor(color) {
|
||||
document.querySelector(':root')?.style.setProperty("--accent-color", `#${color}`);
|
||||
}
|
||||
|
||||
export function setUpBackButton() {
|
||||
document.getElementById("back")?.addEventListener("click", () => history.back(1));
|
||||
}
|
||||
|
||||
export function search() {
|
||||
window.location.replace("search.html");
|
||||
}
|
||||
|
||||
const $ = selector => selector.startsWith("#") && !selector.includes(".") && !selector.includes(" ")
|
||||
? document.getElementById(selector.substring(1))
|
||||
: document.querySelectorAll(selector);
|
||||
15
news.html
15
news.html
@@ -1,11 +1,18 @@
|
||||
<!--
|
||||
news.html
|
||||
altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
|
||||
|
||||
Copyright (c) 2023 Foxster.
|
||||
MIT License.
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/shared.css">
|
||||
<link rel="stylesheet" href="css/uibanner.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/news.css">
|
||||
</head>
|
||||
<body class="loading">
|
||||
@@ -18,8 +25,6 @@
|
||||
<div id="main">
|
||||
<div id="news"></div>
|
||||
</div>
|
||||
<script src="js/shared.js"></script>
|
||||
<script src="js/news.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/news.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
13
search.html
13
search.html
@@ -1,10 +1,18 @@
|
||||
<!--
|
||||
search.html
|
||||
altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
|
||||
|
||||
Copyright (c) 2023 Foxster.
|
||||
MIT License.
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/shared.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/search.css">
|
||||
<title>AltSource Viewer</title>
|
||||
</head>
|
||||
@@ -68,7 +76,6 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/shared.js"></script>
|
||||
<script src="js/search.js"></script>
|
||||
<script src="js/search.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user