sermon-notes/public/js/script.js

// Get the link element
var md = null;
var references = {};
var tabs = [];
let saved = false;
let textDirty = false;
let saveTimeout = 15000;
var to = null;
let controller;
var BOOKS = {};

fetch('/js/data.json')
    .then((res) => {
        if (!res.ok) {
            throw new Error('HTTP Error: Status: ${res.status}');
        }
        return res.json();
    })
    .then((data) => {
        BOOKS = data;
    })
    .catch((error) => {
        console.log(error);
    })

document.addEventListener('keyup', function (event) {
    if (event.key == "F3") {
        openRef(false);
    }
});

document.querySelector('#notes').addEventListener('keyup', function (event) {
    let key = event.keyCode;

    if (key >= 48 && key <= 90 || key >= 96 && key <= 111 || key >= 186 && key <= 222) {
        textDirty = true;
        document.querySelector('#note-header-left h2').classList.add('dirty');
    }
});

function setHeight() {
    md = new markdownit({
        html: true,
        linkify: true,
        breaks: true
    });

    body = document.querySelector('body');
    body.style.height = window.innerHeight + 'px';

    cont = document.querySelector('#main');
    cont.style.height = (window.innerHeight) + 'px';

    tabs = document.querySelector('.ref-tab');
    tabs.style.height = (window.innerHeight - 13) + 'px';

    ref = document.querySelector('.ref');
    ref.style.height = (window.innerHeight - 50) + 'px';

    noteList = document.querySelector('#note-list');
    noteList.style.height = (window.innerHeight - 50) + 'px';

    notes = document.querySelector('.notes');
    notes.style.height = (window.innerHeight - 50) + 'px';

    notePreview = document.querySelector('#notePreview');
    notePreview.style.height = (window.innerHeight - 50) + 'px';

    if ($('#noteDate')) {
        $('#noteDate').datepicker();
    }

    if ($('#query')) {
        document.querySelector('#query').addEventListener('keyup', function (event) {
            if (event.key == "Enter") {
                search();
            }
        });
    }
    if (!to) {
        to = setTimeout(saveNote, saveTimeout);
    }
}

function search() {
    query = document.querySelector('#query').value;
    fetch('/index.php/search', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            'query': query
        })
    })
        .then(response => response.json())
        .then(results => {
            var oldNotes = document.querySelector('#old-notes');
            oldNotes.innerHTML = '';
            for (var n in results) {
                var link = document.createElement('a');
                link.href = '#';
                link.setAttribute('onclick', "retrieveNote('" + results[n].id + "');openNote();");
                link.innerHTML = results[n].title;

                var p = document.createElement('p');
                p.innerHTML = results[n].passage;

                var article = document.createElement('article');
                article.appendChild(link);
                article.appendChild(p);

                oldNotes.append(article);
            }
        });
}

function newNote() {
    notes = document.querySelector('#notes');
    notes.text = '';
    notes.value = '';
    references = {};
    saved = true;
    textDirty = false;
    document.querySelector('#note-header-left h2').classList.remove('dirty');

    dt = new Date();
    document.querySelector('#noteDate').value = dt.getFullYear() + '-' +
        (dt.getMonth() < 9 ? '0' + (dt.getMonth() + 1) : (dt.getMonth() + 1)) + '-' +
        (dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate());
    document.querySelector('#noteTitle').value = '';
    document.querySelector('#speaker').value = 0;
    document.querySelector('#series').value = 0;
    document.querySelector('#template').value = 0;
    document.querySelector('#passage').value = '';
    document.querySelector('#noteId').value = uuidv4();

    document.querySelector('#ref-list').innerHTML = '';
    document.querySelector('#ref').innerHTML = '';
    document.querySelector('.toggle').click();
}

/**
 * Save a note by sending it to the server for storage.
 *
 * @param {Event} event - The event object triggering the save action.
 * @return {void} No explicit return value.
 */
