From 95605c32f1a8d08d72eb60d34abead6067b79841 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Mon, 19 Jun 2017 12:26:33 +0300
Subject: Automatic square cropping for avatar upload, preview of the new
 avatar.

---
 src/components/settings/settings.js | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

(limited to 'src/components/settings/settings.js')

diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index b8aa876b..8d6a6713 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -8,10 +8,9 @@ const settings = {
       hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv,
       hideNsfwLocal: this.$store.state.config.hideNsfw,
       muteWordsString: this.$store.state.config.muteWords.join('\n'),
-      previewfile: null,
       autoLoadLocal: this.$store.state.config.autoLoad,
       hoverPreviewLocal: this.$store.state.config.hoverPreview,
-      muteWordsString: this.$store.state.config.muteWords.join('\n')
+      previewfile: null
     }
   },
   components: {
@@ -30,20 +29,29 @@ const settings = {
       reader.onload = ({target}) => {
         const img = target.result
         this.previewfile = img
-        /*this.$store.state.api.backendInteractor.updateAvatar({params: {img}}).then((user) => {
-          if (!user.error) {
-            this.$store.commit('addNewUsers', [user])
-            this.$store.commit('setCurrentUser', user)
-          }
-        })*/
       }
       reader.readAsDataURL(file)
     },
     submitAvatar () {
-      if (!this.previewfile)
-        return
+      if (!this.previewfile) { return }
+
       const img = this.previewfile
-      this.$store.state.api.backendInteractor.updateAvatar({params: {img}}).then((user) => {
+      // eslint-disable-next-line no-undef
+      let imginfo = new Image()
+      let cropX, cropY, cropW, cropH
+      imginfo.src = this.previewfile
+      if (imginfo.height > imginfo.width) {
+        cropX = 0
+        cropW = imginfo.width
+        cropY = Math.floor((imginfo.height - imginfo.width) / 2)
+        cropH = imginfo.width
+      } else {
+        cropY = 0
+        cropH = imginfo.height
+        cropX = Math.floor((imginfo.width - imginfo.height) / 2)
+        cropW = imginfo.height
+      }
+      this.$store.state.api.backendInteractor.updateAvatar({params: {img, cropX, cropY, cropW, cropH}}).then((user) => {
         if (!user.error) {
           this.$store.commit('addNewUsers', [user])
           this.$store.commit('setCurrentUser', user)
-- 
cgit v1.2.3-70-g09d2