Нормальная смена аватарок как в старом вк (#874)

* Fast avatar changing

* Fixed changing avatar from settings

* fixed otstup

Web/Models/Entities/Post.php

@@ -99,6 +99,11 @@ class Post extends Postable
         return (($this->getRecord()->flags & 0b00100000) > 0) && ($this->getRecord()->owner > 0);
     }
     
+    function isUpdateAvatarMessage(): bool
+    {
+        return (($this->getRecord()->flags & 0b00010000) > 0) && ($this->getRecord()->owner > 0);
+    }
+
     function isExplicit(): bool
     {
         return (bool) $this->getRecord()->nsfw;

Web/Presenters/GroupPresenter.php

@@ -1,6 +1,6 @@
 <?php declare(strict_types=1);
 namespace openvk\Web\Presenters;
-use openvk\Web\Models\Entities\{Club, Photo};
+use openvk\Web\Models\Entities\{Club, Photo, Post};
 use Nette\InvalidStateException;
 use openvk\Web\Models\Entities\Notifications\ClubModeratorNotification;
 use openvk\Web\Models\Repositories\{Clubs, Users, Albums, Managers, Topics};
@@ -251,6 +251,49 @@ final class GroupPresenter extends OpenVKPresenter
         }
     }
     
+    function renderSetAvatar(int $id)
+    {
+        $photo = new Photo;
+        $club = $this->clubs->get($id);
+        if($_SERVER["REQUEST_METHOD"] === "POST" && $_FILES["ava"]["error"] === UPLOAD_ERR_OK) {
+            try {
+                $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->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", "Неизвестная ошибка", "Не удалось сохранить фотографию.");
+            }
+        }
+        $this->returnJson([
+            "url" => $photo->getURL(),
+            "id" => $photo->getPrettyId()
+        ]);
+    }
     function renderEditBackdrop(int $id): void
     {
         $this->assertUserLoggedIn();

Web/Presenters/UserPresenter.php

@@ -39,6 +39,7 @@ final class UserPresenter extends OpenVKPresenter
             }
         } else {
             $this->template->albums      = (new Albums)->getUserAlbums($user);
+            $this->template->avatarAlbum = (new Albums)->getUserAvatarAlbum($user);
             $this->template->albumsCount = (new Albums)->getUserAlbumsCount($user);
             $this->template->videos      = (new Videos)->getByUser($user, 1, 2);
             $this->template->videosCount = (new Videos)->getUserVideosCount($user);
@@ -301,7 +302,7 @@ final class UserPresenter extends OpenVKPresenter
         $this->redirect($user->getURL());
     }
     
-    function renderSetAvatar(): void
+    function renderSetAvatar()
     {
         $this->assertUserLoggedIn();
         $this->willExecuteWriteAction();
@@ -321,8 +322,26 @@ final class UserPresenter extends OpenVKPresenter
         $album->addPhoto($photo);
         $album->setEdited(time());
         $album->save();
-        
+
-        $this->flashFail("succ", tr("photo_saved"), tr("photo_saved_comment"));
+        $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) {
+            $this->returnJson([
+                "url" => $photo->getURL(),
+                "id" => $photo->getPrettyId()
+            ]);
+        } else {
+            $this->flashFail("succ", tr("photo_saved"), tr("photo_saved_comment"));
+        }
     }
     
     function renderSettings(): void

Web/Presenters/templates/Group/View.xml

@@ -96,9 +96,27 @@
 <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())}