function saveNote(event) {
    if (event) {
        event.preventDefault();
    }

    if (!textDirty || !validateNote()) {
        clearTimeout(to);
        to = setTimeout(saveNote, saveTimeout);
        return;
    }

    let saveCheck = document.querySelector('#save-check');
    var noteText = document.querySelector('#notes').value;

    startSave();

    var note = {
        id: document.querySelector("#noteId").value,
        date: document.querySelector('#noteDate').value,
        title: document.querySelector('#noteTitle').value,
        speaker: document.querySelector('#speaker').value,
        series: document.querySelector('#series').value,
        passage: document.querySelector('#passage').value,
        note: document.querySelector('#notes').value,
        recording: document.querySelector('#recording').value,
        refs: references
    };
    $.ajax({
        url: '/index.php/save-note',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(note),
        dataType: 'json',
        timeout: 5000
    })
        .done(function (data) {
            if (data.msg == 'saved' && !saved) {
                saveCheck.classList.remove('saving');
                saveCheck.classList.remove('error');
                showSave();
                if (noteText == document.querySelector('#notes').value) {
                    saved = true;
                    textDirty = false;
                    document.querySelector('#note-header-left h2').classList.remove('dirty');
                }

                if (data.new) {
                    document.querySelector('#noteId').value = data.id;
                }
            }
        })
        .fail(function (xhr, status, error) {
            saveCheck.classList.remove('saving');
            saveCheck.classList.add('error');
            console.error(error);
        })
        .always(function (xhr, status) {
            if (status == 'timeout') {
                saveCheck.classList.remove('saving');
                saveCheck.classList.add('error');
            }
            clearTimeout(to);
            to = setTimeout(saveNote, saveTimeout);
        });
}

function validateNote() {
    const note = document.querySelector('#notes');
    const date = document.querySelector('#noteDate');
    const speaker = document.querySelector('#speaker');
    const series = document.querySelector('#series');
    const title = document.querySelector('#noteTitle');
    const psg = document.querySelector('#passage');

    if (!title.value.length) { return false; }
    if (!date.value) { return false; }
    if (!parseInt(speaker.value)) { return false; }
    if (!parseInt(series.value)) { return false; }
    if (!psg.value) { return false; }
    if (!note.value.length) { return false; }

    return true;
}

function isUuidValid(uuid) {
    const regex = /^[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[8|9|a|b][a-f0-9]{3}-[a-f0-9]{12}$/i;
    return regex.test(uuid);
}

function startSave() {
    document.querySelector('#save-check').classList.add('saving');
    document.querySelector('#save-check').style.opacity = 1;
}

/**
 * Displays a checkmark animation on the screen.
 *
 * @param {none} - This function does not take any parameters.
 * @return {none} - This function does not return any value.
 */
function showSave() {
    if (saved) { return; }

    var checkmark = document.getElementById("save-check");

    // Schedule the animation to run every 1 second (which is equivalent to a 1-second delay between each iteration)
    var si = setInterval(function () {
        // Increment the opacity of the checkmark by 0.01 each time
        op = parseFloat(checkmark.style.opacity);
        checkmark.style.opacity = op - 0.1;

        // If the opacity is greater than or equal to 1, reset it back to 0 and stop the animation
        if (checkmark.style.opacity == 0.1) {
            checkmark.style.opacity = 0;
            clearInterval(si);
            saved = false;
        }
    }, 100);
}

/**
 * Function to discard the note by clearing all input fields and closing the menu.
 */
function discardNote() {
    document.querySelector('#noteTitle').value = '';
    document.querySelector('#speaker').value = 0;
    document.querySelector('#series').value = 0;
    document.querySelector('#template').value = 0;
    document.querySelector('#passage').value = '';
    document.querySelector('#notes').value = '';
    document.querySelector('#recording').value = '';
    document.querySelector('#noteDate').value = '';
    document.querySelector('#noteId').value = '';

    fetch('/index.php/discard-note', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            'id': document.querySelector('#noteId').value
        })
            .then(response => response.json())
            .then(data => {
                if (data.msg == 'deleted') {
                    alert('Note deleted.');
                }
            })
    });

    openRef();
}

