From 61cf1d4bbad43792d31e539156b2d8fd6f5819e7 Mon Sep 17 00:00:00 2001 From: Filippo Maria Grilli Date: Wed, 27 Nov 2024 20:43:56 +0100 Subject: [PATCH 01/13] sidebar fixes fixed issue with missing first menu icon. fixed issue with logo separator still showing when collaped and no logo submitted --- src/css/bundle.css | 4 ++++ src/css/components/sidebar.css | 4 ++++ src/js/bundle.js | 2 +- src/js/components/sidebar.js | 2 +- 4 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/css/bundle.css b/src/css/bundle.css index 85541e1..52051b9 100644 --- a/src/css/bundle.css +++ b/src/css/bundle.css @@ -4442,6 +4442,10 @@ html:has(.kroma-navbar) .kroma-sidebar{ background: var(--neutral-300); } +.kroma-sidebar.collapsed .sdb-logo:not(:has(img)):after { + display: none; +} + .kroma-sidebar .sdb-logo span { margin: auto 0; } diff --git a/src/css/components/sidebar.css b/src/css/components/sidebar.css index 4c51665..a2d1084 100644 --- a/src/css/components/sidebar.css +++ b/src/css/components/sidebar.css @@ -142,6 +142,10 @@ html:has(.kroma-navbar) .kroma-sidebar{ background: var(--neutral-300); } +.kroma-sidebar.collapsed .sdb-logo:not(:has(img)):after { + display: none; +} + .kroma-sidebar .sdb-logo span { margin: auto 0; } diff --git a/src/js/bundle.js b/src/js/bundle.js index 67e36dc..2339e9d 100644 --- a/src/js/bundle.js +++ b/src/js/bundle.js @@ -1509,7 +1509,7 @@ export class KromaSidebar { page.text = a.innerText ?? 'Page'; page.title = page.text; page.icon = a.previousElementSibling; - if( (page.icon.tagName ?? '') != 'I' ){ + if(!page.icon || (page.icon.tagName ?? '') != 'I' ){ page.icon = document.createElement('i'); page.icon.classList.add('fa-solid'); page.icon.classList.add('fa-link'); diff --git a/src/js/components/sidebar.js b/src/js/components/sidebar.js index a44d19b..139ae4b 100644 --- a/src/js/components/sidebar.js +++ b/src/js/components/sidebar.js @@ -55,7 +55,7 @@ export class KromaSidebar { page.text = a.innerText ?? 'Page'; page.title = page.text; page.icon = a.previousElementSibling; - if( (page.icon.tagName ?? '') != 'I' ){ + if(!page.icon || (page.icon.tagName ?? '') != 'I' ){ page.icon = document.createElement('i'); page.icon.classList.add('fa-solid'); page.icon.classList.add('fa-link'); From 15aeff02257406be5caf9dddb97980e548f6e57b Mon Sep 17 00:00:00 2001 From: Filippo Maria Grilli Date: Wed, 27 Nov 2024 22:32:27 +0100 Subject: [PATCH 02/13] added no-selection to hide highlight bg --- src/css/utils/display.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/css/utils/display.css b/src/css/utils/display.css index afa8faf..457cee8 100644 --- a/src/css/utils/display.css +++ b/src/css/utils/display.css @@ -2,3 +2,20 @@ .block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; } + + +/*REMOVE HIGHLIGHT BACKGROUND*/ +.no-selection::selection { + background: transparent; + color: inherit; +} + +.no-selection::-moz-selection { + background: transparent; + color: inherit; +} + +.no-selection { + user-select: none; +} + From 32660bccdf1519fc7e2e8abcc70270987a4a981f Mon Sep 17 00:00:00 2001 From: Filippo Maria Grilli Date: Wed, 27 Nov 2024 22:40:47 +0100 Subject: [PATCH 03/13] sidebar - added collapsable menu links --- src/css/bundle.css | 44 ++++++++++++++++++++++++++++++++++ src/css/components/sidebar.css | 29 ++++++++++++++++++++++ src/js/bundle.js | 31 ++++++++++++++++++++++++ src/js/components/sidebar.js | 32 +++++++++++++++++++++++++ 4 files changed, 136 insertions(+) diff --git a/src/css/bundle.css b/src/css/bundle.css index 52051b9..2f1f977 100644 --- a/src/css/bundle.css +++ b/src/css/bundle.css @@ -372,6 +372,21 @@ svg { .inline-block { display: inline-block; } .inline { display: inline; } +/*REMOVE HIGHLIGHT BACKGROUND*/ +.no-selection::selection { + background: transparent; + color: inherit; +} + +.no-selection::-moz-selection { + background: transparent; + color: inherit; +} + +.no-selection { + user-select: none; +} + /* --- flexbox.css --- */ .flex { display: flex; gap: var(--space-4); } @@ -4550,6 +4565,35 @@ html:has(.kroma-navbar) .kroma-sidebar{ background: #ffffff0f; } +.kroma-sidebar li{ + + cursor:pointer; + +} + +.kroma-sidebar li[data-idparent] { + padding-left: 10px; + max-height: 100px; + transition: 100ms; +} + +.kroma-sidebar:not(.collapsed) li.parent a span:before { + content: "\f054"; + margin-right: 10px; + font-family: 'FontAwesome'; + display: inline-block; +} + +.kroma-sidebar li[data-idparent].collapsed { + max-height: 0; + overflow: hidden; +} + +.kroma-sidebar li.parent:not(.collapsed) a span:before { + transform: rotate(90deg); + transform-origin: center; +} + /* --- skeleton.css --- */ /* Base Skeleton Container */ .kroma-skeleton { diff --git a/src/css/components/sidebar.css b/src/css/components/sidebar.css index a2d1084..12ad8d4 100644 --- a/src/css/components/sidebar.css +++ b/src/css/components/sidebar.css @@ -248,4 +248,33 @@ html:has(.kroma-navbar) .kroma-sidebar{ .dark-mode .kroma-sidebar .sdb-menu ul li a:hover:before { background: #ffffff0f; +} + +.kroma-sidebar li{ + + cursor:pointer; + + } + +.kroma-sidebar li[data-idparent] { + padding-left: 10px; + max-height: 100px; + transition: 100ms; +} + +.kroma-sidebar:not(.collapsed) li.parent a span:before { + content: "\f054"; + margin-right: 10px; + font-family: 'FontAwesome'; + display: inline-block; +} + +.kroma-sidebar li[data-idparent].collapsed { + max-height: 0; + overflow: hidden; +} + +.kroma-sidebar li.parent:not(.collapsed) a span:before { + transform: rotate(90deg); + transform-origin: center; } \ No newline at end of file diff --git a/src/js/bundle.js b/src/js/bundle.js index 2339e9d..4b38253 100644 --- a/src/js/bundle.js +++ b/src/js/bundle.js @@ -1592,6 +1592,7 @@ export class KromaSidebar { for(var i = 0; i < this.pages.length; i++){ var li = document.createElement('li'); + li.classList.add('no-selection'); //parent page if(!this.pages[i].isChild){ @@ -1633,6 +1634,36 @@ export class KromaSidebar { menu.appendChild(ul); this.sdb.appendChild(menu); + //remove parent class from childless links + document.querySelectorAll('#'+this.sdb.id+' .sdb-menu ul li.parent').forEach((li)=>{ + var liChildren = document.querySelectorAll('#'+this.sdb.id+' .sdb-menu ul li[data-idparent="'+li.dataset.myid+'"]'); + if(liChildren.length < 1){li.classList.remove('parent');} + else{ + li.classList.add('collapsed'); + li.querySelector('a').removeAttribute('href'); //remove href from collapsable parent + li.addEventListener('click',function(){ + + var sdbId = this.closest('.kroma-sidebar').id; + var liChildren = document.querySelectorAll('#'+sdbId+' .sdb-menu ul li[data-idparent="'+this.dataset.myid+'"]'); + + if(this.classList.contains('collapsed')){ + this.classList.remove('collapsed'); + liChildren.forEach(function(liChild){ liChild.classList.remove('collapsed'); }); + } + else{ + this.classList.add('collapsed'); + liChildren.forEach(function(liChild){ liChild.classList.add('collapsed'); }); + } + + }); + + } + }); + + //collapse all children links + document.querySelectorAll('#'+this.sdb.id+' .sdb-menu ul li[data-idparent]').forEach((li)=>{ + li.classList.add('collapsed'); + }); } diff --git a/src/js/components/sidebar.js b/src/js/components/sidebar.js index 139ae4b..1d925dc 100644 --- a/src/js/components/sidebar.js +++ b/src/js/components/sidebar.js @@ -138,6 +138,8 @@ export class KromaSidebar { for(var i = 0; i < this.pages.length; i++){ var li = document.createElement('li'); + li.querySelector('a').removeAttribute('href'); //remove href from collapsable parent + li.classList.add('no-selection'); //parent page if(!this.pages[i].isChild){ @@ -179,6 +181,36 @@ export class KromaSidebar { menu.appendChild(ul); this.sdb.appendChild(menu); + //remove parent class from childless links + document.querySelectorAll('#'+this.sdb.id+' .sdb-menu ul li.parent').forEach((li)=>{ + var liChildren = document.querySelectorAll('#'+this.sdb.id+' .sdb-menu ul li[data-idparent="'+li.dataset.myid+'"]'); + if(liChildren.length < 1){li.classList.remove('parent');} + else{ + li.classList.add('collapsed'); + li.addEventListener('click',function(){ + + var sdbId = this.closest('.kroma-sidebar').id; + var liChildren = document.querySelectorAll('#'+sdbId+' .sdb-menu ul li[data-idparent="'+this.dataset.myid+'"]'); + + if(this.classList.contains('collapsed')){ + this.classList.remove('collapsed'); + liChildren.forEach(function(liChild){ liChild.classList.remove('collapsed'); }); + } + else{ + this.classList.add('collapsed'); + liChildren.forEach(function(liChild){ liChild.classList.add('collapsed'); }); + } + + }); + + } + }); + + //collapse all children links + document.querySelectorAll('#'+this.sdb.id+' .sdb-menu ul li[data-idparent]').forEach((li)=>{ + li.classList.add('collapsed'); + }); + } From 59a357ce5fc5effbbbd697be7811b3987d4eeeb0 Mon Sep 17 00:00:00 2001 From: Filippo Maria Grilli Date: Wed, 27 Nov 2024 22:43:30 +0100 Subject: [PATCH 04/13] sidebar - fixed extended children still having padding when sidebar collapsed --- src/css/bundle.css | 2 +- src/css/components/sidebar.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/css/bundle.css b/src/css/bundle.css index 2f1f977..1be5b72 100644 --- a/src/css/bundle.css +++ b/src/css/bundle.css @@ -4571,7 +4571,7 @@ html:has(.kroma-navbar) .kroma-sidebar{ } -.kroma-sidebar li[data-idparent] { +.kroma-sidebar:not(.collapsed) li[data-idparent] { padding-left: 10px; max-height: 100px; transition: 100ms; diff --git a/src/css/components/sidebar.css b/src/css/components/sidebar.css index 12ad8d4..58ef631 100644 --- a/src/css/components/sidebar.css +++ b/src/css/components/sidebar.css @@ -256,7 +256,7 @@ html:has(.kroma-navbar) .kroma-sidebar{ } -.kroma-sidebar li[data-idparent] { +.kroma-sidebar:not(.collapsed) li[data-idparent] { padding-left: 10px; max-height: 100px; transition: 100ms; From 9665c703389541f6b75e3148d0c8af0ab2f834d6 Mon Sep 17 00:00:00 2001 From: Filippo Maria Grilli Date: Wed, 27 Nov 2024 22:51:10 +0100 Subject: [PATCH 05/13] navbar - added data-title mode attribute data-title="" on navbar element removes the title if not blank, its value replaces the default site title text --- src/css/bundle.css | 1 + src/css/components/navbar.css | 1 + src/js/bundle.js | 2 +- src/js/components/navbar.js | 2 +- 4 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/css/bundle.css b/src/css/bundle.css index 1be5b72..e42215a 100644 --- a/src/css/bundle.css +++ b/src/css/bundle.css @@ -3720,6 +3720,7 @@ blockquote { .kroma-navbar .nav-logo img { width: auto; height: 100%; + min-width: min-content; } .kroma-navbar .nav-logo { diff --git a/src/css/components/navbar.css b/src/css/components/navbar.css index fb3d993..f6862a5 100644 --- a/src/css/components/navbar.css +++ b/src/css/components/navbar.css @@ -5,6 +5,7 @@ .kroma-navbar .nav-logo img { width: auto; height: 100%; + min-width: min-content; } .kroma-navbar .nav-logo { diff --git a/src/js/bundle.js b/src/js/bundle.js index 4b38253..58124ba 100644 --- a/src/js/bundle.js +++ b/src/js/bundle.js @@ -1274,7 +1274,7 @@ export class KromaNavbar { this.hasLogo = (this.nav.querySelector('img') && this.nav.querySelector('img').src) ? true : false; this.logoPath = this.hasLogo ? this.nav.querySelector('img').src : undefined; this.siteTitle = document.querySelector('head title'); - this.siteTitle = siteTitle ?? (this.siteTitle.innerText ?? ''); + this.siteTitle = ( this.nav.dataset.title ?? title ) ?? (this.siteTitle.innerText ?? ''); //get menu items diff --git a/src/js/components/navbar.js b/src/js/components/navbar.js index 9029f46..4d228e5 100644 --- a/src/js/components/navbar.js +++ b/src/js/components/navbar.js @@ -34,7 +34,7 @@ export class KromaNavbar { this.hasLogo = (this.nav.querySelector('img') && this.nav.querySelector('img').src) ? true : false; this.logoPath = this.hasLogo ? this.nav.querySelector('img').src : undefined; this.siteTitle = document.querySelector('head title'); - this.siteTitle = siteTitle ?? (this.siteTitle.innerText ?? ''); + this.siteTitle = ( this.nav.dataset.title ?? title ) ?? (this.siteTitle.innerText ?? ''); //get menu items From da71e977120bf8a7fcbf8667ef405d712a76310e Mon Sep 17 00:00:00 2001 From: Filippo Maria Grilli Date: Fri, 29 Nov 2024 12:07:10 +0100 Subject: [PATCH 06/13] navbar,sidebar - various --- src/css/bundle.css | 2 +- src/css/components/sidebar.css | 2 +- src/js/bundle.js | 2 +- src/js/components/navbar.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/css/bundle.css b/src/css/bundle.css index e42215a..61d47d1 100644 --- a/src/css/bundle.css +++ b/src/css/bundle.css @@ -4315,7 +4315,7 @@ nav.kroma-navbar:before { /* --- sidebar.css --- */ :root { - --sdb-size-base: calc(clamp(300px,30vw,350px) * 1.2); + --sdb-size-base: calc(clamp(300px,30vw,350px) * 1.1); } /*TEMPORARY FIX FOR SIDEBAR SPACING*/ diff --git a/src/css/components/sidebar.css b/src/css/components/sidebar.css index 58ef631..f5af1c1 100644 --- a/src/css/components/sidebar.css +++ b/src/css/components/sidebar.css @@ -1,5 +1,5 @@ :root { - --sdb-size-base: calc(clamp(300px,30vw,350px) * 1.2); + --sdb-size-base: calc(clamp(300px,30vw,350px) * 1.1); } /*TEMPORARY FIX FOR SIDEBAR SPACING*/ diff --git a/src/js/bundle.js b/src/js/bundle.js index 58124ba..c136cec 100644 --- a/src/js/bundle.js +++ b/src/js/bundle.js @@ -1274,7 +1274,7 @@ export class KromaNavbar { this.hasLogo = (this.nav.querySelector('img') && this.nav.querySelector('img').src) ? true : false; this.logoPath = this.hasLogo ? this.nav.querySelector('img').src : undefined; this.siteTitle = document.querySelector('head title'); - this.siteTitle = ( this.nav.dataset.title ?? title ) ?? (this.siteTitle.innerText ?? ''); + this.siteTitle = ( this.nav.dataset.title ?? siteTitle ) ?? (this.siteTitle.innerText ?? ''); //get menu items diff --git a/src/js/components/navbar.js b/src/js/components/navbar.js index 4d228e5..f8300f0 100644 --- a/src/js/components/navbar.js +++ b/src/js/components/navbar.js @@ -34,7 +34,7 @@ export class KromaNavbar { this.hasLogo = (this.nav.querySelector('img') && this.nav.querySelector('img').src) ? true : false; this.logoPath = this.hasLogo ? this.nav.querySelector('img').src : undefined; this.siteTitle = document.querySelector('head title'); - this.siteTitle = ( this.nav.dataset.title ?? title ) ?? (this.siteTitle.innerText ?? ''); + this.siteTitle = ( this.nav.dataset.title ?? siteTitle ) ?? (this.siteTitle.innerText ?? ''); //get menu items From 1ac6e486a046465aa949630ab8e53e2ed5aafda1 Mon Sep 17 00:00:00 2001 From: Filippo Maria Grilli Date: Fri, 29 Nov 2024 12:26:49 +0100 Subject: [PATCH 07/13] sidebar - added dataset for variant colors --- src/css/bundle.css | 28 ++++++++++++++++++++++++++++ src/css/components/sidebar.css | 28 ++++++++++++++++++++++++++++ 2 files changed, 56 insertions(+) diff --git a/src/css/bundle.css b/src/css/bundle.css index 61d47d1..2c8bc69 100644 --- a/src/css/bundle.css +++ b/src/css/bundle.css @@ -4595,6 +4595,34 @@ html:has(.kroma-navbar) .kroma-sidebar{ transform-origin: center; } + +/*variants*/ + +.kroma-sidebar[data-variant]:before { + background: var(--variant-bg); + border-color: var(--variant-border); +} + +.kroma-sidebar[data-variant] .sdb-logo:after{ + background: var(--variant-border); +} + +.kroma-sidebar[data-variant] .sdb-logo span, +.kroma-sidebar[data-variant] .sdb-menu ul li i, +.kroma-sidebar[data-variant] .sdb-menu ul li span, +.kroma-sidebar[data-variant] .sdb-arrow{ + color: var(--variant-text); +} + +.kroma-sidebar[data-variant] .sdb-menu ul li a:hover:before{ + background: var(--variant-hover-bg); +} + +.kroma-sidebar[data-variant] .sdb-menu ul li a:hover > i, +.kroma-sidebar[data-variant] .sdb-menu ul li a:hover > span { + color: var(--variant-hover); +} + /* --- skeleton.css --- */ /* Base Skeleton Container */ .kroma-skeleton { diff --git a/src/css/components/sidebar.css b/src/css/components/sidebar.css index f5af1c1..529d48b 100644 --- a/src/css/components/sidebar.css +++ b/src/css/components/sidebar.css @@ -277,4 +277,32 @@ html:has(.kroma-navbar) .kroma-sidebar{ .kroma-sidebar li.parent:not(.collapsed) a span:before { transform: rotate(90deg); transform-origin: center; +} + + +/*variants*/ + +.kroma-sidebar[data-variant]:before { + background: var(--variant-bg); + border-color: var(--variant-border); +} + +.kroma-sidebar[data-variant] .sdb-logo:after{ + background: var(--variant-border); +} + +.kroma-sidebar[data-variant] .sdb-logo span, +.kroma-sidebar[data-variant] .sdb-menu ul li i, +.kroma-sidebar[data-variant] .sdb-menu ul li span, +.kroma-sidebar[data-variant] .sdb-arrow{ + color: var(--variant-text); +} + +.kroma-sidebar[data-variant] .sdb-menu ul li a:hover:before{ + background: var(--variant-hover-bg); +} + +.kroma-sidebar[data-variant] .sdb-menu ul li a:hover > i, +.kroma-sidebar[data-variant] .sdb-menu ul li a:hover > span { + color: var(--variant-hover); } \ No newline at end of file From 5af93673d299da6e67e382f245d968601b00399c Mon Sep 17 00:00:00 2001 From: Filippo Maria Grilli Date: Fri, 29 Nov 2024 13:51:24 +0100 Subject: [PATCH 08/13] navbar - auto dispose li elements based on fitting size --- src/css/bundle.css | 161 ++++++++++++++++++++-------------- src/css/components/navbar.css | 42 +++++++-- src/js/bundle.js | 24 +++++ src/js/components/navbar.js | 24 +++++ 4 files changed, 178 insertions(+), 73 deletions(-) diff --git a/src/css/bundle.css b/src/css/bundle.css index 2c8bc69..ce3de2e 100644 --- a/src/css/bundle.css +++ b/src/css/bundle.css @@ -3724,34 +3724,36 @@ blockquote { } .kroma-navbar .nav-logo { - height: calc(var(--nav-size-base) / 1.5 ); - width: min-content; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-items: center; - gap: calc(var(--nav-size-base) / 6); + height: calc(var(--nav-size-base) / 1.5 ); + width: max-content; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + gap: calc(var(--nav-size-base) / 6); } nav.kroma-navbar { - width: 100%; - height: var(--nav-size-base); - position: sticky; - top: 0; - left: 0; - z-index: 3; - display: flex; - flex-direction: row; - align-content: center; - align-items: center; - flex-wrap: nowrap; - backdrop-filter: blur(4px); - -webkit-backdrop-filter: blur(4px); - justify-content: space-between; - box-sizing: border-box; - padding: calc(var(--nav-size-base) / 6); + width: 100%; + height: var(--nav-size-base); + position: sticky; + top: 0; + left: 0; + z-index: 3; + display: flex; + flex-direction: row; + align-content: center; + align-items: center; + flex-wrap: nowrap; + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + justify-content: space-between; + box-sizing: border-box; + padding: calc(var(--nav-size-base) / 6); + gap: calc(var(--nav-size-base) / 6); } + nav.kroma-navbar:before { content: ""; display: block; @@ -3794,72 +3796,99 @@ nav.kroma-navbar:before { gap: 0; } +nav.kroma-navbar:not(.toggled-menu) .nav-toggle { + display: none; +} + .kroma-navbar .nav-toggle.show #nav-line-3 { - opacity: 0; - /* top: 20px; */ - height: 0; + opacity: 0; + /* top: 20px; */ + height: 0; } .kroma-navbar .nav-toggle.show #nav-line-1 { - transform: translate(0px, 50%) rotate(45deg); - transform-origin: center; + transform: translate(0px, 50%) rotate(45deg); + transform-origin: center; } .kroma-navbar .nav-toggle.show #nav-line-2 { - /* background: var(--neutral-700); */ - transform: translate(0px, -50%) rotate(-45deg); - transform-origin: center; + /* background: var(--neutral-700); */ + transform: translate(0px, -50%) rotate(-45deg); + transform-origin: center; } -.kroma-navbar .nav-menu { - display: flex; - position: absolute; - top: 100%; - right: 0; - margin: calc(var(--nav-size-base) / 3); - background: var(--neutral-50); - border-radius: 10px; - box-shadow: var(--shadow-sm); - align-items: center; - justify-content: center; - /* min-width: 170px; */ - max-height: 0; - opacity: 0; - overflow: hidden; - transition: opacity 100ms, max-height 2s 0ms; +.kroma-navbar.toggled-menu .nav-menu { + display: flex; + position: absolute; + top: 100%; + right: 0; + margin: calc(var(--nav-size-base) / 3); + background: var(--neutral-50); + border-radius: 10px; + box-shadow: var(--shadow-sm); + align-items: center; + justify-content: center; + /* min-width: 170px; */ + max-height: 0; + opacity: 0; + overflow: hidden; + transition: opacity 100ms, max-height 2s 0ms; } -.kroma-navbar .nav-menu ul li a { - text-decoration: none; - list-style: none; - padding: calc(var(--nav-size-base) / 6) calc(var(--nav-size-base) / 1.5); - display: block; +.kroma-navbar.toggled-menu .nav-menu ul li a { + text-decoration: none; + list-style: none; + padding: calc(var(--nav-size-base) / 6) calc(var(--nav-size-base) / 1.5); + display: block; } -.kroma-navbar .nav-menu ul { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; +.kroma-navbar.toggled-menu .nav-menu ul { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; } .kroma-navbar .nav-toggle.show ~ .nav-menu { - max-height: 1000px; - opacity: 1; - transition: max-height 0s 0ms, opacity 100ms; + max-height: 1000px; + opacity: 1; + transition: max-height 0s 0ms, opacity 100ms; } -.kroma-navbar .nav-menu ul li:first-child a { - padding-top: calc(var(--nav-size-base) / 3); +.kroma-navbar.toggled-menu .nav-menu ul li:first-child a { + padding-top: calc(var(--nav-size-base) / 3); } -.kroma-navbar .nav-menu ul li:last-child a { - padding-bottom: calc(var(--nav-size-base) / 3); +.kroma-navbar.toggled-menu .nav-menu ul li:last-child a { + padding-bottom: calc(var(--nav-size-base) / 3); } -.kroma-navbar .nav-menu ul li a.nav-current,.nav-menu ul li:hover a { - background: var(--neutral-100); +.kroma-navbar.toggled-menu .nav-menu ul li a.nav-current,.nav-menu ul li:hover a { + background: var(--neutral-100); +} + + +.kroma-navbar:not(.toggled-menu) .nav-menu { + width: 100%; + display: flex; + justify-content: flex-end; + align-items: center; +} + +.kroma-navbar:not(.toggled-menu) .nav-menu ul { + display: flex; + flex-direction: row; + list-style: none; + gap: calc(var(--nav-size-base) / 6); +} + +.kroma-navbar:not(.toggled-menu) .nav-menu ul li a { + text-decoration: none; +} + +.kroma-navbar:not(.toggled-menu) .nav-menu ul li a:hover { + text-decoration: underline; } /* --- pagination.css --- */ diff --git a/src/css/components/navbar.css b/src/css/components/navbar.css index f6862a5..719a79e 100644 --- a/src/css/components/navbar.css +++ b/src/css/components/navbar.css @@ -10,7 +10,7 @@ .kroma-navbar .nav-logo { height: calc(var(--nav-size-base) / 1.5 ); - width: min-content; + width: max-content; display: flex; flex-direction: row; flex-wrap: nowrap; @@ -35,6 +35,7 @@ nav.kroma-navbar { justify-content: space-between; box-sizing: border-box; padding: calc(var(--nav-size-base) / 6); + gap: calc(var(--nav-size-base) / 6); } nav.kroma-navbar:before { @@ -79,6 +80,10 @@ nav.kroma-navbar:before { gap: 0; } +nav.kroma-navbar:not(.toggled-menu) .nav-toggle { + display: none; +} + .kroma-navbar .nav-toggle.show #nav-line-3 { opacity: 0; /* top: 20px; */ @@ -96,7 +101,7 @@ nav.kroma-navbar:before { transform-origin: center; } -.kroma-navbar .nav-menu { +.kroma-navbar.toggled-menu .nav-menu { display: flex; position: absolute; top: 100%; @@ -114,7 +119,7 @@ nav.kroma-navbar:before { transition: opacity 100ms, max-height 2s 0ms; } -.kroma-navbar .nav-menu ul li a { +.kroma-navbar.toggled-menu .nav-menu ul li a { text-decoration: none; list-style: none; padding: calc(var(--nav-size-base) / 6) calc(var(--nav-size-base) / 1.5); @@ -122,7 +127,7 @@ nav.kroma-navbar:before { } -.kroma-navbar .nav-menu ul { +.kroma-navbar.toggled-menu .nav-menu ul { width: 100%; height: 100%; display: flex; @@ -135,14 +140,37 @@ nav.kroma-navbar:before { transition: max-height 0s 0ms, opacity 100ms; } -.kroma-navbar .nav-menu ul li:first-child a { +.kroma-navbar.toggled-menu .nav-menu ul li:first-child a { padding-top: calc(var(--nav-size-base) / 3); } -.kroma-navbar .nav-menu ul li:last-child a { +.kroma-navbar.toggled-menu .nav-menu ul li:last-child a { padding-bottom: calc(var(--nav-size-base) / 3); } -.kroma-navbar .nav-menu ul li a.nav-current,.nav-menu ul li:hover a { +.kroma-navbar.toggled-menu .nav-menu ul li a.nav-current,.nav-menu ul li:hover a { background: var(--neutral-100); +} + + +.kroma-navbar:not(.toggled-menu) .nav-menu { + width: 100%; + display: flex; + justify-content: flex-end; + align-items: center; +} + +.kroma-navbar:not(.toggled-menu) .nav-menu ul { + display: flex; + flex-direction: row; + list-style: none; + gap: calc(var(--nav-size-base) / 6); +} + +.kroma-navbar:not(.toggled-menu) .nav-menu ul li a { + text-decoration: none; +} + +.kroma-navbar:not(.toggled-menu) .nav-menu ul li a:hover { + text-decoration: underline; } \ No newline at end of file diff --git a/src/js/bundle.js b/src/js/bundle.js index c136cec..4220835 100644 --- a/src/js/bundle.js +++ b/src/js/bundle.js @@ -1276,6 +1276,9 @@ export class KromaNavbar { this.siteTitle = document.querySelector('head title'); this.siteTitle = ( this.nav.dataset.title ?? siteTitle ) ?? (this.siteTitle.innerText ?? ''); + //menu sizing for toggle + this.menuExtWidth = undefined; + this.menuIntWidth = undefined; //get menu items this.hasMenu = this.nav.querySelector('a') ? true : false; @@ -1301,12 +1304,20 @@ export class KromaNavbar { this.addToggle(); this.addMenu(); + this.autoToggle(); + //auto add/remove toggle for menu width + window.addEventListener('resize', () => { + clearTimeout(this.resizeTimeout); + this.resizeTimeout = setTimeout(() => { this.autoToggle(); }, 200); + }); } + + } addLogo(){ @@ -1380,6 +1391,19 @@ export class KromaNavbar { } + autoToggle(){ + + this.nav.classList.remove('toggled-menu'); //always use full width navbar for calculations + var menu = document.querySelector('#'+this.nav.id+' .nav-menu'); + if(!menu){console.error('menu container not found'); return false;} + var ul = menu.querySelector(' ul'); + if(!ul){console.error('menu ul not found'); return false;} + this.menuExtWidth = parseInt(getComputedStyle(menu).width); + this.menuIntWidth = parseInt(getComputedStyle(ul).width); + if(!this.menuExtWidth || !this.menuIntWidth){console.error('menu size cannot be determined'); return false;} + if(this.menuExtWidth <= this.menuIntWidth){this.nav.classList.add('toggled-menu');} + + } } diff --git a/src/js/components/navbar.js b/src/js/components/navbar.js index f8300f0..ccdd993 100644 --- a/src/js/components/navbar.js +++ b/src/js/components/navbar.js @@ -36,6 +36,9 @@ export class KromaNavbar { this.siteTitle = document.querySelector('head title'); this.siteTitle = ( this.nav.dataset.title ?? siteTitle ) ?? (this.siteTitle.innerText ?? ''); + //menu sizing for toggle + this.menuExtWidth = undefined; + this.menuIntWidth = undefined; //get menu items this.hasMenu = this.nav.querySelector('a') ? true : false; @@ -61,12 +64,20 @@ export class KromaNavbar { this.addToggle(); this.addMenu(); + this.autoToggle(); + //auto add/remove toggle for menu width + window.addEventListener('resize', () => { + clearTimeout(this.resizeTimeout); + this.resizeTimeout = setTimeout(() => { this.autoToggle(); }, 200); + }); } + + } addLogo(){ @@ -140,6 +151,19 @@ export class KromaNavbar { } + autoToggle(){ + + this.nav.classList.remove('toggled-menu'); //always use full width navbar for calculations + var menu = document.querySelector('#'+this.nav.id+' .nav-menu'); + if(!menu){console.error('menu container not found'); return false;} + var ul = menu.querySelector(' ul'); + if(!ul){console.error('menu ul not found'); return false;} + this.menuExtWidth = parseInt(getComputedStyle(menu).width); + this.menuIntWidth = parseInt(getComputedStyle(ul).width); + if(!this.menuExtWidth || !this.menuIntWidth){console.error('menu size cannot be determined'); return false;} + if(this.menuExtWidth <= this.menuIntWidth){this.nav.classList.add('toggled-menu');} + + } } From 95971da509b1442e845625d6055d6527f5042663 Mon Sep 17 00:00:00 2001 From: Filippo Maria Grilli Date: Fri, 29 Nov 2024 13:54:51 +0100 Subject: [PATCH 09/13] navbar - always show toggle on mobile --- src/js/bundle.js | 6 ++++-- src/js/components/navbar.js | 5 ++++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/js/bundle.js b/src/js/bundle.js index 4220835..20f3ff5 100644 --- a/src/js/bundle.js +++ b/src/js/bundle.js @@ -1393,6 +1393,7 @@ export class KromaNavbar { autoToggle(){ + if(window.innerWidth <= 500){this.nav.classList.add('toggled-menu'); return true;} //always add toggle on mobile this.nav.classList.remove('toggled-menu'); //always use full width navbar for calculations var menu = document.querySelector('#'+this.nav.id+' .nav-menu'); if(!menu){console.error('menu container not found'); return false;} @@ -1401,10 +1402,11 @@ export class KromaNavbar { this.menuExtWidth = parseInt(getComputedStyle(menu).width); this.menuIntWidth = parseInt(getComputedStyle(ul).width); if(!this.menuExtWidth || !this.menuIntWidth){console.error('menu size cannot be determined'); return false;} - if(this.menuExtWidth <= this.menuIntWidth){this.nav.classList.add('toggled-menu');} + if(this.menuExtWidth <= this.menuIntWidth){this.nav.classList.add('toggled-menu'); return true;} + + return false; } - } diff --git a/src/js/components/navbar.js b/src/js/components/navbar.js index ccdd993..e672bdb 100644 --- a/src/js/components/navbar.js +++ b/src/js/components/navbar.js @@ -153,6 +153,7 @@ export class KromaNavbar { autoToggle(){ + if(window.innerWidth <= 500){this.nav.classList.add('toggled-menu'); return true;} //always add toggle on mobile this.nav.classList.remove('toggled-menu'); //always use full width navbar for calculations var menu = document.querySelector('#'+this.nav.id+' .nav-menu'); if(!menu){console.error('menu container not found'); return false;} @@ -161,7 +162,9 @@ export class KromaNavbar { this.menuExtWidth = parseInt(getComputedStyle(menu).width); this.menuIntWidth = parseInt(getComputedStyle(ul).width); if(!this.menuExtWidth || !this.menuIntWidth){console.error('menu size cannot be determined'); return false;} - if(this.menuExtWidth <= this.menuIntWidth){this.nav.classList.add('toggled-menu');} + if(this.menuExtWidth <= this.menuIntWidth){this.nav.classList.add('toggled-menu'); return true;} + + return false; } From 225263935e1c5938473a25a177550da157693174 Mon Sep 17 00:00:00 2001 From: Filippo Maria Grilli Date: Fri, 29 Nov 2024 14:38:07 +0100 Subject: [PATCH 10/13] navbar - added avatar component please see already existing avatar component documentation --- demo.html | 6 ++ src/css/bundle.css | 6 ++ src/css/components/navbar.css | 6 ++ src/js/bundle.js | 136 +++++++++++++++++++++++++--------- src/js/components/navbar.js | 135 ++++++++++++++++++++++++--------- 5 files changed, 215 insertions(+), 74 deletions(-) diff --git a/demo.html b/demo.html index 577b35c..590878b 100644 --- a/demo.html +++ b/demo.html @@ -22,6 +22,12 @@ About Contacts + +
+ + User Avatar +
+ diff --git a/src/css/bundle.css b/src/css/bundle.css index ce3de2e..7a45e8f 100644 --- a/src/css/bundle.css +++ b/src/css/bundle.css @@ -3731,6 +3731,7 @@ blockquote { flex-wrap: nowrap; align-items: center; gap: calc(var(--nav-size-base) / 6); + flex: auto; } nav.kroma-navbar { @@ -3891,6 +3892,11 @@ nav.kroma-navbar:not(.toggled-menu) .nav-toggle { text-decoration: underline; } +.kroma-navbar .kroma-avatar { + max-height: calc(var(--nav-size-base) / 1.5); + max-width: calc(var(--nav-size-base) / 1.5); +} + /* --- pagination.css --- */ /* Pagination Container */ .kroma-pagination { diff --git a/src/css/components/navbar.css b/src/css/components/navbar.css index 719a79e..bc17b51 100644 --- a/src/css/components/navbar.css +++ b/src/css/components/navbar.css @@ -16,6 +16,7 @@ flex-wrap: nowrap; align-items: center; gap: calc(var(--nav-size-base) / 6); + flex: auto; } nav.kroma-navbar { @@ -173,4 +174,9 @@ nav.kroma-navbar:not(.toggled-menu) .nav-toggle { .kroma-navbar:not(.toggled-menu) .nav-menu ul li a:hover { text-decoration: underline; +} + +.kroma-navbar .kroma-avatar { + max-height: calc(var(--nav-size-base) / 1.5); + max-width: calc(var(--nav-size-base) / 1.5); } \ No newline at end of file diff --git a/src/js/bundle.js b/src/js/bundle.js index 20f3ff5..74d055e 100644 --- a/src/js/bundle.js +++ b/src/js/bundle.js @@ -1257,6 +1257,12 @@ export class KromaNavbar { About Contacts + +
+ + User Avatar +
+ */ @@ -1281,9 +1287,9 @@ export class KromaNavbar { this.menuIntWidth = undefined; //get menu items - this.hasMenu = this.nav.querySelector('a') ? true : false; + this.hasMenu = document.querySelector('#'+this.nav.id+' > a') ? true : false; this.pages = []; - this.nav.querySelectorAll('a').forEach((a)=>{ + this.nav.querySelectorAll('#'+this.nav.id+' > a').forEach((a)=>{ var page = {}; page.href = a.href ?? ''; @@ -1293,6 +1299,10 @@ export class KromaNavbar { }); + //get avatar element + this.hasAvatar = (this.nav.querySelectorAll('.kroma-avatar')).length > 0 ? true : false; + this.avatar = this.hasAvatar ? this.nav.querySelectorAll('.kroma-avatar')[0].cloneNode(true) : undefined; + //remove anything else in navbar container this.nav.innerHTML = ""; @@ -1309,11 +1319,19 @@ export class KromaNavbar { //auto add/remove toggle for menu width window.addEventListener('resize', () => { clearTimeout(this.resizeTimeout); - this.resizeTimeout = setTimeout(() => { this.autoToggle(); }, 200); + this.resizeTimeout = setTimeout(() => { this.autoToggle(); this.addUpdAvatar(); }, 200); }); } + + //add avatar + this.addUpdAvatar(); + + + + + @@ -1344,66 +1362,110 @@ export class KromaNavbar { } - addToggle(){ - var toggle = document.createElement('div'); - + if(this.hasMenu){ - toggle.classList.add('nav-toggle'); - toggle.addEventListener('click',function(){if(this.classList.contains('show')){this.classList.remove('show');}else{this.classList.add('show');}}); + var toggle = document.createElement('div'); + + + toggle.classList.add('nav-toggle'); + toggle.addEventListener('click',function(){if(this.classList.contains('show')){this.classList.remove('show');}else{this.classList.add('show');}}); - for(var i = 1; i <= 3; i++){ + for(var i = 1; i <= 3; i++){ - var line = document.createElement('span'); - line.id = ('nav-line-'+i); - line.classList.add('nav-line'); - toggle.appendChild(line); + var line = document.createElement('span'); + line.id = ('nav-line-'+i); + line.classList.add('nav-line'); + toggle.appendChild(line); + } + + this.nav.appendChild(toggle); + + return true; + } - this.nav.appendChild(toggle); + return false; } addMenu(){ - var menu = document.createElement('div'); - menu.classList.add('nav-menu'); - var ul = document.createElement('ul'); - - for(var i = 0; i < this.pages.length; i++){ + if(this.hasMenu){ - var li = document.createElement('li'); - var a = document.createElement('a'); - if(this.pages[i].href.length > 0){ a.href = this.pages[i].href; } - a.innerText = this.pages[i].text; - li.appendChild(a); - ul.appendChild(li); + var menu = document.createElement('div'); + menu.classList.add('nav-menu'); + var ul = document.createElement('ul'); + + for(var i = 0; i < this.pages.length; i++){ + + var li = document.createElement('li'); + var a = document.createElement('a'); + if(this.pages[i].href.length > 0){ a.href = this.pages[i].href; } + a.innerText = this.pages[i].text; + li.appendChild(a); + ul.appendChild(li); + + } + + menu.appendChild(ul); + this.nav.appendChild(menu); + + return true; } - menu.appendChild(ul); - this.nav.appendChild(menu); + return false; } autoToggle(){ - if(window.innerWidth <= 500){this.nav.classList.add('toggled-menu'); return true;} //always add toggle on mobile - this.nav.classList.remove('toggled-menu'); //always use full width navbar for calculations - var menu = document.querySelector('#'+this.nav.id+' .nav-menu'); - if(!menu){console.error('menu container not found'); return false;} - var ul = menu.querySelector(' ul'); - if(!ul){console.error('menu ul not found'); return false;} - this.menuExtWidth = parseInt(getComputedStyle(menu).width); - this.menuIntWidth = parseInt(getComputedStyle(ul).width); - if(!this.menuExtWidth || !this.menuIntWidth){console.error('menu size cannot be determined'); return false;} - if(this.menuExtWidth <= this.menuIntWidth){this.nav.classList.add('toggled-menu'); return true;} + if(this.hasMenu){ + + if(window.innerWidth <= 500){this.nav.classList.add('toggled-menu'); return true;} //always add toggle on mobile + this.nav.classList.remove('toggled-menu'); //always use full width navbar for calculations + var menu = document.querySelector('#'+this.nav.id+' .nav-menu'); + if(!menu){console.error('menu container not found'); return false;} + var ul = menu.querySelector(' ul'); + if(!ul){console.error('menu ul not found'); return false;} + this.menuExtWidth = parseInt(getComputedStyle(menu).width); + this.menuIntWidth = parseInt(getComputedStyle(ul).width); + if(!this.menuExtWidth || !this.menuIntWidth){console.error('menu size cannot be determined'); return false;} + if(this.menuExtWidth <= this.menuIntWidth){this.nav.classList.add('toggled-menu'); return true;} + } + + return false; + + } + + addUpdAvatar(){ + + if(this.hasAvatar){ + + //remove previous avatar + var prevAvatar = this.nav.querySelector('.kroma-avatar'); + if(prevAvatar){prevAvatar.remove();} + + //add avatar before toggle + if(this.nav.classList.contains('toggled-menu')){ + + this.nav.insertBefore(this.avatar, this.nav.querySelector('.nav-toggle')); + return true; + + } + + //add avatar at the end + this.nav.appendChild(this.avatar); + + } + return false; } diff --git a/src/js/components/navbar.js b/src/js/components/navbar.js index e672bdb..1e53d9e 100644 --- a/src/js/components/navbar.js +++ b/src/js/components/navbar.js @@ -17,6 +17,12 @@ export class KromaNavbar { About Contacts + +
+ + User Avatar +
+ */ @@ -41,9 +47,9 @@ export class KromaNavbar { this.menuIntWidth = undefined; //get menu items - this.hasMenu = this.nav.querySelector('a') ? true : false; + this.hasMenu = document.querySelector('#'+this.nav.id+' > a') ? true : false; this.pages = []; - this.nav.querySelectorAll('a').forEach((a)=>{ + this.nav.querySelectorAll('#'+this.nav.id+' > a').forEach((a)=>{ var page = {}; page.href = a.href ?? ''; @@ -53,6 +59,10 @@ export class KromaNavbar { }); + //get avatar element + this.hasAvatar = (this.nav.querySelectorAll('.kroma-avatar')).length > 0 ? true : false; + this.avatar = this.hasAvatar ? this.nav.querySelectorAll('.kroma-avatar')[0].cloneNode(true) : undefined; + //remove anything else in navbar container this.nav.innerHTML = ""; @@ -69,11 +79,19 @@ export class KromaNavbar { //auto add/remove toggle for menu width window.addEventListener('resize', () => { clearTimeout(this.resizeTimeout); - this.resizeTimeout = setTimeout(() => { this.autoToggle(); }, 200); + this.resizeTimeout = setTimeout(() => { this.autoToggle(); this.addUpdAvatar(); }, 200); }); } + + //add avatar + this.addUpdAvatar(); + + + + + @@ -104,70 +122,113 @@ export class KromaNavbar { } - addToggle(){ - var toggle = document.createElement('div'); - + if(this.hasMenu){ - toggle.classList.add('nav-toggle'); - toggle.addEventListener('click',function(){if(this.classList.contains('show')){this.classList.remove('show');}else{this.classList.add('show');}}); + var toggle = document.createElement('div'); + + + toggle.classList.add('nav-toggle'); + toggle.addEventListener('click',function(){if(this.classList.contains('show')){this.classList.remove('show');}else{this.classList.add('show');}}); + + for(var i = 1; i <= 3; i++){ - for(var i = 1; i <= 3; i++){ + var line = document.createElement('span'); + line.id = ('nav-line-'+i); + line.classList.add('nav-line'); + toggle.appendChild(line); - var line = document.createElement('span'); - line.id = ('nav-line-'+i); - line.classList.add('nav-line'); - toggle.appendChild(line); + } + this.nav.appendChild(toggle); + + return true; + } - this.nav.appendChild(toggle); + return false; } addMenu(){ - var menu = document.createElement('div'); - menu.classList.add('nav-menu'); - var ul = document.createElement('ul'); - - for(var i = 0; i < this.pages.length; i++){ + if(this.hasMenu){ + + var menu = document.createElement('div'); + menu.classList.add('nav-menu'); + var ul = document.createElement('ul'); + + for(var i = 0; i < this.pages.length; i++){ - var li = document.createElement('li'); - var a = document.createElement('a'); - if(this.pages[i].href.length > 0){ a.href = this.pages[i].href; } - a.innerText = this.pages[i].text; - li.appendChild(a); - ul.appendChild(li); + var li = document.createElement('li'); + var a = document.createElement('a'); + if(this.pages[i].href.length > 0){ a.href = this.pages[i].href; } + a.innerText = this.pages[i].text; + li.appendChild(a); + ul.appendChild(li); + + } + + menu.appendChild(ul); + this.nav.appendChild(menu); + + return true; } - menu.appendChild(ul); - this.nav.appendChild(menu); + return false; } autoToggle(){ - if(window.innerWidth <= 500){this.nav.classList.add('toggled-menu'); return true;} //always add toggle on mobile - this.nav.classList.remove('toggled-menu'); //always use full width navbar for calculations - var menu = document.querySelector('#'+this.nav.id+' .nav-menu'); - if(!menu){console.error('menu container not found'); return false;} - var ul = menu.querySelector(' ul'); - if(!ul){console.error('menu ul not found'); return false;} - this.menuExtWidth = parseInt(getComputedStyle(menu).width); - this.menuIntWidth = parseInt(getComputedStyle(ul).width); - if(!this.menuExtWidth || !this.menuIntWidth){console.error('menu size cannot be determined'); return false;} - if(this.menuExtWidth <= this.menuIntWidth){this.nav.classList.add('toggled-menu'); return true;} + if(this.hasMenu){ + + if(window.innerWidth <= 500){this.nav.classList.add('toggled-menu'); return true;} //always add toggle on mobile + this.nav.classList.remove('toggled-menu'); //always use full width navbar for calculations + var menu = document.querySelector('#'+this.nav.id+' .nav-menu'); + if(!menu){console.error('menu container not found'); return false;} + var ul = menu.querySelector(' ul'); + if(!ul){console.error('menu ul not found'); return false;} + this.menuExtWidth = parseInt(getComputedStyle(menu).width); + this.menuIntWidth = parseInt(getComputedStyle(ul).width); + if(!this.menuExtWidth || !this.menuIntWidth){console.error('menu size cannot be determined'); return false;} + if(this.menuExtWidth <= this.menuIntWidth){this.nav.classList.add('toggled-menu'); return true;} + } + return false; } + addUpdAvatar(){ + + if(this.hasAvatar){ + + //remove previous avatar + var prevAvatar = this.nav.querySelector('.kroma-avatar'); + if(prevAvatar){prevAvatar.remove();} + + //add avatar before toggle + if(this.nav.classList.contains('toggled-menu')){ + + this.nav.insertBefore(this.avatar, this.nav.querySelector('.nav-toggle')); + return true; + + } + + //add avatar at the end + this.nav.appendChild(this.avatar); + + } + + return false; + + } } From 1e4c785ac17025072df42d4b6bec4eb6cf0c24f8 Mon Sep 17 00:00:00 2001 From: Filippo Maria Grilli Date: Fri, 29 Nov 2024 14:59:44 +0100 Subject: [PATCH 11/13] navbar - added variants styling --- src/css/bundle.css | 40 +++++++- src/css/components/navbar.css | 172 ++++++++++++++++++---------------- 2 files changed, 128 insertions(+), 84 deletions(-) diff --git a/src/css/bundle.css b/src/css/bundle.css index 7a45e8f..5cf4c20 100644 --- a/src/css/bundle.css +++ b/src/css/bundle.css @@ -3865,10 +3865,46 @@ nav.kroma-navbar:not(.toggled-menu) .nav-toggle { padding-bottom: calc(var(--nav-size-base) / 3); } -.kroma-navbar.toggled-menu .nav-menu ul li a.nav-current,.nav-menu ul li:hover a { - background: var(--neutral-100); +.kroma-navbar.toggled-menu .nav-menu ul li:hover +,.kroma-navbar.toggled-menu .nav-menu ul li.nav-current{ +background: var(--neutral-200); } +.kroma-navbar.toggled-menu .nav-menu ul li:hover a +,.kroma-navbar.toggled-menu .nav-menu ul li.nav-current a{ +color: var(--neutral-800); +} + +.nav-menu ul li:hover a { + background: transparent; +} + +nav.kroma-navbar[data-variant]:before { + background: var(--variant-bg); + border-bottom-color: var(--variant-border); +} + +nav.kroma-navbar[data-variant] .nav-logo span, nav.kroma-navbar[data-variant] .nav-menu ul li a { + color: var(--variant-text); +} + + +.kroma-navbar[data-variant] span.nav-line { + background: var(--variant-text); +} + +.kroma-navbar[data-variant].toggled-menu .nav-menu ul li:hover +,.kroma-navbar[data-variant].toggled-menu .nav-menu ul li.nav-current{ +background: var(--variant-hover-bg); +} + +.kroma-navbar[data-variant].toggled-menu .nav-menu ul li:hover a +,.kroma-navbar[data-variant].toggled-menu .nav-menu ul li.nav-current a{ +color: var(--variant-hover); +} + + + .kroma-navbar:not(.toggled-menu) .nav-menu { width: 100%; diff --git a/src/css/components/navbar.css b/src/css/components/navbar.css index bc17b51..743405f 100644 --- a/src/css/components/navbar.css +++ b/src/css/components/navbar.css @@ -9,36 +9,37 @@ } .kroma-navbar .nav-logo { - height: calc(var(--nav-size-base) / 1.5 ); - width: max-content; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-items: center; - gap: calc(var(--nav-size-base) / 6); - flex: auto; + height: calc(var(--nav-size-base) / 1.5 ); + width: max-content; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + gap: calc(var(--nav-size-base) / 6); + flex: auto; } nav.kroma-navbar { - width: 100%; - height: var(--nav-size-base); - position: sticky; - top: 0; - left: 0; - z-index: 3; - display: flex; - flex-direction: row; - align-content: center; - align-items: center; - flex-wrap: nowrap; - backdrop-filter: blur(4px); - -webkit-backdrop-filter: blur(4px); - justify-content: space-between; - box-sizing: border-box; - padding: calc(var(--nav-size-base) / 6); - gap: calc(var(--nav-size-base) / 6); + width: 100%; + height: var(--nav-size-base); + position: sticky; + top: 0; + left: 0; + z-index: 3; + display: flex; + flex-direction: row; + align-content: center; + align-items: center; + flex-wrap: nowrap; + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + justify-content: space-between; + box-sizing: border-box; + padding: calc(var(--nav-size-base) / 6); + gap: calc(var(--nav-size-base) / 6); } + nav.kroma-navbar:before { content: ""; display: block; @@ -82,101 +83,108 @@ nav.kroma-navbar:before { } nav.kroma-navbar:not(.toggled-menu) .nav-toggle { - display: none; + display: none; } .kroma-navbar .nav-toggle.show #nav-line-3 { - opacity: 0; - /* top: 20px; */ - height: 0; + opacity: 0; + /* top: 20px; */ + height: 0; } .kroma-navbar .nav-toggle.show #nav-line-1 { - transform: translate(0px, 50%) rotate(45deg); - transform-origin: center; + transform: translate(0px, 50%) rotate(45deg); + transform-origin: center; } .kroma-navbar .nav-toggle.show #nav-line-2 { - /* background: var(--neutral-700); */ - transform: translate(0px, -50%) rotate(-45deg); - transform-origin: center; + /* background: var(--neutral-700); */ + transform: translate(0px, -50%) rotate(-45deg); + transform-origin: center; } .kroma-navbar.toggled-menu .nav-menu { - display: flex; - position: absolute; - top: 100%; - right: 0; - margin: calc(var(--nav-size-base) / 3); - background: var(--neutral-50); - border-radius: 10px; - box-shadow: var(--shadow-sm); - align-items: center; - justify-content: center; - /* min-width: 170px; */ - max-height: 0; - opacity: 0; - overflow: hidden; - transition: opacity 100ms, max-height 2s 0ms; + display: flex; + position: absolute; + top: 100%; + right: 0; + margin: calc(var(--nav-size-base) / 3); + background: var(--neutral-50); + border-radius: 10px; + box-shadow: var(--shadow-sm); + align-items: center; + justify-content: center; + /* min-width: 170px; */ + max-height: 0; + opacity: 0; + overflow: hidden; + transition: opacity 100ms, max-height 2s 0ms; } .kroma-navbar.toggled-menu .nav-menu ul li a { - text-decoration: none; - list-style: none; - padding: calc(var(--nav-size-base) / 6) calc(var(--nav-size-base) / 1.5); - display: block; + text-decoration: none; + list-style: none; + padding: calc(var(--nav-size-base) / 6) calc(var(--nav-size-base) / 1.5); + display: block; } .kroma-navbar.toggled-menu .nav-menu ul { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; } .kroma-navbar .nav-toggle.show ~ .nav-menu { - max-height: 1000px; - opacity: 1; - transition: max-height 0s 0ms, opacity 100ms; + max-height: 1000px; + opacity: 1; + transition: max-height 0s 0ms, opacity 100ms; } .kroma-navbar.toggled-menu .nav-menu ul li:first-child a { - padding-top: calc(var(--nav-size-base) / 3); + padding-top: calc(var(--nav-size-base) / 3); } .kroma-navbar.toggled-menu .nav-menu ul li:last-child a { - padding-bottom: calc(var(--nav-size-base) / 3); + padding-bottom: calc(var(--nav-size-base) / 3); } -.kroma-navbar.toggled-menu .nav-menu ul li a.nav-current,.nav-menu ul li:hover a { - background: var(--neutral-100); +.kroma-navbar.toggled-menu .nav-menu ul li:hover +,.kroma-navbar.toggled-menu .nav-menu ul li.nav-current{ +background: var(--neutral-200); } +.kroma-navbar.toggled-menu .nav-menu ul li:hover a +,.kroma-navbar.toggled-menu .nav-menu ul li.nav-current a{ +color: var(--neutral-800); +} -.kroma-navbar:not(.toggled-menu) .nav-menu { - width: 100%; - display: flex; - justify-content: flex-end; - align-items: center; +.nav-menu ul li:hover a { + background: transparent; } -.kroma-navbar:not(.toggled-menu) .nav-menu ul { - display: flex; - flex-direction: row; - list-style: none; - gap: calc(var(--nav-size-base) / 6); +nav.kroma-navbar[data-variant]:before { + background: var(--variant-bg); + border-bottom-color: var(--variant-border); +} + +nav.kroma-navbar[data-variant] .nav-logo span, nav.kroma-navbar[data-variant] .nav-menu ul li a { + color: var(--variant-text); +} + + +.kroma-navbar[data-variant] span.nav-line { + background: var(--variant-text); } -.kroma-navbar:not(.toggled-menu) .nav-menu ul li a { - text-decoration: none; +.kroma-navbar[data-variant].toggled-menu .nav-menu ul li:hover +,.kroma-navbar[data-variant].toggled-menu .nav-menu ul li.nav-current{ +background: var(--variant-hover-bg); } -.kroma-navbar:not(.toggled-menu) .nav-menu ul li a:hover { - text-decoration: underline; +.kroma-navbar[data-variant].toggled-menu .nav-menu ul li:hover a +,.kroma-navbar[data-variant].toggled-menu .nav-menu ul li.nav-current a{ +color: var(--variant-hover); } -.kroma-navbar .kroma-avatar { - max-height: calc(var(--nav-size-base) / 1.5); - max-width: calc(var(--nav-size-base) / 1.5); -} \ No newline at end of file From 279429a393490a8bce5fe8ec14b054d1169e9db9 Mon Sep 17 00:00:00 2001 From: Ohswedd Date: Fri, 29 Nov 2024 15:26:23 +0100 Subject: [PATCH 12/13] Fix JS exports --- src/js/components/calendar.js | 2 +- src/js/components/codeblock.js | 2 +- src/js/components/command-palette.js | 2 +- src/js/components/datetime-picker.js | 2 +- src/js/components/file-upload.js | 2 +- src/js/components/hologram.js | 2 +- src/js/components/navbar.js | 2 +- src/js/components/rating.js | 2 +- src/js/components/sidebar.js | 2 +- src/js/components/slideshow.js | 2 +- src/js/components/tabs.js | 2 +- src/js/components/toast.js | 4 ++-- 12 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/js/components/calendar.js b/src/js/components/calendar.js index ac5be36..a4bad91 100644 --- a/src/js/components/calendar.js +++ b/src/js/components/calendar.js @@ -1,4 +1,4 @@ -export function initializeCalendarComponents() { +function initializeCalendarComponents() { document.querySelectorAll('.kroma-calendar').forEach(initCalendar); } diff --git a/src/js/components/codeblock.js b/src/js/components/codeblock.js index 4b05b0e..1cc6381 100644 --- a/src/js/components/codeblock.js +++ b/src/js/components/codeblock.js @@ -2,7 +2,7 @@ document.addEventListener('DOMContentLoaded', () => { initializeCodeblock(document); }); -export function initializeCodeblock() { +function initializeCodeblock() { document.querySelectorAll('.kroma-code-block').forEach((block) => { // Check if buttons are already rendered to avoid duplication if (block.querySelector('.kroma-code-block-header')) return; diff --git a/src/js/components/command-palette.js b/src/js/components/command-palette.js index d60cf0f..9c382b1 100644 --- a/src/js/components/command-palette.js +++ b/src/js/components/command-palette.js @@ -2,7 +2,7 @@ document.addEventListener('DOMContentLoaded', () => { initializeCommandPalettes(); }); -export function initializeCommandPalettes() { +function initializeCommandPalettes() { // Select all command palettes on the page const palettes = document.querySelectorAll('.kroma-command-palette'); diff --git a/src/js/components/datetime-picker.js b/src/js/components/datetime-picker.js index e8f4fb0..a875da9 100644 --- a/src/js/components/datetime-picker.js +++ b/src/js/components/datetime-picker.js @@ -1,4 +1,4 @@ -export class DateTimePicker { +class DateTimePicker { constructor(elementId, { format = 'YYYY-MM-DD HH:mm', includeTime = true, variant = 'primary' } = {}) { this.container = document.getElementById(elementId); this.format = format; diff --git a/src/js/components/file-upload.js b/src/js/components/file-upload.js index 16ec634..19890d0 100644 --- a/src/js/components/file-upload.js +++ b/src/js/components/file-upload.js @@ -1,4 +1,4 @@ -export function initializeKromaFileUploadComponents() { +function initializeKromaFileUploadComponents() { document.querySelectorAll('.kroma-file-upload').forEach((fileUpload) => { const dropzone = fileUpload.querySelector('.kroma-file-upload-dropzone'); const input = fileUpload.querySelector('.kroma-file-upload-input'); diff --git a/src/js/components/hologram.js b/src/js/components/hologram.js index e2d35ec..5c47737 100644 --- a/src/js/components/hologram.js +++ b/src/js/components/hologram.js @@ -1,4 +1,4 @@ -export function showHologram(titleText, subtitleText, variant = 'primary', intensity = 'medium', duration = 6000) { +function showHologram(titleText, subtitleText, variant = 'primary', intensity = 'medium', duration = 6000) { // Remove any existing holograms and dim overlay document.querySelectorAll('.kroma-hologram-overlay, .kroma-body-dim').forEach(el => el.remove()); diff --git a/src/js/components/navbar.js b/src/js/components/navbar.js index 1e53d9e..c19389c 100644 --- a/src/js/components/navbar.js +++ b/src/js/components/navbar.js @@ -1,4 +1,4 @@ -export class KromaNavbar { +class KromaNavbar { /* id (string) = navbar element id diff --git a/src/js/components/rating.js b/src/js/components/rating.js index 50f19cc..53c0b50 100644 --- a/src/js/components/rating.js +++ b/src/js/components/rating.js @@ -1,4 +1,4 @@ -export function initializeKromaRatingComponents() { +function initializeKromaRatingComponents() { // Automatically initialize all rating components on the page document.querySelectorAll('.kroma-rating').forEach(initializeRatingComponent); } diff --git a/src/js/components/sidebar.js b/src/js/components/sidebar.js index 1d925dc..8d67378 100644 --- a/src/js/components/sidebar.js +++ b/src/js/components/sidebar.js @@ -1,4 +1,4 @@ -export class KromaSidebar { +class KromaSidebar { /* id (string) = navbar element id diff --git a/src/js/components/slideshow.js b/src/js/components/slideshow.js index 2d5687d..c961768 100644 --- a/src/js/components/slideshow.js +++ b/src/js/components/slideshow.js @@ -1,4 +1,4 @@ -export class KromaSlideshow { +class KromaSlideshow { /* id (string) = slideshow element id diff --git a/src/js/components/tabs.js b/src/js/components/tabs.js index eafc678..4b4cf4b 100644 --- a/src/js/components/tabs.js +++ b/src/js/components/tabs.js @@ -1,4 +1,4 @@ -export function toggleTabContent(event, contentId, containerId) { +function toggleTabContent(event, contentId, containerId) { const container = document.getElementById(containerId); const tabs = container.querySelectorAll('.kroma-tab'); const contents = container.querySelectorAll('.kroma-tab-content'); diff --git a/src/js/components/toast.js b/src/js/components/toast.js index d297f4f..7ec94be 100644 --- a/src/js/components/toast.js +++ b/src/js/components/toast.js @@ -1,4 +1,4 @@ -export function initializeKromaToastComponents() { +function initializeKromaToastComponents() { // Automatically initialize and track toast components document.querySelectorAll('.kroma-toast').forEach((toast) => { if (toast.dataset.autoDismiss === "true") { @@ -8,7 +8,7 @@ export function initializeKromaToastComponents() { }); } -export function showKromaToast(message, { +function showKromaToast(message, { variant = 'primary', position = 'top-right', autoDismiss = false, From f84b52a0f0b5285e9654003eb469e67a8d36d137 Mon Sep 17 00:00:00 2001 From: Ohswedd Date: Fri, 29 Nov 2024 15:26:43 +0100 Subject: [PATCH 13/13] Fix bundles --- src/css/bundle.css | 214 ++++++--------------------------------------- src/js/bundle.js | 31 +++---- 2 files changed, 45 insertions(+), 200 deletions(-) diff --git a/src/css/bundle.css b/src/css/bundle.css index 5cf4c20..afe10ab 100644 --- a/src/css/bundle.css +++ b/src/css/bundle.css @@ -3,7 +3,7 @@ Project: kromacss Version: 1.0.2 Description: A modern, lightweight, and dependency-free CSS framework designed for simplicity, speed, and adaptability. Author: Altxria Inc. -License: MIT +License: CC BY-ND 4.0 */ /* --- design-tokens.css --- */ @@ -372,22 +372,24 @@ svg { .inline-block { display: inline-block; } .inline { display: inline; } + /*REMOVE HIGHLIGHT BACKGROUND*/ .no-selection::selection { - background: transparent; - color: inherit; + background: transparent; + color: inherit; } .no-selection::-moz-selection { - background: transparent; - color: inherit; + background: transparent; + color: inherit; } .no-selection { - user-select: none; + user-select: none; } + /* --- flexbox.css --- */ .flex { display: flex; gap: var(--space-4); } .flex-wrap { flex-wrap: wrap; } @@ -2749,136 +2751,6 @@ blockquote { } -/* --- footer.css --- */ -/* Base Footer Styles */ -.kroma-footer { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: center; - padding: var(--space-6) var(--space-8); - background-color: var(--variant-bg, var(--neutral-900)); - color: var(--variant-text, var(--neutral-50)); - font-family: var(--font-sans); - gap: var(--space-4); - border-top: 1px solid var(--variant-border, var(--neutral-700)); - transition: background-color var(--transition-colors), box-shadow var(--transition-all); - z-index: var(--z-10); - width: 100%; -} - -/* Footer Position: Sticky Bottom */ -.kroma-footer[data-stick="bottom"] { - position: sticky; - bottom: 0; -} - -/* Footer Position: Fixed Bottom */ -.kroma-footer[data-stick="fixed"] { - position: fixed; - bottom: 0; - left: 0; - width: 100%; - box-shadow: var(--shadow-lg); -} - -/* Footer Layouts */ -.kroma-footer[data-layout="center"] { - flex-direction: column; - text-align: center; - gap: var(--space-4); -} - -.kroma-footer[data-layout="stacked"] { - flex-direction: column; - align-items: flex-start; - gap: var(--space-6); -} - -/* Footer Links */ -.kroma-footer-links { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: var(--space-4); -} - -.kroma-footer-link { - color: inherit; - text-decoration: none; - font-size: clamp(0.875rem, 1vw, 1rem); - font-weight: 500; - transition: color var(--transition-colors); -} - -.kroma-footer-link:hover, -.kroma-footer-link:focus { - color: var(--variant-hover-bg, var(--neutral-300)); - text-decoration: underline; -} - -/* Footer Brand Section */ -.kroma-footer-brand { - display: flex; - align-items: center; - gap: var(--space-3); - font-size: clamp(1.25rem, 2.5vw, 1.75rem); - font-weight: bold; -} - -.kroma-footer-logo { - max-height: 50px; - object-fit: contain; -} - -/* Footer Copyright Section */ -.kroma-footer-copyright { - font-size: clamp(0.75rem, 1vw, 0.875rem); - color: var(--neutral-400); - margin-top: var(--space-4); - text-align: center; - width: 100%; -} - -/* Footer Social Links */ -.kroma-footer-social { - display: flex; - justify-content: center; - gap: var(--space-3); -} - -.kroma-footer-social a { - font-size: 1.5rem; - color: inherit; - transition: color var(--transition-colors); -} - -.kroma-footer-social a:hover, -.kroma-footer-social a:focus { - color: var(--variant-hover-bg, var(--neutral-300)); -} - -/* Responsive Adjustments */ -@media (max-width: 768px) { - .kroma-footer { - flex-direction: column; - text-align: center; - gap: var(--space-6); - padding: var(--space-4); - } - - .kroma-footer-links, - .kroma-footer-social { - justify-content: center; - gap: var(--space-3); - } - - .kroma-footer-copyright { - margin-top: var(--space-6); - } -} - - /* --- form.css --- */ /* Base Form Group Styling */ .kroma-form-group { @@ -3905,34 +3777,6 @@ color: var(--variant-hover); - -.kroma-navbar:not(.toggled-menu) .nav-menu { - width: 100%; - display: flex; - justify-content: flex-end; - align-items: center; -} - -.kroma-navbar:not(.toggled-menu) .nav-menu ul { - display: flex; - flex-direction: row; - list-style: none; - gap: calc(var(--nav-size-base) / 6); -} - -.kroma-navbar:not(.toggled-menu) .nav-menu ul li a { - text-decoration: none; -} - -.kroma-navbar:not(.toggled-menu) .nav-menu ul li a:hover { - text-decoration: underline; -} - -.kroma-navbar .kroma-avatar { - max-height: calc(var(--nav-size-base) / 1.5); - max-width: calc(var(--nav-size-base) / 1.5); -} - /* --- pagination.css --- */ /* Pagination Container */ .kroma-pagination { @@ -4530,7 +4374,7 @@ html:has(.kroma-navbar) .kroma-sidebar{ } .kroma-sidebar.collapsed .sdb-logo:not(:has(img)):after { - display: none; + display: none; } .kroma-sidebar .sdb-logo span { @@ -4639,59 +4483,59 @@ html:has(.kroma-navbar) .kroma-sidebar{ .kroma-sidebar li{ - cursor:pointer; - -} + cursor:pointer; + + } .kroma-sidebar:not(.collapsed) li[data-idparent] { - padding-left: 10px; - max-height: 100px; - transition: 100ms; + padding-left: 10px; + max-height: 100px; + transition: 100ms; } .kroma-sidebar:not(.collapsed) li.parent a span:before { - content: "\f054"; - margin-right: 10px; - font-family: 'FontAwesome'; - display: inline-block; + content: "\f054"; + margin-right: 10px; + font-family: 'FontAwesome'; + display: inline-block; } .kroma-sidebar li[data-idparent].collapsed { - max-height: 0; - overflow: hidden; + max-height: 0; + overflow: hidden; } .kroma-sidebar li.parent:not(.collapsed) a span:before { - transform: rotate(90deg); - transform-origin: center; + transform: rotate(90deg); + transform-origin: center; } /*variants*/ .kroma-sidebar[data-variant]:before { - background: var(--variant-bg); - border-color: var(--variant-border); + background: var(--variant-bg); + border-color: var(--variant-border); } .kroma-sidebar[data-variant] .sdb-logo:after{ - background: var(--variant-border); + background: var(--variant-border); } .kroma-sidebar[data-variant] .sdb-logo span, .kroma-sidebar[data-variant] .sdb-menu ul li i, .kroma-sidebar[data-variant] .sdb-menu ul li span, .kroma-sidebar[data-variant] .sdb-arrow{ - color: var(--variant-text); + color: var(--variant-text); } .kroma-sidebar[data-variant] .sdb-menu ul li a:hover:before{ - background: var(--variant-hover-bg); + background: var(--variant-hover-bg); } .kroma-sidebar[data-variant] .sdb-menu ul li a:hover > i, .kroma-sidebar[data-variant] .sdb-menu ul li a:hover > span { - color: var(--variant-hover); + color: var(--variant-hover); } /* --- skeleton.css --- */ diff --git a/src/js/bundle.js b/src/js/bundle.js index 74d055e..ea0769d 100644 --- a/src/js/bundle.js +++ b/src/js/bundle.js @@ -3,7 +3,7 @@ Project: kromacss Version: 1.0.2 Description: A modern, lightweight, and dependency-free CSS framework designed for simplicity, speed, and adaptability. Author: Altxria Inc. -License: MIT +License: CC BY-ND 4.0 */ /* --- accordion.js --- */ @@ -181,7 +181,7 @@ function handleAlertClose(alert) { /* --- calendar.js --- */ -export function initializeCalendarComponents() { +function initializeCalendarComponents() { document.querySelectorAll('.kroma-calendar').forEach(initCalendar); } @@ -370,7 +370,7 @@ document.addEventListener('DOMContentLoaded', () => { initializeCodeblock(document); }); -export function initializeCodeblock() { +function initializeCodeblock() { document.querySelectorAll('.kroma-code-block').forEach((block) => { // Check if buttons are already rendered to avoid duplication if (block.querySelector('.kroma-code-block-header')) return; @@ -434,7 +434,7 @@ document.addEventListener('DOMContentLoaded', () => { initializeCommandPalettes(); }); -export function initializeCommandPalettes() { +function initializeCommandPalettes() { // Select all command palettes on the page const palettes = document.querySelectorAll('.kroma-command-palette'); @@ -615,7 +615,7 @@ function initializeCommandPalette(palette) { /* --- datetime-picker.js --- */ -export class DateTimePicker { +class DateTimePicker { constructor(elementId, { format = 'YYYY-MM-DD HH:mm', includeTime = true, variant = 'primary' } = {}) { this.container = document.getElementById(elementId); this.format = format; @@ -945,7 +945,7 @@ document.addEventListener('DOMContentLoaded', () => { /* --- file-upload.js --- */ -export function initializeKromaFileUploadComponents() { +function initializeKromaFileUploadComponents() { document.querySelectorAll('.kroma-file-upload').forEach((fileUpload) => { const dropzone = fileUpload.querySelector('.kroma-file-upload-dropzone'); const input = fileUpload.querySelector('.kroma-file-upload-input'); @@ -1017,7 +1017,7 @@ document.addEventListener('DOMContentLoaded', initializeKromaFileUploadComponent /* --- hologram.js --- */ -export function showHologram(titleText, subtitleText, variant = 'primary', intensity = 'medium', duration = 6000) { +function showHologram(titleText, subtitleText, variant = 'primary', intensity = 'medium', duration = 6000) { // Remove any existing holograms and dim overlay document.querySelectorAll('.kroma-hologram-overlay, .kroma-body-dim').forEach(el => el.remove()); @@ -1238,7 +1238,7 @@ document.addEventListener('DOMContentLoaded', () => { /* --- navbar.js --- */ -export class KromaNavbar { +class KromaNavbar { /* id (string) = navbar element id @@ -1490,7 +1490,7 @@ document.addEventListener("DOMContentLoaded", () => { }); /* --- rating.js --- */ -export function initializeKromaRatingComponents() { +function initializeKromaRatingComponents() { // Automatically initialize all rating components on the page document.querySelectorAll('.kroma-rating').forEach(initializeRatingComponent); } @@ -1540,7 +1540,7 @@ document.addEventListener("DOMContentLoaded", initializeKromaRatingComponents); /* --- sidebar.js --- */ -export class KromaSidebar { +class KromaSidebar { /* id (string) = navbar element id @@ -1680,6 +1680,7 @@ export class KromaSidebar { for(var i = 0; i < this.pages.length; i++){ var li = document.createElement('li'); + li.querySelector('a').removeAttribute('href'); //remove href from collapsable parent li.classList.add('no-selection'); //parent page @@ -1728,7 +1729,6 @@ export class KromaSidebar { if(liChildren.length < 1){li.classList.remove('parent');} else{ li.classList.add('collapsed'); - li.querySelector('a').removeAttribute('href'); //remove href from collapsable parent li.addEventListener('click',function(){ var sdbId = this.closest('.kroma-sidebar').id; @@ -1753,6 +1753,7 @@ export class KromaSidebar { li.classList.add('collapsed'); }); + } @@ -1781,7 +1782,7 @@ document.addEventListener("DOMContentLoaded", () => { /* --- slideshow.js --- */ -export class KromaSlideshow { +class KromaSlideshow { /* id (string) = slideshow element id @@ -2083,7 +2084,7 @@ document.addEventListener("DOMContentLoaded", () => { /* --- tabs.js --- */ -export function toggleTabContent(event, contentId, containerId) { +function toggleTabContent(event, contentId, containerId) { const container = document.getElementById(containerId); const tabs = container.querySelectorAll('.kroma-tab'); const contents = container.querySelectorAll('.kroma-tab-content'); @@ -2103,7 +2104,7 @@ export function toggleTabContent(event, contentId, containerId) { /* --- toast.js --- */ -export function initializeKromaToastComponents() { +function initializeKromaToastComponents() { // Automatically initialize and track toast components document.querySelectorAll('.kroma-toast').forEach((toast) => { if (toast.dataset.autoDismiss === "true") { @@ -2113,7 +2114,7 @@ export function initializeKromaToastComponents() { }); } -export function showKromaToast(message, { +function showKromaToast(message, { variant = 'primary', position = 'top-right', autoDismiss = false,