Tabbed Options

Tabbed Options

DragonByte Tech

Well-known member
No. I am using the first option to have tabbed sections...

However, within those tabbed sections, I still want to use the default form-row-separators. Can this be done?
I don’t understand why you can’t just edit the HTML and change the break points to separate new tabs from every 100 to every 1000 as per my previous post.

Can you please explain?


Fillip
 

Jaxel

Well-known member
I dont want to use tabs to replace the form-row-separators. I want to use the default form-row-separators in conjunction with the custom tabs.
 

DragonByte Tech

Well-known member
I dont want to use tabs to replace the form-row-separators. I want to use the default form-row-separators in conjunction with the custom tabs.
Okay, let's try this a different way.

Notice in the HTML for your_namespace_option_macros I have the following blocks of code:

<xf:if is="$option.Relations.your_group.display_order < 200">
<xf:if is="$option.Relations.your_group.display_order >= 200 AND $option.Relations.your_group.display_order < 300">

Etc.

Notice that every 100, it changes to a new tab?

What I am saying is, that INSTEAD of the code above, use THIS code:

<xf:if is="$option.Relations.your_group.display_order < 2000">
<xf:if is="$option.Relations.your_group.display_order >= 2000 AND $option.Relations.your_group.display_order < 3000">

Etc.

Notice that instead of every one hundred, now it changes to a new tab every one THOUSAND?

That way, you can still separate options with the form-row-separators every one hundred, while also using tabs.

Does this make sense now?


Fillip
 

Jaxel

Well-known member
Okay, let's try this a different way.

Notice in the HTML for your_namespace_option_macros I have the following blocks of code:

<xf:if is="$option.Relations.your_group.display_order < 200">
<xf:if is="$option.Relations.your_group.display_order >= 200 AND $option.Relations.your_group.display_order < 300">

Etc.

Notice that every 100, it changes to a new tab?

What I am saying is, that INSTEAD of the code above, use THIS code:

<xf:if is="$option.Relations.your_group.display_order < 2000">
<xf:if is="$option.Relations.your_group.display_order >= 2000 AND $option.Relations.your_group.display_order < 3000">

Etc.

Notice that instead of every one hundred, now it changes to a new tab every one THOUSAND?

That way, you can still separate options with the form-row-separators every one hundred, while also using tabs.

Does this make sense now?


Fillip
I am using:
<xf:if is="$option.Relations.EWRmedio.display_order < 9000">
<xf:if is="$option.Relations.EWRmedio.display_order >= 9000">
Thats it...

But it's not displaying the default 100 form-row-separators.
 

DragonByte Tech

Well-known member
DragonByte Tech updated Tabbed Options with a new update entry:

Tabbed Options 3: This Time The Third One Is Actually Better

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.
Read the rest of this update entry...
 

DragonByte Tech

Well-known member
This stopped working once I built the add-on in CLI. Any ideas?
Hmm 🤔

The only thing that jumps to my mind is that either the template or the code event listener wasn’t assigned to your addon, or was accidentally assigned to another addon.

It would still work when developing but not when installing the built code.

If that’s not it feel free to send me the zip file (over private is fine if it’s gonna be a paid mod) along with whatever is missing from the built addon, and I’ll take a look :)


Fillip
 

Matt C.

Well-known member
Hmm 🤔

The only thing that jumps to my mind is that either the template or the code event listener wasn’t assigned to your addon, or was accidentally assigned to another addon.

It would still work when developing but not when installing the built code.

If that’s not it feel free to send me the zip file (over private is fine if it’s gonna be a paid mod) along with whatever is missing from the built addon, and I’ll take a look :)


Fillip
Thank you Fillip very much. Here you go. I checked the listener and it is indeed assigned.
 

Attachments

DragonByte Tech

Well-known member
Thank you Fillip very much. Here you go. I checked the listener and it is indeed assigned.
It seems to be working for me 🤔

190636

I see you even have a combination of the tabbed headers and the block headers under the "Sub navigation" bit, I like it :D

Could you elaborate on what the issue you're having is?


Fillip
 

DragonByte Tech