function newSpeaker() {
    if (document.querySelector('#speaker').value == 'new') {
        document.querySelector('#newSpeaker').style.display = 'inline-block';
        document.querySelector('#speaker').style.display = 'none';
    }

    saved = false;
    textDirty = true;
}

function saveSpeaker(event) {
    if (event.keyCode == 13) {
        fetch('/index.php/save-speaker', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                'speakerName': document.querySelector('#newSpeaker').value
            })
        })
            .then(response => response.json())
            .then(results => {
                var newSpeaker = document.createElement('option');
                newSpeaker.text = document.querySelector('#newSpeaker').value;
                newSpeaker.value = results.id;
                document.querySelector('#speaker').add(newSpeaker);

                alert(results.msg);
                document.querySelector('#newSpeaker').style.display = 'none';
                document.querySelector('#speaker').style.display = 'inline-block';

                document.querySelector('#newSpeaker').value = '';
                document.querySelector('#speaker').value = results.id;
            });
    }
}

function newSeries() {
    if (document.querySelector('#series').value == 'new') {
        document.querySelector('#newSeries').style.display = 'inline-block';
        document.querySelector('#series').style.display = 'none';
    }

    saved = false;
    textDirty = true;
}

function saveSeries(event) {
    if (event.keyCode == 13) {
        fetch('/index.php/save-series', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                'seriesName': document.querySelector('#newSeries').value
            })
        })
            .then(response => response.json())
            .then(results => {
                var newSeries = document.createElement('option');
                newSeries.text = document.querySelector('#newSeries').value;
                newSeries.value = results.id;
                document.querySelector('#series').add(newSeries);

                alert(results.msg);
                document.querySelector('#newSeries').style.display = 'none';
                document.querySelector('#series').style.display = 'inline-block';

                document.querySelector('#newSeries').value = '';
                document.querySelector('#series').value = results.id;
            });
    }
}

function openRef(closeSidebar = true) {
    document.querySelector('#openRefBtn').classList.add('active');

    refQuery = document.querySelector('#refQuery');
    refQuery.style.display = 'block';

    ref = document.querySelector('#ref');
    refQuery.style.left = ref.offsetLeft + 'px';
    refQuery.style.top = ref.offsetTop + 'px';
    if (closeSidebar) {
        document.querySelector('.toggle').click();
    }
}

function closeRef() {
    document.querySelector('#referenceSearch').value = '';
    document.querySelector('#referenceSearch').style.display = '';
    document.querySelector('#referenceType').value = '';
    document.querySelector('#referenceBook').value = '';
    document.querySelector('#referenceBook').style.display = 'none';
    document.querySelector('#chapter-range').innerText = '';
    document.querySelector('#verse-range').innerText = '';

    document.querySelector('#refQuery').style.display = 'none';
    document.querySelector('#openRefBtn').classList.remove('active');
}

function queryRef(type = null, book = null, input = null) {
    if (!input) {
        var input = document.querySelector('#refQuery #referenceSearch').value;
    }
    if (!type) {
        var type = document.querySelector('#referenceType').value;
    }
    if (!book) {
        var book = document.querySelector('#referenceBook').value;
    }
    fetch('/index.php/retrieve-reference', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            'type': type,
            'book': book,
            'reference': input,
        })
    })
        .then(response => response.json())
        .then(results => {
            const list = document.querySelector('#ref-list');
            var newList = document.createElement('li');
            newList.className = 'tab';
            button = makeButton(results.title);
            newList.appendChild(button);
            list.appendChild(newList);

            const ref = document.querySelector('#ref');
            ref.innerHTML = md.render(results.text);

            references[results.title] = results.text;

            closeRef();

            saved = false;
            textDirty = true;
            saveNote();
            findRefLinks();
        });
}

function makeButton(title) {
    var btn = document.createElement('button');
    btn.innerText = title;
    btn.class = 'button';
    btn.addEventListener('click', function () {
        removeActiveRef();
        document.querySelector('#ref').innerHTML = md.render(references[title]);
        this.classList.add('active');
        findRefLinks();
    });

    btn.addEventListener('dblclick', function () {
        document.querySelector('#ref').innerHTML = '';
        delete references[title];
        var list = this.parentElement;
        list.remove();
        saved = false;
        textDirty = true;
        saveNote();
    });

    removeActiveRef();
    btn.classList.add('active');

    return btn;
}

