Support

Account

Forum Replies Created

  • Hi,

    I realized that I had to actually change it quite a bit to fit my situation (not just copy&paste as I wrote earlier, sorry!)

    This one works in the following situation:

    repeater “columns” > flexible content “element” > layouts

    Or in words: I have a repeater named “columns” which has one subfield of type “flexible content” named “element” which has several layouts. Each column can have several Elements of different layouts, for example Image, Text-Block, etc.

    Overview of the changes
    – attached “sortstop” and “sortstart” events again
    – changed several selectors
    – re-initialise tinymce after intercolumn drag

    This is not good code, but it works for now. Would be great to have such a thing in ACF.

    
    function my_acf_input_admin_footer() {
    
        ?>
    
            <script type="text/javascript">
            
            (function($) {
    
               acf.add_action('ready', function( $el ){
                   
                   $( ".values" ).sortable({
                     connectWith: ".values",
    
                     start: function(event, ui) {
                        acf.do_action('sortstart', ui.item, ui.placeholder);              
                      },     
    
                     stop: function(event, ui) {
                        acf.do_action('sortstop', ui.item, ui.placeholder);    
    
                        $(this).find('.mce-tinymce').each(function(){
                            tinyMCE.execCommand( 'mceRemoveControl', true, $(this).attr('id') );
                            tinyMCE.execCommand( 'mceAddControl', true, $(this).attr('id') );
                            //$(this).sortable("refresh");
                        });                    
                      },                 
                   })
                   
               });
    
                acf.add_action('sortstop', function ($el) {
                    if ($($el).parents('[data-name="columns"] > .acf-input > .acf-repeater').length) {
                        var column_num = $($el).closest('.acf-row').attr('data-id');
                        $($el).find('[name^="acf[field_"]').each(function(){
                            var field_name = $(this).attr('name');   
                            var index_location = field_name.indexOf(']')+2;
                            var new_name = field_name.substr(0, index_location) + column_num + field_name.substr(index_location+1)
                            $(this).attr('name', new_name);
                        });
                        $($el).closest('[data-name="element"]').find('.acf-input > .acf-flexible-content > .values > .layout').each(function(index){
                            $(this).find('[name^="acf[field_"]').each(function(){
                                var field_name = $(this).attr('name');   
                                var index_location = GetSubstringIndex(field_name,']', 3)+2;
                                var new_name = field_name.substr(0, index_location) + index + field_name.substr(index_location+1);
                                $(this).attr('name', new_name);
                            });
                        });
                    }
                });      
    
            })(jQuery); 
    
            function GetSubstringIndex(str, substring, n) {
                var times = 0, index = null;
    
                while (times < n && index !== -1) {
                    index = str.indexOf(substring, index+1);
                    times++;
                }
    
                return index;
            }  
    
            </script>
    
        <?php
    
    }
    
    add_action('acf/input/admin_footer', 'my_acf_input_admin_footer');
    
  • I have a repeater of a flexible content:

    repeater > flexible content

  • EDIT: It didn’t, see later post

    Thanks so much!

    It worked out if the box. The complete code is below (nothing new, just combined for easy copy&paste). This greatly enhances the use of ACF:

    Add to functions.php:

    
    // Handle Dragging Between Columns
    
    function my_acf_input_admin_footer() {
    
        ?>
    
            <script type="text/javascript">
            
            (function($) {
    
                $( ".values" ).sortable({
                  connectWith: ".values"
                })
    
            })(jQuery); 
    
            function GetSubstringIndex(str, substring, n) {
                var times = 0, index = null;
    
                while (times < n && index !== -1) {
                    index = str.indexOf(substring, index+1);
                    times++;
                }
    
                return index;
            }
            
            acf.add_action('sortstop', function ($el) {
                if ($($el).parent('[data-name="elements"] > .acf-input > .acf-flexible-content > .values').length) {
                    var column_num = $($el).closest('[data-layout="column"]').attr('data-id');
                    $($el).find('[name^="acf[field_"]').each(function(){
                        var field_name = $(this).attr('name');   
                        var index_location = field_name.indexOf(']')+2;
                        var new_name = field_name.substr(0, index_location) + column_num + field_name.substr(index_location+1)
                        $(this).attr('name', new_name);
                    });
                    $($el).closest('[data-name="elements"]').find('.acf-input > .acf-flexible-content > .values > .layout').each(function(index){
                        $(this).find('[name^="acf[field_"]').each(function(){
                            var field_name = $(this).attr('name');   
                            var index_location = GetSubstringIndex(field_name,']', 3)+2;
                            var new_name = field_name.substr(0, index_location) + index + field_name.substr(index_location+1);
                            $(this).attr('name', new_name);
                        });
                    });
                }
            });        
    
            </script>
    
        <?php
    
    }
    
    add_action('acf/input/admin_footer', 'my_acf_input_admin_footer');
    
Viewing 3 posts - 1 through 3 (of 3 total)