mirror of
https://github.com/openvk/openvk
synced 2025-07-07 00:09:48 +03:00
add good view
This commit is contained in:
lalka2016
parent
357ba0a73f
commit
1b08e03f41
7 changed files with 186 additions and 37 deletions
|
|
@ -224,12 +224,12 @@ final class PhotosPresenter extends OpenVKPresenter
|
|||
$this->willExecuteWriteAction(true);
|
||||
|
||||
if(is_null($this->queryParam("album")))
|
||||
$this->flashFail("err", "Неизвестная ошибка", "Не удалось сохранить фотографию в <b>DELETED</b>.", 500, true);
|
||||
$this->flashFail("err", "Неизвестная ошибка", "Не удалось сохранить фотографию в DELETED.", 500, true);
|
||||
|
||||
[$owner, $id] = explode("_", $this->queryParam("album"));
|
||||
$album = $this->albums->get((int) $id);
|
||||
if(!$album)
|
||||
$this->flashFail("err", "Неизвестная ошибка", "Не удалось сохранить фотографию в <b>DELETED</b>.", 500, true);
|
||||
$this->flashFail("err", "Неизвестная ошибка", "Не удалось сохранить фотографию в DELETED.", 500, true);
|
||||
if(is_null($this->user) || !$album->canBeModifiedBy($this->user->identity))
|
||||
$this->flashFail("err", "Ошибка доступа", "Недостаточно прав для модификации данного ресурса.", 500, true);
|
||||
|
||||
|
|
@ -242,6 +242,9 @@ final class PhotosPresenter extends OpenVKPresenter
|
|||
|
||||
if(!$phot || $phot->isDeleted() || $phot->getOwner()->getId() != $this->user->id)
|
||||
continue;
|
||||
|
||||
if(iconv_strlen($description) > 255)
|
||||
$this->flashFail("err", tr("error"), tr("description_too_long"), 500, true);
|
||||
|
||||
$phot->setDescription($description);
|
||||
$phot->save();
|
||||
|
|
@ -276,7 +279,7 @@ final class PhotosPresenter extends OpenVKPresenter
|
|||
];
|
||||
} catch(ISE $ex) {
|
||||
$name = $album->getName();
|
||||
$this->flashFail("err", "Неизвестная ошибка", "Не удалось сохранить фотографию в <b>$name</b>.", 500, true);
|
||||
$this->flashFail("err", "Неизвестная ошибка", "Не удалось сохранить фотографию в $name.", 500, true);
|
||||
}
|
||||
|
||||
$album->addPhoto($photo);
|
||||
|
|
|
|||
|
|
@ -14,6 +14,15 @@
|
|||
{/block}
|
||||
|
||||
{block content}
|
||||
<div class="tabs">
|
||||
<div id="activetabs" class="tab">
|
||||
<a id="act_tab_a" href="/album{$album->getPrettyId()}/edit">{_edit_album}</a>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<a href="/photos/upload?album={$album->getPrettyId()}">{_add_photos}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
<table cellspacing="6">
|
||||
<tbody>
|
||||
|
|
|
|||
|
|
@ -12,17 +12,48 @@
|
|||
{/block}
|
||||
|
||||
{block content}
|
||||
<div class="uploadPhotos">
|
||||
<input type="file" accept=".jpg,.png,.gif" name="files[]" multiple class="button" id="uploadButton" style="display:none">
|
||||
<input type="button" class="button" id="fakeButton" onclick="uploadButton.click()" value="{_upload_picts}">
|
||||
<div class="tabs">
|
||||
<div class="tab">
|
||||
<a href="/album{$album->getPrettyId()}/edit">{_edit_album}</a>
|
||||
</div>
|
||||
<div id="activetabs" class="tab">
|
||||
<a id="act_tab_a" href="#">{_add_photos}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="file" accept=".jpg,.png,.gif" name="files[]" multiple class="button" id="uploadButton" style="display:none">
|
||||
|
||||
<div class="container_gray" style="height: 344px;">
|
||||
<div class="insertThere"></div>
|
||||
<div class="whiteBox" style="display: block;">
|
||||
<div class="boxContent">
|
||||
<h4>{_uploading_photos_from_computer}</h4>
|
||||
|
||||
<div class="limits" style="margin-top:17px">
|
||||
<b style="color:#45688E">{_admin_limits}</b>
|
||||
<ul class="blueList" style="margin-left: -25px;margin-top: 1px;">
|
||||
<li>{_supported_formats}</li>
|
||||
<li>{_max_load_photos}</li>
|
||||
</ul>
|
||||
|
||||
<div style="text-align: center;padding-top: 4px;" class="insertAgain">
|
||||
<input type="button" class="button" id="fakeButton" onclick="uploadButton.click()" value="{_upload_picts}">
|
||||
</div>
|
||||
|
||||
<div class="tipping" style="margin-top: 19px;">
|
||||
<span style="line-height: 15px"><b>{_tip}</b>: {_tip_ctrl}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="insertPhotos" id="photos" style="margin-top: 9px;padding-bottom: 12px;"></div>
|
||||
|
||||
<input type="button" class="button" style="display:none;margin-left: auto;margin-right: auto;" id="endUploading" value="{_end_uploading}">
|
||||
</div>
|
||||
|
||||
<table style="border-spacing: 6px 10px;">
|
||||
<tbody id="photos"></tbody>
|
||||
</table>
|
||||
<input n:ifset="$_GET['album']" type="hidden" id="album" value="{$_GET['album']}" />
|
||||
|
||||
<input type="button" class="button" style="display:none;" id="endUploading" value="{_end_uploading}">
|
||||
|
||||
<script>
|
||||
uploadButton.value = ''
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2722,3 +2722,78 @@ body.article .floating_sidebar, body.article .page_content {
|
|||
border-color: #c4c4c4 !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.whiteBox {
|
||||
background: white;
|
||||
width: 421px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border: 1px solid #E8E8E8;
|
||||
margin-top: 7%;
|
||||
height: 231px;
|
||||
}
|
||||
|
||||
.boxContent {
|
||||
padding: 24px 38px;
|
||||
}
|
||||
|
||||
.blueList {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.blueList li {
|
||||
color: black;
|
||||
font-size: 11px;
|
||||
padding-top: 7px;
|
||||
}
|
||||
|
||||
.blueList li::before {
|
||||
content: " ";
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
background-color: #73889C;
|
||||
margin: 3px;
|
||||
margin-left: 2px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.insertedPhoto {
|
||||
background: white;
|
||||
border: 1px solid #E8E7EA;
|
||||
padding: 10px;
|
||||
height: 100px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.uploadedImage {
|
||||
float: right;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.uploadedImageDescription {
|
||||
width: 449px;
|
||||
}
|
||||
|
||||
.uploadedImageDescription textarea {
|
||||
width: 84%;
|
||||
height: 86px;
|
||||
}
|
||||
|
||||
.smallFrame {
|
||||
border: 1px solid #E1E3E5;
|
||||
background: #F0F0F0;
|
||||
height: 33px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.smallFrame .smallBtn {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.smallFrame:hover {
|
||||
background: #E9F0F1 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,11 @@ $(document).on("change", "#uploadButton", (e) => {
|
|||
return;
|
||||
}
|
||||
|
||||
if(document.querySelector(".whiteBox").style.display == "block") {
|
||||
document.querySelector(".whiteBox").style.display = "none"
|
||||
document.querySelector(".insertThere").append(document.getElementById("fakeButton"));
|
||||
}
|
||||
|
||||
let photos = new FormData()
|
||||
for(file of e.currentTarget.files) {
|
||||
photos.append("photo_"+iterator, file)
|
||||
|
|
@ -19,7 +24,7 @@ $(document).on("change", "#uploadButton", (e) => {
|
|||
xhr.open("POST", "/photos/upload?album="+document.getElementById("album").value)
|
||||
|
||||
xhr.onloadstart = () => {
|
||||
document.getElementById("photos").insertAdjacentHTML("beforeend", `<img id="loader" src="/assets/packages/static/openvk/img/loading_mini.gif">`)
|
||||
document.querySelector(".insertPhotos").insertAdjacentHTML("beforeend", `<img id="loader" src="/assets/packages/static/openvk/img/loading_mini.gif">`)
|
||||
}
|
||||
|
||||
xhr.onload = () => {
|
||||
|
|
@ -30,27 +35,29 @@ $(document).on("change", "#uploadButton", (e) => {
|
|||
let photosArr = result.photos
|
||||
|
||||
for(photo of photosArr) {
|
||||
let table = document.querySelector("#photos")
|
||||
let table = document.querySelector(".insertPhotos")
|
||||
|
||||
table.insertAdjacentHTML("beforeend", `
|
||||
<tr id="photo" data-id="${photo.id}">
|
||||
<td width="120" valign="top">
|
||||
<div class="uploadedImage">
|
||||
<a href="${photo.link}" target="_blank"><img width="125" src="${photo.url}"></a>
|
||||
</div>
|
||||
<a style="float:right" id="deletePhoto" data-id="${photo.vid}" data-owner="${photo.owner}">${tr("delete")}</a>
|
||||
</td>
|
||||
<td>
|
||||
<textarea style="margin: 0px; height: 50px; width: 259px; resize: none;" maxlength="255"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<div id="photo" class="insertedPhoto" data-id="${photo.id}">
|
||||
<div class="uploadedImageDescription" style="float: left;">
|
||||
<span style="color: #464646;position: absolute;">${tr("description")}:</span>
|
||||
<textarea style="margin-left: 62px; resize: none;" maxlength="255"></textarea>
|
||||
</div>
|
||||
<div class="uploadedImage">
|
||||
<a href="${photo.link}" target="_blank"><img width="125" src="${photo.url}"></a>
|
||||
<a class="profile_link" style="width: 125px;" id="deletePhoto" data-id="${photo.vid}" data-owner="${photo.owner}">${tr("delete")}</a>
|
||||
<!--<div class="smallFrame" style="margin-top: 6px;">
|
||||
<div class="smallBtn">${tr("album_poster")}</div>
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
`)
|
||||
}
|
||||
|
||||
document.getElementById("endUploading").style.display = "block"
|
||||
} else {
|
||||
u("#loader").remove()
|
||||
MessageBox(tr("error"), result.flash.message ?? tr("error_uploading_photo"), [tr("ok")], [() => {Function.noop}])
|
||||
MessageBox(tr("error"), escapeHtml(result.flash.message) ?? tr("error_uploading_photo"), [tr("ok")], [() => {Function.noop}])
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -61,7 +68,7 @@ $(document).on("click", "#endUploading", (e) => {
|
|||
let table = document.querySelector("#photos")
|
||||
let data = new FormData()
|
||||
let arr = new Map();
|
||||
for(el of table.querySelectorAll("tr#photo")) {
|
||||
for(el of table.querySelectorAll("div#photo")) {
|
||||
arr.set(el.dataset.id, el.querySelector("textarea").value)
|
||||
}
|
||||
|
||||
|
|
@ -83,11 +90,19 @@ $(document).on("click", "#endUploading", (e) => {
|
|||
xhr.onload = () => {
|
||||
let result = JSON.parse(xhr.responseText)
|
||||
|
||||
e.currentTarget.removeAttribute("disabled")
|
||||
document.querySelector(".page_content tbody").innerHTML = ""
|
||||
document.getElementById("endUploading").style.display = "none"
|
||||
if(!result.success) {
|
||||
MessageBox(tr("error"), escapeHtml(result.flash.message), [tr("ok")], [() => {Function.noop}])
|
||||
} else {
|
||||
document.querySelector(".page_content .insertPhotos").innerHTML = ""
|
||||
document.getElementById("endUploading").style.display = "none"
|
||||
|
||||
NewNotification(tr("photos_successfully_uploaded"), tr("click_to_go_to_album"), null, () => {window.location.assign(`/album${result.owner}_${result.album}`)})
|
||||
|
||||
document.querySelector(".whiteBox").style.display = "block"
|
||||
document.querySelector(".insertAgain").append(document.getElementById("fakeButton"))
|
||||
}
|
||||
|
||||
NewNotification(tr("photos_successfully_uploaded"), tr("click_to_go_to_album"), null, () => {window.location.assign(`/album${result.owner}_${result.album}`)})
|
||||
e.currentTarget.removeAttribute("disabled")
|
||||
}
|
||||
|
||||
xhr.send(data)
|
||||
|
|
@ -101,7 +116,7 @@ $(document).on("click", "#deletePhoto", (e) => {
|
|||
xhr.open("POST", `/photo${e.currentTarget.dataset.owner}_${e.currentTarget.dataset.id}/delete`)
|
||||
|
||||
xhr.onloadstart = () => {
|
||||
e.currentTarget.closest("tr#photo").classList.add("lagged")
|
||||
e.currentTarget.closest("div#photo").classList.add("lagged")
|
||||
}
|
||||
|
||||
xhr.onerror = () => {
|
||||
|
|
@ -109,10 +124,12 @@ $(document).on("click", "#deletePhoto", (e) => {
|
|||
}
|
||||
|
||||
xhr.onload = () => {
|
||||
u(e.currentTarget.closest("tr#photo")).remove()
|
||||
u(e.currentTarget.closest("div#photo")).remove()
|
||||
|
||||
if(document.querySelectorAll("tr#photo").length < 1) {
|
||||
if(document.querySelectorAll("div#photo").length < 1) {
|
||||
document.getElementById("endUploading").style.display = "none"
|
||||
document.querySelector(".whiteBox").style.display = "block"
|
||||
document.querySelector(".insertAgain").append(document.getElementById("fakeButton"))
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -129,16 +146,12 @@ $(document).on("dragover", (e) => {
|
|||
e.preventDefault()
|
||||
document.querySelector("#fakeButton").classList.add("dragged")
|
||||
document.querySelector("#fakeButton").value = tr("drag_files_here")
|
||||
document.querySelector("#fakeButton").style.width = "100%";
|
||||
document.querySelector("#fakeButton").style.height = "196px";
|
||||
})
|
||||
|
||||
$(document).on("dragleave", (e) => {
|
||||
e.preventDefault()
|
||||
document.querySelector("#fakeButton").classList.remove("dragged")
|
||||
document.querySelector("#fakeButton").value = tr("upload_picts")
|
||||
document.querySelector("#fakeButton").style.width = "max-content";
|
||||
document.querySelector("#fakeButton").style.height = "max-content";
|
||||
})
|
||||
|
||||
$("#fakeButton").on("drop", (e) => {
|
||||
|
|
|
|||
|
|
@ -381,6 +381,7 @@
|
|||
"upd_f" = "updated her profile picture";
|
||||
"upd_g" = "updated group's picture";
|
||||
|
||||
"add_photos" = "Add photos";
|
||||
"upload_picts" = "Upload photos";
|
||||
"end_uploading" = "Finish uploading";
|
||||
"photos_successfully_uploaded" = "Photos successfully uploaded";
|
||||
|
|
@ -392,6 +393,13 @@
|
|||
"only_images_accepted" = "File \"$1\" is not an image";
|
||||
"max_filesize" = "Max filesize is $1 MB";
|
||||
|
||||
"uploading_photos_from_computer" = "Uploading photos from Your computer";
|
||||
"supported_formats" = "Supported file formats: JPG, PNG and GIF.";
|
||||
"max_load_photos" = "You can upload up to 10 photos at a time.";
|
||||
"tip" = "Tip";
|
||||
"tip_ctrl" = "to select multiple photos at once, hold down the Ctrl key when selecting files in Windows or the CMD key in Mac OS.";
|
||||
"album_poster" = "Album poster";
|
||||
|
||||
/* Notes */
|
||||
|
||||
"notes" = "Notes";
|
||||
|
|
@ -1129,6 +1137,7 @@
|
|||
"media_file_corrupted_or_too_large" = "The media content file is corrupted or too large.";
|
||||
"post_is_empty_or_too_big" = "The post is empty or too big.";
|
||||
"post_is_too_big" = "The post is too big.";
|
||||
"description_too_long" = "Description is too long.";
|
||||
|
||||
/* Admin actions */
|
||||
|
||||
|
|
|
|||
|
|
@ -364,6 +364,7 @@
|
|||
"upd_f" = "обновила фотографию на своей странице";
|
||||
"upd_g" = "обновило фотографию группы";
|
||||
|
||||
"add_photos" = "Добавить фотографии";
|
||||
"upload_picts" = "Загрузить фотографии";
|
||||
"end_uploading" = "Завершить загрузку";
|
||||
"photos_successfully_uploaded" = "Фотографии успешно загружены";
|
||||
|
|
@ -375,6 +376,13 @@
|
|||
"only_images_accepted" = "Файл \"$1\" не является изображением";
|
||||
"max_filesize" = "Максимальный размер файла — $1 мегабайт";
|
||||
|
||||
"uploading_photos_from_computer" = "Загрузка фотографий с Вашего компьютера";
|
||||
"supported_formats" = "Поддерживаемые форматы файлов: JPG, PNG и GIF.";
|
||||
"max_load_photos" = "Вы можете загружать до 10 фотографий за один раз.";
|
||||
"tip" = "Подсказка";
|
||||
"tip_ctrl" = "для того, чтобы выбрать сразу несколько фотографий, удерживайте клавишу Ctrl при выборе файлов в ОС Windows или клавишу CMD в Mac OS.";
|
||||
"album_poster" = "Обложка альбома";
|
||||
|
||||
/* Notes */
|
||||
|
||||
"notes" = "Заметки";
|
||||
|
|
@ -1029,6 +1037,7 @@
|
|||
"media_file_corrupted_or_too_large" = "Файл медиаконтента повреждён или слишком велик.";
|
||||
"post_is_empty_or_too_big" = "Пост пустой или слишком большой.";
|
||||
"post_is_too_big" = "Пост слишком большой.";
|
||||
"description_too_long" = "Описание слишком длинное.";
|
||||
|
||||
/* Admin actions */
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue