feat: implement dynamic training course tab system and modular PDF data migration scripts

2026-07-27 17:00:43 +07:00
parent 54e420499f
commit 1a8726285c
98 changed files with 8041 additions and 3949 deletions
@@ -58,8 +58,14 @@
                    var data = JSON.parse(rawData);
                    var html = "";
                    if (data.blocks) {
-                        data.blocks.forEach(function(block) {
-                            switch(block.type) {
+                        
+        var inTabs = false;
+        var tabsGroup = null;
+
+        function renderSingleBlock(block) {
+            var html = "";
+            switch(block.type) {
+
                                case "header":
                                    html += "<h" + block.data.level + ">" + block.data.text + "</h" + block.data.level + ">";
                                    break;
@@ -80,10 +86,115 @@
                                case "quote":
                                    html += "<blockquote>" + block.data.text + " <cite>" + block.data.caption + "</cite></blockquote>";
                                    break;
-                                default:
-                                    console.log("Unknown block type", block.type);
-                            }
-                        });
+                                case "raw":
+                                    html += block.data.html;
+                                    break;
+                                
+                case "tabStart":
+                case "tabEnd":
+                    break;
+                default:
+                    console.log("Unknown block type", block.type);
+            }
+            return html;
+        }
+
+        var blockList = data && data.blocks ? data.blocks : (typeof blocks !== 'undefined' ? blocks : []);
+        var finalHtml = "";
+        
+        blockList.forEach(function(block) {
+            if (block.type === 'tabStart') {
+                if (!inTabs) {
+                    inTabs = true;
+                    tabsGroup = { tabs: [] };
+                }
+                tabsGroup.tabs.push({
+                    title: block.data.title || 'Tab',
+                    contentHtml: ''
+                });
+                return;
+            }
+            
+            if (block.type === 'tabEnd') {
+                if (inTabs && tabsGroup) {
+                    inTabs = false;
+                    var groupHtml = '<div class="custom-tabs-wrapper">';
+                    groupHtml += '<div class="custom-tabs-nav-container"><div class="tabs-container">';
+                    tabsGroup.tabs.forEach(function(tab, index) {
+                        var activeClass = (index === 0) ? 'active' : '';
+                        groupHtml += '<button class="dao-tao-tab-btn custom-tab-btn ' + activeClass + '" data-tab-idx="' + index + '">' + tab.title + '</button>';
+                    });
+                    groupHtml += '</div>';
+
+                    tabsGroup.tabs.forEach(function(tab, index) {
+                        var displayStyle = (index === 0) ? 'block' : 'none';
+                        groupHtml += '<div class="dao-tao-tab-panel custom-tab-panel" data-tab-idx="' + index + '" style="display: ' + displayStyle + ';">';
+                        groupHtml += tab.contentHtml;
+                        groupHtml += '</div>';
+                    });
+                    groupHtml += '</div>';
+                    finalHtml += groupHtml;
+                    tabsGroup = null;
+                }
+                return;
+            }
+
+            var blockHtml = renderSingleBlock(block);
+            
+            if (inTabs && tabsGroup && tabsGroup.tabs.length > 0) {
+                tabsGroup.tabs[tabsGroup.tabs.length - 1].contentHtml += blockHtml;
+            } else {
+                finalHtml += blockHtml;
+            }
+        });
+
+        if (inTabs && tabsGroup) {
+            // Close unclosed tabs at the end
+            var groupHtml = '<div class="custom-tabs-wrapper">';
+            groupHtml += '<div class="custom-tabs-nav-container"><div class="tabs-container">';
+            tabsGroup.tabs.forEach(function(tab, index) {
+                var activeClass = (index === 0) ? 'active' : '';
+                groupHtml += '<button class="dao-tao-tab-btn custom-tab-btn ' + activeClass + '" data-tab-idx="' + index + '">' + tab.title + '</button>';
+            });
+            groupHtml += '</div>';
+
+            tabsGroup.tabs.forEach(function(tab, index) {
+                var displayStyle = (index === 0) ? 'block' : 'none';
+                groupHtml += '<div class="dao-tao-tab-panel custom-tab-panel" data-tab-idx="' + index + '" style="display: ' + displayStyle + ';">';
+                groupHtml += tab.contentHtml;
+                groupHtml += '</div>';
+            });
+            groupHtml += '</div>';
+            finalHtml += groupHtml;
+        }
+
+        html = finalHtml;
+
+      document.addEventListener('click', function(e) {
+        if (e.target.classList.contains('custom-tab-btn')) {
+          var btn = e.target;
+          var container = btn.closest('.custom-tabs-wrapper');
+          if (!container) return;
+          var idx = btn.getAttribute('data-tab-idx');
+          
+          container.querySelectorAll('.custom-tab-btn').forEach(function(b) {
+            b.classList.remove('active');
+            
+            
+          });
+          btn.classList.add('active');
+          
+          
+          
+          container.querySelectorAll('.custom-tab-panel').forEach(function(p) {
+            p.style.display = 'none';
+          });
+          var activePanel = container.querySelector('.custom-tab-panel[data-tab-idx="' + idx + '"]');
+          if (activePanel) activePanel.style.display = 'block';
+        }
+      });
+ // Assign back to whatever variable the original script used.
+
                    }
                    parsedContainer.innerHTML = html;
                } catch(e) {