eslint: enforce no-jquery/no-global-selector

Author: okerekechinweotito

.eslintrc.json

@@ -12,7 +12,6 @@
 		"sourceType": "module"
 	},
 	"rules": {
-		"no-jquery/no-global-selector": "warn",
 		"yml/no-empty-document": "warn",
 		"yml/no-empty-mapping-value": "warn"
 	}

assets/app.js

@@ -3,9 +3,9 @@ import './styles/app.css';
 import 'select2';
 
 const $ = require( 'jquery' );
-const $select2 = $( '#lang' );
+const $select2 = $( document.getElementById( 'lang' ) );
 let selectedLanguages = [];
-const $lineDetectionSelect = $( '#line-id' );
+const $lineDetectionSelect = $( document.getElementById( 'line-id' ) );
 let lineModels = null;
 
 const Cropper = require( 'cropperjs' );
@@ -86,7 +86,7 @@ $( () => {
 	fetchLineModelsJSON();
 
 	// Remove nojs class, for styling non-Javascript users.
-	$( 'html' ).removeClass( 'nojs' );
+	$( document.documentElement ).removeClass( 'nojs' );
 
 	// Initiate Select2, which allows dynamic entry of languages.
 	$select2.select2( {
@@ -111,68 +111,69 @@ $( () => {
 	const previousDataPlaceholder = $select2.attr( 'data-placeholder' );
 
 	// Show engine-specific options.
-	$( '[name=engine]' ).on( 'change', ( e ) => {
+	$( document.querySelectorAll( '[name=engine]' ) ).on( 'change', ( e ) => {
 		const engine = e.target.value;
 		updateSelect2Options( engine );
-		$( '.engine-options' ).addClass( 'hidden' );
-		$( `#${ engine }-options` ).removeClass( 'hidden' );
+		$( document.querySelectorAll( '.engine-options' ) ).addClass( 'hidden' );
+		$( document.getElementById( `${ engine }-options` ) ).removeClass( 'hidden' );
 		if ( engine === 'tesseract' || engine === 'google' ) {
 			$select2.prop( 'required', false );
 			$select2.attr( 'data-placeholder', previousDataPlaceholder );
 			$select2.data( 'select2' ).selection.placeholder.text = previousDataPlaceholder;
-			$( '#transkribus-lang-label' ).addClass( 'hidden' );
-			$( '#optional-lang-label' ).removeClass( 'hidden' );
+			$( document.getElementById( 'transkribus-lang-label' ) ).addClass( 'hidden' );
+			$( document.getElementById( 'optional-lang-label' ) ).removeClass( 'hidden' );
 		} else {
 			updateLineModelOptions();
-			$( '#transkribus-help' ).removeClass( 'hidden' );
+			$( document.getElementById( 'transkribus-help' ) ).removeClass( 'hidden' );
 			$select2.prop( 'required', true );
 			$select2.attr( 'data-placeholder', '' );
 			$select2.data( 'select2' ).selection.placeholder.text = '';
-			$( '#optional-lang-label' ).addClass( 'hidden' );
-			$( '#transkribus-lang-label' ).removeClass( 'hidden' );
+			$( document.getElementById( 'optional-lang-label' ) ).addClass( 'hidden' );
+			$( document.getElementById( 'transkribus-lang-label' ) ).removeClass( 'hidden' );
 		}
 	} );
 
 	// modify selected engine after loading the page with preselected engine
-	const $engineRadioFields = $( '[name=engine]:checked' );
+	const $engineRadioFields = $( document.querySelector( '[name=engine]:checked' ) );
 	if ( $engineRadioFields.val() === 'transkribus' ) {
 		$select2.attr( 'data-placeholder', '' );
 	} else {
 		$select2.attr( 'data-placeholder', previousDataPlaceholder );
 	}
 
 	// For the result page. Makes the 'Copy' button copy the transcription to the clipboard.
-	const $copyButton = $( '.copy-button' );
+	const $copyButton = $( document.querySelector( '.copy-button' ) );
 	if ( $copyButton.length ) {
 		$copyButton.on( 'click', ( e ) => {
 			e.preventDefault();
-			const $textarea = $( '#text' );
+			const $textarea = $( document.getElementById( 'text' ) );
 			$textarea.trigger( 'select' );
 			document.execCommand( 'copy' );
 			$copyButton.text( $copyButton.data( 'copied-text' ) );
 		} );
 	}
 
-	const $submitBtns = $( '.submit-full, .submit-crop' );
+	const $submitBtns = $( document.querySelectorAll( '.submit-full, .submit-crop' ) );
+	const $loader = $( document.querySelector( '.loader' ) );
 	$submitBtns.closest( 'form' ).on( 'submit', () => {
 		$submitBtns.attr( 'disabled', true );
-		$( '.loader' ).removeClass( 'hidden' );
+		$loader.removeClass( 'hidden' );
 	} );
 	// Re-enable submit buttons on pagehide, so that they are re-enabled if returned to via browser history
 	$( window ).on( 'pagehide', () => {
 		$submitBtns.attr( 'disabled', false );
-		$( '.loader' ).addClass( 'hidden' );
+		$loader.addClass( 'hidden' );
 	} );
 
-	const $ocrOutputDiv = $( '.ocr-output' );
+	const $ocrOutputDiv = $( document.querySelector( '.ocr-output' ) );
 	if ( $ocrOutputDiv.length ) {
 		// Cropper.
 		const img = document.getElementById( 'source-image' ),
 			x = document.querySelector( '[name="crop[x]"]' ),
 			y = document.querySelector( '[name="crop[y]"]' ),
 			width = document.querySelector( '[name="crop[width]"]' ),
 			height = document.querySelector( '[name="crop[height]"]' ),
-			$modeButtons = $( '.drag-mode' );
+			$modeButtons = $( document.querySelectorAll( '.drag-mode' ) );
 		const cropper = new Cropper( img, {
 			viewMode: 2,
 			dragMode: 'move',
@@ -183,7 +184,7 @@ $( () => {
 			responsive: true,
 			ready() {
 				// Make textarea match height of image.
-				$( '#text' ).css( {
+				$( document.getElementById( 'text' ) ).css( {
 					height: cropper.getContainerData().height
 				} );
 				// React to changes in the crop-mode buttons.
@@ -206,18 +207,18 @@ $( () => {
 				width.value = Math.round( event.detail.width );
 				height.value = Math.round( event.detail.height );
 				// Enable the cropping buttons. No need to disable them ever because there's no way to remove the crop box.
-				$( '.btn.submit-crop' ).attr( 'disabled', false ).removeClass( 'disabled' );
+				$( document.querySelectorAll( '.btn.submit-crop' ) ).attr( 'disabled', false ).removeClass( 'disabled' );
 				$modeButtons.attr( 'disabled', false );
 			}
 		} );
 
 		// When setting a new image URL, remove the preview and the crop dimensions.
-		$( '[name=image]' ).on( 'change', () => {
+		$( document.querySelector( '[name=image]' ) ).on( 'change', () => {
 			$ocrOutputDiv.remove();
 		} );
 
 		// When submitting the main 'transcribe' button, do not send crop dimensions.
-		$( '.submit-full' ).on( 'click', () => {
+		$( document.querySelector( '.submit-full' ) ).on( 'click', () => {
 			x.value = null;
 			y.value = null;
 			width.value = null;