refactor: clean up dao-tao-detail.html styling and implement course-info-widget fragment

2026-07-27 20:49:53 +07:00
parent 1a8726285c
commit bc27a9ea9c
12 changed files with 902 additions and 987 deletions
@@ -0,0 +1,103 @@
+import os
+import re
+
+script_replacement = """        <!-- Content rendering and dynamic tabs parsing -->
+        <script>
+            document.addEventListener("DOMContentLoaded", function() {
+                var rawData = document.getElementById("postContentRaw").textContent;
+                var parsedContainer = document.getElementById("postContentParsed");
+                
+                // Content is now HTML
+                parsedContainer.innerHTML = rawData;
+                
+                // Parse dynamic tabs from HTML (migrated from Editor.js)
+                var tabStarts = Array.from(parsedContainer.querySelectorAll('h3.dynamic-tab-start'));
+                if (tabStarts.length > 0) {
+                    var tabsGroup = [];
+                    var wrapper = document.createElement('div');
+                    wrapper.className = 'custom-tabs-wrapper';
+                    
+                    var navContainer = document.createElement('div');
+                    navContainer.className = 'custom-tabs-nav-container';
+                    var tabsContainer = document.createElement('div');
+                    tabsContainer.className = 'tabs-container';
+                    navContainer.appendChild(tabsContainer);
+                    wrapper.appendChild(navContainer);
+                    
+                    var firstTabStart = tabStarts[0];
+                    var parentNode = firstTabStart.parentNode;
+                    
+                    // Collect all elements into tabs
+                    tabStarts.forEach(function(startEl, index) {
+                        var tabTitle = startEl.textContent;
+                        var btn = document.createElement('button');
+                        btn.className = 'dao-tao-tab-btn custom-tab-btn' + (index === 0 ? ' active' : '');
+                        btn.setAttribute('data-tab-idx', index);
+                        btn.textContent = tabTitle;
+                        tabsContainer.appendChild(btn);
+                        
+                        var panel = document.createElement('div');
+                        panel.className = 'dao-tao-tab-panel custom-tab-panel';
+                        panel.setAttribute('data-tab-idx', index);
+                        panel.style.display = (index === 0) ? 'block' : 'none';
+                        
+                        var currentEl = startEl.nextElementSibling;
+                        while (currentEl && !currentEl.classList.contains('dynamic-tab-start') && !currentEl.classList.contains('dynamic-tab-end')) {
+                            var nextEl = currentEl.nextElementSibling;
+                            panel.appendChild(currentEl);
+                            currentEl = nextEl;
+                        }
+                        
+                        // Remove the dynamic-tab-end if present
+                        if (currentEl && currentEl.classList.contains('dynamic-tab-end')) {
+                            currentEl.parentNode.removeChild(currentEl);
+                        }
+                        
+                        wrapper.appendChild(panel);
+                        startEl.parentNode.removeChild(startEl);
+                    });
+                    
+                    parentNode.appendChild(wrapper);
+                    
+                    // Tab click listener
+                    wrapper.addEventListener('click', function(e) {
+                        if (e.target.classList.contains('custom-tab-btn')) {
+                            var btn = e.target;
+                            var idx = btn.getAttribute('data-tab-idx');
+                            
+                            wrapper.querySelectorAll('.custom-tab-btn').forEach(function(b) {
+                                b.classList.remove('active');
+                            });
+                            btn.classList.add('active');
+                            
+                            wrapper.querySelectorAll('.custom-tab-panel').forEach(function(p) {
+                                p.style.display = 'none';
+                            });
+                            var activePanel = wrapper.querySelector('.custom-tab-panel[data-tab-idx="' + idx + '"]');
+                            if (activePanel) activePanel.style.display = 'block';
+                        }
+                    });
+                }
+            });
+        </script>"""
+
+files = [
+    'src/main/resources/templates/posts/full-width.html',
+    'src/main/resources/templates/posts/livestream.html',
+    'src/main/resources/templates/posts/sidebar.html'
+]
+
+for file_path in files:
+    with open(file_path, 'r') as f:
+        content = f.read()
+
+    # Regex to match the old Editor.js script block
+    pattern = re.compile(r'<!-- Include Editor\.js parser.*?<\/script>', re.DOTALL)
+    
+    new_content = pattern.sub(script_replacement, content)
+    
+    with open(file_path, 'w') as f:
+        f.write(new_content)
+    
+    print(f"Updated {file_path}")
+