Photo: Add ability to slide trough photos in one post

This also gives ability to easily implement comments and actions

Web/Presenters/InternalAPIPresenter.php

@@ -1,5 +1,6 @@
 <?php declare(strict_types=1);
 namespace openvk\Web\Presenters;
+use openvk\Web\Models\Repositories\Posts;
 use MessagePack\MessagePack;
 use Chandler\Session\Session;
 
@@ -95,4 +96,37 @@ final class InternalAPIPresenter extends OpenVKPresenter
             ]);
         }
     }
+
+    function renderGetPhotosFromPost(string $post_id) {
+        if($_SERVER["REQUEST_METHOD"] !== "POST") {
+            header("HTTP/1.1 405 Method Not Allowed");
+            exit("иди нахуй заебал");
+        }
+        
+        $id   = explode("_", $post_id);
+        $post = (new Posts)->getPostById(intval($id[0]), intval($id[1]));
+
+        if(is_null($post)) {
+            $this->returnJson([
+                "success" => 0
+            ]);
+        } else {
+            $response = [];
+            $attachments = $post->getChildren();
+            foreach($attachments as $attachment) 
+            {
+                if($attachment instanceof \openvk\Web\Models\Entities\Photo)
+                {
+                    $response[] = [
+                        "url" => $attachment->getURLBySizeId('normal'),
+                        "id"  => $attachment->getPrettyId()
+                    ];
+                }
+            }
+            $this->returnJson([
+                "success" => 1,
+                "body" => $response
+            ]);
+        }
+    }
 }

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}" onclick="OpenMiniature(event, {$attachment->getURLBySizeId('normal')})">
+        <a href="{$link}" onclick="OpenMiniature(event, {$attachment->getURLBySizeId('normal')}, {$post->getPrettyId()}, {$attachment->getPrettyId()})">
             <img class="media media_makima" src="{$attachment->getURLBySizeId('normal')}" alt="{$attachment->getDescription()}" />
         </a>
     {else}

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

@@ -68,7 +68,7 @@
                         {var $attachmentsLayout = $post->getChildrenWithLayout($width)}
                         <div n:ifcontent class="attachments_b" style="height: {$attachmentsLayout->height|noescape}; width: {$attachmentsLayout->width|noescape};">
                             <div class="attachment" n:foreach="$attachmentsLayout->tiles as $attachment" style="float: {$attachment[3]|noescape}; width: {$attachment[0]|noescape}; height: {$attachment[1]|noescape};" data-localized-nsfw-text="{_nsfw_warning}">
-                                {include "../attachment.xml", attachment => $attachment[2]}
+                                {include "../attachment.xml", attachment => $attachment[2], post => $post}
                             </div>
                         </div>
                     </div>

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

@@ -59,7 +59,7 @@
                         {var $attachmentsLayout = $post->getChildrenWithLayout($width)}
                         <div n:ifcontent class="attachments_b" style="height: {$attachmentsLayout->height|noescape}; width: {$attachmentsLayout->width|noescape};">
                             <div class="attachment" n:foreach="$attachmentsLayout->tiles as $attachment" style="float: {$attachment[3]|noescape}; width: {$attachment[0]|noescape}; height: {$attachment[1]|noescape};" data-localized-nsfw-text="{_nsfw_warning}">
-                                {include "../attachment.xml", attachment => $attachment[2]}
+                                {include "../attachment.xml", attachment => $attachment[2], post => $post}
                             </div>
                         </div>
                     </div>

Web/routes.yml

@@ -341,6 +341,8 @@ routes:
       handler: "About->humansTxt"
     - url: "/dev"
       handler: "About->dev"
+    - url: "/iapi/getPhotosFromPost/{text}"
+      handler: "InternalAPI->getPhotosFromPost"
     - url: "/{?shortCode}"
       handler: "UnknownTextRouteStrategy->delegate"
       placeholders:

Web/static/css/style.css

@@ -2246,6 +2246,22 @@ a.poll-retract-vote {
 	font-weight: normal;
 }
 