Well-known member
Okay magically it just started working again. No idea what the issue was.
If you're using a VM to develop like Docker or Scotchbox, it could be a file sync issue. Sometimes, there's a delay in copying the files you edited on your local drive onto the VM.

For me this issue mostly happens with XF2's config.php file for some reason. It's quite rare, though, as I have an SSD.

Anyway, glad you got it working :)


Fillip
 

SyTry

Well-known member
Hello @DragonByte Tech ,

Thank you for this tip, it's much better. I would suggest this modification, your code :
HTML:
                <h2 class="block-tabHeader tabs" data-xf-init="tabs" role="tablist">
                    <a class="tabs-tab is-active" role="tab" tabindex="0" aria-controls="one">{{ phrase('one') }}</a>
                    <a class="tabs-tab" role="tab" tabindex="0" aria-controls="two">{{ phrase('two') }}</a>
                    <a class="tabs-tab" role="tab" tabindex="0" aria-controls="three">{{ phrase('three') }}</a>
                </h2>
Result :
194233

And this is the one I suggest :
HTML:
                <h2 class="block-tabHeader tabs hScroller" data-xf-init="h-scroller tabs" role="tablist">
                    <span class="hScroller-scroll">
                        <a class="tabs-tab is-active" role="tab" tabindex="0" aria-controls="one">{{ phrase('one') }}</a>
                        <a class="tabs-tab" role="tab" tabindex="0" aria-controls="two">{{ phrase('two') }}</a>
                        <a class="tabs-tab" role="tab" tabindex="0" aria-controls="three">{{ phrase('three') }}</a>
                    </span>
                </h2>
Result :
194235

It's mainly for mobile view, thank you again ! ;)

Regards, SyTry
 

truonglv

Formerly Nobita.Kun
Hello @DragonByte Tech
I have minor improvement your html which reduce duplicate code block.

HTML:
<xf:macro name="option_form_block" arg-group="" arg-options="!" arg-containerBeforeHtml="">
    <xf:set var="$hundred" value="0" />

    <xf:if is="$options is not empty">
        <xf:form action="{{ link('options/update') }}" ajax="true" class="block">
            <div class="block-container">
                {$containerBeforeHtml|raw}
                <h2 class="block-tabHeader tabs hScroller" data-xf-init="h-scroller tabs" role="tablist">
                    <span class="hScroller-scroll">
                        <a class="tabs-tab is-active" role="tab" tabindex="0"
                           aria-controls="generalOptions">{{ phrase('general_options') }}</a>
                        <a class="tabs-tab" role="tab" tabindex="0"
                           aria-controls="eventOptions">{{ phrase('tlg_event_options') }}</a>
                        <a class="tabs-tab" role="tab" tabindex="0"
                           aria-controls="forumDiscussionOptions">{{ phrase('tlg_forum_discussion_options') }}</a>
                    </span>
                </h2>

                <ul class="tabPanes">
                    <li class="is-active" role="tabpanel" id="generalOptions">
                        <xf:macro name="option_form_rows" arg-group="{$group}"
                                  arg-options="{$options}" arg-maxDisplayOrder="2000" arg-hundred="{$hundred}"/>
                    </li>
                    <li role="tabpanel" id="eventOptions">
                        <xf:macro name="option_form_rows" arg-group="{$group}"
                                  arg-options="{$options}" arg-minDisplayOrder="2001" arg-maxDisplayOrder="3000" arg-hundred="{$hundred}"/>
                    </li>
                    <li role="tabpanel" id="forumDiscussionOptions">
                        <xf:macro name="option_form_rows" arg-group="{$group}"
                                  arg-options="{$options}" arg-minDisplayOrder="3001" arg-maxDisplayOrder="5000" arg-hundred="{$hundred}"/>
                    </li>
                </ul>
                <xf:submitrow sticky="true" icon="save" />
            </div>
        </xf:form>
    </xf:if>
</xf:macro>

