WebUI: Restore previously used tab on load #20705
Conversation
This simplifies development as developers can now directly set breakpoints in the browser on search code.
The log panel may be displayed before its JS has loaded, which results in an error. This prevents the error by delaying initialization until the necessary scripts are loaded.
This logic bug prevented the double click handler from being readded to rows once the search completed.
| let showSearchEngine = false; | ||
| let showRssReader = false; | ||
| let showLogViewer = false; |
There was a problem hiding this comment.
Is it possible to move them to some specific scope? I wouldn't like more global variables.
There was a problem hiding this comment.
I can move them to window.qBittorrent.Client, which seems like an appropriate place.
| @@ -1256,6 +1291,12 @@ window.addEventListener("DOMContentLoaded", function() { | |||
| }, | |||
| loadMethod: 'xhr', | |||
| contentURL: 'views/search.html', | |||
| require: { | |||
| js: ['scripts/search.js'], | |||
There was a problem hiding this comment.
Will it be better to include <script defer src="scripts/search.js"></script> in search.html?
There was a problem hiding this comment.
I think they're functionally equivalent, so would just be a matter of personal preference.
There was a problem hiding this comment.
I have thought a little more about it.
- If
search.htmlalways requiresearch.js, then it is better to include the js within it, rather than externally. <script>can havedeferattribute which might be able to speed up page loading.
ps. I would like to investigate whether if I can migrate all require.js and require.css to html equivalents.
| if (showSearchEngine && (previouslyUsedTab === 'search')) { | ||
| $('searchTabLink').click(); | ||
| } | ||
| else if (showRssReader && (previouslyUsedTab === 'rss')) { | ||
| $('rssTabLink').click(); | ||
| } | ||
| else if (showLogViewer && (previouslyUsedTab === 'log')) { | ||
| $('logTabLink').click(); | ||
| } | ||
| else { | ||
| LocalPreferences.set('selected_tab', 'transfers'); | ||
| } |
There was a problem hiding this comment.
maybe use a switch()?
| if (showSearchEngine && (previouslyUsedTab === 'search')) { | |
| $('searchTabLink').click(); | |
| } | |
| else if (showRssReader && (previouslyUsedTab === 'rss')) { | |
| $('rssTabLink').click(); | |
| } | |
| else if (showLogViewer && (previouslyUsedTab === 'log')) { | |
| $('logTabLink').click(); | |
| } | |
| else { | |
| LocalPreferences.set('selected_tab', 'transfers'); | |
| } | |
| switch (previouslyUsedTab) { | |
| case 'log': | |
| if (showLogViewer) | |
| $('logTabLink').click(); | |
| break; | |
| case 'rss': | |
| if (showRssReader) | |
| $('rssTabLink').click(); | |
| break; | |
| case 'search': | |
| if (showSearchEngine) | |
| $('searchTabLink').click(); | |
| break; | |
| case 'transfers': | |
| $('transfersTabLink').click(); | |
| break; | |
| } |
Note that I replaced LocalPreferences.set('selected_tab', 'transfers'); with case 'transfers'.
This PR restores the users previously used tab (Transfer, Search, RSS, etc.) when the Web UI is reloaded.
Screen.Recording.2024-04-14.at.23.33.19.mov