gian/phpmyadmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Allow skipping the tree opening animation in expandTreeNode

Browse Source 
Every link click does a full page reload, which rebuilds the navigation
tree and replays the tree opening animation.

Add a 'skipTreeAnimation' parameter (defaults to false) to
expandTreeNode. When this parameter is true, the tree opening animation
is skipped. The 'skipTreeAnimation' parameter is passed down to
expandTreeNode through showCurrent and fullExpand.

requestNaviReload (called by Navigation.reload) passes 'paths !== null'
into 'skipTreeAnimation'. When the tree state is being restored from
sessionStorage, 'paths !== null' resolves to true, which when passed
into Navigation.showCurrent causes the animation to be skipped.

Signed-off-by: Ethan Reed <etchre@outlook.com>
This commit is contained in:
Ethan Reed 2026-06-11 00:57:05 -07:00
parent 8f42c3b3e7
commit d01fe03364
1 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
resources/js/modules/navigation.ts
View File

@ -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