feat(profiles): add ability to crop avatar

Closes #1068 and maybe slash 106
OpenVK · Feb 4, 2024 · 77bd393 · 77bd393
1 parent 0f81a6a
commit 77bd393
Show file tree

Hide file tree

Showing 18 changed files with 544 additions and 258 deletions.
diff --git a/Web/Presenters/GroupPresenter.php b/Web/Presenters/GroupPresenter.php
@@ -279,48 +279,99 @@ function renderEdit(int $id): void
 
     function renderSetAvatar(int $id)
     {
-        $photo = new Photo;
+        $this->assertUserLoggedIn();
+        $this->willExecuteWriteAction();
+
         $club = $this->clubs->get($id);
-        if ($club->isBanned()) $this->flashFail("err", tr("error"), tr("forbidden"));
-        if($_SERVER["REQUEST_METHOD"] === "POST" && $_FILES["ava"]["error"] === UPLOAD_ERR_OK) {
+
+        if(!$club || $club->isBanned() || !$club->canBeModifiedBy($this->user->identity)) 
+            $this->flashFail("err", tr("error"), tr("forbidden"), NULL, true);
+
+        if($_SERVER["REQUEST_METHOD"] === "POST" && $_FILES["blob"]["error"] === UPLOAD_ERR_OK) {
             try {
+                $photo = new Photo;
+
                 $anon = OPENVK_ROOT_CONF["openvk"]["preferences"]["wall"]["anonymousPosting"]["enable"];
                 if($anon && $this->user->id === $club->getOwner()->getId())
                     $anon = $club->isOwnerHidden();  
                 else if($anon)
                     $anon = $club->getManager($this->user->identity)->isHidden();
+
                 $photo->setOwner($this->user->id);
                 $photo->setDescription("Club image");
-                $photo->setFile($_FILES["ava"]);
+                $photo->setFile($_FILES["blob"]);
                 $photo->setCreated(time());
                 $photo->setAnonymous($anon);
                 $photo->save();
 
                 (new Albums)->getClubAvatarAlbum($club)->addPhoto($photo);
 
-                $flags = 0;
-                $flags |= 0b00010000;
-                $flags |= 0b10000000;
-
-                $post = new Post;
-                $post->setOwner($this->user->id);
-                $post->setWall($club->getId()*-1);
-                $post->setCreated(time());
-                $post->setContent("");
-                $post->setFlags($flags);
-                $post->save();
-                $post->attach($photo);
-
-            } catch(ISE $ex) {
-                $name = $album->getName();
-                $this->flashFail("err", tr("error"), tr("error_when_uploading_photo"));
+                if($this->postParam("on_wall") == 1) {
+                    $post = new Post;
+
+                    $post->setOwner($this->user->id);
+                    $post->setWall($club->getId() * -1);
+                    $post->setCreated(time());
+                    $post->setContent("");
+
+                    $flags = 0;
+                    $flags |= 0b00010000;
+                    $flags |= 0b10000000;
+
+                    $post->setFlags($flags);
+                    $post->save();
+
+                    $post->attach($photo);
+                }
+
+            } catch(\Throwable $ex) {
+                $this->flashFail("err", tr("error"), tr("error_when_uploading_photo"), NULL, true);
             }
+
+            $this->returnJson([
+                "success"   => true,
+                "new_photo" => $photo->getPrettyId(),
+                "url"       => $photo->getURL(),
+            ]);
+        } else {
+            return " ";
         }
-        $this->returnJson([
-            "url" => $photo->getURL(),
-            "id" => $photo->getPrettyId()
-        ]);
     }
+
+    function renderDeleteAvatar(int $id) {
+        $this->assertUserLoggedIn();
+        $this->willExecuteWriteAction();
+
+        $club = $this->clubs->get($id);
+
+        if(!$club || $club->isBanned() || !$club->canBeModifiedBy($this->user->identity)) 
+            $this->flashFail("err", tr("error"), tr("forbidden"), NULL, true);
+
+        $avatar = $club->getAvatarPhoto();
+
+        if(!$avatar)
+            $this->flashFail("succ", tr("error"), "no avatar bro", NULL, true);
+
+        $avatar->isolate();
+
+        $newAvatar = $club->getAvatarPhoto();
+
+        if(!$newAvatar)
+            $this->returnJson([
+                "success" => true,
+                "has_new_photo" => false,
+                "new_photo" => NULL,
+                "url"       => "/assets/packages/static/openvk/img/camera_200.png",
+            ]);
+        else
+            $this->returnJson([
+                "success" => true,
+                "has_new_photo" => true,
+                "new_photo" => $newAvatar->getPrettyId(),
+                "url"       => $newAvatar->getURL(),
+            ]);
+    }
+
     function renderEditBackdrop(int $id): void
     {
         $this->assertUserLoggedIn();

diff --git a/Web/Presenters/UserPresenter.php b/Web/Presenters/UserPresenter.php
@@ -334,8 +334,7 @@ function renderSub(): void
         $this->redirect($user->getURL());
     }
 
-    function renderSetAvatar()
-    {
+    function renderSetAvatar() {
         $this->assertUserLoggedIn();
         $this->willExecuteWriteAction();
 
@@ -346,8 +345,8 @@ function renderSetAvatar()
             $photo->setFile($_FILES["blob"]);
             $photo->setCreated(time());
             $photo->save();
-        } catch(ISE $ex) {
-            $this->flashFail("err", tr("error"), tr("error_upload_failed"));
+        } catch(\Throwable $ex) {
+            $this->flashFail("err", tr("error"), tr("error_upload_failed"), NULL, (int)$this->postParam("ajax", true) == 1);
         }
 
         $album = (new Albums)->getUserAvatarAlbum($this->user->identity);
@@ -358,23 +357,57 @@ function renderSetAvatar()
         $flags = 0;
         $flags |= 0b00010000;
 
-        $post = new Post;
-        $post->setOwner($this->user->id);
-        $post->setWall($this->user->id);
-        $post->setCreated(time());
-        $post->setContent("");
-        $post->setFlags($flags);
-        $post->save();
-        $post->attach($photo);
-        if($this->postParam("ava", true) == (int)1) {
+        if($this->postParam("on_wall") == 1) {
+            $post = new Post;
+            $post->setOwner($this->user->id);
+            $post->setWall($this->user->id);
+            $post->setCreated(time());
+            $post->setContent("");
+            $post->setFlags($flags);
+            $post->save();
+
+            $post->attach($photo);
+        }
+
+        if((int)$this->postParam("ajax", true) == 1) {
             $this->returnJson([
-                "url" => $photo->getURL(),
-                "id" => $photo->getPrettyId()
+                "success"   => true,
+                "new_photo" => $photo->getPrettyId(),
+                "url"       => $photo->getURL(),
             ]);
         } else {
             $this->flashFail("succ", tr("photo_saved"), tr("photo_saved_comment"));
         }
     }
+
+    function renderDeleteAvatar() {
+        $this->assertUserLoggedIn();
+        $this->willExecuteWriteAction();
+
+        $avatar = $this->user->identity->getAvatarPhoto();
+
+        if(!$avatar)
+            $this->flashFail("succ", tr("error"), "no avatar bro", NULL, true);
+
+        $avatar->isolate();
+
+        $newAvatar = $this->user->identity->getAvatarPhoto();
+
+        if(!$newAvatar)
+            $this->returnJson([
+                "success" => true,
+                "has_new_photo" => false,
+                "new_photo" => NULL,
+                "url"       => "/assets/packages/static/openvk/img/camera_200.png",
+            ]);
+        else
+            $this->returnJson([
+                "success" => true,
+                "has_new_photo" => true,
+                "new_photo" => $newAvatar->getPrettyId(),
+                "url"       => $newAvatar->getURL(),
+            ]);
+    }
 
     function renderSettings(): void
     {

diff --git a/Web/Presenters/templates/@layout.xml b/Web/Presenters/templates/@layout.xml
@@ -18,9 +18,11 @@
         {script "js/l10n.js"}
         {script "js/openvk.cls.js"}
         {script "js/node_modules/dashjs/dist/dash.all.min.js"}
+        <script src="/assets/packages/static/openvk/js/node_modules/cropperjs/dist/cropper.js" type="module"></script>
         {script "js/al_music.js"}
 
         {css "js/node_modules/tippy.js/dist/backdrop.css"}
+        {css "js/node_modules/cropperjs/dist/cropper.css"}
         {css "js/node_modules/tippy.js/dist/border.css"}
         {css "js/node_modules/tippy.js/dist/svg-arrow.css"}
         {css "js/node_modules/tippy.js/themes/light.css"}

diff --git a/Web/Presenters/templates/Group/View.xml b/Web/Presenters/templates/Group/View.xml
@@ -127,25 +127,19 @@
 <div class="right_small_block">
     {var $avatarPhoto = $club->getAvatarPhoto()}
     {var $avatarLink = ((is_null($avatarPhoto) ? FALSE : $avatarPhoto->isAnonymous()) ? "/photo" . ("s/" . base_convert((string) $avatarPhoto->getId(), 10, 32)) : $club->getAvatarLink())}
-    <div class="avatar_block" style="position:relative;">
-        {var $hasAvatar = !str_contains($club->getAvatarUrl('miniscule'), "/assets/packages/static/openvk/img/camera_200.png")}
-        {if !is_null($thisUser) && $hasAvatar == false && $club->canBeModifiedBy($thisUser)}
-            <a href="javascript:addAvatarImage(true, {$club->getId()})" class="text_add_image">{_add_image_group}</a>
-        {elseif !is_null($thisUser) && $hasAvatar == true && $club->canBeModifiedBy($thisUser)}
-            <div class="avatar_controls">
-                <div class="avatarDelete">
-                    <a id="upl" href="javascript:deleteAvatar('{$club->getAvatarPhoto()->getPrettyId()}')"><img src="/assets/packages/static/openvk/img/delete.png"/></a>
-                </div>
+    <div class="avatar_block" style="position:relative;" data-club="{$club->getId()}">
+        {if $thisUser && $club->canBeModifiedBy($thisUser)}
+            <a {if $avatarPhoto}style="display:none"{/if} class="add_image_text" id="add_image">{_add_image}</a>
+            <div {if !$avatarPhoto}style="display:none"{/if} class="avatar_controls">
+                <div class="avatarDelete hoverable"></div>
                 <div class="avatar_variants">
-                    <div class="variant">
-                        <img src="/assets/packages/static/openvk/img/upload.png" style="margin-left:15px;height: 10px;">
-                        <a href="javascript:addAvatarImage(true, {$club->getId()})"><p>{_upload_new_picture}</p></a>
-                    </div>
+                    <a class="_add_image hoverable" id="add_image"><span>{_upload_new_picture}</span></a>
                 </div>
             </div>
         {/if}
+
         <a href="{$avatarLink|nocheck}">
-            <img src="{$club->getAvatarUrl('normal')}" id="thisGroupAvatar" style="width: 100%; image-rendering: -webkit-optimize-contrast;" />
+            <img src="{$club->getAvatarUrl('normal')}" id="bigAvatar" style="width: 100%; image-rendering: -webkit-optimize-contrast;" />
         </a>
     </div>
     <div n:ifset="$thisUser" id="profile_links">

diff --git a/Web/Presenters/templates/User/View.xml b/Web/Presenters/templates/User/View.xml
@@ -69,27 +69,22 @@
     {else}
 
     <div class="left_small_block">
-        <div style="margin-left: auto;margin-right: auto;display: table;position:relative;" class="avatar_block" id="av">
+        <div class="avatar_block">
             {var $hasAvatar = !str_contains($user->getAvatarUrl('miniscule'), "/assets/packages/static/openvk/img/camera_200.png")}
-            {if !is_null($thisUser) && $hasAvatar == false && $user->getId() == $thisUser->getId()}
-                <a href="javascript:addAvatarImage(false)" class="text_add_image">{_add_image}</a>
-            {elseif !is_null($thisUser) && $user && $hasAvatar == true && $user->getId() == $thisUser->getId()}
-                <div class="avatar_controls">
-                    <div class="avatarDelete">
-                        <a id="upl" href="javascript:deleteAvatar('{$user->getAvatarPhoto()->getPrettyId()}')"><img src="/assets/packages/static/openvk/img/delete.png"/></a>
-                    </div>
+
+            {if $thisUser && $user->getId() == $thisUser->getId()}
+                <a {if $hasAvatar}style="display:none"{/if} class="add_image_text" id="add_image">{_add_image}</a>
+                <div {if !$hasAvatar}style="display:none"{/if} class="avatar_controls">
+                    <div class="avatarDelete hoverable"></div>
                     <div class="avatar_variants">
-                        <div class="variant">
-                            <img src="/assets/packages/static/openvk/img/upload.png" style="margin-left:15px;height: 10px;">
-                            <a href="javascript:addAvatarImage(false)"><p>{_upload_new_picture}</p></a>
-                        </div>
+                        <a class="_add_image hoverable" id="add_image"><span>{_upload_new_picture}</span></a>
                     </div>
                 </div>
             {/if}
             <a href="{$user->getAvatarLink()|nocheck}">
                 <img src="{$user->getAvatarUrl('normal')}"
                      alt="{$user->getCanonicalName()}"
-                     id="thisUserAvatar"
+                     id="bigAvatar"
                      style="width: 100%; image-rendering: -webkit-optimize-contrast;" />
             </a>
         </div>

diff --git a/Web/Presenters/templates/_includeCSS.xml b/Web/Presenters/templates/_includeCSS.xml
@@ -9,7 +9,7 @@
             {css "css/bsdn.css"}
             {css "css/dialog.css"}
             {css "css/notifications.css"}
-            {css "css/avataredit.css"}
+            {css "css/avatar-edit.css"}
             {css "css/audios.css"}
 
             {if $isXmas}
@@ -27,7 +27,7 @@
         {css "css/bsdn.css"}
         {css "css/dialog.css"}
         {css "css/notifications.css"}
-        {css "css/avataredit.css"}
+        {css "css/avatar-edit.css"}
         {css "css/audios.css"}
 
         {if $isXmas}

diff --git a/Web/routes.yml b/Web/routes.yml
@@ -181,6 +181,8 @@ routes:
       handler: "Photos->deletePhoto"
     - url: "/al_avatars"
       handler: "User->setAvatar"
+    - url: "/delete_avatar"
+      handler: "User->deleteAvatar"
     - url: "/videos{num}"
       handler: "Videos->list"
     - url: "/videos/upload"
@@ -229,6 +231,8 @@ routes:
       handler: "Group->edit"
     - url: "/club{num}/al_avatar"
       handler: "Group->setAvatar"
+    - url: "/club{num}/delete_avatar"
+      handler: "Group->deleteAvatar"
     - url: "/club{num}/backdrop"
       handler: "Group->editBackdrop"
     - url: "/club{num}/stats"