Add default image when invalid content is pasted

nmarsceau · May 16, 2024 · 8a7305d · 8a7305d
1 parent 7704d81
commit 8a7305d
Show file tree

Hide file tree

Showing 16 changed files with 26 additions and 10 deletions.
diff --git a/_site/assets/css/style.css b/_site/assets/css/style.css
@@ -73,19 +73,19 @@ body {
 }
 
 .icon.button#upload::before {
-	background: url(../svg/upload.svg) center/70% no-repeat, var(--yellow);
+	background: url(../images/upload.svg) center/70% no-repeat, var(--yellow);
 }
 
 .icon.button#clear::before {
-	background: url(../svg/clear.svg) center/130% no-repeat, var(--yellow);
+	background: url(../images/clear.svg) center/130% no-repeat, var(--yellow);
 }
 
 .icon.button#copy::before {
-	background: url(../svg/copy.svg) center/80% no-repeat, var(--yellow);
+	background: url(../images/copy.svg) center/80% no-repeat, var(--yellow);
 }
 
 .icon.button#download::before {
-	background: url(../svg/download.svg) center/70% no-repeat, var(--yellow);
+	background: url(../images/download.svg) center/70% no-repeat, var(--yellow);
 }
 
 .icon.button::after {

diff --git a/src/_includes/assets/svg/clear.svg → _site/assets/images/clear.svg b/src/_includes/assets/svg/clear.svg → _site/assets/images/clear.svg
diff --git a/src/_includes/assets/svg/copy.svg → _site/assets/images/copy.svg b/src/_includes/assets/svg/copy.svg → _site/assets/images/copy.svg
diff --git a/src/_includes/assets/svg/download.svg → _site/assets/images/download.svg b/src/_includes/assets/svg/download.svg → _site/assets/images/download.svg
diff --git a/_site/assets/images/picard.webp b/_site/assets/images/picard.webp
diff --git a/src/_includes/assets/svg/upload.svg → _site/assets/images/upload.svg b/src/_includes/assets/svg/upload.svg → _site/assets/images/upload.svg
diff --git a/_site/assets/js/app.js b/_site/assets/js/app.js
@@ -15,6 +15,10 @@ export class App {
 		this.img.addEventListener('load', () => { this.drawImage() })
 	}
 
+	setDefaultImage() {
+		this.img.src = "./assets/images/picard.webp"
+	}
+
 	setImageFromFile(file) {
 		const reader = new FileReader()
 		reader.readAsDataURL(file)

diff --git a/_site/index.html b/_site/index.html
@@ -14,6 +14,8 @@
         document.addEventListener('paste', (event) => {
             if (event.clipboardData.files.length > 0) {
                 app.setImageFromFile(event.clipboardData.files[0])
-            }
+            } else {
+				app.setDefaultImage()
+			}
         })
         document.querySelector('#download').addEventListener('click', () => { app.download() })</script></body></html>
diff --git a/src/_includes/assets/css/style.css b/src/_includes/assets/css/style.css
@@ -73,19 +73,19 @@ body {
 }
 
 .icon.button#upload::before {
-	background: url(../svg/upload.svg) center/70% no-repeat, var(--yellow);
+	background: url(../images/upload.svg) center/70% no-repeat, var(--yellow);
 }
 
 .icon.button#clear::before {
-	background: url(../svg/clear.svg) center/130% no-repeat, var(--yellow);
+	background: url(../images/clear.svg) center/130% no-repeat, var(--yellow);
 }
 
 .icon.button#copy::before {
-	background: url(../svg/copy.svg) center/80% no-repeat, var(--yellow);
+	background: url(../images/copy.svg) center/80% no-repeat, var(--yellow);
 }
 
 .icon.button#download::before {
-	background: url(../svg/download.svg) center/70% no-repeat, var(--yellow);
+	background: url(../images/download.svg) center/70% no-repeat, var(--yellow);
 }
 
 .icon.button::after {

diff --git a/src/_includes/assets/images/clear.svg b/src/_includes/assets/images/clear.svg
diff --git a/src/_includes/assets/images/copy.svg b/src/_includes/assets/images/copy.svg
diff --git a/src/_includes/assets/images/download.svg b/src/_includes/assets/images/download.svg
diff --git a/src/_includes/assets/images/picard.webp b/src/_includes/assets/images/picard.webp
diff --git a/src/_includes/assets/images/upload.svg b/src/_includes/assets/images/upload.svg
diff --git a/src/_includes/assets/js/app.js b/src/_includes/assets/js/app.js
@@ -15,6 +15,10 @@ export class App {
 		this.img.addEventListener('load', () => { this.drawImage() })
 	}
 
+	setDefaultImage() {
+		this.img.src = "./assets/images/picard.webp"
+	}
+
 	setImageFromFile(file) {
 		const reader = new FileReader()
 		reader.readAsDataURL(file)

diff --git a/src/index.html b/src/index.html
@@ -40,7 +40,9 @@
         document.addEventListener('paste', (event) => {
             if (event.clipboardData.files.length > 0) {
                 app.setImageFromFile(event.clipboardData.files[0])
-            }
+            } else {
+				app.setDefaultImage()
+			}
         })
         document.querySelector('#download').addEventListener('click', () => { app.download() })
 	</script>