From 199d56bf3d346c85fb147394026415d6c083d75d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bartosz=20Dziewo=C5=84ski?= <matma.rex@gmail.com>
Date: Fri, 19 May 2023 13:55:33 +0300
Subject: [PATCH] Use ES6 classes for custom OOUI widgets

Just for a lark.

Do not use ES6 static properties though, as they're only introduced in
ES2020, and also apparently everyone hates them.
---
 js/DetailsFieldLayout.js |  52 +++---
 js/PatchSelectWidget.js  | 348 +++++++++++++++++++--------------------
 2 files changed, 200 insertions(+), 200 deletions(-)

diff --git a/js/DetailsFieldLayout.js b/js/DetailsFieldLayout.js
index 0149a65..f5ee1d2 100644
--- a/js/DetailsFieldLayout.js
+++ b/js/DetailsFieldLayout.js
@@ -1,32 +1,32 @@
-window.DetailsFieldLayout = function DetailsFieldLayout( fieldWidget, config ) {
-	// Allow passing positional parameters inside the config object
-	if ( OO.isPlainObject( fieldWidget ) && config === undefined ) {
-		config = fieldWidget;
-		fieldWidget = config.fieldWidget;
-	}
+window.DetailsFieldLayout = class DetailsFieldLayout extends OO.ui.FieldLayout {
+	constructor( fieldWidget, config ) {
+		// Allow passing positional parameters inside the config object
+		if ( OO.isPlainObject( fieldWidget ) && config === undefined ) {
+			config = fieldWidget;
+			fieldWidget = config.fieldWidget;
+		}
 
-	config = config || {};
+		config = config || {};
 
-	// Parent constructor
-	window.DetailsFieldLayout.super.call( this, fieldWidget, $.extend( {}, config, {
-		// <summary> tag is no longer clickable if there's a <label> inside,
-		// use a <span> instead
-		$label: $( '<span>' )
-	} ) );
+		// Parent constructor
+		super( fieldWidget, $.extend( {}, config, {
+			// <summary> tag is no longer clickable if there's a <label> inside,
+			// use a <span> instead
+			$label: $( '<span>' )
+		} ) );
 
-	// HACK: Replace header with an identical <summary> tag
-	// and body with an identical <details> tag
-	this.$body.detach();
+		// HACK: Replace header with an identical <summary> tag
+		// and body with an identical <details> tag
+		this.$body.detach();
 
-	this.$header = $( '<summary>' );
-	this.$header.addClass( 'oo-ui-fieldLayout-header' );
-	this.$body = $( '<details>' );
-	this.$body.addClass( 'oo-ui-fieldLayout-body' );
-	// This adds the content back
-	this.align = null;
-	this.setAlignment( config.align );
+		this.$header = $( '<summary>' );
+		this.$header.addClass( 'oo-ui-fieldLayout-header' );
+		this.$body = $( '<details>' );
+		this.$body.addClass( 'oo-ui-fieldLayout-body' );
+		// This adds the content back
+		this.align = null;
+		this.setAlignment( config.align );
 
-	this.$element.append( this.$body );
+		this.$element.append( this.$body );
+	}
 };
-
-OO.inheritClass( window.DetailsFieldLayout, OO.ui.FieldLayout );
diff --git a/js/PatchSelectWidget.js b/js/PatchSelectWidget.js
index a69a2b0..5564b52 100644
--- a/js/PatchSelectWidget.js
+++ b/js/PatchSelectWidget.js
@@ -12,209 +12,209 @@
 	}
 }() );
 
