forgejo/web_src/js/modules/dimmer.ts
Gusted f691f03741 chore(ui): remove fomantic's dimmer module (#7416)
- Fomantic's dimmer module is responsible for dimming the page and make some element the primary focus on the page (e.g. modal). This module is only used by Fomantic's modal module.
- Remove it and replace the javascript with our own `Dimmer` class that is able to provide Fomantic's modal module with everything it needs.
- Replace the CSS with our own bare minimum CSS.
- No functionality or visual is affected by this replacement.
- E2E test added.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7416
Reviewed-by: Michael Kriese <michael.kriese@gmx.de>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>
2025-04-02 12:54:54 +00:00

47 lines
1.3 KiB
TypeScript

import $ from 'jquery';
class Dimmer {
dimmerEl: HTMLDivElement;
active: boolean;
constructor() {
this.dimmerEl = document.querySelector('body > div.ui.dimmer') as HTMLDivElement;
if (!this.dimmerEl) {
this.dimmerEl = document.createElement('div');
this.dimmerEl.classList.add('ui', 'dimmer', 'transition');
document.body.append(this.dimmerEl);
}
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
dimmer(functionName: string, ...args: any[]) {
if (functionName === 'add content') {
this.dimmerEl.append(args[0][0]);
} else if (functionName === 'get dimmer') {
return $(this.dimmerEl);
} else if (functionName === 'show') {
this.dimmerEl.classList.add('active');
this.dimmerEl.classList.remove('hidden');
this.active = true;
} else if (functionName === 'hide') {
this.dimmerEl.classList.remove('active');
this.dimmerEl.classList.add('hidden');
this.active = false;
} else if (functionName === 'is active') {
return this.active;
}
}
// JQuery compatibility functions.
get(_index: number): HTMLElement {
return document.body;
}
removeClass() {}
hasClass() {}
}
export function initDimmer() {
$.fn.dimmer = (arg: string | object) => {
if (typeof arg === 'object') return new Dimmer();
};
}