mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2025-04-25 09:06:20 +00:00
- 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>
47 lines
1.3 KiB
TypeScript
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();
|
|
};
|
|
}
|