Changing avatar like in old VK

Web/Presenters/templates/Group/View.xml

@@ -96,9 +96,48 @@
 <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}">
-        <img src="{$club->getAvatarUrl('normal')}" style="width: 100%; image-rendering: -webkit-optimize-contrast;" />
-    </a>
+    <div style="position:relative;width:100%;"
+        onmouseover="
+            groupAvatarChange.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
+            groupAvatarChange.style.opacity = '1';
+            _avatarDelete.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
+            _avatarDelete.style.opacity = '1';
+            deleteButton.style.opacity = '1';
+            "
+        onmouseleave="
+            groupAvatarChange.style.backgroundColor = 'rgba(0, 0, 0, 0)';
+            groupAvatarChange.style.opacity = '0';
+            _avatarDelete.style.backgroundColor = 'rgba(0, 0, 0, 0)';
+            _avatarDelete.style.opacity = '0';
+            deleteButton.style.opacity = '0';
+        ">
+        {if !is_null($thisUser) && $club->canBeModifiedBy($thisUser)}
+            {if is_null($avatarPhoto) == true}
+            <a href="/club{$club->getId()}/edit" id="_newAvatarPicture" class="newpict">{_add_photo}</a>
+            {else}
+            <a id="_avatarDelete" href="/photo{$club->getAvatarPhoto()->getPrettyId()}/delete">
+                <img id="deleteButton" src="/assets/packages/static/openvk/img/delete.png" style="opacity:0;"></a>
+                <ul id="groupAvatarChange">
+                        <li id="ff">
+                            <img src="/assets/packages/static/openvk/img/upload.png" id="_newAvatarPicture2"><a href="/club{$club->getId()}/edit" id="_newAvatarPicture" style="color:#B2B2B2;" onmouseover="_newAvatarPicture.style.color = '#D9D9D9';" onmouseleave="_newAvatarPicture.style.color = '#B2B2B2';"> {tr("new_photo")}</a>
+                        </li>
+                        <!--<li><img src="/assets/packages/static/openvk/img/miniature.png"><a href="javascript:alert('')" id="_changeMiniature" style="color:#B2B2B2;" onmouseover="_changeMiniature.style.color = '#D9D9D9';" onmouseleave="_changeMiniature.style.color = '#B2B2B2';">{tr("change_miniature")}</a></li>-->
+                </ul>
+            {/if}
+        {/if}
+        {if is_null($avatarPhoto) == false}<a href="/photo{$club->getAvatarPhoto()->getPrettyId()}"
+        {else}<a href="javascript:void(0)"
+        {/if}>
+        <img id="clubAvatar" src="{$club->getAvatarUrl('normal')}" style="width: 100%; image-rendering: -webkit-optimize-contrast;"></a>
+        <script>
+            //_newAvatarPicture.style.marginTop = clubAvatar.height-30+"px";
+            window.addEventListener("load", event => {
+                    let image = clubAvatar;
+                    groupAvatarChange.style.marginTop = image.height-33+"px";
+                    groupAvatarChange.style.width = image.width/1.25+"px"
+            });
+        </script>
+    </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

@@ -70,10 +70,53 @@
     
     <div class="left_small_block">
         <div style="margin-left: auto;margin-right: auto;display: table;">
