Compare commits
16 Commits
Author | SHA1 | Date | |
---|---|---|---|
d16bc1652d | |||
6fa99f8ed8 | |||
5ce92130b4 | |||
b0774b0cba | |||
c44e19f3e0 | |||
07f09b4457 | |||
10ea4ca265 | |||
dfd61ce744 | |||
3093ccd4f6 | |||
eb1ac75e49 | |||
0683378e39 | |||
25a813d35f | |||
916fd48858 | |||
90bb1eb432 | |||
126e0fc900 | |||
a20b321bb0 |
128
.gitlab-ci.yml
128
.gitlab-ci.yml
@ -1,128 +0,0 @@
|
||||
# gitzone ci_default
|
||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
|
||||
cache:
|
||||
paths:
|
||||
- .npmci_cache/
|
||||
key: '$CI_BUILD_STAGE'
|
||||
|
||||
stages:
|
||||
- security
|
||||
- test
|
||||
- release
|
||||
- metadata
|
||||
|
||||
before_script:
|
||||
- pnpm install -g pnpm
|
||||
- pnpm install -g @shipzone/npmci
|
||||
- npmci npm prepare
|
||||
|
||||
# ====================
|
||||
# security stage
|
||||
# ====================
|
||||
# ====================
|
||||
# security stage
|
||||
# ====================
|
||||
auditProductionDependencies:
|
||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
stage: security
|
||||
script:
|
||||
- npmci command npm config set registry https://registry.npmjs.org
|
||||
- npmci command pnpm audit --audit-level=high --prod
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
allow_failure: true
|
||||
|
||||
auditDevDependencies:
|
||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
stage: security
|
||||
script:
|
||||
- npmci command npm config set registry https://registry.npmjs.org
|
||||
- npmci command pnpm audit --audit-level=high --dev
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
allow_failure: true
|
||||
|
||||
# ====================
|
||||
# test stage
|
||||
# ====================
|
||||
|
||||
testStable:
|
||||
stage: test
|
||||
script:
|
||||
- npmci node install stable
|
||||
- npmci npm install
|
||||
- npmci npm test
|
||||
coverage: /\d+.?\d+?\%\s*coverage/
|
||||
tags:
|
||||
- docker
|
||||
|
||||
testBuild:
|
||||
stage: test
|
||||
script:
|
||||
- npmci node install stable
|
||||
- npmci npm install
|
||||
- npmci npm build
|
||||
coverage: /\d+.?\d+?\%\s*coverage/
|
||||
tags:
|
||||
- docker
|
||||
|
||||
release:
|
||||
stage: release
|
||||
script:
|
||||
- npmci node install stable
|
||||
- npmci npm publish
|
||||
only:
|
||||
- tags
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
|
||||
# ====================
|
||||
# metadata stage
|
||||
# ====================
|
||||
codequality:
|
||||
stage: metadata
|
||||
allow_failure: true
|
||||
only:
|
||||
- tags
|
||||
script:
|
||||
- npmci command npm install -g typescript
|
||||
- npmci npm prepare
|
||||
- npmci npm install
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- priv
|
||||
|
||||
trigger:
|
||||
stage: metadata
|
||||
script:
|
||||
- npmci trigger
|
||||
only:
|
||||
- tags
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
|
||||
pages:
|
||||
stage: metadata
|
||||
script:
|
||||
- npmci node install stable
|
||||
- npmci npm install
|
||||
- npmci command npm run buildDocs
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
only:
|
||||
- tags
|
||||
artifacts:
|
||||
expire_in: 1 week
|
||||
paths:
|
||||
- public
|
||||
allow_failure: true
|
56
changelog.md
56
changelog.md
@ -1,5 +1,61 @@
|
||||
# Changelog
|
||||
|
||||
## 2025-06-20 - 2.3.3 - fix(package.json)
|
||||
Update dependency versions and add pnpm package manager field
|
||||
|
||||
- Update @git.zone/tsbuild from ^2.2.1 to ^2.6.4
|
||||
- Update @git.zone/tsbundle from ^2.2.5 to ^2.4.0
|
||||
- Update @git.zone/tstest from ^1.0.96 to ^2.3.1
|
||||
- Update @push.rocks/tapbundle from ^5.5.6 to ^6.0.3
|
||||
- Update @push.rocks/lik from ^6.1.0 to ^6.2.2
|
||||
- Update @push.rocks/smartpromise from ^4.2.2 to ^4.2.3
|
||||
- Update @push.rocks/smartrx from ^3.0.7 to ^3.0.10
|
||||
- Update @push.rocks/smartstate from ^2.0.19 to ^2.0.20
|
||||
- Update lenis from ^1.1.20 to ^1.3.4
|
||||
- Update lit from ^3.2.1 to ^3.3.0
|
||||
- Add packageManager field for pnpm
|
||||
|
||||
## 2025-02-01 - 2.3.2 - fix(scroller)
|
||||
Rename method from scrollToElement to toElement for consistency
|
||||
|
||||
- Updated method name in Scroller class for better coherence with existing naming conventions.
|
||||
|
||||
## 2025-01-31 - 2.3.1 - fix(scroller)
|
||||
Removed passive option from scroll event listener
|
||||
|
||||
- The 'passive: true' option was removed from the native scroll event listener attachment.
|
||||
|
||||
## 2025-01-31 - 2.3.0 - feat(scroller)
|
||||
Enhance Scroller class with callback execution and adaptive scroll listener
|
||||
|
||||
- Added support for executing scroll callbacks in the Scroller class.
|
||||
- Integrated adaptive scrolling mechanism using Lenis, with native smooth scrolling detection.
|
||||
- Ensured seamless switching between native scroll listener and Lenis scroll listener.
|
||||
|
||||
## 2025-01-31 - 2.2.0 - feat(core)
|
||||
Enhance scrolling capabilities by integrating Scroller class and adding lenis support
|
||||
|
||||
- Replaced SweetScroll setup in domtools.classes.domtools.ts with Scroller class.
|
||||
- Moved SweetScroll initialization and methods to new Scroller class.
|
||||
- Added lenis support in the Scroller class for enhanced scrolling capabilities.
|
||||
- Updated dev and dependencies versions in package.json.
|
||||
|
||||
## 2025-01-09 - 2.1.1 - fix(themamanager)
|
||||
Fixed automatic global theme change subscription for background updates.
|
||||
|
||||
- Corrected the logic for updating the document's background color upon theme changes using themeObservable subscription.
|
||||
|
||||
## 2025-01-09 - 2.1.0 - feat(themeManager)
|
||||
Exposed method to enable automatic global theme change.
|
||||
|
||||
- Enable easier application of dark and bright themes by exposing a method.
|
||||
- Updated devDependencies and dependencies in package.json to latest versions.
|
||||
|
||||
## 2024-10-21 - 2.0.65 - fix(ThemeManager)
|
||||
Refactor ThemeManager class to separate global style setting logic
|
||||
|
||||
- Moved logic to set global styles into a dedicated function setGlobalStylesOnPurpose in ThemeManager.
|
||||
|
||||
## 2024-10-06 - 2.0.64 - fix(pluginexports)
|
||||
Add missing import for smartrouter in pluginexports.
|
||||
|
||||
|
28
package.json
28
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@design.estate/dees-domtools",
|
||||
"version": "2.0.64",
|
||||
"version": "2.3.3",
|
||||
"private": false,
|
||||
"description": "A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.",
|
||||
"main": "dist_ts/index.js",
|
||||
@ -15,29 +15,30 @@
|
||||
"buildDocs": "tsdoc"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@git.zone/tsbuild": "^2.1.84",
|
||||
"@git.zone/tsbundle": "^2.0.15",
|
||||
"@git.zone/tstest": "^1.0.90",
|
||||
"@push.rocks/tapbundle": "^5.3.0",
|
||||
"@types/node": "^22.7.4"
|
||||
"@git.zone/tsbuild": "^2.6.4",
|
||||
"@git.zone/tsbundle": "^2.4.0",
|
||||
"@git.zone/tstest": "^2.3.1",
|
||||
"@push.rocks/tapbundle": "^6.0.3",
|
||||
"@types/node": "^22.12.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@api.global/typedrequest": "^3.0.32",
|
||||
"@api.global/typedrequest": "^3.1.10",
|
||||
"@design.estate/dees-comms": "^1.0.27",
|
||||
"@push.rocks/lik": "^6.0.15",
|
||||
"@push.rocks/lik": "^6.2.2",
|
||||
"@push.rocks/smartdelay": "^3.0.5",
|
||||
"@push.rocks/smartjson": "^5.0.20",
|
||||
"@push.rocks/smartmarkdown": "^3.0.3",
|
||||
"@push.rocks/smartpromise": "^4.0.4",
|
||||
"@push.rocks/smartpromise": "^4.2.3",
|
||||
"@push.rocks/smartrouter": "^1.3.2",
|
||||
"@push.rocks/smartrx": "^3.0.7",
|
||||
"@push.rocks/smartstate": "^2.0.19",
|
||||
"@push.rocks/smartrx": "^3.0.10",
|
||||
"@push.rocks/smartstate": "^2.0.20",
|
||||
"@push.rocks/smartstring": "^4.0.15",
|
||||
"@push.rocks/smarturl": "^3.1.0",
|
||||
"@push.rocks/webrequest": "^3.0.37",
|
||||
"@push.rocks/websetup": "^3.0.19",
|
||||
"@push.rocks/webstore": "^2.0.20",
|
||||
"lit": "^3.2.0",
|
||||
"lenis": "^1.3.4",
|
||||
"lit": "^3.3.0",
|
||||
"sweet-scroll": "^4.0.0"
|
||||
},
|
||||
"files": [
|
||||
@ -70,5 +71,6 @@
|
||||
"state management",
|
||||
"routing",
|
||||
"performance optimization"
|
||||
]
|
||||
],
|
||||
"packageManager": "pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977"
|
||||
}
|
||||
|
6157
pnpm-lock.yaml
generated
6157
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@design.estate/dees-domtools',
|
||||
version: '2.0.64',
|
||||
version: '2.3.3',
|
||||
description: 'A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.'
|
||||
}
|
||||
|
@ -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);
|
||||
|
||||
|
@ -1,5 +1,175 @@
|
||||
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;
|
||||
|
||||
// Array to store scroll callback functions.
|
||||
private scrollCallbacks: Array<() => void> = [];
|
||||
|
||||
// Lenis instance (if activated) or null.
|
||||
private lenisInstance: plugins.Lenis | null = null;
|
||||
|
||||
// Bound handlers to allow removal from event listeners.
|
||||
private handleNativeScroll = (event: Event): void => {
|
||||
this.executeScrollCallbacks();
|
||||
};
|
||||
|
||||
private handleLenisScroll = (info: any): void => {
|
||||
this.executeScrollCallbacks();
|
||||
};
|
||||
|
||||
constructor(domtoolsInstanceArg: DomTools) {
|
||||
this.domtoolsInstance = domtoolsInstanceArg;
|
||||
// Attach the native scroll listener by default.
|
||||
this.attachNativeScrollListener();
|
||||
}
|
||||
|
||||
private sweetScroller = new plugins.SweetScroll({});
|
||||
|
||||
/**
|
||||
* Scrolls to a given element with options.
|
||||
*/
|
||||
public async toElement(
|
||||
elementArg: HTMLElement,
|
||||
optionsArg: Parameters<typeof this.sweetScroller.toElement>[1]
|
||||
) {
|
||||
this.sweetScroller.toElement(elementArg, optionsArg);
|
||||
await plugins.smartdelay.delayFor(optionsArg.duration);
|
||||
}
|
||||
|
||||
/**
|
||||
* Detects whether native smooth scrolling is enabled.
|
||||
*/
|
||||
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;
|
||||
}
|
||||
|
||||
/**
|
||||
* Enables Lenis scrolling.
|
||||
* If optionsArg.disableOnNativeSmoothScroll is true and native smooth scrolling is detected,
|
||||
* Lenis will be destroyed immediately.
|
||||
*/
|
||||
public async enableLenisScroll(optionsArg?: { disableOnNativeSmoothScroll?: boolean }) {
|
||||
const lenis = new plugins.Lenis({
|
||||
autoRaf: true,
|
||||
});
|
||||
|
||||
if (optionsArg?.disableOnNativeSmoothScroll) {
|
||||
if (await this.detectNativeSmoothScroll()) {
|
||||
lenis.destroy();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Activate Lenis scrolling.
|
||||
this.lenisInstance = lenis;
|
||||
// Switch from native scroll listener to Lenis scroll listener.
|
||||
this.detachNativeScrollListener();
|
||||
this.attachLenisScrollListener();
|
||||
|
||||
// Monkey-patch the destroy method so that when Lenis is destroyed,
|
||||
// the native scroll listener is reattached.
|
||||
const originalDestroy = lenis.destroy.bind(lenis);
|
||||
lenis.destroy = () => {
|
||||
originalDestroy();
|
||||
this.detachLenisScrollListener();
|
||||
this.attachNativeScrollListener();
|
||||
this.lenisInstance = null;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers a callback to be executed on scroll.
|
||||
* @param callback A function to execute on each scroll event.
|
||||
*/
|
||||
public onScroll(callback: () => void): void {
|
||||
this.scrollCallbacks.push(callback);
|
||||
}
|
||||
|
||||
/**
|
||||
* Executes all registered scroll callbacks concurrently.
|
||||
*/
|
||||
private executeScrollCallbacks(): void {
|
||||
// Execute all callbacks in parallel.
|
||||
this.scrollCallbacks.forEach((callback) => {
|
||||
try {
|
||||
callback();
|
||||
} catch (error) {
|
||||
console.error('Error in scroll callback:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Attaches the native scroll event listener.
|
||||
*/
|
||||
private attachNativeScrollListener(): void {
|
||||
window.addEventListener('scroll', this.handleNativeScroll);
|
||||
}
|
||||
|
||||
/**
|
||||
* Detaches the native scroll event listener.
|
||||
*/
|
||||
private detachNativeScrollListener(): void {
|
||||
window.removeEventListener('scroll', this.handleNativeScroll);
|
||||
}
|
||||
|
||||
/**
|
||||
* Attaches the Lenis scroll event listener.
|
||||
*/
|
||||
private attachLenisScrollListener(): void {
|
||||
if (this.lenisInstance) {
|
||||
// Assuming that Lenis exposes an `on` method to listen to scroll events.
|
||||
this.lenisInstance.on('scroll', this.handleLenisScroll);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Detaches the Lenis scroll event listener.
|
||||
*/
|
||||
private detachLenisScrollListener(): void {
|
||||
if (this.lenisInstance) {
|
||||
// Assuming that Lenis exposes an `off` method to remove scroll event listeners.
|
||||
this.lenisInstance.off('scroll', this.handleLenisScroll);
|
||||
}
|
||||
}
|
||||
}
|
@ -21,10 +21,17 @@ export class ThemeManager {
|
||||
this.updateAllConnectedElements();
|
||||
}
|
||||
|
||||
private async updateAllConnectedElements() {
|
||||
public async enableAutomaticGlobalThemeChange() {
|
||||
if (document.body && document.body.style) {
|
||||
document.body.style.background = this.goBrightBoolean ? '#fff' : '#000';
|
||||
this.themeObservable.subscribe({
|
||||
next: (goBright) => {
|
||||
document.body.style.background = goBright ? '#fff' : '#000';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private async updateAllConnectedElements() {
|
||||
this.themeObservable.next(this.goBrightBoolean);
|
||||
}
|
||||
|
||||
|
@ -49,6 +49,7 @@ export {
|
||||
};
|
||||
|
||||
// third party scope
|
||||
import Lenis from 'lenis'
|
||||
import SweetScroll from 'sweet-scroll';
|
||||
|
||||
export { SweetScroll };
|
||||
export { Lenis, SweetScroll };
|
||||
|
Reference in New Issue
Block a user