Effect: Define the jQuery variable before jQuery Color gets imported

We need to create a local jQuery because jQuery Color relies on it and the
global may not exist with AMD and a custom build (trac-10199). This worked
in UI 1.12 but stopped in 1.13 as jQuery Color is now sourced as an AMD module
and the variable started being defined after jQuery Color code. To restore the
proper order, move the variable declaration to a separate small module loaded
before jQuery Color.

Closes gh-1973

2 files changed, 24 insertions, 5 deletions

diff --git a/ui/effect.js b/ui/effect.js
index e2a072d96..37ce230c3 100644
--- a/ui/effect.js
+++ b/ui/effect.js
@@ -23,6 +23,7 @@
 		// AMD. Register as an anonymous module.
 		define( [
 			"jquery",
+			"./jquery-var-for-color",
 			"./vendor/jquery-color/jquery.color",
 			"./version"
 		], factory );
@@ -36,11 +37,7 @@
 
 var dataSpace = "ui-effects-",
 	dataSpaceStyle = "ui-effects-style",
-	dataSpaceAnimated = "ui-effects-animated",
-
-	// Create a local jQuery because jQuery Color relies on it and the
-	// global may not exist with AMD and a custom build (#10199)
-	jQuery = $;
+	dataSpaceAnimated = "ui-effects-animated";
 
 $.effects = {
 	effect: {}
diff --git a/ui/jquery-var-for-color.js b/ui/jquery-var-for-color.js
new file mode 100644
index 000000000..f37ed56da
--- /dev/null
+++ b/ui/jquery-var-for-color.js
@@ -0,0 +1,22 @@
+( function( factory ) {
+	"use strict";
+
+	if ( typeof define === "function" && define.amd ) {
+
+		// AMD. Register as an anonymous module.
+		define( [ "jquery", "./version" ], factory );
+	} else {
+
+		// Browser globals
+		factory( jQuery );
+	}
+} )( function( $ ) {
+	"use strict";
+
+// Create a local jQuery because jQuery Color relies on it and the
+// global may not exist with AMD and a custom build (#10199).
+// This module is a noop if used as a regular AMD module.
+// eslint-disable-next-line no-unused-vars
+var jQuery = $;
+
+} );