1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Reinitialize JS

Discussion in 'XenForo Development Discussions' started by xf_phantom, Feb 21, 2014.

  1. xf_phantom

    xf_phantom Well-Known Member

    What is
    Code:
    XenForo.register('.mySelector', 'XenForo.MyClass');
    
    Exactly doing?

    How can i call my code again when xenforo triggers
    Code:
      $editor.trigger('AttachmentsChanged');
     
  2. Chris D

    Chris D XenForo Developer Staff Member

    Code:
    yourElement.on('AttachmentsChanged', function()
    {
        // do something
    }
    Wouldn't that work?
     
  3. xf_phantom

    xf_phantom Well-Known Member

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

    that's my current code:
    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
    Code:
    
      $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:(
     
  4. cclaerhout

    cclaerhout Well-Known Member

    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:

    Code:
    !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:
    Code:
    !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);
    
     
  5. xf_phantom

    xf_phantom Well-Known Member

    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: :cautious: :whistle:

    thx for the hint:D
    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 :(
     
    Last edited: Feb 22, 2014

Share This Page