From b1ba794510ac71344e2ef85a1070e037b5f16fba Mon Sep 17 00:00:00 2001
From: veselcraft <veselcraft@icloud.com>
Date: Wed, 14 Dec 2022 03:14:34 +0300
Subject: [PATCH] =?UTF-8?q?Photo:=20Add=20minimal=20implementation=20of=20?=
 =?UTF-8?q?=D0=BC=D0=B8=D0=BD=D0=B8=D0=B0=D1=82=D1=8E=D1=80=D0=B0=20=D0=BE?=
 =?UTF-8?q?=D1=82=D0=BA=D1=80=D1=8B=D0=B2=D0=B0=D1=88=D0=BA=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Daniel <60743585+myslivets@users.noreply.github.com>
---
 .../templates/components/attachment.xml       |  2 +-
 Web/static/css/style.css                      | 35 +++++++++++++++
 Web/static/js/al_wall.js                      | 44 +++++++++++++++++++
 3 files changed, 80 insertions(+), 1 deletion(-)

diff --git a/Web/Presenters/templates/components/attachment.xml b/Web/Presenters/templates/components/attachment.xml
index 508313a5..20a5cc75 100644
--- a/Web/Presenters/templates/components/attachment.xml
+++ b/Web/Presenters/templates/components/attachment.xml
@@ -1,7 +1,7 @@
 {if $attachment instanceof \openvk\Web\Models\Entities\Photo}
     {if !$attachment->isDeleted()}
         {var $link = "/photo" . ($attachment->isAnonymous() ? ("s/" . base_convert((string) $attachment->getId(), 10, 32)) : $attachment->getPrettyId())}
-        <a href="{$link}">
+        <a href="{$link}" onclick="OpenMiniature(event, {$attachment->getURLBySizeId('normal')})">
             <img class="media media_makima" src="{$attachment->getURLBySizeId('normal')}" alt="{$attachment->getDescription()}" />
         </a>
     {else}
diff --git a/Web/static/css/style.css b/Web/static/css/style.css
index 0822a786..9c5f809b 100644
--- a/Web/static/css/style.css
+++ b/Web/static/css/style.css
@@ -2211,6 +2211,41 @@ a.poll-retract-vote {
     border-radius: 3px;
 }
 
+/* https://imgur.com/a/ihB3JZ4 */
+
+.ovk-photo-view-dimmer {
+    position: fixed;
+    left: 0px;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    overflow: auto;
+    padding-bottom: 20px;
+    z-index: 300;
+}
+
+.ovk-photo-view {
+    position: relative;
+    z-index: 999;
+    background: #fff;
+    width: 610px;
+    padding: 20px;
+    padding-top: 15px;
+    padding-bottom: 10px;
+    box-shadow: 0px 0px 3px 1px #222;
+    margin: 15px auto 0 auto;
+}
+
+.photo_com_title {
+	font-weight: bold;
+	padding-bottom: 20px;
+}
+
+.photo_com_title div {
+	float: right;
+	font-weight: normal;
+}
+
 @keyframes appearing {
     from {
         opacity: 0;
diff --git a/Web/static/js/al_wall.js b/Web/static/js/al_wall.js
index 802a81e4..f0232dd4 100644
--- a/Web/static/js/al_wall.js
+++ b/Web/static/js/al_wall.js
@@ -159,6 +159,50 @@ function removePicture(idA) {
     u(`div#aP${idA}`).nodes[0].remove();
 }
 
+function OpenMiniature(e, photo) {
+    /*
+    В общем, надо сделать такую хуйню:
+
+    В функцию передаётся:
+    - Array с айди фотки и ссылкой прямой на пикчу
+    - index
+
+    Ну и вот как бы
+    */
+    e.preventDefault();
+
+    if(u(".ovk-photo-view").length > 0) return false;
+    
+    let dialog = u(
+    `<div class="ovk-photo-view-dimmer">
+        <div class="ovk-photo-view">
+            <div class="photo_com_title">
+                Фотография 1 из 1
+                <div>
+                    <a id="ovk-photo-close">Закрыть</a>
+                </div>
+            </div>
+            <center style="margin-bottom: 8pt;">
+                <img src="${photo}" style="max-width: 80%; max-height: 60vh;">
+            </center>
+        </div>
+    </div>`);
+    u("body").addClass("dimmed").append(dialog);
+    
+    let button = u("#ovk-photo-close");
+
+    button.on("click", function(e) {
+        let __closeDialog = () => {
+            u("body").removeClass("dimmed");
+            u(".ovk-photo-view-dimmer").remove();
+        };
+        
+        __closeDialog();
+    })
+
+    return u(".ovk-photo-view-dimmer");
+}
+
 u("#write > form").on("keydown", function(event) {
     if(event.ctrlKey && event.keyCode === 13)
         this.submit();