diff --git a/package-lock.json b/package-lock.json
index 055418e..560c3e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "embroidery-viewer",
- "version": "1.2.1",
+ "version": "1.2.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "embroidery-viewer",
- "version": "1.2.1",
+ "version": "1.2.4",
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^2.4.1",
"svelte": "^3.59.1",
diff --git a/package.json b/package.json
index ca336fb..2dd0610 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "embroidery-viewer",
"private": true,
- "version": "1.2.2",
+ "version": "1.2.4",
"type": "module",
"scripts": {
"dev": "vite",
diff --git a/src/app.css b/src/app.css
index 227035f..79255df 100644
--- a/src/app.css
+++ b/src/app.css
@@ -47,4 +47,15 @@ input[type="submit"]:hover {
cursor: pointer;
background-color: black;
color: white;
-}
\ No newline at end of file
+}
+
+body a {
+ text-decoration: none;
+ color: #06345F;
+ border-bottom: 3px solid #06345F;
+}
+
+body a:hover {
+ background-color: #06345F;
+ color: #ffffff;
+}
diff --git a/src/file-renderer/index.js b/src/file-renderer/index.js
index 4f2a409..595fdc4 100644
--- a/src/file-renderer/index.js
+++ b/src/file-renderer/index.js
@@ -2,7 +2,7 @@ import { jDataView } from "./jdataview";
import { supportedFormats } from "../format-readers";
import { Pattern } from "./pattern";
-function renderFile(filename, evt, canvas, colorView, stitchesView, sizeView) {
+function renderFile(filename, evt, canvas, colorView, stitchesView, sizeView, localizedStrings) {
const fileExtension = filename.toLowerCase().split(".").pop();
const view = jDataView(evt.target.result, 0, evt.size);
const pattern = new Pattern();
@@ -12,8 +12,8 @@ function renderFile(filename, evt, canvas, colorView, stitchesView, sizeView) {
pattern.moveToPositive();
pattern.drawShapeTo(canvas);
pattern.drawColorsTo(colorView);
- pattern.drawStitchesCountTo(stitchesView);
- pattern.drawSizeValuesTo(stitchesView);
+ pattern.drawStitchesCountTo(stitchesView, localizedStrings.stitches);
+ pattern.drawSizeValuesTo(stitchesView, localizedStrings.dimensions);
}
function renderAbortMessage(errorMessageRef) {
@@ -56,12 +56,13 @@ export default function renderFileToCanvas(
errorMessageRef,
colorView,
stitchesView,
- sizeView
+ sizeView,
+ localizedStrings
) {
const reader = new FileReader();
reader.onloadend = (evt) =>
- renderFile(fileObject.name, evt, canvas, colorView, stitchesView, sizeView);
+ renderFile(fileObject.name, evt, canvas, colorView, stitchesView, sizeView, localizedStrings);
reader.abort = (/** @type {any} */ _) => renderAbortMessage(errorMessageRef);
reader.onerror = (evt) =>
renderErrorMessage(evt.target.error.name, errorMessageRef);
diff --git a/src/file-renderer/pattern.js b/src/file-renderer/pattern.js
index ab58964..ec6a3d2 100644
--- a/src/file-renderer/pattern.js
+++ b/src/file-renderer/pattern.js
@@ -212,12 +212,12 @@ Pattern.prototype.drawColorsTo = function (colorContainer) {
});
};
-Pattern.prototype.drawStitchesCountTo = function (stitchesContainer) {
- stitchesContainer.innerHTML += `
Stitches: ${this.stitches.length}
`;
+Pattern.prototype.drawStitchesCountTo = function (stitchesContainer, stitchesString) {
+ stitchesContainer.innerHTML += `${stitchesString}: ${this.stitches.length}
`;
};
-Pattern.prototype.drawSizeValuesTo = function (sizeContainer) {
- sizeContainer.innerHTML += `Size (x, y): ${Math.round(
+Pattern.prototype.drawSizeValuesTo = function (sizeContainer, dimensionsString) {
+ sizeContainer.innerHTML += `
${dimensionsString}: ${Math.round(
this.right / 10
)}mm x ${Math.round(this.bottom / 10)}mm
`;
};
diff --git a/src/i18n/index.js b/src/i18n/index.js
new file mode 100644
index 0000000..c465f60
--- /dev/null
+++ b/src/i18n/index.js
@@ -0,0 +1,35 @@
+import { derived, writable } from "svelte/store";
+import translations from "./translations";
+
+const browserLocale = navigator.language || "en";
+const [baseLang, region] = browserLocale.split("-");
+
+export const DEFAULT_LOCALE = translations[browserLocale] ? browserLocale : translations[baseLang] ? baseLang :"en";
+export const locale = writable(DEFAULT_LOCALE);
+export const locales = Object.entries(translations).map(([key, lang]) => [key, lang.name]);
+
+function translate(locale, key, vars = {}) {
+ if (!key) throw new Error("Translation key is required.");
+
+ const validLocale = translations[locale]
+ ? locale
+ : translations[baseLang]
+ ? baseLang
+ : "en";
+
+ let text = translations[validLocale][key] || translations["en"][key];
+
+ if (!text) {
+ console.error(`Missing translation for key "${key}" in locale "${validLocale}".`);
+ return key;
+ }
+
+ return Object.entries(vars).reduce(
+ (str, [varKey, value]) => str.replaceAll(`{{${varKey}}}`, value),
+ text
+ );
+}
+
+export const t = derived(locale, ($locale) => (key, vars = {}) =>
+ translate($locale, key, vars)
+);
diff --git a/src/i18n/translations.js b/src/i18n/translations.js
new file mode 100644
index 0000000..d22c9cb
--- /dev/null
+++ b/src/i18n/translations.js
@@ -0,0 +1,32 @@
+export default {
+ en: {
+ "main.title": "Upload files",
+ "main.languageSwitch": "Mudar para Português",
+ "main.fileSize": "Max file size is
{{fileSize}}kb.",
+ "main.supportedFormats": "Accepted formats:
{{supportedFormats}}.",
+ "main.render": "Render files",
+ "main.dropzone": "Drag and drop files here or click to upload.",
+ "main.selected": "Selected files",
+ "main.rejected": "Rejected files",
+ "main.stitches": "Stitches",
+ "main.dimensions": "Dimensions (x, y)",
+ "main.download": "Download image",
+ "main.copyright": "Copyright © {{year}}
Leonardo Murça.
All rights reserved.",
+ "main.version": "Version: {{version}}"
+ },
+ pt: {
+ "main.title": "Carregar arquivos",
+ "main.languageSwitch": "Switch to English",
+ "main.fileSize": "O tamanho máximo do arquivo é
{{fileSize}}kb.",
+ "main.supportedFormats": "Formatos aceitos:
{{supportedFormats}}.",
+ "main.render": "Renderizar arquivos",
+ "main.dropzone": "Arraste e solte os arquivos aqui ou clique para fazer upload.",
+ "main.selected": "Arquivos selecionados",
+ "main.rejected": "Arquivos recusados",
+ "main.stitches": "Pontos",
+ "main.dimensions": "Dimensões (x, y)",
+ "main.download": "Baixar imagem",
+ "main.copyright": "Copyright © {{year}}
Leonardo Murça.
Todos os direitos reservados.",
+ "main.version": "Versão: {{version}}"
+ },
+ };
\ No newline at end of file
diff --git a/src/lib/CardList.svelte b/src/lib/CardList.svelte
index 30f832a..23c14c5 100644
--- a/src/lib/CardList.svelte
+++ b/src/lib/CardList.svelte
@@ -1,4 +1,5 @@
{#if areAcceptedFilesRendered}
{:else}
-
-
+
+
{/if}