@keenthemes/ktui 1.1.5 → 1.1.6

package/src/components/sticky/sticky.ts

@@ -34,11 +34,17 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		reverse: false,
 		release: '',
 		activate: '',
+		releaseDelay: 0,
+		activeClass: '',
+		releaseClass: '',
 	};
 	protected override _config: KTStickyConfigInterface = this._defaultConfig;
 	protected _targetElement: HTMLElement | Document | null = null;
 
 	protected _attributeRoot: string;
+	protected _isScrolling: boolean;
+	protected _timeoutState: ReturnType<typeof setTimeout> | null = null;
+	protected _scrollTimeout: ReturnType<typeof setTimeout> | null = null;
 	protected _eventTriggerState: boolean;
 	protected _lastScrollTop: number;
 	protected _releaseElement: HTMLElement;
@@ -69,6 +75,9 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		);
 		this._wrapperElement = this._element.closest('[data-kt-sticky-wrapper]');
 		this._attributeRoot = `data-kt-sticky-${this._getOption('name')}`;
+		this._isScrolling = false;
+		this._timeoutState = null;
+		this._scrollTimeout = null;
 		this._eventTriggerState = true;
 		this._lastScrollTop = 0;
 
@@ -110,26 +119,57 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 
 		// Store scroll handler reference for cleanup
 		this._scrollHandler = () => {
-			this._process();
+
+			this._isScrolling = true;
+
+			if(this._isActive() === true){
+
+				this._debounceScroll(() => {
+
+					this._isScrolling = false;
+					this._process();
+
+				}, 200);
+
+			}else{
+
+				this._isScrolling = false;
+				this._process();
+
+			}
+
 		};
 
 		if (this._targetElement) {
 			if (this._targetElement === document) {
-				window.addEventListener('scroll', this._scrollHandler);
+				window.addEventListener('scroll', this._scrollHandler, { passive: true });
 			} else {
 				(this._targetElement as HTMLElement).addEventListener(
 					'scroll',
 					this._scrollHandler,
+					{ passive: true }
 				);
 			}
 		}
 	}
 
