From 58b54fe90846ac34c5b513794823a95dc27c289a Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Sat, 3 Mar 2018 18:29:39 +0100
Subject: [PATCH] Improved upload scripts

---
 mixins/Avatar.pixy           | 13 ++++++++++++-
 mixins/Input.pixy            |  2 +-
 mixins/ProfileImage.pixy     |  7 -------
 pages/settings/settings.pixy | 10 ++++++++--
 scripts/Actions/Upload.ts    | 27 +++++++++++++++++++++------
 5 files changed, 42 insertions(+), 17 deletions(-)
 delete mode 100644 mixins/ProfileImage.pixy

diff --git a/mixins/Avatar.pixy b/mixins/Avatar.pixy
index eef0393a..980e8693 100644
--- a/mixins/Avatar.pixy
+++ b/mixins/Avatar.pixy
@@ -11,6 +11,12 @@ component AvatarNoLink(user *arn.User)
 	else
 		SVGAvatar(user)
 
+component ProfileImage(user *arn.User)
+	if user.HasAvatar()
+		img.profile-image.lazy(data-src=user.LargeAvatar(), data-webp="true", alt="Profile image")
+	else
+		SVGProfileImage(user)
+
 component SVGAvatar(user *arn.User)
 	svg.user-image(viewBox="0 0 50 50")
 		circle.head(cx="25", cy="19", r="10")
@@ -19,4 +25,9 @@ component SVGAvatar(user *arn.User)
 		if len(user.Nick) <= 6
 			text.svg-nick(x="25", y="44", text-anchor="middle")= user.Nick
 		else
-			text.svg-nick(x="25", y="44", text-anchor="middle")= user.Nick[:6]
\ No newline at end of file
+			text.svg-nick(x="25", y="44", text-anchor="middle")= user.Nick[:6]
+
+component SVGProfileImage(user *arn.User)
+	svg.profile-image(viewBox="0 0 50 50", alt="Profile image")
+		circle.head(cx="25", cy="19", r="10")
+		circle.body(cx="25", cy="50", r="20")
\ No newline at end of file
diff --git a/mixins/Input.pixy b/mixins/Input.pixy
index 92d8fdb5..c93ae69f 100644
--- a/mixins/Input.pixy
+++ b/mixins/Input.pixy
@@ -30,7 +30,7 @@ component InputSelection(id string, value string, label string, placeholder stri
 			each option in options
 				option(value=option.Value)= option.Label
 
-component InputImage(id string, label string, src string)
+component InputImage(id string, label string)
 	.widget-section
 		label(for=id)= label + ":"
 		button.action(data-action="selectFile", data-trigger="click", data-preview-image-id=id + "-preview")
diff --git a/mixins/ProfileImage.pixy b/mixins/ProfileImage.pixy
deleted file mode 100644
index 9b7a7735..00000000
--- a/mixins/ProfileImage.pixy
+++ /dev/null
@@ -1,7 +0,0 @@
-component ProfileImage(user *arn.User)
-	if user.HasAvatar()
-		img.profile-image.lazy(data-src=user.LargeAvatar(), data-webp="true", alt="Profile image")
-	else
-		svg.profile-image(viewBox="0 0 50 50", alt="Profile image")
-			circle.head(cx="25", cy="19", r="10")
-			circle.body(cx="25", cy="50", r="20")
\ No newline at end of file
diff --git a/pages/settings/settings.pixy b/pages/settings/settings.pixy
index d5354ae4..38b9bf71 100644
--- a/pages/settings/settings.pixy
+++ b/pages/settings/settings.pixy
@@ -51,10 +51,16 @@ component SettingsPersonal(user *arn.User)
 			
 			//- File upload
 			if user.Settings().Avatar.Source == "FileSystem"
-				InputImage("avatar-input", "File", user.LargeAvatar())
+				InputImage("avatar-input", "File")
 
 				.profile-image-container.avatar-preview
-					img.profile-image.mountable(id="avatar-input-preview", src=user.LargeAvatar(), alt="Image preview")
+					if user.HasAvatar()
+						img#avatar-input-preview.profile-image.mountable(src=user.LargeAvatar(), alt="Profile image")
+					else
+						img#avatar-input-preview.profile-image.hidden(src=user.LargeAvatar(), alt="Profile image")
+
+						#avatar-input-preview-svg
+							SVGProfileImage(user)
 
 component SettingsNotifications(user *arn.User)
 	SettingsTabs
diff --git a/scripts/Actions/Upload.ts b/scripts/Actions/Upload.ts
index fa0ff9fa..afb32414 100644
--- a/scripts/Actions/Upload.ts
+++ b/scripts/Actions/Upload.ts
@@ -21,14 +21,18 @@ function previewImage(file: File, preview: HTMLImageElement) {
 	let reader = new FileReader()
 
 	reader.onloadend = () => {
+		let svgPreview = document.getElementById("avatar-input-preview-svg") as HTMLImageElement
+
+		if(svgPreview) {
+			svgPreview.classList.add("hidden")
+		}
+
 		preview.classList.remove("hidden")
 		preview.src = reader.result
 	}
 
 	if(file) {
 		reader.readAsDataURL(file)
-	} else {
-		preview.classList.add("hidden")
 	}
 }
 
@@ -49,10 +53,7 @@ function uploadFile(file: File, endpoint: string, arn: AnimeNotifier) {
 		})
 
 		let newURL = await response.text()
-		let sidebar = document.getElementById("sidebar")
-		let userImage = sidebar.getElementsByClassName("user-image")[0] as HTMLImageElement
-		userImage.dataset.src = newURL
-		userImage["became visible"]()
+		updateSideBarAvatar(newURL)
 
 		if(response.ok) {
 			arn.statusMessage.showInfo("Successfully uploaded your new avatar.")
@@ -62,4 +63,18 @@ function uploadFile(file: File, endpoint: string, arn: AnimeNotifier) {
 	}
 
 	reader.readAsArrayBuffer(file)
+}
+
+// Update sidebar avatar
+function updateSideBarAvatar(url: string) {
+	let sidebar = document.getElementById("sidebar")
+	let userImage = sidebar.getElementsByClassName("user-image")[0] as HTMLImageElement
+	let lazyLoad = userImage["became visible"]
+
+	if(lazyLoad) {
+		userImage.dataset.src = url
+		lazyLoad()
+	} else {
+		location.reload()
+	}
 }
\ No newline at end of file