Skip to content

Fix/rework remember tabs #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LC43 wants to merge 7 commits into
base: dev
Choose a base branch
from
Open

Fix/rework remember tabs #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ab0c3cd
Rework remember tabs
LC43 Sep 23, 2025
2512eec
remove filter on admin_url
LC43 Sep 23, 2025
f4b4b72
Improve check on tabindex
LC43 Sep 23, 2025
e04f47e
construct url using native functions
LC43 Sep 23, 2025
27e2322
Move click event to own function
LC43 Sep 23, 2025
36beb38
Move init to dom content loaded
LC43 Sep 23, 2025
1a50369
Add check for index being a proper number
LC43 Sep 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 41 additions & 19 deletions assets/Feature/RememberTabs/rememberTabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,49 +18,71 @@ saltusRememberTabs.init = function () {
saltusRememberTabs.hitTab = function (index) {
setTimeout(function () {
let tab = document.querySelectorAll('.csf-nav-metabox ul li a');
if (tab) {
if (tab && tab[index]) {
tab[index].click();
}
}, 1000);
Comment on lines 19 to 24
Copy link

@gemini-code-assist gemini-code-assist bot Sep 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using a fixed setTimeout of 1 second to trigger the tab click is brittle and can negatively impact user experience. If the tab component takes longer than 1 second to initialize, this will fail. If it's faster, the user still experiences an unnecessary 1-second delay and may see the content flash from the default tab to the target tab. A more robust approach would be to listen for an initialization event from the tab component if one is provided, or use a MutationObserver to wait for the tab elements to become available and interactive.

Copy link
Contributor Author

@LC43 LC43 Sep 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it should be fine. this is the event that selects the active tab. it will load the preview first then the rest. right?

}

/**
* Creates the logic to check if we need to open a tab
* @returns
* @returns
*/
saltusRememberTabs.rememberTabInit = function () {

// check if URL contains tab parameter
let referer = document.querySelector('#referredby');
let refererUrl = new URL(window.location.origin + referer.value);
const referer = document.querySelector('#referredby');

if (typeof refererUrl.origin === 'undefined') {
return;
let tabIndex = null;
if ( referer && referer.value ) {
try {
let refererUrl = new URL(referer.value, window.location.href);
tabIndex = refererUrl.searchParams.get('tab');
} catch (e) {
// Invalid referer, ignore
}
}

let currentUrl = new URL(window.location.href);
if ( tabIndex === null ) {
tabIndex = currentUrl.searchParams.get('tab');
}
if (refererUrl.searchParams.get('tab')) {
saltusRememberTabs.hitTab(refererUrl.searchParams.get('tab'));
} else {
let currentUrl = new URL(window.location.href);
if (currentUrl.searchParams.get('tab')) {
saltusRememberTabs.hitTab(currentUrl.searchParams.get('tab'));

if ( tabIndex ) {
tabIndex = Number( tabIndex );
if ( ! isNaN( tabIndex ) ) {
saltusRememberTabs.hitTab( tabIndex );
}
}
// currently considers all tabs on page
}


saltusRememberTabs.attachTabListeners = function () {
let tabs = document.querySelectorAll('.csf-nav-metabox ul li');
let currentURL = window.location.href;
let url = new URL(currentURL);
let search_params = url.searchParams;

tabs.forEach(function (tab, index) {
tab.addEventListener('click', function () {

const currentUrl = new URL(window.location.href);
const search_params = currentUrl.searchParams;
search_params.set('tab', index);

const nextTitle = document.title;
const nextState = {
additionalInformation: 'Updated the URL with JS'
};
window.history.replaceState(nextState, nextTitle, url.toString());
window.history.replaceState(nextState, nextTitle, currentUrl.toString());
});
});
}
};


// Run on DOM ready
document.addEventListener('DOMContentLoaded', function () {

// Initialize the feature
saltusRememberTabs.init();

saltusRememberTabs.init();
// Attach listeners to tabs
saltusRememberTabs.attachTabListeners();
})
23 changes: 0 additions & 23 deletions src/Features/RememberTabs/SaltusRememberTabs.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ public function __construct( string $name, array $project ) {
*/
public function process() {
add_action( 'admin_enqueue_scripts', [ $this, 'load_script_css' ] );
add_filter( 'admin_url', [ $this, 'check_remember_tab_url' ], 10, 1 );
}
/**
* Check if the script and CSS should be loaded
Expand Down Expand Up @@ -71,26 +70,4 @@ public function load_script_css() {
true
);
}

/**
* Adds check to see if extra parameter is set on admin url on save cpt
* Used to remember tab
*
* @param string $link Admin url
* @return string The url
*/
public function check_remember_tab_url( $link ) {

global $current_screen;
if ( ! is_admin() || ! isset( $current_screen ) || $this->name !== $current_screen->post_type || wp_doing_ajax() ) {
return $link;
}

if ( isset( $_REQUEST['tab'] ) ) {
$params['tab'] = absint( $_REQUEST['tab'] );
$link = add_query_arg( $params, $link );
}

return $link;
}
}