Weblate Simple Change Highlighter

Weblate_Simple_Change_Highlighter.js

'use strict';
// ==UserScript==
// @name         Weblate Simple Change Highlighter
// @description  On Weblate, while checking a translation, highlight the editbox if you make any changes.
// @version      0.2
// @license      MIT
// @author       Yılmaz Durmaz
// @namespace    https://gist.github.com/yilmazdurmaz
// @match        https://hosted.weblate.org/translate/*/*/*/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=weblate.org
// @compatible   firefox Tampermonkey recommended
// @compatible   chrome Tampermonkey recommended
// @grant  GM.getValue
// @grant  GM.setValue
// @run-at document-body
// ==/UserScript==

//var $ = window.jQuery;

function add_style(){
    const style = document.createElement('style');

    style.textContent = `
      .border {
          border: 3px solid #dee2e6 !important;
      }

      .border-changed {
        --bs-border-opacity: 1;
        border-color: rgba( 220, 53, 69, 1) !important;
      }
    `;

    document.head.appendChild(style);
}

function add_highlighter(){
    let editor = $(".translation-editor")
    let original = editor.text()
    let changed
    let detect = function(){
        changed = original !== this.value
        if (changed){
            editor.addClass("border border-changed")
            if (!is_saving) GM.setValue( "is_saved", 1 )
        }else{
            editor.removeClass("border border-changed")
            GM.setValue( "is_saved", 0 )
        }
    }
    editor.keyup(detect)
}

function show_saved(){

}

let is_saving;
async function add_save_detect(){
    let is_saved = await GM.getValue ( "is_saved" ,0)
    console.log("is saved?: ",is_saved)
    if (is_saved === 2){
        show_saved()
        $("body > div.main-content.js-editor > div.row > div.col-sm-9 > form > div > div.panel-heading > h4").append("... previous is saved")
        GM.setValue( "is_saved", 0 )
    }
    if (is_saved === 1){
        show_saved()
        $("body > div.main-content.js-editor > div.row > div.col-sm-9 > form > div > div.panel-heading > h4").append("... previous is NOT saved")
        GM.setValue( "is_saved", 0 )
    }
    let save_button = document.querySelector("body > div.main-content.js-editor > div.row > div.col-sm-9 > form > div > div.panel-footer > div > button.btn.btn-primary")
    let save_button_click = save_button.onclick
    save_button.addEventListener("click",function(event){
        is_saving = true;
        GM.setValue( "is_saved", 2 )
        $("body > div.main-content.js-editor > div.row > div.col-sm-9 > form > div > div.panel-heading > h4").append("... button saving")
        if (save_button_click){
            save_button_click(event)
        }
    });
//     let edit_box = $("textarea.translation-editor")
//     let doc_keydown = edit_box.onkeydown
//     edit_box.on("keydown",async function(event){
//         console.log("event değerleri",event.keyCode,event.ctrlKey)
//         if (event.key === "Enter" && event.ctrlKey){
//             $("body > div.main-content.js-editor > div.row > div.col-sm-9 > form > div > div.panel-heading > h4").append("... shortcut saving")
//             GM.setValue( "is_saved", 2 )
//             console.log("is saving?", await GM.getValue("is_saved",-1))
//         }
//         if (doc_keydown){
//             doc_keydown(event)
//         }
//     });
}

(async function() {
    'use strict';
    if (document.readyState == "complete" || document.readyState == "loaded" || document.readyState == "interactive") {
        add_style();
        await add_save_detect();
        add_highlighter();
    } else {
        document.addEventListener("DOMContentLoaded", async function(event) {
            add_style();
            await add_save_detect();
            add_highlighter();
        });
    }
})();