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

Compare commits

merge into: ali:main
Branches Tags
ali:main
ali:v16
...
pull from: ali:v16
Branches Tags
ali:main
ali:v16

1 Commits
main ... v16

Author SHA1 Message Date
Ali 2056a43cce new branch for frappe v16 2025-07-21 12:28:31 +04:00
2 changed files with 168 additions and 86 deletions
Show Stats Expand all files Collapse all files

79
custom_subtabs/public/css/custom_subtabs.css
View File

@ -1,18 +1,25 @@
/* Основной контейнер субтабов */
.sub-tab-container {
margin: 0 !important;
padding: 0 !important;
display: flex !important;
justify-content: flex-start !important;
border-bottom: 1px solid #ddd !important;
border-bottom: 1px solid #dee2e6 !important;
background-color: #fff !important;
position: relative !important;
z-index: 1 !important;
}
/* Отдельные субтабы */
.sub-tab-container .sub-tab {
margin: 0 !important;
background: none !important;
border: none !important;
padding: 0 !important;
position: relative !important;
}
/* Ссылки в субтабах */
.sub-tab-container .sub-tab a {
text-decoration: none !important;
display: block !important;
@ -24,16 +31,74 @@
margin: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
transition: color 0.15s ease-in-out !important;
position: relative !important;
}
.sub-tab-container .sub-tab a:hover {
color: #000 !important; /* Цвет текста при наведении */
color: #000 !important; /* Только изменение цвета, без фона */
}
/* Активный субтаб */
.sub-tab-container .sub-tab.active a {
color: #000 !important; /* Черный текст для активного таба */
font-weight: 600 !important; /* Жирный шрифт */
border-bottom: 1px solid #000 !important; /* Черная активная полоска снизу */
background-color: transparent !important; /* Без фона */
border-radius: 0 !important; /* Без скруглений */
color: #000 !important;
font-weight: 600 !important;
border-bottom: 2px solid #000 !important;
background-color: transparent !important;
border-radius: 0 !important;
margin-bottom: -1px !important; /* Перекрываем нижнюю границу контейнера */
}
/* Интеграция с основными табами ERPNext */
.form-tabs + .sub-tab-container {
border-top: none !important;
margin-top: -1px !important;
}
/* Убираем лишние отступы для форм с субтабами */
.sub-tab-container + .form-layout,
.sub-tab-container ~ .form-layout {
margin-top: 0 !important;
}
/* Адаптивность */
@media (max-width: 768px) {
.sub-tab-container {
flex-wrap: wrap !important;
}
.sub-tab-container .sub-tab a {
padding: 8px 12px !important;
font-size: 13px !important;
}
}
/* Убираем конфликтующие стили Bootstrap */
.sub-tab-container .nav-link {
padding: 0 !important;
border: none !important;
background: none !important;
margin: 0 !important;
border-radius: 0 !important;
}
/* Плавное появление/исчезание */
.sub-tab-container {
opacity: 1 !important;
transition: opacity 0.2s ease-in-out !important;
}
.sub-tab-container[style*="display: none"] {
opacity: 0 !important;
}
/* Убираем лишние границы и тени */
.sub-tab-container .sub-tab,
.sub-tab-container .sub-tab a,
.sub-tab-container .nav-item {
box-shadow: none !important;
border-left: none !important;
border-right: none !important;
border-top: none !important;
}

175
custom_subtabs/public/js/custom_subtabs.js
View File

