Tabbed Options

Tabbed Options

Overview FAQ Updates (5) Reviews (2) Discussion
Jaxel said:
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?
Click to expand...
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
 
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.
 
Jaxel said:
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.
Click to expand...
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
 
DragonByte Tech said:
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
Click to expand...
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 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.
Click to expand...

Read the rest of this update entry...
 
Matt C. said:
This stopped working once I built the add-on in CLI. Any ideas?
Click to expand...
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
 
DragonByte Tech said:
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
Click to expand...

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

Attachments

Matt C. said:
Okay magically it just started working again. No idea what the issue was.
Click to expand...
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
 
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
 
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>
 
truonglv said:
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>
Click to expand...
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 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...
Click to expand...

Read the rest of this update entry...
 
Is it possible to use this for tabbed options on pages you have in public? Such as, when I click a newly created page, I have a list of results then I have drop downs to allow me to pick a sport then it will display those results only, I just fill it will look best in a tabbed format with a somewhat secondary row of links for sports but using icons only.
 
You must log in or register to reply here.

Similar threads

Nulumia
Add-on A Look At The Upcoming Public Release of SEO & Index Tools
2 3
Replies
46
Views
10K
Forsaken
Forsaken
Exotic_Peacock
Y.A.P Research Team
Replies
0
Views
1K
Exotic_Peacock
Exotic_Peacock
DragonByte Tech
Copyright Footer Management
2
Replies
24
Views
7K
DragonByte Tech
DragonByte Tech
M
Having trouble with option tabs
Replies
7
Views
811
Matthew Hawley
M
Daniel Hood
  • Locked
  • Poll Poll
Add-on XenReviews [CrowdFund]
39 40 41
Replies
811
Views
183K
Chris D
Chris D
Top Bottom