XF 2.0 Extending insertAttachment function

[AndyB]

I would like to create an add-on that will change the way the [ATTACH] and [ATTACH=full]] tags are added to the quick editor using the Insert all button.

By default the Insert all button will add attach bb codes like this:



The purpose of the add-on would be to change the default to this:



The JavaScript code that I would like to extend is located in the attachment_manager.js file and the default code is this:

        insertAttachment: function($row, action)
        {
            var attachmentId = $row.data('attachment-id');
            if (!attachmentId)
            {
                return;
            }
            if (!this.editor)
            {
                return;
            }

            var thumb = $row.find(this.options.templateThumb).attr('src'),
                view = $row.find(this.options.templateView).attr('href');

            var html, bbCode, params = {
                id: attachmentId,
                img: thumb
            };

            if (action == 'full')
            {
                bbCode = '[ATTACH=full]' + attachmentId + '[/ATTACH]';
                html = '<img src="{{img}}" data-attachment="full:{{id}}" alt="{{id}}" />';

                params.img = view;
            }
            else
            {
                if (!thumb)
                {
                    return;
                }

                bbCode = '[ATTACH]' + attachmentId + '[/ATTACH]';
                html = '<img src="{{img}}" data-attachment="thumb:{{id}}" alt="{{id}}" />';
            }

            html = Mustache.render(html, params);
            XF.insertIntoEditor(this.$target, html, bbCode, '[data-attachment-target=false]');
        },

I would like this function to be extended so it would be like this:

        insertAttachment: function($row, action)
        {
            var attachmentId = $row.data('attachment-id');
            if (!attachmentId)
            {
                return;
            }
            if (!this.editor)
            {
                return;
            }

            var thumb = $row.find(this.options.templateThumb).attr('src'),
                view = $row.find(this.options.templateView).attr('href');

            var html, bbCode, params = {
                id: attachmentId,
                img: thumb
            };

            if (action == 'full')
            {
                bbCode = '[ATTACH=full]' + attachmentId + '[/ATTACH]' + '\r\n\r\n';
                html = '<img src="{{img}}" data-attachment="full:{{id}}" alt="{{id}}" />' + '<br /><br />';

                params.img = view;
            }
            else
            {
                if (!thumb)
                {
                    return;
                }

                bbCode = '[ATTACH]' + attachmentId + '[/ATTACH]' + '\r\n\r\n';
                html = '<img src="{{img}}" data-attachment="thumb:{{id}}" alt="{{id}}" />' + '<br /><br />';
            }

            html = Mustache.render(html, params);
            XF.insertIntoEditor(this.$target, html, bbCode, '[data-attachment-target=false]');
        },

I understand there is information here on how to extend JavaScript located here:

https://xenforo.com/community/threa...ent-updates-from-xf2demo.139565/#post-1205088

Unfortunately I'm not understanding how to apply those instructions.

Thank you.

 

[AndyB]

bump

 

[AndyB]

bump

 

[AndyB]

bump

 

[CMTV]

Create a js file in js folder that will extend attachment manager. For example: Andy/attachment_br.js:

!function($, window, document, _undefined)
{
    "use strict";
   
    // Extending Attachment Manager
    XF.Andy_AttachmentBr = XF.extend(XF.AttachmentManager, {
        // Creating a link to parent insertAttachment() function
        __backup: {
            'insertAttachment': '_insertAttachment'
        },
        insertAttachment: function($row, action)
        {
            // Calling insertAttachment(...) from parent
            this._insertAttachment($row, action);
           
            // Adding <br> tags after inserted media
            XF.insertIntoEditor(this.$target, '<br><br>');
        }
    });
   
    // Registering our extension
    XF.Element.register('attachment-manager', 'XF.Andy_AttachmentBr');
}(jQuery, window, document);

In helper_attach_upload template after this line:

<xf:js prod="xf/attachment_manager-compiled.js" dev="vendor/flow.js/flow-compiled.js, xf/attachment_manager.js" />

Insert this:

<xf:js src="Andy/attachment_br.js" addon="Andy" />

Hope this helped you to understand how xenForo JS framework is working.

 

[AndyB]

Thank you kindly, CMTV. It's just the help I needed.