<!-- Button -->
<?php
-$link_types = ['page_link' => trans('backpack::crud.page_link'), 'internal_link' => trans('backpack::crud.internal_link'), 'external_link' => trans('backpack::crud.external_link')];
+$link_types = ['none' => 'Désactiver', 'page_link' => trans('backpack::crud.page_link'), 'internal_link' => trans('backpack::crud.internal_link'), 'external_link' => trans('backpack::crud.external_link')];
$field['allows_null'] = false;
$page_model = $field['page_model'];
$active_pages = $page_model::all();
-$empty = ['label' => '', 'type' => array_key_first($link_types), 'link' => '', 'external_link' => '', 'page_id' => ''];
+$empty = ['label' => '', 'type' => 'page_link', 'link' => '', 'external_link' => '', 'page_id' => ''];
$value = old(square_brackets_to_dots($field['name'])) ?? $field['value'] ?? $field['default'] ?? [];
if ($value == '') {
$value = [];
}
if (is_string($value)) {
- $value = json_decode($value,true);
+ $value = json_decode($value, true);
}
$value = array_merge($empty, $value);
@include('crud::inc.field_translatable_icon')
<div class="clearfix"></div>
<div class="button__wrapper">
- <div class="col-sm-3 button__field">
+ <div class="col-sm-3 button__field hideifdisabled">
<label>Button label</label><br/>
<input type="text" name="{{$field['name']}}[label]" value="{{$value['label']}}" class="form-control">
</div>
<div class="col-sm-3 button__field">
<label>Link type</label><br/>
<select
- id="page_or_link_select"
+ data-id="page_or_link_select"
name="{{ $field['name']}}[type]"
@include('crud::inc.field_attributes')
>
@endforeach
</select>
</div>
- <div class="col-sm-6 button__field">
+ <div class="col-sm-6 button__field hideifdisabled">
<label>Link</label><br/>
<!-- external link input -->
<div class="page_or_link_value <?php if ($value['type'] != 'external_link') {
echo 'hidden';
- } ?>" id="page_or_link_external_link">
+ } ?>" data-id="page_or_link_external_link">
<input
type="url"
class="form-control"
name="{{ $field['name']}}[external_link]"
placeholder="{{ trans('backpack::crud.page_link_placeholder') }}"
-
- @if ($value['type']!='external_link')
- disabled="disabled"
- @endif
-
@if ($value['type']=='external_link' && isset($value['external_link']) && $value['external_link']!='')
value="{{ $value['external_link'] }}"
@endif
<!-- internal link input -->
<div class="page_or_link_value <?php if ($value['type'] != 'internal_link') {
echo 'hidden';
- } ?>" id="page_or_link_internal_link">
+ } ?>" data-id="page_or_link_internal_link">
<input
type="text"
class="form-control"
name="{{ $field['name']}}[link]"
placeholder="{{ trans('backpack::crud.internal_link_placeholder', ['url', url(config('backpack.base.route_prefix').'/page')]) }}"
-
- @if ($value['type']!='internal_link')
- disabled="disabled"
- @endif
-
@if ($value['type']=='internal_link' && isset($value['link']) && $value['link']!='')
value="{{ $value['link'] }}"
@endif
<!-- page slug input -->
<div class="page_or_link_value <?php if ($value['type'] != 'page_link') {
echo 'hidden';
- } ?>" id="page_or_link_page">
+ } ?>" data-id="page_or_link_page">
<select
class="form-control"
name="{{ $field['name']}}[page_id]"
@push('crud_fields_scripts')
<script>
jQuery(document).ready(function ($) {
+ function updateButtonField(wrapper) {
+ $(wrapper).find(".page_or_link_value, .hideifdisabled").addClass("hidden");
- $("#page_or_link_select").change(function (e) {
- $(".page_or_link_value input").attr('disabled', 'disabled');
- $(".page_or_link_value select").attr('disabled', 'disabled');
- $(".page_or_link_value").removeClass("hidden").addClass("hidden");
-
-
- switch ($(this).val()) {
+ switch ($(wrapper).find('[data-id="page_or_link_select"]').val()) {
+ case 'none':
+ break;
case 'external_link':
- $("#page_or_link_external_link input").removeAttr('disabled');
- $("#page_or_link_external_link").removeClass('hidden');
+ $(wrapper).find('.hideifdisabled').removeClass('hidden');
+ $(wrapper).find('[data-id="page_or_link_external_link"]').removeClass('hidden');
break;
-
case 'internal_link':
- $("#page_or_link_internal_link input").removeAttr('disabled');
- $("#page_or_link_internal_link").removeClass('hidden');
+ $(wrapper).find('.hideifdisabled').removeClass('hidden');
+ $(wrapper).find('[data-id="page_or_link_internal_link"]').removeClass('hidden');
break;
-
default: // page_link
- $("#page_or_link_page select").removeAttr('disabled');
- $("#page_or_link_page").removeClass('hidden');
+ $(wrapper).find('.hideifdisabled').removeClass('hidden');
+ $(wrapper).find('[data-id="page_or_link_page"]').removeClass('hidden');
}
+ };
+
+ function updateAllButtonFields() {
+ $(".button__wrapper").each(function () {
+ updateButtonField(this);
+ });
+ }
+
+ $(document).on('change', '[data-id="page_or_link_select"]', function () {
+ var parent = $(this).closest('.button__wrapper');
+ updateButtonField(parent);
+ });
+
+ $(document).on('cubist.bunchmultiple.added', function () {
+ updateAllButtonFields();
});
+ updateAllButtonFields();
});
</script>
@endpush
</div>
@endsection
+
+
<div class="form-group col-md-12">
<strong>{{ $field['label'] }}</strong> <br>
- <div id="dropzone_{{ $field['name'] }}" class="dropzone dz-clickable sortable">
+ <input type="hidden" value="{{$field['collection']}}" name="{{$field['name']}}"/>
+ <div data-url="{{ url($crud->route . '/' . $entry->id . '/media') }}"
+ data-options='@json($field['options'])'
+ data-collection="{{$field['collection']}}"
+ class="dropzone dz-clickable sortable">
<div class="dz-message">
Drop files here or click to upload.
</div>
{{-- ########################################## --}}
{{-- Extra CSS and JS for this particular field --}}
{{-- If a field type is shown multiple times on a form, the CSS and JS will only be loaded once --}}
-@if (true || $crud->checkIfFieldIsFirstOfItsType($field, $fields))
+@if ($crud->checkIfFieldIsFirstOfItsType($field))
{{-- FIELD CSS - will be loaded in the after_styles section --}}
@push('crud_fields_styles')
<!-- include dropzone css-->
<link rel="stylesheet"
- href="{{ asset('vendor/gaspertrix/laravel-backpack-dropzone-field/dropzone/dropzone.min.css') }}"/>
+ href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css"/>
@endpush
{{-- FIELD JS - will be loaded in the after_scripts section --}}
@push('crud_fields_scripts')
+ <?php
+
+ $files = [];
+ $filesrand = 'files_' . rand(1, 10000);
+ foreach ($entry->getMedia() as $media) {
+ if (!isset($files[$field['collection']])) {
+ $files[$field['collection']] = [];
+ }
+ $files[$field['collection']][] = [
+ 'id' => $media->id,
+ 'order_column' => $media->order_column,
+ 'size' => $media->size,
+ 'name' => $media->file_name,
+ 'full_url' => $media->getUrl(),
+ 'thumb_url' => $media->getUrl($field['thumb_collection'] ?? ''),
+ ];
+ }
+
+ ?>
<!-- include dropzone js-->
<script
- src="{{ asset('vendor/gaspertrix/laravel-backpack-dropzone-field/dropzone/dropzone.min.js') }}"></script>
+ src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.9.0/Sortable.js"></script>
- @endpush
-
-@endif
-
-@push('crud_fields_scripts')
- <script type="text/javascript">
- Dropzone.autoDiscover = false;
-
- jQuery(document).ready(function () {
+ <script type="text/javascript">
Dropzone.autoDiscover = false;
- var dOptions = {
- url: "{{ url($crud->route . '/' . $entry->id . '/media') }}",
- previewTemplate: '{!! str_replace(array("\r\n", "\r", "\n"), "", addslashes(View::getSection("previewTemplate"))); !!}',
- init: function () {
- var files = [];
-
- @foreach ($entry->getMedia($field['collection']) as $media)
- files.push({
- id: {{ $media->id }},
- order_column: {{ $media->order_column }},
- size: "{{ $media->size }}",
- name: "{{ $media->file_name }}",
- full_url: "{{ $media->getUrl() }}",
- thumb_url: "{{ $media->getUrl($field['thumb_collection'] ?? '') }}"
- });
- @endforeach
+ jQuery(document).ready(function () {
- for (var i = 0; i < files.length; i++) {
- var file = files[i];
+ Dropzone.autoDiscover = false;
+ var f_{{$filesrand}} = @json($files);
- this.emit('addedfile', file);
-
- if (typeof file.full_url != 'undefined') {
- this.emit('thumbnail', file, file.full_url);
+ function initAllDropzones() {
+ $(".dropzone").each(function () {
+ if ($(this).data('dropzone') === undefined) {
+ $(this).attr('id', 'dz-' + Math.round(Math.random() * 10000000));
+ $(this).data('dropzone', initOneDropzone(this));
}
+ });
+ }
- this.emit('success', file, {success: true, media: file});
- this.emit('complete', file);
- }
-
- if (this.options.maxFiles !== null) {
- this.options.maxFiles = this.options.maxFiles - files.length;
- }
- },
- sending: function (file, xhr, formData) {
- formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
-
- @if (isset($field['collection']) AND !empty($field['collection']))
- formData.append('collection', "{{ $field['collection'] }}");
- @endif
- },
- success: function (file, response) {
- if (typeof response != 'undefined' && response.success == true) {
- file.media = response.media;
- file.previewElement.setAttribute('data-id', response.media.id);
- file.previewElement.setAttribute('data-position', response.media.order_column);
- }
-
- if (file.previewElement) {
- return file.previewElement.classList.add("dz-success");
- }
- },
- removedfile: function (file) {
- if (typeof file.media != 'undefined') {
- $.ajax({
- url: "{{ url($crud->route . '/' . $entry->id . '/media') }}" + '/' + file.media.id,
- type: 'DELETE'
- })
- .done(function (response) {
- var notification_type;
-
- if (response.success == true) {
- notification_type = 'success';
-
- if (file.previewElement != null && file.previewElement.parentNode != null) {
- file.previewElement.parentNode.removeChild(file.previewElement);
- }
- } else {
- notification_type = 'error';
+ function initOneDropzone(el) {
+ var el = $(el);
+ var base_url = el.data('url');
+ var el_id = $(el).attr('id');
+ var collection = $(el).data('collection');
+ var dOptions = {
+ url: base_url,
+ previewTemplate: '{!! str_replace(array("\r\n", "\r", "\n"), "", addslashes(View::getSection("previewTemplate"))); !!}',
+ init: function () {
+ var files = f_{{$filesrand}}[collection];
+
+ for (var i = 0; i < files.length; i++) {
+ var file = files[i];
+ console.log(file);
+
+ this.emit('addedfile', file);
+
+ if (typeof file.full_url != 'undefined') {
+ this.emit('thumbnail', file, file.thumb_url);
}
- new PNotify({
- text: response.message,
- type: notification_type,
- icon: false
- });
- })
- .fail(function (xhr) {
- var message = 'Deletion failed';
-
- if (xhr.responseJSON != 'undefined' && xhr.responseJSON.message != 'undefined') {
- message = xhr.responseJSON.message;
- }
+ this.emit('success', file, {success: true, media: file});
+ this.emit('complete', file);
+ }
- new PNotify({
- text: message,
- type: 'error',
- icon: false
- });
- });
+ if (this.options.maxFiles !== null) {
+ this.options.maxFiles = this.options.maxFiles - files.length;
+ }
+ },
+ sending: function (file, xhr, formData) {
+ formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
+ if (collection !== undefined && collection !== null && collection !== '') {
+ formData.append('collection', collection);
+ }
+ },
+ success: function (file, response) {
+ if (typeof response != 'undefined' && response.success == true) {
+ file.media = response.media;
+ file.previewElement.setAttribute('data-id', response.media.id);
+ file.previewElement.setAttribute('data-position', response.media.order_column);
+ }
+
+ if (file.previewElement) {
+ return file.previewElement.classList.add("dz-success");
+ }
+ },
+ removedfile: function (file) {
+ if (typeof file.media != 'undefined') {
+ $.ajax({
+ url: base_url + '/' + file.media.id,
+ type: 'DELETE'
+ })
+ .done(function (response) {
+ var notification_type;
+
+ if (response.success == true) {
+ notification_type = 'success';
+
+ if (file.previewElement != null && file.previewElement.parentNode != null) {
+ file.previewElement.parentNode.removeChild(file.previewElement);
+ }
+ } else {
+ notification_type = 'error';
+ }
+
+ new PNotify({
+ text: response.message,
+ type: notification_type,
+ icon: false
+ });
+ })
+ .fail(function (xhr) {
+ var message = 'Deletion failed';
+
+ if (xhr.responseJSON != 'undefined' && xhr.responseJSON.message != 'undefined') {
+ message = xhr.responseJSON.message;
+ }
+
+ new PNotify({
+ text: message,
+ type: 'error',
+ icon: false
+ });
+ });
- return this._updateMaxFilesReachedClass();
- }
+ return this._updateMaxFilesReachedClass();
+ }
- if (file.previewElement != null && file.previewElement.parentNode != null) {
- file.previewElement.parentNode.removeChild(file.previewElement);
- }
+ if (file.previewElement != null && file.previewElement.parentNode != null) {
+ file.previewElement.parentNode.removeChild(file.previewElement);
+ }
- return this._updateMaxFilesReachedClass();
- },
- };
+ return this._updateMaxFilesReachedClass();
+ },
+ };
- var cOptions = @json($field['options']);
- var dropzone_{{ $field['name'] }} = new Dropzone("#dropzone_{{ $field['name'] }}", jQuery.extend(dOptions, cOptions));
- dropzone_{{ $field['name'] }}.on("maxfilesexceeded", function (file) {
- this.removeFile(file);
- alert('You can\'t add new files !')
- });
+ var dropzone = new Dropzone("#" + el_id, jQuery.extend(dOptions, $(el).data('option')));
+ dropzone.on("maxfilesexceeded", function (file) {
+ this.removeFile(file);
+ alert('You can\'t add new files !')
+ });
- var dropzone_{{ $field['name'] }}_sortable = new Sortable(document.getElementById("dropzone_{{ $field['name'] }}"), {
- handle: ".dz-preview",
- draggable: ".dz-preview",
- onEnd: function (evt) {
- var ids = this.toArray();
-
- if (ids.length > 0) {
- $.ajax({
- url: "{{ url($crud->route . '/' . $entry->id . '/media/reorder') }}",
- type: 'POST',
- data: {
- ids: ids
- }
- })
- .done(function (response) {
- var notification_type;
- if (response.success != true) {
- var message = 'Order failed';
+ var dropzone_sortable = new Sortable(document.getElementById(el_id), {
+ handle: ".dz-preview",
+ draggable: ".dz-preview",
+ onEnd: function (evt) {
+ var ids = this.toArray();
- if (response.message != 'undefined') {
- message = response.message;
+ if (ids.length > 0) {
+ $.ajax({
+ url: base_url + "/reorder",
+ type: 'POST',
+ data: {
+ ids: ids
}
-
- new PNotify({
- text: message,
- type: 'error',
- icon: false
+ })
+ .done(function (response) {
+ var notification_type;
+
+ if (response.success != true) {
+ var message = 'Order failed';
+
+ if (response.message != 'undefined') {
+ message = response.message;
+ }
+
+ new PNotify({
+ text: message,
+ type: 'error',
+ icon: false
+ });
+ }
+
+
+ })
+ .fail(function (xhr) {
+ var message = 'Order failed';
+
+ if (xhr.responseJSON != 'undefined' && xhr.responseJSON.message != 'undefined') {
+ message = xhr.responseJSON.message;
+ }
+
+ new PNotify({
+ text: message,
+ type: 'error',
+ icon: false
+ });
});
- }
-
+ }
+ }
+ });
- })
- .fail(function (xhr) {
- var message = 'Order failed';
+ return dropzone;
+ }
- if (xhr.responseJSON != 'undefined' && xhr.responseJSON.message != 'undefined') {
- message = xhr.responseJSON.message;
- }
+ initAllDropzones();
+ $(document).on('cubist.bunchmultiple.added', function () {
+ initAllDropzones();
+ });
- new PNotify({
- text: message,
- type: 'error',
- icon: false
- });
- });
- }
- }
});
- });
- </script>
-@endpush
+
+ </script>
+ @endpush
+
+@endif