refactor: some components

This commit is contained in:
Artemy 2024-01-23 22:21:34 +03:00
parent 131d4285e9
commit d098cea340
2 changed files with 72 additions and 89 deletions

69
src/components.js Normal file
View file

@ -0,0 +1,69 @@
import { Converter } from "showdown";
import l from "./locales";
let converter = new Converter();
export function countryPopup(country, properties) {
return `<div class="row" style="padding: 5px;">
${img(country.img)}
${title(country.name)}
<div class="col-12 text-center glass">
${JSON.parse(properties.tags || "[]").join(", ")}
</div>
<div class="col-12 text-center glass">
${l("founded")}: ${new Date(country.date).toLocaleDateString()}
</div>
<div class="col-md-12 col-sm-12 text-center glass">
${
country.description
? `<div>${converter.makeHtml(country.description)}</div>`
: ""
}
</div>
<div class="col-12 text-center glass">
${l("area")}: ${properties.area} ${l("km")}²
</div>
<div class="col-12 text-center mt-2">
${
country.about
? `<a href="${country.about}" class="about">${l("about")}</a>`
: ""
}
</div>
</div>`;
}
function img(url) {
return `<div class="col-12 col-sm-12" style="padding: 0px;"><img class="w-100 about-img" src="${url}"></div>`;
}
function title(name) {
return `<div class="col-12 text-center glass"><h5>${name}</h5></div>`;
}
export function markerPopup(properties) {
return `
${
properties?.amount
? `<div class="row glass" style="color: "white";"><div class="col">${l(
"population"
)} - ${properties.amount} ${l("people")}.</div></div>`
: ""
}
<div class="row" style="padding: 5px;">
${properties?.img ? img(properties.img) : ""}
${title(
`${properties.name} ${
properties.translated_name ? `- ${properties.translated_name}` : ""
}`
)}
${
properties.description
? `<div class="col-md-12 col-sm-12 text-center glass"><div>${converter.makeHtml(
properties.description
)}</div></div>`
: ""
}
</div>
`;
}

View file

@ -17,9 +17,7 @@ import "@mapbox-controls/zoom/src/index.css";
import "bootstrap"; import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css"; import "bootstrap/dist/css/bootstrap.min.css";
import showdown from "showdown"; import { countryPopup, markerPopup } from "./components";
import l from "./locales";
function loginfo(...str) { function loginfo(...str) {
let info = str.shift(); let info = str.shift();
@ -109,8 +107,6 @@ window.onload = async () => {
map.addControl(new InspectControl({ console: true }), "bottom-right"); map.addControl(new InspectControl({ console: true }), "bottom-right");
} }
let converter = new showdown.Converter();
map.on("style.load", async () => { map.on("style.load", async () => {
map.loadImage( map.loadImage(
"https://cimengine.github.io/map/icons/city.png", "https://cimengine.github.io/map/icons/city.png",
@ -206,42 +202,7 @@ window.onload = async () => {
lasticocords = coordinates; lasticocords = coordinates;
return new mapboxgl.Popup() return new mapboxgl.Popup()
.setLngLat(coordinates) .setLngLat(coordinates)
.setHTML( .setHTML(markerPopup(feature.properties))
`
${
feature?.properties?.amount
? `<div class="row glass" style="color: "white";"><div class="col">${l(
"population"
)} - ${feature.properties.amount} ${l(
"people"
)}.</div></div>`
: ""
}
<div class="row" style="padding: 5px;">
${
feature?.properties?.img
? `<div class="col-md-12 col-sm-12" style="padding: 0px;"><img class="w-100 about-img" src="${feature.properties.img}" alt="${feature.properties.name} img"></div>`
: ""
}
<div class="col-md-12 col-sm-12 text-center glass mb-2">
<h5 className="card-title">${feature.properties.name}
${
feature.properties.translated_name
? ` - ${feature.properties.translated_name}`
: ""
}
</h5>
</div>
${
feature.properties.description
? `<div class="col-md-12 col-sm-12 text-center glass"><div>${converter.makeHtml(
feature.properties.description
)}</div></div>`
: ""
}
</div>
`
)
.addTo(map); .addTo(map);
} else if ( } else if (
feature.geometry.type === "Polygon" || feature.geometry.type === "Polygon" ||
@ -255,54 +216,7 @@ window.onload = async () => {
if (lasticocords !== coordinates) if (lasticocords !== coordinates)
return new mapboxgl.Popup() return new mapboxgl.Popup()
.setLngLat(coordinates) .setLngLat(coordinates)
.setHTML( .setHTML(countryPopup(country, feature.properties))
`
<div class="row" style="padding: 5px;">
<div class="col-12 col-sm-12" style="padding: 0px;">
<img class="w-100 about-img" src="${
country.img
}">
</div>
<div class="col-12 text-center glass">
<h5>
${country.name}
</h5>
</div>
<div class="col-12 text-center glass">
${JSON.parse(
feature.properties.tags || "[]"
).join(", ")}
</div>
<div class="col-12 text-center glass">
${l("founded")}: ${new Date(
country.date
).toLocaleDateString()}
</div>
<div class="col-md-12 col-sm-12 text-center glass">
${
country.description
? `<div>${converter.makeHtml(
country.description
)}</div>`
: ""
}
</div>
<div class="col-12 text-center glass">
${l("area")}: ${feature.properties.area} ${l(
"km"
)}²
</div>
<div class="col-12 text-center mt-2">
${
country.about
? `<a href="${
country.about
}" class="about">${l("about")}</a>`
: ""
}
</div>
</div>`
)
.addTo(map); .addTo(map);
}, 1); }, 1);
} }