function removeActiveRef() {
    tabs = document.querySelectorAll('.active');
    for (var t in tabs) {
        if (isFinite(parseInt(t))) {
            tabs[t].classList.remove('active');
        }
    }
}

function retrieveTemplate(orig, dest) {
    const temp = document.querySelector('#' + orig);
    if (temp.value == '0') {
        document.querySelector('#' + dest).value = '';
        return;
    }
    fetch('/index.php/retrieve-template', {
        method: 'POST',
        headers: {
            'Content-Type': 'plain/text'
        },
        body: JSON.stringify({
            'template': temp.value
        })
    })
        .then(response => response.text())
        .then(results => {
            const div = document.querySelector('#' + dest);
            div.value = results;
        });
}

/**
 * Saves the template by sending a POST request to the server with template data.
 */
function saveTemplate() {
    fetch('/index.php/save-template', {
        method: 'POST',
        headers: {
            'Content-Type': 'plain/text'
        },
        body: JSON.stringify({
            'template_id': document.querySelector('#template_id').value,
            'template_name': document.querySelector('#template_name').value,
            'template_value': document.querySelector('#template_value').value,
        })
    })
        .then(response => response.text())
        .then(results => {
            alert(results);
        });
}

function toggleFields() {
    const fieldsContainer = document.getElementById('fields-container');
    const showHideBtn = document.getElementById('show-hide-btn');

    if (fieldsContainer.classList.contains('show')) {
        fieldsContainer.classList.remove('show');
        fieldsContainer.style.display = 'none';
        showHideBtn.classList.remove('active');
    } else {
        fieldsContainer.classList.add('show');
        fieldsContainer.style.display = 'block';
        showHideBtn.classList.add('active');
    }

    setHeight();
}

function retrieveBooks() {
    document.querySelector('#chapter-range').innerText = '';
    document.querySelector('#verse-range').innerText = '';
    document.querySelector('#referenceSearch').value = '';
    document.querySelector('#referenceSearch').style.display = 'none';
    const selectedType = document.querySelector('#referenceType').value;
    if (!selectedType) { return; }

    var bookList = document.querySelector('#referenceBook');
    bookList.style.display = "block";
    bookList.innerHTML = '';
    if (selectedType == 'bible') {
        document.querySelector('#referenceSearch').style.display = 'block';
        var none = document.createElement("option");
        none.value = '';
        none.text = '-- Select --';
        bookList.appendChild(none);
        for (var x in BOOKS.bible) {
            var newBook = document.createElement("option");
            newBook.text = x;
            bookList.appendChild(newBook);
        }
    } else if (selectedType == 'creed') {
        var none = document.createElement('option');
        none.value = '';
        none.text = '-- Select --';
        bookList.appendChild(none);
        for (var x in BOOKS.creed) {
            var newBook = document.createElement('option');
            newBook.value = x;
            newBook.text = BOOKS.creed[x];
            bookList.appendChild(newBook);
        }
    } else if (selectedType == 'cd') {
        var none = document.createElement("option");
        none.value = '';
        none.text = '-- Select --';
        bookList.appendChild(none);
        for (var x in BOOKS.cd) {
            var newBook = document.createElement("option");
            newBook.text = BOOKS.cd[x];
            bookList.appendChild(newBook);
        }
    } else if (selectedType == 'note') {
        var none = document.createElement("option");
        none.value = '';
        none.text = '-- Select --';
        bookList.appendChild(none);

        fetch('/index.php/retrieve-reference', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                'type': 'note'
            })
        })
            .then(response => response.json())
            .then(results => {
                for (var x in results) {
                    var newBook = document.createElement("option");
                    newBook.value = results[x].id;
                    newBook.text = results[x].title;
                    bookList.appendChild(newBook);
                }
            });
    } else {
        var min = BOOKS[selectedType][0];
        var max = BOOKS[selectedType][1];
        var none = document.createElement("option");
        none.value = '';
        none.text = '-- Select --';
        bookList.appendChild(none);
        for (var x = min; x <= max; x++) {
            var newBook = document.createElement("option");
            newBook.value = x;
            newBook.text = x;
            bookList.appendChild(newBook);
        }
    }
}

