From 744c733a19928a1a64953314945d4d4e7beb64b7 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 27 Jun 2019 17:20:41 +0200
Subject: [PATCH] #2843

---
 src/app/CubistCrudPanel.php                   |  11 +-
 src/app/Magic/Fields/Button.php               |   3 +-
 src/app/PageManager/Models/Page.php           |  12 -
 src/public/bunchmultiple/bunchmultiple.js     |   2 +
 src/resources/views/fields/button.blade.php   |  70 ++--
 .../views/fields/dropzone_media.blade.php     | 345 ++++++++++--------
 6 files changed, 241 insertions(+), 202 deletions(-)
 delete mode 100644 src/app/PageManager/Models/Page.php

diff --git a/src/app/CubistCrudPanel.php b/src/app/CubistCrudPanel.php
index 0ebcc2e..e4d1001 100644
--- a/src/app/CubistCrudPanel.php
+++ b/src/app/CubistCrudPanel.php
@@ -14,7 +14,7 @@ use Cubist\Backpack\app\Magic\Models\CubistMagicModel;
  */
 class CubistCrudPanel extends CrudPanel
 {
-
+    protected $_seenFieldTypes = [];
 
     public function hasField($name)
     {
@@ -40,4 +40,13 @@ class CubistCrudPanel extends CrudPanel
         $this->entry = null;
         return $this->getEntry($this->getCurrentEntryId());
     }
+
+    public function checkIfFieldIsFirstOfItsType($field)
+    {
+        if (isset($this->_seenFieldTypes[$field['type']])) {
+            return false;
+        }
+        $this->_seenFieldTypes[$field['type']] = true;
+        return true;
+    }
 }
diff --git a/src/app/Magic/Fields/Button.php b/src/app/Magic/Fields/Button.php
index 7dd580e..84e3a2f 100644
--- a/src/app/Magic/Fields/Button.php
+++ b/src/app/Magic/Fields/Button.php
@@ -4,11 +4,12 @@
 namespace Cubist\Backpack\app\Magic\Fields;
 
 
+use Cubist\Backpack\app\Magic\Models\CMSPage;
 use Cubist\Backpack\CubistBackpackServiceProvider;
 
 class Button extends Field
 {
-    protected $_pageModel = '\Backpack\PageManager\app\Models\Page';
+    protected $_pageModel = CMSPage::class;
     protected $_adminType = 'button';
     protected $_viewNamespace = CubistBackpackServiceProvider::NAMESPACE . '::fields';
     protected $_cast = 'array';
diff --git a/src/app/PageManager/Models/Page.php b/src/app/PageManager/Models/Page.php
deleted file mode 100644
index 1698368..0000000
--- a/src/app/PageManager/Models/Page.php
+++ /dev/null
@@ -1,12 +0,0 @@
-<?php
-
-
-namespace Cubist\Backpack\app\PageManager\Models;
-
-use Spatie\MediaLibrary\HasMedia\HasMedia;
-use Spatie\MediaLibrary\HasMedia\HasMediaTrait;
-
-class Page extends \Backpack\PageManager\app\Models\Page implements HasMedia
-{
-    use HasMediaTrait;
-}
diff --git a/src/public/bunchmultiple/bunchmultiple.js b/src/public/bunchmultiple/bunchmultiple.js
index 311ebc2..a7d02cc 100644
--- a/src/public/bunchmultiple/bunchmultiple.js
+++ b/src/public/bunchmultiple/bunchmultiple.js
@@ -118,6 +118,8 @@
             }
             $(".bunchmultiple__items").append($(item));
             this.setValues(item, values);
+
+            $(document).trigger('cubist.multibunch.added');
         },
 
         setValues(item, values) {
diff --git a/src/resources/views/fields/button.blade.php b/src/resources/views/fields/button.blade.php
index af2b323..875a713 100644
--- a/src/resources/views/fields/button.blade.php
+++ b/src/resources/views/fields/button.blade.php
@@ -1,18 +1,18 @@
 <!-- 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);
 
@@ -23,14 +23,14 @@ $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')
             >
@@ -43,22 +43,17 @@ $value = array_merge($empty, $value);
                 @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
@@ -67,17 +62,12 @@ $value = array_merge($empty, $value);
             <!-- 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
@@ -86,7 +76,7 @@ $value = array_merge($empty, $value);
             <!-- 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]"
@@ -143,30 +133,42 @@ $value = array_merge($empty, $value);
     @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
diff --git a/src/resources/views/fields/dropzone_media.blade.php b/src/resources/views/fields/dropzone_media.blade.php
index a5bbfe1..1443a2c 100644
--- a/src/resources/views/fields/dropzone_media.blade.php
+++ b/src/resources/views/fields/dropzone_media.blade.php
@@ -48,9 +48,15 @@
     </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>
@@ -60,192 +66,223 @@
 {{-- ########################################## --}}
 {{-- 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
-- 
2.39.5