-            <a href="{$user->getAvatarLink()|nocheck}">
-                <img src="{$user->getAvatarUrl('normal')}"
-                     alt="{$user->getCanonicalName()}"
-                     style="width: 100%; image-rendering: -webkit-optimize-contrast;" />
+            <div
+            {if !is_null($thisUser) && $user->getId() == $thisUser->getId()} onmouseover="
+                {if is_null($user->getAvatarPhoto()) == false && $user->getAvatarPhoto()->getURL() != "$serverUrl/assets/packages/static/openvk/img/camera_200.png"}
+                _avatarDelete.style.backgroundColor='rgba(0, 0, 0, 0.7)';
+                deleteButton.style.opacity='100%';
+                {/if}
+                avatarChange.style.backgroundColor='rgba(0, 0, 0, 0.7)';
+                avatarChange.style.opacity='100%';
+                "
+                onmouseleave="
+                {if is_null($user->getAvatarPhoto()) == false && $user->getAvatarPhoto()->getURL() != "$serverUrl/assets/packages/static/openvk/img/camera_200.png"}
+                _avatarDelete.style.backgroundColor='rgba(0, 0, 0, 0)';
+                deleteButton.style.opacity='0%';
+                {/if}
+                avatarChange.style.backgroundColor='rgba(0, 0, 0, 0)';
+                avatarChange.style.opacity='0%';
+                //pizdec
+                "{/if}>
+            <div n:if="!is_null($thisUser) && $user->getId() == $thisUser->getId()">
+                <div id="avatarEdit">
+                    <div n:if="is_null($user->getAvatarPhoto()) == false && $user->getAvatarPhoto()->getURL() != '$serverUrl/assets/packages/static/openvk/img/camera_200.png'">
+                        <a id="_avatarDelete" href="/photo{$user->getAvatarPhoto()->getPrettyId()}/delete">
+                    <img id="deleteButton" src="/assets/packages/static/openvk/img/delete.png"></a>
+                    </div>
+                </div>
+                <ul id="avatarChange">
+                        <li><img src="/assets/packages/static/openvk/img/upload.png" id="uploadIcon">
+                        <a href="/al_avatars" id="_newPicture" onmouseover="_newPicture.style.color = '#D9D9D9';" onmouseleave="_newPicture.style.color = '#B2B2B2';"> {tr("new_photo")}</a>
+                        </li>
+                        <!--<li><img src="/assets/packages/static/openvk/img/miniature.png"><a href="javascript:alert('')" id="_changeMiniature" style="color:#B2B2B2;" onmouseover="_changeMiniature.style.color = '#D9D9D9';" onmouseleave="_changeMiniature.style.color = '#B2B2B2';">{tr("change_miniature")}</a></li>-->
+                        <!--в опенвк не предвидится смена минатюры-->
+                </ul>
+                 
+            </div>
+                <a href="{$user->getAvatarLink()|nocheck}">
+                    <img src="{$user->getAvatarUrl('normal')}"
+                        id="avatarImage"
+                        alt="{$user->getCanonicalName()}"
+                        style="max-width:100%; image-rendering: -webkit-optimize-contrast;" />
+                <script>
+                    window.addEventListener("load", event => {
+                        let image = avatarImage;
+                        avatarChange.style.marginTop = image.height-32+"px";
+                        avatarChange.style.width = image.width/1.25+"px"
+                    });
+                 </script>
+            </div>
             </a>
         </div>
         <div n:ifset="$thisUser" id="profile_links">

Web/Presenters/templates/_includeCSS.xml

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

Web/static/css/avataredit.css

@@ -0,0 +1,63 @@
+/*avatar controls idk*/
+#avatarEdit
+{
+    position: relative;
+}
+#_avatarDelete 
+{
+    position:absolute;
+    right:0;
+    top:0;
+    background-color:rgba(51, 51, 51, 0); 
+    border-radius: 0px 0px 3px 3px;
+    padding:2px;
+    padding-left:3px;
+}
+#deleteButton
+{
+    opacity:0;
+}
+#avatarChange
+{
+    position:absolute;
+    width:100px;
+    background-color:rgba(51, 51, 51, 0);
+    list-style-type: none;
+    font-size:11px;
+    padding-top:10px;
+    padding-bottom:10px;
+    opacity:0%;
+}
+#uploadIcon
+{
+    position:absolute;
+    left:0;
+    margin-left:20px;
+}
+#_newPicture
+{
+    color:#B2B2B2;
+}
+.newpict
+{
+    position:absolute;
+    margin-left:0;
+    margin-right:0;
+}
+#groupAvatarChange
+{
+    position:absolute;
+    width:100px;
+    background-color:rgba(51, 51, 51, 0);
+    list-style-type: none;
+    font-size:11px;
+    padding-top:10px;
+    padding-bottom:10px;
+    opacity:0%;
+}
+#_newAvatarPicture2
+{
+    position:absolute;
+    left:0;
+    margin-left:20px;
+}

