Fixes on widget uploder

This commit is contained in:
Ludovic CANDELLIER
2021-04-15 23:58:51 +02:00
parent f5ca57fdf2
commit 096351ae4e
14 changed files with 102 additions and 83 deletions

View File

@@ -3,7 +3,7 @@
<div class="row">
<div class="col-6">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#{{ $id }}" aria-expanded="false" aria-controls="{{ $id }}">
<i class="fa fa-chevron-right"></i>
<i class="fa {{ ($collapsed ?? true) ? 'fa-chevron-right' : 'fa-chevron-down' }}"></i>
</button>
{!! $title ?? null !!}
@if (isset($required) && $required)
@@ -19,7 +19,9 @@
</div>
</div>
</div>
<div id="{{ $id }}" class="card-body collapse {{ $class_body ?? '' }}">
<div id="{{ $id }}" class="card-body collapse {{ ($collapsed ?? true) ? '' : 'show' }} {{ $class_body ?? '' }}">
{{ $slot }}
</div>
</div>
@include('load.layout.chevron')

View File

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

View File

@@ -16,33 +16,36 @@
@push('js')
<script>
function {{ $prefix ?? '' }}handleDeleteImages() {
$('#{{ $prefix ?? '' }}uploader-mini-gallery .fa-trash').click(function() {
id = $('#id').val();
index = $(this).data('index');
console.log(id);
$.ajax({
type: 'post',
url: "{{ $delete_url }}",
data: {
id: id,
index: index
},
success: function(data) {
loadImages();
}
});
})
}
@if ($can_edit ?? true)
function {{ $prefix ?? '' }}handleDeleteImages() {
$('#{{ $prefix ?? '' }}uploader-mini-gallery .fa-trash').click(function() {
id = $('#id').val();
index = $(this).data('index');
console.log(id);
$.ajax({
type: 'post',
url: "{{ $delete_url ?? '' }}",
data: {
id: id,
index: index
},
success: function(data) {
loadImages();
}
});
})
}
@endif
function {{ $prefix ?? '' }}handleEnlargeImages() {
$('#{{ $prefix ?? '' }}uploader-mini-gallery .fa-expand-alt').click(function() {
$img = $(this).parents('figure').find('.img-thumbnail');
$img = $(this).parents('figure').find('.img-thumbnail');
url = $img.attr('src');
console.log(url);
$('#{{ $prefix ?? '' }}mini-gallery-lightbox .lightbox').attr('src', url);
$('#{{ $prefix ?? '' }}mini-gallery-lightbox').modal('show');
})
}
</script>
@endpush

View File

@@ -1,49 +1,44 @@
@include('boilerplate::load.fileinput')
<div class="card">
<div class="card-header">
<h3 class="card-title">{{ $title }}</h3>
<div class="card-tools">
</div>
</div>
<div class="card-body pt-3 pb-0">
@if (isset($article['id']))
@include('components.uploader.mini-gallery')
@endif
@component('components.layout.box-collapse', ['id' => ($prefix ?? '') . $name ?? 'images', 'title' => $title ?? 'Photos', 'collapsed' => $collapsed ?? false])
@include('components.uploader.mini-gallery')
@if ($can_edit ?? true)
<div id="{{ $prefix ?? '' }}uploader-new-images"></div>
@include('components.uploader.block_image_new', ['name' => ($name ?? 'images') . '[]'])
@endif
@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>
@endcomponent
@push('js')
<script>
function {{ $prefix ?? '' }}append_image() {
$("#{{ $prefix ?? '' }}uploader-new-images .file").fileinput();
$("#{{ $prefix ?? '' }}uploader-new-images .file").focus();
}
@if ($can_edit ?? true)
function {{ $prefix ?? '' }}append_image() {
$("#{{ $prefix ?? '' }}uploader-new-images .file").fileinput();
$("#{{ $prefix ?? '' }}uploader-new-images .file").focus();
}
$("#{{ $prefix ?? '' }}uploader-new-images").appender({
rowSection: '.{{ $prefix ?? '' }}row-new-image',
type: '.{{ $prefix ?? '' }}row-image',
addBtn: '.{{ $prefix ?? '' }}add-image',
appendEffect: 'fade',
addClass: 'animated fadeIn',
rowNumber: '.{{ $prefix ?? '' }}row-image-number',
deleteBtn: '.{{ $prefix ?? '' }}delete-new-image-btn',
callback: {{ $prefix ?? '' }}append_image,
hideSection: true
});
$("#{{ $prefix ?? '' }}uploader-new-images").appender({
rowSection: '.{{ $prefix ?? '' }}row-new-image',
type: '.{{ $prefix ?? '' }}row-image',
addBtn: '.{{ $prefix ?? '' }}add-image',
appendEffect: 'fade',
addClass: 'animated fadeIn',
rowNumber: '.{{ $prefix ?? '' }}row-image-number',
deleteBtn: '.{{ $prefix ?? '' }}delete-new-image-btn',
callback: {{ $prefix ?? '' }}append_image,
hideSection: true
});
@endif
function loadImages()
function {{ $prefix ?? '' }}loadImages()
{
$gallery = $("#{{ $prefix ?? '' }}uploader-mini-gallery");
if ($gallery) {
@@ -52,7 +47,7 @@
}
$(function() {
loadImages();
{{ $prefix ?? '' }}loadImages();
});
</script>
@endpush