@leuffen/themejs1 1.0.0 → 1.0.2

package/src/template/_variables.scss

@@ -1,29 +0,0 @@
-
-$primary: #007bff !default;
-$secondary: #6c757d !default;
-$light: #f8f9fa !default;
-
-
-$as-mainbar-color: white !default;
-$as-minibar-color: $primary !default;
-
-$content-height-adjustment: 0px !default;
-$min-page-height: 600px !default;
-
-.row {
-  & > div {
-    --joda-class: 'col';
-
-  }
-}
-
-
-:root {
-  --as-minibar-color: #007bff;
-  --as-mainbar-color: $as-mainbar-color;
-}
-
-
-joda-content {
-  --joda-init: true;
-}

package/src/template/hero/hero1.scss

@@ -1,73 +0,0 @@
-
-
-.hc-section .section-1 {
-    background-color: $primary;
-}
-.hc-section .odd {
-    background-color: $primary;
-}
-.hc-section .even {
-    background-color: $primary;
-}
-
-
-
-
-.as__hero1 {
-    .full_height {
-        min-height: max(calc(100vh - $content-height-adjustment), $min-page-height);
-    }
-
-
-
-
-    .v-hide {
-        visibility: hidden;
-    }
-    .as__hero1_content-row {
-        &.mobile {
-            min-height: 66vh;
-            align-content: center;
-        }
-    }
-
-    .as__hero1_image-mobile {
-        img {
-            max-height: 60vh;
-            height: 100%;
-            width: 100%;
-            min-height: 33vh;
-            min-width: inherit;
-            object-fit: cover;
-            object-position: center center;
-        }
-    }
-    .as__hero1_image {
-        overflow: hidden;
-        img {
-            // Object-fit requires a height to be set on the image
-            height: 100%;
-            width: 100%;
-            min-height: inherit;
-            min-width: inherit;
-            object-fit: cover;
-            object-position: center center;
-
-        }
-    }
-    .image-overlay {
-        background-color: var(--as-image-overlay-color);
-        top: 0;
-        z-index: 999;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        &.overlay-fade {
-            background-color: unset;
-            background-image: linear-gradient(to left, rgba(0, 0, 0, 0.0), rgba(255, 255, 255, 1));
-        }
-
-    }
-
-
-}

package/src/template/hero/hero1.ts

@@ -1,78 +0,0 @@
-import {ka_html, KaTemplate} from "@kasimirjs/embed";
-import {DefaultLayout, jodaRenderer, JodaRendererInterface, JodaUseRenderer} from "@leuffen/jodastyle";
-import {QTemplate} from "@leuffen/jodastyle/src/helper/QTemplate";
-
-
-// language=HTML
-const tpl = ka_html(`
-<div class="autosection as__hero1 position-relative" style="isolation: isolate">
-    <div class="as__hero1_image-mobile :: d-block :[[layout.break1]]: d-none   col-[[12 - layout.content_cols]] " data-ref="image-mobile"></div>
-
-    <div class="[[layout.container]] ">
-        <div class="as__hero1_content-row row :: mobile :[[layout.break1]]: full_height align-items-center">
-            
-            <div class="as__hero1_content [[layout.content_classes]] [[layout.content_space]] :: col-12 :[[layout.break1]]:  col-[[layout.content_cols]] " data-ref="main"></div>
-        </div>
-    </div>
-    <div class="position-absolute top-0 bottom-0 w-100" style="z-index: -1">
-        <div class="container-fluid p-0 h-100 :: d-none :[[layout.break1]]: d-block">
-            <div class="row g-0 flex-lg-row-reverse h-100">
-                <div class="col-[[layout.image_cols]] position-relative as__hero1_image h-100" data-ref="image">
-                    <div class="position-absolute image-overlay [[ layout.content_cols-layout.image_cols < 0 ? 'overlay-fade' : '']]"></div>
-                </div>
-               
-            </div>
-            
-        </div>
-    </div>
-</div>
-`);
-
-
-export class HeroLayout extends DefaultLayout {
-
-    /**
-     * Columns of the content overlay
-     */
-    content_cols : number = 6
-
-    content_space : string = "my-5"
-
-    /**
-     * set Classes of the content div
-     */
-    content_classes : string = ""
-
-    /**
-     * Size of the image in Background
-     */
-    image_cols : number = 6
-
-    /**
-     *
-     */
-    image_content: string = "contentSelector(img)"
-}
-
-@jodaRenderer("hero1", HeroLayout)
-class Hero1 implements JodaRendererInterface {
-    render(element: HTMLElement, layout: HeroLayout): HTMLElement {
-        let main = new QTemplate(tpl);
-        main.parse({layout});
-
-        Array.from(element.querySelectorAll(".background img, img.background")).forEach((el: HTMLElement) => {
-            main.select("image").append(el.cloneNode(true));
-            main.select("image-mobile").append(el);
-        });
-
-        console.log("hero1");
-
-        main.select("main").append(element.querySelector("*"))
-        element.innerHTML = "";
-        element.append(main.content);
-        return main.content;
-    }
-
-}
-
-

