feat(core): Enhance scrolling capabilities by integrating Scroller class and adding lenis support

This commit is contained in:
2025-01-31 23:03:10 +01:00
parent 0683378e39
commit eb1ac75e49
7 changed files with 1476 additions and 1616 deletions

View File

@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@design.estate/dees-domtools',
version: '2.1.1',
version: '2.2.0',
description: 'A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.'
}

View File

@ -93,9 +93,7 @@ export class DomTools {
};
public deesComms = new plugins.deesComms.DeesComms();
public scroller = new plugins.SweetScroll({
/* some options */
}); // TODO: switch to scroller class
public scroller = new Scroller(this);
public themeManager = new ThemeManager(this);
public keyboard = new Keyboard(document.body);

View File

@ -1,5 +1,77 @@
import type { DomTools } from './domtools.classes.domtools.js';
import * as plugins from './domtools.plugins.js';
export class Scroller {
// TODO: move sweet scroll over to here;
public domtoolsInstance: DomTools;
constructor(
domtoolsInstanceArg: DomTools,
) {
this.domtoolsInstance = domtoolsInstanceArg;
}
private sweetScroller = new plugins.SweetScroll({
/* some options */
}); // TODO: switch to scroller class
public async scrollToElement(
elementArg: HTMLElement,
optionsArg: Parameters<typeof this.sweetScroller.toElement>[1]
) {
this.sweetScroller.toElement(elementArg, optionsArg);
await plugins.smartdelay.delayFor(optionsArg.duration);
}
public async detectNativeSmoothScroll() {
const done = plugins.smartpromise.defer<boolean>();
const sampleSize = 100;
const acceptableDeltaDifference = 3;
const minimumSmoothRatio = 0.75;
const eventDeltas: number[] = [];
function onWheel(event: WheelEvent) {
eventDeltas.push(event.deltaY);
if (eventDeltas.length >= sampleSize) {
window.removeEventListener('wheel', onWheel);
analyzeEvents();
}
}
function analyzeEvents() {
const totalDiffs = eventDeltas.length - 1;
let smallDiffCount = 0;
for (let i = 0; i < totalDiffs; i++) {
const diff = Math.abs(eventDeltas[i + 1] - eventDeltas[i]);
if (diff <= acceptableDeltaDifference) {
smallDiffCount++;
}
}
const smoothRatio = smallDiffCount / totalDiffs;
if (smoothRatio >= minimumSmoothRatio) {
console.log('Smooth scrolling detected.');
done.resolve(true);
} else {
console.log('Smooth scrolling NOT detected.');
done.resolve(false);
}
}
window.addEventListener('wheel', onWheel);
return done.promise;
}
public async enableLenisScroll(optionsArg?: { disableOnNativeSmoothScroll?: boolean }) {
const lenis = new plugins.Lenis({
autoRaf: true,
});
if (optionsArg?.disableOnNativeSmoothScroll) {
if (await this.detectNativeSmoothScroll()) {
lenis.destroy();
}
}
}
}

View File

@ -49,6 +49,7 @@ export {
};
// third party scope
import Lenis from 'lenis'
import SweetScroll from 'sweet-scroll';
export { SweetScroll };
export { Lenis, SweetScroll };