Lanmikeman/openvk
Lanmikeman/openvk
1
1
Fork 0
mirror of https://github.com/openvk/openvk synced 2024-12-23 00:51:03 +03:00
Code Issues Projects Releases Packages Wiki Activity

[WIP] Textarea: Add upload multiple pictures

Browse source 
Now there's thumbnail feature in TextArea box.

This is WIP, as the video is broken and posts doesn't feel good with multiple images
This commit is contained in:
veselcraft 2022-02-04 16:41:19 +03:00
parent 4d6af6d28e
commit ee58f81df3
No known key found for this signature in database
GPG key ID: AED66BC1AC628A4E
4 changed files with 139 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
Web/Presenters/WallPresenter.php
View file

@ -202,48 +202,45 @@ final class WallPresenter extends OpenVKPresenter
if($this->postParam("force_sign") === "on")
$flags |= 0b01000000;
try {
$photo = NULL;
$video = NULL;
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);
$photos = [];
$_FILES["_pic_attachment"] = null;
foreach($_FILES as $file) {
bdump($file);
try {
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);
}
} catch(\DomainException $ex) {
$this->flashFail("err", "Не удалось опубликовать пост", "Файл медиаконтента повреждён.");
} catch(ISE $ex) {
$this->flashFail("err", "Не удалось опубликовать пост", "Файл медиаконтента повреждён или слишком велик.");
}
if($_FILES["_vid_attachment"]["error"] === UPLOAD_ERR_OK) {
$video = Video::fastMake($this->user->id, $this->postParam("text"), $_FILES["_vid_attachment"], $anon);
}
} catch(\DomainException $ex) {
$this->flashFail("err", "Не удалось опубликовать пост", "Файл медиаконтента повреждён.");
} catch(ISE $ex) {
$this->flashFail("err", "Не удалось опубликовать пост", "Файл медиаконтента повреждён или слишком велик.");
}
if(empty($this->postParam("text")) && !$photo && !$video)
if(empty($this->postParam("text")) && empty($photos))
$this->flashFail("err", "Не удалось опубликовать пост", "Пост пустой или слишком большой.");
try {
$post = new Post;
$post->setOwner($this->user->id);
$post->setWall($wall);
$post->setCreated(time());
$post->setContent($this->postParam("text"));
$post->setAnonymous($anon);
$post->setFlags($flags);
$post->setNsfw($this->postParam("nsfw") === "on");
$post = new Post;
$post->setOwner($this->user->id);
$post->setWall($wall);
$post->setCreated(time());
$post->setContent($this->postParam("text"));
$post->setAnonymous($anon);
$post->setFlags($flags);
$post->setNsfw($this->postParam("nsfw") === "on");
$post->save();
} catch (\LengthException $ex) {
$this->flashFail("err", "Не удалось опубликовать пост", "Пост слишком большой.");
}
if(!is_null($photo))
$post->attach($photo);
if(!is_null($video))
$post->attach($video);
foreach($photos as $photo) {
$post->attach($photo);
}
if($wall > 0 && $wall !== $this->user->identity->getId())
(new WallPostNotification($wallOwner, $post, $this->user->identity))->emit();

8
Web/Presenters/templates/components/textArea.xml
View file

@ -8,8 +8,8 @@
<!-- padding to fix <br/> bug -->
</div>
<div id="post-buttons{$textAreaId}" style="display: none;">
<div class="post-upload">
{_attachment}: <span>(unknown)</span>
<div class="upload">
</div>
<div n:if="$postOpts ?? true" class="post-opts">
{var anonEnabled = OPENVK_ROOT_CONF['openvk']['preferences']['wall']['anonymousPosting']['enable']}
@ -80,10 +80,6 @@
<script>
$(document).ready(() => {
u("#post-buttons{$textAreaId} .postFileSel").on("change", function() {
handleUpload.bind(this, {$textAreaId})();
});
setupWallPostInputHandlers({$textAreaId});
});
</script>

61
Web/static/css/style.css
View file

@ -1841,3 +1841,64 @@ body.scrolled .toTop:hover {
.center {
margin: 0 auto;
}
.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;
}

57
Web/static/js/al_wall.js
View file

@ -22,7 +22,7 @@ function trim(string) {
return newStr;
}
function handleUpload(id) {
/* function handleUpload(id) {
console.warn("блять...");
u("#post-buttons" + id + " .postFileSel").not("#" + this.id).each(input => input.value = null);
@ -37,7 +37,7 @@ function handleUpload(id) {
}
document.querySelector("#post-buttons" + id + " #wallAttachmentMenu").classList.add("hidden");
}
} */
function initGraffiti(id) {
let canvas = null;
@ -95,16 +95,9 @@ 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) {
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;
var textArea = e.target;
@ -116,4 +109,46 @@ 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);
}
}
});
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);
});
function addPhotoMedia(files, preview) {
if(getMediaCount() >= 4) {
alert('Низя.');
} 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();
}