diff --git a/resources/js/modules/navigation.ts b/resources/js/modules/navigation.ts index 32c89aca9f..48c6543745 100644 --- a/resources/js/modules/navigation.ts +++ b/resources/js/modules/navigation.ts @@ -285,14 +285,20 @@ function traverseForPaths () { * * @param $expandElem expander * @param callback callback function + * @param skipTreeAnimation skip tree opening animation when true */ -function expandTreeNode ($expandElem, callback = undefined): void { +function expandTreeNode ($expandElem, callback = undefined, skipTreeAnimation = false): void { let $children = $expandElem.closest('li').children('div.list_container'); const $icon = $expandElem.find('img'); if ($expandElem.hasClass('loaded')) { if ($icon.is('.ic_b_plus')) { $icon.removeClass('ic_b_plus').addClass('ic_b_minus'); - $children.slideDown('fast'); + // check whether to show tree immediately or play animation + if (skipTreeAnimation) { + $children.show(); + } else { + $children.slideDown('fast'); + } } if (callback && typeof callback === 'function') { @@ -314,7 +320,13 @@ function expandTreeNode ($expandElem, callback = undefined): void { const $destination = $expandElem.closest('li'); $icon.removeClass('ic_b_plus').addClass('ic_b_minus'); $children = $destination.children('div.list_container'); - $children.slideDown('fast'); + // check whether to show tree immediately or play animation + if (skipTreeAnimation) { + $children.show(); + } else { + $children.slideDown('fast'); + } + if ($destination.find('ul > li').length === 1) { $destination.find('ul > li') .find('a.expander.container') @@ -365,8 +377,10 @@ function scrollToView ($element, $forceToTop) { /** * Expand the navigation and highlight the current database or table/view + * + * @param {boolean} skipTreeAnimation skip tree opening animation when true (passed down into expandTreeNode from fullExpand) */ -function showCurrent (): void { +function showCurrent (skipTreeAnimation = false): void { const db = CommonParams.get('db'); const table = CommonParams.get('table'); @@ -402,7 +416,7 @@ function showCurrent (): void { handleTableOrDb(table, $('#pma_navigation_tree_content')); } } else if ($dbItem) { - fullExpand(table, $dbItem); + fullExpand(table, $dbItem, skipTreeAnimation); } } else if ($('#navi_db_select').length && $('#navi_db_select').val()) { $('#navi_db_select').val('').hide().trigger('change'); @@ -423,12 +437,12 @@ function showCurrent (): void { $('#pma_navigation_tree').find('> div'), dbItemName, 'database', ! table ); - fullExpand(table, $dbItem); + fullExpand(table, $dbItem, skipTreeAnimation); } Navigation.showFullName($('#pma_navigation_tree')); - function fullExpand (table, $dbItem) { + function fullExpand (table, $dbItem, skipTreeAnimation) { const $expander = $dbItem.children('div').first().children('a.expander'); // if not loaded or loaded but collapsed if (! $expander.hasClass('loaded') || @@ -436,7 +450,7 @@ function showCurrent (): void { ) { Navigation.expandTreeNode($expander, function () { handleTableOrDb(table, $dbItem); - }); + }, skipTreeAnimation); } else { handleTableOrDb(table, $dbItem); } @@ -655,7 +669,7 @@ function reload (callback = null, paths = null): void { $('#pma_navigation_tree').html(data.message).children('div').show(); if ($('#pma_navigation_tree').hasClass('synced')) { Navigation.selectCurrentDatabase(); - Navigation.showCurrent(); + Navigation.showCurrent(paths !== null); // skip tree opening animation when there is tree state in sessionStorage } // Fire the callback, if any