mirror of
https://github.com/veeso/termscp.git
synced 2026-09-27 06:21:22 -07:00
new termscp site
This commit is contained in:
veeso
@@ -33,3 +33,99 @@ function languageSupported(lang) {
|
||||
function setSiteLanguage(lang) {
|
||||
setLanguage(lang);
|
||||
}
|
||||
|
||||
const converter = new showdown.Converter({ tables: true });
|
||||
|
||||
/**
|
||||
* @description load page associated to hash
|
||||
* @param {string} hash
|
||||
*/
|
||||
function loadPage(path) {
|
||||
switch (path) {
|
||||
case "/":
|
||||
case "/index.html":
|
||||
loadHtml("home.html");
|
||||
break;
|
||||
case "/get-started.html":
|
||||
loadHtml("get-started.html");
|
||||
break;
|
||||
case "/user-manual.html":
|
||||
loadUserManual();
|
||||
break;
|
||||
case "/updates.html":
|
||||
loadHtml("updates.html");
|
||||
break;
|
||||
case "/changelog.html":
|
||||
loadMarkdown(
|
||||
"https://raw.githubusercontent.com/veeso/termscp/main/CHANGELOG.md"
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function loadHtml(page) {
|
||||
const url = "html/" + page;
|
||||
$("#main").load(url, function () {
|
||||
onPageLoaded();
|
||||
});
|
||||
}
|
||||
|
||||
function loadMenu() {
|
||||
$("#menu").load("html/components/menu.html", function () {
|
||||
onPageLoaded();
|
||||
});
|
||||
}
|
||||
|
||||
function loadFooter() {
|
||||
$("#footer").load("html/components/footer.html", function () {
|
||||
onPageLoaded();
|
||||
});
|
||||
}
|
||||
|
||||
function loadMarkdown(page) {
|
||||
getMarkdown(page, function (md) {
|
||||
const div = jQuery("<div/>", {
|
||||
id: page,
|
||||
class: "container markdown",
|
||||
});
|
||||
div.html(converter.makeHtml(md));
|
||||
$("#main").empty();
|
||||
$("#main").append(div);
|
||||
onPageLoaded();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @description get markdown and pass result to onLoaded
|
||||
* @param {string} url
|
||||
* @param {function} onLoaded
|
||||
*/
|
||||
function getMarkdown(url, onLoaded) {
|
||||
$.ajax({
|
||||
url,
|
||||
type: "GET",
|
||||
dataType: "text",
|
||||
success: onLoaded,
|
||||
});
|
||||
}
|
||||
|
||||
function loadUserManual() {
|
||||
// Load language
|
||||
const lang = getNavigatorLanguage();
|
||||
if (lang === "en") {
|
||||
loadMarkdown(
|
||||
`https://raw.githubusercontent.com/veeso/termscp/main/docs/man.md`
|
||||
);
|
||||
} else {
|
||||
loadMarkdown(
|
||||
`https://raw.githubusercontent.com/veeso/termscp/main/docs/${lang}/man.md`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// startup
|
||||
$(function () {
|
||||
loadPage(window.location.pathname);
|
||||
loadMenu();
|
||||
loadFooter();
|
||||
});
|
||||
|
||||
+71
-123
@@ -1,133 +1,81 @@
|
||||
const hashBlacklist = ["#menu"];
|
||||
const converter = new showdown.Converter({ tables: true });
|
||||
|
||||
/**
|
||||
* @description handle hash change
|
||||
*/
|
||||
function onHashChange() {
|
||||
const hash = location.hash;
|
||||
if (!hashBlacklist.includes(hash) && hash.length > 0) {
|
||||
selectMenuEntry(location.hash);
|
||||
loadPage(hash);
|
||||
} else if (hash.length === 0 || hash === "#") {
|
||||
loadPage("#intro");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description select menu entry
|
||||
* @param {*} hash
|
||||
*/
|
||||
function selectMenuEntry(hash) {
|
||||
// Remove current entry
|
||||
$(".pure-menu-selected").removeClass("pure-menu-selected");
|
||||
$('a[href$="' + hash + '"]')
|
||||
.parent()
|
||||
.addClass("pure-menu-selected");
|
||||
}
|
||||
|
||||
/**
|
||||
* @description load page associated to hash
|
||||
* @param {string} hash
|
||||
*/
|
||||
function loadPage(hash) {
|
||||
switch (hash) {
|
||||
case "#intro":
|
||||
loadHtml("intro.html");
|
||||
break;
|
||||
case "#get-started":
|
||||
loadHtml("get-started.html");
|
||||
break;
|
||||
case "#user-manual":
|
||||
loadUserManual();
|
||||
break;
|
||||
case "#updates":
|
||||
loadHtml("updates.html");
|
||||
break;
|
||||
case "#changelog":
|
||||
loadMarkdown(
|
||||
"https://raw.githubusercontent.com/veeso/termscp/main/CHANGELOG.md"
|
||||
);
|
||||
break;
|
||||
}
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
function loadHtml(page) {
|
||||
const url = "html/" + page;
|
||||
$("#main").load(url, function () {
|
||||
onPageLoaded();
|
||||
});
|
||||
}
|
||||
|
||||
function loadMarkdown(page) {
|
||||
getMarkdown(page, function (md) {
|
||||
const div = jQuery("<div/>", {
|
||||
id: page,
|
||||
class: "container markdown",
|
||||
});
|
||||
div.html(converter.makeHtml(md));
|
||||
$("#main").empty();
|
||||
$("#main").append(div);
|
||||
onPageLoaded();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @description get markdown and pass result to onLoaded
|
||||
* @param {string} url
|
||||
* @param {function} onLoaded
|
||||
*/
|
||||
function getMarkdown(url, onLoaded) {
|
||||
$.ajax({
|
||||
url,
|
||||
type: "GET",
|
||||
dataType: "text",
|
||||
success: onLoaded,
|
||||
});
|
||||
}
|
||||
|
||||
function onMenuBurgerClick() {
|
||||
const active = $("#menu").hasClass("active");
|
||||
if (active) {
|
||||
$("#layout").removeClass("active");
|
||||
$("#menu").removeClass("active");
|
||||
} else {
|
||||
$("#layout").addClass("active");
|
||||
$("#menu").addClass("active");
|
||||
}
|
||||
}
|
||||
|
||||
function loadUserManual() {
|
||||
// Load language
|
||||
const lang = getNavigatorLanguage();
|
||||
if (lang === "en") {
|
||||
loadMarkdown(
|
||||
`https://raw.githubusercontent.com/veeso/termscp/main/docs/man.md`
|
||||
);
|
||||
} else {
|
||||
loadMarkdown(
|
||||
`https://raw.githubusercontent.com/veeso/termscp/main/docs/${lang}/man.md`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function onPageLoaded() {
|
||||
reloadTranslations();
|
||||
setThemeToggle();
|
||||
setTheme(getTheme());
|
||||
}
|
||||
|
||||
// Register
|
||||
window.onhashchange = onHashChange;
|
||||
function onToggleMenu() {
|
||||
const mobileMenu = $("#mobile-menu");
|
||||
let wasVisible = false;
|
||||
// if not visible set flex and slide in, otherwise slide out
|
||||
if (!mobileMenu.is(":visible")) {
|
||||
mobileMenu.css("display", "flex");
|
||||
mobileMenu.addClass("animate__animated animate__slideInLeft");
|
||||
} else {
|
||||
mobileMenu.addClass("animate__animated animate__slideOutLeft");
|
||||
wasVisible = true;
|
||||
}
|
||||
|
||||
// on animation end remove animation, if visible set hidden
|
||||
mobileMenu.on("animationend", () => {
|
||||
mobileMenu.removeClass(
|
||||
"animate__animated animate__slideOutLeft animate__slideInLeft"
|
||||
);
|
||||
if (wasVisible) {
|
||||
mobileMenu.css("display", "none");
|
||||
}
|
||||
mobileMenu.off("animationend");
|
||||
});
|
||||
}
|
||||
|
||||
function getTheme() {
|
||||
const theme = localStorage.getItem("theme");
|
||||
|
||||
if (!theme) {
|
||||
return window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "theme-dark"
|
||||
: "theme-light";
|
||||
}
|
||||
|
||||
return theme;
|
||||
}
|
||||
|
||||
function setThemeToggle() {
|
||||
if (getTheme() === "theme-dark") {
|
||||
$("#theme-toggle-dark-icon").css("display", "block");
|
||||
$("#theme-toggle-light-icon").css("display", "none");
|
||||
} else {
|
||||
$("#theme-toggle-dark-icon").css("display", "none");
|
||||
$("#theme-toggle-light-icon").css("display", "block");
|
||||
}
|
||||
}
|
||||
|
||||
// function to set a given theme/color-scheme
|
||||
function setTheme(themeName) {
|
||||
localStorage.setItem("theme", themeName);
|
||||
if (themeName === "theme-dark") {
|
||||
document.documentElement.classList.add("dark");
|
||||
} else {
|
||||
document.documentElement.classList.remove("dark");
|
||||
}
|
||||
setThemeToggle();
|
||||
}
|
||||
|
||||
// function to toggle between light and dark theme
|
||||
function toggleTheme() {
|
||||
console.log("theme", getTheme());
|
||||
if (getTheme() === "theme-dark") {
|
||||
setTheme("theme-light");
|
||||
} else {
|
||||
setTheme("theme-dark");
|
||||
}
|
||||
}
|
||||
|
||||
// Startup
|
||||
$(function () {
|
||||
onHashChange();
|
||||
// Init language
|
||||
setSiteLanguage(getNavigatorLanguage());
|
||||
// Burger event listener
|
||||
$("#menu-burger").on("click", onMenuBurgerClick);
|
||||
$(".pure-menu-heading").on("click", function () {
|
||||
location.hash = "#";
|
||||
onHashChange();
|
||||
});
|
||||
|
||||
// init theme
|
||||
setTheme(getTheme());
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user