feat(js): jquery ui updated to v1.12.1 and can now supports AMD

BREAKING CHANGE: If you need jquery ui related functionality like sortables, make sure to add the correct dependencies to your own javascript
Elgg · Jan 29, 2021 · 4914dc8 · 4914dc8
1 parent 97f9e5f
commit 4914dc8
Show file tree

Hide file tree

Showing 18 changed files with 38 additions and 49 deletions.
diff --git a/composer.json b/composer.json
@@ -30,7 +30,7 @@
         "michelf/php-markdown": "^1.5.0",
         "misd/linkify": "~1.1.2",
         "monolog/monolog": "^1.23",
-        "npm-asset/components-jqueryui": "~1.11.4",
+        "npm-asset/components-jqueryui": "~1.12.1",
         "npm-asset/cropperjs": "~1.4.3",
         "npm-asset/jquery": "^2.2.4",
         "npm-asset/jquery-cropper": "~1.0.0",

diff --git a/composer.lock b/composer.lock
diff --git a/docs/appendix/upgrade-notes/3.x-to-4.0.rst b/docs/appendix/upgrade-notes/3.x-to-4.0.rst
@@ -126,6 +126,21 @@ This functionality was never used by core and hardly seen in plugins. Use AMD lo
 
 The ``ElggPriorityList`` javascript class has been removed from the system.
 
+jQuery UI
+~~~~~~~~~
+
+The jQuery UI library has been updated to v1.12.x. The library is no longer loaded in full by default.
+If you need to use features from the library you can require them in your own script. For example to be able to use the sortable functionality do the following:
+
+.. code-block:: js
+
+	require('jquery-ui/widgets/sortable');
+
+	// or in your own AMD script
+	define(['jquery-ui/widgets/sortable'], function() {
+		// use the sortable
+	});
+
 Plugin bootstrapping
 --------------------
 

diff --git a/docs/guides/javascript.rst b/docs/guides/javascript.rst
@@ -233,11 +233,6 @@ Some things to note
 Modules provided with Elgg
 ==========================
 
-Modules ``jquery`` and ``jquery-ui``
-------------------------------------
-
-You must depend on these modules to use ``$`` or ``$.ui`` methods. In the future Elgg may stop loading these by default.
-
 Module ``elgg``
 ---------------
 

