refactoring: Fix generateLayouts
This commit is contained in:
parent
5117bccb9a
commit
7f26e4cb3b
5 changed files with 67 additions and 161 deletions
|
|
@ -217,7 +217,7 @@ export class Translation extends BaseUIElement {
|
|||
continue
|
||||
}
|
||||
let txt = this.translations[lng]
|
||||
txt = txt.replace(/\..*/, "")
|
||||
txt = txt.replace(/[.<].*/, "")
|
||||
txt = Utils.EllipsesAfter(txt, 255)
|
||||
tr[lng] = txt
|
||||
}
|
||||
|
|
|
|||
48
index.ts
48
index.ts
|
|
@ -1,52 +1,18 @@
|
|||
import { FixedUiElement } from "./UI/Base/FixedUiElement"
|
||||
import Combine from "./UI/Base/Combine"
|
||||
import { Utils } from "./Utils"
|
||||
import AllThemesGui from "./UI/AllThemesGui"
|
||||
import DetermineLayout from "./Logic/DetermineLayout"
|
||||
import LayoutConfig from "./Models/ThemeConfig/LayoutConfig"
|
||||
import ShowOverlayLayerImplementation from "./UI/ShowDataLayer/ShowOverlayLayerImplementation"
|
||||
import { DefaultGuiState } from "./UI/DefaultGuiState"
|
||||
import ThemeViewState from "./Models/ThemeViewState"
|
||||
import SvelteUIElement from "./UI/Base/SvelteUIElement"
|
||||
import ThemeViewGUI from "./UI/ThemeViewGUI.svelte"
|
||||
|
||||
ShowOverlayLayerImplementation.Implement()
|
||||
// Miscelleanous
|
||||
Utils.DisableLongPresses()
|
||||
|
||||
class Init {
|
||||
public static Init(layoutToUse: LayoutConfig) {
|
||||
if (layoutToUse === null) {
|
||||
// Something went wrong, error message is already on screen
|
||||
return
|
||||
}
|
||||
|
||||
if (layoutToUse === undefined) {
|
||||
// No layout found
|
||||
new AllThemesGui().setup()
|
||||
return
|
||||
}
|
||||
|
||||
const guiState = new DefaultGuiState()
|
||||
DefaultGuiState.state = guiState
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("decoration-desktop").remove()
|
||||
new Combine([
|
||||
"Initializing... <br/>",
|
||||
new FixedUiElement(
|
||||
"<a>If this message persist, something went wrong - click here to try again</a>"
|
||||
)
|
||||
.SetClass("link-underline small")
|
||||
.onClick(() => {
|
||||
localStorage.clear()
|
||||
window.location.reload()
|
||||
}),
|
||||
]).AttachTo("centermessage") // Add an initialization and reset button if something goes wrong
|
||||
|
||||
// @ts-ignore
|
||||
DetermineLayout.GetLayout()
|
||||
.then((value) => {
|
||||
console.log("Got ", value)
|
||||
Init.Init(value)
|
||||
.then((layout) => {
|
||||
const state = new ThemeViewState(layout)
|
||||
const main = new SvelteUIElement(ThemeViewGUI, { state })
|
||||
main.AttachTo("maindiv")
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Error while initializing: ", err, err.stack)
|
||||
|
|
|
|||
|
|
@ -1,71 +1,13 @@
|
|||
import {FixedUiElement} from "./UI/Base/FixedUiElement";
|
||||
import {QueryParameters} from "./Logic/Web/QueryParameters";
|
||||
import Combine from "./UI/Base/Combine";
|
||||
import AvailableBaseLayers from "./Logic/Actors/AvailableBaseLayers";
|
||||
import MinimapImplementation from "./UI/Base/MinimapImplementation";
|
||||
import {Utils} from "./Utils";
|
||||
import { Utils } from "./Utils"
|
||||
import ThemeViewState from "./Models/ThemeViewState"
|
||||
import SvelteUIElement from "./UI/Base/SvelteUIElement"
|
||||
import ThemeViewGUI from "./UI/ThemeViewGUI.svelte"
|
||||
import LayoutConfig from "./Models/ThemeConfig/LayoutConfig";
|
||||
import DefaultGUI from "./UI/DefaultGUI";
|
||||
import State from "./State";
|
||||
import AvailableBaseLayersImplementation from "./Logic/Actors/AvailableBaseLayersImplementation";
|
||||
import ShowOverlayLayerImplementation from "./UI/ShowDataLayer/ShowOverlayLayerImplementation";
|
||||
import {DefaultGuiState} from "./UI/DefaultGuiState";
|
||||
import DashboardGui from "./UI/DashboardGui";
|
||||
|
||||
|
||||
document.getElementById("decoration-desktop").remove();
|
||||
new Combine(["Initializing... <br/>",
|
||||
new FixedUiElement("<a>If this message persist, something went wrong - click here to try again</a>")
|
||||
.SetClass("link-underline small")
|
||||
.onClick(() => {
|
||||
localStorage.clear();
|
||||
window.location.reload(true);
|
||||
|
||||
})])
|
||||
.AttachTo("centermessage"); // Add an initialization and reset button if something goes wrong
|
||||
|
||||
|
||||
|
||||
// Workaround for a stupid crash: inject some functions which would give stupid circular dependencies or crash the other nodejs scripts running from console
|
||||
MinimapImplementation.initialize()
|
||||
AvailableBaseLayers.implement(new AvailableBaseLayersImplementation())
|
||||
ShowOverlayLayerImplementation.Implement();
|
||||
// Miscelleanous
|
||||
Utils.DisableLongPresses()
|
||||
if(new URLSearchParams(window.location.search).get("test") === "true"){
|
||||
console.log(themeConfig)
|
||||
}
|
||||
const layoutToUse = new LayoutConfig(themeConfig)
|
||||
|
||||
|
||||
// Workaround/legacy to keep the old paramters working as I renamed some of them
|
||||
if (layoutToUse?.id === "cyclofix") {
|
||||
const legacy = QueryParameters.GetQueryParameter("layer-bike_shops", "true", "Legacy - keep De Fietsambassade working");
|
||||
const correct = QueryParameters.GetQueryParameter("layer-bike_shop", "true", "Legacy - keep De Fietsambassade working")
|
||||
if (legacy.data !== "true") {
|
||||
correct.setData(legacy.data)
|
||||
}
|
||||
console.log("layer-bike_shop toggles: legacy:", legacy.data, "new:", correct.data)
|
||||
|
||||
const legacyCafe = QueryParameters.GetQueryParameter("layer-bike_cafes", "true", "Legacy - keep De Fietsambassade working")
|
||||
const correctCafe = QueryParameters.GetQueryParameter("layer-bike_cafe", "true", "Legacy - keep De Fietsambassade working")
|
||||
if (legacyCafe.data !== "true") {
|
||||
correctCafe.setData(legacy.data)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
const guiState = new DefaultGuiState()
|
||||
State.state = new State(layoutToUse);
|
||||
DefaultGuiState.state = guiState;
|
||||
// This 'leaks' the global state via the window object, useful for debugging
|
||||
// @ts-ignore
|
||||
window.mapcomplete_state = State.state;
|
||||
|
||||
const mode = QueryParameters.GetQueryParameter("mode", "map", "The mode the application starts in, e.g. 'map' or 'dashboard'")
|
||||
if(mode.data === "dashboard"){
|
||||
new DashboardGui(State.state, guiState).setup()
|
||||
}else{
|
||||
new DefaultGUI(State.state, guiState).setup()
|
||||
}
|
||||
const state = new ThemeViewState(new LayoutConfig(<any> layout))
|
||||
const main = new SvelteUIElement(ThemeViewGUI, { state })
|
||||
main.AttachTo("maindiv")
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ async function createIcon(iconPath: string, size: number, alreadyWritten: string
|
|||
return newname
|
||||
}
|
||||
alreadyWritten.push(newname)
|
||||
if (existsSync(newname)) {
|
||||
if (existsSync(targetpath)) {
|
||||
return newname
|
||||
}
|
||||
|
||||
|
|
@ -187,6 +187,17 @@ async function createManifest(
|
|||
}
|
||||
}
|
||||
|
||||
function asLangSpan(t: Translation, tag = "span"): string {
|
||||
const values: string[] = []
|
||||
for (const lang in t.translations) {
|
||||
if (lang === "_context") {
|
||||
continue
|
||||
}
|
||||
values.push(`<${tag} lang='${lang}'>${t.translations[lang]}</${tag}>`)
|
||||
}
|
||||
return values.join("\n")
|
||||
}
|
||||
|
||||
async function createLandingPage(layout: LayoutConfig, manifest, whiteIcons, alreadyWritten) {
|
||||
Locale.language.setData(layout.language[0])
|
||||
const targetLanguage = layout.language[0]
|
||||
|
|
@ -258,8 +269,9 @@ async function createLandingPage(layout: LayoutConfig, manifest, whiteIcons, alr
|
|||
].join("\n")
|
||||
|
||||
const loadingText = Translations.t.general.loadingTheme.Subs({ theme: ogTitle })
|
||||
|
||||
let output = template
|
||||
.replace("Loading MapComplete, hang on...", loadingText.textFor(targetLanguage))
|
||||
.replace("Loading MapComplete, hang on...", asLangSpan(loadingText, "h1"))
|
||||
.replace(
|
||||
"Powered by OpenStreetMap",
|
||||
Translations.t.general.poweredByOsm.textFor(targetLanguage)
|
||||
|
|
@ -267,36 +279,19 @@ async function createLandingPage(layout: LayoutConfig, manifest, whiteIcons, alr
|
|||
.replace(/<!-- THEME-SPECIFIC -->.*<!-- THEME-SPECIFIC-END-->/s, themeSpecific)
|
||||
.replace(
|
||||
/<!-- DESCRIPTION START -->.*<!-- DESCRIPTION END -->/s,
|
||||
layout.shortDescription.textFor(targetLanguage)
|
||||
asLangSpan(layout.shortDescription)
|
||||
)
|
||||
.replace(
|
||||
'<script type="module" src="./index.ts"></script>',
|
||||
`<script type="module" src='./index_${layout.id}.ts'></script>`
|
||||
)
|
||||
|
||||
try {
|
||||
output = output
|
||||
.replace(
|
||||
/<!-- DECORATION 0 START -->.*<!-- DECORATION 0 END -->/s,
|
||||
`<img src='${icon}' width="100%" height="100%">`
|
||||
)
|
||||
.replace(
|
||||
/<!-- DECORATION 1 START -->.*<!-- DECORATION 1 END -->/s,
|
||||
`<img src='${icon}' width="100%" height="100%">`
|
||||
)
|
||||
} catch (e) {
|
||||
console.warn("Error while applying logo: ", e)
|
||||
}
|
||||
|
||||
return output
|
||||
}
|
||||
|
||||
async function createIndexFor(theme: LayoutConfig) {
|
||||
const filename = "index_" + theme.id + ".ts"
|
||||
writeFileSync(
|
||||
filename,
|
||||
`import themeConfig from "./assets/generated/themes/${theme.id}.json"\n`
|
||||
)
|
||||
writeFileSync(filename, `import layout from "./assets/generated/themes/${theme.id}.json"\n`)
|
||||
appendFileSync(filename, codeTemplate)
|
||||
}
|
||||
|
||||
|
|
|
|||
67
theme.html
67
theme.html
|
|
@ -39,43 +39,46 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<div id="decoration-desktop" style="position: fixed; left: 1em; bottom: 1em; width:35vh; height:35vh;">
|
||||
<!-- A nice decoration while loading or on errors -->
|
||||
<!-- DECORATION 0 START -->
|
||||
<img src="./assets/svg/add.svg"/>
|
||||
<!-- DECORATION 0 END -->
|
||||
</div>
|
||||
|
||||
<div class="very-small-screen fixed inset-0 block z-above-controls" id="on-small-screen"></div>
|
||||
<div class="fixed inset-0 block z-above-controls hidden hidden-on-very-small-screen md:w-1/3" style="min-width: 28rem" id="fullscreen"></div>
|
||||
|
||||
<div class="absolute top-12 sm:top-3 left-3 rounded-3xl z-above-map" id="top-left"></div>
|
||||
<div class="absolute top-3 right-2 rounded-3xl z-above-map pl-3 sm:pl-0 w-full sm:w-fit" id="top-right"></div>
|
||||
|
||||
<div class="absolute bottom-3 left-3 rounded-3xl z-above-map" id="bottom-left"></div>
|
||||
<div class="absolute bottom-3 right-2 rounded-3xl z-above-map" id="bottom-right"></div>
|
||||
|
||||
<div class="clutter absolute h-24 left-24 right-24 top-56 text-xl text-center"
|
||||
id="centermessage" style="z-index: 4000">
|
||||
<div style="height: max-content">
|
||||
<div style="margin-top: -3rem">
|
||||
<div class="flex" style="justify-content: center">
|
||||
<img src="./assets/svg/loading.svg" class="animate-spin" style="width: 1.5rem; height: 1.5rem; min-width: 1.5rem;"/>
|
||||
<h1 style="font-weight: bold; font-size: xx-large; margin-bottom: 1rem; padding-left: 1rem">Loading MapComplete, hang on...</h1>
|
||||
</div>
|
||||
<p class="subtle" style="padding-bottom: 1rem">Powered by OpenStreetMap</p>
|
||||
<div style="background: #ffffffaa; padding-bottom: 1rem; border-radius: 0.25rem">
|
||||
<!-- DESCRIPTION START -->
|
||||
MapComplete is an easy to use map viewer and map editor
|
||||
<!-- DESCRIPTION END -->
|
||||
</div>
|
||||
</div>
|
||||
<span class="absolute" id="belowmap" style="z-index: -1; visibility: hidden">Below</span>
|
||||
<div id="maindiv">
|
||||
<div id="default-main">
|
||||
|
||||
<span id="default-title">Loading MapComplete, hang on...</span>
|
||||
|
||||
<!-- DESCRIPTION START -->
|
||||
MapComplete is an easy to use map viewer and map editor
|
||||
<!-- DESCRIPTION END -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
<span class="absolute" id="belowmap" style="z-index: -1">Below</span>
|
||||
<div id="leafletDiv"></div>
|
||||
let lang = ((navigator.languages && navigator.languages[0]) || navigator.language || navigator.userLanguage || 'en').substr(0, 2);
|
||||
function filterLangs(maindiv){
|
||||
let foundLangs = 0
|
||||
for(const child of Array.from(maindiv.children)){
|
||||
if(child.attributes.lang?.value === lang){
|
||||
foundLangs ++
|
||||
}
|
||||
}
|
||||
if(foundLangs === 0){
|
||||
lang = "en"
|
||||
}
|
||||
for(const child of Array.from(maindiv.children)){
|
||||
const childLang = child.attributes.lang
|
||||
if(childLang === undefined){
|
||||
continue
|
||||
}
|
||||
if(childLang.value === lang){
|
||||
continue
|
||||
}
|
||||
child.parentElement.removeChild(child)
|
||||
}
|
||||
}
|
||||
filterLangs( document.getElementById("default-main"))
|
||||
filterLangs( document.getElementById("default-title"))
|
||||
</script>
|
||||
|
||||
|
||||
<script type="module" src="./index.ts"></script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue