Add preview from father, add new features

This commit is contained in:
Ludovic CANDELLIER
2021-04-11 00:36:41 +02:00
parent f781158e36
commit f5ca57fdf2
58 changed files with 1482 additions and 532 deletions

View File

@@ -1,10 +1,10 @@
<div class="col row-new-image row-image mt-3 mb-2">
<div class="col {{ $prefix ?? '' }}row-new-image row-image mt-3 mb-2">
<p>
<button type="button" class="btn btn-danger delete-new-image-btn"><i class="fa fa-minus-circle"></i></button>
Photo <span class="row-image-number"></span>
<button type="button" class="btn btn-danger {{ $prefix ?? '' }}delete-new-image-btn"><i class="fa fa-minus-circle"></i></button>
Photo <span class="{{ $prefix ?? '' }}row-image-number"></span>
</p>
<input name="images[]" type="file" class="file" data-show-upload="false" data-show-caption="true" data-msg-placeholder="Choisissez une photo">
<input name="{{ $prefix ?? '' }}images[]" type="file" class="file" data-show-upload="false" data-show-caption="true" data-msg-placeholder="Choisissez une photo">
</div>

View File

@@ -2,19 +2,23 @@
@foreach($images as $key => $image)
<figure class="mr-2">
<img src="{{ $image['url'] }}" class="img-thumbnail img-caption" style="max-height:92px;">
<figcaption class="text-center pt-2">
<button type="button" class="btn btn-xs btn-outline-secondary">
<i class="fas fa-expand-alt"></i>
</button>
<button type="button" class="btn btn-xs btn-outline-danger">
<i class="fas fa-trash" data-index="{{ $key }}"></i>
</button>
</figcaption>
@if ($can_edit ?? true)
<figcaption class="text-center pt-2">
<button type="button" class="btn btn-xs btn-outline-secondary">
<i class="fas fa-expand-alt"></i>
</button>
<button type="button" class="btn btn-xs btn-outline-danger">
<i class="fas fa-trash" data-index="{{ $key }}"></i>
</button>
</figcaption>
@endif
</figure>
@endforeach
@endif
<script>
handleDeleteImages();
handleEnlargeImages();
</script>
@if ($can_edit ?? true)
<script>
{{ $prefix ?? '' }}handleDeleteImages();
{{ $prefix ?? '' }}handleEnlargeImages();
</script>
@endif

View File

@@ -1,14 +1,14 @@
<div class="row" id="uploader-mini-gallery"></div>
<div class="row" id="{{ $prefix ?? '' }}uploader-mini-gallery"></div>
<div class="modal fade" id="mini-gallery-lightbox" tabindex="-1" role="dialog" aria-labelledby="mini-gallery-lightbox" aria-hidden="true">
<div class="modal fade" id="{{ $prefix ?? '' }}mini-gallery-lightbox" tabindex="-1" role="dialog" aria-labelledby="mini-gallery-lightbox" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="mini-gallery-title-lightbox"></h5>
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body">
<img src="" id="mini-gallery-img-lightbox" class="img-fluid" >
<img src="" class="img-fluid lightbox" >
</div>
</div>
</div>
@@ -16,8 +16,8 @@
@push('js')
<script>
function handleDeleteImages() {
$('#uploader-mini-gallery .fa-trash').click(function() {
function {{ $prefix ?? '' }}handleDeleteImages() {
$('#{{ $prefix ?? '' }}uploader-mini-gallery .fa-trash').click(function() {
id = $('#id').val();
index = $(this).data('index');
console.log(id);
@@ -35,13 +35,13 @@
})
}
function handleEnlargeImages() {
$('#uploader-mini-gallery .fa-expand-alt').click(function() {
function {{ $prefix ?? '' }}handleEnlargeImages() {
$('#{{ $prefix ?? '' }}uploader-mini-gallery .fa-expand-alt').click(function() {
$img = $(this).parents('figure').find('.img-thumbnail');
url = $img.attr('src');
console.log(url);
$('#mini-gallery-img-lightbox').attr('src', url);
$('#mini-gallery-lightbox').modal('show');
$('#{{ $prefix ?? '' }}mini-gallery-lightbox .lightbox').attr('src', url);
$('#{{ $prefix ?? '' }}mini-gallery-lightbox').modal('show');
})
}
</script>

View File

@@ -2,51 +2,57 @@
<div class="card">
<div class="card-header">
<h3 class="card-title">Photos</h3>
<h3 class="card-title">{{ $title }}</h3>
<div class="card-tools">
</div>
</div>
<div class="card-body pt-3 pb-0">
@if (isset($id))
@if (isset($article['id']))
@include('components.uploader.mini-gallery')
@endif
<div id="uploader-new-images"></div>
@include('components.uploader.block_image_new', ['name' => 'images[]', 'required' => true])
</div>
<div class="card-footer">
<button type="button" class="btn btn-xs btn-primary add-image pull-right">Ajout <i class="fa fa-plus"></i></button>
@if ($can_edit ?? true)
<div id="{{ $prefix ?? '' }}uploader-new-images"></div>
@include('components.uploader.block_image_new', ['name' => 'images[]', 'required' => true])
@endif
</div>
@if ($can_edit ?? true)
<div class="card-footer">
<button type="button" class="btn btn-xs btn-primary {{ $prefix ?? '' }}add-image pull-right">Ajout <i class="fa fa-plus"></i></button>
</div>
@endif
</div>
@push('js')
<script>
function append_image() {
$("#uploader-new-images .file").fileinput();
$("#uploader-new-images .file").focus();
function {{ $prefix ?? '' }}append_image() {
$("#{{ $prefix ?? '' }}uploader-new-images .file").fileinput();
$("#{{ $prefix ?? '' }}uploader-new-images .file").focus();
}
$("#uploader-new-images").appender({
rowSection: '.row-new-image',
type: '.row-image',
addBtn: '.add-image',
$("#{{ $prefix ?? '' }}uploader-new-images").appender({
rowSection: '.{{ $prefix ?? '' }}row-new-image',
type: '.{{ $prefix ?? '' }}row-image',
addBtn: '.{{ $prefix ?? '' }}add-image',
appendEffect: 'fade',
addClass: 'animated fadeIn',
rowNumber: '.row-image-number',
deleteBtn: '.delete-new-image-btn',
callback: append_image,
rowNumber: '.{{ $prefix ?? '' }}row-image-number',
deleteBtn: '.{{ $prefix ?? '' }}delete-new-image-btn',
callback: {{ $prefix ?? '' }}append_image,
hideSection: true
});
function loadImages()
{
$gallery = $("#uploader-mini-gallery");
$gallery = $("#{{ $prefix ?? '' }}uploader-mini-gallery");
if ($gallery) {
$gallery.load("{{ $load_url }}");
}
}
loadImages();
$(function() {
loadImages();
});
</script>
@endpush