From 6c6764202e0a9f6fb2b2039d8bd671a8bcab8cbd Mon Sep 17 00:00:00 2001 From: Kibi Kelburton Date: Fri, 22 May 2026 08:35:46 +0200 Subject: [PATCH] must select template before using text --- public/s/js/meme-creator.js | 19 +++++++++++++++---- src/inc/locales/de.json | 3 ++- src/inc/locales/en.json | 3 ++- src/inc/locales/nl.json | 3 ++- src/inc/locales/zange.json | 3 ++- views/meme-creator.html | 1 + views/snippets/footer.html | 4 +++- 7 files changed, 27 insertions(+), 9 deletions(-) diff --git a/public/s/js/meme-creator.js b/public/s/js/meme-creator.js index 84c918f..81e7efc 100644 --- a/public/s/js/meme-creator.js +++ b/public/s/js/meme-creator.js @@ -18,6 +18,7 @@ let draggingLayer = null; let hoveredLayer = null; let img = new Image(); + let hasLoadedImage = window.memeTemplate.id !== 'custom' && window.memeTemplate.category !== 'Custom'; const memeFont = 'Impact, Charcoal, sans-serif'; @@ -82,13 +83,13 @@ const defaultSize = 40; - // Initial layers - only set if we don't have any layers yet - if (textLayers.length === 0) { + // Initial layers - only set if we don't have any layers yet and we have loaded an image + if (textLayers.length === 0 && hasLoadedImage) { textLayers = [ { id: Date.now(), text: '', x: canvas.width / 2, y: 40, fontSize: defaultSize }, { id: Date.now() + 1, text: '', x: canvas.width / 2, y: canvas.height - 100, fontSize: defaultSize } ]; - } else { + } else if (hasLoadedImage) { // Keep the text layers but adjust their coordinates to be in-bounds if they exceed new boundaries textLayers.forEach(layer => { if (layer.x > canvas.width) { @@ -159,6 +160,10 @@ } addTextBtn.addEventListener('click', () => { + if (!hasLoadedImage) { + window.flashMessage((window.f0ckI18n?.meme?.choose_image_first) || 'Please select an image first!', 3000, 'error'); + return; + } textLayers.push({ id: Date.now(), text: 'NEW TEXT', @@ -300,6 +305,10 @@ canvas.addEventListener('mousedown', onStart); // Upload uploadBtn.addEventListener('click', async () => { + if (!hasLoadedImage) { + window.flashMessage((window.f0ckI18n?.meme?.choose_image_first) || 'Please select an image first!', 3000, 'error'); + return; + } const category = (window.memeTemplate && window.memeTemplate.category) ? window.memeTemplate.category.toLowerCase() : ''; const subCategory = (window.memeTemplate && window.memeTemplate.sub_category) ? window.memeTemplate.sub_category.toLowerCase() : ''; @@ -481,6 +490,7 @@ if (file && file.type.startsWith('image/')) { const reader = new FileReader(); reader.onload = (event) => { + hasLoadedImage = true; img.src = event.target.result; // Update template metadata @@ -489,7 +499,8 @@ // Update header title dynamically const headerTitle = document.querySelector('.meme-title'); if (headerTitle) { - headerTitle.innerHTML = `${window.f0ckI18n?.meme?.create_meme || 'Create Meme:'} ${window.memeTemplate.name}`; + const baseTitle = window.f0ckI18n?.meme?.create_meme || 'Create Meme:'; + headerTitle.innerHTML = `${baseTitle} ${window.memeTemplate.name}`; } // Update tags input value if tags are present diff --git a/src/inc/locales/de.json b/src/inc/locales/de.json index fd3404b..ce29325 100644 --- a/src/inc/locales/de.json +++ b/src/inc/locales/de.json @@ -532,7 +532,8 @@ "custom_template_title": "Eigene Vorlage", "custom_template_tag": "Lokale Datei", "select_image": "Eigenes Bild auswählen", - "choose_file_btn": "Bild aussuchen" + "choose_file_btn": "Bild aussuchen", + "choose_image_first": "Bitte wählen Sie zuerst ein Bild aus!" }, "timeago": { "just_now": "gerade eben", diff --git a/src/inc/locales/en.json b/src/inc/locales/en.json index 1c0a5e6..241e0a2 100644 --- a/src/inc/locales/en.json +++ b/src/inc/locales/en.json @@ -536,7 +536,8 @@ "custom_template_title": "Use Own Template", "custom_template_tag": "Local File", "select_image": "Select Custom Image", - "choose_file_btn": "Choose Image" + "choose_file_btn": "Choose Image", + "choose_image_first": "Please select an image first!" }, "timeago": { "just_now": "just now", diff --git a/src/inc/locales/nl.json b/src/inc/locales/nl.json index 640803f..236ac00 100644 --- a/src/inc/locales/nl.json +++ b/src/inc/locales/nl.json @@ -532,7 +532,8 @@ "custom_template_title": "Eigen sjabloon gebruiken", "custom_template_tag": "Lokaal bestand", "select_image": "Selecteer eigen afbeelding", - "choose_file_btn": "Kies afbeelding" + "choose_file_btn": "Kies afbeelding", + "choose_image_first": "Selecteer eerst een afbeelding!" }, "timeago": { "just_now": "zojuist", diff --git a/src/inc/locales/zange.json b/src/inc/locales/zange.json index 07da7d5..c2f5f46 100644 --- a/src/inc/locales/zange.json +++ b/src/inc/locales/zange.json @@ -535,7 +535,8 @@ "custom_template_title": "Eigene Vorlage nutzen", "custom_template_tag": "Lokale Datei", "select_image": "Eigenes Bild auswählen", - "choose_file_btn": "Bild aussuchen" + "choose_file_btn": "Bild aussuchen", + "choose_image_first": "Zuerst Vorlage auswählen" }, "timeago": { "just_now": "gerade eben", diff --git a/views/meme-creator.html b/views/meme-creator.html index 7be8313..d63b014 100644 --- a/views/meme-creator.html +++ b/views/meme-creator.html @@ -63,6 +63,7 @@