feat(profiles): add ability to crop avatar

Closes #1068 and maybe slash 106
2024-11-15 03:31:18 +03:00 · 2024-02-04 18:59:34 +03:00 · 2024-02-04 18:59:34 +03:00 · 77bd393215
commit 77bd393215
parent 0f81a6a0c3
18 changed files with 542 additions and 256 deletions
--- a/Web/Presenters/GroupPresenter.php
+++ b/Web/Presenters/GroupPresenter.php
@ -279,48 +279,99 @@ final class GroupPresenter extends OpenVKPresenter
    
    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;
-
+                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(ISE $ex) {
-                $name = $album->getName();
-                $this->flashFail("err", tr("error"), tr("error_when_uploading_photo"));
+                    $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(),
-            "id" => $photo->getPrettyId()
+            ]);
+        } else {
+            return " ";
+        }
+    }
+
+    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();
--- a/Web/Presenters/UserPresenter.php
+++ b/Web/Presenters/UserPresenter.php
@ -334,8 +334,7 @@ final class UserPresenter extends OpenVKPresenter
        $this->redirect($user->getURL());
    }
    
-    function renderSetAvatar()
-    {
+    function renderSetAvatar() {
        $this->assertUserLoggedIn();
        $this->willExecuteWriteAction();
        
@ -346,8 +345,8 @@ final class UserPresenter extends OpenVKPresenter
            $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,6 +357,7 @@ final class UserPresenter extends OpenVKPresenter
        $flags = 0;
        $flags |= 0b00010000;

+        if($this->postParam("on_wall") == 1) {
            $post = new Post;
            $post->setOwner($this->user->id);
            $post->setWall($this->user->id);
@ -365,17 +365,50 @@ final class UserPresenter extends OpenVKPresenter
            $post->setContent("");
            $post->setFlags($flags);
            $post->save();
+
            $post->attach($photo);
-        if($this->postParam("ava", true) == (int)1) {
+        }
+
+        if((int)$this->postParam("ajax", true) == 1) {
            $this->returnJson([
+                "success"   => true,
+                "new_photo" => $photo->getPrettyId(),
                "url"       => $photo->getURL(),
-                "id" => $photo->getPrettyId()
            ]);
        } 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
    {
        $this->assertUserLoggedIn();
--- 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"}
--- 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">
--- 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>
--- 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}
--- 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"
--- a/Web/static/css/avatar-edit.css
+++ b/Web/static/css/avatar-edit.css
@ -0,0 +1,182 @@
+.avatar_block {
+    position: relative;
+    clip-path: inset(0 0 0.7% 0);
+}
+
+.avatar_block .add_image_text {
+    position: absolute;
+    font-size: 12px;
+    color: #2B587A;
+    text-align: center;
+    width: 100%;
+    left: 0px;
+    bottom: 30px;
+}
+
+.avatar_block .add_image_text:hover {
+    text-decoration: underline;
+}
+
+#temp_uploadPic {
+    width: 40%;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+}
+
+.hoverable {
+    transition: all 200ms ease-in-out;
+    opacity: 0.6;
+    cursor: pointer;
+}
+
+.hoverable:hover {
+    opacity: 1;
+}
+
+.avatar_block *, .avatar_block .avatarDelete::before {
+    -webkit-transition: all 200ms ease-in-out;
+    -moz-transition: all 200ms ease-in-out;
+    -o-transition: all 200ms ease-in-out;
+    transition: all 200ms ease-in-out;
+}
+
+._add_image::before {
+    margin-top: 2px;
+    content: ' ';
+    background: url('/assets/packages/static/openvk/img/upload.png');
+    width: 10px;
+    height: 10px;
+    display: inline-block;
+    margin-left: 15px;
+}
+
+.avatarDelete {
+    position: absolute;
+    right: 0%;
+    background-color: rgba(0, 0, 0, 0.75);
+    padding: 1px 0px 4px 3px;
+    border-radius: 0px 0px 0px 5px;
+    opacity: 0;
+    cursor: pointer;
+    width: 15px;
+    height: 13px;
+}
+
+.avatarDelete::before {
+    content: ' ';
+    background: url('/assets/packages/static/openvk/img/upload.png');
+    background-position: -10px 2px;
+    background-repeat: no-repeat;
+    width: 12px;
+    height: 14px;
+    display: inline-block;
+    opacity: 0.6;
+}
+
+div.avatar_block:hover .avatarDelete {
+    opacity: 1 !important;
+}
+
+div.avatar_block:hover .avatar_variants {
+    opacity: 1 !important;
+    margin-bottom: 1px;
+}
+
+.avatar_controls .avatar_variants {
+    opacity:0;
+    position:absolute;
+    background-color: rgba(0, 0, 0, 0.75);
+    width:100%;
+    bottom:0;
+    margin-bottom:-8px;
+    color:white;
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
+.avatar_controls .avatar_variants a {
+    opacity: 60%;
+    display: flex;
+    user-select: none;
+    padding: 5px 0px;
+}
+
+.avatar_controls .avatar_variants span {
+    color: white;
+    margin-left: 6px;
+}
+
+.avatar_controls .avatar_variants a:hover, .avatarDelete:hover::before {
+    opacity: 100%;
+}
+
+.cropper-container.moving .cropper-point {
+    opacity: 1;
+}
+
+.cropper-modal {
+    opacity: 0.7;
+    background-color: #000;
+}
+
+.cropper-point {
+    transition: opacity 200ms ease-in-out;
+    background-color: #fff !important;
+    height: 7px !important;
+    width: 9px !important;
+    opacity: 0.6;
+    box-shadow: black 0px 0px 2px;
+}
+
+.cropper-line {
+    opacity: 0;
+}
+
+.cropper-container {
+    width: 421px;
+    height: 279px;
+}
+
+.cropper-view-box {
+    outline: none;
+    outline-color: unset;
+}
+
+.cropper-image-cont {
+    height: 100vh;
+}
+
+.cropper-image-cont img {
+    max-width: 100%;
+}
+
+.cropper-image-cont .rotateButtons {
+    height: 20px;
+    margin-top: -31px;
+    margin-right: 5px;
+    width: 45px;
+    float: right;
+    position: relative;
+    display: flex;
+    padding: 3px 5px 3px 2px;
+    background: rgba(0,0,0,0.5);
+}
+
+.cropper-image-cont .rotateButtons div {
+    background-repeat: no-repeat;
+}
+
+.cropper-image-cont .rotateButtons ._rotateLeft {
+    background: url(/assets/packages/static/openvk/img/upload.png);
+    height: 20px;
+    width: 23px;
+    background-position: -23px 0px;
+}
+
+.cropper-image-cont .rotateButtons ._rotateRight {
+    background: url(/assets/packages/static/openvk/img/upload.png);
+    height: 18px;
+    width: 22px;
+    background-position: -46px 0px;
+}
--- a/Web/static/css/avataredit.css
+++ b/Web/static/css/avataredit.css
@ -1,88 +0,0 @@
-.text_add_image
-{
-    position:absolute;
-    font-size:12px;
-    color: #2B587A;
-    text-align:center;
-    width: 100%;
-    left: 0px;
-    bottom:30px;
-}
-.text_add_image:hover
-{
-    color:rgb(48, 41, 141);
-}
-.text_add_image, .avatarDelete img, .avatarDelete, .avatar_variants, .variant {
-    -webkit-transition: all 200ms ease-in-out;
-    -moz-transition: all 200ms ease-in-out;
-    -o-transition: all 200ms ease-in-out;
-    transition: all 200ms ease-in-out;
-}
-.avatarDelete
-{
-    position:absolute;
-    right:0%;
-    background-color: rgba(0, 0, 0, 0.75);
-    padding: 1px 0px 4px 3px;
-    border-radius: 0px 0px 0px 5px;
-    opacity:0;
-    cursor:pointer;
-}
-.avatarDelete img
-{
-    width:77%;
-    opacity:60%;
-    vertical-align:middle;
-}
-.avatarDelete img:hover
-{
-    opacity:100%
-}
-
-div.avatar_block:hover .avatarDelete
-{
-    opacity:1 !important;
-}
-
-div.avatar_block:hover .avatar_variants
-{
-    opacity:1 !important;
-    margin-bottom:1px;
-}
-
-.avatar_variants
-{
-    opacity:0;
-    position:absolute;
-    background-color: rgba(0, 0, 0, 0.75);
-    width:100%;
-    bottom:0;
-    margin-bottom:-8px;
-    color:white;
-    padding-top: 2px;
-    padding-bottom: 2px;
-}
-
-.variant
-{
-    opacity:60%;
-    display:flex;
-    user-select:none;
-}
-
-.variant p
-{
-    color:white;
-    margin-left: 6px;
-}
-
-.variant img
-{
-    color:white;
-    margin-top: 7px;
-}
-
-.variant:hover
-{
-    opacity:100%;
-}
--- a/Web/static/img/delete.png
+++ b/Web/static/img/delete.png
--- a/Web/static/img/upload.png
+++ b/Web/static/img/upload.png
--- a/Web/static/js/al_wall.js
+++ b/Web/static/js/al_wall.js
@ -1374,3 +1374,190 @@ $(document).on("click", "#photosAttachments", async (e) => {
        xhr.send(formdata)
    })
 })
+
+$(document).on("click", "#add_image", (e) => {
+    let isGroup = e.currentTarget.closest(".avatar_block").dataset.club != null
+    let group = isGroup ? e.currentTarget.closest(".avatar_block").dataset.club : 0
+
+    let body = `
+    <div id="avatarUpload">
+        <p>${isGroup == true ? tr('groups_avatar') : tr('friends_avatar')}</p>
+        <p>${tr('formats_avatar')}</p><br>
+
+        <label class="button" style="margin-left:45%;user-select:none" id="uploadbtn">
+            ${tr("browse")}
+            <input accept="image/*" type="file" name="blob" hidden style="display: none;">
+        </label>
+
+        <br><br>
+
+        <p>${tr('troubles_avatar')}</p>
+    </div>
+    `
+
+    let msg = MessageBox(tr('uploading_new_image'), body, [
+        tr('cancel')
+    ], [
+        (function() {
+            u("#tmpPhDelF").remove();
+        }),
+    ]);
+
+    msg.attr("style", "width: 600px;");
+    document.querySelector(".ovk-diag-body").style.padding = "13px"
+
+    $("#avatarUpload input").on("change", (ev) => {
+        let image = URL.createObjectURL(ev.currentTarget.files[0])
+        $(".ovk-diag-body")[0].innerHTML = `
+            <span>${!isGroup ? tr("selected_area_user") : tr("selected_area_club")}</span>
+
+            <p style="margin-bottom: 10px;">${tr("selected_area_rotate")}</p>
+
+            <div class="cropper-image-cont" style="max-height: 274px;">
+                <img src="${image}" id="temp_uploadPic">
+
+                <div class="rotateButtons">
+                    <div class="_rotateLeft hoverable"></div>
+                    <div class="_rotateRight hoverable"></div>
+                </div>
+            </div>
+
+            <label style="margin-top: 14px;display: block;">
+                <input id="publish_on_wall" type="checkbox" checked>${tr("publish_on_wall")}
+            </label>
+        `
+
+        document.querySelector(".ovk-diag-action").insertAdjacentHTML("beforeend", `
+            <button class="button" style="margin-left: 4px;" id="_uploadImg">${tr("upload_button")}</button>
+        `)
+        
+        const image_div = document.getElementById('temp_uploadPic');
+        const cropper = new Cropper(image_div, {
+            aspectRatio: NaN,
+            zoomable: true,
+            minCropBoxWidth: 150,
+            minCropBoxHeight: 150,
+            dragMode: 'move',
+            background: false,
+            center: false,
+            guides: false,
+            modal: true,
+            viewMode: 2,
+            cropstart(event) {
+                document.querySelector(".cropper-container").classList.add("moving")
+            },
+            cropend(event) {
+                document.querySelector(".cropper-container").classList.remove("moving")
+            },
+        });
+
+        msg.attr("style", "width: 487px;");
+
+        document.querySelector("#_uploadImg").onclick = (evv) => {
+            cropper.getCroppedCanvas({
+                fillColor: '#fff',
+                imageSmoothingEnabled: false,
+                imageSmoothingQuality: 'high',
+            }).toBlob((blob) => {
+                document.querySelector("#_uploadImg").classList.add("lagged")
+                let formdata = new FormData()
+                formdata.append("blob", blob)
+                formdata.append("ajax", 1)
+                formdata.append("on_wall", Number(document.querySelector("#publish_on_wall").checked))
+                formdata.append("hash", u("meta[name=csrf]").attr("value"))
+        
+                $.ajax({
+                    type: "POST",
+                    url: isGroup ? "/club" + group + "/al_avatar" : "/al_avatars",
+                    data: formdata,
+                    processData: false,
+                    contentType: false,
+                    error: (response) => {
+                        fastError(response.flash.message)
+                    },
+                    success: (response) => {
+                        document.querySelector("#_uploadImg").classList.remove("lagged")
+                        u("body").removeClass("dimmed");
+                        document.querySelector("html").style.overflowY = "scroll"
+                        u(".ovk-diag-cont").remove();
+
+                        if(!response.success) {
+                            fastError(response.flash.message)
+                            return
+                        }
+                        
+                        document.querySelector("#bigAvatar").src = response.url
+                        document.querySelector("#bigAvatar").parentNode.href = "/photo" + response.new_photo
+                    
+                        document.querySelector(".add_image_text").style.display = "none"
+                        document.querySelector(".avatar_controls").style.display = "block"
+                    }
+                })
+            })
+        }
+
+        $(".ovk-diag-body ._rotateLeft").on("click", (e) => {
+            cropper.rotate(90)
+        })
+
+        $(".ovk-diag-body ._rotateRight").on("click", (e) => {
+            cropper.rotate(-90)
+        })
+    })
+})
+
+$(document).on("click", ".avatarDelete", (e) => {
+    let isGroup = e.currentTarget.closest(".avatar_block").dataset.club != null
+    let group = isGroup ? e.currentTarget.closest(".avatar_block").dataset.club : 0
+
+    let body = `
+        <span>${tr("deleting_avatar_sure")}</span>
+    `
+
+    let msg = MessageBox(tr('deleting_avatar'), body, [
+        tr('yes'),
+        tr('no')
+    ], [
+        (function() {
+            let formdata = new FormData()
+            formdata.append("hash", u("meta[name=csrf]").attr("value"))
+
+            $.ajax({
+                type: "POST",
+                url: isGroup ? "/club" + group + "/delete_avatar" : "/delete_avatar",
+                data: formdata,
+                processData: false,
+                contentType: false,
+                beforeSend: () => {
+                    document.querySelector(".avatarDelete").classList.add("lagged")
+                },
+                error: (response) => {
+                    fastError(response.flash.message)
+                },
+                success: (response) => {
+                    if(!response.success) {
+                        fastError(response.flash.message)
+                        return
+                    }
+
+                    document.querySelector(".avatarDelete").classList.remove("lagged")
+                    
+                    u("body").removeClass("dimmed");
+                    document.querySelector("html").style.overflowY = "scroll"
+                    u(".ovk-diag-cont").remove();
+
+                    document.querySelector("#bigAvatar").src = response.url
+                    document.querySelector("#bigAvatar").parentNode.href = response.new_photo ? ("/photo" + response.new_photo) : "javascript:void(0)"
+                    
+                    if(!response.has_new_photo) {
+                        document.querySelector(".avatar_controls").style.display = "none"
+                        document.querySelector(".add_image_text").style.display = "block"
+                    }
+                }
+            })
+        }),
+        (function() {
+            u("#tmpPhDelF").remove();
+        }),
+    ]);
+})
--- a/Web/static/js/openvk.cls.js
+++ b/Web/static/js/openvk.cls.js
@ -483,91 +483,6 @@ function escapeHtml(text) {
    return text.replace(/[&<>"']/g, function(m) { return map[m]; });
 }

-function addAvatarImage(groupStrings = false, groupId = 0)
-{
-    let inputname = groupStrings == true ? 'ava' : 'blob';
-    let body = `
-    <div id="avatarUpload">
-        <p>${groupStrings == true ? tr('groups_avatar') : tr('friends_avatar')}</p>
-        <p>${tr('formats_avatar')}</p><br>
-        <img style="margin-left:46.3%;display:none" id="loader" src="/assets/packages/static/openvk/img/loading_mini.gif">
-        <label class="button" style="margin-left:45%;user-select:none" id="uploadbtn">${tr("browse")}
-        <input accept="image/*" type="file" name="${inputname}" hidden id="${inputname}" style="display: none;" onchange="uploadAvatar(${groupStrings}, ${groupStrings == true ? groupId : null})">
-        </label><br><br>
-        <p>${tr('troubles_avatar')}</p>
-    </div>
-    `
-    let msg = MessageBox(tr('uploading_new_image'), body, [
-        tr('cancel')
-    ], [
-        (function() {
-            u("#tmpPhDelF").remove();
-        }),
-    ]);
-    msg.attr("style", "width: 600px;");
-}
-
-function uploadAvatar(group = false, group_id = 0)
-{
-    loader.style.display = "block";
-    uploadbtn.setAttribute("hidden", "hidden")
-    let xhr = new XMLHttpRequest();
-    let formData = new FormData();
-    let bloborava = group == false ? "blob" : "ava"
-    formData.append(bloborava, document.getElementById(bloborava).files[0]);
-    formData.append("ava", 1)
-    formData.append("hash", u("meta[name=csrf]").attr("value"))
-    xhr.open("POST", group == true ? "/club"+group_id+"/al_avatar" : "/al_avatars")
-    xhr.onload = () => {
-        let json = JSON.parse(xhr.responseText);
-        document.getElementById(group == false ? "thisUserAvatar" : "thisGroupAvatar").src = json["url"];
-        u("body").removeClass("dimmed");
-        u(".ovk-diag-cont").remove();
-        if(document.getElementsByClassName("text_add_image")[0] == undefined)
-        {
-            document.getElementById("upl").href = "javascript:deleteAvatar('"+json["id"]+"', '"+u("meta[name=csrf]").attr("value")+"')"
-        }
-        //console.log(json["id"])
-        NewNotification(tr("update_avatar_notification"), tr("update_avatar_description"), json["url"], () => {window.location.href = "/photo" + json["id"]});
-        if(document.getElementsByClassName("text_add_image")[0] != undefined)
-        {
-            //ожидание чтобы в уведомлении была аватарка
-            let promise = new Promise((resolve, reject) => {
-                setTimeout(() => {
-                    location.reload()
-                }, 500);
-              });
-        }
-    }
-    xhr.send(formData)
-}
-
-function deleteAvatar(avatar)
-{
-    let body = `
-        <p>${tr("deleting_avatar_sure")}</p>
-    `
-    let msg = MessageBox(tr('deleting_avatar'), body, [
-        tr('yes'),
-        tr('cancel')
-    ], [
-        (function() {
-            let xhr = new XMLHttpRequest();
-            xhr.open("POST", "/photo"+avatar+"/delete")
-            xhr.onload = () => {
-                //не люблю формы
-                NewNotification(tr("deleted_avatar_notification"), "");
-                location.reload()
-            }
-            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
-            xhr.send("hash="+u("meta[name=csrf]").attr("value"))
-        }),
-        (function() {
-            u("#tmpPhDelF").remove();
-        }),
-    ]);
-}
-
 function expandSearch()
 {
    // console.log("search expanded")
--- a/Web/static/js/package.json
+++ b/Web/static/js/package.json
@ -2,6 +2,7 @@
  "dependencies": {
    "@atlassian/aui": "^9.6.0",
    "create-react-class": "^15.7.0",
+    "cropperjs": "^1.6.1",
    "dashjs": "^4.3.0",
    "id3js": "^2.1.1",
    "handlebars": "^4.7.7",
--- a/Web/static/js/yarn.lock
+++ b/Web/static/js/yarn.lock
@ -59,16 +59,16 @@ create-react-class@^15.7.0:
    loose-envify "^1.3.1"
    object-assign "^4.1.1"

+cropperjs@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/cropperjs/-/cropperjs-1.6.1.tgz#fd132021d93b824b1b0f2c2c3b763419fb792d89"
+  integrity sha512-F4wsi+XkDHCOMrHMYjrTEE4QBOrsHHN5/2VsVAaRq8P7E5z7xQpT75S+f/9WikmBEailas3+yo+6zPIomW+NOA==
+
 css.escape@1.5.1:
  version "1.5.1"
  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
  integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==

-dompurify@2.4.5:
-  version "2.4.5"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.4.5.tgz#0e89a27601f0bad978f9a924e7a05d5d2cccdd87"
-  integrity sha512-jggCCd+8Iqp4Tsz0nIvpcb22InKEBrGz5dw3EQJMs8HPJDsKbFIO3STYtAvCfDx26Muevn1MHVI0XxjgFfmiSA==
-
 dashjs@^4.3.0:
  version "4.3.0"
  resolved "https://registry.yarnpkg.com/dashjs/-/dashjs-4.3.0.tgz#cccda5a490cabf6c3b48aa887ec8c8ac0df1a233"
@ -81,6 +81,11 @@ dashjs@^4.3.0:
    imsc "^1.0.2"
    localforage "^1.7.1"

+dompurify@2.4.5:
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.4.5.tgz#0e89a27601f0bad978f9a924e7a05d5d2cccdd87"
+  integrity sha512-jggCCd+8Iqp4Tsz0nIvpcb22InKEBrGz5dw3EQJMs8HPJDsKbFIO3STYtAvCfDx26Muevn1MHVI0XxjgFfmiSA==
+
 encoding@^0.1.11:
  version "0.1.13"
  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
@ -121,10 +126,6 @@ fbjs@^0.8.0:
    setimmediate "^1.0.5"
    ua-parser-js "^0.7.18"

-html-entities@^1.2.1:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.4.0.tgz#cfbd1b01d2afaf9adca1b10ae7dffab98c71d2dc"
-  integrity sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==
 handlebars@^4.7.7:
  version "4.7.7"
  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
@ -137,6 +138,11 @@ handlebars@^4.7.7:
  optionalDependencies:
    uglify-js "^3.1.4"

+html-entities@^1.2.1:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.4.0.tgz#cfbd1b01d2afaf9adca1b10ae7dffab98c71d2dc"
+  integrity sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==
+
 iconv-lite@^0.6.2:
  version "0.6.3"
  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
--- a/locales/en.strings
+++ b/locales/en.strings
@ -466,15 +466,15 @@
 "formats_avatar" = "You can upload an image in JPG, GIF or PNG format.";
 "troubles_avatar" = "If you're having trouble uploading, try selecting a smaller photo.";
 "webcam_avatar" = "If your computer is equipped with a webcam, you can <a href='javascript:'>take a snapshot</a>.";
+"publish_on_wall" = "Make post on wall";

-"update_avatar_notification" = "Profile photo was updated";
-"update_avatar_description" = "Click to watch";
+"selected_area_user" = "The selected area will be shown on your page.";
+"selected_area_club" = "The selected area will be shown on the group page.";
+"selected_area_rotate" = "If the image is not oriented correctly, the photo can be rotated.";

 "deleting_avatar" = "Deleting photo";
 "deleting_avatar_sure" = "Do you sure you want to delete avatar?";

-"deleted_avatar_notification" = "Picture successfully deleted";
-
 "save_changes" = "Save changes";

 "upd_m" = "updated his profile picture";
--- a/locales/ru.strings
+++ b/locales/ru.strings
@ -452,15 +452,15 @@
 "formats_avatar" = "Вы можете загрузить изображение в формате JPG, GIF или PNG.";
 "troubles_avatar" = "Если возникают проблемы с загрузкой, попробуйте выбрать фотографию меньшего размера.";
 "webcam_avatar" = "Если ваш компьютер оснащён веб-камерой, Вы можете <a href='javascript:'>сделать моментальную фотографию »</a>";
+"publish_on_wall" = "Опубликовать запись на стене";

-"update_avatar_notification" = "Фотография профиля обновлена";
-"update_avatar_description" = "Нажмите сюда, чтобы перейти к просмотру";
+"selected_area_user" = "Выбранная область будет показываться на вашей странице.";
+"selected_area_club" = "Выбранная область будет показываться на странице сообщества.";
+"selected_area_rotate" = "Если изображение ориентировано неправильно, фотографию можно повернуть.";

 "deleting_avatar" = "Удаление фотографии";
 "deleting_avatar_sure" = "Вы действительно хотите удалить аватар?";

-"deleted_avatar_notification" = "Фотография успешно удалена";
-
 "save_changes" = "Сохранить изменения";

 "upd_m" = "обновил фотографию на своей странице";
--- a/themepacks/midnight/stylesheet.css
+++ b/themepacks/midnight/stylesheet.css
@ -386,3 +386,7 @@ ul {
 .tabcontent{
    background: #2c2640 !important;
 }
+
+.add_image_text {
+    z-index: 999;
+}