Retranslate UI instead of recreating it
This commit is contained in:
parent
e6f1802508
commit
2b7130351e
1 changed files with 26 additions and 13 deletions
|
@ -29,10 +29,10 @@ import 'flexStyles';
|
|||
html += '</div>';
|
||||
html += '<div class="headerRight">';
|
||||
html += '<span class="headerSelectedPlayer"></span>';
|
||||
html += `<button is="paper-icon-button-light" class="headerSyncButton syncButton headerButton headerButtonRight hide" title="${globalize.translate('ButtonSyncPlay')}"><span class="material-icons sync_disabled"></span></button>`;
|
||||
html += `<button is="paper-icon-button-light" class="headerAudioPlayerButton audioPlayerButton headerButton headerButtonRight hide" title="${globalize.translate('ButtonPlayer')}"><span class="material-icons music_note"></span></button>`;
|
||||
html += `<button is="paper-icon-button-light" class="headerCastButton castButton headerButton headerButtonRight hide" title="${globalize.translate('ButtonCast')}"><span class="material-icons cast"></span></button>`;
|
||||
html += `<button type="button" is="paper-icon-button-light" class="headerButton headerButtonRight headerSearchButton hide" title="${globalize.translate('Search')}"><span class="material-icons search"></span></button>`;
|
||||
html += '<button is="paper-icon-button-light" class="headerSyncButton syncButton headerButton headerButtonRight hide"><span class="material-icons sync_disabled"></span></button>';
|
||||
html += '<button is="paper-icon-button-light" class="headerAudioPlayerButton audioPlayerButton headerButton headerButtonRight hide"><span class="material-icons music_note"></span></button>';
|
||||
html += '<button is="paper-icon-button-light" class="headerCastButton castButton headerButton headerButtonRight hide"><span class="material-icons cast"></span></button>';
|
||||
html += '<button type="button" is="paper-icon-button-light" class="headerButton headerButtonRight headerSearchButton hide"><span class="material-icons search"></span></button>';
|
||||
html += '<button is="paper-icon-button-light" class="headerButton headerButtonRight headerUserButton hide"><span class="material-icons person"></span></button>';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
@ -43,13 +43,16 @@ import 'flexStyles';
|
|||
skinHeader.classList.add('skinHeader-blurred');
|
||||
skinHeader.innerHTML = html;
|
||||
|
||||
headerBackButton = skinHeader.querySelector('.headerBackButton');
|
||||
headerHomeButton = skinHeader.querySelector('.headerHomeButton');
|
||||
mainDrawerButton = skinHeader.querySelector('.mainDrawerButton');
|
||||
headerUserButton = skinHeader.querySelector('.headerUserButton');
|
||||
headerCastButton = skinHeader.querySelector('.headerCastButton');
|
||||
headerAudioPlayerButton = skinHeader.querySelector('.headerAudioPlayerButton');
|
||||
headerSearchButton = skinHeader.querySelector('.headerSearchButton');
|
||||
headerSyncButton = skinHeader.querySelector('.headerSyncButton');
|
||||
|
||||
retranslateUi();
|
||||
lazyLoadViewMenuBarImages();
|
||||
bindMenuEvents();
|
||||
updateCastIcon();
|
||||
|
@ -73,8 +76,26 @@ import 'flexStyles';
|
|||
appRouter.back();
|
||||
}
|
||||
|
||||
function retranslateUi() {
|
||||
if (headerSyncButton) {
|
||||
headerSyncButton.title = globalize.translate('ButtonSyncPlay');
|
||||
}
|
||||
|
||||
if (headerAudioPlayerButton) {
|
||||
headerAudioPlayerButton.title = globalize.translate('ButtonPlayer');
|
||||
}
|
||||
|
||||
if (headerCastButton) {
|
||||
headerCastButton.title = globalize.translate('ButtonCast');
|
||||
}
|
||||
|
||||
if (headerSearchButton) {
|
||||
headerSearchButton.title = globalize.translate('Search');
|
||||
}
|
||||
}
|
||||
|
||||
function updateUserInHeader(user) {
|
||||
renderHeader();
|
||||
retranslateUi();
|
||||
|
||||
let hasImage;
|
||||
|
||||
|
@ -153,14 +174,10 @@ import 'flexStyles';
|
|||
}
|
||||
|
||||
function bindMenuEvents() {
|
||||
mainDrawerButton = document.querySelector('.mainDrawerButton');
|
||||
|
||||
if (mainDrawerButton) {
|
||||
mainDrawerButton.addEventListener('click', toggleMainDrawer);
|
||||
}
|
||||
|
||||
const headerBackButton = skinHeader.querySelector('.headerBackButton');
|
||||
|
||||
if (headerBackButton) {
|
||||
headerBackButton.addEventListener('click', onBackClick);
|
||||
}
|
||||
|
@ -772,10 +789,6 @@ import 'flexStyles';
|
|||
}
|
||||
|
||||
function updateBackButton(page) {
|
||||
if (!headerBackButton) {
|
||||
headerBackButton = document.querySelector('.headerBackButton');
|
||||
}
|
||||
|
||||
if (headerBackButton) {
|
||||
if (page.getAttribute('data-backbutton') !== 'false' && appRouter.canGoBack()) {
|
||||
headerBackButton.classList.remove('hide');
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue