melawy-en-site/public/assets/js/script.js

// Экран ожидания страницы
function showPage() {
    document.getElementById("loader").style.display = "none";
    document.getElementById("body").style.display = "block";
}

function hidePage() {
    document.getElementById("loader").style.display = "block";
    document.getElementById("body").style.display = "none";
}


function showFullscreenImage(element) {
    imageSrc = element.getAttribute('src');
    imageAlt = element.getAttribute('alt');

    myModalImg = document.getElementById('myModalImg');
    myModalImg.setAttribute('src', imageSrc);

    myModalHeader = document.getElementById('myModalHeader');
    myModalHeader.innerText = imageAlt;

    const myModal = new bootstrap.Modal(document.getElementById('myModal'), {})
    myModal.show();
}


let showPage_var;

function ready() {
    showPage_var = setTimeout(showPage, 10);

    // let fullscreenImages = document.getElementsByClassName("fullscreen");
    //
    // Array.from(fullscreenImages).forEach(function(fullscreenImage) {
    //     fullscreenImage.addEventListener('click', showFullscreenImage);
    // });
}

document.addEventListener("DOMContentLoaded", ready);



// Загрузка HTML из файла при загрузке URL
async function bodyFetch(url) {
    if (!url) {
        tplUrl = 'root.tpl.html';
    } else {
        tplUrl = url + ".tpl.html";
    }

    let response = await fetch(tplUrl);
    let body = document.getElementById('body');

    if (response.ok) { // если HTTP-статус в диапазоне 200-299
        // получаем тело ответа (см. про этот метод ниже)
        let text = await response.text();
        body.innerHTML = text;
    } else {
        body.innerHTML = "Ой всё сломалось :(";
    }
}

let query = window.location.pathname;
switch (query) {
case "/root":
    bodyFetch(query);
    break;

case "/download":
    bodyFetch(query);
    break;

case "/donate":
    bodyFetch(query);
    break;

case "/cooperation":
    bodyFetch(query);
    break;

case "/about":
    bodyFetch(query);
    break;

default:
    bodyFetch();
}



// Загрузка HTML из файла при ПЕРЕХОДЕ ПО ССЫЛКЕ
let elements = document.getElementsByClassName("menu");

let fetchPage = async function(evt) {
    evt.preventDefault();

    const controller = new AbortController();
    const signal = controller.signal;

    // Cancel the fetch request in 500ms
    setTimeout(() => controller.abort(), 500);

    var body = document.getElementById('body');
    let text;
    const url = this.getAttribute("href");
    const tplUrl = url + '.tpl.html';
    const linkText = this.text.trim();
    const title = document.title + ": " + linkText;

    try {
        const response = await fetch(tplUrl, { signal });
        text = await response.text();
    } catch (error) {
        // DOMException: The user aborted a request.
        console.log('Error: ', error)
        body.innerHTML = "<p>Ой всё сломалось :(</p>";
    }

    if (text) {
        const stateObj = {"html":text,"pageTitle":title};
        // window.history.replaceState({}, title, url);
        // window.history.replaceState(null, title, url)
        // window.history.replaceState(stateObj, title, url)
        // window.history.pushState({}, title, url);
        window.history.pushState(stateObj, title, url);

        body.innerHTML = text;
    } else {
        body.innerHTML = "<p>Ой всё сломалось :(</p>";
    }

    // let attribute = this.getAttribute("href");
    // let url = attribute + '.tpl.html';
    // let response = await fetch(url);
    // let body = document.getElementById('body');
    // let status = response.status
    // isSuccess = status >= 200 && status < 300 || status === 304;
    //
    // if (isSuccess) { // если HTTP-статус в диапазоне 200-299
    //   // получаем тело ответа (см. про этот метод ниже)
    //   let text = await response.text();
    //   body.innerHTML = text;
    // } else {
    //   body.innerHTML = "<p>Ой всё сломалось :(</p>";
    // }
};

Array.from(elements).forEach(function(element) {
    element.addEventListener('click', fetchPage);
});


// АКТИВАЦИЯ ПОДСКАЗОК
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))


// ПЕРЕХОД НАВЕРХ СТРАНИЦЫ
//Get the button
let mybutton = document.getElementById("btn-back-to-top");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
    scrollFunction();
};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        mybutton.style.display = "block";
    } else {
        mybutton.style.display = "none";
    }
}
// When the user clicks on the button, scroll to the top of the document
mybutton.addEventListener("click", backToTop);

function backToTop() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}



/*!
 * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
 * Copyright 2011-2023 The Bootstrap Authors
 * Licensed under the Creative Commons Attribution 3.0 Unported License.
 */

(() => {
    'use strict'

    const getStoredTheme = () => localStorage.getItem('theme')
    const setStoredTheme = theme => localStorage.setItem('theme', theme)

    const getPreferredTheme = () => {
        const storedTheme = getStoredTheme()
        if (storedTheme) {
            return storedTheme
        }

        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
    }

    const setTheme = theme => {
        if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.documentElement.setAttribute('data-bs-theme', 'dark')
        } else {
        document.documentElement.setAttribute('data-bs-theme', theme)
        }
    }

    setTheme(getPreferredTheme())

    const showActiveTheme = (theme, focus = false) => {
        const themeSwitcher = document.querySelector('#bd-theme')

        if (!themeSwitcher) {
        return
        }

        const themeSwitcherText = document.querySelector('#bd-theme-text')
        const activeThemeIcon = document.querySelector('.theme-icon-active use')
        const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
        const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')

        document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
        element.classList.remove('active')
        element.setAttribute('aria-pressed', 'false')
        })

        btnToActive.classList.add('active')
        btnToActive.setAttribute('aria-pressed', 'true')
        activeThemeIcon.setAttribute('href', svgOfActiveBtn)
        const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
        themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)

        if (focus) {
        themeSwitcher.focus()
        }
    }

    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
        const storedTheme = getStoredTheme()
        if (storedTheme !== 'light' && storedTheme !== 'dark') {
        setTheme(getPreferredTheme())
        }
    })

    window.addEventListener('DOMContentLoaded', () => {
        showActiveTheme(getPreferredTheme())

        document.querySelectorAll('[data-bs-theme-value]')
        .forEach(toggle => {
            toggle.addEventListener('click', () => {
            const theme = toggle.getAttribute('data-bs-theme-value')
            setStoredTheme(theme)
            setTheme(theme)
            showActiveTheme(theme, true)
            console.log(theme)
            })
        })
    })
})()