Photo: Add minimal implementation of миниатюра открывашка

Co-authored-by: Daniel <60743585+myslivets@users.noreply.github.com>

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}

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;

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();