PJ-568
8 months ago
parent
738ae04f57
commit
10ee845eb7
@ -1,31 +0,0 @@
|
||||
#loading {
|
||||
position: fixed;
|
||||
background-color: #212121;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1000000
|
||||
}
|
||||
|
||||
#Calc-loading_bg{
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
.Calc-loader {
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
font-family: helvetica, arial, sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
color: #0277BD;
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 980px){.Clac-loader{width:80%}}
|
||||
@media screen and (min-width: 980px){.Clac-loader{width:25rem}}
|
||||
@ -1,4 +1,63 @@
|
||||
html {
|
||||
color: #DDD;
|
||||
background-color: #111;
|
||||
}
|
||||
html {
|
||||
color: #DDD;
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
#translate>.translateSelectLanguage {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
padding: 0.3rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
color: #DDD;
|
||||
background-color: #795548;
|
||||
border: 2px solid #8D6E63;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 980px) {
|
||||
#translate>.translateSelectLanguage {
|
||||
left: 1rem;
|
||||
top: 1rem;
|
||||
font-size: .8rem;
|
||||
width: 6rem
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 980px) {
|
||||
#translate>.translateSelectLanguage {
|
||||
left: 2rem;
|
||||
top: 2rem;
|
||||
font-size: 1rem
|
||||
}
|
||||
}
|
||||
|
||||
/* 加载进度条 */
|
||||
.loading-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99999;
|
||||
opacity: 0;
|
||||
transition: opacity .4s linear;
|
||||
|
||||
.progress {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 4px;
|
||||
background-color: #007bff;
|
||||
box-shadow: 0 0 10px rgba(119, 182, 255, .7);
|
||||
}
|
||||
|
||||
&.loading {
|
||||
opacity: 1;
|
||||
transition: none;
|
||||
|
||||
.progress {
|
||||
transition: width .4s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 加载进度条结束 */
|
||||
@ -1,12 +0,0 @@
|
||||
#translate>.translateSelectLanguage {
|
||||
cursor:pointer;
|
||||
position:absolute;
|
||||
padding:0.3rem;
|
||||
padding-left:0.5rem;
|
||||
padding-right:0.5rem;
|
||||
color: #DDD;
|
||||
background-color: #795548;
|
||||
border:2px solid #8D6E63;
|
||||
}
|
||||
@media screen and (max-width: 980px){#translate>.translateSelectLanguage {left:1rem;top:1rem;font-size:.8rem;width:6rem}}
|
||||
@media screen and (min-width: 980px){#translate>.translateSelectLanguage {left:2rem;top:2rem;font-size:1rem}}
|
||||
@ -1,83 +0,0 @@
|
||||
// 获取用户使用的语种。
|
||||
var lang = translate.language.getCurrent();
|
||||
var giscus_lang = "zh-CN";
|
||||
switch (lang) {
|
||||
case "chinese_traditional":
|
||||
giscus_lang = "zh-TW";
|
||||
break;
|
||||
case "english":
|
||||
giscus_lang = "en";
|
||||
break;
|
||||
case "spanish":
|
||||
giscus_lang = "es";
|
||||
break;
|
||||
case "japanese":
|
||||
giscus_lang = "ja";
|
||||
break;
|
||||
case "korean":
|
||||
giscus_lang = "ko";
|
||||
break;
|
||||
case "french":
|
||||
giscus_lang = "fr";
|
||||
break;
|
||||
case "arabic":
|
||||
giscus_lang = "ar";
|
||||
break;
|
||||
case "catalan":
|
||||
giscus_lang = "ca";
|
||||
break;
|
||||
case "danish":
|
||||
giscus_lang = "da";
|
||||
break;
|
||||
case "deutsch":
|
||||
giscus_lang = "de";
|
||||
break;
|
||||
case "persian":
|
||||
giscus_lang = "fa";
|
||||
break;
|
||||
case "greek":
|
||||
giscus_lang = "gr";
|
||||
break;
|
||||
case "serbian":
|
||||
giscus_lang = "hbs";
|
||||
break;
|
||||
case "hebrew":
|
||||
giscus_lang = "he";
|
||||
break;
|
||||
case "hungarian":
|
||||
giscus_lang = "hu";
|
||||
break;
|
||||
case "italian":
|
||||
giscus_lang = "it";
|
||||
break;
|
||||
default:
|
||||
giscus_lang = "zh-CN";
|
||||
break;
|
||||
}
|
||||
|
||||
var giscus = function () {
|
||||
const script = document.createElement("script");
|
||||
script.type = "text/javascript";
|
||||
script.src = "https://giscus.app/client.js";
|
||||
|
||||
|
||||
script.setAttribute("data-repo", "PJ-568/568_Calc");
|
||||
script.setAttribute("data-repo-id", "R_kgDOKgTh_A");
|
||||
script.setAttribute("data-category", "Announcements");
|
||||
script.setAttribute("data-category-id", "DIC_kwDOKgTh_M4CaKUO");
|
||||
|
||||
script.setAttribute("data-mapping", "title");
|
||||
script.setAttribute("data-strict", "1");
|
||||
script.setAttribute("data-reactions-enabled", "1");
|
||||
script.setAttribute("data-emit-metadata", "0");
|
||||
script.setAttribute("data-input-position", "top");
|
||||
script.setAttribute("data-theme", "transparent_dark");
|
||||
script.setAttribute("data-lang", giscus_lang);
|
||||
script.setAttribute("data-loading", "lazy");
|
||||
|
||||
script.crossOrigin = "anonymous";
|
||||
script.async = true;
|
||||
document.getElementById("giscus-container").appendChild(script);
|
||||
};
|
||||
|
||||
window.addEventListener('load', giscus);
|
||||
@ -1,26 +0,0 @@
|
||||
function includeHTML() {
|
||||
var elements = document.getElementsByTagName("include");
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
var element = elements[i];
|
||||
var file = element.getAttribute("src");
|
||||
if (file) {
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState === 4 && this.status === 200) {
|
||||
element.innerHTML = this.responseText;
|
||||
// 执行加载的JavaScript代码
|
||||
var scripts = element.getElementsByTagName("script");
|
||||
for (var j = 0; j < scripts.length; j++) {
|
||||
var script = document.createElement("script");
|
||||
script.innerHTML = scripts[j].innerHTML;
|
||||
document.body.appendChild(script);
|
||||
}
|
||||
}
|
||||
};
|
||||
xhttp.open("GET", file, true);
|
||||
xhttp.send();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", includeHTML);
|
||||
@ -1,43 +0,0 @@
|
||||
// const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
|
||||
|
||||
document.onreadystatechange=function () {
|
||||
if (document.readyState=="complete"){
|
||||
loadingFade();
|
||||
}
|
||||
}
|
||||
|
||||
function startLoading() {
|
||||
const position = document.getElementById('loading');
|
||||
var loadingBackground=document.getElementById('Calc-loading_bg');
|
||||
position.style.display = 'block';
|
||||
loadingBackground.style.opacity=1;
|
||||
setTimeout(() => loadingFade(), 30000)
|
||||
}
|
||||
|
||||
function loadingFade() {
|
||||
var opacity=1;
|
||||
const position = document.getElementById('loading');
|
||||
var loadingBackground=document.getElementById('Calc-loading_bg');
|
||||
var time=setInterval(function () {
|
||||
if (opacity<=0){
|
||||
clearInterval(time);
|
||||
position.style.display = 'none';
|
||||
try{
|
||||
translate.listener.start();
|
||||
translate.language.setLocal('chinese_simplified');
|
||||
translate.setAutoDiscriminateLocalLanguage();
|
||||
translate.language.setUrlParamControl();
|
||||
translate.ignore.class.push('notTranslate');
|
||||
}
|
||||
catch(e){console.log(e);}
|
||||
translate.setUseVersion2();
|
||||
translate.nomenclature.append('chinese_simplified','english',`
|
||||
568_Calc=568_Calc
|
||||
`);
|
||||
translate.execute();
|
||||
}
|
||||
|
||||
loadingBackground.style.opacity=opacity;
|
||||
opacity-=0.4;
|
||||
},100);
|
||||
}
|
||||
@ -0,0 +1,215 @@
|
||||
(function () {
|
||||
// giscus 评论系统
|
||||
//// 获取用户使用的语种并转换为 giscus 可识别的标记
|
||||
const getCurrentLanguage = function () {
|
||||
var lang = translate.language.getCurrent();
|
||||
var giscus_lang = "zh-CN";
|
||||
switch (lang) {
|
||||
case "chinese_traditional":
|
||||
giscus_lang = "zh-TW";
|
||||
break;
|
||||
case "english":
|
||||
giscus_lang = "en";
|
||||
break;
|
||||
case "spanish":
|
||||
giscus_lang = "es";
|
||||
break;
|
||||
case "japanese":
|
||||
giscus_lang = "ja";
|
||||
break;
|
||||
case "korean":
|
||||
giscus_lang = "ko";
|
||||
break;
|
||||
case "french":
|
||||
giscus_lang = "fr";
|
||||
break;
|
||||
case "arabic":
|
||||
giscus_lang = "ar";
|
||||
break;
|
||||
case "catalan":
|
||||
giscus_lang = "ca";
|
||||
break;
|
||||
case "danish":
|
||||
giscus_lang = "da";
|
||||
break;
|
||||
case "deutsch":
|
||||
giscus_lang = "de";
|
||||
break;
|
||||
case "persian":
|
||||
giscus_lang = "fa";
|
||||
break;
|
||||
case "greek":
|
||||
giscus_lang = "gr";
|
||||
break;
|
||||
case "serbian":
|
||||
giscus_lang = "hbs";
|
||||
break;
|
||||
case "hebrew":
|
||||
giscus_lang = "he";
|
||||
break;
|
||||
case "hungarian":
|
||||
giscus_lang = "hu";
|
||||
break;
|
||||
case "italian":
|
||||
giscus_lang = "it";
|
||||
break;
|
||||
default:
|
||||
giscus_lang = "zh-CN";
|
||||
break;
|
||||
}
|
||||
return giscus_lang;
|
||||
}
|
||||
|
||||
var SetupGiscus = function (giscus_lang) {
|
||||
if (document.getElementById("giscus-container") != null) {
|
||||
const script = document.createElement("script");
|
||||
script.type = "text/javascript";
|
||||
script.src = "https://giscus.app/client.js";
|
||||
|
||||
|
||||
script.setAttribute("data-repo", "Hamud-Lang/Hamud_Book");
|
||||
script.setAttribute("data-repo-id", "R_kgDOKAX-uw");
|
||||
script.setAttribute("data-category", "Announcements");
|
||||
script.setAttribute("data-category-id", "DIC_kwDOKAX-u84CYRSk");
|
||||
|
||||
script.setAttribute("data-mapping", "title");
|
||||
script.setAttribute("data-strict", "1");
|
||||
script.setAttribute("data-reactions-enabled", "1");
|
||||
script.setAttribute("data-emit-metadata", "0");
|
||||
script.setAttribute("data-input-position", "top");
|
||||
script.setAttribute("data-theme", 'transparent_dark');
|
||||
script.setAttribute("data-lang", giscus_lang);
|
||||
|
||||
script.crossOrigin = "anonymous";
|
||||
script.async = true;
|
||||
|
||||
document.getElementById("giscus-container").appendChild(script);
|
||||
}
|
||||
}
|
||||
|
||||
function includeHTML() {
|
||||
var elements = document.getElementsByTagName("include");
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
var element = elements[i];
|
||||
var file = element.getAttribute("src");
|
||||
if (file) {
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function () {
|
||||
if (this.readyState === 4 && this.status === 200) {
|
||||
element.innerHTML = this.responseText;
|
||||
// 执行加载的JavaScript代码
|
||||
var scripts = element.getElementsByTagName("script");
|
||||
for (var j = 0; j < scripts.length; j++) {
|
||||
var script = document.createElement("script");
|
||||
script.innerHTML = scripts[j].innerHTML;
|
||||
document.body.appendChild(script);
|
||||
}
|
||||
}
|
||||
};
|
||||
xhttp.open("GET", file, true);
|
||||
xhttp.send();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// translate-js 翻译系统
|
||||
function initTranslate() {
|
||||
try {
|
||||
translate.service.use('client.edge');
|
||||
translate.listener.start();
|
||||
translate.language.setLocal('chinese_simplified');
|
||||
translate.setAutoDiscriminateLocalLanguage();
|
||||
translate.language.setUrlParamControl();
|
||||
translate.ignore.class.push('notTranslate');
|
||||
translate.execute();
|
||||
}
|
||||
catch (e) {
|
||||
console.log('翻译系统出错：' + e);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var loadingBar = document.querySelector(".loading-bar");
|
||||
var progress = document.querySelector(".loading-bar .progress");
|
||||
var timer = null;
|
||||
|
||||
function initAni() {
|
||||
loadingBar = document.querySelector(".loading-bar");
|
||||
progress = document.querySelector(".loading-bar .progress");
|
||||
}
|
||||
|
||||
function endLoad() {
|
||||
clearInterval(timer);
|
||||
progress.style.width = "100%";
|
||||
loadingBar.classList.remove("loading");
|
||||
|
||||
setTimeout(function () {
|
||||
progress.style.width = 0;
|
||||
}, 400);
|
||||
}
|
||||
|
||||
|
||||
// PJAX 集成
|
||||
let pjax;
|
||||
//// 初始化 PJAX
|
||||
function initPjax() {
|
||||
try {
|
||||
const Pjax = window.Pjax || function () { };
|
||||
pjax = new Pjax({
|
||||
selectors: [
|
||||
'head title',
|
||||
'.container',
|
||||
'[data-pjax]',
|
||||
'.pjax-reload'
|
||||
]
|
||||
})
|
||||
}
|
||||
catch (e) {
|
||||
console.log('PJAX 出错：' + e);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 初始化
|
||||
function initialize() {
|
||||
initPjax(); //// 初始化 PJAX
|
||||
includeHTML(); //// 引入
|
||||
initTranslate(); //// 初始化页面翻译
|
||||
initAni(); //// 初始化加载动画
|
||||
SetupGiscus(getCurrentLanguage()); //// 初始化评论系统
|
||||
}
|
||||
|
||||
|
||||
// 触发器
|
||||
//// 网页加载完毕后触发
|
||||
window.addEventListener('DOMContentLoaded', () => initialize());
|
||||
//// 翻译执行完成后触发
|
||||
translate.listener.renderTaskFinish = function () {
|
||||
SetupGiscus(getCurrentLanguage());
|
||||
}
|
||||
//// Pjax 开始时执行的函数
|
||||
document.addEventListener("pjax:send", function () {
|
||||
var loadingBarWidth = 20;
|
||||
var MAX_LOADING_WIDTH = 95;
|
||||
|
||||
loadingBar.classList.add("loading");
|
||||
progress.style.width = loadingBarWidth + "%";
|
||||
|
||||
clearInterval(timer);
|
||||
timer = setInterval(function () {
|
||||
loadingBarWidth += 3;
|
||||
|
||||
if (loadingBarWidth > MAX_LOADING_WIDTH) {
|
||||
loadingBarWidth = MAX_LOADING_WIDTH;
|
||||
}
|
||||
|
||||
progress.style.width = loadingBarWidth + "%";
|
||||
}, 500);
|
||||
});
|
||||
//// 监听 Pjax 完成后，重新加载的函数
|
||||
document.addEventListener("pjax:complete", function () {
|
||||
SetupGiscus(getCurrentLanguage());
|
||||
includeHTML();
|
||||
endLoad();
|
||||
})
|
||||
})();
|
||||
Loading…
Reference in new issue