function filterBooks() {
    document.querySelector('#chapter-range').innerText = '';
    document.querySelector('#verse-range').innerText = '';
    if (document.querySelector('#referenceType').value != 'bible') {
        return;
    }

    var bookList = document.querySelector('#referenceBook');
    var book = BOOKS.bible[bookList.value];
    var max = Object.keys(book).length;

    var chapterRange = document.querySelector('#chapter-range');
    chapterRange.innerText = 'Chapters: ' + max;
}

function filterVerse() {
    if (document.querySelector('#referenceType').value != 'bible') {
        return;
    }

    var bookList = document.querySelector('#referenceBook').value;
    var search = document.querySelector('#referenceSearch').value;
    var chapter = search.split(':')[0];
    var verseRange = document.querySelector('#verse-range');

    if (!BOOKS.bible[bookList] || !BOOKS.bible[bookList][chapter]) {
        verseRange.innerText = 'Unknown Chapter';
        return;
    }
    var verse = BOOKS.bible[bookList][chapter];
    verseRange.innerText = 'Verse: ' + verse;
}

function retrieveReference(el) {
    if (el.value == 'new') {
        document.querySelector('#refName').style.display = 'inline-block';
        return;
    }
    fetch('/index.php/get-reference', {
        method: "POST",
        header: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            file: el.value,
            type: el.options[el.selectedIndex].getAttribute('type')
        })
    })
        .then(response => response.json())
        .then(results => {
            document.querySelector('#reference').value = results.text;
        });
}

function saveReference() {
    var select = document.querySelector('#references');
    fetch('/index.php/save-reference', {
        method: 'POST',
        header: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            type: select.options[select.selectedIndex].getAttribute('type'),
            file: select.value,
            text: document.querySelector('#reference').value
        })
    })
        .then(response => response.json())
        .then(results => {
            alert(results.msg);

            document.querySelector('#reference').value = '';
            document.querySelector('#references').value = '';
        });
}

function previewNote() {
    var noteText = document.querySelector('#notes');
    var notePreview = document.querySelector('#notePreview');
    var previewButton = document.querySelector('#previewBtn');

    const title = document.querySelector('#noteTitle');
    const speaker = document.querySelector('#speaker');
    const passage = document.querySelector('#passage');

    const markdownPreview = "# " + title.value + " - " +
        speaker.options[speaker.selectedIndex].text + " - " + passage.value + "\n\n" + noteText.value;

    notePreview.innerHTML = md.render(markdownPreview);

    if (previewButton.classList.contains('active')) {
        noteText.style.display = 'block';
        notePreview.style.display = 'none';
        previewButton.classList.remove('active');
    } else {
        noteText.style.display = 'none';
        notePreview.style.display = 'block';
        previewButton.classList.add('active');
    }

    findLinks();
}

function findLinks() {
    var links = document.querySelector('#notePreview').querySelectorAll('a');

    for (var i = 0; i < links.length; i++) {
        links[i].addEventListener('click', function (e) {
            e.preventDefault();
            if (!this.href.includes('get-passage')) {
                return;
            }
            var passage = this.href.split('/');
            passage = passage[passage.length - 1];

            fetch(this.href, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    'passage': passage
                })
            })
                .then(response => response.text())
                .then(result => {
                    passage = passage.replace(/\+/g, ' ');
                    psg = passage.split(' ');
                    if (psg.length > 2) {
                        book = psg[0] + ' ' + psg[1];
                        cv = psg[2];
                    } else {
                        book = psg[0];
                        cv = psg[1];
                    }
                    showPassage(
                        e,
                        "<button onclick='closePopup()'>Close</button>&nbsp;&nbsp;" +
                        "<button onclick=\"queryRef('bible', '" + book + "', '" + cv + "')\">Open Ref</button><br/>" +
                        result);
                });
        });
    }
}