diff --git a/engine/lib/elgglib.php b/engine/lib/elgglib.php
@@ -82,8 +82,6 @@ function elgg_require_js($name) {
 /**
  * Cancel a request to load an AMD module onto the page.
  *
- * @note The elgg, jquery, and jquery-ui modules cannot be cancelled.
- *
  * @param string $name The AMD module name.
  * @return void
  * @since 2.1.0

diff --git a/engine/lib/views.php b/engine/lib/views.php
@@ -1536,9 +1536,6 @@ function elgg_views_boot() {
 	elgg_register_external_file('js', 'jquery', elgg_get_simplecache_url('jquery.js'), 'head');
 	elgg_load_external_file('js', 'jquery');
 
-	elgg_register_external_file('js', 'jquery-ui', elgg_get_simplecache_url('jquery-ui.js'), 'head');
-	elgg_load_external_file('js', 'jquery-ui');
-
 	elgg_extend_view('require.js', 'elgg/require_config.js', 100);
 
 	elgg_register_external_file('js', 'require', elgg_get_simplecache_url('require.js'), 'head');
@@ -1549,7 +1546,7 @@ function elgg_views_boot() {
 
 	elgg_register_external_file('css', 'font-awesome', elgg_get_simplecache_url('font-awesome/css/all.min.css'));
 	elgg_load_external_file('css', 'font-awesome');
-	
+
 	elgg_define_js('cropperjs', [
 		'src' => elgg_get_simplecache_url('cropperjs/cropper.min.js'),
 	]);
@@ -1567,7 +1564,7 @@ function elgg_views_boot() {
 	elgg_extend_view('elgg.css', 'entity/edit/icon/crop.css');
 
 	elgg_define_js('jquery.ui.autocomplete.html', [
-		'deps' => ['jquery-ui'],
+		'deps' => ['jquery-ui/widgets/autocomplete'],
 	]);
 
 	elgg_register_ajax_view('languages.js');

diff --git a/engine/views.php b/engine/views.php
@@ -11,7 +11,6 @@
 		 */
 		"jquery.js" => "vendor/npm-asset/jquery/dist/jquery.min.js",
 		"jquery.min.map" => "vendor/npm-asset/jquery/dist/jquery.min.map",
-		"jquery-ui.js" => "vendor/npm-asset/components-jqueryui/jquery-ui.min.js",
 
 		"jquery.colorbox.js" => "vendor/npm-asset/jquery-colorbox/jquery.colorbox-min.js",
 		"require.js" => "vendor/npm-asset/requirejs/require.js",
@@ -21,8 +20,7 @@
 		// need to use some folder structure, because FontAwesome includes fonts relative to css
 		"font-awesome/" => "vendor/fortawesome/font-awesome/",
 
-		// For datepicker. More info in the jquery-ui.js view
-		"jquery-ui/i18n/" => "vendor/npm-asset/components-jqueryui/ui/minified/i18n",
+		"jquery-ui/" => "vendor/npm-asset/components-jqueryui/ui",
 
 		/**
 		 * __DIR__ should be utilized when referring to assets that are checked in to version control.

diff --git a/mod/developers/views/default/theme_sandbox/components/tabs.php b/mod/developers/views/default/theme_sandbox/components/tabs.php
@@ -55,7 +55,7 @@
 
 ?>
 <script>
-	require(['jquery', 'elgg/ready'], function($) {
+	require(['jquery', 'jquery-ui/effects/effect-slide'], function($) {
 		$(document).on('open', '.theme-sandbox-tab-callback', function() {
 			$(this).find('a').text('Clicked!');
 			$(this).data('target').hide().show('slide', {

diff --git a/mod/profile/views/default/admin/configure_utilities/profile_fields.js b/mod/profile/views/default/admin/configure_utilities/profile_fields.js
@@ -1,7 +1,7 @@
 /**
  * Configure profile fields specific javascript functions
  */
-define(['jquery', 'elgg/Ajax'], function($, Ajax) {
+define(['jquery', 'elgg/Ajax', 'jquery-ui/widgets/sortable'], function($, Ajax) {
 
 	// draggable profile field reordering.
 	$('#elgg-profile-fields').sortable({

diff --git a/views/default/admin/plugins.js b/views/default/admin/plugins.js
@@ -1,4 +1,4 @@
-define(['jquery', 'elgg', 'elgg/spinner', 'elgg/Ajax'], function($, elgg, spinner, Ajax) {
+define(['jquery', 'elgg', 'elgg/spinner', 'elgg/Ajax', 'jquery-ui/widgets/sortable'], function($, elgg, spinner, Ajax) {
 
 	function freezePlugins() {
 		$('#elgg-plugin-list-cover').css('display', 'block');

diff --git a/views/default/core/js/upgrader.js b/views/default/core/js/upgrader.js
@@ -7,7 +7,7 @@
  *
  * @since 3.0.0
  */
-define(['jquery', 'elgg', 'elgg/Ajax', 'elgg/spinner', 'elgg/popup'], function($, elgg, Ajax, spinner, popup) {
+define(['jquery', 'elgg', 'elgg/Ajax', 'elgg/spinner', 'elgg/popup', 'jquery-ui/widgets/progressbar'], function($, elgg, Ajax, spinner, popup) {
 
 	var UNKNOWN_COUNT = -1;
 	var upgrades = $('.elgg-item-object-elgg_upgrade');

diff --git a/views/default/elgg.js.php b/views/default/elgg.js.php
@@ -49,12 +49,6 @@
 define('jquery', function () {
 	return jQuery;
 });
-define('jquery-ui');
-
-// The datepicker language modules depend on "../datepicker", so to avoid RequireJS from
-// trying to load that, we define it manually here. The lang modules have names like
-// "jquery-ui/i18n/datepicker-LANG.min" and these views are mapped in /views.php
-define('jquery-ui/datepicker', jQuery.datepicker);
 
 define('elgg', ['sprintf', 'jquery', 'languages/' + elgg.get_language()], function(vsprintf, $, translations) {
 	elgg.add_translation(elgg.get_language(), translations);

diff --git a/views/default/elgg/UserPicker.js b/views/default/elgg/UserPicker.js
@@ -1,5 +1,5 @@
 /** @module elgg/UserPicker */
-define(['jquery', 'elgg', 'elgg/Ajax', 'jquery.ui.autocomplete.html'], function($, elgg, Ajax) {
+define(['jquery', 'elgg', 'elgg/Ajax', 'jquery-ui/widgets/autocomplete', 'jquery.ui.autocomplete.html'], function($, elgg, Ajax) {
 
 	/**
 	 * @param {HTMLElement} wrapper outer div

diff --git a/views/default/elgg/autocomplete.js b/views/default/elgg/autocomplete.js
@@ -1,4 +1,4 @@
-define(['jquery', 'jquery.ui.autocomplete.html'], function ($) {
+define(['jquery', 'jquery-ui/widgets/autocomplete', 'jquery.ui.autocomplete.html'], function ($) {
 
 	return {
 		init: function () {

diff --git a/views/default/elgg/popup.js b/views/default/elgg/popup.js
@@ -5,7 +5,7 @@
  * @module elgg/popup
  * @since 2.2
  */
-define('elgg/popup', ['elgg', 'jquery', 'jquery-ui'], function (elgg, $) {
+define('elgg/popup', ['elgg', 'jquery', 'jquery-ui/position', 'jquery-ui/unique-id'], function (elgg, $) {
 
 	var popup = {
 		/**

diff --git a/views/default/elgg/upgrades.js b/views/default/elgg/upgrades.js
@@ -3,7 +3,7 @@
  *
  * @internal
  */
-define(['jquery', 'elgg', 'elgg/Ajax'], function($, elgg, Ajax) {
+define(['jquery', 'elgg', 'elgg/Ajax', 'jquery-ui/widgets/progressbar'], function($, elgg, Ajax) {
 
 	// The already displayed messages are saved here
 	var errorMessages = [];

diff --git a/views/default/elgg/widgets.js b/views/default/elgg/widgets.js
@@ -1,15 +1,14 @@
 /**
  * @module elgg/widgets
  */
-define(['jquery', 'elgg', 'elgg/Ajax', 'elgg/ready'], function ($, elgg, Ajax) {
+define(['jquery', 'elgg', 'elgg/Ajax', 'jquery-ui/widgets/sortable', 'elgg/ready'], function ($, elgg, Ajax) {
 
 	var widgets = {};
 
 	/**
 	 * Widgets initialization
 	 *
 	 * @return void
-	 * @requires jqueryui.sortable
 	 */
 	widgets.init = function () {
 

diff --git a/views/default/input/date.js b/views/default/input/date.js
@@ -1,15 +1,11 @@
-define(function (require) {
-
-	var elgg = require('elgg');
-	var $ = require('jquery');
-	require('jquery-ui');
+define(['jquery', 'elgg', 'jquery-ui/widgets/datepicker'], function ($, elgg) {
 
 	// the language module may need loading
 	var i18n_ready = $.Deferred();
 	if (elgg.get_language() === 'en') {
 		i18n_ready.resolve();
 	} else {
-		require(['jquery-ui/i18n/datepicker-' + elgg.get_language() + '.min'], function () {
+		require(['jquery-ui/i18n/datepicker-' + elgg.get_language()], function () {
 			i18n_ready.resolve();
 		}, function () {
 			// if load fails (e.g. lang code mismatch), carry on with English