Merge pull request #14358 from jdalsem/beta-elgg5-issues

fixed(cropper): only register tab change fixes when cropper is ready
Elgg · Jun 2, 2023 · f7f97b6 · f7f97b6
2 parents 29275c2 + 9b1b185
commit f7f97b6
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 23 deletions.
diff --git a/views/default/elgg/comments.js b/views/default/elgg/comments.js
@@ -72,9 +72,7 @@ define(['jquery', 'elgg'], function ($, elgg) {
 							var $comment = $container.find('#elgg-object-' + comment_guid);
 							$comment.addClass('elgg-state-highlight');
 
-							$([document.documentElement, document.body]).animate({
-								scrollTop: $comment.offset().top
-							}, 500);
+							$comment[0].scrollIntoView({behavior: 'smooth'});
 
 							fix_pagination($container);
 						}

diff --git a/views/default/entity/edit/icon/crop.js b/views/default/entity/edit/icon/crop.js
@@ -26,25 +26,27 @@ define(['jquery', 'jquery-cropper/jquery-cropper'], function($) {
 				this.reload();
 			}
 
-			// enable/disable on tab changes
-			if ($field.not(':visible')) {
-				$field.data('resetNeeded', true);
-			}
+			$img.on('ready', function() {
+				// enable/disable on tab changes
+				if ($field.not(':visible')) {
+					$field.data('resetNeeded', true);
+				}
 
-			$field.parents('.elgg-tabs-component').find(' > .elgg-body > .elgg-menu-navigation-tabs-container > ul > li').on('open', function() {
-				if ($field.is(':visible')) {
-					$img.cropper('enable');
-					$img.cropper('resize');
-
-					if ($field.data('resetNeeded')) {
-						$img.cropper('reset');
+				$field.parents('.elgg-tabs-component').find(' > .elgg-body > .elgg-menu-navigation-tabs-container > ul > li').on('open', function() {
+					if ($field.is(':visible')) {
+						$img.cropper('enable');
+						$img.cropper('resize');
 
-						// only need a reset once
-						$field.data('resetNeeded', false);
+						if ($field.data('resetNeeded')) {
+							$img.cropper('reset');
+
+							// only need a reset once
+							$field.data('resetNeeded', false);
+						}
+					} else {
+						$img.cropper('disable');
 					}
-				} else {
-					$img.cropper('disable');
-				}
+				});
 			});
 		};
 

diff --git a/views/default/page/components/list/ajax-replace.js b/views/default/page/components/list/ajax-replace.js
@@ -32,9 +32,7 @@ define(['jquery', 'elgg/Ajax', 'elgg/system_messages'], function ($, Ajax, syste
 					$target_list.trigger('change');
 
 					// scroll to top of new content
-					$('html, body').animate({
-						scrollTop: $(id_selector).offset().top
-					}, 500);
+					$(id_selector)[0].scrollIntoView({behavior: 'smooth'});
 				} else {
 					require(['elgg/i18n'], function(i18n) {
 						system_messages.error(i18n.echo('ajax:pagination:no_data'));

diff --git a/views/default/page/components/tabs.js b/views/default/page/components/tabs.js
@@ -21,7 +21,8 @@ define(['jquery', 'elgg/Ajax'], function ($, Ajax) {
 		}
 
 		// find the tabs that have the selected state and remove that state
-		$target.closest('.elgg-tabs-component').find('.elgg-tabs').eq(0).find('.elgg-state-selected').removeClass('elgg-state-selected');
+		var $tabs_component = $target.closest('.elgg-tabs-component');
+		$tabs_component.find('.elgg-tabs').eq(0).find('.elgg-state-selected').removeClass('elgg-state-selected');
 
 		$link_item.addClass('elgg-state-selected');
 
@@ -34,6 +35,18 @@ define(['jquery', 'elgg/Ajax'], function ($, Ajax) {
 
 		if (trigger_open) {
 			$link_item.trigger('open');
+
+			// scroll tabs into view if needed
+			var rect = $link_item[0].getBoundingClientRect();
+
+			var isInViewport = rect.top >= 0 &&
+				rect.left >= 0 &&
+				rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+				rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+
+			if (!isInViewport) {
+				$tabs_component[0].scrollIntoView();
+			}
 		}
 
 		return true;