Reinitialize JS

[xf_phantom]

What is

XenForo.register('.mySelector', 'XenForo.MyClass');

Exactly doing?

How can i call my code again when xenforo triggers

  $editor.trigger('AttachmentsChanged');

 

[Chris D]

yourElement.on('AttachmentsChanged', function()
{
    // do something
}

Wouldn't that work?

 

[xf_phantom]

Thx, but don't know how to use this with "my already initialized object"

that's my current code:

!function ($, window, document, _undefined) {

    XenForo.FATSortable = function ($container)
    {
        sortUrl = $container.data('sort-url');
        itemSelector = 'li.listItem';
        console.log('sortable init start');

        if (!sortUrl) {
            console.log('data-sort-url for .sortable not found');
            return;
        }
        $config = {
            forcePlaceholderSize: true,
            items: itemSelector
        };

        $eventConfig = {
            'sortupdate': function (e) {
                var order = [];

                $container.find('[data-item-id]').each(function (i) {
                    var $this = $(this),
                        itemId = $this.data('item-id'),
                        parentId = $this.parent().data('parent-id');

                    if (parentId !== undefined) {
                        order[i] = [itemId, parentId];
                    }
                    else {
                        order[i] = itemId;
                    }
                });
                // moving across groups can trigger this multiple times
                if ($container.data('sort-timer')) {
                    clearTimeout($container.data('sort-timer'));
                }
                $container.data('sort-timer', setTimeout(function () {
                    XenForo.ajax(
                        sortUrl,
                        { order: order },
                        function (e) {
                            // ajax progress complete, execute display order update
                            console.info('ajax request complete');
                        }
                    );
                }, 100));
            }
        };

        $container.sortable
        (
            $config
        ).bind
        (
            $eventConfig
        );

        $container.on('AttachmentsChanged', function(e)
        {
            console.log(e);
            console.log('attachChanged fired');
            $container.sortable($config).bind($eventConfig);
        });
    };
    XenForo.register('.fat_sortable', 'XenForo.FATSortable');

}
(jQuery, this, document);

and

  $container.on('AttachmentsChanged', function(e)
        {
            console.log(e);
            console.log('attachChanged fired');
            $container.sortable($config).bind($eventConfig);
        });

is never being called

I've even tried to replace it with the code i've found here http://xenforo.com/community/threads/fire-js-action-after-thread-prefix-selection.21199/#post-268791 but it's still not being called

 

[cclaerhout]

The "AttachmentsChanged" event is only triggered on the editor element, so you need to use the on function on the editor.

Here's a code where you will have to specify the form where is the editor:

!function($, window, document, undefined)
{
   XenForo.FatSortable = function ($container)
   {
     var sortUrl = $container.data('sort-url'),
       itemSelector = 'li.listItem';
    
     console.log('sortable init start');

     if (!sortUrl) {
       console.log('data-sort-url for .sortable not found');
       return;
     }
    
     var config = {
       forcePlaceholderSize: true,
       items: itemSelector
     };

     var eventConfig = {
       'sortupdate': function(e) {
         var order = [];

         $container.find('[data-item-id]').each(function(i){
           var $this = $(this),
             itemId = $this.data('item-id'),
             parentId = $this.parent().data('parent-id');

           if (parentId !== undefined) {
             order[i] = [itemId, parentId];
           }
           else {
             order[i] = itemId;
           }
         });
        
         // moving across groups can trigger this multiple times
         if ($container.data('sort-timer')) {
           clearTimeout($container.data('sort-timer'));
         }
        
         $container.data('sort-timer', setTimeout(function () {
           XenForo.ajax(
             sortUrl,
             { order: order },
             function (e) {
               // ajax progress complete, execute display order update
               console.info('ajax request complete');
             }
           );
         }, 100));
       }
     };

     $container.sortable(config).bind(eventConfig);

     var editor = XenForo.getEditorInForm($missingElement.closest('form'), ':not(.NoAttachment)');

     editor.$editor.on('AttachmentsChanged', function(e)
     {
       console.log(e);
       console.log('attachChanged fired');
       $container.sortable(config).bind(eventConfig);
     });
   };
  
   XenForo.register('.fat_sortable', 'XenForo.FatSortable');
}
(jQuery, this, document);

pastebin


If it doesn't work, use this:

!function($, window, document, undefined)
{
   XenForo.FatSortable = function ($container)
   {
     var sortUrl = $container.data('sort-url'),
       itemSelector = 'li.listItem';
     
     console.log('sortable init start');

     if (!sortUrl) {
       console.log('data-sort-url for .sortable not found');
       return;
     }
     
     var config = {
       forcePlaceholderSize: true,
       items: itemSelector
     };

     var eventConfig = {
       'sortupdate': function(e) {
         var order = [];

         $container.find('[data-item-id]').each(function(i){
           var $this = $(this),
             itemId = $this.data('item-id'),
             parentId = $this.parent().data('parent-id');

           if (parentId !== undefined) {
             order[i] = [itemId, parentId];
           }
           else {
             order[i] = itemId;
           }
         });
         
         // moving across groups can trigger this multiple times
         if ($container.data('sort-timer')) {
           clearTimeout($container.data('sort-timer'));
         }
         
         $container.data('sort-timer', setTimeout(function () {
           XenForo.ajax(
             sortUrl,
             { order: order },
             function (e) {
               // ajax progress complete, execute display order update
               console.info('ajax request complete');
             }
           );
         }, 100));
       }
     };

     $container.sortable(config).bind(eventConfig);

     $('.AttachmentEditor').on('AttachmentsChanged', function(e)
     {
       console.log(e);
       console.log('attachChanged fired');
       $container.sortable(config).bind(eventConfig);
     });
   };
   
   XenForo.register('.fat_sortable', 'XenForo.FatSortable');
}
(jQuery, this, document);

 

[xf_phantom]

Thx, i'll give it a try, but your 1. code won't work.
getEditorInForm won't find the editor, because i don't have one.

I have only the attachment uploader on this page.

Edit:

thx for the hint
I assume i have to customize the attachment_upload.js file for my needs and remove the editor dependency. I thought that $editor is the attachmentupload form