must select template before using text

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
+            // Initial layers - only set if we don't have any layers yet and we have loaded an image
-            if (textLayers.length === 0) {
+            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

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",

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",

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",

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",

views/meme-creator.html

@@ -63,6 +63,7 @@
 
         <script>
             window.memeTemplate = {
+                id: "{!! template.id !!}",
                 url: "{!! template.url !!}",
                 name: "{!! template.name !!}",
                 category: "{!! template.category || 'General' !!}",

views/snippets/footer.html

@@ -548,7 +548,9 @@
       text_layer: "{{ t('meme.text_layer') }}",
       enter_text: "{{ t('meme.enter_text') }}",
       size_label: "{{ t('meme.size_label') }}",
-      upload_btn: "{{ t('meme.upload_btn') }}"
+      upload_btn: "{{ t('meme.upload_btn') }}",
+      choose_image_first: "{{ t('meme.choose_image_first') }}",
+      create_meme: "{{ t('meme.create_meme') }}"
     },
     // global chat
     chat_title: "{{ t('chat.title') }}",