Home Reference Source

cables_dev/cables_ui/src/ui/components/collapsable.js

  1. const Collapsable = {};
  3. export default Collapsable;
  5. Collapsable.setup = function (parentEle, childEle, collapsed)
  6. {
  7.     if (!parentEle) return;
  9.     parentEle.classList.add("collapsable");
  11.     if (!childEle)
  12.     {
  13.         if (parentEle.innerHTML.indexOf("icon-chevron") == -1)
  14.             parentEle.innerHTML = "<span class=\"icon icon-chevron-down\" style=\"opacity:0\"></span>" + parentEle.innerHTML;
  15.         return;
  16.     }
  18.     if (parentEle.innerHTML.indexOf("icon-chevron") == -1)
  19.         parentEle.innerHTML = "<span class=\"icon icon-chevron-down\"></span>" + parentEle.innerHTML;
  21.     Collapsable._setGroupCollapsed(parentEle, childEle, collapsed);
  23.     parentEle.addEventListener("click", (event) =>
  24.     {
  25.         Collapsable._toggleGroupElements(parentEle, childEle);
  26.         event.stopImmediatePropagation();
  27.     });
  28. };
  30. Collapsable._setGroupCollapsed = (parentEle, childEle, collapsed) =>
  31. {
  32.     if (!collapsed)
  33.     {
  34.         childEle.classList.remove("hidden");
  35.         parentEle.children[0].classList.add("icon-chevron-down");
  36.         parentEle.children[0].classList.remove("icon-chevron-right");
  37.     }
  38.     else
  39.     {
  40.         childEle.classList.add("hidden");
  41.         parentEle.children[0].classList.remove("icon-chevron-down");
  42.         parentEle.children[0].classList.add("icon-chevron-right");
  43.     }
  44. };
  46. Collapsable._toggleGroupElements = (parentEle, childEle) =>
  47. {
  48.     childEle.classList.toggle("hidden");
  50.     parentEle.children[0].classList.toggle("icon-chevron-down");
  51.     parentEle.children[0].classList.toggle("icon-chevron-right");
  52. };