<xf:macro name="option_form_rows" arg-group="!" arg-options="!" arg-minDisplayOrder="{{ 0 }}" arg-maxDisplayOrder="!" arg-hundred="!">
    <div class="block-body">
        <xf:foreach loop="$options" value="$option">
            <xf:if is="{$option.Relations.{$group.group_id}.display_order} < {$maxDisplayOrder}
                && {$option.Relations.{$group.group_id}.display_order} >= {$minDisplayOrder}">
                <xf:if is="$group">
                    <xf:set var="$curHundred" value="{{ floor($option.Relations.{$group.group_id}.display_order / 100) }}" />
                    <xf:if is="{{ $curHundred > $hundred }}">
                        <xf:set var="$hundred" value="{$curHundred}" />
                        <hr class="formRowSep" />
                    </xf:if>
                </xf:if>

                <xf:macro template="option_macros" name="option_row"
                          arg-group="{$group}" arg-option="{$option}" />
            </xf:if>
        </xf:foreach>
    </div>
</xf:macro>
 

DragonByte Tech

Well-known member
Hello @DragonByte Tech
I have minor improvement your html which reduce duplicate code block.

HTML:
<xf:macro name="option_form_block" arg-group="" arg-options="!" arg-containerBeforeHtml="">
    <xf:set var="$hundred" value="0" />

    <xf:if is="$options is not empty">
        <xf:form action="{{ link('options/update') }}" ajax="true" class="block">
            <div class="block-container">
                {$containerBeforeHtml|raw}
                <h2 class="block-tabHeader tabs hScroller" data-xf-init="h-scroller tabs" role="tablist">
                    <span class="hScroller-scroll">
                        <a class="tabs-tab is-active" role="tab" tabindex="0"
                           aria-controls="generalOptions">{{ phrase('general_options') }}</a>
                        <a class="tabs-tab" role="tab" tabindex="0"
                           aria-controls="eventOptions">{{ phrase('tlg_event_options') }}</a>
                        <a class="tabs-tab" role="tab" tabindex="0"
                           aria-controls="forumDiscussionOptions">{{ phrase('tlg_forum_discussion_options') }}</a>
                    </span>
                </h2>

                <ul class="tabPanes">
                    <li class="is-active" role="tabpanel" id="generalOptions">
                        <xf:macro name="option_form_rows" arg-group="{$group}"
                                  arg-options="{$options}" arg-maxDisplayOrder="2000" arg-hundred="{$hundred}"/>
                    </li>
                    <li role="tabpanel" id="eventOptions">
                        <xf:macro name="option_form_rows" arg-group="{$group}"
                                  arg-options="{$options}" arg-minDisplayOrder="2001" arg-maxDisplayOrder="3000" arg-hundred="{$hundred}"/>
                    </li>
                    <li role="tabpanel" id="forumDiscussionOptions">
                        <xf:macro name="option_form_rows" arg-group="{$group}"
                                  arg-options="{$options}" arg-minDisplayOrder="3001" arg-maxDisplayOrder="5000" arg-hundred="{$hundred}"/>
                    </li>
                </ul>
                <xf:submitrow sticky="true" icon="save" />
            </div>
        </xf:form>
    </xf:if>
</xf:macro>

<xf:macro name="option_form_rows" arg-group="!" arg-options="!" arg-minDisplayOrder="{{ 0 }}" arg-maxDisplayOrder="!" arg-hundred="!">
    <div class="block-body">
        <xf:foreach loop="$options" value="$option">
            <xf:if is="{$option.Relations.{$group.group_id}.display_order} < {$maxDisplayOrder}
                && {$option.Relations.{$group.group_id}.display_order} >= {$minDisplayOrder}">
                <xf:if is="$group">
                    <xf:set var="$curHundred" value="{{ floor($option.Relations.{$group.group_id}.display_order / 100) }}" />
                    <xf:if is="{{ $curHundred > $hundred }}">
                        <xf:set var="$hundred" value="{$curHundred}" />
                        <hr class="formRowSep" />
                    </xf:if>
                </xf:if>

                <xf:macro template="option_macros" name="option_row"
                          arg-group="{$group}" arg-option="{$option}" />
            </xf:if>
        </xf:foreach>
    </div>
</xf:macro>
Thanks! :D

I've made some further tweaks that will make this template able to be copy-pasted across all add-ons. I'll update the resource :)
 

DragonByte Tech

Well-known member
DragonByte Tech updated Tabbed Options with a new update entry:

HTML clean-up, universal template

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...
Read the rest of this update entry...
 
Top