306 lines
9.7 KiB
PHP
306 lines
9.7 KiB
PHP
<?php
|
|
|
|
use humhub\modules\animal_management\models\Animal;
|
|
use humhub\modules\animal_management\models\AnimalGalleryItem;
|
|
use humhub\modules\space\models\Space;
|
|
use yii\helpers\Html;
|
|
use yii\helpers\Json;
|
|
|
|
/* @var Space $space */
|
|
/* @var Animal $animal */
|
|
/* @var AnimalGalleryItem[] $galleryItems */
|
|
/* @var bool $isInline */
|
|
/* @var string $returnTo */
|
|
/* @var int $maxUploadCount */
|
|
/* @var string $errorMessage */
|
|
/* @var string $infoMessage */
|
|
|
|
$isInline = isset($isInline) ? (bool)$isInline : false;
|
|
$showTopCancel = (string)Yii::$app->request->get('showTopCancel', '0') === '1';
|
|
$returnTo = (string)($returnTo ?? 'view');
|
|
$maxUploadCount = max(1, (int)($maxUploadCount ?? 10));
|
|
$errorMessage = trim((string)($errorMessage ?? ''));
|
|
$infoMessage = trim((string)($infoMessage ?? ''));
|
|
$formId = 'animal-gallery-inline-upload-form';
|
|
$submitUrl = $space->createUrl('/animal_management/animals/add-gallery-images-inline', [
|
|
'id' => (int)$animal->id,
|
|
'inline' => $isInline ? 1 : 0,
|
|
'returnTo' => $returnTo,
|
|
]);
|
|
|
|
$this->registerCss(<<<CSS
|
|
.inline-add-shell.panel {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255, 255, 255, 0.22);
|
|
border-radius: 12px;
|
|
background: rgba(10, 18, 28, 0.36);
|
|
}
|
|
|
|
.inline-add-shell > .panel-body {
|
|
position: relative;
|
|
z-index: 1;
|
|
background: rgba(10, 18, 28, 0.2);
|
|
}
|
|
|
|
.inline-add-shell,
|
|
.inline-add-shell .panel-body,
|
|
.inline-add-shell .control-label,
|
|
.inline-add-shell .help-block,
|
|
.inline-add-shell h4 {
|
|
color: #eef5fb;
|
|
}
|
|
|
|
.inline-add-shell .form-control {
|
|
background: rgba(10, 18, 28, 0.56);
|
|
border-color: rgba(255, 255, 255, 0.44);
|
|
color: #f3f8ff;
|
|
}
|
|
|
|
.inline-add-shell .animal-inline-top-save-action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 26px;
|
|
height: 26px;
|
|
padding: 0;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(255, 255, 255, 0.36);
|
|
background: rgba(15, 23, 42, 0.72);
|
|
color: #f8fafc;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
font-size: 12px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
|
|
}
|
|
|
|
.inline-add-shell .animal-inline-top-save-action:hover,
|
|
.inline-add-shell .animal-inline-top-save-action:focus {
|
|
background: rgba(30, 41, 59, 0.86);
|
|
border-color: rgba(255, 255, 255, 0.5);
|
|
color: #f8fafc;
|
|
outline: none;
|
|
}
|
|
|
|
.inline-add-shell .animal-gallery-inline-existing-grid {
|
|
margin: 0;
|
|
}
|
|
|
|
.inline-add-shell .animal-gallery-inline-existing-item {
|
|
display: block;
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
min-height: 70px;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.inline-add-shell .animal-gallery-inline-existing-wrap {
|
|
min-height: 220px;
|
|
max-height: 320px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
margin: 6px 0 10px 0;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.inline-add-shell .animal-gallery-inline-file-input {
|
|
position: absolute;
|
|
left: -10000px;
|
|
width: 1px;
|
|
height: 1px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.inline-add-shell .animal-gallery-inline-file-trigger {
|
|
margin: 0;
|
|
}
|
|
|
|
.inline-add-shell .animal-gallery-inline-file-name {
|
|
display: inline-block;
|
|
margin-left: 8px;
|
|
color: rgba(233, 242, 250, 0.9);
|
|
font-size: 12px;
|
|
vertical-align: middle;
|
|
max-width: calc(100% - 150px);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
CSS
|
|
);
|
|
|
|
if ($isInline) {
|
|
$this->registerCss(<<<CSS
|
|
html, body {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
background: transparent !important;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
html::-webkit-scrollbar, body::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
body > .panel:first-child {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
body,
|
|
.inline-add-shell,
|
|
.inline-add-shell > .panel-body,
|
|
#{$formId} {
|
|
height: 100% !important;
|
|
}
|
|
|
|
#{$formId} {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#{$formId} .animal-gallery-inline-existing-wrap {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
max-height: none;
|
|
}
|
|
CSS
|
|
);
|
|
}
|
|
?>
|
|
|
|
<div class="panel panel-default inline-add-shell">
|
|
<div class="panel-body">
|
|
<form id="<?= Html::encode($formId) ?>" method="post" action="<?= Html::encode($submitUrl) ?>" enctype="multipart/form-data"<?= !$isInline ? ' target="_top"' : '' ?>>
|
|
<?= Html::hiddenInput(Yii::$app->request->csrfParam, Yii::$app->request->getCsrfToken()) ?>
|
|
<?= Html::hiddenInput('returnTo', $returnTo) ?>
|
|
|
|
<?php if ($isInline): ?>
|
|
<div class="animal-inline-top-actions" style="display:flex;justify-content:flex-end;gap:8px;margin:0 38px 10px 0;">
|
|
<?= Html::submitButton('<i class="fa fa-check"></i>', [
|
|
'class' => 'animal-inline-top-save-action',
|
|
'title' => Yii::t('AnimalManagementModule.base', 'Upload to Gallery'),
|
|
'form' => $formId,
|
|
]) ?>
|
|
<?php if ($showTopCancel): ?>
|
|
<?= Html::button('<i class="fa fa-times"></i>', [
|
|
'id' => 'gallery-inline-add-cancel-icon',
|
|
'class' => 'animal-inline-top-save-action',
|
|
'title' => Yii::t('AnimalManagementModule.base', 'Cancel'),
|
|
'type' => 'button',
|
|
]) ?>
|
|
<?php endif; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<h4 style="margin:0 0 10px 0;"><?= Yii::t('AnimalManagementModule.base', 'Add Images to Gallery') ?></h4>
|
|
|
|
<?php if ($errorMessage !== ''): ?>
|
|
<div class="alert alert-danger" style="margin-bottom:10px;"><?= Html::encode($errorMessage) ?></div>
|
|
<?php endif; ?>
|
|
<?php if ($infoMessage !== ''): ?>
|
|
<div class="alert alert-info" style="margin-bottom:10px;"><?= Html::encode($infoMessage) ?></div>
|
|
<?php endif; ?>
|
|
|
|
<div class="form-group" style="margin-bottom:8px;">
|
|
<label class="control-label" for="galleryImages"><?= Yii::t('AnimalManagementModule.base', 'Upload Images') ?></label>
|
|
<div>
|
|
<input type="file" class="animal-gallery-inline-file-input" id="galleryImages" name="galleryImages[]" accept="image/*" multiple required>
|
|
<label for="galleryImages" class="btn btn-default btn-sm animal-gallery-inline-file-trigger"><?= Yii::t('AnimalManagementModule.base', 'Choose Files') ?></label>
|
|
<span id="gallery-inline-file-name" class="animal-gallery-inline-file-name"><?= Yii::t('AnimalManagementModule.base', 'No files selected.') ?></span>
|
|
</div>
|
|
<div class="help-block" style="margin-bottom:0;"><?= Yii::t('AnimalManagementModule.base', 'You can upload up to {count} images at a time.', ['count' => $maxUploadCount]) ?></div>
|
|
</div>
|
|
|
|
<?php if (!empty($galleryItems)): ?>
|
|
<div class="animal-gallery-inline-existing-wrap">
|
|
<div class="row animal-gallery-inline-existing-grid">
|
|
<?php foreach (array_slice($galleryItems, 0, 12) as $galleryItem): ?>
|
|
<?php $galleryUrl = trim((string)$galleryItem->getImageUrl()); ?>
|
|
<?php if ($galleryUrl === '') { continue; } ?>
|
|
<div class="col-xs-4 col-sm-3" style="margin-bottom:8px;">
|
|
<img src="<?= Html::encode($galleryUrl) ?>" alt="<?= Yii::t('AnimalManagementModule.base', 'Gallery image') ?>" class="animal-gallery-inline-existing-item">
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if (!$isInline): ?>
|
|
<button type="submit" class="btn btn-primary"><?= Yii::t('AnimalManagementModule.base', 'Upload to Gallery') ?></button>
|
|
<a href="<?= Html::encode($space->createUrl('/animal_management/animals/view', ['id' => $animal->id])) ?>" class="btn btn-default"><?= Yii::t('AnimalManagementModule.base', 'Cancel') ?></a>
|
|
<?php endif; ?>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<?php
|
|
if ($isInline) {
|
|
$cancelPayload = Json::htmlEncode([
|
|
'source' => 'animal-inline-editor',
|
|
'type' => 'cancel',
|
|
'collapseId' => 'gallery-add-inline',
|
|
]);
|
|
|
|
$this->registerJs(<<<JS
|
|
(function() {
|
|
var fileInput = document.getElementById('galleryImages');
|
|
var fileLabel = document.getElementById('gallery-inline-file-name');
|
|
|
|
function updateFileLabel() {
|
|
if (!fileInput || !fileLabel) {
|
|
return;
|
|
}
|
|
|
|
var files = fileInput.files;
|
|
if (!files || files.length === 0) {
|
|
fileLabel.textContent = 'No files selected.';
|
|
return;
|
|
}
|
|
|
|
if (files.length === 1) {
|
|
fileLabel.textContent = files[0].name || '1 file selected';
|
|
return;
|
|
}
|
|
|
|
fileLabel.textContent = files.length + ' files selected';
|
|
}
|
|
|
|
if (fileInput) {
|
|
fileInput.addEventListener('change', updateFileLabel);
|
|
updateFileLabel();
|
|
}
|
|
|
|
function postInlineCancel() {
|
|
if (window.parent && window.parent !== window) {
|
|
window.parent.postMessage($cancelPayload, '*');
|
|
}
|
|
}
|
|
|
|
if (window.jQuery) {
|
|
window.jQuery(document).on('click', '#gallery-inline-add-cancel, #gallery-inline-add-cancel-icon', function() {
|
|
postInlineCancel();
|
|
});
|
|
}
|
|
|
|
document.addEventListener('click', function(event) {
|
|
var target = event.target;
|
|
if (!target || !target.closest) {
|
|
return;
|
|
}
|
|
|
|
if (!target.closest('#gallery-inline-add-cancel, #gallery-inline-add-cancel-icon')) {
|
|
return;
|
|
}
|
|
|
|
postInlineCancel();
|
|
}, false);
|
|
})();
|
|
JS
|
|
, \yii\web\View::POS_END);
|
|
}
|
|
?>
|