StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-13 17:49:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(core): ♻️ separate inherited class function

Browse source
This commit is contained in:
alistair3149 2024-05-27 17:10:04 -04:00
parent 523140f62f
commit c9210bd0dd
No known key found for this signature in database
1 changed files with 29 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
resources/skins.citizen.scripts/overflowElements.js
View file

@ -95,16 +95,33 @@ class OverflowElement {
} ); } );
} }
/**
* Filters and adds inherited classes to the wrapper element.
*
* @param {Array} inheritedClasses - An array of inherited classes to handle.
* @return {void}
*/
handleInheritedClasses( inheritedClasses ) {
const filteredClasses = inheritedClasses.filter( ( cls ) => this.element.classList.contains( cls ) );
filteredClasses.forEach( ( cls ) => {
if ( !this.wrapper.classList.contains( cls ) ) {
this.wrapper.classList.add( cls );
}
if ( this.element.classList.contains( cls ) ) {
this.element.classList.remove( cls );
}
} );
}
/** /**
* Wraps the element in a div container with the class 'citizen-overflow-wrapper'. * Wraps the element in a div container with the class 'citizen-overflow-wrapper'.
* Checks if the element or its parent node is null or undefined, logs an error if so. * Checks if the element or its parent node is null or undefined, and logs an error if so.
* Verifies the existence of $wgCitizenOverflowNowrapClasses in the config and if it is an array, logs an error if not. * Verifies the existence of the necessary configuration classes for wrapping and logs an error if missing.
* Skips wrapping if the element contains any of the ignored classes specified in $wgCitizenOverflowNowrapClasses. * Creates a new div wrapper element, adds the class 'citizen-overflow-wrapper', and appends it to the parent node before the element.
* Creates a wrapper div element, adds the class 'citizen-overflow-wrapper' to it. * Moves the element inside the wrapper.
* Filters and adds inherited classes ('floatleft', 'floatright') from the element to the wrapper. * Handles inherited classes such as 'floatleft' and 'floatright' by adding them to the wrapper and removing them from the element.
* Inserts the wrapper before the element in the DOM and appends the element to the wrapper. * Logs any errors that occur during the wrapping process.
* Sets the wrapper element as a property of the class instance.
* Logs an error if an exception occurs during the wrapping process.
* *
* @return {void} * @return {void}
*/ */
@ -114,40 +131,22 @@ class OverflowElement {
return; return;
} }
try { try {
if ( const nowrapClasses = config.wgCitizenOverflowNowrapClasses;
!config.wgCitizenOverflowNowrapClasses || if ( !nowrapClasses || !Array.isArray( nowrapClasses ) ) {
!Array.isArray( config.wgCitizenOverflowNowrapClasses )
) {
mw.log.error( '[Citizen] Invalid or missing $wgCitizenOverflowNowrapClasses. Cannot proceed with wrapping element.' ); mw.log.error( '[Citizen] Invalid or missing $wgCitizenOverflowNowrapClasses. Cannot proceed with wrapping element.' );
return; return;
} }
const parentNode = this.element.parentNode; const parentNode = this.element.parentNode;
const ignoredClasses = config.wgCitizenOverflowNowrapClasses; if ( nowrapClasses.some( ( cls ) => this.element.classList.contains( cls ) ) ) {
if ( ignoredClasses.some( ( cls ) => this.element.classList.contains( cls ) ) ) {
return; return;
} }
const wrapper = document.createElement( 'div' ); const wrapper = document.createElement( 'div' );
wrapper.className = 'citizen-overflow-wrapper'; wrapper.className = 'citizen-overflow-wrapper';
const inheritedClasses = [ this.handleInheritedClasses( [ 'floatleft', 'floatright' ] );
'floatleft',
'floatright'
];
const filteredClasses = inheritedClasses.filter( ( cls ) => this.element.classList.contains( cls ) );
filteredClasses.forEach( ( cls ) => {
if ( !wrapper.classList.contains( cls ) ) {
wrapper.classList.add( cls );
}
if ( this.element.classList.contains( cls ) ) {
this.element.classList.remove( cls );
}
} );
parentNode.insertBefore( wrapper, this.element ); parentNode.insertBefore( wrapper, this.element );
wrapper.appendChild( this.element ); wrapper.appendChild( this.element );