From 4914dc8f71de5ee6a9e7e9a9951fca0322b97a9d Mon Sep 17 00:00:00 2001 From: Jeroen Dalsem Date: Wed, 27 Jan 2021 15:29:18 +0100 Subject: [PATCH] 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 --- composer.json | 2 +- composer.lock | 19 ++++++++----------- docs/appendix/upgrade-notes/3.x-to-4.0.rst | 15 +++++++++++++++ docs/guides/javascript.rst | 5 ----- engine/lib/elgglib.php | 2 -- engine/lib/views.php | 7 ++----- engine/views.php | 4 +--- .../default/theme_sandbox/components/tabs.php | 2 +- .../configure_utilities/profile_fields.js | 2 +- views/default/admin/plugins.js | 2 +- views/default/core/js/upgrader.js | 2 +- views/default/elgg.js.php | 6 ------ views/default/elgg/UserPicker.js | 2 +- views/default/elgg/autocomplete.js | 2 +- views/default/elgg/popup.js | 2 +- views/default/elgg/upgrades.js | 2 +- views/default/elgg/widgets.js | 3 +-- views/default/input/date.js | 8 ++------ 18 files changed, 38 insertions(+), 49 deletions(-) diff --git a/composer.json b/composer.json index 9e8a5a76b5d..81a1672611e 100644 --- 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 index 552ed12ddb4..ef52a46e886 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "64f0008f41ee8a7e907cb4c1ca91449b", + "content-hash": "2f6f45eb0aac3683041611fef154bbe8", "packages": [ { "name": "cakephp/cache", @@ -2125,18 +2125,15 @@ }, { "name": "npm-asset/components-jqueryui", - "version": "1.11.4", - "source": { - "type": "git", - "url": "git@github.com:components/jqueryui.git", - "reference": "c34f8dbf3ba57b3784b93f26119f436c0e8288e1" - }, + "version": "1.12.1", "dist": { - "type": "zip", - "url": "https://api.github.com/repos/components/jqueryui/zipball/c34f8dbf3ba57b3784b93f26119f436c0e8288e1", - "reference": "c34f8dbf3ba57b3784b93f26119f436c0e8288e1" + "type": "tar", + "url": "https://registry.npmjs.org/components-jqueryui/-/components-jqueryui-1.12.1.tgz" }, - "type": "npm-asset" + "type": "npm-asset", + "license": [ + "MIT" + ] }, { "name": "npm-asset/cropperjs", diff --git a/docs/appendix/upgrade-notes/3.x-to-4.0.rst b/docs/appendix/upgrade-notes/3.x-to-4.0.rst index 8b924f60478..07bb8e5b311 100644 --- 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 index 67499fb7d40..17f4fc80aa4 100644 --- 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 index 7335d374597..966165ce185 100644 --- 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 index bac0d7b2b47..c31387a1e96 100644 --- 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 index b9433d06ff0..fe0c444bda6 100644 --- 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 index 0fea6eb7402..181a078c199 100644 --- a/mod/developers/views/default/theme_sandbox/components/tabs.php +++ b/mod/developers/views/default/theme_sandbox/components/tabs.php @@ -55,7 +55,7 @@ ?>