XF 2.0 Any guides on XF2 javascript yet?

[Jaxel]

How would I do this in XF2?

    XenForo.register('.MultiAdder', 'XenForo.MultiAdder');
    
    XenForo.MultiAdder = function($form)
    {
        $form.bind('AutoValidationComplete', function(e)
        {
            if (e.ajaxData.templateHtml)
            {
                var html = e.ajaxData.templateHtml.split('=====');

                $(html[0]).xfInsert('appendTo', '#TabVideos', 'xfFadeIn');
                $(html[1]).xfInsert('appendTo', '#TabChats', 'xfFadeIn');
                $(html[2]).xfInsert('appendTo', '#TabNames', 'xfFadeIn');
            
                $('#TabNames').data('tabs').destroy();
                new XenForo.Tabs($('#TabNames'));
            }
        });
    }

 

[Liam W]

Not tested, and possibly completely wrong, but something like this:

This seems to work, though you'll have to search through existing files for the actual logic inside of the handler:

var LiamW = window.LiamW || {};

!function ($, window, document) {

    LiamW.MultiAdder = XF.Element.newHandler({
        eventNameSpace: 'LiamWMultiAdder',

        init: function() {
            this.$target.on('ajax-submit:response', $.proxy(this, 'handleResponse'));
        },

        handleResponse: function(e, data) {
           // do stuff
        }
    });

    XF.Element.register('multi-adder', 'LiamW.MultiAdder');
}(jQuery, window, document);

You'd then add a data-xf-init="multi-adder" parameter to the form element.

EDIT: Holy correctness, apart from a missing comma (which I've now added) this actually works

Liam

 

[Jaxel]

Hmm... I'll have to try that tomorrow.

 

[Jaxel]

Works great!

 

[Jaxel]

Okay, additional question. I have a tab control:

    <h2 class="block-tabHeader tabs" role="tablist" id="TabNames" data-xf-init="tabs">
        ...
    </h2>
   
    <ul class="block-body tabPanes" id="TabChats">
        ...
    </ul>

I am adding new elements to the tab control using Javascript. I've got this working.

However, when adding elements to the tab control, they don't get applied to the tab control's registration. In XF1, I had to destroy the tab control's existing registration, and construct a new one:

    $('#TabNames').data('tabs').destroy();
    new XenForo.Tabs($('#TabNames'));

How would I do this in XF2?

Also, I'm firing my AJAX from a data-xf-click="overlay" window. When the AJAX is processes, it doesn't close the overlay modal window. How do I close the overlay once I'm done? I guess I could just destroy the window in jQuery, but is there a built-in proper process for it?

 

[Jaxel]

Okay, here is a bit more of my code... Hopefully with it, someone out there can help answer my question.

$TabNames is the <h2> holding my tab headers.
$TabChats is the <ul> holding my tab panes.

    EWRrio.MultiAdder = XF.Element.newHandler(
    {
        init: function()
        {
            this.$target.on('ajax-submit:response', $.proxy(this, 'response'));
        },
       
        response: function(e, data)
        {
            e.preventDefault();
           
            if (data.html.content)
            {
                var html = data.html.content.split('#####');

                $(html[0]).appendTo('#TabNames');
                $(html[1]).appendTo('#TabChats');
                $(html[2]).appendTo('#TabVideos');
               
                XF.hideOverlays();
            }
        },
    });
   
    XF.Element.register('rio-multi-adder', 'EWRrio.MultiAdder');

When this code is processed, it correctly adds the new tab header and tab page to the document. However, the new tab is not part of the registered Tabs Element. How do I re-register the Tabs Element? As previously stated, in XF1, I did this by destroying the current Tabs element and then re-firing its initialization. I have no idea how to do this in XF2. This is literally the last thing I have to figure out before I can release XenRio for XF2.

 

[Jaxel]

Okay, I solved this issue another way... was hoping to use XenForo built-in methods... but no one was able to figure this out.

I just created my own "tabs" function, and I am not using the XenForo one anymore:

    EWRrio.MultiTabs = XF.Element.newHandler(
    {
        init: function()
        {
            $('.rio-multi-tabs .tabs-tab').on('click', EWRrio.AddTabFunctions);
            
            $('.rio-multi-tabs .tabs-tab:first').addClass('is-active');
            $('.rio-multi-chats .tabs-pane:first').addClass('is-active');
        },
    });
    
    EWRrio.AddTabFunctions = function()
    {
        $('.rio-multi-tabs .tabs-tab').removeClass('is-active');
        $('.rio-multi-chats .tabs-pane').removeClass('is-active');
        
        $(this).addClass('is-active');
        $($(this).data('pane')).addClass('is-active');
    }

Then when a new tab is added, I do a simple "off > on" switch:

                $('.rio-multi-tabs .tabs-tab').off('click');
                $('.rio-multi-tabs .tabs-tab').on('click', EWRrio.AddTabFunctions);