Collapsible Node Categories

Collapsible Node Categories

Cookies are cleared when you log out which is how the state of the collapse works.

Please do not get this wrong.
Without the settings for registered users can be stored permanently, the modification makes no sense.
I have unsuccessfully searched for how to save the stored cookie permanently, unfortunately without success.
Do you have information about this?
 
nice work, thanks.
You can do the TMS part in one step with regex:

search:
HTML:
/(<div class="block block--category block--category{\$node\.node_id}">)(.*<h2 class="block-header">)(.*<div class="block-desc">{\$node\.description\|raw}<\/div><\/xf:if>)(.*<\/h2>)(.*<div class="block-body">)/s


replace:
HTML:
<div class="block block--category block--category{$node.node_id} collapsible-nodes">
$2
<div class="block-header--left">
$3
</div>
<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block is-active" data-xf-click="toggle" data-xf-init="toggle-storage" data-target=".block--category{$node.node_id} .block-body" data-storage-key="_node-{$node.node_id}"></span>
$4
<div class="block-body block-body--collapsible is-active">

Would you possibly have the one step regex for the 2.1 version of XF? The one you posted is for 2.0.
 
Would you possibly have the one step regex for the 2.1 version of XF? The one you posted is for 2.0.

The TMS below works on XF 2.0.12 and 2.1.x .... some update from XF 2.x changes <div class="block-desc"> into <span class="block-desc"> , don't remind which one.


Find:
HTML:
/(<div class="block block--category block--category{\$node\.node_id}">)(.*<h2 class="block-header">)(.*<span class="block-desc">{\$node\.description\|raw}<\/span><\/xf:if>)(.*<\/h2>)(.*<div class="block-body">)/s

Replace:
HTML:
<div class="block block--category block--category{$node.node_id} collapsible-nodes">
$2
<div class="block-header--left">
$3
</div>
<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}" data-xf-click="toggle" data-xf-init="toggle-storage" data-storage-type="cookie" data-target=".block--category{$node.node_id} .block-body" data-storage-key="_node-{$node.node_id}"></span>
$4
<div class="block-body block-body--collapsible {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}">
 
The TMS below works on XF 2.0.12 and 2.1.x .... some update from XF 2.x changes <div class="block-desc"> into <span class="block-desc"> , don't remind which one.


Find:
HTML:
/(<div class="block block--category block--category{\$node\.node_id}">)(.*<h2 class="block-header">)(.*<span class="block-desc">{\$node\.description\|raw}<\/span><\/xf:if>)(.*<\/h2>)(.*<div class="block-body">)/s

Replace:
HTML:
<div class="block block--category block--category{$node.node_id} collapsible-nodes">
$2
<div class="block-header--left">
$3
</div>
<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}" data-xf-click="toggle" data-xf-init="toggle-storage" data-storage-type="cookie" data-target=".block--category{$node.node_id} .block-body" data-storage-key="_node-{$node.node_id}"></span>
$4
<div class="block-body block-body--collapsible {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}">

Perfect, thank you. 👍
 
I mean the subforum list in thread list, not in forum list.

Visit this page for example:
https://xenforo.com/community/forums/resource-manager-bug-reports-1-x-2-x.66/

The subforum "Resource Manager resolved bugs [1.x / 2.x]" is shown in the thread list above as for example.

Sure, 2 or 3 subforums are ok, but if you have multiple subforums, like here:
https://xenforo.com/community/forums/resource-and-add-on-archive.62/

you see how long the list can get before you see the threads. Having it collapsible would be pretty neat I think. The old ToggleMe addon for xf1 could do that, but I don't think we will se that returning for xf2, so I thought maybe I ask a style-guru.

hey @sbj did you ever find a solution for a subforum collapse option?
 
Hi @Steve F

Since XF 2.1.4, XF can save and restore the state of collapsible nodes. Unfortunately, this is only possible in the admin panel. It also uses cookies "xf_toggle".
There must now also be a memory location in the database which saves the content of the cookie when logging out in the database and restores it upon login.

Would it be possible to expand your source code accordingly so that the state of collapsed nodes is stored and restored during logout / login?

Thanks in advance
 
Hi @Steve F

Since XF 2.1.4, XF can save and restore the state of collapsible nodes. Unfortunately, this is only possible in the admin panel. It also uses cookies "xf_toggle".
There must now also be a memory location in the database which saves the content of the cookie when logging out in the database and restores it upon login.

Would it be possible to expand your source code accordingly so that the state of collapsed nodes is stored and restored during logout / login?

Thanks in advance

Where is this save and restore after login/logout in admin panel used?
 
There is a solution.
 
By removing the storage type you’re going to notice that the nodes actually load open on page refresh for a split second. This is because it takes a second to read from the users local storage.

This is relevant, @Xon ’s reply about expiring with the session instead of being a separate cookie.
 
By removing the storage type you’re going to notice that the nodes actually load open on page refresh for a split second. This is because it takes a second to read from the users local storage. ...

Thanks for the information.
This is not a problem for our users, the main thing the settings are restored when the forums are displayed.
 
@nicodak the one I linked you 2 is the add-on for it so I see what the difference is now. It actually works perfect for my custom style I have. All you have to do is install it and the categories are collapsible.
 
All you have to do is install it and the categories are collapsible.
I installed it but the little button to collapse categories had an anormal behavior : normally it's the little cursor that moves inside the button but there was the button that moved around the cursor that was fixed to it. I do not know if I am speaking well to explain it.
 
@nicodak Not sure what you mean or if it's an alignment issue. The code from this was credited in the add-on so editing it yourself using @Steve F code would work fine. You may need to simply edit a bit of code. You could also just keep the add-on which is what I would recommend and then use CSS in extra.less to fix it.
 
Top Bottom