From f68551f3e26775d884a4a3f3ddbf16b1486bb24e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Malte=20J=C3=BCrgens?= <maltejur@dismail.de>
Date: Mon, 19 Dec 2022 18:35:39 +0100
Subject: [PATCH] embed

---
 embedTest.html        | 24 ++++++++++++++++++++++++
 package.json          |  4 ++--
 src/embed.css         | 24 ++++++++++++++++++++++++
 src/embed.html        | 14 ++++++++++++++
 src/embed.ts          | 12 ++++++++++++
 src/modules/home.ts   | 12 +++++++++---
 src/modules/router.ts | 11 +++++++----
 src/script.ts         | 43 +++++++++++++++++++++----------------------
 src/style.css         |  4 ++--
 9 files changed, 115 insertions(+), 33 deletions(-)
 create mode 100644 embedTest.html
 create mode 100644 src/embed.css
 create mode 100644 src/embed.html
 create mode 100644 src/embed.ts
diff --git a/embedTest.html b/embedTest.html
new file mode 100644
index 0000000..fb5940d
--- /dev/null
+++ b/embedTest.html
@@ -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>
diff --git a/package.json b/package.json
index 689b4c0..70cb474 100644
--- a/package.json
+++ b/package.json
@@ -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"
diff --git a/src/embed.css b/src/embed.css
new file mode 100644
index 0000000..fdaba39
--- /dev/null
+++ b/src/embed.css
@@ -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;
+}
diff --git a/src/embed.html b/src/embed.html
new file mode 100644
index 0000000..bac560e
--- /dev/null
+++ b/src/embed.html
@@ -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>
diff --git a/src/embed.ts b/src/embed.ts
new file mode 100644
index 0000000..11ad9ca
--- /dev/null
+++ b/src/embed.ts
@@ -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",
+  }
+);
diff --git a/src/modules/home.ts b/src/modules/home.ts
index 8e19a6e..17c22cf 100644
--- a/src/modules/home.ts
+++ b/src/modules/home.ts
@@ -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>
diff --git a/src/modules/router.ts b/src/modules/router.ts
index b52a92e..1a55d43 100644
--- a/src/modules/router.ts
+++ b/src/modules/router.ts
@@ -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();
   }
diff --git a/src/script.ts b/src/script.ts
index ead32f5..9cb6d10 100644
--- a/src/script.ts
+++ b/src/script.ts
@@ -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
diff --git a/src/style.css b/src/style.css
index 396f189..c45d53b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -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;
   }
 
