Course dragdrop YUI is interfering with Bootstrap collapse

Course dragdrop YUI is interfering with Bootstrap collapse

by Amanda Doughty -
Number of replies: 5
Picture of Core developers Picture of Plugin developers

We have a course format which uses Bootstrap collapse to expand/collapse sections. This relies on the sectionbody having a unique id which is referenced in sectionhead.

It works fine until a section is dragged. The YUI code creates a clone with the same id and hides it. Then when the sectionhead is clicked, it is the hidden clone which expands/collapses.

I have spent days trying to work out how to remove the cloned node on dragend and I'm not even sure if any of my proposed solutions are the correct approach (remove the cloned node or remove it's id attribute), but I have not been able to achieve them.

Can anyone help?

Average of ratings: -
In reply to Amanda Doughty

Re: Course dragdrop YUI is interfering with Bootstrap collapse

by Bas Brands -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers Picture of Plugins guardians Picture of Testers

Hi Amanda,

If only course formats and all drag / drop JS relied on mustache + amd it would be much easier to solve.

I guess the only way to solve this would be to write your own JS for collapsing, and if that isn't an option maybe always show sections opened when in editing mode? Once you turn it off the page will be reloaded and all would be fine again.

Average of ratings: -
In reply to Amanda Doughty

Re: Course dragdrop YUI is interfering with Bootstrap collapse

by David Scotson -

Do you know if the old one is being activated because it still has the event associated with it, or is it just because the id is the same?

If it's the latter, the Bootstrap collapse code should accept any selector, so if there's anything different about the clone, like an extra CSS cIass or different ancestors then you could use that to narrow it down and target only the ones you want to collapse.

I just tried this out, but I couldn't see the duplicate id section after dragging, I can see the one in .yui3-dd-proxy but it seems to not have the same id, so I guess it's probaly the former issue.

I also tested format_collapsibletopics to see what they do, seems like maybe they're just triggering a full reload in the format.js, possibly to work around this same issue? https://github.com/cellule-tice/moodle-format_collapsibletopics/blob/master/format.js

I tried using "Duplicate node" in the Firefox dev tools to recreate this, and it seems to show the same issue. Clicking on the toggle on the duplicated item activates the original instead of the new one. Updating the ids seems to fix it though in that case so it's probably not the exact same thing happening.



Average of ratings: -
In reply to David Scotson

Re: Course dragdrop YUI is interfering with Bootstrap collapse

by David Scotson -

The format_collapsibletopics appears to show the same symptoms as you described. Though you have to delete that line of JS that reloads the page to see it.


After deleting that line I fixed format_collapsibletopics by changing the pointer to the collapsing part from href="#collapse-1" to data-target=".accordian #collapse-1" (it seems to work using href too, but since it's not a valid href anymore, I thought it better to use data-target). That extra parent selector stops it hitting the clone, which has a #collapse-1 id but is outside the .accordian wrapper.


Average of ratings: -
In reply to David Scotson

Re: Course dragdrop YUI is interfering with Bootstrap collapse

by Amanda Doughty -
Picture of Core developers Picture of Plugin developers

You are a legend! I've been trying all sorts of voodoo.

Average of ratings: -