XF 1.4 How exactly does ToggleTrigger

[Dad.]

I am consolidating my postbit into a dropdown menu using the .Popup class and functionality. However, when clicking on post history it does not work correctly due to the ToggleTrigger parent selector relationship. That is to say, wrapping post history (and edit, delete, etc) in a menu adds more wrapping elements to the DOM and from what I can see from xenforo.js it needs to be in a specific position to work.

So I have two things I want to mention. First, can @Mike (whom I believe is responsible for writing the function) or someone explain how this function works?

@Russ do you have insight here?

Second, I think this function can be cleaned up a bit so there is a clear relationship so people can use this cool feature more. Unless its just me thats confused.

Thanks,
Mike

 

[Mike]

When you put things in a menu, it moves in the DOM. That's the challenge.

Toggle trigger is pretty straight forward: look for a parent .ToggleTriggerAnchor or fallback to the body, then find the data-target within that.

So you really just need to adapt the target to point to something that can be uniquely identified.

 

[Steve F]

I looked at it and you were right the History was not working for me in the menu. Looking at the rest of the message controls and how they were loaded I changed ToggleTrigger to OverlayTrigger. Everything seems to function well from that point . The default ToggleTrigger is used still when not in responsive.



Needed some additional CSS as well as the form Overlays don't have a background defined by default as the form data fills that with its own styling.

.xenOverlay .dataTable.diffVersions
{
    background-color: @contentBackground;
    margin-top: 0;
}

 

[Dad.]

I looked at it and you were right the History was not working for me in the menu. Looking at the rest of the message controls and how they were loaded I changed ToggleTrigger to OverlayTrigger. Everything seems to function well from that point . The default ToggleTrigger is used still when not in responsive.

View attachment 83629

Needed some additional CSS as well as the form Overlays don't have a background defined by default as the form data fills that with its own styling.

.xenOverlay .dataTable.diffVersions
{
    background-color: @contentBackground;
    margin-top: 0;
}

Yeah I patched mine like that yesterday. But I was curious if it was possible the other way and I don't think it is. I'll keep looking.

 

[Steve F]

I think it is pretty consistent with how everything else works. I like it in the Overlay as it will load the overlay near the top of the screen on mobile instead of the toggle action loading below the screen view and having to scroll down to view it.

 

[Dad.]

I think it is pretty consistent with how everything else works. I like it in the Overlay as it will load the overlay near the top of the screen on mobile instead of the toggle action loading below the screen view and having to scroll down to view it.

I can agree with that.