Begin process of removing jQuery by supporting jQuery slim

joedolson · Dec 30, 2025 · Dec 29, 2025 · Dec 29, 2025 · Dec 29, 2025 · Dec 29, 2025
commit 0a2011cbaff484385a8cd58bb8a2d0ac4842b8c1
diff --git a/demos/video5.html b/demos/video5.html
@@ -7,13 +7,13 @@
 <link rel="stylesheet" href="demos.css" type="text/css">
 
 <!-- Dependencies -->
-<script src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+<script src="//code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>
 
 <!-- Able Player CSS -->
 <link rel="stylesheet" href="../build/ableplayer.min.css" type="text/css"/>
 
 <!-- Able Player JavaScript -->
-<script src="../build/ableplayer.dist.js"></script>
+<script src="../build/ableplayer.js"></script>
 
 <!-- CSS for this example -->
 <style>

diff --git a/scripts/control.js b/scripts/control.js
@@ -403,23 +403,15 @@
 			playerHeight = this.$playerDiv.height();
 			newMediaHeight = mediaHeight + playerHeight;
 
-			// fade slowly to transparency
-			this.$playerDiv.fadeTo(2000,0,function() {
-				/*
-				// when finished, position playerDiv offscreen
-				// thisObj.$playerDiv.addClass('able-offscreen');
-				// Expand the height of mediaContainer to fill the void (needs work)
-				thisObj.$mediaContainer.animate({
-					height: newMediaHeight
-				},500);
-				*/
-			});
+			// fade slowly to transparency in CSS
+			this.$playerDiv.addClass( 'fade-out' );
+			// then move off screen?
 		} else if (direction == 'in') {
 			// restore captionsContainer to its original height (needs work)
 			// this.$mediaContainer.removeAttr('style');
 			// fade relatively quickly back to its original position with full opacity
 			// this.$playerDiv.removeClass('able-offscreen').fadeTo(100,1);
-			this.$playerDiv.fadeTo(100,1);
+			this.$playerDiv.addClass( 'fade-in' );
 		}
 	};
 
@@ -1502,11 +1494,7 @@
 
 	AblePlayer.prototype.showTooltip = function($tooltip) {
 
-		if (($tooltip).is(':animated')) {
-			$tooltip.stop(true,true).show();
-		} else {
-			$tooltip.stop().show();
-		}
+		$tooltip.show();
 	};
 
 	AblePlayer.prototype.showAlert = function( msg, location = 'main' ) {
@@ -1534,7 +1522,7 @@
 
 		if (location !== 'screenreader') {
 			setTimeout( function () {
-				$alertBox.fadeOut(300);
+				$alertBox.hide();
 			}, 30000 );
 		}
 	};

diff --git a/scripts/metadata.js b/scripts/metadata.js
@@ -65,7 +65,10 @@
                   typeof showDuration !== "undefined" &&
                   !isNaN(showDuration)
                 ) {
-                  $(line).show().delay(showDuration).fadeOut();
+					const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+					delay(showDuration).then(() => {
+						$(line).show().hide();
+					});
                 } else {
                   // no duration specified. Just show the element until end time specified in VTT file
                   $(line).show();

diff --git a/scripts/track.js b/scripts/track.js
@@ -429,7 +429,7 @@
 			deferred.resolve(src, sanitizedTrackText);
 			$tempDiv.remove();
 		})
-		.catch(error => {
+		.catch( error => {
 			if (thisObj.debug) {
 				console.log( "error reading file " + src + ": " + error );
 			}

diff --git a/scripts/translation.js b/scripts/translation.js
@@ -108,28 +108,34 @@
 			this.searchLang = this.lang;
 		}
 		translationFile = this.rootPath + 'translations/' + this.lang + '.json';
-		$.getJSON(translationFile, function(data) {
-			// success!
-			thisObj.tt = data;
-			thisObj.translationFiles = true;
-			deferred.resolve();
-		})
-		.fail(function() {
-			console.log( "Error: Translation files should be updated to JSON.",translationFile);
-			translationFile = thisObj.rootPath + 'translations/' + thisObj.lang + '.js';
-			$.getJSON(translationFile, function(data) {
-				// success!
+		fetch(translationFile)
+			.then( response => {
+				return response.json();
+			})
+			.then( data => {
 				thisObj.tt = data;
 				thisObj.translationFiles = true;
 				deferred.resolve();
 			})
-			.fail( function() {
-				console.log( "Error: Unable to load translation file:", translationFile);
-				thisObj.tt = {};
-				thisObj.translationFiles = false;
-				deferred.resolve();
+			.catch( error => {
+				console.log( "Error: Translation files should be updated to JSON." + error,translationFile);
+				translationFile = thisObj.rootPath + 'translations/' + thisObj.lang + '.js';
+				fetch(translationFile)
+					.then( response => {
+						return response.json();
+					})
+					.then( data => {
+						thisObj.tt = data;
+						thisObj.translationFiles = true;
+						deferred.resolve();
+					})
+					.catch( error => {
+						console.log( "Error: Unable to load translation file:", translationFile);
+						thisObj.tt = {};
+						thisObj.translationFiles = false;
+						deferred.resolve();
+					});
 			});
-		})
 		return deferred.promise();
 	};
 
@@ -142,22 +148,23 @@
 			// Create an array of sample description text in all languages
 			// This needs to be readily available for testing different voices
 			// in the Description Preferences dialog
-			var thisObj, supportedLangs, i, thisLang, translationFile, thisText, translation;
+			var thisObj, supportedLangs, thisLang, translationFile, thisText, translation;
 
 			supportedLangs = this.getSupportedLangs();
 			thisObj = this;
 
 			this.sampleText = [];
 			for ( const [key,value] of Object.entries(supportedLangs) ) {
 				translationFile = this.rootPath + 'translations/' + key + '.json';
-				$.getJSON(translationFile, thisLang, (function(thisLang) {
-						return function(data) {
-							thisText = data.sampleDescriptionText;
-							translation = {'lang':thisLang, 'text': thisText};
-							thisObj.sampleText.push(translation);
-						};
-					}(key)) // pass lang to callback function
-				);
+				fetch(translationFile)
+					.then( response => {
+						return response.json();
+					})
+					.then( data => {
+						thisText = data.sampleDescriptionText;
+						translation = {'lang':thisLang, 'text': thisText};
+						thisObj.sampleText.push(translation);
+					});
 			}
 		}
 	};

diff --git a/scripts/vts.js b/scripts/vts.js
@@ -947,7 +947,11 @@
 		// because it's positioning needs are unique
 		// For now, alertDiv is fixed at top left of screen
 		// but could ultimately be modified to appear near the point of action in the VTS table
-		this.$vtsAlert.text(message).show().delay(3000).fadeOut('slow');
+		const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+		this.$vtsAlert.text(message).show();
+		delay(3000).then(() => {
+			this.$vtsAlert.text(message).hide()
+		});
 	};
 
 	AblePlayer.prototype.parseVtsOutput = function($table) {