Add useful functionalities to Busuu website

readme.md

Busuu Power Tools

Add useful functionalities to Busuu website.

busuuPowerTools.js

// ==UserScript==
// @name         Busuu Power Tools
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Add useful functionalities to Busuu website.
// @author       http://github.com/joeperpetua
// @match        https://www.busuu.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=busuu.com
// @grant        none
// ==/UserScript==

const sleep = async (time, unit) => {
    switch(unit){
        case 'ms':
            return new Promise(resolve => setTimeout(resolve, time));
            break;

        case 's':
            return new Promise(resolve => setTimeout(resolve, time*1000));
            break;

        case 'm':
            return new Promise(resolve => setTimeout(resolve, time*60000));
            break;

        case 'h':
            return new Promise(resolve => setTimeout(resolve, time*3600000));
            break;

        default:
            throw new Error(`Sleep unit measure not recognized.\nSupported: ms, s, m, h.\nGiven: ${unit}`);
            break;
    }
}

// Hide busuu sentence translation and add toggle functionality
async function translationToggle(){
    console.log('Waiting for lesson loading...');
    await sleep(2, 's');
    console.log('Starting script.');

    // check if toggle has already been loaded
    if (document.querySelector('#custom-toggle')){
        return;
    }

    let translation = document.querySelector('[data-testid=example-translation]');
    let container = translation?.parentElement;
    let toggle = document.createElement('button');

    // check if translation exists
    if (!translation){
        return;
    }

    translation.style.alignSelf = 'center';
    translation.style.display = 'none';

    toggle.innerText = 'Toggle translation';
    toggle.id = 'custom-toggle';
    toggle.className = 'sc-bdvvtL RFCxY ex-feedback-bar__button';
    toggle.style.alignSelf = "center";
    toggle.onclick = (e) => {translation.style.display == '' ? translation.style.display = 'none' : translation.style.display = ''};

    container?.insertBefore(toggle, translation);
}

(async () => {
    'use strict';
    const observeUrlChange = () => {
        let oldHref = document.location.href;
        const body = document.querySelector("body");
        const observer = new MutationObserver(mutations => {
            mutations.forEach(() => {
                if (oldHref !== document.location.href) {
                    oldHref = document.location.href;
                    console.log('URL changed.');
                    translationToggle();
                }
            });
        });
        observer.observe(body, { childList: true, subtree: true });
    };
    window.onload = observeUrlChange;
})();