增加加载动画

master
落雨楓 3 years ago
parent f78aed9bf6
commit f5e588cbad

@ -39,11 +39,35 @@ class Isekai {
$outputPage->addModules('ext.fontawesome');
//$outputPage->addModules('ext.treeview');
// 加载动画,三秒内未加载完成则强制显示
if ($outputPage->getSkin()->getSkinName() === 'timeless') {
$outputPage->addHeadItem(
'loading-animate-script',
<<<HTML
<script type="text/javascript">
var c = document.documentElement.classList;
c.add('content-loading');
setTimeout(function() {
c.remove('content-loading');
c.add('content-loaded');
}, 3000);
document.addEventListener('DOMContentLoaded', function() {
var b = getComputedStyle(document.body, null).backgroundColor;
var a = document.createElement('div');
a.classList.add('page-loading-spinner');
a.innerHTML = '<div class="spinner-box"><div class="circle-border"><div class="circle-core" style="background-color: ' + b + '"></div></div></div>';
document.body.appendChild(a);
});
</script>
HTML
);
}
// 百度统计
$outputPage->addHeadItem(
'baiduhm',
<<<HTML
<script>
<script type="text/javascript">
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");

@ -1,10 +1,11 @@
{
"name": "Isekai wiki",
"name": "Isekai wiki misc",
"namemsg": "isekaiwiki-misc-name",
"author": "Hyperzlib",
"version": "1.0.1",
"url": "https://www.isekai.cn",
"descriptionmsg": "isekai-desc",
"license-name": "ISC",
"descriptionmsg": "isekaiwiki-misc-desc",
"license-name": "MIT",
"type": "other",
"requires": {

@ -1,5 +1,7 @@
{
"isekai-desc": "Isekai wiki performance plugin",
"isekaiwiki-misc-name": "IsekaiWiki Misc",
"isekaiwiki-misc-desc": "Isekai wiki performance plugin",
"isekai-collapse-show": "Show",
"isekai-collapse-hide": "Hide",

@ -1,7 +1,9 @@
{
"isekai-desc": "Isekai wiki performance plugin",
"isekaiwiki-misc-name": "IsekaiWiki Misc",
"isekaiwiki-misc-desc": "Isekai wiki performance plugin",
"isekai-collapse-show": "展開",
"isekai-collapse-hide": "收起",
"isekai-collapse-hide": "隠れる",
"isekai-login-prompt-content": "加入异世界百科,贡献你的脑洞,帮助更多的人吧!",
"isekai-login-prompt-btn-login": "ログイン",

@ -1,5 +1,7 @@
{
"isekai-desc": "异世界百科专用优化插件",
"isekaiwiki-misc-name": "异世界百科 杂项",
"isekaiwiki-misc-desc": "异世界百科专用优化插件",
"isekai-collapse-show": "展开",
"isekai-collapse-hide": "收起",

@ -1,10 +1,25 @@
{
"isekai-desc": "異世界百科專用優化插件",
"isekaiwiki-misc-name": "異世界百科 雜項",
"isekaiwiki-misc-desc": "異世界百科專用優化插件",
"isekai-collapse-show": "展開",
"isekai-collapse-hide": "收起",
"isekai-login-prompt-content": "加入異世界百科,貢獻你的腦洞,幫助更多的人吧!",
"isekai-login-prompt-btn-login": "登錄",
"isekai-login-prompt-btn-createaccount": "創建賬號",
"isekai-login-prompt-btn-cancel": "關閉"
"isekai-login-prompt-btn-cancel": "關閉",
"isekai-background-param-error": "背景圖片參數錯誤:",
"isekai-editor-prompt-content": "請選擇編輯器,使用完整版編輯器可以獲得更好的體驗",
"isekai-editor-prompt-btn-cancel": "取消",
"isekai-editor-prompt-btn-use-mobile": "手機版",
"isekai-editor-prompt-btn-use-desktop": "完整版",
"isekai-userpage": "用戶",
"isekai-chart-undefined-type": "未定義圖表類型",
"isekai-chart-unknow-type": "未知的圖表類型:{0}",
"isekai-chart-transform-error": "資料轉換錯誤:{0}",
"isekai-chart-default-row-name": "資料 {0}"
}

@ -1,13 +1,35 @@
var offsetSize = 55;
var offsetSize = (function() {
if (mw.config.get('skin') === 'timeless') {
return 55;
} else {
return 0;
}
})();
var scrollBehaviorAvaliable = (function() {
var v = navigator.userAgent.match(/Chrome\/(?<version>\S+)/);
if (v && v.groups.version) { // 检测chrome版本
var chromeVersion = parseInt(v.groups.version);
return chromeVersion >= 61;
} else { // 非chrome
return true;
}
})();
function scrollToAnchor(link){
var target = $(link.replace(/\./g, '\\.'));
if(target.length > 0){
target.click(function(){ return false; });
var position = target.offset().top - offsetSize;
$('html, body').animate({
scrollTop: position,
}, 500);
if (scrollBehaviorAvaliable) {
window.scrollTo({
top: position,
behavior: 'smooth'
});
} else {
$('html, body').animate({
scrollTop: position,
}, 500);
}
return false;
} else {
return true;
@ -69,29 +91,12 @@ function shouldShowPrompt(){
}
$(function(){
//折叠
$('.mw-collapse').each(function(){
var dom = $(this);
dom.find('.mw-collapse-title:first').append('<span class="toctoggle">&nbsp;<a role="button" tabindex="0" class="mw-collapse-toggle">显示</a>&nbsp;</span>');
var content = dom.find('.mw-collapse-content:first');
var toggleBtn = dom.find('.mw-collapse-toggle:first');
toggleBtn.click(function(){
if(content.css('display') === 'none'){
toggleBtn.text(mw.message('isekai-collapse-hide').parse());
content.fadeIn(250);
} else {
toggleBtn.text(mw.message('isekai-collapse-show').parse());
content.fadeOut(150);
}
});
});
//锚链接偏移
$('body').on('click', 'a', function(){
$('body').on('click', 'a', function() {
var href = $(this).prop('href');
var path = location.origin + location.pathname;
if(typeof href === 'string' && href.startsWith(path) && href[path.length] == '#' && href.length > path.length + 1){
return scrollToAnchor(href.substr(path.length));
return scrollToAnchor(href.substring(path.length));
}
});
@ -228,4 +233,13 @@ $(function(){
return _getProviderLabel.call(this, provider);
};
}
// 加载完成,开始动画
requestAnimationFrame(function() {
$('html').removeClass('content-loading').addClass('content-loaded');
}, 0);
window.addEventListener('beforeunload', function() {
$('html').addClass('content-unloading');
});
});

@ -1,9 +1,110 @@
// 页面加载动画
body.skin-timeless {
#mw-content-container,
#mw-footer-container {
transition: opacity 150ms linear;
}
#mw-overscroll-bottom-cover {
transition: opacity 0ms linear 150ms;
}
}
.page-loading-spinner {
display: none;
position: fixed;
top: 30vh;
margin: 0 auto;
width: 100%;
justify-content: center;
}
body.skin-timeless {
.spinner-box {
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
.circle-border {
width: 150px;
height: 150px;
padding: 3px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background: #3f51b5;
background: linear-gradient(0deg,rgba(63, 81, 181, 0.1) 33%,#3f51b5 100%);
animation: spin .8s linear 0s infinite;
}
.circle-core {
width: 100%;
height: 100%;
background-color: #f3f3f3;
border-radius: 50%;
}
@media screen and (max-width: 850px) {
.circle-core {
background-color: #fff;
}
}
}
}
@keyframes spin {
0% {
transform: rotate(0);
}
99% {
transform: rotate(356.4deg);
}
}
html.content-loading body.skin-timeless {
#mw-content-container,
#mw-footer-container {
opacity: 0;
}
#mw-overscroll-bottom-cover {
opacity: 0;
}
.page-loading-spinner {
display: flex;
}
}
html.content-unloading body.skin-timeless {
#mw-content-container,
#mw-footer-container {
opacity: 0;
}
#mw-overscroll-bottom-cover {
transition: none;
opacity: 0;
}
}
html.content-loaded body.skin-timeless {
}
// 折叠区域
.mw-collapse-content {
display: none;
margin: 1em 0 0;
}
.mw-collapse-toggle {
-webkit-user-select: none;
user-select: none;
cursor: pointer;
}
.wikitable-container .wikitable {
@ -109,6 +210,7 @@
}
}
// 面包屑
.breadcrumb {
padding: 8px 15px;
margin-bottom: 10px;
@ -137,6 +239,14 @@
}
}
@media print {
#toc,
#contentSub .breadcrumb,
#flowthread {
display: none;
}
}
.subpages {
display: none !important;
}
@ -156,4 +266,8 @@
margin: 0 0.5em 0.25em 0;
}
}
}
.oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget {
width: auto !important;
}
Loading…
Cancel
Save