From 6bb92aed3cdf04a87e5d2379de5651e8e2ea9946 Mon Sep 17 00:00:00 2001 From: mrilyew <99399973+mrilyew@users.noreply.github.com> Date: Sun, 29 Dec 2024 19:26:47 +0300 Subject: [PATCH] add viewer and gallery --- Web/Models/Entities/Document.php | 5 + Web/Presenters/DocumentsPresenter.php | 28 ++++++ Web/Presenters/templates/Documents/List.xml | 16 ++-- Web/Presenters/templates/Documents/Page.xml | 74 ++++++++++++++ Web/Presenters/templates/Documents/Upload.xml | 5 +- .../templates/Documents/components/doc.xml | 6 +- .../templates/Documents/components/image.xml | 19 ++++ Web/routes.yml | 2 + Web/static/css/main.css | 73 +++++++++++++- Web/static/js/al_docs.js | 96 ++++++++++++++++--- bootstrap.php | 5 + locales/ru.strings | 4 + 12 files changed, 309 insertions(+), 24 deletions(-) create mode 100644 Web/Presenters/templates/Documents/Page.xml create mode 100644 Web/Presenters/templates/Documents/components/image.xml diff --git a/Web/Models/Entities/Document.php b/Web/Models/Entities/Document.php index 05e44a58..7093e1ed 100644 --- a/Web/Models/Entities/Document.php +++ b/Web/Models/Entities/Document.php @@ -156,6 +156,11 @@ class Document extends Media return false; } + function isImage(): bool + { + return in_array($this->getVKAPIType(), [3, 4]); + } + function isCopiedBy(User $user): bool { if($user->getId() === $this->getOwnerID()) diff --git a/Web/Presenters/DocumentsPresenter.php b/Web/Presenters/DocumentsPresenter.php index f95a3242..6fd827d7 100644 --- a/Web/Presenters/DocumentsPresenter.php +++ b/Web/Presenters/DocumentsPresenter.php @@ -2,6 +2,7 @@ namespace openvk\Web\Presenters; use openvk\Web\Models\Repositories\{Documents, Clubs}; use openvk\Web\Models\Entities\Document; +use Nette\InvalidStateException as ISE; final class DocumentsPresenter extends OpenVKPresenter { @@ -10,6 +11,8 @@ final class DocumentsPresenter extends OpenVKPresenter function renderList(?int $owner_id = NULL): void { + $this->assertUserLoggedIn(); + $this->template->_template = "Documents/List.xml"; if($owner_id > 0) $this->notFound(); @@ -110,6 +113,10 @@ final class DocumentsPresenter extends OpenVKPresenter $document->save(); } catch(\TypeError $e) { $this->flashFail("err", tr("forbidden"), $e->getMessage(), null, $isAjax); + } catch(ISE $e) { + $this->flashFail("err", tr("forbidden"), tr("error_file_preview"), null, $isAjax); + } catch(\ValueError $e) { + $this->flashFail("err", tr("forbidden"), $e->getMessage(), null, $isAjax); } if(!$isAjax) { @@ -121,4 +128,25 @@ final class DocumentsPresenter extends OpenVKPresenter ]); } } + + function renderPage(int $virtual_id, int $real_id): void + { + $this->assertUserLoggedIn(); + + $access_key = $this->queryParam("key"); + $doc = (new Documents)->getDocumentById((int)$virtual_id, (int)$real_id); + if(!$doc || $doc->isDeleted()) + $this->notFound(); + + if(!$doc->checkAccessKey($access_key)) + $this->notFound(); + + $this->template->doc = $doc; + $this->template->type = $doc->getVKAPIType(); + $this->template->is_image = $doc->isImage(); + $this->template->tags = $doc->getTags(); + $this->template->copied = $doc->isCopiedBy($this->user->identity); + $this->template->copyImportance = true; + $this->template->modifiable = $doc->canBeModifiedBy($this->user->identity); + } } diff --git a/Web/Presenters/templates/Documents/List.xml b/Web/Presenters/templates/Documents/List.xml index ea38f865..cd662aff 100644 --- a/Web/Presenters/templates/Documents/List.xml +++ b/Web/Presenters/templates/Documents/List.xml @@ -18,6 +18,7 @@ {/block} {block content} + {var $is_gallery = $current_tab == 3 || $current_tab == 4}
@@ -36,7 +37,7 @@
-
+
{tr($locale_string, $count)}.
@@ -49,16 +50,19 @@
{if $count > 0} {foreach $docs as $doc} -
- {include "components/doc.xml", doc => $doc} -
+ {if $is_gallery} + {include "components/image.xml", doc => $doc, scroll_context => true} + {else} + {include "components/doc.xml", doc => $doc, scroll_context => true} + {/if} {/foreach} {else} {include "../components/error.xml", description => tr("there_is_no_documents_alright")} {/if} - - {include "../components/paginator.xml", conf => $paginatorConf}
+ + {include "../components/paginator.xml", conf => $paginatorConf} +
{/block} diff --git a/Web/Presenters/templates/Documents/Page.xml b/Web/Presenters/templates/Documents/Page.xml new file mode 100644 index 00000000..b6640185 --- /dev/null +++ b/Web/Presenters/templates/Documents/Page.xml @@ -0,0 +1,74 @@ +{extends "../@layout.xml"} + +{block title} + {_document} "{ovk_proc_strtr($doc->getName(), 20)}" +{/block} + +{block header} + {$doc->getName()} +{/block} + +{block content} + + +
+
+ {if $is_image} + doc image + {else} + + + + {/if} +
+ +
+
+

