gzth/collapsible_notebook/static/src/js/collapsible_notebook.js

// 可折叠Notebook功能
console.log('Collapsible Notebook JS loaded');

/**
 * 页面加载完成后自动初始化所有可折叠notebook
 */
function initCollapsibleNotebooks() {
    console.log('Initializing collapsible notebooks...');
    
    // 初始化现有的notebook
    const existingNotebooks = document.querySelectorAll('.o_collapsible_notebook');
    console.log('Found notebooks:', existingNotebooks.length);
    
    if (existingNotebooks.length === 0) {
        console.log('No notebooks found, retrying in 500ms...');
        setTimeout(initCollapsibleNotebooks, 500);
        return;
    }
    
    existingNotebooks.forEach((notebook, index) => {
        console.log(`Processing notebook ${index}:`, notebook);
        if (!notebook.hasAttribute('data-collapsible-initialized')) {
            initializeNotebook(notebook);
            notebook.setAttribute('data-collapsible-initialized', 'true');
        }
    });
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM Content Loaded');
    initCollapsibleNotebooks();
});

// 如果DOM已经加载完成，立即初始化
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initCollapsibleNotebooks);
} else {
    initCollapsibleNotebooks();
}

// 使用MutationObserver来监听DOM变化，确保在动态加载的内容中也能工作
function setupMutationObserver() {
    if (!document.body) {
        console.log('Document body not ready, retrying...');
        setTimeout(setupMutationObserver, 100);
        return;
    }
    
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList') {
                mutation.addedNodes.forEach(function(node) {
                    if (node.nodeType === Node.ELEMENT_NODE) {
                        const notebooks = node.querySelectorAll ? 
                            node.querySelectorAll('.o_collapsible_notebook') : 
                            (node.classList && node.classList.contains('o_collapsible_notebook') ? [node] : []);
                        
                        notebooks.forEach(notebook => {
                            if (!notebook.hasAttribute('data-collapsible-initialized')) {
                                console.log('New notebook detected:', notebook);
                                initializeNotebook(notebook);
                                notebook.setAttribute('data-collapsible-initialized', 'true');
                            }
                        });
                    }
                });
            }
        });
    });

    // 开始观察
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
    
    console.log('MutationObserver setup complete');
}

// 设置MutationObserver
setupMutationObserver();

/**
 * 初始化单个notebook
 */
function initializeNotebook(notebook) {
    console.log('Initializing notebook:', notebook);
    // 为整个notebook添加折叠/展开按钮
    addNotebookCollapseButton(notebook);
}

/**
 * 为整个notebook添加折叠/展开按钮
 */
function addNotebookCollapseButton(notebook) {
    console.log('Adding collapse button to notebook:', notebook);
    console.log('Notebook HTML structure:', notebook.outerHTML);
    
    // 检查是否已经添加了按钮
    if (notebook.querySelector('.o_notebook_collapse_btn')) {
        console.log('Collapse button already exists');
        return;
    }
    
    // 创建notebook折叠按钮
    const notebookCollapseBtn = document.createElement('div');
    notebookCollapseBtn.className = 'o_notebook_collapse_btn';
    notebookCollapseBtn.innerHTML = '<i class="fa fa-chevron-up"></i>';
    notebookCollapseBtn.title = '点击折叠/展开整个Notebook';
    
    console.log('Created collapse button:', notebookCollapseBtn);
    
    // 添加点击事件
    notebookCollapseBtn.addEventListener('click', (e) => {
        console.log('Collapse button clicked');
        e.preventDefault();
        e.stopPropagation();
        toggleNotebook(notebook, notebookCollapseBtn);
    });
    
    // 将按钮添加到notebook的nav-tabs前面（与页面标签并排）
    try {
        const navTabs = notebook.querySelector('.nav-tabs');
        if (navTabs && navTabs.parentNode) {
            navTabs.parentNode.insertBefore(notebookCollapseBtn, navTabs);
            console.log('Button inserted successfully before nav-tabs');
        } else if (notebook.parentNode) {
            notebook.parentNode.insertBefore(notebookCollapseBtn, notebook);
            console.log('Button inserted successfully before notebook (fallback)');
        } else {
            notebook.insertBefore(notebookCollapseBtn, notebook.firstChild);
            console.log('Button inserted successfully inside notebook (fallback)');
        }
    } catch (error) {
        console.error('Error inserting button:', error);
    }
    
    // 恢复折叠状态
    restoreNotebookState(notebook, notebookCollapseBtn);
}

/**
 * 从localStorage恢复notebook折叠状态
 */
function restoreNotebookState(notebook, button) {
    try {
        const notebookId = notebook.getAttribute('id') || 'default_notebook';
        const savedState = localStorage.getItem(`odoo_notebook_collapsed_${notebookId}`);
        
        if (savedState === 'true') {
            console.log('Restoring collapsed state for notebook:', notebookId);
            notebook.classList.add('o_notebook_collapsed');
            button.innerHTML = '<i class="fa fa-chevron-down"></i>';
            button.classList.add('o_collapsed');
            
            // 直接设置内容隐藏
            const tabContent = notebook.querySelector('.tab-content');
            if (tabContent) {
                tabContent.style.display = 'none';
            }
        } else {
            console.log('Notebook starts in expanded state:', notebookId);
        }
    } catch (error) {
        console.error('Error restoring notebook state:', error);
    }
}

/**
 * 切换整个notebook的折叠/展开状态
 */
function toggleNotebook(notebook, button) {
    console.log('Toggling notebook:', notebook);
    console.log('Notebook classes before:', notebook.className);
    
    const isCollapsed = notebook.classList.contains('o_notebook_collapsed');
    console.log('Current state - isCollapsed:', isCollapsed);
    
    // 查找tab-content元素
    const tabContent = notebook.querySelector('.tab-content');
    console.log('Found tab-content:', tabContent);
    
    if (isCollapsed) {
        // 展开notebook
        console.log('Expanding notebook');
        notebook.classList.remove('o_notebook_collapsed');
        button.innerHTML = '<i class="fa fa-chevron-up"></i>';
        button.classList.remove('o_collapsed');
        
        if (tabContent) {
            tabContent.style.display = 'block';
            console.log('Set tab-content display to block');
        }
    } else {
        // 折叠notebook
        console.log('Collapsing notebook');
        notebook.classList.add('o_notebook_collapsed');
        button.innerHTML = '<i class="fa fa-chevron-down"></i>';
        button.classList.add('o_collapsed');
        
        if (tabContent) {
            tabContent.style.display = 'none';
            console.log('Set tab-content display to none');
        }
    }
    
    console.log('Notebook classes after:', notebook.className);
    
    // 保存状态
    const notebookId = notebook.getAttribute('id') || 'default_notebook';
    localStorage.setItem(`odoo_notebook_collapsed_${notebookId}`, isCollapsed ? 'false' : 'true');
    console.log('State saved to localStorage');
}