☰

Vietphrase converter

The userscript converts chinese novel webpage to Vietphrase format to read on web browser

  1. // ==UserScript==
  2. // @name   Vietphrase converter
  3. // @name:vi  convert kiểu Vietphrase
  4. // @namespace  VP
  5. // @version  1.0.2
  6. // @description The userscript converts chinese novel webpage to Vietphrase format to read on web browser 
  7. // @description:vi convert kiểu Vietphrase để đọc truyện trực tiếp trên web
  8. // @author you
  9. // @match  http*://*/*
  10. // @grant  GM_setValue
  11. // @grant  GM_getValue
  12. // @run-at   document-idle
  13. // ==/UserScript==
  14.  
  15. let Options = GM_getValue('Options', {
  16.   Ngoac: false,
  17.   Motnghia: true,
  18.   daucach: ';',
  19.   DichLieu: true,
  20.   useSP: false,
  21.   font: 'Roboto',
  22.   whiteList: []   //[{host:string,leftRight:boolean, noButton:boolean},{}...]
  23. });
  24.  
  25. let dictNames = GM_getValue('dictNames', undefined);
  26. let dictVP = GM_getValue('dictVP', undefined);
  27. let dictPA = GM_getValue('dictPA', undefined);
  28. let dictSP = GM_getValue('dictSP', undefined);
  29.  
  30. let tmpDictPA;
  31. let tmpDictVP;
  32. let tmpDictNames;
  33. let tmpDictSP;
  34.  
  35. function findNonInline(el) {
  36.   for (let i = el; i != null; i = i.parentElement) {
  37.     if (i.tagName == 'IMG' || i.tagName == 'VIDEO') return false;
  38.     el = i;
  39.     if (window.getComputedStyle(i)['display'] != 'inline') break;
  40.   }
  41.   return el;
  42. }
  43.  
  44. //https://github.com/lilydjwg/text-reflow-we
  45. function reFlow(e) {
  46.   const sideMargin = 10
  47.   const winWidth = window.visualViewport.width
  48.   let target = findNonInline(e.target);
  49.   if (!target) return;
  50.   const bbox = target.getBoundingClientRect()
  51.  
  52.   // if box is wider than screen, reset width to make it fit
  53.   if (bbox.width > winWidth) {
  54.     const newWidth = winWidth - (2 * sideMargin)
  55.     target.style.width = newWidth + 'px'
  56.     target.__reflowed = true
  57.   } else if (target.__reflowed) { // don't remove width set by the page itself
  58.     target.style.width = ''
  59.     target.__reflowed = false
  60.   }
  61. }
  62.  
  63. function isOverflow(el) { return el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth; }
  64. function reflow(el) {
  65.   const smallestSize = 12;
  66.   let count = 1;
  67.   let computedStyle;
  68.   do {
  69.     count++;
  70.     computedStyle = getComputedStyle(el)
  71.     fontSize = parseInt(computedStyle.fontSize.slice(0, -2));
  72.     fontSize = fontSize * .95;
  73.     el.style.fontSize = fontSize + 'px';
  74.   } while (isOverflow(el) && fontSize > smallestSize && count < 10)
  75. }
  76.  
  77. function sortSP(a, b) {
  78.   let cmp = { 'V': 2, 'N': 3 }
  79.   let aM = a.match(/{\d}|{N\d?}|{V\d?}/g);
  80.   let bM = b.match(/{\d}|{N\d?}|{V\d?}/g);
  81.   if (aM.length > bM.length) return -1;
  82.   if (aM.length < bM.length) return 1;
  83.   let aS = aM.reduce((s, e) => s += cmp[e.charAt(0)] ?? 0, 0);
  84.   let bS = bM.reduce((s, e) => s += cmp[e.charAt(0)] ?? 0, 0);
  85.   if (aS > bS) return -1;
  86.   if (aS < bS) return 1;
  87.   return b.length - a.length || a.localeCompare(b);
  88. }
  89.  
  90. function str2Dict(str) {
  91.   let dict = {};
  92.   str.trim().split(/\r\n|\r|\n/).forEach(line => {
  93.     if (/^(\/\/|#|=)/.test(line)) return; //ghi chu
  94.     let [org, trans] = line.split('=');
  95.     if (!org || !trans) return;
  96.     dict[org] = trans.trim();
  97.   })
  98.   return dict
  99. }
  100.  
  101. function transPA(str) {
  102.   return str.split('').reduce((s, c) => s += dictPA.trans[c] ? (' ' + dictPA.trans[c]) : c, '');
  103. }
  104.  
  105. function transVP(str, Ngoac = true, Motnghia = false, daucach = ';', DichLieu = false) {
  106.   const _magic = ''; //'\uf0f3'
  107.   if (dictNames) dictNames.org?.forEach(el => str.replaceAll(el, ' ' + dictNames.trans[el]));
  108.   if (!dictVP || !dictPA) return str;
  109.   let result = '';
  110.   const maxLength = dictVP.org[0]?.length;
  111.   const dichlieu = ['的', '了', '着'];
  112.   for (let i = 0; i < str.length; i++) {
  113.     for (let j = maxLength; j > 0; j--) {
  114.       let subStr = str.slice(i, i + j);
  115.       let VP = dictVP.trans[subStr];
  116.       if (typeof VP === 'string' && VP.length > 0) {
  117.         if (Motnghia) VP = VP.split(daucach)[0];
  118.         if (Ngoac) VP = `[${VP.trim()}]`;//Sometimes VP.trim() got error because no trim property/function in VP???
  119.         result += ' ' + VP;
  120.         str.replace(subStr, _magic.repeat(subStr.length));
  121.         i += j;
  122.       }
  123.       if (j == 1) {
  124.         if (DichLieu && dichlieu.includes(str.charAt(i))) continue;
  125.         result += dictPA.trans[str.charAt(i)] ? (' ' + dictPA.trans[str.charAt(i)]) : str.charAt(i);
  126.         str.replace(str.charAt(i), _magic);
  127.       }
  128.     }
  129.   }
  130.   return result.replaceAll(/[ ]+/g, ' ');
  131. }
  132.  
  133. function transSP1(str) {
  134.   const regNumber = /{\d}/g
  135.   if (dictSP.org == undefined) return false;
  136.   dictSP.org.forEach(sp => {
  137.     let aC = sp.match(regNumber);
  138.     let vC = new RegExp(sp.replaceAll(regNumber, '[\\p{sc=Han}、，,0-9]+'), 'ug');
  139.     let vV = dictSP.trans[sp];
  140.     aC.forEach(ac => vV = vV.replace(ac, `$${aC.indexOf(ac) + 1}`));
  141.     str.replaceAll(vC, `<${vV}>`);
  142.   })
  143. }
  144. const transSP = transSP1;
  145.  
  146. function translateNode(rootNode) {
  147.   let nodeArr = [];
  148.   let nodesText = '';
  149.   const limiter = ''.repeat(2); //'\uf0f5'
  150.  
  151.   function nodeToArr(node) {
  152.     if (node.nodeType == 3) {
  153.       nodeArr.push(node);
  154.       nodesText += node.textContent + limiter;
  155.     }
  156.     node.childNodes.forEach(childNode => nodeToArr(childNode))
  157.   }
  158.  
  159.   nodeToArr(rootNode);
  160.   let translated = transVP(nodesText, Options.Ngoac, Options.Motnghia, Options.daucach, Options.DichLieu);
  161.   if (translated.length > 25000) {
  162.     translated.split(limiter).forEach((text, index) => {
  163.       if (nodeArr[index] == undefined) return;
  164.       nodeArr[index].textContent = text;
  165.     });
  166.     if (Options.font)
  167.       document.body.setAttribute('style', `font-family: ${Options.font} !important;`);
  168.   }
  169.   else {
  170.     translated.split(limiter).forEach((text, index) => {
  171.       if (nodeArr[index] == undefined) return;
  172.       nodeArr[index].textContent = text;
  173.       if (Options.font) nodeArr[index].parentElement ? nodeArr[index].parentElement.style = `font-family: ${Options.font} !important` : '';
  174.  
  175.       let el = findNonInline(nodeArr[index].parentElement);
  176.       if (!el.hasAttribute('reflow') && isOverflow(el)) {
  177.         reflow(el);
  178.         el.style.overflow = 'hidden';
  179.         el.setAttribute('reflow', "");
  180.         for (c of el.children) {
  181.           let fS = parseInt(getComputedStyle(c).fontSize.slice(0, -2));
  182.           if (fS < 12) c.style.fontSize = '12px';
  183.         }
  184.       }
  185.     });
  186.   }
  187. }
  188.  
  189. async function fileLoad(event) {
  190.   let txt = '';
  191.   let tmp;
  192.   if (event.target.files[0]) txt = await event.target.files[0].text(); else return false;
  193.   switch (event.target.id) {
  194.     case 'fPA':
  195.       tmpDictPA = {};
  196.       tmpDictPA.trans = str2Dict(txt); break;
  197.  
  198.     case 'fVP':
  199.       tmpDictVP = {};
  200.       tmpDictVP.trans = str2Dict(txt);
  201.       tmpDictVP.org = [];
  202.       tmpDictVP.org[0] = Object.keys(tmpDictVP.trans).toSorted((a, b) => b.length - a.length || a.localeCompare(b))[0] ?? '';
  203.       break;
  204.  
  205.     case 'fNames':
  206.       tmpDictNames = {};
  207.       tmpDictNames.trans = str2Dict(txt);
  208.       tmpDictNames.org = Object.keys(tmpDictNames.trans).toSorted((a, b) => b.length - a.length || a.localeCompare(b));
  209.       break;
  210.  
  211.     case 'fSP':
  212.       tmpDictSP = {};
  213.       tmpDictSP.trans = str2Dict(txt);
  214.       tmpDictSP.org = Object.keys(tmpDictSP.trans).toSorted(sortSP);
  215.       break;
  216.   }
  217. }
  218.  
  219. function addNewSite(ev) {
  220.   const me = ev.target;
  221.   const match = me.matches('#usDialog li:last-of-type>input[type="text"]');
  222.   if (!me.value && match)
  223.     return;
  224.   if (!me.value && !match)
  225.     me.parentElement.remove();
  226.   if (me.value && match)
  227.     document.querySelector('#usDialog ul').insertAdjacentHTML('beforeend', `
  228.         <li><input type="text"> Trái <label><input type="checkbox" checked></label> Phải | <input type="checkbox"> Xóa nút</li>`);
  229.   document.querySelector('#usDialog li:last-of-type>input[type="text"]').addEventListener("change", addNewSite);
  230. }
  231.  
  232. (async function () {
  233.   'use strict';
  234.   if (window.self != window.top) return;
  235.   if (Options.blackList?.split(/[,;]/).some(e => e.trim() && window.location.host.includes(e.trim()))) return;
  236.   document.addEventListener('click', reFlow);
  237.   const auto = Options.whiteList.filter(e => window.location.host.includes(e.host));
  238.   if (auto.length > 0) {
  239.     if (auto[0].leftRight) rightFunc(); else leftFunc();
  240.     if (auto[0].noButton) {
  241.       if (auto[0].leftRight) {
  242.         const observer = new MutationObserver((mL) => {
  243.           for (const mo of mL)
  244.             for (const addNode of mo.addedNodes) translateNode(addNode);
  245.         });
  246.         observer.observe(document.body, { childList: true, subtree: true });
  247.       }
  248.       return;
  249.     }
  250.   }
  251.  
  252.   document.body.insertAdjacentHTML('beforeend', `
  253.     <style>
  254.       div.usButton {
  255.         display: flex;
  256.         position: fixed;
  257.         top: 1%;
  258.         right: 1%;
  259.         margin: 0;
  260.         padding: 0;
  261.         border: thin;
  262.         z-index: 9999;
  263.       }
  264.      
  265.       div.usButton>button {
  266.         height: 90%;
  267.         border: none;
  268.         margin: 0;
  269.         text-align: right;
  270.       }
  271.      
  272.       div.usButton>button:first-child {
  273.       padding: 5px 0px 5px 5px;
  274.       }
  275.      
  276.       div.usButton>button:last-child {
  277.         padding: 5px 2px 5px 0px;
  278.       }
  279.      
  280.       div.usButton>button:nth-child(2) {
  281.         padding: 5px 2px 5px 0px;
  282.       }
  283.      
  284.       dialog#usDialog {
  285.         border: none;
  286.         border-radius: .3rem;
  287.         font-family: Arial;
  288.         padding: .3rem;
  289.         margin: auto;
  290.         min-width: 20rem;
  291.         width: fit-content;
  292.       }
  293.      
  294.       #usDialog>div {
  295.         display: flex;
  296.         justify-content: space-around;
  297.       }
  298.      
  299.       #usDialog label:has(#cbMotnghia)+label {
  300.         display: none;
  301.       }
  302.      
  303.       #usDialog label:has(#cbMotnghia:checked)+label {
  304.         display: unset;
  305.       }
  306.      
  307.       #usDialog nav>label {
  308.         width: 4.5rem;
  309.         display: inline-block;
  310.         border-radius: 3px 3px 0px 0px;
  311.         border: 1px solid black;
  312.         border-bottom: none;
  313.         text-align: center;
  314.       }
  315.      
  316.       #usDialog nav>label:has(input[type="radio"]:checked) {
  317.         font-weight: 700;
  318.       }
  319.      
  320.       #usDialog input[type="radio"] {
  321.         width: 0px;
  322.         height: 0px;
  323.         display: none;
  324.       }
  325.      
  326.       #usDialog fieldset {
  327.         display: none;
  328.         min-height: 14rem;
  329.         text-align: left;
  330.         min-width:fit-content;
  331.       }
  332.      
  333.       #usDialog input[type="text"] {
  334.         border: 1px solid black;
  335.         padding:0;
  336.       }
  337.      
  338.       #usDialog textarea {
  339.         border: 1px solid black;
  340.       }
  341.      
  342.       #usDialog nav:has(#rdTudien:checked)~fieldset:nth-child(2) {
  343.         display: block;
  344.       }
  345.      
  346.       #usDialog nav:has(#rdDich:checked)~fieldset:nth-child(3) {
  347.         display: block;
  348.       }
  349.      
  350.       #usDialog nav:has(#rdTudong:checked)~fieldset:nth-child(4) {
  351.         display: grid;
  352.       }
  353.      
  354.       #usDialog ul {
  355.         box-sizing: border-box;
  356.         padding: 0;
  357.         margin: 0;
  358.         max-height: 6rem;
  359.         overflow-y: scroll;
  360.       }
  361.      
  362.       #usDialog li {
  363.         display: unset;
  364.         padding: 0;
  365.         margin: 0;
  366.         display:block;
  367.       }
  368.      
  369.       #usDialog li>label {
  370.         display: inline-block;
  371.         position: relative;
  372.         border-radius: 1em;
  373.         width: 2em;
  374.         height: 1em;
  375.         background-color: pink;
  376.       }
  377.      
  378.       #usDialog li>label:has(input[type="checkbox"])::before {
  379.         content: '';
  380.         display: unset;
  381.         position: absolute;
  382.         left: .15em;
  383.         top: .1em;
  384.         border-radius: 50%;
  385.         width: .8em;
  386.         height: .8em;
  387.         background-color: rgb(193, 6, 245);
  388.       }
  389.      
  390.       #usDialog li>label:has(input[type="checkbox"]:checked)::before {
  391.         display: none;
  392.       }
  393.      
  394.       #usDialog li>label:has(input[type="checkbox"])::after {
  395.         display: none;
  396.       }
  397.      
  398.       #usDialog li>label:has(input[type="checkbox"]:checked)::after {
  399.         content: '';
  400.         display: unset;
  401.         position: absolute;
  402.         border-radius: 50%;
  403.         right: .15em;
  404.         top: .1em;
  405.         width: .8em;
  406.         height: .8em;
  407.         background-color: green;
  408.       }
  409.      
  410.       #usDialog li>label>input[type="checkbox"] {
  411.         width: 0px;
  412.         height: 0px;
  413.         display: none;
  414.       }
  415.      
  416.       #usDialog button{
  417.         min-width:fit-content;
  418.         width: 4rem;
  419.       }
  420.     </style>
  421.     <div class="usButton">
  422.       <button>Tran</button>
  423.       <button>slate</button>
  424.       <button>↓</button>
  425.     </div>
  426.     <dialog id="usDialog" spellcheck="false" lang="vie">
  427.       <nav>
  428.         <label id="tudien"><input type="radio" name="groupby" id="rdTudien" checked>Từ điển</label>
  429.         <label id="cachdich"><input type="radio" name="groupby" id="rdDich">Dịch</label>
  430.         <label id="tudong"><input type="radio" name="groupby" id="rdTudong">Tự động</label>
  431.       </nav>
  432.       <fieldset>
  433.         <label for="fPA">Phiên Âm&nbsp;&nbsp;&nbsp;<input type="file" id="fPA"></label><br />
  434.         <label for="fVP">Vietphrase&nbsp;<input type="file" id="fVP"></label><br />
  435.         <label for="fNames">Names&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="file" id="fNames"></label><br />
  436.         <label for="fSP">Strucphrase<input type="file" id="fSP"></label><br />
  437.       </fieldset>
  438.       <fieldset>
  439.         <label for="cbNgoac"><input type="checkbox" id="cbNgoac"> Dùng [ngoặc]</label><br />
  440.         <label for="cbMotnghia"><input type="checkbox" id="cbMotnghia"> Một nghĩa</label>
  441.         <label for="txtdaucach">, dấu cách nghĩa<input type="text" id="txtdaucach" size="1" maxlength="1"></label><br />
  442.         <label for="cbDichLieu"><input type="checkbox" id="cbDichLieu"> Xóa "đích, liễu, trứ"</label><br />
  443.         <label for="cbSP"><input type="checkbox" id="cbSP"> Dùng Strucphrase</label><br />
  444.       </fieldset>
  445.       <fieldset>
  446.         <label for="txtfont" style="width:100%">Font thay thế: </label><input type="text" id="txtfont">
  447.         <label for="txtWL" style="width:100%">Các site tự chạy: </label>
  448.         <ul>
  449.         </ul>
  450.         <label for="txtBL" style="width:100%">Bỏ qua các tên miền chứa các chuỗi cách nhau bằng , ;</label>
  451.         <textarea id="txtBL">.vn;</textarea>
  452.       </fieldset>
  453.       <div>
  454.         <button>OK</button>
  455.         <button>Cancel</button>
  456.       </div>
  457.     </dialog>`);
  458.  
  459.   const dialog = document.querySelector('dialog#usDialog');
  460.  
  461.   function leftFunc() {
  462.     document.title = transPA(document.title);
  463.     document.body.innerHTML = transVP(document.body.innerHTML, Options.Ngoac, Options.Motnghia, Options.daucach, Options.DichLieu);
  464.     if (Options.font)
  465.       document.body.setAttribute('style', `font-family: ${Options.font} !important;`);
  466.   }
  467.  
  468.   function rightFunc() {
  469.     document.title = transPA(document.title);
  470.     translateNode(document.body);
  471.   }
  472.  
  473.   document.querySelector('.usButton button:first-child').onclick = leftFunc;
  474.   document.querySelector('.usButton button:nth-child(2)').onclick = rightFunc;
  475.  
  476.   document.querySelector('.usButton button:last-child').onclick = () => { // Menu ↓ button
  477.     tmpDictPA = undefined;
  478.     tmpDictVP = undefined;
  479.     tmpDictNames = undefined;
  480.     tmpDictSP = undefined;
  481.     if (dialog.open) dialog.close();
  482.  
  483.     Options = GM_getValue('Options', Options); //sync Options across tabs
  484.     dialog.querySelectorAll('input[type="file"]').forEach(el => el.value = null);
  485.  
  486.     dialog.querySelector('#cbNgoac').checked = Options.Ngoac;
  487.     dialog.querySelector('#cbMotnghia').checked = Options.Motnghia;
  488.     dialog.querySelector('#cbDichLieu').checked = Options.DichLieu;
  489.     dialog.querySelector('#cbSP').checked = Options.useSP;
  490.     dialog.querySelector('#txtdaucach').value = Options.daucach ?? ';';
  491.     dialog.querySelector('#txtfont').value = Options.font ?? '';
  492.  
  493.     const ul = dialog.querySelector('ul');
  494.     ul.innerHTML = '';
  495.     [...Array.isArray(Options.whiteList) ? Options.whiteList : []].forEach(el => {
  496.       if (!el || !el.host) return;
  497.       ul.insertAdjacentHTML('beforeend', `
  498.         <li><input type="text" value="${el.host}" > Trái <label><input type="checkbox" ${el.leftRight ? 'checked' : ''}></label> Phải | <input type="checkbox" ${el.noButton ? 'checked' : ''}> Xóa nút</li>`);
  499.     });
  500.  
  501.     dialog.querySelector('ul').insertAdjacentHTML('beforeend', `
  502.         <li><input type="text"> Trái <label><input type="checkbox" checked></label> Phải | <input type="checkbox"> Xóa nút</li>`);
  503.     dialog.querySelectorAll('li input[type="text"]').forEach(el => el.addEventListener('change', addNewSite));
  504.  
  505.     dialog.querySelector('#txtBL').value = Options.blackList ?? '';
  506.     dialog.showModal();
  507.   }
  508.  
  509.   dialog.querySelectorAll('input[type="file"]').forEach(el => el.onchange = fileLoad);
  510.  
  511.   dialog.querySelector('div>button').onclick = () => {  //OK button
  512.     if (tmpDictPA != undefined) {
  513.       dictPA = tmpDictPA;
  514.       GM_setValue('dictPA', dictPA)
  515.     }
  516.  
  517.     if (tmpDictVP != undefined) {
  518.       dictVP = tmpDictVP;
  519.       GM_setValue('dictVP', dictVP)
  520.     }
  521.  
  522.     if (tmpDictNames != undefined) {
  523.       dictNames = tmpDictNames;
  524.       GM_setValue('dictNames', dictNames)
  525.     }
  526.  
  527.     if (tmpDictSP != undefined) {
  528.       dictSP = tmpDictSP;
  529.       GM_setValue('dictSP', dictSP)
  530.     }
  531.  
  532.     Options.Ngoac = dialog.querySelector('#cbNgoac').checked;
  533.     Options.Motnghia = dialog.querySelector('#cbMotnghia').checked;
  534.     Options.DichLieu = dialog.querySelector('#cbDichLieu').checked;
  535.     Options.useSP = dialog.querySelector('#cbSP').checked;
  536.     Options.daucach = dialog.querySelector('#txtdaucach').value.charAt(0) ?? ';';
  537.     Options.font = dialog.querySelector('#txtfont').value.trim().split(/[,;]/g)[0]//??'Roboto';
  538.     Options.whiteList = [];
  539.     dialog.querySelectorAll('li').forEach(li => {
  540.       let host = li.querySelector('input[type="text"]').value;
  541.       if (host) Options.whiteList.push({
  542.         host: host,
  543.         leftRight: li.querySelector('label>input[type="checkbox"]').checked,
  544.         noButton: li.querySelector('label+input[type="checkbox"]').checked
  545.       })
  546.     });
  547.  
  548.     Options.blackList = dialog.querySelector('#txtBL').value;
  549.     GM_setValue('Options', Options);
  550.     dialog.close();
  551.   }
  552.  
  553.   dialog.querySelector('div>button:last-child').onclick = () => dialog.close(); //Cancel button
  554. })();