mirror of
				https://codeberg.org/forgejo/forgejo.git
				synced 2025-11-02 23:41:05 +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();
 | 
						|
  };
 | 
						|
}
 |