Merge branch 'main' of github.com:leuffen/liscom

.editorconfig

@@ -11,7 +11,7 @@ insert_final_newline = true
 
 # Matches multiple files with brace expansion notation
 # Set default charset
-[*.{js,php}]
+[*.{js,php,ts,scss,css}]
 charset = utf-8
 trim_trailing_whitespace = true
 

README.md

@@ -23,3 +23,19 @@ Interactive Site Components manageed by pure CSS.
 ```html
 <p data-details-title="Title">Some text epanded if title was clicked</p>
 ```
+
+
+### Loader
+
+
+### Typewriter Element
+
+```html
+  <typewriter-element
+    data-write-speed="200"
+    data-delete-speed="50"
+    data-pause-before-delete="1000"
+    data-pause-before-write="500">
+    Hallo,Welt,TypeScript,WebComponent
+  </typewriter-element>
+```

loader.scss

@@ -0,0 +1 @@
+@import "src/loader/loader";

loader.ts

@@ -0,0 +1,2 @@
+export * from "./src/loader/loader";
+

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leuffen/liscom",
-  "version": "1.0.8",
+  "version": "2.0.4",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

src/index.scss

@@ -1,2 +1,4 @@
 
 @import "slideshow/slideshow";
+@import "typewriter-element/typewriter-element";
+@import "slider/liscom-slider";

src/index.ts

@@ -24,3 +24,5 @@ export function liscom_enable(liscomConfig : LiscomConfig | any = {}) {
 
 import "./slideshow/slideshow";
 import "./details-title/details-title";
+import "./typewriter-element/typewriter-element";
+import "./slider/liscom-slider";

src/loader/_loader.scss

@@ -0,0 +1,98 @@
+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;
+}
+
+
+body > .loader {
+    position: fixed;
+    z-index: -99;
+    top: 0;
+    left: 0;
+    width: 100%;
+    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;
+
+    }
+}
+
+body.loaded > .loader {
+    opacity: 0;
+    //display: none !important;
+    z-index: -99;
+}

src/loader/loader.ts

@@ -0,0 +1,34 @@
+
+const indexName = "liscom_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");
+
+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
+}
+
+

src/slider/liscom-slider.scss

@@ -0,0 +1,29 @@
+
+liscom-slider {
+  &:-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;  /* Internet Explorer 10+ */
+
+  scroll-snap-type: both mandatory;
+  scroll-snap-stop: normal;
+  scroll-behavior: smooth;
+
+
+  position: relative;
+
+  &>slot>* {
+    scroll-snap-align: start;
+  }
+
+  .liscom-slider__indicator {
+    position: absolute;
+    z-index: 2;
+    left: 0;
+    top:0;
+    bottom: 0;
+  }
+
+}

src/slider/liscom-slider.ts

@@ -0,0 +1,84 @@
+class MyComponent extends HTMLElement {
+    private prevBtn!: HTMLElement;
+    private nextBtn!: HTMLElement;
+    private currentSection = 0;
+    private sections!: NodeListOf<HTMLElement>;
+
+    constructor() {
+        super();
+
+    }
+
+    connectedCallback() {
+        /*
+        this.container = this.shadowRoot!.querySelector('.container')!;
+        this.prevBtn = this.shadowRoot!.getElementById('prevBtn')!;
+        this.nextBtn = this.shadowRoot!.getElementById('nextBtn')!;
+        this.sections = this.querySelectorAll('section');
+
+
+
+        this.prevBtn.addEventListener('click', () => this.scroll(-1));
+        this.nextBtn.addEventListener('click', () => this.scroll(1));
+        */
+        console.log("connected");
+
+        this.addEventListener('mousedown', this.dragStart);
+        this.addEventListener('mouseup', this.dragEnd);
+        this.addEventListener('mouseleave', this.dragEnd);
+        this.addEventListener('mousemove', this.dragMove);
+    }
+
+    doScroll(direction: number) {
+        this.currentSection = Math.max(0, Math.min(this.sections.length - 1, this.currentSection + direction));
+        this.sections[this.currentSection].scrollIntoView({ behavior: 'smooth' });
+    }
+
+    // Define your dragStart, dragEnd, and dragMove methods here to handle mouse drag
+    private isDragging = false;
+    private startY = 0;
+    private startX = 0;
+    private scrollStartY = 0;
+    private scrollStartX = 0;
+
+    // ... other methods
+
+    dragStart(e: MouseEvent) {
+        console.log("mousedown");
+        e.preventDefault();
+        this.isDragging = true;
+        this.startY = e.clientY;
+        this.startX = e.clientX;
+        this.style.scrollSnapType = "unset";
+
+        this.scrollStartY = this.scrollTop;
+        this.scrollStartX = this.scrollLeft;
+        this.style.cursor = 'grabbing';
+    }
+
+    dragEnd(e: MouseEvent) {
+        if (!this.isDragging) return;
+        this.isDragging = false;
+        this.style.cursor = '';
+         this.style.scrollSnapType = null;
+         setTimeout(() => {
+             this.scrollBy(1, 0)
+             this.scrollBy(0, 1)
+         }, 0)
+
+    }
+
+    dragMove(e: MouseEvent) {
+        if (!this.isDragging) return;
+        const y = e.clientY;
+        const x = e.clientX;
+
+        const deltaY = this.startY - y;
+        this.scrollTop = this.scrollStartY + deltaY;
+
+        const deltaX = this.startX - x;
+        this.scrollLeft = this.scrollStartX + deltaX;
+    }
+}
+
+customElements.define('liscom-slider', MyComponent);

src/slideshow/slideshow.ts

@@ -29,6 +29,7 @@ class Slideshow{
         }
         if (this.#curElement === null) {
             this.#curElement = this.element.firstElementChild as HTMLElement;
+            return;
         } else {
             this.#curElement = this.#curElement.nextElementSibling as HTMLElement;
             if (this.#curElement === null)

src/typewriter-element/_typewriter-element.scss

@@ -0,0 +1,15 @@
+
+typewriter-element {
+  @keyframes liscom-blink {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+  }
+
+  .cursor {
+      animation: liscom-blink 1s step-end infinite;
+    }
+}