@leuffen/themejs1 3.0.2 → 3.0.3

package/dist/helper/loader.d.ts

@@ -0,0 +1 @@
+export declare function initLoader(): void;

package/dist/helper/loader.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initLoader = void 0;
+const hit_index_1 = require("../hit-index");
+console.time("loader");
+function initLoader() {
+    let interval = setInterval(() => {
+        // Detect if body is loaded
+        if (document.querySelector("body")) {
+            // Cancel interval
+            clearInterval(interval);
+            let img = document.querySelector("img").cloneNode(true);
+            let loader = document.createElement("div");
+            loader.classList.add("loader");
+            loader.appendChild(img);
+            img.setAttribute("class", "");
+            img.setAttribute("loading", "eager");
+            let loaderBar = document.createElement("div");
+            loaderBar.classList.add("loader-bar");
+            loader.appendChild(loaderBar);
+            document.querySelector("body").appendChild(loader);
+        }
+    }, hit_index_1.hitIndex === 1 ? 10 : 350); // Wait 350 on subsequent requests to prevent flickering
+}
+exports.initLoader = initLoader;

package/dist/hit-index.d.ts

@@ -0,0 +1 @@
+export declare const hitIndex: number;

package/dist/hit-index.js

@@ -0,0 +1,11 @@
+"use strict";
+var _a, _b;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hitIndex = void 0;
+const indexName = "themejs_hit_index";
+let state = sessionStorage.getItem(indexName);
+if (state === null) {
+    sessionStorage.setItem(indexName, "0");
+}
+sessionStorage.setItem(indexName, "" + (parseInt((_a = sessionStorage.getItem(indexName)) !== null && _a !== void 0 ? _a : "0") + 1));
+exports.hitIndex = parseInt((_b = sessionStorage.getItem(indexName)) !== null && _b !== void 0 ? _b : "0");

package/embed.scss

@@ -1,19 +1,2 @@
 @import "src/default/loader";
 
-body {
-    min-height: 5000vh; // 3000vh is enough to make sure the page scrolls to correct position on reload
-    opacity: 0;
-    transition: opacity 0.25s;
-}
-
-body.loaded {
-    min-height: unset;
-    opacity: 1;
-}
-
-body > * {
-  display: none;
-}
-body.loaded > * {
-  display: block;
-}

package/embed.ts

@@ -0,0 +1,4 @@
+import {initLoader} from "./src/helper/loader";
+
+
+initLoader()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leuffen/themejs1",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.module.js",

package/sections/_defaults.scss

@@ -10,6 +10,10 @@
     --t-text-color-accent: var(--bs-gray-900);
     --t-text-color-primary: var(--bs-primary);
 
+    --t-navbar-height: 88px;
+
+    /* What to substract from 100vh to start the next elemment after fullsize header */
+    --t-fullsize-modifier: 150px;
 
     --t-header-margin: 0 0 20px 0;
     --t-paragraf-margin: 0 0 20px 0;

package/sections/hero-max/hero-max.scss

@@ -40,7 +40,7 @@
 
         position: relative;
         &.tjs__hero-max--autoheight {
-            height: calc(100vh - 200px);
+            height: calc(100vh - var(--t-fullsize-modifier, 200px));
             min-height: var(--layout-min-height, 400px);
             max-height: var(--layout-max-height, 1000px);
         }

package/sections/navbar-blox/navbar-blox.scss

