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

271 lines
7.9 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// Экран ожидания страницы
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 = 'news.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 "/news":
bodyFetch(query);
break;
case "/overview":
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)
})
})
})
})()