XF 2.2 BBCode Popup menu

[stromb0li]

Is there any documentation on how to extend custom BB code menu entries to include a popup experience vs embed the bbcode as text into the edit area as-is?

For example, images, gallery, gif, etc. all have nice little menus.


Thank you!

 

[stromb0li]

I've been using XFMG as an example to try and reverse how this works. So far my conclusion is this:

1) Add-ons use overlays, the built-in plugins are froala\plugins and the intent is not for developers to write a native froala plugin, rather build upon a call off the template system (with whatever).
2) To trigger the overlay, you need to introduce an editor.js file and extend EditorDialog.
3) Within the JS file, you can reference a template, such as, xfmg_editor_dialog_gallery, which will have the overlay and callback of what to render.
4) Once done defining your JS file, you should minify it and call it editor.min.js.
5) A template modification should be configured to point to the js file, with min="1" to use the minified file.

Is this the general gist / am I on the right track?

 

[Jeremy P]

You're on the right track.

4) Once done defining your JS file, you should minify it and call it editor.min.js.

You can minify it when building, and use <xf:js addon="Your/AddOn" src="y/a/editor.js" min="1" /> to include it in the template.

 

[stromb0li]

Slightly related (not specific to the editor popup menu from the toolbar, but still in context of bbcode and javascript) - if the rendered template for the referenced bbcode in the article/post needs javascript to support the embedded experience, are there any references or examples I can take a look at? Is there a recommended template modification location in where I should reference my javascript file?

Thank you!

 

[Jeremy P]

You can just call <xf:js ...> for the BBCode template as you would any other template, unless I'm not understanding your question.

 

[stromb0li]

My concern is if I did that and there were multiple renderings for each bbcode reference, it would try loading the same js multiple times, unless xf:js prevents that?

 

[Jeremy P]

It prevents that. You can reference identical JS files a million times and it will only make it to the rendered HTML once.

 

[stromb0li]

It prevents that. You can reference identical JS files a million times and it will only make it to the rendered HTML once.

Aside, I have what I want to render working outside of xenforo (trying to port it in). I currently use

const parent = document.getElementById("parent");
// and
parent.addEventListener("keyup", (event) => {
  const target = event.target;

to find / bind to the elements I'm interacting with. Is there any documentation that walks through js implementation in xenforo?

 

[Jeremy P]

There's a quick primer in the middle of this post, though some things have changed since and some more things will change soon:

Post in thread 'XenForo 2.0 development updates from xf2demo'

Dec 21, 2017

What's new for developers in XenForo 2 (part 2) (December 30th) (@Mike)

A couple of weeks ago, we went into some detail about what's new for developers in XenForo 2. (You can read that here). We promised we would be back for more and so here it is:

Add-ons
In XF1 there are very few conventions and little structure in terms of the naming of add-ons, where the files are stored and what those files are named. We are changing that in XF2 in quite a significant way.

First of all, there is now a specific directory for all add-ons. Each add-on will have its own...

• XenForo

• 

A quick example (untested):

window.S = window.S || {}

;(($, window, document) =>
{
    'use strict'

    S.MyHandler = XF.Event.newHandler({
        eventType: 'keyup',
        eventNameSpace: 'SMyHandler',

        options: {
            // any data-whatever-options you need
        },

        init ()
        {
            // your initializer -- target can be accessed via this.$target
            // (you can omit this method)
        },

        keyup (e)
        {
            // your event handler
        }
    })

    XF.Event.register('keyup', 's-my-handler', 'S.MyHandler')
}(jQuery, window, document)

<input data-xf-keyup="s-my-handler" />

 

[stromb0li]

Thank you! Looking forward to the 2.3 implementation without jQuery!