Textarea: Make multiple attachments

Web/Presenters/WallPresenter.php

@@ -247,15 +247,28 @@ final class WallPresenter extends OpenVKPresenter
             $flags |= 0b01000000;
         
         try {
-            $photo = NULL;
+            $photos = [];
             $video = NULL;
-            if($_FILES["_pic_attachment"]["error"] === UPLOAD_ERR_OK) {
+            /* if($_FILES["_pic_attachment"]["error"] === UPLOAD_ERR_OK) {
                 $album = NULL;
                 if(!$anon && $wall > 0 && $wall === $this->user->id)
                     $album = (new Albums)->getUserWallAlbum($wallOwner);
                 
                 $photo = Photo::fastMake($this->user->id, $this->postParam("text"), $_FILES["_pic_attachment"], $album, $anon);
+            } */
+
+            foreach($_FILES as $file) {
+                bdump($file);
+                if($file["error"] === UPLOAD_ERR_OK && preg_match('/^image\//', $file['type'])) {
+                    $album = NULL;
+                    if(!$anon && $wall > 0 && $wall === $this->user->id)
+                        $album = (new Albums)->getUserWallAlbum($wallOwner);
+
+                    $photos[] = Photo::fastMake($this->user->id, $this->postParam("text"), $file, $album, $anon);
+                }
             }
+
+            bdump($photos);
             
             if($_FILES["_vid_attachment"]["error"] === UPLOAD_ERR_OK)
                 $video = Video::fastMake($this->user->id, $this->postParam("text"), $_FILES["_vid_attachment"], $anon);
@@ -276,7 +289,7 @@ final class WallPresenter extends OpenVKPresenter
             $this->flashFail("err", tr("failed_to_publish_post"), "Poll format invalid");
         }
         
-        if(empty($this->postParam("text")) && !$photo && !$video && !$poll)
+        if(empty($this->postParam("text")) && !$photos && !$video && !$poll)
             $this->flashFail("err", tr("failed_to_publish_post"), tr("post_is_empty_or_too_big"));
         
         try {
@@ -293,8 +306,8 @@ final class WallPresenter extends OpenVKPresenter
             $this->flashFail("err", tr("failed_to_publish_post"), tr("post_is_too_big"));
         }
         
-        if(!is_null($photo))
+        foreach($photos as $photo)
-            $post->attach($photo);
+        	$post->attach($photo);
         
         if(!is_null($video))
             $post->attach($video);

Web/Presenters/templates/components/textArea.xml

@@ -8,8 +8,8 @@
             <!-- padding to fix <br/> bug -->
         </div>
         <div id="post-buttons{$textAreaId}" style="display: none;">
-            <div class="post-upload">
+            <div class="upload">
-                {_attachment}: <span>(unknown)</span>
+
             </div>
             <div class="post-has-poll">
                 {_poll}

Web/static/css/style.css

@@ -2144,6 +2144,67 @@ a.poll-retract-vote {
     border-radius: 1px;
 }
 
+.progress {
+    border: 1px solid #eee;
+    height: 15px;
+    background: linear-gradient(to bottom, #fefefe, #fafafa);
+}
+
+.progress .progress-bar {
+    background: url('progress.png');
+    background-repeat: repeat-x;
+    height: 15px;
+    animation-name: progress;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+@keyframes progress {
+    from {
+        background-position: 0;
+    }
+
+    to {
+        background-position: 20px;
+    }
+}
+
+.upload {
+    margin-top: 8px;
+}
+
+.upload .upload-item {
+    width: 75px;
+    height: 60px;
+    overflow: hidden;
+    display: inline-block;
+    margin-right: 3px;
+}
+
+.upload-item .upload-delete {
+    position: absolute;
+    background: rgba(0,0,0,0.5);
+    padding: 2px 5px;
+    text-decoration: none;
+    color: #fff;
+    font-size: 11px;
+    margin-left: 57px; /* мне лень переделывать :DDDD */
+    opacity: 0;
+    transition: 0.25s;
+}
+
+.upload-item:hover > .upload-delete {
+    opacity: 1;
+}
+
+.upload-item img {
+    width: 100%;
+    max-height: 60px;
+    object-fit: cover;
+    border-radius: 3px;
+}
+
 @keyframes appearing {
     from {
         opacity: 0;

Web/static/js/al_wall.js

@@ -95,15 +95,17 @@ u(".post-like-button").on("click", function(e) {
     return false;
 });
 
+let picCount = 0;
+
 function setupWallPostInputHandlers(id) {
-    u("#wall-post-input" + id).on("paste", function(e) {
+    /* u("#wall-post-input" + id).on("paste", function(e) {
         if(e.clipboardData.files.length === 1) {
             var input = u("#post-buttons" + id + " input[name=_pic_attachment]").nodes[0];
             input.files = e.clipboardData.files;
             
             u(input).trigger("change");
         }
-    });
+    }); */
     
     u("#wall-post-input" + id).on("input", function(e) {
         var boost             = 5;
@@ -116,6 +118,48 @@ function setupWallPostInputHandlers(id) {
         // revert to original size if it is larger (possibly changed by user)
         // textArea.style.height = (newHeight > originalHeight ? (newHeight + boost) : originalHeight) + "px";
     });
+
+    u(`#wall-post-input${id}`).on("paste", function(e) {
+        for (let i = 0; i < e.clipboardData.files.length; i++) {
+            console.log(e.clipboardData.files[i]);
+            if(e.clipboardData.files[i].type.match('^image/')) {
+                let blobURL = URL.createObjectURL(e.clipboardData.files[i]);
+                addPhotoMedia(e.clipboardData.files, blobURL, id);
+            }
+        }
+    });
+
+    u(`#post-buttons${id} input[name=_pic_attachment]`).on("change", function(e) {
+        let blobURL = URL.createObjectURL(e.target.files[0]);
+        addPhotoMedia(e.target.files, blobURL, id);
+    });
+
+    function addPhotoMedia(files, preview, id) {
+        if(getMediaCount() >= 10) {
+            alert('Не больше 10 пикч');
+        } else {
+            picCount++;
+            u(`#post-buttons${id} .upload`).append(u(`
+                <div class="upload-item" id="aP${picCount}">
+                    <a href="javascript:removePicture(${picCount})" class="upload-delete">×</a>
+                    <img src="${preview}">
+                </div>
+            `));
+            u(`div#aP${picCount}`).nodes[0].append(u(`<input type="file" accept="image/*" name="attachPic${picCount}" id="attachPic${picCount}" style="display: none;">`).first());
+            let input = u(`#attachPic${picCount}`).nodes[0];
+            input.files = files; // нужен рефактор, но щас не
+            console.log(input);
+            u(input).trigger("change");
+        }
+    }
+
+    function getMediaCount() {
+        return u(`#post-buttons${id} .upload`).nodes[0].children.length;
+    }
+}
+
+function removePicture(idA) {
+    u(`div#aP${idA}`).nodes[0].remove();
 }
 
 u("#write > form").on("keydown", function(event) {