☰

TTV Auto Upload

Tự động điền form đăng chương trên tangthuvien.net với tính năng nâng cao

当前为 2025-03-08 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         TTV Auto Upload
  3. // @namespace    http://tampermonkey.net/
  4. // @version      3.7
  5. // @description  Tự động điền form đăng chương trên tangthuvien.net với tính năng nâng cao
  6. // @author       HA
  7. // @match        https://tangthuvien.net/dang-chuong/story/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // CSS cho thông báo và control panel
  15.     const style = document.createElement('style');
  16.     style.textContent = `
  17.         .ttv-notification {
  18.             position: fixed;
  19.             top: 20px;
  20.             right: 20px;
  21.             padding: 10px 20px;
  22.             background: #4CAF50;
  23.             color: white;
  24.             border-radius: 4px;
  25.             z-index: 9999;
  26.             display: none;
  27.         }
  28.         .ttv-error {
  29.             background: #f44336;
  30.         }
  31.         .ttv-control-panel {
  32.             position: fixed;
  33.             top: 50px;
  34.             right: 20px;
  35.             background: white;
  36.             padding: 25px;
  37.             border-radius: 12px;
  38.             box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  39.             z-index: 9998;
  40.             width: 500px;
  41.             margin-bottom: 20px;
  42.             transition: all 0.3s ease;
  43.         }
  44.         .ttv-control-panel.minimized {
  45.             width: auto;
  46.             height: auto;
  47.             padding: 10px;
  48.             opacity: 0.8;
  49.             transform: translateX(calc(100% - 40px));
  50.             transition: all 0.3s ease;
  51.         }
  52.         .ttv-control-panel.minimized:hover {
  53.             opacity: 1;
  54.             transform: translateX(0);
  55.         }
  56.         .ttv-control-panel.minimized .ttv-button-group,
  57.         .ttv-control-panel.minimized .ttv-header {
  58.             display: none;
  59.         }
  60.         .ttv-button-group {
  61.             display: flex;
  62.             flex-direction: column;
  63.             gap: 15px;
  64.         }
  65.         .ttv-content-editor {
  66.             width: 100%;
  67.             height: 100px;
  68.             margin: 6px 0;
  69.             padding: 8px;
  70.             border: 1px solid #ddd;
  71.             border-radius: 6px;
  72.             font-size: 13px;
  73.             line-height: 1.4;
  74.             resize: vertical;
  75.             transition: all 0.2s ease;
  76.         }
  77.         .ttv-content-editor:focus {
  78.             border-color: #5bc0de;
  79.             outline: none;
  80.             box-shadow: 0 0 8px rgba(91,192,222,0.2);
  81.         }
  82.         .ttv-preview {
  83.             display: none;
  84.             width: 100%;
  85.             height: 100px;
  86.             margin: 6px 0;
  87.             padding: 8px;
  88.             border: 1px solid #ddd;
  89.             border-radius: 6px;
  90.             font-size: 13px;
  91.             line-height: 1.4;
  92.             overflow-y: auto;
  93.             background: #f9f9f9;
  94.             transition: all 0.2s ease;
  95.         }
  96.         .ttv-heading {
  97.             font-size: 15px;
  98.             color: #555;
  99.             margin: 12px 0;
  100.             display: flex;
  101.             justify-content: space-between;
  102.             align-items: center;
  103.         }
  104.         .ttv-word-count {
  105.             font-size: 12px;
  106.             color: #888;
  107.             padding: 3px 8px;
  108.             background: #f5f5f5;
  109.             border-radius: 4px;
  110.             transition: all 0.2s ease;
  111.         }
  112.         .ttv-chapter-list {
  113.             width: 100%;
  114.             margin: 10px 0;
  115.             max-height: 200px;
  116.             overflow-y: auto;
  117.             border: 1px solid #eee;
  118.             border-radius: 6px;
  119.             padding: 8px;
  120.         }
  121.         .ttv-chapter-item {
  122.             padding: 8px;
  123.             border-bottom: 1px solid #eee;
  124.             cursor: pointer;
  125.             transition: all 0.2s ease;
  126.             line-height: 1.4;
  127.             font-size: 12px;
  128.             color: #666;
  129.         }
  130.         .ttv-chapter-item .chapter-title {
  131.             font-weight: bold;
  132.             margin-bottom: 4px;
  133.         }
  134.         .ttv-chapter-item .chapter-name {
  135.             color: #888;
  136.             padding-left: 10px;
  137.             border-left: 2px solid #ddd;
  138.             margin: 4px 0;
  139.         }
  140.         .ttv-chapter-item .chapter-stats {
  141.             font-size: 11px;
  142.             color: #999;
  143.         }
  144.         .ttv-chapter-item:last-child {
  145.             border-bottom: none;
  146.         }
  147.         .ttv-chapter-item.selected {
  148.             background: #f0f8ff;
  149.             border-left: 2px solid #5bc0de;
  150.         }
  151.         .ttv-control-panel.fullscreen {
  152.             position: fixed;
  153.             top: 0;
  154.             right: 0;
  155.             bottom: 0;
  156.             left: 0;
  157.             width: 100%;
  158.             height: 100%;
  159.             border-radius: 0;
  160.             z-index: 9999;
  161.             padding: 15px;
  162.             display: flex;
  163.             flex-direction: column;
  164.         }
  165.         .ttv-control-panel.fullscreen .ttv-content-editor,
  166.         .ttv-control-panel.fullscreen .ttv-preview {
  167.             height: calc(100vh - 250px);
  168.             margin: 15px 0;
  169.             font-size: 16px;
  170.         }
  171.         .ttv-header {
  172.             margin-bottom: 20px;
  173.             padding-bottom: 15px;
  174.             border-bottom: 2px solid #eee;
  175.             font-weight: bold;
  176.             font-size: 16px;
  177.             color: #444;
  178.             display: flex;
  179.             justify-content: space-between;
  180.             align-items: center;
  181.         }
  182.         button.btn-warning {
  183.             background: #f0ad4e;
  184.             color: white;
  185.             border: none;
  186.             padding: 12px;
  187.             border-radius: 6px;
  188.             width: 100%;
  189.             font-size: 14px;
  190.             transition: all 0.2s ease;
  191.         }
  192.         button.btn-warning:hover {
  193.             background: #ec971f;
  194.             transform: translateY(-1px);
  195.             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  196.         }
  197.         button.ttv-minimize {
  198.             padding: 2px 8px;
  199.             background: none;
  200.             border: none;
  201.             cursor: pointer;
  202.             font-size: 16px;
  203.             color: #666;
  204.             transition: all 0.2s ease;
  205.         }
  206.         button.ttv-minimize:hover {
  207.             color: #333;
  208.         }
  209.     `;
  210.     document.head.appendChild(style);
  211.  
  212.     // Tạo div thông báo
  213.     const notification = document.createElement('div');
  214.     notification.className = 'ttv-notification';
  215.     document.body.appendChild(notification);
  216.  
  217.     // Hiển thị thông báo
  218.     function showNotification(message, isError = false) {
  219.         notification.textContent = message;
  220.         notification.className = 'ttv-notification' + (isError ? ' ttv-error' : '');
  221.         notification.style.display = 'block';
  222.         setTimeout(() => {
  223.             notification.style.display = 'none';
  224.         }, 3000);
  225.     }
  226.  
  227.     // Parse chapters function update
  228.     function parseChapters(content) {
  229.         const lines = content.split('\n');
  230.         const chapters = [];
  231.         let currentChapter = {
  232.             title: '',
  233.             name: '',
  234.             content: []
  235.         };
  236.  
  237.         const chapterPattern = /^\s*Chương\s+\d+:/;
  238.         let previousChapterTitle = '';
  239.  
  240.         // Find chapters with clear markers
  241.         for (let i = 0; i < lines.length; i++) {
  242.             const line = lines[i].trim();
  243.  
  244.             if (chapterPattern.test(line)) {
  245.                 // Check if it's a duplicate header
  246.                 if (line !== previousChapterTitle) {
  247.                     // Log for debug
  248.                     console.log(`Tìm thấy chương mới: ${line}`);
  249.  
  250.                     // If there was a previous chapter, save it
  251.                     if (currentChapter.title && currentChapter.content.length > 0) {
  252.                         chapters.push({...currentChapter});
  253.                         console.log(`Đã lưu chương: ${currentChapter.title}\nTên: ${currentChapter.name}\nSố dòng: ${currentChapter.content.length}`);
  254.                         currentChapter = {title: '', name: '', content: []};
  255.                     }
  256.  
  257.                     // Save current chapter title
  258.                     currentChapter.title = line;
  259.                     // Get chapter name after :
  260.                     let name = line.split(':')[1]?.trim() || '';
  261.                     // Remove punctuation from start and end of chapter name
  262.                     name = name.replace(/^[.,;'"]+|[.,;'"]+$/g, '').trim();
  263.                     currentChapter.name = name;
  264.                     previousChapterTitle = line;
  265.  
  266.                     console.log(`Đang xử lý chương mới:\nTiêu đề: ${line}\nTên chương: ${name}`);
  267.                 } else {
  268.                     console.log(`Bỏ qua tiêu đề trùng lặp: ${line}`);
  269.                 }
  270.             } else {
  271.                 // Save all non-chapter-title content
  272.                 if (line) { // Only add non-empty lines
  273.                     if (currentChapter.title) {
  274.                         currentChapter.content.push(line);
  275.                     }
  276.                 }
  277.             }
  278.         }
  279.  
  280.         // Add the last chapter if exists
  281.         if (currentChapter.title && currentChapter.content.length > 0) {
  282.             chapters.push({...currentChapter});
  283.         }
  284.  
  285.         // Display chapters and auto fill forms
  286.         if (chapters.length > 0) {
  287.             displayChapters(chapters);
  288.             // Auto fill forms
  289.             setTimeout(() => {
  290.                 try {
  291.                     transferContent();
  292.                 } catch (error) {
  293.                     console.error('Lỗi khi tự động điền form:', error);
  294.                     showNotification('Có lỗi xảy ra khi tự động điền form!', true);
  295.                 }
  296.             }, 1000);
  297.         }
  298.  
  299.         console.log(`Tổng số chương tìm thấy: ${chapters.length}`);
  300.         return chapters;
  301.     }
  302.  
  303.     // Thêm function createChapterHTML
  304.     function createChapterHTML(chapNum) {
  305.         const chap_vol = parseInt(jQuery('.chap_vol').val()) || 1;
  306.         const chap_vol_name = jQuery('.chap_vol_name').val() || '';
  307.         return `
  308.         <div data-gen="MK_GEN" id="COUNT_CHAP_${chapNum}_MK">
  309.             <div class="col-xs-12 form-group"></div>
  310.             <div class="form-group">
  311.                 <label class="col-sm-2" for="chap_stt">STT</label>
  312.                 <div class="col-sm-8">
  313.                     <input class="form-control" required name="chap_stt[${chapNum}]" value="${dăngnhanhTTV.STATE.CHAP_STT}" placeholder="Số thứ tự của chương" type="text"/>
  314.                 </div>
  315.             </div>
  316.             <div class="form-group">
  317.                 <label class="col-sm-2" for="chap_number">Chương thứ..</label>
  318.                 <div class="col-sm-8">
  319.                     <input value="${dăngnhanhTTV.STATE.CHAP_SERIAL}" required class="form-control" name="chap_number[${chapNum}]" placeholder="Chương thứ.. (1,2,3..)" type="text"/>
  320.                 </div>
  321.             </div>
  322.             <div class="form-group">
  323.                 <label class="col-sm-2" for="chap_name">Quyển số</label>
  324.                 <div class="col-sm-8">
  325.                     <input class="form-control" name="vol[${chapNum}]" placeholder="Quyển số" type="number" value="${chap_vol}" required/>
  326.                 </div>
  327.             </div>
  328.             <div class="form-group">
  329.                 <label class="col-sm-2" for="chap_name">Tên quyển</label>
  330.                 <div class="col-sm-8">
  331.                     <input class="form-control chap_vol_name" name="vol_name[${chapNum}]" placeholder="Tên quyển" type="text" value="${chap_vol_name}" />
  332.                 </div>
  333.             </div>
  334.             <div class="form-group">
  335.                 <label class="col-sm-2" for="chap_name">Tên chương</label>
  336.                 <div class="col-sm-8">
  337.                     <input required class="form-control" name="chap_name[${chapNum}]" placeholder="Tên chương" type="text"/>
  338.                 </div>
  339.             </div>
  340.             <div class="form-group">
  341.                 <label class="col-sm-2" for="introduce">Nội dung</label>
  342.                 <div class="col-sm-8">
  343.                     <textarea maxlength="75000" style="color:#000;font-weight: 400;" required class="form-control" name="introduce[${chapNum}]" rows="20" placeholder="Nội dung" type="text"></textarea>
  344.                     <div class="chapter-character-count"></div>
  345.                 </div>
  346.             </div>
  347.             <div class="form-group">
  348.                 <label class="col-sm-2" for="adv">Quảng cáo</label>
  349.                 <div class="col-sm-8">
  350.                     <textarea maxlength="1000" class="form-control" name="adv[${chapNum}]" placeholder="Quảng cáo" type="text"></textarea>
  351.                 </div>
  352.             </div>
  353.         </div>`;
  354.     }
  355.  
  356.     // Add state management
  357.     const dăngnhanhTTV = {
  358.         STATE: {
  359.             CHAP_NUMBER: 1,
  360.             CHAP_STT: 1,
  361.             CHAP_SERIAL: 1,
  362.             CHAP_NUMBER_ORIGINAL: 1,
  363.             CHAP_STT_ORIGINAL: 1,
  364.             CHAP_SERIAL_ORIGINAL: 1
  365.         },
  366.         initializeChapterValues: function() {
  367.             try {
  368.                 const chap_number = parseInt(jQuery('#chap_number').val());
  369.                 let chap_stt = parseInt(jQuery('.chap_stt1').val());
  370.                 let chap_serial = parseInt(jQuery('.chap_serial').val());
  371.  
  372.                 if (parseInt(jQuery('#chap_stt').val()) > chap_stt) {
  373.                     chap_stt = parseInt(jQuery('#chap_stt').val());
  374.                 }
  375.                 if (parseInt(jQuery('#chap_serial').val()) > chap_serial) {
  376.                     chap_serial = parseInt(jQuery('#chap_serial').val());
  377.                 }
  378.  
  379.                 this.STATE.CHAP_NUMBER = this.STATE.CHAP_NUMBER_ORIGINAL = chap_number || 1;
  380.                 this.STATE.CHAP_STT = this.STATE.CHAP_STT_ORIGINAL = chap_stt || 1;
  381.                 this.STATE.CHAP_SERIAL = this.STATE.CHAP_SERIAL_ORIGINAL = chap_serial || 1;
  382.             } catch (e) {
  383.                 console.error("Error initializing chapter values:", e);
  384.             }
  385.         }
  386.     };
  387.  
  388.     // Update transferContent function to use createChapterHTML
  389.     async function transferContent() {
  390.         try {
  391.             console.log("Bắt đầu quá trình chuyển nội dung");
  392.             
  393.             // Get all chapters
  394.             const chapterItems = document.querySelectorAll('.ttv-chapter-item');
  395.             if (!chapterItems.length) {
  396.                 throw new Error('Không tìm thấy chương nào để điền vào form');
  397.             }
  398.             console.log(`Tìm thấy ${chapterItems.length} chương để điền vào form`);
  399.  
  400.             // Find the form container
  401.             const form = document.querySelector('form[name="postChapForm"]');
  402.             if (!form) {
  403.                 throw new Error('Không tìm thấy form đăng chương');
  404.             }
  405.             console.log("Tìm thấy form đăng chương");
  406.  
  407.             // Get and update state values
  408.             let chap_vol = 1;
  409.             let chap_vol_name = '';
  410.             
  411.             try {
  412.                 chap_vol = parseInt(jQuery('.chap_vol').val()) || 1;
  413.                 chap_vol_name = jQuery('.chap_vol_name').val() || '';
  414.                 console.log(`Đã lấy thông tin quyển: số ${chap_vol}, tên: ${chap_vol_name}`);
  415.             } catch (e) {
  416.                 console.warn("Không thể lấy thông tin quyển, sử dụng giá trị mặc định", e);
  417.             }
  418.  
  419.             // Tìm STT chương và số thứ tự cao nhất trong form hiện tại
  420.             let maxChapStt = 0;
  421.             let maxChapSerial = 0;
  422.             
  423.             try {
  424.                 // Tìm tất cả các form chương hiện có
  425.                 const existingForms = form.querySelectorAll('[id^="COUNT_CHAP_"]');
  426.                 console.log(`Tìm thấy ${existingForms.length} form chương hiện có`);
  427.                 
  428.                 // Tìm STT và số thứ tự cao nhất
  429.                 existingForms.forEach(formElem => {
  430.                     try {
  431.                         // Lấy index từ ID của form, ví dụ: COUNT_CHAP_1_MK -> 1
  432.                         const formIdMatch = formElem.id.match(/COUNT_CHAP_(\d+)_MK/);
  433.                         if (formIdMatch && formIdMatch[1]) {
  434.                             const formIndex = parseInt(formIdMatch[1]);
  435.                             
  436.                             // Lấy giá trị STT
  437.                             const sttInput = formElem.querySelector(`input[name="chap_stt[${formIndex}]"]`);
  438.                             if (sttInput && sttInput.value && !isNaN(parseInt(sttInput.value))) {
  439.                                 const sttVal = parseInt(sttInput.value);
  440.                                 if (sttVal > maxChapStt) {
  441.                                     maxChapStt = sttVal;
  442.                                 }
  443.                             }
  444.                             
  445.                             // Lấy giá trị số thứ tự
  446.                             const serialInput = formElem.querySelector(`input[name="chap_number[${formIndex}]"]`);
  447.                             if (serialInput && serialInput.value && !isNaN(parseInt(serialInput.value))) {
  448.                                 const serialVal = parseInt(serialInput.value);
  449.                                 if (serialVal > maxChapSerial) {
  450.                                     maxChapSerial = serialVal;
  451.                                 }
  452.                             }
  453.                         }
  454.                     } catch (formError) {
  455.                         console.warn("Lỗi khi đọc giá trị từ form:", formError);
  456.                     }
  457.                 });
  458.                 
  459.                 console.log(`STT chương cao nhất tìm thấy: ${maxChapStt}, Số thứ tự cao nhất: ${maxChapSerial}`);
  460.                 
  461.                 // Cập nhật state với giá trị cao nhất tìm được
  462.                 if (maxChapStt > 0) {
  463.                     dăngnhanhTTV.STATE.CHAP_STT = maxChapStt;
  464.                 }
  465.                 
  466.                 if (maxChapSerial > 0) {
  467.                     dăngnhanhTTV.STATE.CHAP_SERIAL = maxChapSerial;
  468.                 }
  469.                 
  470.             } catch (e) {
  471.                 console.warn("Không thể tìm STT và số thứ tự cao nhất, sử dụng giá trị mặc định", e);
  472.             }
  473.             
  474.             // Đếm số form chương hiện có để xác định index bắt đầu
  475.             const existingFormCount = form.querySelectorAll('[id^="COUNT_CHAP_"]').length;
  476.             console.log(`Số form chương hiện có: ${existingFormCount}`);
  477.  
  478.             console.log(`Bắt đầu tạo ${chapterItems.length} form chương mới từ index ${existingFormCount + 1}`);
  479.  
  480.             // Tạo form cho mỗi chương
  481.             for (let i = 0; i < chapterItems.length; i++) {
  482.                 const formIndex = existingFormCount + i + 1;
  483.                 console.log(`Đang tạo form cho chương ${formIndex}`);
  484.  
  485.                 try {
  486.                     // Tăng các giá trị STT và số thứ tự cho chương mới
  487.                     dăngnhanhTTV.STATE.CHAP_STT++;
  488.                     dăngnhanhTTV.STATE.CHAP_SERIAL++;
  489.                     
  490.                     console.log(`Sử dụng STT: ${dăngnhanhTTV.STATE.CHAP_STT}, Số thứ tự: ${dăngnhanhTTV.STATE.CHAP_SERIAL}`);
  491.                     
  492.                     // Tạo HTML cho form chương mới
  493.                     const chapterHTML = createChapterHTML(formIndex);
  494.                     const tempDiv = document.createElement('div');
  495.                     tempDiv.innerHTML = chapterHTML;
  496.                     const newFormElement = tempDiv.firstElementChild;
  497.                     
  498.                     if (!newFormElement) {
  499.                         throw new Error(`Không thể tạo element form cho chương ${formIndex}`);
  500.                     }
  501.                     
  502.                     form.appendChild(newFormElement);
  503.                     console.log(`Đã thêm form HTML cho chương ${formIndex}`);
  504.                     
  505.                     // Lấy thông tin chương
  506.                     const chapterItem = chapterItems[i];
  507.                     
  508.                     if (!chapterItem) {
  509.                         throw new Error(`Không tìm thấy dữ liệu cho chương ${formIndex}`);
  510.                     }
  511.                     
  512.                     const titleElement = chapterItem.querySelector('.chapter-title');
  513.                     const nameElement = chapterItem.querySelector('.chapter-name');
  514.                     
  515.                     if (!titleElement || !nameElement) {
  516.                         throw new Error(`Thiếu thông tin tiêu đề hoặc tên cho chương ${formIndex}`);
  517.                     }
  518.                     
  519.                     const chapterTitle = titleElement.textContent;
  520.                     const chapterName = nameElement.textContent.replace('Tên chương: ', '');
  521.                     const chapterNumberMatch = chapterTitle.match(/Chương\s+(\d+)/);
  522.                     const chapterNumber = chapterNumberMatch ? chapterNumberMatch[1] : dăngnhanhTTV.STATE.CHAP_SERIAL.toString();
  523.                     
  524.                     console.log(`Thông tin chương ${formIndex}: Tiêu đề: ${chapterTitle}, Tên: ${chapterName}, Số: ${chapterNumber}`);
  525.  
  526.                     // Lấy các trường form
  527.                     const formFields = {
  528.                         chapterName: form.querySelector(`input[name="chap_name[${formIndex}]"]`),
  529.                         content: form.querySelector(`textarea[name="introduce[${formIndex}]"]`),
  530.                         chapterNumber: form.querySelector(`input[name="chap_number[${formIndex}]"]`),
  531.                         chapterOrder: form.querySelector(`input[name="chap_stt[${formIndex}]"]`),
  532.                         volume: form.querySelector(`input[name="vol[${formIndex}]"]`),
  533.                         volumeName: form.querySelector(`input[name="vol_name[${formIndex}]"]`),
  534.                         advertisement: form.querySelector(`textarea[name="adv[${formIndex}]"]`)
  535.                     };
  536.  
  537.                     // Kiểm tra xem có thiếu trường nào không
  538.                     const missingFields = [];
  539.                     for (const [fieldName, element] of Object.entries(formFields)) {
  540.                         if (!element) {
  541.                             missingFields.push(fieldName);
  542.                         }
  543.                     }
  544.  
  545.                     if (missingFields.length > 0) {
  546.                         throw new Error(`Thiếu các trường ${missingFields.join(', ')} trong form ${formIndex}`);
  547.                     }
  548.  
  549.                     // Điền dữ liệu vào form
  550.                     formFields.chapterName.value = chapterName;
  551.                     formFields.chapterNumber.value = dăngnhanhTTV.STATE.CHAP_SERIAL.toString();
  552.                     formFields.chapterOrder.value = dăngnhanhTTV.STATE.CHAP_STT.toString();
  553.                     formFields.volume.value = chap_vol;
  554.                     formFields.volumeName.value = chap_vol_name;
  555.                     
  556.                     // Kiểm tra và gán nội dung
  557.                     if (chapterItem._content) {
  558.                         formFields.content.value = chapterItem._content;
  559.                     } else {
  560.                         console.warn(`Chương ${formIndex} không có nội dung`);
  561.                         formFields.content.value = '';
  562.                     }
  563.                     
  564.                     formFields.advertisement.value = '';
  565.  
  566.                     console.log(`Đã điền form cho chương ${formIndex}: Tên: ${chapterName}, STT: ${dăngnhanhTTV.STATE.CHAP_STT}, Số thứ tự: ${dăngnhanhTTV.STATE.CHAP_SERIAL}, Độ dài nội dung: ${formFields.content.value.length} ký tự`);
  567.  
  568.                     // Kích hoạt sự kiện input để cập nhật số đếm ký tự
  569.                     try {
  570.                         const inputEvent = new Event('input', { bubbles: true });
  571.                         formFields.content.dispatchEvent(inputEvent);
  572.                     } catch (inputError) {
  573.                         console.warn(`Không thể kích hoạt sự kiện input cho chương ${formIndex}:`, inputError);
  574.                     }
  575.                 } catch (chapterError) {
  576.                     console.error(`Lỗi khi xử lý chương ${formIndex}:`, chapterError);
  577.                     showNotification(`Lỗi ở chương ${formIndex}: ${chapterError.message}`, true);
  578.                     // Tiếp tục với chương tiếp theo thay vì dừng toàn bộ quá trình
  579.                 }
  580.             }
  581.  
  582.             showNotification(`Đã tự động điền ${chapterItems.length} chương vào form!`);
  583.             console.log(`Đã hoàn thành việc điền ${chapterItems.length} chương vào form`);
  584.  
  585.         } catch (error) {
  586.             console.error('Lỗi khi điền form:', error);
  587.             showNotification('Có lỗi xảy ra khi điền form: ' + error.message, true);
  588.         }
  589.     }
  590.  
  591.     // Chọn chương để hiển thị
  592.     function selectChapter(chapter, index) {
  593.         const contentEditor = document.querySelector('.ttv-content-editor');
  594.         contentEditor.value = chapter.title + '\n' + chapter.content.join('\n');
  595.  
  596.         // Cập nhật số từ
  597.         const wordCountSpan = document.querySelector('.ttv-word-count');
  598.         if (wordCountSpan) {
  599.             wordCountSpan.textContent = updateWordCount(contentEditor.value);
  600.         }
  601.  
  602.         // Highlight selected chapter
  603.         const chapterItems = document.querySelectorAll('.ttv-chapter-item');
  604.         chapterItems.forEach(item => item.classList.remove('selected'));
  605.         chapterItems[index]?.classList.add('selected');
  606.  
  607.         // Tự động điền form khi chọn chương
  608.         try {
  609.             transferContent();
  610.         } catch (error) {
  611.             console.error('Lỗi khi tự động điền form:', error);
  612.             showNotification('Có lỗi xảy ra khi tự động điền form!', true);
  613.         }
  614.     }
  615.  
  616.     // Hiển thị danh sách chương
  617.     function displayChapters(chapters) {
  618.         const chapterList = document.createElement('div');
  619.         chapterList.className = 'ttv-chapter-list';
  620.  
  621.         chapters.forEach((chapter, index) => {
  622.             const chapterItem = document.createElement('div');
  623.             chapterItem.className = 'ttv-chapter-item';
  624.  
  625.             // Store chapter content
  626.             chapterItem._content = chapter.title + '\n' + chapter.content.join('\n');
  627.  
  628.             // Tạo các phần tử con với định dạng riêng
  629.             const titleDiv = document.createElement('div');
  630.             titleDiv.className = 'chapter-title';
  631.             titleDiv.textContent = chapter.title;
  632.  
  633.             const nameDiv = document.createElement('div');
  634.             nameDiv.className = 'chapter-name';
  635.             nameDiv.textContent = `Tên chương: ${chapter.name}`;
  636.  
  637.             const statsDiv = document.createElement('div');
  638.             statsDiv.className = 'chapter-stats';
  639.             statsDiv.textContent = `${chapter.content.length} dòng`;
  640.  
  641.             // Thêm các phần tử vào item
  642.             chapterItem.appendChild(titleDiv);
  643.             chapterItem.appendChild(nameDiv);
  644.             chapterItem.appendChild(statsDiv);
  645.  
  646.             chapterItem.onclick = () => selectChapter(chapter, index);
  647.             chapterList.appendChild(chapterItem);
  648.  
  649.             // Select first chapter by default
  650.             if (index === 0) {
  651.                 chapterItem.classList.add('selected');
  652.             }
  653.         });
  654.  
  655.         const existingList = document.querySelector('.ttv-chapter-list');
  656.         if (existingList) {
  657.             existingList.remove();
  658.         }
  659.  
  660.         const contentEditor = document.querySelector('.ttv-content-editor');
  661.         contentEditor.parentNode.insertBefore(chapterList, contentEditor);
  662.  
  663.         // Hiển thị thông báo về số chương tìm thấy
  664.         showNotification(`Đã tìm thấy ${chapters.length} chương và tự động điền vào form.`);
  665.  
  666.         // Tự động chọn chương đầu tiên
  667.         if (chapters.length > 0) {
  668.             selectChapter(chapters[0], 0);
  669.         }
  670.     }
  671.  
  672.     // Đếm số từ và ký tự
  673.     function updateWordCount(content) {
  674.         const wordCount = content.trim().split(/\s+/).length;
  675.         const charCount = content.length;
  676.         return `${wordCount} từ | ${charCount} ký tự`;
  677.     }
  678.  
  679.     // Chuyển đổi giữa chế độ soạn thảo và xem trước
  680.     function togglePreview() {
  681.         const contentEditor = document.querySelector('.ttv-content-editor');
  682.         const preview = document.querySelector('.ttv-preview');
  683.         const previewBtn = document.querySelector('.ttv-preview-btn');
  684.  
  685.         if (contentEditor.style.display !== 'none') {
  686.             contentEditor.style.display = 'none';
  687.             preview.style.display = 'block';
  688.             preview.innerHTML = contentEditor.value.replace(/\n/g, '<br>');
  689.             previewBtn.textContent = 'Soạn thảo';
  690.         } else {
  691.             contentEditor.style.display = 'block';
  692.             preview.style.display = 'none';
  693.             previewBtn.textContent = 'Xem trước';
  694.         }
  695.     }
  696.  
  697.     // Chuyển đổi chế độ toàn màn hình
  698.     function toggleFullscreen() {
  699.         const panel = document.querySelector('.ttv-control-panel');
  700.         const fullscreenBtn = document.querySelector('.ttv-fullscreen-btn');
  701.         panel.classList.toggle('fullscreen');
  702.         fullscreenBtn.textContent = panel.classList.contains('fullscreen') ? 'Thu nhỏ' : 'Toàn màn hình';
  703.     }
  704.  
  705.     // Thêm panel điều khiển
  706.     function addControlPanel() {
  707.         // Tạo panel
  708.         const panel = document.createElement('div');
  709.         panel.className = 'ttv-control-panel';
  710.  
  711.         // Thêm header
  712.         const header = document.createElement('div');
  713.         header.className = 'ttv-header';
  714.         header.innerHTML = `
  715.             <div>Soạn Thảo Nội Dung</div>
  716.             <div class="ttv-toolbar">
  717.                 <button class="ttv-preview-btn" onclick="togglePreview()">Xem trước</button>
  718.                 <button class="ttv-fullscreen-btn" onclick="toggleFullscreen()">Toàn màn hình</button>
  719.                 <button class="ttv-minimize">−</button>
  720.             </div>
  721.         `;
  722.  
  723.         const buttonGroup = document.createElement('div');
  724.         buttonGroup.className = 'ttv-button-group';
  725.  
  726.         // Khung soạn thảo nội dung
  727.         const contentEditorLabel = document.createElement('div');
  728.         contentEditorLabel.className = 'ttv-heading';
  729.         contentEditorLabel.innerHTML = `
  730.             Nội dung chương:
  731.             <span class="ttv-word-count">0 từ | 0 ký tự</span>
  732.         `;
  733.  
  734.         const contentEditor = document.createElement('textarea');
  735.         contentEditor.className = 'ttv-content-editor';
  736.         contentEditor.placeholder = 'Nhập hoặc dán nội dung chương vào đây...';
  737.  
  738.         // Khung xem trước
  739.         const preview = document.createElement('div');
  740.         preview.className = 'ttv-preview';
  741.  
  742.         // Cập nhật số từ khi nhập nội dung
  743.         contentEditor.oninput = () => {
  744.             const wordCountSpan = document.querySelector('.ttv-word-count');
  745.             if (wordCountSpan) {
  746.                 wordCountSpan.textContent = updateWordCount(contentEditor.value);
  747.             }
  748.         };
  749.  
  750.         // Xử lý khi paste nội dung
  751.         contentEditor.onpaste = (e) => {
  752.             // Cho phép paste hoàn tất
  753.             setTimeout(() => {
  754.                 const content = contentEditor.value;
  755.                 const chapters = parseChapters(content);
  756.                 if (chapters.length > 0) {
  757.                     displayChapters(chapters);
  758.                     // Tự động điền form sau khi hiển thị danh sách chương
  759.                     setTimeout(() => {
  760.                         try {
  761.                             transferContent();
  762.                         } catch (error) {
  763.                             console.error('Lỗi khi tự động điền form:', error);
  764.                             showNotification('Có lỗi xảy ra khi tự động điền form!', true);
  765.                         }
  766.                     }, 1000); // Đợi 1s để đảm bảo UI đã được cập nhật hoàn toàn
  767.                 }
  768.             }, 0);
  769.         };
  770.  
  771.         // Nút chuyển nội dung
  772.         const transferBtn = document.createElement('button');
  773.         transferBtn.type = 'button';
  774.         transferBtn.className = 'btn btn-warning';
  775.         transferBtn.innerHTML = '<span>Chuyển nội dung sang form</span>';
  776.         transferBtn.onclick = transferContent;
  777.  
  778.         // Thêm các phần tử vào panel
  779.         panel.appendChild(header);
  780.         buttonGroup.appendChild(contentEditorLabel);
  781.         buttonGroup.appendChild(contentEditor);
  782.         buttonGroup.appendChild(preview);
  783.         buttonGroup.appendChild(transferBtn);
  784.         panel.appendChild(buttonGroup);
  785.  
  786.         document.body.appendChild(panel);
  787.  
  788.         // Thêm xử lý sự kiện cho các nút trong toolbar
  789.         const minimizeBtn = panel.querySelector('.ttv-minimize');
  790.         minimizeBtn.onclick = () => {
  791.             panel.classList.toggle('minimized');
  792.             minimizeBtn.innerHTML = panel.classList.contains('minimized') ? '+' : '−';
  793.         };
  794.  
  795.         window.togglePreview = togglePreview;
  796.         window.toggleFullscreen = toggleFullscreen;
  797.     }
  798.  
  799.     // Initialize chapter values when page loads
  800.     window.addEventListener('load', function() {
  801.         dăngnhanhTTV.initializeChapterValues();
  802.         addControlPanel();
  803.     });
  804. })();