mirror of
				https://codeberg.org/forgejo/forgejo.git
				synced 2025-10-31 06:21:11 +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();
 | |
|   };
 | |
| }
 |