+.ovk-photo-slide-left {
+    left: 0;
+    width: 35%;
+    height: 100%;
+    position: absolute;
+    cursor: pointer;
+}
+
+.ovk-photo-slide-right {
+    right: 0;
+    width: 35%;
+    height: 100%;
+    position: absolute;
+    cursor: pointer;
+}
+
 @keyframes appearing {
     from {
         opacity: 0;

Web/static/js/al_wall.js

@@ -159,31 +159,36 @@ function removePicture(idA) {
     u(`div#aP${idA}`).nodes[0].remove();
 }
 
-function OpenMiniature(e, photo) {
+function OpenMiniature(e, photo, post, photo_id) {
     /*
-    В общем, надо сделать такую хуйню:
+    костыли но смешные однако
-
-    В функцию передаётся:
-    - Array с айди фотки и ссылкой прямой на пикчу
-    - index
-
-    Ну и вот как бы
     */
     e.preventDefault();
 
     if(u(".ovk-photo-view").length > 0) return false;
 
+    // Значения для переключения фоток
+
+    let json;
+
+    let imagesCount = 0;
+    let imagesIndex = 0;
+    
     let dialog = u(
     `<div class="ovk-photo-view-dimmer">
         <div class="ovk-photo-view">
             <div class="photo_com_title">
-                Фотография 1 из 1
+                <text id="photo_com_title_photos">
+                    <img src="/assets/packages/static/openvk/img/loading_mini.gif">
+                </text>
                 <div>
                     <a id="ovk-photo-close">Закрыть</a>
                 </div>
             </div>
             <center style="margin-bottom: 8pt;">
-                <img src="${photo}" style="max-width: 80%; max-height: 60vh;">
+                <div class="ovk-photo-slide-left"></div>
+                <div class="ovk-photo-slide-right"></div>
+                <img src="${photo}" style="max-width: 80%; max-height: 60vh;" id="ovk-photo-img">
             </center>
         </div>
     </div>`);
@@ -198,7 +203,67 @@ function OpenMiniature(e, photo) {
         };
         
         __closeDialog();
-    })
+    });
+
+    function __slidePhoto(direction) {
+        /* direction = 1 - right
+           direction = 0 - left */
+        if(json == undefined) {
+            console.log("Да подожди ты. Куда торопишься?");
+        } else {
+            if(imagesIndex >= imagesCount && direction == 1) {
+                imagesIndex = 1;
+            } else if(imagesIndex <= 1 && direction == 0) {
+                imagesIndex = imagesCount;
+            } else if(direction == 1) {
+                imagesIndex++;
+            } else if(direction == 0) {
+                imagesIndex--;
+            }
+
+            let photoURL = json.body[imagesIndex - 1].url;
+
+            u("#ovk-photo-img").last().src = photoURL;
+            u("#photo_com_title_photos").last().innerHTML = "Фотография " + imagesIndex + " из " + imagesCount;
+        }
+    }
+
+    let slideLeft = u(".ovk-photo-slide-left");
+
+    slideLeft.on("click", (e) => {
+        __slidePhoto(0);
+    });
+
+    let slideRight = u(".ovk-photo-slide-right");
+
+    slideRight.on("click", (e) => {
+        __slidePhoto(1);
+    });
+
+    ky.post("/iapi/getPhotosFromPost/" + post, {
+        hooks: {
+            afterResponse: [
+                async (_request, _options, response) => {
+                    json = await response.json();
+
+                    imagesCount = json.body.length;
+                    imagesIndex = 0;
+                    // Это всё придётся правда на 1 прибавлять
+                    
+                    json.body.every(element => {
+                        imagesIndex++;
+                        if(element.id == photo_id) {
+                            return false;
+                        } else {
+                            return true;
+                        }
+                    });
+
+                    u("#photo_com_title_photos").last().innerHTML = "Фотография " + imagesIndex + " из " + imagesCount;
+                }
+            ]
+        }
+    });
 
     return u(".ovk-photo-view-dimmer");
 }