☰

ChordTela View Simple

digunakan untuk mengubah tampilan web chordtela.com

// ==UserScript==
// @name         ChordTela View Simple
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  digunakan untuk mengubah tampilan web chordtela.com
// @author       ogi darma tena
// @match        https://www.chordtela.com/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // Tambahkan delay 3 detik
    setTimeout(() => {
        // Hapus semua kelas di elemen body, kecuali kelas yang diperlukan
        const bodyElement = document.body;
        const preservedClasses = ['telabox', 'transpose-toolbox']; // Daftar kelas yang tidak akan dihapus
        bodyElement.className = bodyElement.className
            .split(' ') // Mengubah daftar kelas menjadi array
            .filter(className => preservedClasses.includes(className)) // Menyaring kelas yang perlu dipertahankan
            .join(' '); // Menggabungkan kembali menjadi string

        // Ambil semua elemen dengan kelas "transpose-toolbox" dan "telabox"
        const transposeElements = document.querySelectorAll('.transpose-toolbox');
        const telaboxElements = document.querySelectorAll('.telabox');

        // Hapus semua elemen lain di body
        document.body.innerHTML = '';

        // Menambahkan elemen dengan kelas "transpose-toolbox" (satu kolom)
        transposeElements.forEach(element => {
            // Menambahkan gaya CSS untuk menampilkan "transpose-toolbox" dalam satu kolom
            element.style.columnCount = '1'; // Satu kolom
            element.style.columnGap = '0'; // Tidak ada jarak antar kolom
            element.style.whiteSpace = 'normal'; // Membungkus teks dengan normal (bukan pre-wrap)

            // Menambahkan elemen "transpose-toolbox" ke body
            document.body.appendChild(element);
        });

        // Menambahkan elemen dengan kelas "telabox" ke body (dua kolom dengan garis pemisah jika tidak ada <pre>)
        telaboxElements.forEach(element => {
            const preElements = element.querySelectorAll('pre');

            if (preElements.length > 0) {
                preElements.forEach(pre => {
                    // Mengubah teks di dalam <pre> menjadi dua kolom
                    pre.style.columnCount = '2'; // Membagi teks menjadi 2 kolom
                    pre.style.columnGap = '20px'; // Menambahkan jarak antar kolom
                    pre.style.whiteSpace = 'pre-wrap'; // Membungkus teks untuk mencegah pemotongan kata
                    pre.style.wordWrap = 'break-word'; // Memastikan kata panjang terputus dengan baik
                    pre.style.lineHeight = '0.85'; // Mengatur jarak antar baris menjadi lebih rapat (nilai lebih kecil)
                    pre.style.columnRule = '1px solid black'; // Menambahkan garis pemisah dengan ketebalan 1px dan warna hitam
                });
            } else {
                // Jika tidak ada elemen <pre>, terapkan dua kolom langsung pada elemen telabox
                element.style.columnCount = '2';
                element.style.columnGap = '20px';
                element.style.whiteSpace = 'pre-wrap';
                element.style.wordWrap = 'break-word';
                element.style.lineHeight = '0.85';
                element.style.columnRule = '1px solid black';
            }

            // Menambahkan elemen "telabox" ke body
            document.body.appendChild(element);
        });

        // Mengubah warna teks semua elemen dengan kelas "tbi-tooltip" menjadi #0000FF (biru)
        const tooltipElements = document.querySelectorAll('.tbi-tooltip');
        tooltipElements.forEach(element => {
            element.style.color = '#0000FF'; // Mengubah warna teks menjadi biru
        });

        // Mengaktifkan designmode
        document.designMode = 'on';

        // Mengubah warna latar belakang body menjadi putih
        document.body.style.backgroundColor = 'white';
        document.body.style.padding = '2px'
        // Menambahkan aturan CSS @media print untuk menyembunyikan elemen dengan kelas 'transpose-toolbox'
        const style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = `
    @media print {
        .transpose-toolbox {
            display: none !important;
        }
    }
`;
// Sisipkan elemen <style> ke dalam <head> agar berlaku saat mencetak
document.head.appendChild(style);

    }, 4000); // Jeda 3000 ms = 3 detik
})();