FloatingPhotoViewer: Refactor, and make it better

- Now you can actually check the comments under EVERY photo
- Fix for textarea. Now you can publish comments

Web/Presenters/templates/Photos/Photo.xml

@@ -28,7 +28,7 @@
     
     <div style="width: 100%; min-height: 100px;" class="ovk-photo-details">
         <div style="float: left; min-height: 100px; width: 70%;">
-            {include "../components/comments.xml", comments => $comments, count => $cCount, page => $cPage, model => "photos", parent => $photo}
+            {include "../components/comments.xml", comments => $comments, count => $cCount, page => $cPage, model => "photos", parent => $photo, custom_id => 999}
         </div>
         <div style="float: left; min-height: 100px; width: 30%;">
             <div>

Web/Presenters/templates/components/comments.xml

@@ -4,7 +4,7 @@
     {var $commentsURL = "/al_comments/create/$model/" . $parent->getId()}
     {var $club = $parent instanceof \openvk\Web\Models\Entities\Post && $parent->getTargetWall() < 0 ? (new openvk\Web\Models\Repositories\Clubs)->get(abs($parent->getTargetWall())) : $club}
     {if !$readOnly}
-        {include "textArea.xml", route => $commentsURL, postOpts => false, graffiti => (bool) ovkGetQuirk("comments.allow-graffiti"), club => $club}
+        {include "textArea.xml", route => $commentsURL, postOpts => false, graffiti => (bool) ovkGetQuirk("comments.allow-graffiti"), club => $club, custom_id => $custom_id}
     {/if}
 </div>
 

Web/Presenters/templates/components/textArea.xml

@@ -1,5 +1,6 @@
 {php if(!isset($GLOBALS["textAreaCtr"])) $GLOBALS["textAreaCtr"] = 10;}
 {var $textAreaId = ($post ?? NULL) === NULL ? (++$GLOBALS["textAreaCtr"]) : $post->getId()}
+{var $textAreaId = ($custom_id ?? NULL) === NULL ? $textAreaId : $custom_id}
 
 <div id="write" style="padding: 5px 0;" onfocusin="expand_wall_textarea({$textAreaId});">
     <form action="{$route}" method="post" enctype="multipart/form-data" style="margin:0;">

Web/static/css/style.css

@@ -2323,6 +2323,10 @@ a.poll-retract-vote {
     margin: 15px auto 0 auto;
 }
 
+.ovk-photo-details {
+    overflow: auto;
+}
+
 .photo_com_title {
 	font-weight: bold;
 	padding-bottom: 20px;
@@ -2337,6 +2341,7 @@ a.poll-retract-vote {
     left: 0;
     width: 35%;
     height: 100%;
+    max-height: 60vh;
     position: absolute;
     cursor: pointer;
 }
@@ -2345,6 +2350,7 @@ a.poll-retract-vote {
     right: 0;
     width: 35%;
     height: 100%;
+    max-height: 60vh;
     position: absolute;
     cursor: pointer;
 }

Web/static/js/al_wall.js

@@ -174,6 +174,8 @@ function OpenMiniature(e, photo, post, photo_id) {
     let imagesCount = 0;
     let imagesIndex = 0;
 
+    let tempDetailsSection = [];
+    
     let dialog = u(
     `<div class="ovk-photo-view-dimmer">
         <div class="ovk-photo-view">
@@ -208,6 +210,36 @@ function OpenMiniature(e, photo, post, photo_id) {
         __closeDialog();
     });
 
+    function __reloadTitleBar() {
+        u("#photo_com_title_photos").last().innerHTML = "Фотография " + imagesIndex + " из " + imagesCount;
+    }
+
+    function __loadDetails(photo_id, index) {
+        if(tempDetailsSection[index] == null) {
+            u(".ovk-photo-details").last().innerHTML = '<img src="/assets/packages/static/openvk/img/loading_mini.gif">';
+            ky("/photo" + photo_id, {
+                hooks: {
+                    afterResponse: [
+                        async (_request, _options, response) => {
+                            let parser = new DOMParser();
+                            let body = parser.parseFromString(await response.text(), "text/html");
+
+                            let element = u(body.getElementsByClassName("ovk-photo-details")).last();
+
+                            tempDetailsSection[index] = element.innerHTML;
+
+                            if(index == imagesIndex) {
+                                u(".ovk-photo-details").last().innerHTML = element.innerHTML;
+                            }
+                        }
+                    ]
+                }
+            });
+        } else {
+            u(".ovk-photo-details").last().innerHTML = tempDetailsSection[index];
+        }
+    }
+
     function __slidePhoto(direction) {
         /* direction = 1 - right
            direction = 0 - left */
@@ -227,7 +259,8 @@ function OpenMiniature(e, photo, post, photo_id) {
             let photoURL = json.body[imagesIndex - 1].url;
 
             u("#ovk-photo-img").last().src = photoURL;
-            u("#photo_com_title_photos").last().innerHTML = "Фотография " + imagesIndex + " из " + imagesCount;
+            __reloadTitleBar();
+            __loadDetails(json.body[imagesIndex - 1].id, imagesIndex);
         }
     }
 
@@ -262,25 +295,8 @@ function OpenMiniature(e, photo, post, photo_id) {
                         }
                     });
 
-                    u("#photo_com_title_photos").last().innerHTML = "Фотография " + imagesIndex + " из " + imagesCount;
-                }
-            ]
-        }
-    });
-
-    ky("/photo" + photo_id, {
-        hooks: {
-            afterResponse: [
-                async (_request, _options, response) => {
-                    let parser = new DOMParser();
-                    let body = parser.parseFromString(await response.text(), "text/html");
-
-                    let element = u(body.getElementsByClassName("ovk-photo-details")).last();
-
-                    u(".ovk-photo-details").last().innerHTML = element.innerHTML;
-
-                    u("#photo_com_title_photos").last().innerHTML = "Фотография " + imagesIndex + " из " + imagesCount;
-                }
+                    __reloadTitleBar();
+                    __loadDetails(json.body[imagesIndex - 1].id, imagesIndex);                }
             ]
         }
     });