From 357ba0a73f3e4f34520b27d52570eda8231ec5ad Mon Sep 17 00:00:00 2001
From: lalka2016 <99399973+lalka2016@users.noreply.github.com>
Date: Sun, 10 Sep 2023 11:29:12 +0300
Subject: [PATCH] Drag'n'drop
---
Web/Presenters/PhotosPresenter.php | 8 ++--
.../templates/Photos/UploadPhoto.xml | 2 +-
Web/static/css/main.css | 6 +++
Web/static/js/al_photos.js | 46 +++++++++++++++++++
locales/en.strings | 4 ++
locales/ru.strings | 4 ++
6 files changed, 65 insertions(+), 5 deletions(-)
diff --git a/Web/Presenters/PhotosPresenter.php b/Web/Presenters/PhotosPresenter.php
index 6ec908ec..9fd0688e 100644
--- a/Web/Presenters/PhotosPresenter.php
+++ b/Web/Presenters/PhotosPresenter.php
@@ -27,7 +27,7 @@ final class PhotosPresenter extends OpenVKPresenter
if(!$user) $this->notFound();
if (!$user->getPrivacyPermission('photos.read', $this->user->identity ?? NULL))
$this->flashFail("err", tr("forbidden"), tr("forbidden_comment"));
- $this->template->albums = $this->albums->getUserAlbums($user, $this->queryParam("p") ?? 1);
+ $this->template->albums = $this->albums->getUserAlbums($user, (int)($this->queryParam("p") ?? 1));
$this->template->count = $this->albums->getUserAlbumsCount($user);
$this->template->owner = $user;
$this->template->canEdit = false;
@@ -36,7 +36,7 @@ final class PhotosPresenter extends OpenVKPresenter
} else {
$club = (new Clubs)->get(abs($owner));
if(!$club) $this->notFound();
- $this->template->albums = $this->albums->getClubAlbums($club, $this->queryParam("p") ?? 1);
+ $this->template->albums = $this->albums->getClubAlbums($club, (int)($this->queryParam("p") ?? 1));
$this->template->count = $this->albums->getClubAlbumsCount($club);
$this->template->owner = $club;
$this->template->canEdit = false;
@@ -46,7 +46,7 @@ final class PhotosPresenter extends OpenVKPresenter
$this->template->paginatorConf = (object) [
"count" => $this->template->count,
- "page" => $this->queryParam("p") ?? 1,
+ "page" => (int)($this->queryParam("p") ?? 1),
"amount" => NULL,
"perPage" => OPENVK_DEFAULT_PER_PAGE,
];
@@ -147,7 +147,7 @@ final class PhotosPresenter extends OpenVKPresenter
$this->template->photos = iterator_to_array( $album->getPhotos( (int) ($this->queryParam("p") ?? 1), 20) );
$this->template->paginatorConf = (object) [
"count" => $album->getPhotosCount(),
- "page" => $this->queryParam("p") ?? 1,
+ "page" => (int)($this->queryParam("p") ?? 1),
"amount" => sizeof($this->template->photos),
"perPage" => 20,
"atBottom" => true
diff --git a/Web/Presenters/templates/Photos/UploadPhoto.xml b/Web/Presenters/templates/Photos/UploadPhoto.xml
index e2da33e4..313e7681 100644
--- a/Web/Presenters/templates/Photos/UploadPhoto.xml
+++ b/Web/Presenters/templates/Photos/UploadPhoto.xml
@@ -14,7 +14,7 @@
{block content}
-
+
diff --git a/Web/static/css/main.css b/Web/static/css/main.css
index 2bc4d690..9baf246e 100644
--- a/Web/static/css/main.css
+++ b/Web/static/css/main.css
@@ -2716,3 +2716,9 @@ body.article .floating_sidebar, body.article .page_content {
.lagged * {
pointer-events: none;
}
+
+.button.dragged {
+ background: #c4c4c4 !important;
+ border-color: #c4c4c4 !important;
+ color: black !important;
+}
diff --git a/Web/static/js/al_photos.js b/Web/static/js/al_photos.js
index 4331dfd6..ee69d7fc 100644
--- a/Web/static/js/al_photos.js
+++ b/Web/static/js/al_photos.js
@@ -118,3 +118,49 @@ $(document).on("click", "#deletePhoto", (e) => {
xhr.send(data)
})
+
+$(document).on("dragover drop", (e) => {
+ e.preventDefault()
+
+ return false;
+})
+
+$(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) => {
+ e.originalEvent.dataTransfer.dropEffect = 'move';
+ e.preventDefault()
+
+ $(document).trigger("dragleave")
+
+ let files = e.originalEvent.dataTransfer.files
+
+ for(const file of files) {
+ if(!file.type.startsWith('image/')) {
+ MessageBox(tr("error"), tr("only_images_accepted", escapeHtml(file.name)), [tr("ok")], [() => {Function.noop}])
+ return;
+ }
+
+ if(file.size > 5 * 1024 * 1024) {
+ MessageBox(tr("error"), tr("max_filesize", 5), [tr("ok")], [() => {Function.noop}])
+ return;
+ }
+ }
+
+ document.getElementById("uploadButton").files = files
+ u("#uploadButton").trigger("change")
+})
diff --git a/locales/en.strings b/locales/en.strings
index 7c422af6..98bba6c0 100644
--- a/locales/en.strings
+++ b/locales/en.strings
@@ -388,6 +388,10 @@
"error_uploading_photo" = "Error when uploading photo";
"too_many_pictures" = "No more than 10 pictures";
+"drag_files_here" = "Drag files here";
+"only_images_accepted" = "File \"$1\" is not an image";
+"max_filesize" = "Max filesize is $1 MB";
+
/* Notes */
"notes" = "Notes";
diff --git a/locales/ru.strings b/locales/ru.strings
index 404cfe9e..26d4d829 100644
--- a/locales/ru.strings
+++ b/locales/ru.strings
@@ -371,6 +371,10 @@
"error_uploading_photo" = "Не удалось загрузить фотографию";
"too_many_pictures" = "Не больше 10 фотографий";
+"drag_files_here" = "Перетащите файлы сюда";
+"only_images_accepted" = "Файл \"$1\" не является изображением";
+"max_filesize" = "Максимальный размер файла — $1 мегабайт";
+
/* Notes */
"notes" = "Заметки";