package/src/template/navbar/navbar.scss

@@ -1,133 +0,0 @@
-
-
-
-.as__navbar {
-    height: auto;
-    top: 0;
-    width: 100%;
-
-    &.fixed {
-        position: fixed;
-        top: 0;
-        width: 100%;
-    }
-    &.absolute {
-        position: absolute;
-        top: 0;
-        width: 100%;
-    }
-
-    transition: opacity 1s ease-in-out;
-    position: fixed;
-    z-index: 999;
-    isolation: isolate;
-    opacity: 1;
-
-    &.auto-fixed {
-        &.scrolled {
-            &.fixed {
-                opacity: 1;
-                position: fixed;
-            }
-            opacity: 0;
-        }
-    }
-
-
-    .as__minibar {
-        overflow: hidden;
-        background-color: var(--as-minibar-color);
-        height: var(--as-minibar-height, 24px);
-        transition: height 0.3s ease-in-out;
-        z-index: 9999;
-        ul {
-            text-align: right;
-            text-decoration: none;
-            list-style-type: none;
-            li {
-                display: inline-block;
-                margin: 0 0.5rem;
-                a {
-                    text-decoration: none;
-                    color: var(--as-minibar-text-color);
-                    &:hover {
-
-                        text-decoration: underline;
-                    }
-                }
-            }
-        }
-    }
-
-    .as__mainbar {
-        .nav-link {
-            padding-right: 0.8rem;
-            padding-left: 0.8rem;
-        }
-
-        .navbar-collapse.show {
-            background-color: var(--as-mainbar-bg, white);
-
-        }
-        .navbar-toggler {
-            background-color: rgba(255, 255,255, 0.5);
-        }
-    }
-}
-
-.as__navbar.scrolled {
-    .as__minibar {
-        height: 0;
-    }
-}
-
-/* Theme specific styles */
-.as__navbar.default {
-
-    .as__mainbar {
-        background-color: var(--as-mainbar-bg, white);
-        border-bottom: 1px solid $primary;
-        box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
-    }
-    .as__minibar {
-        font-size: 13px;
-        line-height: 24px;
-        background-color: var(--as-minibar-bg, $primary);
-        a {
-            color: white;
-        }
-    }
-}
-
-.as__navbar.transparent {
-    .as__minibar{
-        border: 0;
-        font-size: 13px;
-        line-height: 24px;
-    }
-    .as__mainbar {
-        background-color: transparent !important;
-        transition: all 0.3s ease-in-out;
-        border: 0;
-
-        a {
-            font-weight: bolder;
-            // text-frame outset in white to read text better on background
-            text-shadow: 1px 1px 1px $light, -1px -1px 1px $light, 1px -1px 1px $light, -1px 1px 1px $light;
-
-
-        }
-    }
-
-}
-.as__navbar.transparent.scrolled {
-    .as__mainbar {
-        background-color: var(--as-mainbar-bg, white) !important;
-        border-bottom: 1px solid $primary;
-        box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
-
-    }
-    .as__minibar {
-        height: 0;
-    }
-}

package/src/template/navbar/navbar.ts

