feat(ModalPosts): VK-like modal posts

Web/Presenters/WallPresenter.php

@@ -123,6 +123,11 @@ public function renderWallEmbedded(int $user): void
         $this->renderWall($user, true);
     }
 
+    public function renderPostEmbedded(int $wall, int $post_id): void
+    {
+        $this->renderPost($wall, $post_id, true);
+    }
+
     public function renderRSS(int $user): void
     {
         $owner = ($user < 0 ? (new Clubs()) : (new Users()))->get(abs($user));
@@ -439,7 +444,7 @@ public function renderMakePost(int $wall): void
         }
     }
 
-    public function renderPost(int $wall, int $post_id): void
+    public function renderPost(int $wall, int $post_id, bool $embedded = false): void
     {
         $post = $this->posts->getPostById($wall, $post_id);
         if (!$post || $post->isDeleted()) {
@@ -470,6 +475,9 @@ public function renderPost(int $wall, int $post_id): void
         $this->template->cCount   = $post->getCommentsCount();
         $this->template->cPage    = (int) ($_GET["p"] ?? 1);
         $this->template->comments = iterator_to_array($post->getComments($this->template->cPage));
+        if ($embedded == true) {
+            $this->template->_template = "components/post/embeddedpost.xml";
+        }
     }
 
     public function renderLike(int $wall, int $post_id): void

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

@@ -0,0 +1,165 @@
+{extends "../../@layout.xml"}
+
+{block title}
+    {_post}
+{/block}
+
+{block header}
+    {_post}
+{/block}
+
+
+
+{block content}
+{var $author = $post->getOwner()}
+{var $commentsCount = $post->getCommentsCount()}
+{var $platform = $post->getPlatform()}
+{var $platformDetails = $post->getPlatformDetails()}
+{var $likesCount = $post->getLikesCount()}
+{var $repostsCount = $post->getRepostCount()}
+{var $canBePinned = $post->canBePinnedBy($thisUser ?? NULL)}
+{var $canBeDeleted = $post->canBeDeletedBy($thisUser)}
+{var $wallOwner = $post->getWallOwner()}
+{if $post->isDeactivationMessage() && $post->getText()}
+    {var $deac = "post_deact"}
+{else}
+    {var $deac = "post_deact_silent"}
+{/if}
+{var $compact = isset($compact) ? true : false}
+{var $club = isset($club) ? $club}
+
+{var $commentTextAreaId = $post === NULL ? rand(1,300) : $post->getId()}
+    <style>
+        .sidebar, .page_header, .page_footer {
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        .page_body {
+            margin-top: -45px;
+        }
+    </style>
+
+    <div style="font-size: 11px;" data-id="{$post->getPrettyId()}" n:class="post, !$compact ? post-divider, $post->isExplicit() ? post-nsfw">
+
+        <div>
+            <div width="54" valign="top" class="post-modal-header">
+                <a href="{$author->getURL()}">
+                    <img src="{$author->getAvatarURL('miniscule')}" width="{if $compact}25{else}50{/if}" class="post-avatar {if $compact}cCompactAvatars{/if}" />
+                </a>
+                <div class="post-author post-modal-author">
+                    <a href="{$author->getURL()}"><b class="post-author-name">{$author->getCanonicalName()}</b></a>
+                    <img n:if="$author->isVerified()" class="name-checkmark" src="/assets/packages/static/openvk/img/checkmark.png">
+                    {$post->isDeactivationMessage() ? ($author->isFemale() ? tr($deac . "_f") : ($author->isNeutral() ? tr($deac . "_g") : tr($deac . "_m")))}
+                    {$post->isUpdateAvatarMessage() && !$post->isPostedOnBehalfOfGroup() ? ($author->isFemale() ? tr("upd_f") : ($author->isNeutral() ? tr("upd_n") : tr("upd_m")))}
+                    {$post->isUpdateAvatarMessage() && $post->isPostedOnBehalfOfGroup() ? tr("upd_g") : ""}
+                    {if ($onWallOf ?? false) &&!$post->isPostedOnBehalfOfGroup() && $post->getOwnerPost() !== $post->getTargetWall()}
+                        <a href="{$wallOwner->getURL()}" class="mention" data-mention-ref="{$post->getTargetWall()}">
+                            <b>
+                                {if isset($thisUser) && $thisUser->getId() === $post->getTargetWall()}
+                                {_post_on_your_wall}
+                                {elseif $wallOwner instanceof \openvk\Web\Models\Entities\Club}
+                                {tr("post_on_group_wall", ovk_proc_strtr($wallOwner->getName(), 52))}
+                                {else}
+                                {tr("post_on_user_wall", $wallOwner->getMorphedName("genitive", false))}
+                                {/if}
+                            </b>
+                        </a>
+                    {/if}
+                    <span n:if="!$post->isPostedOnBehalfOfGroup() && !$compact && $author->isOnline()" class="post-online">{_online}</span>
+                    {if $compact}
+                        <br>
+                        <a href="/wall{$post->getPrettyId()}" class="date">
+                            {$post->getPublicationTime()}
+                        </a>
+                    {/if}
+
+                </div>
+            </div>
+            <div width="100%" valign="top">
+                <div class="post-content" id="{$post->getPrettyId()}" data-localized-nsfw-text="{_nsfw_warning}" style="padding: 10px">
+                    <div class="text" id="text{$post->getPrettyId()}">
+                        <span data-text="{$post->getText(false)}" class="really_text">{$post->getText()|noescape}</span>
+
+                        {var $width = ($GLOBALS["_bigWall"] ?? false) ? 550 : 320}
+                        {if isset($GLOBALS["_nesAttGloCou"])}
+                            {var $width = $width - 70 * $GLOBALS["_nesAttGloCou"]}
+                        {/if}
+                        {var $attachmentsLayout = $post->getChildrenWithLayout($width)}
+                        <div n:ifcontent class="attachments 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};">
+                                {include "../attachment.xml", attachment => $attachment[2], parent => $post, parentType => "post", tilesCount => sizeof($attachmentsLayout->tiles)}
+                            </div>
+                        </div>
+
+                        <div n:ifcontent class="attachments attachments_m">
+                            <div class="attachment" n:foreach="$attachmentsLayout->extras as $attachment">
+                                {include "../attachment.xml", attachment => $attachment, post => $post}
+                            </div>
+                        </div>
+                    </div>
+                    <div n:if="$post->getGeo()" class="post-geo">
+                        <a onclick="javascript:openGeo({$post->getGeo()}, {$post->getTargetWall()}, {$post->getVirtualId()})">
+                            <svg class="map_svg_icon" width="13" height="12" viewBox="0 0 3.4395833 3.175">
+                                <g><path d="M 1.7197917 0.0025838216 C 1.1850116 0.0049444593 0.72280427 0.4971031 0.71520182 1.0190592 C 0.70756921 1.5430869 1.7223755 3.1739665 1.7223755 3.1739665 C 1.7223755 3.1739665 2.7249195 1.5439189 2.7243815 0.99632161 C 2.7238745 0.48024825 2.2492929 0.00024648357 1.7197917 0.0025838216 z M 1.7197917 0.52606608 A 0.48526123 0.48526123 0 0 1 2.2050334 1.0113078 A 0.48526123 0.48526123 0 0 1 1.7197917 1.4965495 A 0.48526123 0.48526123 0 0 1 1.23455 1.0113078 A 0.48526123 0.48526123 0 0 1 1.7197917 0.52606608 z " /></g>
+                            </svg>
+                            {$post->getGeo()->name ?? tr("admin_open")}
+                        </a>
+                    </div>
+                    <div n:if="$post->isAd()" style="color:grey;">
+                        <br/>
+                        &nbsp;! {_post_is_ad}
+                    </div>
+                    <div n:if="$post->hasSource()" class="sourceDiv">
+                        <span>{_source}: {$post->getSource(true)|noescape}</span>
+                    </div>
+                    <div n:if="$post->isSigned()" class="post-signature">
+                        {var $actualAuthor = $post->getOwner(false)}
+                        <span>
+                            <div class="authorIcon"></div>
+                            <a href="{$actualAuthor->getURL()}" class="mention authorName" data-mention-ref="{$actualAuthor->getId()}">
+                               {$actualAuthor->getCanonicalName()}
+                            </a>
+                        </span>
+                    </div>
+                </div>
+                <div class='post-edit' n:if='!$compact'></div>
+                <div class="post-menu" n:if="$compact == false">
+                    <a href="{if !$suggestion}/wall{$post->getPrettyId()}{else}javascript:void(0){/if}" class="date">{$post->getPublicationTime()}
+                        <span n:if="$post->getEditTime()" class="edited editedMark">({_edited_short})</span>
+                    </a>
+
+                    <a n:if="!empty($platform)" class="client_app" data-app-tag="{$platform}" data-app-name="{$platformDetails['name']}" data-app-url="{$platformDetails['url']}" data-app-img="{$platformDetails['img']}">
+                        <img src="/assets/packages/static/openvk/img/app_icons_mini/{$post->getPlatform(this)}.svg">
+                    </a>
+                    {if isset($thisUser)}
+
+                        <div class="like_wrap">
+                            <a n:if="!($forceNoShareLink ?? false)" id="reposts{$post->getPrettyId()}" class="post-share-button" href="javascript:repost('{$post->getPrettyId()}', 'post')">
+                                <div class="repost-icon" style="opacity: 0.4;"></div>
+                                <span class="likeCnt" id="repostsCount{$post->getPrettyId()}">{if $repostsCount > 0}{$repostsCount}{/if}</span>
+                            </a>
+
+                            {if !($forceNoLike ?? false)}
+                                {var $liked = $post->hasLikeFrom($thisUser)}
+                                <a href="/wall{$post->getPrettyId()}/like?hash={rawurlencode($csrfToken)}" class="post-like-button" data-liked="{(int) $liked}" data-likes="{$likesCount}" data-id="{$post->getPrettyId()}" data-type='post'>
+                                    <div class="heart" id="{if $liked}liked{/if}"></div>
+                                    <span class="likeCnt">{if $likesCount > 0}{$likesCount}{/if}</span>
+                                </a>
+                            {/if}
+                        </div>
+                    {/if}
+                </div>
+                <div style="float: left; min-height: 100px; width: 100%;">
+        {include "../comments.xml",
+                 comments => $comments,
+                 count => $cCount,
+                 page => $cPage,
+                 model => "posts",
+                 parent => $post }
+    </div>
+            </div>
+        </div>
+    </div>
+</div>
+{/block}

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

@@ -119,7 +119,7 @@
                 </div>
                 <div class='post-edit' n:if='!$compact'></div>
                 <div class="post-menu" n:if="$compact == false">
-                    <a href="{if !$suggestion}/wall{$post->getPrettyId()}{else}javascript:void(0){/if}" class="date">{$post->getPublicationTime()}
+                    <a href="{if !$suggestion}/wall{$post->getPrettyId()}{else}javascript:void(0){/if}" id="al-post" data-id="{$post->getPrettyId()}" class="date">{$post->getPublicationTime()}
                         <span n:if="$post->getEditTime()" class="edited editedMark">({_edited_short})</span>
                     </a>
 

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

@@ -59,7 +59,7 @@
                         </a>
                     {/if}
                     <br/>
-                    <a href="{if !$suggestion}/wall{$post->getPrettyId()}{else}javascript:void(0){/if}" class="date">
+                    <a href="{if !$suggestion}/wall{$post->getPrettyId()}{else}javascript:void(0){/if}" id="al-post" data-id="{$post->getPrettyId()}" class="date">
                         {$post->getPublicationTime()} <span n:if="$post->getEditTime()" class="editedMark">({_edited_short})</span>{if $post->isPinned()}, {_pinned}{/if}
 
                         <a n:if="!empty($platform)" class="client_app" data-app-tag="{$platform}" data-app-name="{$platformDetails['name']}" data-app-url="{$platformDetails['url']}" data-app-img="{$platformDetails['img']}">

Web/routes.yml

@@ -131,6 +131,8 @@ routes:
       handler: "Wall->makePost"
     - url: "/wall{num}_{num}"
       handler: "Wall->post"
+    - url: "/wall{num}_{num}_e"
+      handler: "Wall->postEmbedded"
     - url: "/wall{num}_{num}/like"
       handler: "Wall->like"
     - url: "/wall{num}_{num}/repost"

Web/static/css/main.css

@@ -4286,3 +4286,43 @@ hr {
 .deleted_mark_average {
     padding: 5px 61px;
 }
+
+
+.post-modal-view {
+    position: relative;
+    z-index: 999;
+    background: #fff;
+    min-width: 600px;
+    width: fit-content;
+    padding: 25px;
+    padding-top: 15px;
+    padding-bottom: 10px;
+    box-shadow: 0px 0px 3px 1px #222;
+    margin: 20px auto 0 auto;
+}
+
+.post-modal-title {
+	font-weight: bold;
+	padding-bottom: 16px;
+}
+
+.post-modal-title div {
+	float: right;
+	font-weight: normal;
+}
+
+.post-modal-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.post-modal-header {
+    display: flex;
+}
+
+.post-modal-author {
+    margin: 5px;
+    margin-top: 0px;
+    width: 100%;
+}

Web/static/js/al_wall.js

@@ -2951,3 +2951,58 @@ u(document).on("submit", "#additional_fields_form", (e) => {
         }
     }) 
 })
