jonasled2/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

generate header from custom elemenets

Browse source
This commit is contained in:
Jonas Leder 2021-04-13 10:07:16 +02:00
parent 520ca7abdc
commit 9da43b3827
6 changed files with 242 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
js/customElements/header.js Normal file
View file

@ -0,0 +1,25 @@
class Header extends HTMLElement {
constructor() {
super();
let pageTitle = this.getAttribute("data-title");
this.innerHTML = `
<header >
<div class="header-wrapper" >
<div class="header-homepage">
<div class="align-holder" >
<h1>${pageTitle}</h1 >
</div >
</div >
<div class="header-separator header-separator-bottom " >
<svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 1000 100" preserveAspectRatio = "none" >
<path class="svg-white-bg" d = "M737.9,94.7L0,0v100h1000V0L737.9,94.7z" ></path >
</svg >
</div >
</div >
<jl-main_menu id = "mainMenu"></jl-main_menu>
</header >
`;
}
}
customElements.define("jl-header", Header);

51
js/customElements/mainMenu.js Normal file
View file

@ -0,0 +1,51 @@
class MainMenu extends HTMLElement {
constructor() {
super();
this.generateMenu();
}
async generateMenu(){
let menu = await (await fetch("/API/mainMenu.php")).json();
let menuContainer = document.createElement("div");
menuContainer.className = "mainMenuContainer";
menu.forEach((element) => {
if(element["type"] === "link"){
let a = document.createElement("a");
a.href = element["url"];
a.innerText = element["name"];
menuContainer.appendChild(a);
} else if(element["type"] === "dropdown"){
let dropdown = document.createElement("div");
dropdown.className = "dropdown";
let a = document.createElement("a");
a.href = element["url"];
a.innerText = element["name"];
dropdown.appendChild(a)
let dropdownContent = document.createElement("div");
dropdownContent.className = "dropdown-content"
element["childElements"].forEach((childElement) => {
let a = document.createElement("a");
a.href = childElement["url"];
a.innerText = childElement["name"];
dropdownContent.appendChild(a);
let br = document.createElement("br");
dropdownContent.appendChild(br);
});
dropdown.appendChild(dropdownContent);
menuContainer.appendChild(dropdown);
}
});
this.appendChild(menuContainer);
}
}
customElements.define("jl-main_menu", MainMenu);

2
js/script.js
View file

@ -12,3 +12,5 @@ require("./customElements/blogIndex");
require("./customElements/commentsDisplay");
require("./customElements/newComment");
require("./customElements/contactMailButton");
require("./customElements/header");
require("./customElements/mainMenu");

160
public/API/mainMenu.php Normal file
View file

@ -0,0 +1,160 @@
<?php
$responseJSON = [
[
"name" => "Startseite",
"url" => "/",
"type" => "link"
],
[
"name" => "Projekte",
"url" => "#",
"type" => "dropdown",
"childElements" => [
[
"name" => "Proxdroid - Proxmox Android App",
"url" => "/Projekte/proxdroid.php",
"type" => "link"
],
[
"name" => "Website Cloner",
"url" => "/Projekte/websitecloner.php",
"type" => "link"
],
[
"name" => "YouTube Downloader",
"url" => "/Projekte/youtubedownloader.php",
"type" => "link"
],
[
"name" => "MQTT Push",
"url" => "/Projekte/mqttpush.php",
"type" => "link"
],
[
"name" => "Geocaching Premium Log link Generator",
"url" => "/Projekte/gclogLink.php",
"type" => "link"
],
[
"name" => "LED Tisch Version 1",
"url" => "/Projekte/ledtisch1.php",
"type" => "link"
],
[
"name" => "LED Tisch Version 2",
"url" => "/Projekte/ledtisch2.php",
"type" => "link"
],
[
"name" => "Regensensor",
"url" => "/Projekte/regensensor.php",
"type" => "link"
],
[
"name" => "Blitzortung",
"url" => "/Projekte/blitzortung.php",
"type" => "link"
],
[
"name" => "Insecam",
"url" => "/Projekte/insecam.php",
"type" => "link"
],
[
"name" => "URL Kürzer V1",
"url" => "/Projekte/URLkuerzer1.php",
"type" => "link"
],
[
"name" => "URL Küzer V2",
"url" => "/Projekte/URLkuerzer2.php",
"type" => "link"
],
[
"name" => "Smart Mirror",
"url" => "/Projekte/smartmirror.php",
"type" => "link"
],
[
"name" => "Installation von Snowboy",
"url" => "/Projekte/snowboy.php",
"type" => "link"
]
]
],
[
"name" => "Services",
"url" => "#",
"type" => "dropdown",
"childElements" => [
[
"name" => "URL Kürzer",
"url" => "//kuerzer.ml",
"type" => "link"
],
[
"name" => "Privnote",
"url" => "//privnote.jonasled.de",
"type" => "link"
],
[
"name" => "Hastebin",
"url" => "//paste.jonasled.de",
"type" => "link"
],
[
"name" => "Gitlab",
"url" => "//gitlab.jonasled.de",
"type" => "link"
],
[
"name" => "APT mirror",
"url" => "//apt.jonasled.de",
"type" => "link"
],
[
"name" => "Speedtest",
"url" => "//speed.jonasled.de",
"type" => "link"
],
[
"name" => "Matrix",
"url" => "//chat.jonasled.de",
"type" => "link"
],
[
"name" => "XMLTV TV Programm",
"url" => "//xmltv.jonasled.de",
"type" => "link"
],
]
],
[
"name" => "Status",
"url" => "#",
"type" => "dropdown",
"childElements" => [
[
"name" => "Server",
"url" => "//status.jonasled.de",
"type" => "link"
],
[
"name" => "Discord Bots",
"url" => "//discordstatus.jonasled.de",
"type" => "link"
],
[
"name" => "NTP Server",
"url" => "/ntpstatus.php",
"type" => "link"
],
]
]
];
header('Content-Type: application/json');
echo json_encode($responseJSON);

