300 lines
8.9 KiB
JavaScript
300 lines
8.9 KiB
JavaScript
// Экран ожидания страницы
|
||
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 openInNewTab(url) {
|
||
window.open(url, '_blank').focus();
|
||
}
|
||
|
||
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);
|
||
|
||
|
||
async function fetchData() {
|
||
let log = document.getElementById('log');
|
||
|
||
var serverAddress = "techhub.social";
|
||
|
||
const response = await fetch(`https://${serverAddress}/api/v1/accounts/111518136987654656/statuses`);
|
||
|
||
const data = await response.json();
|
||
|
||
data.forEach(obj => {
|
||
Object.entries(obj).forEach(([key, value]) => {
|
||
|
||
if (key == "id") {
|
||
log.innerHTML = log.innerHTML + `<iframe src="https://${serverAddress}/@Melawy/${value}/embed" class="mastodon-embed" style="max-width: 100%; min-height: 75vh; border: 0" width="60%" height="100%" allowfullscreen="allowfullscreen"></iframe>` + '<br>';
|
||
}
|
||
|
||
});
|
||
log.innerHTML = log.innerHTML + '<br>';
|
||
});
|
||
}
|
||
|
||
|
||
// Загрузка HTML из файла при загрузке URL
|
||
async function bodyFetch(url) {
|
||
if (!url) {
|
||
var tplUrl = 'news.tpl.html';
|
||
} else {
|
||
var tplUrl = url + ".tpl.html";
|
||
}
|
||
|
||
let response = await fetch(tplUrl);
|
||
let body = document.getElementById('body');
|
||
|
||
if (tplUrl == 'news.tpl.html') {fetchData();}
|
||
|
||
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;
|
||
|
||
if (tplUrl == 'news.tpl.html') {fetchData();}
|
||
|
||
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)
|
||
})
|
||
})
|
||
})
|
||
})()
|
||
|