+	protected _debounceScroll(callback: () => void, delay: number = 200): void {
+
+		if (this._scrollTimeout) {
+			clearTimeout(this._scrollTimeout);
+		}
+
+		this._scrollTimeout = setTimeout(() => {
+			callback();
+		}, delay);
+
+	}
+
 	protected _process(): void {
 		const reverse = this._getOption('reverse');
 		const offset = this._getOffset();
 
-		if (offset < 0) {
+		if (offset <= 0) {
 			this._disable();
 			return;
 		}
@@ -242,7 +282,6 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		const end = this._getOption('end') as string;
 		const height = this._calculateHeight();
 		const zindex = this._getOption('zindex') as string;
-		const classList = this._getOption('class') as string;
 
 		if (height + parseInt(top) > KTDom.getViewPort().height) {
 			return false;
@@ -310,16 +349,27 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 			this._element.style.position = 'fixed';
 		}
 
-		if (classList) {
-			KTDom.addClass(this._element, classList);
+		const activeClassList = this._getOption('activeClass') as string;
+		if (activeClassList) {
+			KTDom.addClass(this._element, activeClassList);
+		}else{
+			const classList = this._getOption('class') as string;
+			if (classList) {
+				KTDom.addClass(this._element, classList);
+			}
+		}
+
+		const releaseClassList = this._getOption('releaseClass') as string;
+		if (releaseClassList) {
+			KTDom.removeClass(this._element, releaseClassList);
 		}
 
 		if (this._wrapperElement) {
 			this._wrapperElement.style.height = `${height}px`;
 		}
 
-		this._element.classList.add('active');
 		this._element.classList.remove('release');
+		this._element.classList.add('active');
 
 		return true;
 	}
@@ -327,6 +377,53 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 	protected _disable(): void {
 		if (!this._element) return;
 
+		if (this._wrapperElement) {
+			this._wrapperElement.style.height = '';
+		}
+
+		this._element.classList.remove('active');
+		this._element.classList.add('release');
+
+		const activeClassList = this._getOption('activeClass') as string;
+		if (activeClassList) {
+			KTDom.removeClass(this._element, activeClassList);
+		}else{
+			const classList = this._getOption('class') as string;
+			if (classList) {
+					KTDom.removeClass(this._element, classList);
+			}
+		}
+
+		const releaseClassList = this._getOption('releaseClass') as string;
+		if (releaseClassList) {
+			KTDom.addClass(this._element, releaseClassList);
+		}
+
+		if(this._eventTriggerState === false){
+			const releaseDelay = this._getOption('releaseDelay') as number;
+			if(releaseDelay && this._timeoutState === null){
+				this._timeoutState = setTimeout(() => {
+
+					if (!this._element){
+						return;
+					}
+
+					if (this._isRelease() === true) {
+						this._resetStyles();
+					}
+
+					this._timeoutState = null;
+
+				}, releaseDelay);
+			}else{
+				this._resetStyles();
+			}
+		}else{
+			this._timeoutState = null;
+		}
+	}
+
+	protected _resetStyles = function () {
 		this._element.style.top = '';
 		this._element.style.bottom = '';
 		this._element.style.insetInlineStart = '';
@@ -338,21 +435,11 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		this._element.style.right = '';
 		this._element.style.zIndex = '';
 		this._element.style.position = '';
-
-		const classList = this._getOption('class') as string;
-
-		if (this._wrapperElement) {
-			this._wrapperElement.style.height = '';
-		}
-
-		if (classList) {
-			KTDom.removeClass(this._element, classList);
-		}
-
-		this._element.classList.remove('active');
-	}
+	};
 
 	protected _update(): void {
+		this._timeoutState = null;
+		this._eventTriggerState = true;
 		if (this._isActive()) {
 			this._disable();
 			this._enable();
@@ -385,6 +472,10 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		return this._element.classList.contains('active');
 	}
 
+	protected _isRelease(): boolean {
+		return this._element.classList.contains('release');
+	}
+
 	public update(): void {
 		this._update();
 	}
@@ -393,6 +484,10 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		return this._isActive();
 	}
 
+	public isRelease(): boolean {
+		return this._isRelease();
+	}
+
 	public override dispose(): void {
 		// Remove resize event listener
 		if (this._resizeHandler) {
@@ -415,7 +510,10 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 
 		// Clean up state
 		this._disable();
-		if (this._attributeRoot && document.body.hasAttribute(this._attributeRoot)) {
+		if (
+			this._attributeRoot &&
+			document.body.hasAttribute(this._attributeRoot)
+		) {
 			document.body.removeAttribute(this._attributeRoot);
 		}
 

package/src/components/sticky/types.ts

@@ -19,6 +19,9 @@ export interface KTStickyConfigInterface {
 	reverse: boolean;
 	release: string;
 	activate: string;
+	releaseDelay: number,
+	activeClass: string,
+	releaseClass: string,
 }
 
 export interface KTStickyInterface {

package/src/components/theme-switch/theme-switch.ts

@@ -3,9 +3,6 @@
  * Copyright 2025 by Keenthemes Inc
  */
 
-/* eslint-disable max-len */
-/* eslint-disable require-jsdoc */
-
 import KTData from '../../helpers/data';
 import KTEventHandler from '../../helpers/event-handler';
 import KTComponent from '../component';

package/src/components/toast/toast.ts

@@ -415,8 +415,9 @@ export class KTToast extends KTComponent implements KTToastInterface {
 		if (options.beep) {
 			try {
 				// Use Web Audio API for a short beep
-				const ctx = new (window.AudioContext ||
-					(window as any).webkitAudioContext)();
+				const ctx = new (
+					window.AudioContext || (window as any).webkitAudioContext
+				)();
 				const o = ctx.createOscillator();
 				const g = ctx.createGain();
 				o.type = 'sine';

package/src/helpers/dom.ts

@@ -3,7 +3,6 @@
  * Copyright 2025 by Keenthemes Inc
  */
 
-/* eslint-disable max-len */
 import KTUtils from './utils';
 import { KTOffsetType, KTOptionType, KTViewPortType } from '../types';
 
@@ -130,7 +129,6 @@ const KTDom = {
 		for (
 			element && element !== document.documentElement;
 			(element = element.parentElement as HTMLElement);
-
 		) {
 			if (selector) {
 				if (element.matches(selector)) {
@@ -183,7 +181,6 @@ const KTDom = {
 			return false;
 		}
 
-		// eslint-disable-next-line max-len
 		return (
 			getComputedStyle(element).getPropertyValue('visibility') === 'visible'
 		);