Nested tab done

WWWPiramalFinanceCOM · Jul 3, 2024 · b0b643c · b0b643c
1 parent 8202caa
commit b0b643c
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 6 deletions.
diff --git a/blocks/tab-name-nested/tab-name-nested.js b/blocks/tab-name-nested/tab-name-nested.js
@@ -1,5 +1,37 @@
+import { createButton, createCarousle, getProps } from "../../scripts/scripts.js";
 import { generateTabName } from "../tab-name/tab-name.js";
 
 export default function decorate(block) {
-    return generateTabName(block)
+    const [parentTabName, parentTabId, child1TabName, child1TabId, child2TabName, child2TabId] = getProps(block);
+    // const names = parentTabName.split(",");
+    const ids = parentTabId.split(",");
+    // const child1names = child1TabName.split(",");
+    // const child1ids = child1TabId.split(",");
+    // const child2names = child2TabName.split(",");
+    // const child2ids = child2TabId.split(",");
+    const copyblock = copyElements(block);
+    block.innerHTML = "";
+    const child1 = generateTabName(createBlockElement([copyblock.children[2], copyblock.children[3], "", "carousel", "<", ">"]))
+    const child2 = generateTabName(createBlockElement([copyblock.children[4], copyblock.children[5], "", "carousel", "<", ">"]))
+    child1.dataset.id = ids[0];
+    child2.dataset.id = ids[1];
+    child1.classList.add("nested-tab-name-child")
+    child2.classList.add("nested-tab-name-child", "dp-none")
+    block.append(generateTabName(createBlockElement([copyblock.children[0], copyblock.children[1], "", "", "<", ">"])));
+    block.append(child1);
+    block.append(child2);
+}
+
+function copyElements(el) {
+    const div = document.createElement("div")
+    div.innerHTML = el.innerHTML ? el.innerHTML : el;
+    return div;
+
+}
+function createBlockElement(children) {
+    const block = document.createElement("div");
+    children.forEach(function (child) {
+        block.append(copyElements(child));
+    })
+    return block;
 }
diff --git a/blocks/tab-name/tab-name.js b/blocks/tab-name/tab-name.js
@@ -58,12 +58,39 @@ export function generateTabName(block) {
     block.addEventListener("click", function (e) {
         const currentEl = e.target;
         const id = currentEl.id;
-        const tabContainer = id && document.querySelector('[data-id=' + id + ']')
-        if (tabContainer) {
+        const tabContainer = id && document.querySelector('.tab-container[data-id=' + id + ']')
+        const nestedTabName = id && document.querySelector('.nested-tab-name-child[data-id=' + id + ']');
+        if (nestedTabName) {
+            const section = nestedTabName.closest(".section");
+            Array.from(nestedTabName.children[0]).forEach(function (eachTab) {
+                eachTab.classList.remove("active");
+            })
+            const firsttab = nestedTabName.children[0].children[0];
+            firsttab.classList.add("active");
+            section.querySelectorAll('.tab-container[data-id]').forEach(function (el, index) {
+                section.querySelector(".tab-name")?.children[0].children[index].classList.remove("active");
+                section.querySelector(".nested-tab-name-child")?.children[0]?.children[index]?.classList.remove("active");
+                el.classList.add("dp-none");
+                el.classList.remove("active");
+            })
+            section.querySelector('.tab-container[data-id=' + firsttab.id + ']').classList.add("active")
+            section.querySelector('.tab-container[data-id=' + firsttab.id + ']').classList.remove("dp-none")
+            section.querySelectorAll(".nested-tab-name-child").forEach(function (el, index) {
+                // section.querySelector(".tab-name").children[0].children[index].classList.remove("active");
+                section.querySelector(".tab-name-nested").children[0].children[0].children[index].classList.remove("active");
+                el.classList.add("dp-none");
+                el.classList.remove("active");
+            })
+            nestedTabName.classList.remove("dp-none");
+            nestedTabName.classList.add("active");
+            currentEl.classList.add("active");
+            currentEl.closest(".carousel-item")?.classList.add("active");
+        } else if (tabContainer) {
             const section = tabContainer.closest(".section");
             section.querySelectorAll(".tab-container").forEach(function (el, index) {
                 // section.querySelector(".tab-name").children[0].children[index].classList.remove("active");
-                section.querySelector(".tab-name").children[0].children[index].classList.remove("active");
+                section.querySelector(".tab-name")?.children[0].children[index].classList.remove("active");
+                section.querySelector(".nested-tab-name-child")?.children[0]?.children[index]?.classList.remove("active");
                 el.classList.add("dp-none");
                 el.classList.remove("active");
             })

diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -117,8 +117,8 @@ export function currenyCommaSeperation(x) {
 }
 
 export function createCarousle(block, prevButton, nextButton) {
-  block.parentElement.append(prevButton);
-  block.parentElement.append(nextButton);
+  block.parentElement ? block.parentElement.append(prevButton) : block.append(prevButton);
+  block.parentElement ? block.parentElement.append(nextButton) : block.append(nextButton);
   prevButton.addEventListener("click", prevSlide);
   nextButton.addEventListener("click", nextSlide);
   let currentSlide = 0;