@ -1,11 +1,7 @@
frappe.ui.form.Layout.prototype.setup_tab_events = function () {
setTimeout(() => {
const tabs = this.wrapper.find("ul.form-tabs > li.nav-item");
// Получение текущего Doctype в нижнем регистре
const currentDoctype = cur_frm.doctype;
const hierarchy = frappe.boot.tab_hierarchy[currentDoctype];
if (!hierarchy) {
@ -30,49 +26,6 @@ frappe.ui.form.Layout.prototype.setup_tab_events = function () {
});
}
// Function to handle showing/hiding subtabs and sub-subtabs
function findParentAndShowSubtabs(currentTabName) {
if (!currentTabName) return;
let parentTabName = null;
// Find the parent tab and its subtabs
for (const [mainTab, subtabsArray] of Object.entries(subtabs)) {
if (subtabsArray.includes(currentTabName)) {
parentTabName = mainTab;
break;
}
}
if (!parentTabName) {
return;
}
// Show the subtabs for the parent tab
const parentSubtabs = subtabs[parentTabName] || [];
parentSubtabs.forEach((subtabName) => {
const subtabElement = $(`.nav-item:contains(${subtabName})`);
const subtabContentId = `${currentDoctype.toLowerCase().replace(/\s+/g, '-')}-${subtabName.toLowerCase().replace(/\s+/g, '_')}_tab`;
const subtabContent = $(`#${subtabContentId}`);
if (subtabElement.length) {
subtabElement.css("display", "block");
// If the current tab is the subtab, show its content
if (subtabName === currentTabName) {
subtabContent.addClass("active show").css("display", "block");
}
}
});
// Show the parent tab's content
const parentTabContentId = `${currentDoctype.toLowerCase().replace(/\s+/g, '-')}-${parentTabName.toLowerCase().replace(/\s+/g, '_')}_tab`;
showTabContent(parentTabContentId);
// Recursively handle the parent tab
findParentAndShowSubtabs(parentTabName);
}
// Process subtabs
tabs.each((index, tab) => {
const tabLabel = $(tab).text().trim();
@ -85,20 +38,44 @@ frappe.ui.form.Layout.prototype.setup_tab_events = function () {
return;
}
const sectionContainer = tabContent.find(".row.form-section.card-section.visible-section");
const possibleSelectors = [
".row.form-section.card-section.visible-section",
".form-section",
".row.form-section",
".card-section",
".visible-section",
".row",
".section",
"div[class*='section']",
"div[class*='form']"
];
let sectionContainer = null;
possibleSelectors.forEach(selector => {
const found = tabContent.find(selector);
if (found.length > 0 && !sectionContainer) {
sectionContainer = found.first();
}
});
if (!sectionContainer.length) {
return;
if (!sectionContainer || sectionContainer.length === 0) {
sectionContainer = tabContent;
}
let subtabContainer = sectionContainer.find('.sub-tab-container');
// Ищем контейнер субтабов рядом с основными табами, а не внутри контента
const mainTabsContainer = this.wrapper.find("ul.form-tabs");
let subtabContainer = mainTabsContainer.siblings('.sub-tab-container[data-parent-id="' + tabContentId + '"]');
if (!subtabContainer.length) {
subtabContainer = $("<div class='sub-tab-container nav' data-parent-id='" + tabContentId + "'></div>");
sectionContainer.append(subtabContainer);
// Создаем контейнер субтабов после основных табов
subtabContainer = $("<div class='sub-tab-container nav' data-parent-id='" + tabContentId + "' style='display: none;'></div>");
mainTabsContainer.after(subtabContainer);
}
subtabs[tabLabel].forEach((subtab) => {
const subtabElement = tabs.filter((_, el) => $(el).text().trim() === subtab);
if (subtabElement.length) {
const subtabClone = subtabElement.clone();
subtabClone.addClass("sub-tab");
@ -112,8 +89,8 @@ frappe.ui.form.Layout.prototype.setup_tab_events = function () {
}
});
// Handle main tab activation
$(".nav-item").on("click", function () {
// Handle main tab activation (исключаем субтабы)
$(".nav-item:not(.sub-tab)").off("click.subtabs").on("click.subtabs", function () {
const clickedTab = $(this);
const tabId = clickedTab.find("a").attr("aria-controls");
@ -127,51 +104,91 @@ frappe.ui.form.Layout.prototype.setup_tab_events = function () {
$(".nav-item").removeClass("active");
clickedTab.addClass("active");
// Скрываем все контейнеры субтабов
$(".sub-tab-container").css("display", "none");
// Показываем контейнер субтабов для активного таба
$(".sub-tab-container").each(function () {
const containerParentId = $(this).attr("data-parent-id");
if (containerParentId === tabId) {
$(this).find(".sub-tab").css("display", "block");
} else {
$(this).find(".sub-tab").css("display", "none");
$(this).css("display", "flex");
$(this).find(".sub-tab").removeClass("active");
}
});
});
// Handle subtab activation
$(".sub-tab").on("click", function (event) {
// Handle subtab activation (упрощенная логика)
$(document).off("click.subtabs", ".sub-tab").on("click.subtabs", ".sub-tab", function (event) {
event.stopPropagation();
const clickedSubtab = $(this);
const subtabId = clickedSubtab.find("a").attr("aria-controls");
const subtabName = clickedSubtab.text().trim();
const parentTabId = clickedSubtab.attr("data-parent-id");
$(".sub-tab").removeClass("active");
// Делаем активным только кликнутый субтаб в этом контейнере
clickedSubtab.siblings(".sub-tab").removeClass("active");
clickedSubtab.addClass("active");
// Скрываем все контенты табов
hideAllTabContents();
// Показываем контент субтаба
const subtabContent = $(`#${subtabId}`);
if (subtabContent.length) {
subtabContent.addClass("active show").css("display", "block");
}
findParentAndShowSubtabs(subtabName);
// Оставляем родительский таб активным и видимым
$(".nav-item:not(.sub-tab)").removeClass("active");
const parentTab = $(`.nav-item:not(.sub-tab) a[aria-controls="${parentTabId}"]`).closest('.nav-item');
if (parentTab.length) {
parentTab.addClass("active");
}
// Убеждаемся что контейнер субтабов остается видимым
const subtabContainer = clickedSubtab.closest('.sub-tab-container');
if (subtabContainer.length) {
subtabContainer.css("display", "flex");
}
});
// Debug log
setInterval(() => {
const activeMainTab = $(".nav-item.active").text().trim();
const activeSubTabs = $(".sub-tab.active")
.map(function () {
return $(this).text().trim();
})
.get();
const visibleContent = $(".form-tab-content > .tab-pane:visible")
.map(function () {
return $(this).attr("id");
})
.get();
}, 2000);
// Проверяем активную вкладку при загрузке страницы
let activeTab = $(".nav-item:not(.sub-tab).active");
// Способ 2: Поиск по активному контенту
if (!activeTab.length) {
const activeContent = $(".form-tab-content > .tab-pane.active");
if (activeContent.length) {
const activeContentId = activeContent.attr('id');
activeTab = $(`.nav-item a[aria-controls="${activeContentId}"]`).closest('.nav-item');
}
}
// Способ 3: Поиск по показанному контенту
if (!activeTab.length) {
const visibleContent = $(".form-tab-content > .tab-pane:visible");
if (visibleContent.length) {
const visibleContentId = visibleContent.first().attr('id');
activeTab = $(`.nav-item a[aria-controls="${visibleContentId}"]`).closest('.nav-item');
}
}
if (activeTab.length) {
const activeTabId = activeTab.find("a").attr("aria-controls");
// Проверяем есть ли субтабы у активной вкладки
$(".sub-tab-container").each(function () {
const containerParentId = $(this).attr("data-parent-id");
if (containerParentId === activeTabId) {
$(this).css("display", "flex");
$(this).find(".sub-tab").removeClass("active");
}
});
}
}, 500);
};
};