@@ -1,137 +0,0 @@
-import {ka_create_element, ka_html, KaTemplate} from "@kasimirjs/embed";
-import {DefaultLayout, jodaRenderer, JodaRendererInterface} from "@leuffen/jodastyle";
-import {QTemplate} from "@leuffen/jodastyle/src/helper/QTemplate";
-
-
-
-// language=HTML
-const tpl = ka_html(`
-<nav class="as__navbar [[layout.position]]" style="z-index: 999">
-
-    <div id="as__minibar" class="as__minibar top" >
-        <div class="[[layout.container]]" data-ref="minibar"></div>
-    </div>
-    
-    <div class="as__mainbar navbar navbar-expand-lg w-100">
-        <div class="[[layout.container]]" data-ref="main">
-            
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div data-ref="navbar" class="collapse navbar-collapse" id="navbarSupportedContent">
-
-                
-            </div>
-        </div>
-    </div>
-    
-</nav>
-`);
-
-
-export class NavbarLayout extends DefaultLayout {
-
-    /**
-     * a additional class name added to the main element
-     * to allow for custom styling. Defaults to "default" (see as-navbar.scss for details)
-     */
-    style_class = "default";
-
-    /**
-     * default position: Fixed on top
-     */
-    position = "fixed";
-
-    /**
-     * Show fixed navbar if scrolled down more than this distance
-     */
-    fixed_scroll_distance = 10;
-}
-
-
-@jodaRenderer("navbar", NavbarLayout)
-class Navbar implements JodaRendererInterface {
-
-    public render(element: HTMLElement, layout: NavbarLayout) {
-        console.log(layout);
-
-        let original = element.cloneNode(true) as HTMLElement;
-
-
-        let template = new QTemplate(tpl);
-        element.innerHTML = "";
-        element.appendChild(template.content);
-
-
-        template.parse({layout});
-
-        let result = template.content;
-        let mainDiv = template.with("main");
-        let navbar = template.with("navbar");
-        let minibar = template.with("minibar");
-
-
-
-        let navbarBrand = original.querySelector(".navbar-brand");
-        if (navbarBrand === null) {
-            navbarBrand = ka_create_element("a", {href: "/"}, "No class='navbar-brand' element")
-        }
-
-        mainDiv.selected.insertBefore(navbarBrand, mainDiv.selected.firstElementChild);
-
-        let mainUl = original.querySelector("ul.mainbar") as HTMLDivElement | null;
-        if (mainUl === null) {
-            mainUl = ka_create_element("ul", {}, "Missing ul.mainbar element") as HTMLDivElement
-        }
-        mainUl = mainUl.cloneNode(true) as HTMLDivElement;
-        navbar.append(mainUl);
-
-        let miniUl = original.querySelector("ul.minibar") as HTMLDivElement | null;
-        if (miniUl.firstElementChild === null) {
-            miniUl = null;
-        }
-        minibar.append(miniUl);
-
-        mainUl.classList.add(..."navbar-nav navbar-nav-scroll ms-auto my-2 my-lg-0".split(" "));
-
-
-        if (layout.fixed_scroll_distance !== null)
-            result.firstElementChild.classList.add("auto-fixed");
-
-        result.firstElementChild.classList.add(layout.style_class);
-        let scolled = false;
-        let fixed = false;
-
-        window.setInterval(() => {
-            if (window.scrollY > 0 && !scolled) {
-                result.classList.add("scrolled");
-                scolled = true;
-            } else if (window.scrollY === 0 && scolled) {
-                result.classList.remove("scrolled");
-                scolled = false;
-            } else {
-                // nothing
-            }
-            if (layout.fixed_scroll_distance === null)
-                return;
-            if (window.scrollY > layout.fixed_scroll_distance && !fixed) {
-                result.classList.add("fixed");
-                fixed = true;
-            } else if (window.scrollY <= layout.fixed_scroll_distance && fixed) {
-                result.classList.remove("fixed");
-                fixed = false;
-            }
-        }, 300)
-
-
-        mainUl.querySelectorAll("li").forEach(e => e.classList.add("nav-item"))
-        mainUl.querySelectorAll("li a").forEach(e => e.classList.add("nav-link"))
-        mainUl.querySelectorAll("li.dropdown ul").forEach(e => e.classList.add("dropdown-menu"))
-        mainUl.querySelectorAll("li.dropdown ul li").forEach(e => e.classList.add("dropdown-item"))
-
-
-        element.replaceWith(template.content);
-        return template.content;
-    }
-}
-