function findRefLinks() {
    var links = document.querySelector('#ref').querySelectorAll('a');

    for (var i = 0; i < links.length; i++) {
        links[i].addEventListener('click', function (e) {
            e.preventDefault();
            if (!this.href.includes('get-passage')) {
                return;
            }
            var passage = this.href.split('/');
            passage = passage[passage.length - 1];

            fetch(this.href, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    'passage': passage
                })
            })
                .then(response => response.text())
                .then(result => {
                    passage = passage.replace(/\+/g, ' ');
                    psg = passage.split(' ');
                    if (psg.length > 2) {
                        book = psg[0] + ' ' + psg[1];
                        cv = psg[2];
                    } else {
                        book = psg[0];
                        cv = psg[1];
                    }
                    showPassage(
                        e,
                        "<button onclick='closePopup()'>Close</button>&nbsp;&nbsp;" +
                        "<button onclick=\"queryRef('bible', '" + book + "', '" + cv + "')\">Open Ref</button><br/>" +
                        result);
                });
        });
    }
}

function showPassage(event, text) {
    // Create a new div element for the popup
    const popup = document.querySelector('#passage-popup');
    popup.innerHTML = md.render(text);

    // Position the popup relative to the cursor
    let x = event.clientX + window.scrollX;
    let y = event.clientY + window.scrollY;

    // Set the position of the popup element
    popup.style.top = `${y}px`;
    popup.style.left = `${x}px`;
    popup.style.display = 'block';
}

function closePopup() {
    const popup = document.querySelector('#passage-popup');
    popup.innerHTML = '';
    popup.style.display = 'none';
}

function openNote(openSidebar = true) {
    const noteList = document.querySelector('#note-list');
    const refs = document.querySelector('#ref');

    if (noteList.style.display == 'block') {
        noteList.style.display = 'none';
        refs.style.display = 'block';
    } else {
        noteList.style.display = 'block';
        refs.style.display = 'none';
    }

    if (openSidebar) {
        document.querySelector('.toggle').click();
    }
}

function retrieveNote(id, runOpen = true) {
    fetch('/index.php/get-note', {
        method: 'POST',
        header: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            'id': id
        })
    })
        .then(response => response.json())
        .then(result => {
            var dt = new Date(result.date.date);

            document.querySelector('#notes').value = result.text;
            document.querySelector('#passage').value = result.passage;
            document.querySelector('#series').value = result.series.id;
            document.querySelector('#speaker').value = result.speaker.id;
            document.querySelector('#noteTitle').value = result.title;
            document.querySelector('#noteDate').value = '';
            document.querySelector('#noteDate').value =
                (dt.getMonth() < 9 ? '0' + (dt.getMonth() + 1) : (dt.getMonth() + 1)) + '/' +
                (dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate()) + '/' +
                dt.getFullYear();
            document.querySelector('#noteId').value = result.id;

            if (result.refs) {
                references = result.refs;
            }

            const list = document.querySelector('#ref-list');
            list.innerHTML = '';
            var newList = null;
            for (var x in references) {
                var newList = document.createElement('li');
                newList.className = 'tab';
                var button = makeButton(x);
                newList.appendChild(button);
                list.appendChild(newList);
            }

            if (runOpen) {
                openNote(false);
            }
        });
}

function increaseFont() {
    var currentSize = document.querySelector('#ref').style.fontSize;
    document.querySelector('#ref').style.fontSize = (parseInt(currentSize) + 1) + 'pt';
}

function decreaseFont() {
    var currentSize = document.querySelector('#ref').style.fontSize;
    document.querySelector('#ref').style.fontSize = (parseInt(currentSize) - 1) + 'pt';
}

/**
 * Generates a random UUIDv4 string.
 *
 * @return {string} The generated UUIDv4 string.
 */
function uuidv4() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
        .replace(/[xy]/g, function (c) {
            const r = Math.random() * 16 | 0,
                v = c == 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
}