Web/static/js/openvk.cls.js

@@ -65,7 +65,6 @@ function toggleMenu(id) {
         });
     }
 }
-
 document.addEventListener("DOMContentLoaded", function() { //BEGIN
 
     u("#_photoDelete").on("click", function(e) {
@@ -88,7 +87,66 @@ document.addEventListener("DOMContentLoaded", function() { //BEGIN
         
         return e.preventDefault();
     });
+    u("#_avatarDelete").on("click", function(e) {
+        var formHtml = "<form id='tmpPhDelF' action='" + u(this).attr("href") + "' >";
+        formHtml    += "<input type='hidden' name='hash' value='" + u("meta[name=csrf]").attr("value") + "' />";
+        formHtml    += "</form>";
+        u("body").append(formHtml);
         
+        MessageBox(tr('prevention'), tr('delete_photo'), [
+            tr('delete'),
+            tr('close')
+        ], [
+            (function() {
+                u("#tmpPhDelF").nodes[0].submit();
+            }),
+            (function() {
+                u("#tmpPhDelF").remove();
+            }),
+        ]);
+        
+        return e.preventDefault();
+    });
+    u("#_newPicture").on("click", function(e) {
+        MessageBox(tr('new_photo'), 
+        "<form id='tmpPhDelF' action='" + u(this).attr("href") + "' method='POST' enctype='multipart/form-data'>"+
+        "<div id='tmpdd' style='text-align:center'>"+tr('real_photo')+"<br><br>"+tr('formats')+"<br><br>"+"<input type='file' accept='image/*' name='blob' value='"+tr('select_file')+"'><br><br>"+tr('upload_problems')+"<br></div>"+
+        //"<p><input type='checkbox' name='makeAvatarPost'>"+tr('leave_photo')+"</p>"+
+        "<input type='hidden' name='hash' value='" + u("meta[name=csrf]").attr("value") + "' />"+
+        "</form>", [
+            tr('upload_button'),
+            tr('close')
+        ], [
+            (function() {
+                u("#tmpPhDelF").nodes[0].submit();
+            }),
+            (function() {
+                u("#tmpPhDelF").remove();
+            }),
+        ]);
+        
+        return e.preventDefault();
+    });
+    u("#_newAvatarPicture").on("click", function(e) {
+        MessageBox(tr('new_photo'), 
+        "<form id='tmpPhDelF' action='" + u(this).attr("href") + "' method='POST' enctype='multipart/form-data'>"+
+        "<div id='tmpdd' style='text-align:center'>"+tr('good_photo')+"<br><br>"+tr('formats')+"<br><br>"+"<input type='file' accept='image/*' name='ava' value='"+tr('select_file')+"'><br><br>"+tr('upload_problems')+"<br></div>"+
+        //"<p><input type='checkbox' name='makeAvatarPost' value='1'>"+tr('leave_photo')+"</p>"+
+        "<input type='hidden' name='hash' value='" + u("meta[name=csrf]").attr("value") + "' />"+
+        "</form>", [
+            tr('upload_button'),
+            tr('close')
+        ], [
+            (function() {
+                u("#tmpPhDelF").nodes[0].submit();
+            }),
+            (function() {
+                u("#tmpPhDelF").remove();
+            }),
+        ]);
+        
+        return e.preventDefault();
+    });
     /* @rem-pai why this func wasn't named as "#_deleteDialog"? It looks universal IMO */
 
     u("#_noteDelete").on("click", function(e) {

locales/en.strings

@@ -210,6 +210,9 @@
 
 "reply" = "Reply";
 
+"updated_photo_m" = "updated his avatar";
+"updated_photo_f" = "updated her avatar";
+
 /* Friends */
 
 "friends" = "Friends";
@@ -326,6 +329,7 @@
 "search_group" = "Search group";
 "search_by_groups" = "Search by groups";
 "search_group_desc" = "Here you can browse through the existing groups and choose a group to suit your needs...";
+"add_photo" = "Add photo";
 
 /* Albums */
 
@@ -351,6 +355,18 @@
 "albums_list_one" = "You have one album";
 "albums_list_other" = "You have $1 albums";
 
+"new_photo" = "Upload new photo";
+
+"real_photo" = "It will be easier for your friends to recognize you, if you upload your real picture.";
+"formats" = "You can upload an image in JPG, GIF or PNG format.";
+"upload_problems" = "If you're having troubles during uploading, try selecting a smaller photo.";
+"webcam_avatar" = "If your computer has a webcam, you can take a photo from the webcam »";
+
+"delete_photo" = "Are you sure you want to delete the photo?";
+"change_miniature" = "Change miniature";
+"good_photo" = "A good photo will make your community more recognizable.";
+"leave_photo" = "Leave post on the wall";
+
 /* Notes */
 
 "notes" = "Notes";
@@ -1194,7 +1210,7 @@
 
 "warning" = "Warning";
 "question_confirm" = "This action can't be undone. Do you really wanna do it?";
-
+"prevention" = "Prevention";
 /* User alerts */
 
 "user_alert_scam" = "This account has been reported a lot for scam. Please be careful, especially if he asked for money.";

locales/ru.strings

@@ -187,6 +187,8 @@
 "version_incompatibility" = "Не удалось отобразить это вложение. Возможно, база данных несовместима с текущей версией OpenVK.";
 "graffiti" = "Граффити";
 "reply" = "Ответить";
+"updated_photo_m" = "обновил фотографию на странице";
+"updated_photo_f" = "обновила фотографию на странице";
 
 /* Friends */
 
@@ -310,6 +312,7 @@
 "search_group" = "Поиск группы";
 "search_by_groups" = "Поиск по группам";
 "search_group_desc" = "Здесь Вы можете просмотреть существующие группы и выбрать группу себе по вкусу...";
+"add_photo" = "Загрузить фотографию";
 
 /* Albums */
 
@@ -335,6 +338,20 @@
 "albums_list_many" = "У Вас $1 альбомов";
 "albums_list_other" = "У Вас $1 альбомов";
 
+"new_photo" = "Загрузка новой фотографии";
+"real_photo" = "Друзьям будет проще узнать Вас, если вы загрузите свою настоящую фотографию.";
+
+"formats" = "Вы можете загрузить изображение в формате JPG, GIF или PNG.";
+"upload_problems" = "Если у Вас возникают проблемы с загрузкой, попробуйте выбрать фотографию меньшего размера.";
+"webcam_avatar" = "Если Ваш компьютер оснащён веб-камерой, Вы можете сделать моментальную фотографию »";
+
+"select_file" = "Выбрать файл";
+"delete_photo" = "Вы уверены, что хотите удалить фотографию?";
+
+"change_miniature" = "Изменить миниатюру";
+"good_photo" = "Хорошее фото сделает Ваше сообщество более узнаваемым.";
+"leave_photo" = "Оставить пост на стене";
+
 /* Notes */
 
 "notes" = "Заметки";
@@ -1082,7 +1099,7 @@
 "close" = "Закрыть";
 "warning" = "Внимание";
 "question_confirm" = "Это действие нельзя отменить. Вы действительно уверены в том что хотите сделать?";
-
+"prevention" = "Предупреждение";
 /* User alerts */
 
 "user_alert_scam" = "На этот аккаунт много жаловались в связи с мошенничеством. Пожалуйста, будьте осторожны, особенно если у вас попросят денег.";