+
+async function getEmbeddedPost(postId) {
+    CMessageBox.toggleLoader()
+    let request = await fetch("/wall"+postId+"_e")
+    const body_html = await request.text()
+    const parser  = new DOMParser
+    const body    = parser.parseFromString(body_html, "text/html")
+
+    const preview = body.querySelector('.post')
+
+    if (request.status != 200) {
+        MessageBox("Error", "Post not found", ["Ок"], [Function.noop])
+    } else {
+        const photo_viewer = new CMessageBox({
+            title: '',
+            custom_template: u(`
+            <div class="ovk-photo-view-dimmer">
+                <div class="post-modal-view">
+                    <div class="post-modal-title">
+                        <text>
+                            ${tr("post")}
+                        </text>
+                        <div>
+                            <a id="ovk-photo-close">${tr("close")}</a>
+                        </div>
+                    </div>
+                    <div class='post-modal-wrapper'>
+                        ${preview.innerHTML}
+                    </div>
+                </div>
+            </div>`)
+        })
+        photo_viewer.getNode().find("#ovk-photo-close").on("click", function(e) {
+            photo_viewer.close()
+        });
+    }
+
+
+    CMessageBox.toggleLoader()
+
+    history.replaceState(null, null, `?w=wall${postId}`)
+}
+
+u(document).on("click", "#al-post", (e) => {
+    e.preventDefault();
+    const postId = String(e.target.dataset.id);
+    getEmbeddedPost(postId)
+});
+
+const params = new URLSearchParams(window.location.search);
+
+if (params.has("w")) {
+  let post_id = params.get("w").replace("wall", "");
+  getEmbeddedPost(post_id)
+}