+ {foreach $tags as $tag} + + {$tag}{if $tag != $tags[sizeof($tags) - 1]},{/if} + + {/foreach} +

+
+ {_info_upload_date}: {$doc->getPublicationTime()} +
+
+ +
+ +
+
+
+ {if !$doc->isOwnerHidden()} + {var $owner = $doc->getOwner()} + + + +
+ {$owner->getCanonicalName()} +
+ + {/if} + + {if isset($thisUser)} + {_edit} + {_report} + {_add} + {_remove} + {/if} +
+
+
+
+{/block} diff --git a/Web/Presenters/templates/Documents/Upload.xml b/Web/Presenters/templates/Documents/Upload.xml index 7c91c6b2..28b4ef5f 100644 --- a/Web/Presenters/templates/Documents/Upload.xml +++ b/Web/Presenters/templates/Documents/Upload.xml @@ -12,14 +12,13 @@ » {_documents} {/if} - » - загрузка + Non-AJAX Document upload {/block} {block content} - +
diff --git a/Web/Presenters/templates/Documents/components/doc.xml b/Web/Presenters/templates/Documents/components/doc.xml index bbd2e271..4b81b5a3 100644 --- a/Web/Presenters/templates/Documents/components/doc.xml +++ b/Web/Presenters/templates/Documents/components/doc.xml @@ -3,8 +3,8 @@ {var $copied = $doc->isCopiedBy($thisUser)} {var $modifiable = $doc->canBeModifiedBy($thisUser)} -
- +
+ {if $preview} document_preview {else} @@ -14,7 +14,7 @@ {/if}
- {$doc->getName()} + {$doc->getName()}
{$doc->getPublicationTime()}, diff --git a/Web/Presenters/templates/Documents/components/image.xml b/Web/Presenters/templates/Documents/components/image.xml new file mode 100644 index 00000000..d29458e9 --- /dev/null +++ b/Web/Presenters/templates/Documents/components/image.xml @@ -0,0 +1,19 @@ +{var $preview = $doc->hasPreview() ? $doc->getPreview() : NULL} +{var $copied = $doc->isCopiedBy($thisUser)} +{var $modifiable = $doc->canBeModifiedBy($thisUser)} + + + gallery photo + +
+
+
+
+
+
+ +
+ {$doc->getName()} + {readable_filesize($doc->getFilesize())} +
+ diff --git a/Web/routes.yml b/Web/routes.yml index f6bf9437..eac95801 100644 --- a/Web/routes.yml +++ b/Web/routes.yml @@ -317,6 +317,8 @@ routes: handler: "Documents->listGroup" - url: "/docs/upload" handler: "Documents->upload" + - url: "/doc{num}_{num}" + handler: "Documents->page" - url: "/admin" handler: "Admin->index" - url: "/admin/users" diff --git a/Web/static/css/main.css b/Web/static/css/main.css index 2cc9268f..492b7ae8 100644 --- a/Web/static/css/main.css +++ b/Web/static/css/main.css @@ -4010,6 +4010,73 @@ hr { padding: 5px 10px; } +#docs_page_wrapper .docs_page_content.docs_page_gallery .scroll_container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 10px; + padding: 10px 10px; +} + +#docs_page_wrapper .docs_page_content.docs_page_gallery .scroll_container .docGalleryItem { + height: 200px; + cursor: pointer; + position: relative; + /*width: 200px;*/ +} + +#docs_page_wrapper .docs_page_content.docs_page_gallery .scroll_container .docGalleryItem img { + width: 100%; + height: 100%; + display: block; + object-fit: cover; +} + +#docs_page_wrapper .docs_page_content.docs_page_gallery .scroll_container .docGalleryItem .doc_bottom_panel { + position: absolute; + bottom: 0px; + background: rgba(1, 1, 1, 0.7); + padding: 6px 6px; + width: calc(100% - 12px); + + display: grid; + grid-template-columns: 1fr 0fr; +} + +.docGalleryItem .doc_shown_by_hover { + transition: all 100ms ease-in; + opacity: 0; +} + +#docs_page_wrapper .docs_page_content.docs_page_gallery .scroll_container .docGalleryItem:hover .doc_shown_by_hover { + opacity: 1; +} + +#docs_page_wrapper .docs_page_content.docs_page_gallery .scroll_container .docGalleryItem .doc_bottom_panel span { + color: white; +} + +#docs_page_wrapper .docs_page_content.docs_page_gallery .scroll_container .docGalleryItem .doc_bottom_panel .doc_bottom_panel_size { + max-width: 49px; + width: max-content; +} + +.docGalleryItem .doc_top_panel { + position: absolute; + top: 5px; + right: 5px; + background: rgba(1, 1, 1, 0.7); + padding: 6px 6px; + + display: flex; + gap: 5px; +} + +.docGalleryItem .doc_top_panel > div { + width: 10px; + height: 10px; + background-color: white; +} + #docs_page_wrapper select { width: 150px; } @@ -4023,7 +4090,7 @@ hr { border-bottom: 1px solid #EDEDED; } -.scroll_node:last-of-type .docListViewItem { +.docs_page_content .docListViewItem:last-of-type { border-bottom: unset !important; } @@ -4111,3 +4178,7 @@ hr { .docListViewItem .doc_volume #mark_icon { background-position-x: -80px; } + +.doc_viewer_wrapper { + overflow: hidden; +} diff --git a/Web/static/js/al_docs.js b/Web/static/js/al_docs.js index c59cfa6f..9935ea08 100644 --- a/Web/static/js/al_docs.js +++ b/Web/static/js/al_docs.js @@ -11,7 +11,7 @@ function showDocumentUploadDialog(target = null, append_to_url = null)
  • ${tr("limitations_file_author_rights")}.
    • -
    +
    @@ -92,9 +92,19 @@ function showDocumentUploadDialog(target = null, append_to_url = null) }) } -u(document).on('click', '.docListViewItem #edit_icon', async (e) => { +u(document).on("drop", "#_document_upload_frame", (e) => { + e.dataTransfer.dropEffect = 'move'; + e.preventDefault() + + u(`#_document_upload_frame #upload_btn`).nodes[0].files = e.dataTransfer.files + u("#_document_upload_frame #upload_btn").trigger("change") +}) + +u(document).on('click', '.docMainItem #edit_icon', async (e) => { + e.preventDefault() + const target = u(e.target).closest("#edit_icon") - const item = target.closest('.docListViewItem') + const item = target.closest('.docMainItem') const id = item.nodes[0].dataset.id CMessageBox.toggleLoader() @@ -109,7 +119,7 @@ u(document).on('click', '.docListViewItem #edit_icon', async (e) => {
    @@ -161,9 +171,12 @@ u(document).on('change', "#docs_page_wrapper select[name='docs_sort']", (e) => { window.router.route(new_url.href) }) -u(document).on('click', '.docListViewItem #remove_icon', async (e) => { - const target = u(e.target).closest("#remove_icon") - const item = target.closest('.docListViewItem') +u(document).on('click', '.docMainItem #remove_icon', async (e) => { + e.preventDefault() + + const target = u(e.target).closest("#remove_icon") + const item = target.closest('.docMainItem') + const context = item.attr('data-context') const id = item.nodes[0].dataset.id.split("_") target.addClass('lagged') @@ -172,13 +185,21 @@ u(document).on('click', '.docListViewItem #remove_icon', async (e) => { if(res == 1) { target.attr('id', 'mark_icon') + + if(context == "page") { + target.html('✓') + window.router.route('/docs') + } } }) -u(document).on('click', '.docListViewItem #add_icon', async (e) => { +u(document).on('click', '.docMainItem #add_icon', async (e) => { + e.preventDefault() + const target = u(e.target).closest("#add_icon") - const item = target.closest('.docListViewItem') + const item = target.closest('.docMainItem') const id = item.nodes[0].dataset.id.split("_") + const context = item.attr('data-context') target.addClass('lagged') @@ -192,11 +213,17 @@ u(document).on('click', '.docListViewItem #add_icon', async (e) => { target.removeClass('lagged') target.attr('id', 'mark_icon') + + if(context == "page") { + target.html('✓') + } }) -u(document).on('click', '.docListViewItem #report_icon', (e) => { +u(document).on('click', '.docMainItem #report_icon', (e) => { + e.preventDefault() + const target = u(e.target).closest("#report_icon") - const item = target.closest('.docListViewItem') + const item = target.closest('.docMainItem') const id = item.nodes[0].dataset.id.split("_") MessageBox(tr("report_question"), ` @@ -218,3 +245,50 @@ u(document).on('click', '.docListViewItem #report_icon', (e) => { Function.noop]) }) + +u(document).on("click", ".docListViewItem a.viewerOpener, a.docGalleryItem", async (e) => { + e.preventDefault() + + const target = u(e.target) + const link = target.closest('a') + + CMessageBox.toggleLoader() + const url = link.nodes[0].href + const request = await fetch(url) + const body_html = await request.text() + const parser = new DOMParser + const body = parser.parseFromString(body_html, "text/html") + + const preview = body.querySelector('.photo-page-wrapper-photo') + const details = body.querySelector('.ovk-photo-details') + + preview.querySelector('img').setAttribute('id', 'ovk-photo-img') + + const photo_viewer = new CMessageBox({ + title: '', + custom_template: u(` +
    +
    +
    + + ${tr("document")} + + +
    +
    + ${preview.innerHTML} +
    +
    + ${details.innerHTML} +
    +
    +
    `) + }) + photo_viewer.getNode().find("#ovk-photo-close").on("click", function(e) { + photo_viewer.close() + }); + + CMessageBox.toggleLoader() +}) diff --git a/bootstrap.php b/bootstrap.php index 601129b3..8a5061d3 100644 --- a/bootstrap.php +++ b/bootstrap.php @@ -387,6 +387,11 @@ function readable_filesize($bytes, $precision = 2): string return round($bytes, $precision) . $units[$power]; } +function downloadable_name(string $text): string +{ + return preg_replace('/[\\/:*?"<>|]/', '_', str_replace(' ', '_', $text)); +} + return (function() { _ovk_check_environment(); require __DIR__ . "/vendor/autoload.php"; diff --git a/locales/ru.strings b/locales/ru.strings index 4cd39706..36bf91fc 100644 --- a/locales/ru.strings +++ b/locales/ru.strings @@ -2222,7 +2222,10 @@ "tags" = "Теги"; "owner_is_hidden" = "Автор скрыт"; "accessbility" = "Доступность"; +"download_file" = "Скачать файл"; +"remove" = "Удалить"; +"document" = "Документ"; "document_type_0" = "Все"; "document_type_1" = "Текстовые"; "document_type_2" = "Архивы"; @@ -2259,6 +2262,7 @@ "error_file_too_big" = "Файл слишком большой."; "error_file_invalid_format" = "Формат файла не разрешён."; "error_file_adding_copied" = "Не удалось добавить файл; он уже добавлен."; +"error_file_preview" = "Не удалось загрузить файл: изображение имеет странности."; "private_document" = "Приватный (по ссылке)"; "public_document" = "Публичный";
    {_name}: