maltejur/hsarch
maltejur/hsarch
1
0
Fork 0
Code Activity

embed

Browse source
This commit is contained in:
Malte Jürgens 2022-12-19 18:35:39 +01:00
parent 7af7790a54
commit 1237861afb
Signed by: maltejur
GPG key ID: D29FBD5F93C0CFC3
9 changed files with 115 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
embedTest.html Normal file
View file

@ -0,0 +1,24 @@
<!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" />
<title>Document</title>
<style>
body {
max-width: 1000px;
margin: auto;
padding: 50px;
}
</style>
</head>
<body>
<iframe
src="http://localhost:1234/embed.html"
height="250px"
width="100%"
frameborder="0"
/>
</body>
</html>

4
package.json
View file

@ -5,8 +5,8 @@
"author": "maltejur <maltejur@web.de>",
"license": "MIT",
"scripts": {
"dev": "parcel serve src/index.html",
"build": "parcel build src/index.html"
"dev": "parcel serve src/*.html",
"build": "parcel build src/*.html"
},
"dependencies": {
"nprogress": "^0.2.0"

24
src/embed.css Normal file
View file

@ -0,0 +1,24 @@
body {
height: unset;
}
#main {
position: block;
height: 100vh !important;
padding-top: 0 !important;
overflow-y: hidden !important;
}
.grid {
height: 100% !important;
max-height: 100% !important;
padding-top: 0 !important;
display: flex;
justify-content: left;
width: fit-content !important;
overflow-y: hidden;
}
.module {
width: max-content !important;
}

14
src/embed.html Normal file
View file

@ -0,0 +1,14 @@
<!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="./style.css" />
<link rel="stylesheet" href="./embed.css" />
</head>
<body>
<div id="main"></div>
<script src="./embed.ts" type="module"></script>
</body>
</html>

12
src/embed.ts Normal file
View file

@ -0,0 +1,12 @@
import Home from "./modules/home";
import Router from "./modules/router";
new Router(
document.querySelector("#main")!,
{
"": () => Home({ embed: "true" }),
},
{
newUrl: "https://hsarch.hhgym.de",
}
);

12
src/modules/home.ts
View file

@ -1,13 +1,19 @@
import json from "../../assets/data.json";
import { Params } from "../models";
export default function Home() {
export default function Home(params: Params) {
const ret = document.createElement("div");
ret.classList.add("grid");
let html = "";
json.hertzschlag.forEach((i) => {
let ausgaben = json.hertzschlag;
if (params.embed) {
ausgaben = ausgaben.reverse().slice(0, 10);
}
ausgaben.forEach((i) => {
html += `
<a class="module" href="#hertzschlag/${i.Ausgabe}">
<a class="module" href="/#hertzschlag/${i.Ausgabe}" target="_top">
<img src="${json.baseUrl}hertzschlag/images/${i.Ausgabe}.jpg" class="moduleImg"></img>
<div class="moduleLabel">
<h3>HS ${i.Ausgabe}</h3>

11
src/modules/router.ts
View file

@ -9,13 +9,16 @@ export default class Router {
constructor(
element: HTMLElement,
routes: Routes,
onpagechange: (route: string) => void,
lazy = false
options: {
onpagechange?: (route: string) => void;
lazy?: boolean;
newUrl?: string;
} = {}
) {
this.routes = routes;
this.el = element;
this.onpagechange = onpagechange;
this.lazy = lazy;
this.onpagechange = options.onpagechange || (() => {});
this.lazy = options.lazy || false;
window.addEventListener("hashchange", this.onhashchange.bind(this));
this.onhashchange();
}

43
src/script.ts
View file

@ -11,18 +11,14 @@ import Pdf from "./modules/pdf";
import NProgress from "nprogress/nprogress";
import "nprogress/nprogress.css";
new Router(
document.querySelector("#contentinner")!,
{
"hertzschlag/:id": AusgabeHertzschlag,
"hertzschlag/:id/pdf": Pdf,
"hertzschlag/liste": Liste,
"hertzblatt/:id": AusgabeHertzblatt,
"hertzblatt/:id/pdf": (params) => Pdf(params, "hertzblatt"),
about: About,
},
() => {}
);
new Router(document.querySelector("#contentinner")!, {
"hertzschlag/:id": AusgabeHertzschlag,
"hertzschlag/:id/pdf": Pdf,
"hertzschlag/liste": Liste,
"hertzblatt/:id": AusgabeHertzblatt,
"hertzblatt/:id/pdf": (params) => Pdf(params, "hertzblatt"),
about: About,
});
new Router(
document.querySelector("#home")!,
@ -33,14 +29,16 @@ new Router(
hertzblatt: HomeHertzblatt,
"hertzblatt/::": HomeHertzblatt,
},
(route) => {
if (route == "" || route == "hertzschlag" || route == "hertzblatt") {
document.body.classList.remove("open");
} else {
document.body.classList.add("open");
}
},
true
{
onpagechange(route) {
if (route == "" || route == "hertzschlag" || route == "hertzblatt") {
document.body.classList.remove("open");
} else {
document.body.classList.add("open");
}
},
lazy: true,
}
);
new Router(
@ -52,8 +50,9 @@ new Router(
hertzblatt: HeaderHertzblatt,
"hertzblatt/::": HeaderHertzblatt,
},
() => {},
true
{
lazy: true,
}
);
// Entfert Ladebalken

4
src/style.css
View file

@ -142,7 +142,7 @@ body {
overflow-x: hidden;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 0;
height: calc(100% - 5em);
max-height: calc(100% - 5em);
padding-top: 5em;
}
@ -395,7 +395,7 @@ iframe {
.grid,
#main {
height: calc(100% - 4em) !important;
max-height: calc(100% - 4em) !important;
padding-top: 4em !important;
}