Open JohnJVTK opened 3 years ago
Hello,
I made changes to add collapsible groups but I don't know how to do a PR.
I added the following code in JS file
document.querySelectorAll("li.group").forEach(function (el) { el.insertAdjacentHTML("beforeend", '<span class="caret caret-down pl-1"></span>'); }); document.querySelectorAll(".caret-container").forEach(function (el) { el.addEventListener("click", function () { if (el.classList.contains("caret-down")) { el.classList.remove("caret-down"); el.classList.add("caret-right"); } else if (el.classList.contains("caret-right")) { el.classList.remove("caret-right"); el.classList.add("caret-down"); } const li = el.parentElement; if (!li.classList.contains("collapsed")) li.classList.add("collapsed"); else li.classList.remove("collapsed"); let nextSibling = li.nextElementSibling; while (nextSibling) { nextSibling.style.display = li.classList.contains("collapsed") ? "none" : "list-item"; nextSibling = nextSibling.nextElementSibling; if (nextSibling == null || nextSibling.classList.contains("group")) { break; } } }); });
and the following in CSS file
.ms-drop ul > li label { display: inline-block; } .caret-down::after { display: inline-block; margin-left: .255em; vertical-align: .255em; content: ""; border-top: .3em solid; border-right: .3em solid transparent; border-bottom: 0; border-left: .3em solid transparent; } .caret-right::after { display: inline-block; margin-left: .255em; vertical-align: .255em; content: ""; border-top: .3em solid transparent; border-top-width: 0.3em; border-top-style: solid; border-top-color: transparent; border-right: 0; border-bottom: .3em solid transparent; border-left: .3em solid; }
It would be nice if this was added as an option like 'enableCollapsibleGroup' (boolean)
I hope this could be useful for someone and added to the plugin.
Hello,
I made changes to add collapsible groups but I don't know how to do a PR.
I added the following code in JS file
and the following in CSS file
It would be nice if this was added as an option like 'enableCollapsibleGroup' (boolean)
I hope this could be useful for someone and added to the plugin.