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 8b1dc35104
commit f68551f3e2
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>", "author": "maltejur <maltejur@web.de>",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"dev": "parcel serve src/index.html", "dev": "parcel serve src/*.html",
"build": "parcel build src/index.html" "build": "parcel build src/*.html"
}, },
"dependencies": { "dependencies": {
"nprogress": "^0.2.0" "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 json from "../../assets/data.json";
import { Params } from "../models";
export default function Home() { export default function Home(params: Params) {
const ret = document.createElement("div"); const ret = document.createElement("div");
ret.classList.add("grid"); ret.classList.add("grid");
let html = ""; let html = "";
json.hertzschlag.forEach((i) => { let ausgaben = json.hertzschlag;
if (params.embed) {
ausgaben = ausgaben.reverse().slice(0, 10);
}
ausgaben.forEach((i) => {
html += ` 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> <img src="${json.baseUrl}hertzschlag/images/${i.Ausgabe}.jpg" class="moduleImg"></img>
<div class="moduleLabel"> <div class="moduleLabel">
<h3>HS ${i.Ausgabe}</h3> <h3>HS ${i.Ausgabe}</h3>

11
src/modules/router.ts
View file

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

19
src/script.ts
View file

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

4
src/style.css
View file

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