From b898baeadb67c661504aea08d83acae000e90f56 Mon Sep 17 00:00:00 2001 From: veselcraft Date: Thu, 15 Dec 2022 03:40:25 +0300 Subject: [PATCH] Photo: Add ability to slide trough photos in one post This also gives ability to easily implement comments and actions --- Web/Presenters/InternalAPIPresenter.php | 34 ++++++++ .../templates/components/attachment.xml | 2 +- .../components/post/microblogpost.xml | 2 +- .../templates/components/post/oldpost.xml | 2 +- Web/routes.yml | 2 + Web/static/css/style.css | 16 ++++ Web/static/js/al_wall.js | 87 ++++++++++++++++--- 7 files changed, 131 insertions(+), 14 deletions(-) diff --git a/Web/Presenters/InternalAPIPresenter.php b/Web/Presenters/InternalAPIPresenter.php index 1a107659..efcb0179 100644 --- a/Web/Presenters/InternalAPIPresenter.php +++ b/Web/Presenters/InternalAPIPresenter.php @@ -1,5 +1,6 @@ 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 + ]); + } + } } diff --git a/Web/Presenters/templates/components/attachment.xml b/Web/Presenters/templates/components/attachment.xml index 20a5cc75..633fcaef 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())} - + {$attachment->getDescription()} {else} diff --git a/Web/Presenters/templates/components/post/microblogpost.xml b/Web/Presenters/templates/components/post/microblogpost.xml index ae1de961..65f584aa 100644 --- a/Web/Presenters/templates/components/post/microblogpost.xml +++ b/Web/Presenters/templates/components/post/microblogpost.xml @@ -68,7 +68,7 @@ {var $attachmentsLayout = $post->getChildrenWithLayout($width)}
- {include "../attachment.xml", attachment => $attachment[2]} + {include "../attachment.xml", attachment => $attachment[2], post => $post}
diff --git a/Web/Presenters/templates/components/post/oldpost.xml b/Web/Presenters/templates/components/post/oldpost.xml index 653f7dd4..60ce827d 100644 --- a/Web/Presenters/templates/components/post/oldpost.xml +++ b/Web/Presenters/templates/components/post/oldpost.xml @@ -59,7 +59,7 @@ {var $attachmentsLayout = $post->getChildrenWithLayout($width)}
- {include "../attachment.xml", attachment => $attachment[2]} + {include "../attachment.xml", attachment => $attachment[2], post => $post}
diff --git a/Web/routes.yml b/Web/routes.yml index d3dcbc83..d6f9f8b4 100644 --- a/Web/routes.yml +++ b/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: diff --git a/Web/static/css/style.css b/Web/static/css/style.css index 9c5f809b..e1ca58e4 100644 --- a/Web/static/css/style.css +++ b/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; diff --git a/Web/static/js/al_wall.js b/Web/static/js/al_wall.js index f0232dd4..297e7e43 100644 --- a/Web/static/js/al_wall.js +++ b/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( `
- Фотография 1 из 1 + + +
Закрыть
- +
+
+
`); @@ -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"); }