Merge pull request #3148 from Laravel-Backpack/refactor-repeatable

[4.1] Fix repeatable initialization

Author: tabacitu

src/resources/views/crud/fields/ckeditor.blade.php

@@ -42,9 +42,23 @@
         <script src="{{ asset('packages/ckeditor/adapters/jquery.js') }}"></script>
         <script>
             function bpFieldInitCKEditorElement(element) {
-                // remove any previous CKEditors from right next to the textarea
-                // element.siblings("[id^='cke_editor']").remove();
 
+
+                //when removing ckeditor field from page html the instance is not properly deleted.
+                //this event is triggered in repeatable on deletion so this field can intercept it
+                //and properly delete the instances so it don't throw errors of unexistent elements in page that has initialized ck instances.
+                element.on('backpack_field.deleted', function(e) {
+                    $ck_instance_name = element.siblings("[id^='cke_editor']").attr('id');
+
+                    //if the instance name starts with cke_ it was an auto-generated name from ckeditor
+                    //that happens because in repeatable we stripe the field names used by ckeditor, so it renders a random name
+                    //that starts with cke_
+                    if($ck_instance_name.startsWith('cke_')) {
+                        $ck_instance_name = $ck_instance_name.substr(4);
+                    }
+                    //we fully destroy the instance when element is deleted from the page.
+                    CKEDITOR.instances[$ck_instance_name].destroy(true);
+                });
                 // trigger a new CKEditor
                 element.ckeditor(element.data('options'));
             }

src/resources/views/crud/fields/repeatable.blade.php

@@ -21,8 +21,13 @@
       <p class="help-block text-muted text-sm">{!! $field['hint'] !!}</p>
   @endif
 
-  <div class="container-repeatable-elements">
-    <div class="col-md-12 well repeatable-element row m-1 p-2">
+
+
+<div class="container-repeatable-elements">
+    <div data-repeatable-holder="{{ $field['name'] }}"></div>
+
+    @push('before_scripts')
+    <div class="col-md-12 well repeatable-element row m-1 p-2" data-repeatable-identifier="{{ $field['name'] }}">
       @if (isset($field['fields']) && is_array($field['fields']) && count($field['fields']))
         <button type="button" class="close delete-element"><span aria-hidden="true">×</span></button>
         @foreach($field['fields'] as $subfield)
@@ -38,8 +43,11 @@
 
       @endif
     </div>
+    @endpush
 
   </div>
+
+
   <button type="button" class="btn btn-outline-primary btn-sm ml-1 add-repeatable-element-button">+ {{ $field['new_item_label'] ?? trans('backpack::crud.new_item') }}</button>
 
 @include('crud::fields.inc.wrapper_end')
@@ -81,10 +89,12 @@
         /**
          * Takes all inputs and makes them an object.
          */
-        function repeatableInputToObj(container) {
+        function repeatableInputToObj(container_name) {
             var arr = [];
             var obj = {};
 
+            var container = $('[data-repeatable-holder={{ $field['name'] }}]');
+
             container.find('.well').each(function () {
                 $(this).find('input, select, textarea').each(function () {
                     if ($(this).data('repeatable-input-name')) {
@@ -102,8 +112,11 @@ function repeatableInputToObj(container) {
          * The method that initializes the javascript on this field type.
          */
         function bpFieldInitRepeatableElement(element) {
+
+            var field_name = element.attr('name');
+
             // element will be a jQuery wrapped DOM node
-            var container = element.siblings('.container-repeatable-elements');
+            var container = $('[data-repeatable-identifier='+field_name+']');
 
             // make sure the inputs no longer have a "name" attribute,
             // so that the form will not send the inputs as request variables;
@@ -118,14 +131,14 @@ function bpFieldInitRepeatableElement(element) {
                             $(this).removeAttr("name");
                         }
                         $(this).attr('data-repeatable-input-name', name_attr)
-                            //    .val('');
                     });
 
             // make a copy of the group of inputs in their default state
             // this way we have a clean element we can clone when the user
             // wants to add a new group of inputs
-            var field_group_clone = container.find('.repeatable-element:first').clone();
-            container.find('.repeatable-element').remove();
+            //sconsole.log(container.find('.repeatable-element:first'));
+            var field_group_clone = container.clone();
+            container.remove();
 
             element.parent().find('.add-repeatable-element-button').click(function(){
                 newRepeatableElement(container, field_group_clone);
@@ -143,11 +156,11 @@ function bpFieldInitRepeatableElement(element) {
 
             if (element.closest('.modal-content').length) {
                 element.closest('.modal-content').find('.save-block').click(function(){
-                    element.val(JSON.stringify(repeatableInputToObj(container)));
+                    element.val(JSON.stringify(repeatableInputToObj(field_name)));
                 })
             } else if (element.closest('form').length) {
                 element.closest('form').submit(function(){
-                    element.val(JSON.stringify(repeatableInputToObj(container)));
+                    element.val(JSON.stringify(repeatableInputToObj(field_name)));
                     return true;
                 })
             }
@@ -157,9 +170,20 @@ function bpFieldInitRepeatableElement(element) {
          * Adds a new field group to the repeatable input.
          */
         function newRepeatableElement(container, field_group, values) {
+
+            var field_name = container.data('repeatable-identifier');
             var new_field_group = field_group.clone();
 
+            //this is the container for this repeatable group that holds it inside the main form.
+            var container_holder = $('[data-repeatable-holder='+field_name+']');
+
             new_field_group.find('.delete-element').click(function(){
+                new_field_group.find('input, select, textarea').each(function(i, el) {
+                    //we trigger this event so fields can intercept when they are beeing deleted from the page
+                    //implemented because of ckeditor instances that stayed around when deleted from page
+                    //introducing unwanted js errors and high memory usage.
+                    $(el).trigger('backpack_field.deleted');
+                });
                 $(this).parent().remove();
             });
 
@@ -179,9 +203,9 @@ function newRepeatableElement(container, field_group, values) {
                     }
                 });
             }
-
-            container.append(new_field_group);
-            initializeFieldsWithJavascript(new_field_group);
+            //we push the fields to the correct container in page.
+            container_holder.append(new_field_group);
+            initializeFieldsWithJavascript(container_holder);
         }
     </script>
   @endpush