diff --git a/src/app/app.ts b/src/app/app.ts index 573ec021..0db06566 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -72,7 +72,19 @@ Promise.all([ for (const v in views) { views[v].setModel(models[selected]) } - selectedModel.textContent = locale(`generator.${selected}`) + selectedModel.textContent = locale(`title.${selected}`) + + modelSelectorMenu.innerHTML = '' + Object.keys(models).forEach(m => { + modelSelectorMenu.insertAdjacentHTML('beforeend', + `
${locale(m)}
`) + modelSelectorMenu.lastChild?.addEventListener('click', evt => { + updateModel(m) + history.pushState({model: m}, m, publicPath + m) + modelSelectorMenu.style.visibility = 'hidden' + }) + }) + models[selected].invalidate() } @@ -82,6 +94,17 @@ Promise.all([ document.querySelectorAll('[data-i18n]').forEach(el => { el.textContent = locale(el.attributes.getNamedItem('data-i18n')!.value) }) + + languageSelectorMenu.innerHTML = '' + Object.keys(languages).forEach(key => { + languageSelectorMenu.insertAdjacentHTML('beforeend', + `
${languages[key]}
`) + languageSelectorMenu.lastChild?.addEventListener('click', evt => { + updateLanguage(key) + languageSelectorMenu.style.visibility = 'hidden' + }) + }) + updateModel(selected) } updateLanguage('en') @@ -89,17 +112,6 @@ Promise.all([ Split([treeViewEl, sourceViewEl], { sizes: [66, 34] }) - - modelSelectorMenu.innerHTML = '' - Object.keys(models).forEach(m => { - modelSelectorMenu.insertAdjacentHTML('beforeend', - `
${locale(`generator.${m}`)}
`) - modelSelectorMenu.lastChild?.addEventListener('click', evt => { - updateModel(m) - history.pushState({model: m}, m, publicPath + m) - modelSelectorMenu.style.visibility = 'hidden' - }) - }) modelSelector.addEventListener('click', evt => { modelSelectorMenu.style.visibility = 'visible' @@ -124,16 +136,6 @@ Promise.all([ } }) - languageSelectorMenu.innerHTML = '' - Object.keys(languages).forEach(key => { - languageSelectorMenu.insertAdjacentHTML('beforeend', - `
${languages[key]}
`) - languageSelectorMenu.lastChild?.addEventListener('click', evt => { - updateLanguage(key) - languageSelectorMenu.style.visibility = 'hidden' - }) - }) - languageSelector.addEventListener('click', evt => { languageSelectorMenu.style.visibility = 'visible' document.body.addEventListener('click', evt => { diff --git a/src/locales/en.json b/src/locales/en.json index 9a6e53dc..124e95f0 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -1,8 +1,12 @@ { - "generator.loot-table": "Loot Table Generator", - "generator.predicate": "Predicate Generator", - "generator.advancement": "Advancement Generator", - "generator.sandbox": "Sandbox Generator", + "title.loot-table": "Loot Table Generator", + "title.predicate": "Predicate Generator", + "title.advancement": "Advancement Generator", + "title.sandbox": "Sandbox Generator", + "loot-table": "Loot Table", + "predicate": "Predicate", + "advancement": "Advancement", + "sandbox": "Sandbox", "language": "Language", "copy": "Copy", "download": "Download", diff --git a/src/styles/global.css b/src/styles/global.css index d34f68f5..2dfbc691 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -26,6 +26,7 @@ body { .header-title { display: flex; + align-items: flex-start; } .header-title h2 { @@ -170,6 +171,11 @@ body { color: #a5e77a; } +.btn.selected { + fill: #a5e77a; + color: #a5e77a; +} + .btn svg:not(:last-child) { margin-right: 5px; } @@ -240,4 +246,9 @@ body { right: 17px; top: 37px; } + + .nav-selector-menu { + right: 0; + left: initial; + } }