29
public/internal/header.php
View file

@ -1,17 +1,8 @@
<?php
function getHeader($pagetitle, $navselect)
function getHeader($pagetitle)
{
include "config.php";
include "menu.php";
$menu = getMenu($navselect);
if (strpos($_SERVER['HTTP_HOST'], '.onion') !== false) {
$trackURL = $trackURLTor;
} else {
$trackURL = $trackURLNormal;
}
echo(<<<EOF
<!DOCTYPE html >
<html lang = "de" >
@ -24,24 +15,10 @@ function getHeader($pagetitle, $navselect)
<link href = "/css/style.css" rel = "stylesheet" >
</head >
<body >
<header >
<div class="header-wrapper" >
<div class="header-homepage">
<div class="align-holder" >
<h1>$pagetitle</h1 >
</div >
</div >
<div class="header-separator header-separator-bottom " >
<svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 1000 100" preserveAspectRatio = "none" >
<path class="svg-white-bg" d = "M737.9,94.7L0,0v100h1000V0L737.9,94.7z" ></path >
</svg >
</div >
</div >
<div id = "mainMenu">$menu</div >
</header >
<jl-header data-title="$pagetitle"></jl-header>
<div id = "content" >
<!--Matomo Image Tracker -->
<img src = "$trackURL" style = "border:0" alt = "" />
<img src = "" style = "border:0" alt = "" />
<!--End Matomo -->
EOF);
}

58
public/internal/menu.php
View file

@ -1,58 +0,0 @@
<?php
function getMenu($page){
$startpage = $page == "home" ? "class=\"menueSelected\"" : "";
$projects = $page == "projekte" ? "class=\"menueSelected\"" : "";
$status = $page == "status" ? "class=\"menueSelected\"" : "";
return <<<EOF
<div id="burgerMenu">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="mainMenuContainer">
<a href="/" $startpage>Startseite</a>
<div class="dropdown">
<a href="#" $projects>Projekte</a>
<div class="dropdown-content">
<a href="/Projekte/proxdroid.php">Proxdroid - Proxmox Android App</a><br>
<a href="/Projekte/websitecloner.php">Website Cloner</a><br>
<a href="/Projekte/youtubedownloader.php">YouTube Downloader</a><br>
<a href="/Projekte/mqttpush.php">MQTT Push</a><br>
<a href="/Projekte/gclogLink.php">Geocaching Premium Log link Generator</a><br>
<a href="/Projekte/ledtisch1.php">LED Tisch Version 1</a><br>
<a href="/Projekte/ledtisch2.php">LED Tisch Version 2</a><br>
<a href="/Projekte/regensensor.php">Regensensor</a><br>
<a href="/Projekte/blitzortung.php">Blitzortung</a><br>
<a href="/Projekte/insecam.php">Insecam</a><br>
<a href="/Projekte/URLkuerzer1.php">URL K&uuml;rzer V1</a><br>
<a href="/Projekte/URLkuerzer2.php">URL K&uuml;rzer V2</a><br>
<a href="/Projekte/smartmirror.php">Smart Mirror</a><br>
<a href="/Projekte/snowboy.php">Installation von Snowboy</a><br>
</div>
</div>
<div class="dropdown">
<a href="#">Services</a>
<div class="dropdown-content">
<a href="//kuerzer.ml">URL K&uuml;rzer</a><br>
<a href="//privnote.jonasled.de">Privnote</a><br>
<a href="//paste.jonasled.de">Hastebin</a><br>
<a href="//gitlab.jonasled.de">Gitlab</a><br>
<a href="//apt.jonasled.de">APT mirror</a><br>
<a href="//speed.jonasled.de">Speedtest</a><br>
<a href="//chat.jonasled.de">Matrix</a><br>
<a href="//xmltv.jonasled.de">XMLTV TV Programm</a><br>
</div>
</div>
<div class="dropdown">
<a href="#" $status>Status</a>
<div class="dropdown-content">
<a href="//status.jonasled.de">Server</a><br>
<a href="//discordstatus.jonasled.de">Discord Bots</a><br>
<a href="/ntpstatus.php">NTP Server</a><br>
</div>
</div>
</div>
EOF;
}
?>