-window.PatchSelectWidget = function PatchSelectWidget( config ) {
-	this.$formInput = $( '<input>' ).attr( {
-		type: 'hidden',
-		name: config.name
-	} );
-
-	// Parent constructor
-	window.PatchSelectWidget.super.call( this, $.extend( {
-		allowArbitrary: true,
-		allowDisplayInvalidTags: true,
-		selected: config.value && config.value.split( '\n' )
-	}, config ) );
-
-	// Assume that a whole patch number was pasted
-	// TODO: Upstream?
-	this.input.$input.on( 'paste', () => {
-		setTimeout( this.doInputEnter.bind( this ) );
-	} );
-
-	this.$element
-		.append( this.$formInput )
-		.addClass( 'PatchSelectWidget' );
-};
+window.PatchSelectWidget = class PatchSelectWidget extends OO.ui.TagMultiselectWidget {
+	constructor( config ) {
+		super( $.extend( {
+			allowArbitrary: true,
+			allowDisplayInvalidTags: true,
+			selected: config.value && config.value.split( '\n' )
+		}, config ) );
+
+		this.$formInput = $( '<input>' ).attr( {
+			type: 'hidden',
+			name: config.name
+		} );
+
+		// Assume that a whole patch number was pasted
+		// TODO: Upstream?
+		this.input.$input.on( 'paste', () => {
+			setTimeout( this.doInputEnter.bind( this ) );
+		} );
+
+		this.$element
+			.append( this.$formInput )
+			.addClass( 'PatchSelectWidget' );
+	}
 
-OO.inheritClass( window.PatchSelectWidget, OO.ui.TagMultiselectWidget );
+	getTagInfoFromInput( value ) {
+		value = value || this.input.getValue();
 
-window.PatchSelectWidget.static.patchCache = {};
+		const gerritUrlPattern = new RegExp( pd.config.gerritUrl + '.*?/([0-9]+(?:/[0-9]+)?)/?$' );
 
-window.PatchSelectWidget.prototype.getTagInfoFromInput = function ( value ) {
-	value = value || this.input.getValue();
+		value = value.trim();
 
-	const gerritUrlPattern = new RegExp( pd.config.gerritUrl + '.*?/([0-9]+(?:/[0-9]+)?)/?$' );
+		const matches = value.match( gerritUrlPattern );
+		if ( matches ) {
+			value = matches[ 1 ].replace( '/', ',' );
+		}
 
-	value = value.trim();
+		return value ?
+			{ data: value, label: value } :
+			null;
+	}
 
-	const matches = value.match( gerritUrlPattern );
-	if ( matches ) {
-		value = matches[ 1 ].replace( '/', ',' );
+	addTagFromInput() {
+		// Handle multi line inputs, e.g. from paste
+		// TODO: Upstream?
+		const tagInfos = this.input.getValue().trim().split( /[ \n]/ )
+			.map( this.getTagInfoFromInput.bind( this ) );
+
+		tagInfos.forEach( ( tagInfo ) => {
+			if ( tagInfo && this.addTag( tagInfo.data, tagInfo.label ) ) {
+				this.clearInput();
+			}
+		} );
 	}
 
-	return value ?
-		{ data: value, label: value } :
-		null;
-};
+	onInputKeyPress( e ) {
+		if ( !this.isDisabled() ) {
+			let stopOrContinue;
+			if ( e.which === OO.ui.Keys.SPACE ) {
+				const withMetaKey = e.metaKey || e.ctrlKey;
+				stopOrContinue = this.doInputEnter( e, withMetaKey );
+			}
 
-window.PatchSelectWidget.prototype.addTagFromInput = function () {
-	// Handle multi line inputs, e.g. from paste
-	// TODO: Upstream?
-	const tagInfos = this.input.getValue().trim().split( /[ \n]/ )
-		.map( this.getTagInfoFromInput.bind( this ) );
+			// Make sure the input gets resized.
+			this.updateInputSize();
 
-	tagInfos.forEach( ( tagInfo ) => {
-		if ( tagInfo && this.addTag( tagInfo.data, tagInfo.label ) ) {
-			this.clearInput();
+			if ( stopOrContinue !== undefined ) {
+				return stopOrContinue;
+			}
 		}
-	} );
-};
 
-window.PatchSelectWidget.prototype.onInputKeyPress = function ( e ) {
-	if ( !this.isDisabled() ) {
-		let stopOrContinue;
-		if ( e.which === OO.ui.Keys.SPACE ) {
-			const withMetaKey = e.metaKey || e.ctrlKey;
-			stopOrContinue = this.doInputEnter( e, withMetaKey );
-		}
+		return super.onInputKeyPress( ...arguments );
+	}
 
-		// Make sure the input gets resized.
-		this.updateInputSize();
+	createTagItemWidget() {
+		const patchCache = this.constructor.static.patchCache,
+			item = super.createTagItemWidget( ...arguments ),
+			patch = item.getData().trim();
 
-		if ( stopOrContinue !== undefined ) {
-			return stopOrContinue;
+		function linkClick( e ) {
+			e.stopPropagation();
 		}
-	}
 
-	return window.PatchSelectWidget.super.prototype.onInputKeyPress.apply( this, arguments );
-};
-
-window.PatchSelectWidget.prototype.createTagItemWidget = function () {
-	const patchCache = this.constructor.static.patchCache,
-		// eslint-disable-next-line max-len
-		item = window.PatchSelectWidget.super.prototype.createTagItemWidget.apply( this, arguments ),
-		patch = item.getData().trim();
+		item.setLabel( patch + ': …' );
+		item.setData( { input: patch } );
 
-	function linkClick( e ) {
-		e.stopPropagation();
+		patchCache[ patch ] = patchCache[ patch ] || (
+			patch.match( /^(I[0-9a-f]+|[0-9]+(,[0-9]+)?)$/ ) ?
+				$.get( 'api.php', { action: 'patchmeta', patch: patch } ) :
+				$.Deferred().reject( 'Invalid patch number' ).promise()
+		);
+		patchCache[ patch ].then( ( response ) => {
+			const data = { input: patch };
+			if ( !response.length ) {
+				return $.Deferred().reject( 'Could not find patch' ).promise();
+			} else if ( response.length > 1 ) {
+				return $.Deferred().reject( 'Ambiguous query' ).promise();
+			}
+			data.r = response[ 0 ].r ||
+				// eslint-disable-next-line no-underscore-dangle
+				( patch.indexOf( 'I' ) === 0 ? response[ 0 ]._number : patch );
+			data.p = response[ 0 ].p ||
+				// eslint-disable-next-line no-underscore-dangle
+				response[ 0 ].revisions[ response[ 0 ].current_revision ]._number;
+			data.linkedTasks = response[ 0 ].linkedTasks;
+
+			item.setFlags( [] );
+			item.setData( data );
+			item.setLabel(
+				$( '<span>' ).append(
+					document.createTextNode( data.r + ',' + data.p + ': ' ),
+					$( '<a>' )
+						.attr( {
+							target: '_blank',
+							href: pd.config.gerritUrl + '/r/' + data.r
+						} )
+						.text( response[ 0 ].subject )
+						.on( 'click', linkClick )
+				)
+			);
+			// Update input after ID normalization
+			this.onChangeTags();
+			this.updateInputSize();
+		} ).then( null, ( err ) => {
+			item.setLabel( item.getData().input + ': ' + err );
+			item.toggleValid( false );
+			this.updateInputSize();
+		} );
+
+		return item;
 	}
 
-	item.setLabel( patch + ': …' );
-	item.setData( { input: patch } );
-
-	patchCache[ patch ] = patchCache[ patch ] || (
-		patch.match( /^(I[0-9a-f]+|[0-9]+(,[0-9]+)?)$/ ) ?
-			$.get( 'api.php', { action: 'patchmeta', patch: patch } ) :
-			$.Deferred().reject( 'Invalid patch number' ).promise()
-	);
-	patchCache[ patch ].then( ( response ) => {
-		const data = { input: patch };
-		if ( !response.length ) {
-			return $.Deferred().reject( 'Could not find patch' ).promise();
-		} else if ( response.length > 1 ) {
-			return $.Deferred().reject( 'Ambiguous query' ).promise();
-		}
-		data.r = response[ 0 ].r ||
-			// eslint-disable-next-line no-underscore-dangle
-			( patch.indexOf( 'I' ) === 0 ? response[ 0 ]._number : patch );
-		data.p = response[ 0 ].p ||
-			// eslint-disable-next-line no-underscore-dangle
-			response[ 0 ].revisions[ response[ 0 ].current_revision ]._number;
-		data.linkedTasks = response[ 0 ].linkedTasks;
-
-		item.setFlags( [] );
-		item.setData( data );
-		item.setLabel(
-			$( '<span>' ).append(
-				document.createTextNode( data.r + ',' + data.p + ': ' ),
-				$( '<a>' )
-					.attr( {
-						target: '_blank',
-						href: pd.config.gerritUrl + '/r/' + data.r
-					} )
-					.text( response[ 0 ].subject )
-					.on( 'click', linkClick )
-			)
+	onChangeTags() {
+		super.onChangeTags( ...arguments );
+
+		this.$formInput.val(
+			// Join items with a pipe as the hidden input is single line
+			this.items.map( ( item ) => {
+				const data = item.getData();
+				return data.r ?
+					// 'latest' means the user didn't specify a patchset, and so wants the latest one.
+					( data.latest ? data.r : data.r + ',' + data.p ) :
+					data.input;
+			} ).join( '|' )
 		);
-		// Update input after ID normalization
-		this.onChangeTags();
-		this.updateInputSize();
-	} ).then( null, ( err ) => {
-		item.setLabel( item.getData().input + ': ' + err );
-		item.toggleValid( false );
-		this.updateInputSize();
-	} );
-
-	return item;
-};
-
-window.PatchSelectWidget.prototype.onChangeTags = function () {
-	window.PatchSelectWidget.super.prototype.onChangeTags.apply( this, arguments );
 
-	this.$formInput.val(
-		// Join items with a pipe as the hidden input is single line
-		this.items.map( ( item ) => {
+		const linkedTasks = {};
+		this.items.forEach( ( item ) => {
 			const data = item.getData();
-			return data.r ?
-				// 'latest' means the user didn't specify a patchset, and so wants the latest one.
-				( data.latest ? data.r : data.r + ',' + data.p ) :
-				data.input;
-		} ).join( '|' )
-	);
-
-	const linkedTasks = {};
-	this.items.forEach( ( item ) => {
-		const data = item.getData();
-		if ( data.linkedTasks ) {
-			data.linkedTasks.forEach( ( task ) => {
-				linkedTasks[ task ] = true;
-			} );
-		}
-	} );
+			if ( data.linkedTasks ) {
+				data.linkedTasks.forEach( ( task ) => {
+					linkedTasks[ task ] = true;
+				} );
+			}
+		} );
 
-	this.emit( 'linkedTasks', Object.keys( linkedTasks ) );
+		this.emit( 'linkedTasks', Object.keys( linkedTasks ) );
 
-	const patchKey = this.items.map( ( item ) => {
-		const data = item.getData();
-		return data.r + ',' + data.p;
-	} ).sort().join( '|' );
-	this.emit( 'matchWikis', pd.patchIndex[ patchKey ] );
-};
+		const patchKey = this.items.map( ( item ) => {
+			const data = item.getData();
+			return data.r + ',' + data.p;
+		} ).sort().join( '|' );
+		this.emit( 'matchWikis', pd.patchIndex[ patchKey ] );
+	}
 
-// Like the parent method, but works with outline, and uses getData instead of getLabel
-window.PatchSelectWidget.prototype.doInputBackspace = function ( e, withMetaKey ) {
-	if (
-		this.inputPosition === 'inline' &&
-		this.input.getValue() === '' &&
-		!this.isEmpty()
-	) {
-		// Delete the last item
-		const items = this.getItems();
-		const item = items[ items.length - 1 ];
-
-		if ( !item.isDisabled() && !item.isFixed() ) {
-			this.removeItems( [ item ] );
-			// If Ctrl/Cmd was pressed, delete item entirely.
-			// Otherwise put it into the text field for editing.
-			if ( !withMetaKey ) {
-				this.input.setValue( item.getData().input );
+	// Like the parent method, but works with outline, and uses getData instead of getLabel
+	doInputBackspace( e, withMetaKey ) {
+		if (
+			this.inputPosition === 'inline' &&
+			this.input.getValue() === '' &&
+			!this.isEmpty()
+		) {
+			// Delete the last item
+			const items = this.getItems();
+			const item = items[ items.length - 1 ];
+
+			if ( !item.isDisabled() && !item.isFixed() ) {
+				this.removeItems( [ item ] );
+				// If Ctrl/Cmd was pressed, delete item entirely.
+				// Otherwise put it into the text field for editing.
+				if ( !withMetaKey ) {
+					this.input.setValue( item.getData().input );
+				}
 			}
-		}
 
-		return false;
+			return false;
+		}
 	}
-};
 
-window.PatchSelectWidget.prototype.onTagSelect = function ( item ) {
-	if ( this.hasInput && this.allowEditTags && !item.isFixed() ) {
-		if ( this.input.getValue() ) {
-			this.addTagFromInput();
+	onTagSelect( item ) {
+		if ( this.hasInput && this.allowEditTags && !item.isFixed() ) {
+			if ( this.input.getValue() ) {
+				this.addTagFromInput();
+			}
+			// 1. Get the label of the tag into the input
+			this.input.setValue( item.getData().input );
+			// 2. Remove the tag
+			this.removeItems( [ item ] );
+			// 3. Focus the input
+			this.focus();
 		}
-		// 1. Get the label of the tag into the input
-		this.input.setValue( item.getData().input );
-		// 2. Remove the tag
-		this.removeItems( [ item ] );
-		// 3. Focus the input
-		this.focus();
 	}
 };
+
+OO.initClass( window.PatchSelectWidget );
+
+window.PatchSelectWidget.static.patchCache = {};