ali
/
custom_subtabs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added sub-subtabs with poor visual

This commit is contained in:
Awey01 2024-12-03 11:26:02 +00:00
parent 461d6424f0
commit 1a0be36b24
2 changed files with 89 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
custom_subtabs/public/css/custom_subtabs.css
View File

@ -1,14 +1,25 @@
/* Убираем анимацию скрытия Bootstrap */
.tab-pane.fade:not(.show) {
opacity: 0 !important; /* Только убираем анимацию, не меняем display */
/* Main tab styling */
.nav-item.active {
border-bottom: 2px solid #171717 !important;
font-weight: bold !important;
color: #171717 !important;
}
/* Скрываем все вкладки, кроме активной */
.tab-pane {
display: none;
/* Subtab styling */
.sub-tab.active {
border-bottom: 2px solid #171717 !important;
font-weight: bold !important;
color: #171717 !important;
}
/* Показываем активную вкладку */
.tab-pane.active {
display: block !important;
/* Sub-subtab styling */
.sub-sub-tab.active {
border-bottom: 2px solid #171717 !important;
font-weight: bold !important;
color: #171717 !important;
}
/* Remove double line */
.nav-item, .sub-tab, .sub-sub-tab {
border-bottom: none !important;
}

151
custom_subtabs/public/js/custom_subtabs.js
View File

@ -1,9 +1,7 @@
frappe.ui.form.Layout.prototype.setup_tab_events = function () {
console.log("Setting up tab events...");
console.log("Initializing tab system...");
setTimeout(() => {
console.log("Initializing tabs...");
const tabs = this.wrapper.find("ul.form-tabs > li.nav-item");
console.log(`Found ${tabs.length} main tabs.`);
@ -11,18 +9,18 @@ frappe.ui.form.Layout.prototype.setup_tab_events = function () {
const hierarchy = frappe.boot.tab_hierarchy[doctype];
if (!hierarchy) {
console.warn(`No tab hierarchy found for Doctype: ${doctype}`);
console.warn(`No hierarchy found for Doctype: ${doctype}`);
return;
}
const subtabs = hierarchy.subtabs || {};
console.log("Subtabs:", subtabs);
// Process subtabs and parent tabs
// Process subtabs
tabs.each((index, tab) => {
const tabLabel = $(tab).text().trim();
console.log(`Processing subtabs for main tab: '${tabLabel}'`);
if (subtabs[tabLabel]) {
console.log(`Processing subtabs for parent tab: '${tabLabel}'`);
let subtabContainer = $(tab).find(".sub-tab-container");
if (!subtabContainer.length) {
subtabContainer = $("<ul class='sub-tab-container nav'></ul>");
@ -36,126 +34,99 @@ frappe.ui.form.Layout.prototype.setup_tab_events = function () {
const subtabClone = subtabElement.clone();
subtabClone.addClass("sub-tab").find("a").removeAttr("href");
subtabContainer.append(subtabClone);
// Удаляем лишние классы и стили у субтаба
subtabElement.remove();
console.log(`Processed subtab: '${subtab}' under main tab '${tabLabel}'`);
// Process sub-subtabs
if (subtabs[subtab]) {
let subsubtabContainer = subtabClone.find(".sub-sub-tab-container");
if (!subsubtabContainer.length) {
subsubtabContainer = $("<ul class='sub-sub-tab-container nav'></ul>");
subtabClone.append(subsubtabContainer);
}
subtabs[subtab].forEach((subsubtab) => {
const subsubtabElement = tabs.filter((_, el) => $(el).text().trim() === subsubtab);
if (subsubtabElement.length) {
const subsubtabClone = subsubtabElement.clone();
subsubtabClone.addClass("sub-sub-tab").find("a").removeAttr("href");
subsubtabContainer.append(subsubtabClone);
subsubtabElement.remove();
console.log(`Processed sub-subtab: '${subsubtab}' under subtab '${subtab}'`);
} else {
console.warn(`Sub-subtab element not found for '${subsubtab}'`);
}
});
}
} else {
console.warn(`Subtab element not found for '${subtab}'`);
}
});
}
});
// Handle main tab clicks
// Handle tab activation
$(".nav-item").on("click", function () {
const clickedTab = $(this);
const tabId = clickedTab.find("a").attr("aria-controls");
console.log(`Activating main tab: '${clickedTab.text().trim()}' (ID: ${tabId})`);
// Hide all tabs
$(".form-tab-content > .tab-pane").each(function () {
const pane = $(this);
pane.removeClass("active show").css("display", "none").addClass("tab-pane fade");
});
// Activate the clicked tab
$(".form-tab-content > .tab-pane").removeClass("active show").css("display", "none");
const tabContent = document.querySelector(`#${tabId}`);
if (tabContent) {
tabContent.style.display = "block";
tabContent.classList.add("active", "show");
$(tabContent).addClass("active show").css("display", "block");
} else {
console.warn(`Tab content not found for ID: ${tabId}`);
}
$(".nav-item").removeClass("active");
clickedTab.addClass("active");
});
// Handle subtab clicks
// Handle subtab activation
$(".sub-tab").on("click", function (event) {
event.stopPropagation(); // Предотвращаем срабатывание событий родительских вкладок
event.stopPropagation();
const clickedSubtab = $(this);
const subtabId = clickedSubtab.find("a").attr("aria-controls");
const subtabName = clickedSubtab.text().trim();
console.log(`Activating subtab: '${subtabName}' (ID: ${subtabId})`);
console.log(`Activating subtab: '${clickedSubtab.text().trim()}' (ID: ${subtabId})`);
// Найти имя родительской вкладки через объект иерархии
let parentTabName = null;
Object.keys(subtabs).forEach((parent) => {
if (subtabs[parent].includes(subtabName)) {
parentTabName = parent;
console.log(`Found parent tab for '${subtabName}': '${parentTabName}'`);
}
});
if (!parentTabName) {
console.warn(`Parent tab not found for subtab: '${subtabName}'`);
return;
}
// Получить ID родительской вкладки через href
const parentTabId = $(`ul.form-tabs a:contains('${parentTabName}')`).attr("aria-controls");
if (!parentTabId) {
console.warn(`Parent tab ID not found for: '${parentTabName}'`);
return;
} else {
console.log(`Parent tab ID for '${parentTabName}': ${parentTabId}`);
}
// Обработать родительскую вкладку
const parentTabContent = document.querySelector(`#${parentTabId}`);
if (parentTabContent) {
console.log(`Parent tab content found:`, parentTabContent);
// Убираем классы и стили, чтобы показать родительскую вкладку
parentTabContent.style.display = "block";
parentTabContent.classList.add("active", "show");
parentTabContent.classList.remove("tab-pane", "fade");
console.log(`Parent tab '${parentTabName}' is now visible.`);
} else {
console.warn(`Parent tab content not found for ID: ${parentTabId}`);
}
// Активировать текущую субвкладку
$(".form-tab-content > .tab-pane").removeClass("active show").css("display", "none");
const subtabContent = document.querySelector(`#${subtabId}`);
if (subtabContent) {
console.log(`Subtab content found:`, subtabContent);
// Убираем классы и стили, чтобы показать субвкладку
subtabContent.style.display = "block";
subtabContent.classList.add("active", "show");
subtabContent.classList.remove("tab-pane", "fade");
console.log(`Subtab '${subtabName}' content activated.`);
$(subtabContent).addClass("active show").css("display", "block");
} else {
console.warn(`Subtab content not found for ID: ${subtabId}`);
}
$(".sub-tab").removeClass("active");
clickedSubtab.addClass("active");
});
// Скрыть все другие вкладки, кроме текущей субвкладки и родительской
$(".form-tab-content > .tab-pane").each(function () {
const pane = $(this);
if (pane.attr("id") !== subtabId && pane.attr("id") !== parentTabId) {
console.log(`Hiding tab content for ID: ${pane.attr("id")}`);
// Handle sub-subtab activation
$(".sub-sub-tab").on("click", function (event) {
event.stopPropagation();
pane.removeClass("active show").css("display", "none").addClass("tab-pane fade");
const clickedSubsubtab = $(this);
const subsubtabId = clickedSubsubtab.find("a").attr("aria-controls");
console.log(`Activating sub-subtab: '${clickedSubsubtab.text().trim()}' (ID: ${subsubtabId})`);
$(".form-tab-content > .tab-pane").removeClass("active show").css("display", "none");
const subsubtabContent = document.querySelector(`#${subsubtabId}`);
if (subsubtabContent) {
$(subsubtabContent).addClass("active show").css("display", "block");
} else {
console.warn(`Sub-subtab content not found for ID: ${subsubtabId}`);
}
});
});
// Reset subtabs when switching to another main tab
$(".nav-item").on("click", function () {
$(".sub-tab").each(function () {
const subtabId = $(this).find("a").attr("aria-controls");
const subtabPane = document.querySelector(`#${subtabId}`);
if (subtabPane) {
subtabPane.style.display = "none";
subtabPane.classList.add("tab-pane", "fade");
}
$(".sub-sub-tab").removeClass("active");
clickedSubsubtab.addClass("active");
});
});
}, 500); // Задержка для загрузки DOM
}, 500);
};