-    <a href="{$avatarLink|nocheck}">
+    <div class="avatar_block" style="position:relative;">
-        <img src="{$club->getAvatarUrl('normal')}" style="width: 100%; image-rendering: -webkit-optimize-contrast;" />
+        {var $hasAvatar = !str_contains($club->getAvatarUrl('miniscule'), "/assets/packages/static/openvk/img/camera_200.png")}
-    </a>
+        {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_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>
+                </div>
+            </div>
+        {/if}
+        <a href="{$avatarLink|nocheck}">
+            <img src="{$club->getAvatarUrl('normal')}" id="thisGroupAvatar" style="width: 100%; image-rendering: -webkit-optimize-contrast;" />
+        </a>
+    </div>
     <div n:ifset="$thisUser" id="profile_links">
         {if $club->canBeModifiedBy($thisUser)}
             <a href="/club{$club->getId()}/edit" id="profile_link">{_edit_group}</a>

Web/Presenters/templates/User/View.xml

@@ -69,10 +69,27 @@
     {else}
     
     <div class="left_small_block">
-        <div style="margin-left: auto;margin-right: auto;display: table;">
+        <div style="margin-left: auto;margin-right: auto;display: table;position:relative;" class="avatar_block" id="av">
+            {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>
+                    <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>
+                    </div>
+                </div>
+            {/if}
             <a href="{$user->getAvatarLink()|nocheck}">
                 <img src="{$user->getAvatarUrl('normal')}"
                      alt="{$user->getCanonicalName()}"
+                     id="thisUserAvatar"
                      style="width: 100%; image-rendering: -webkit-optimize-contrast;" />
             </a>
         </div>

Web/Presenters/templates/_includeCSS.xml

@@ -9,6 +9,7 @@
             {css "css/bsdn.css"}
             {css "css/dialog.css"}
             {css "css/notifications.css"}
+            {css "css/avataredit.css"}
 
             {if $isXmas}
                 {css "css/xmas.css"}
@@ -25,6 +26,7 @@
         {css "css/bsdn.css"}
         {css "css/dialog.css"}
         {css "css/notifications.css"}
+        {css "css/avataredit.css"}
 
         {if $isXmas}
             {css "css/xmas.css"}
@@ -48,6 +50,7 @@
     {css "css/dialog.css"}
     {css "css/nsfw-posts.css"}
     {css "css/notifications.css"}
+    {css "css/avataredit.css"}
 
     {if $isXmas}
         {css "css/xmas.css"}

Web/Presenters/templates/components/post/microblogpost.xml

@@ -27,6 +27,8 @@
                     <a href="{$author->getURL()}"><b>{$author->getCanonicalName()}</b></a>
                     <img n:if="$author->isVerified()" class="name-checkmark" src="/assets/packages/static/openvk/img/checkmark.png">
                     {$post->isDeactivationMessage() ? ($author->isFemale() ? tr($deac . "_f") : tr($deac . "_m"))}
+                    {$post->isUpdateAvatarMessage() && !$post->isPostedOnBehalfOfGroup() ? ($author->isFemale() ? tr("upd_f") : tr("upd_m"))}
+                    {$post->isUpdateAvatarMessage() && $post->isPostedOnBehalfOfGroup() ? tr("upd_g") : ""}
                     {if ($onWallOf ?? false) &&!$post->isPostedOnBehalfOfGroup() && $post->getOwnerPost() !== $post->getTargetWall()}
                         {var $wallOwner = $post->getWallOwner()}
                         <a href="{$wallOwner->getURL()}" class="mention" data-mention-ref="{$post->getTargetWall()}">

Web/Presenters/templates/components/post/oldpost.xml

@@ -22,6 +22,10 @@
                     <img n:if="$author->isVerified()" class="name-checkmark" src="/assets/packages/static/openvk/img/checkmark.png">
                     {if $post->isDeactivationMessage()}
                         {$author->isFemale() ? tr($deac . "_f") : tr($deac . "_m")}
+                    {elseif $post->isUpdateAvatarMessage() && !$post->isPostedOnBehalfOfGroup()}
+                        {$author->isFemale() ? tr("upd_f") : tr("upd_m")}
+                    {elseif $post->isUpdateAvatarMessage() && $post->isPostedOnBehalfOfGroup()}
+                        {tr("upd_g")}
                     {elseif $post->isPostedOnBehalfOfGroup()}
                         {_post_writes_g}
                     {else}

Web/routes.yml

@@ -189,6 +189,8 @@ routes:
           club: "club|public|event"
     - url: "/club{num}/edit"
       handler: "Group->edit"
+    - url: "/club{num}/al_avatar"
+      handler: "Group->setAvatar"
     - url: "/club{num}/backdrop"
       handler: "Group->editBackdrop"
     - url: "/club{num}/stats"

Web/static/css/avataredit.css

@@ -0,0 +1,88 @@
+.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%;
+}

Web/static/js/openvk.cls.js

@@ -440,6 +440,91 @@ 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();
+        }),
+    ]);
+}
+
 $(document).on("scroll", () => {
     if($(document).scrollTop() > $(".sidebar").height() + 50) {
         $(".floating_sidebar")[0].classList.add("show");

locales/en.strings

@@ -351,6 +351,30 @@
 "albums_list_one" = "You have one album";
 "albums_list_other" = "You have $1 albums";
 
+"add_image" = "Add image";
+"add_image_group" = "Upload image";
+"upload_new_picture" = "Upload new photo";
+"uploading_new_image" = "Uploading new photo";
+"friends_avatar" = "It will be easier for friends to recognize you if you upload your real picture.";
+"groups_avatar" = "Good photo can make your group more recognizable.";
+"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>.";
+
+"update_avatar_notification" = "Profile photo was updated";
+"update_avatar_description" = "Click to watch";
+
+"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";
+"upd_f" = "updated her profile picture";
+"upd_g" = "updated group's picture";
+
 /* Notes */
 
 "notes" = "Notes";

locales/ru.strings

@@ -335,6 +335,30 @@
 "albums_list_many" = "У Вас $1 альбомов";
 "albums_list_other" = "У Вас $1 альбомов";
 
+"add_image" = "Поставить изображение";
+"add_image_group" = "Загрузить фотографию";
+"upload_new_picture" = "Загрузить новую фотографию";
+"uploading_new_image" = "Загрузка новой фотографии";
+"friends_avatar" = "Друзьям будет проще узнать Вас, если вы загрузите свою настоящую фотографию.";
+"groups_avatar" = "Хорошее фото сделает Ваше сообщество более узнаваемым.";
+"formats_avatar" = "Вы можете загрузить изображение в формате JPG, GIF или PNG.";
+"troubles_avatar" = "Если возникают проблемы с загрузкой, попробуйте выбрать фотографию меньшего размера.";
+"webcam_avatar" = "Если ваш компьютер оснащён веб-камерой, Вы можете <a href='javascript:'>сделать моментальную фотографию »</a>";
+
+"update_avatar_notification" = "Фотография профиля обновлена";
+"update_avatar_description" = "Нажмите сюда, чтобы перейти к просмотру";
+
+"deleting_avatar" = "Удаление фотографии";
+"deleting_avatar_sure" = "Вы действительно хотите удалить аватар?";
+
+"deleted_avatar_notification" = "Фотография успешно удалена";
+
+"save_changes" = "Сохранить изменения";
+
+"upd_m" = "обновил фотографию на своей странице";
+"upd_f" = "обновила фотографию на своей странице";
+"upd_g" = "обновило фотографию группы";
+
 /* Notes */
 
 "notes" = "Заметки";