Tabbed Options

Tabbed Options

If you use this in your add-on, you probably use it in multiple. Changing the template is a pain for each of them, so now the template has been made 100% universal, with the configuration switched to the PHP code.

I've also updated the guidelines for the listener to use a single Listener.php file instead of a new file per listener, it doesn't really matter but it's a standard I use so :p

The main core of the HTML has also had code duplication reduced thanks to @truonglv 👍
  • Like
Reactions: SyTry and mcatze
I've updated the macro HTML code and included code for both tabbed and spaced options, with default being spaced, due to compatibility.

Furthermore, the display orders now split every 1000, instead of every 100, and adds support for the <hr class="formRowSep" /> every 100 just like standard XF2 options.

If you are using this code in your addon, you should not simply paste this new macro code without also fixing all your options to multiply their display order by 10.
  • Like
Reactions: DL6
Alternative macro HTML in order to create full-width separators instead of tabs.

Code:
<xf:macro name="option_form_block" arg-group="" arg-options="!" arg-containerBeforeHtml="">
    <xf:if is="$options is not empty">
        <xf:form action="{{ link('options/update') }}" ajax="true" class="block">
            {$containerBeforeHtml|raw}
            <div class="block-container">
                <h3 class="block-formSectionHeader">
                    {{ phrase('general_options') }}
                </h3>
                <div class="block-body">
                    <xf:foreach loop="$options" value="$option">
                        <xf:if is="$option.Relations.your_group.display_order < 200">
                            <xf:macro template="option_macros" name="option_row" arg-group="{$group}" arg-option="{$option}" />
                        </xf:if>
                    </xf:foreach>
                </div>
                
                <h3 class="block-formSectionHeader">
                    {{ phrase('your_namespace_more_options') }}
                </h3>               
                <div class="block-body">
                    <xf:foreach loop="$options" value="$option">
                        <xf:if is="$option.Relations.your_group.display_order >= 200 AND $option.Relations.your_group.display_order < 300">
                            <xf:macro template="option_macros" name="option_row" arg-group="{$group}" arg-option="{$option}" />
                        </xf:if>
                    </xf:foreach>
                </div>
                
                <h3 class="block-formSectionHeader">
                    {{ phrase('your_namespace_even_more_options') }}
                </h3>               
                <div class="block-body">
                    <xf:foreach loop="$options" value="$option">
                        <xf:if is="$option.Relations.your_group.display_order >= 300 AND $option.Relations.your_group.display_order < 400">
                            <xf:macro template="option_macros" name="option_row" arg-group="{$group}" arg-option="{$option}" />
                        </xf:if>
                    </xf:foreach>
                </div>
                <xf:submitrow sticky="true" icon="save" />
            </div>
        </xf:form>
    </xf:if>
</xf:macro>
  • Like
Reactions: DL6
Fix: Updated function arguments for the code event listener
Top