@@ -1,7 +1,7 @@
 
 
 .tjs__navbar-blox {
-    --height: 65px;
+    --height: var(--t-navbar-height, 64px);
     position: relative;
     top: 0;
     width: 100%;

package/src/default/loader.scss

@@ -1,53 +1,98 @@
-html.loader::before {
-  content: "";
-  font-family: sans-serif;
-  font-size: 12px;
-  line-height: 10px;
-  position: fixed;
-  text-align: center;
-  color: white;
-  margin-top: 1px;
-    z-index: 2;
-  -webkit-animation: leu--site-loader 60s ease-out;
-  animation: leu--site-loader 30s ease-out;
-  display: block;
-  background-color: indianred;
-  height: 3px;
-  width: 35%;
+body > .loader > .loader-bar {
+    position: relative;
+    display: block;
+    background-color: lightgrey;
+    height: 3px;
+    width: 70vw;
+    max-width: 500px;
     top: 0;
+    z-index: 1;
+    margin-top: 25vh;
+    &::before {
+        content: "";
+        font-family: sans-serif;
+        font-size: 12px;
+        line-height: 10px;
+        position: relative;
+        text-align: center;
+        color: white;
+
+        z-index: 2;
+        -webkit-animation: leu--site-loader 60s ease-out;
+        animation: leu--site-loader 30s ease-out;
+        display: block;
+        background-color: indianred;
+        height: 100%;
+        width: 35%;
+        top: 0;
+    }
+}
+
+
+@keyframes leu--site-loader {
+    3% {
+        width: 75%;
+
+    }
+    5% {
+        width: 90%;
+    }
+    10% {
+        width: 95%;
+    }
+    100% {
+        width: 100%;
+    }
+}
+
+
+body {
+    min-height: 5000vh; // 3000vh is enough to make sure the page scrolls to correct position on reload
+}
+
+body.loaded {
+    min-height: unset;
+}
+
+body > joda-content {
+    opacity: 0;
+    transition: opacity 0.10s;
 }
+body.loaded > joda-content {
+    opacity: 1;
+}
+
 
-html.loader::after {
-    content: "";
-    font-family: sans-serif;
-    font-size: 12px;
-    line-height: 10px;
+body > .loader {
     position: fixed;
-    text-align: center;
-    color: white;
-    margin-top: 1px;
-    -webkit-animation: leu--site-loader 60s ease-out;
-    animation: leu--site-loader 60s ease-out;
-    display: block;
-    background-color: darkgray;
-    height: 3px;
+    z-index: -99;
     top: 0;
+    left: 0;
     width: 100%;
-    right: 0;
+    height: 100%;
+    background: #fff;
+    transition: opacity 0.15s;
+    display: flex !important;
+
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    opacity: 1;
+    flex-wrap: wrap;
+    flex-direction: column;
+
+    & > img {
+        flex-direction: column;
+        display: block !important;
+        height: auto !important;
+        width: 70vw !important;
+        max-width: 500px;
+
+    }
 }
 
-@keyframes leu--site-loader {
-  3% {
-    width: 75%;
-
-  }
-  5% {
-    width: 90%;
-  }
-  10% {
-    width: 95%;
-  }
-  100% {
-    width: 100%;
-  }
+body.loaded > .loader {
+    opacity: 0;
+    //display: none !important;
+    z-index: -99;
 }

package/src/helper/loader.ts

@@ -0,0 +1,27 @@
+import {hitIndex} from "../hit-index";
+
+console.time("loader");
+export function initLoader() {
+    let interval = setInterval(() => {
+        // Detect if body is loaded
+        if (document.querySelector("body")) {
+            // Cancel interval
+            clearInterval(interval);
+
+            let img = document.querySelector("img").cloneNode(true) as HTMLImageElement;
+            let loader = document.createElement("div");
+            loader.classList.add("loader");
+            loader.appendChild(img);
+            img.setAttribute("class", "");
+            img.setAttribute("loading", "eager");
+
+            let loaderBar = document.createElement("div");
+            loaderBar.classList.add("loader-bar");
+            loader.appendChild(loaderBar);
+
+            document.querySelector("body").appendChild(loader);
+        }
+    }, hitIndex === 1 ? 10 : 350); // Wait 350 on subsequent requests to prevent flickering
+}
+
+

package/src/hit-index.ts

@@ -0,0 +1,8 @@
+const indexName = "themejs_hit_index";
+let state = sessionStorage.getItem(indexName);
+if (state === null) {
+    sessionStorage.setItem(indexName, "0");
+}
+sessionStorage.setItem(indexName, "" + (parseInt(sessionStorage.getItem(indexName) ?? "0") + 1));
+
+export const hitIndex = parseInt(sessionStorage.getItem(indexName) ?? "0");