Chrono Trigger preview in Weblate for TamperMonkey

chronotrigger_weblate_preview.user.js

// ==UserScript==
// @name         Chrono Trigger preview for Weblate
// @namespace    https://traduccions.ereza.cat/
// @version      0.0.1
// @description  Chrono Trigger preview for Weblate
// @author       Eduard Ereza Martínez
// @match        https://weblate.ereza.cat/translate/chrono-trigger/textos/*/*
// @grant        GM_addStyle
// ==/UserScript==

GM_addStyle("@font-face { font-family: 'chrono_trigger_catregular'; src: url('https://www.ereza.cat/personal/phpct/chrono-trigger-cat8-webfont.woff2') format('woff2'), url('https://www.ereza.cat/personal/phpct/chrono-trigger-cat8-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }");

function parseChronoPreviewText(text){
    text = text.replace(/{empty}/g,"");
    text = text.replace(/\ /g," ");
    text = text.replace(/{nls}/g,"<br />&nbsp;&nbsp;&nbsp;");
    text = text.replace(/{nl}/g,"<br />");
    text = text.replace(/{nws}/g,"<br /><br />&nbsp;&nbsp;&nbsp;");
    text = text.replace(/{nw}/g,"<br /><br />");
    text = text.replace(/\{03\}\{0F\}/g,"");
    text = text.replace(/\{08\}/g,"<br />");
    text = text.replace(/\{09\}/g,"<br /><br />");
    text = text.replace(/\{0A\}/g,"<br /><br />&nbsp;&nbsp;&nbsp;");
    text = text.replace(/\{Crono\}/g,"WWWWWW");
    text = text.replace(/\{Marle\}/g,"WWWWWW");
    text = text.replace(/\{Lucca\}/g,"WWWWWW");
    text = text.replace(/\{Frog\}/g,"WWWWWW");
    text = text.replace(/\{Robo\}/g,"WWWWWW");
    text = text.replace(/\{Ayla\}/g,"WWWWWW");
    text = text.replace(/\{Magus\}/g,"WWWWWW");
    text = text.replace(/\{Epoch\}/g,"WWWWWW");
    text = text.replace(/\{1A\}/g,"WWW");
    text = text.replace(/\{1B\}/g,"WWWWWW");
    text = text.replace(/\{1C\}/g,"WWWWWW");
    text = text.replace(/\{1D\}/g,"WWWWWW");
    text = text.replace(/\{1E\}/g,"Nadia");
    text = text.replace(/\{1F\}/g,"Megaràfega");
    text = text.replace(/\{03\}/g,"");
    text = text.replace(/\{07\}/g,"");
    text = text.replace(/\{0D\}/g,"");
    text = text.replace(/\{0E\}/g,"99999");
    text = text.replace(/\{0F\}/g,"99999");
    text = text.replace(/\{11\}/g,"WWWWWW");
    text = text.replace(/\{EE\}/g,"W");
    text = text.replace(/\n/g,"");

    return text;
}

function applyChronoPreview(){
    var textarea = document.getElementsByName('target_0')[0];
    var preview = document.getElementById('chronopreview');
    preview.innerHTML=parseChronoPreviewText(textarea.value);
}

(function() {
    'use strict';
    if (document.getElementsByName('target_0').length>0){
        var textarea = document.getElementsByName('target_0')[0];

        var root = document.getElementsByName('fuzzy')[0].parentElement.parentElement.parentElement.parentElement;

        var myElement = document.createElement("div");
        myElement.innerHTML='<label>Previsualització</label><div id="chronopreview" style="width: 512px; overflow-x: hidden; height: 160px; background-image: url(\'https://www.ereza.cat/personal/phpct/bg.png\'); background-repeat: no-repeat; font-family: \'chrono_trigger_catregular\'; font-size: 32px; padding-left: 16px; padding-top: 14px; padding-bottom: 14px; color: white; text-shadow: black 2px 2px 1px; white-space: nowrap; line-height: 32px; box-sizing: border-box;" />';
        root.appendChild(myElement);

        setTimeout(function() {
            //Copied from Weblate
            $('.specialchar').click(function (e) {
                applyChronoPreview();
            });

            $('.copy-text').click(function (e) {
                applyChronoPreview();
            });
        }, 100);

        textarea.addEventListener('input', function() {
            applyChronoPreview();
        });

        applyChronoPreview();

    }
})();