Isekai-Project
/
mediawiki-extension-IsekaiBackgroundWidget
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修复兼容模式

Browse Source
master
落雨楓 3 years ago
parent c2d5d2359b
commit 132feeb955
5 changed files with 199 additions and 191 deletions
Show Stats Download Patch File Download Diff File

2
modules/ext.isekai.backgroundWidget/BgImage.js
View File

File diff suppressed because one or more lines are too long

12
modules/ext.isekai.backgroundWidget/global.less
Unescape Escape View File

@ -1,4 +1,4 @@
@globalTransition: background-color 250ms linear; @globalTransition: opacity 250ms linear, background-color 250ms linear;
@globalBgColor: rgba(252, 252, 252, 0.8); @globalBgColor: rgba(252, 252, 252, 0.8);
@globalBgLoadingColor: rgba(252, 252, 252, 1); @globalBgLoadingColor: rgba(252, 252, 252, 1);
@backdropFilter: saturate(120%) blur(20px); @backdropFilter: saturate(120%) blur(20px);
@ -21,4 +21,14 @@
.breadcrumb { .breadcrumb {
background-color: rgba(255,255,255,0.6); background-color: rgba(255,255,255,0.6);
} }
&.bgimg-fallback {
.bgimg-background-blur {
background: var(--bgimg-blur-image), var(--bgimg-overlay-color, @globalBgColor) !important;
background-blend-mode: saturation !important;
background-attachment: fixed !important;
background-size: var(--bgimg-bg-size) !important;
background-position: var(--bgimg-bg-pos) !important;
}
}
} }

21
modules/ext.isekai.backgroundWidget/minerva.less
Unescape Escape View File

@ -1,8 +1,9 @@
@globalRadius: 0.4em; @globalRadius: 0.4em;
@globalBgColor: rgba(252, 252, 252, 0.8); @globalBgColor: rgba(252, 252, 252, 1);
@globalBgLoadingColor: rgba(252, 252, 252, 1); @globalBgLoadingColor: rgba(252, 252, 252, 1);
@headerBgColor: rgba(252, 252, 252, 0.8); @contentBgColor: rgba(252, 252, 252, 0.5);
@footerBgColor: rgba(255, 255, 255, 0.75); @headerBgColor: rgba(255, 255, 255, 0.65);
@footerBgColor: transparent;
@globalBoxShadow: 0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12); @globalBoxShadow: 0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12);
@backdropFilter: saturate(120%) blur(20px); @backdropFilter: saturate(120%) blur(20px);
@globalTransition: opacity 250ms linear, background-color 250ms linear; @globalTransition: opacity 250ms linear, background-color 250ms linear;
@ -29,26 +30,14 @@
.header-container.header-chrome { .header-container.header-chrome {
background-color: @headerBgColor; background-color: @headerBgColor;
position: relative; position: relative;
&.bgimg-background-loading {
background-color: @globalBgLoadingColor;
}
} }
.minerva-footer { .minerva-footer {
background-color: @footerBgColor; background-color: @footerBgColor;
position: relative; position: relative;
&.bgimg-background-loading {
background-color: @globalBgLoadingColor;
}
} }
#content { #content {
background-color: @globalBgColor; background-color: @contentBgColor;
&.bgimg-background-loading {
background-color: @globalBgLoadingColor;
}
} }
} }

296
modules/ext.isekai.backgroundWidget/timeless.less
Unescape Escape View File

@ -4,179 +4,197 @@
@headerBgColor: transparent; @headerBgColor: transparent;
@footerBgColor: rgba(149, 149, 149, 0.7); @footerBgColor: rgba(149, 149, 149, 0.7);
@footerBgLoadingColor: rgba(149, 149, 149, 1); @footerBgLoadingColor: rgba(149, 149, 149, 1);
@globalBoxShadow: 0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12); @globalBoxShadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2),
0 5px 8px 0 rgba(0, 0, 0, 0.14), 0 1px 14px 0 rgba(0, 0, 0, 0.12);
@backdropFilter: saturate(120%) blur(20px); @backdropFilter: saturate(120%) blur(20px);
@globalTransition: opacity 250ms linear, background-color 250ms linear; @globalTransition: opacity 250ms linear, background-color 250ms linear;
@headerBlurDepth: 10px;
.has-bgimg { .has-bgimg {
.isekai-bgimg { .isekai-bgimg {
position: fixed; position: fixed;
opacity: 0; opacity: 0;
transition: @globalTransition; transition: @globalTransition;
z-index: -2; z-index: -2;
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
} }
.isekai-navbar-bg {
position: fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 3.125em;
}
body {
background: #f3f3f3;
}
#mw-content-container {
background: none;
backdrop-filter: none;
}
#mw-footer-container {
position: relative;
background: none;
background-color: @footerBgColor;
&.bgimg-background-loading {
background-color: @footerBgLoadingColor;
}
}
#mw-content {
background: none;
border: none;
border-bottom-left-radius: @globalRadius;
border-bottom-right-radius: @globalRadius;
box-shadow: @globalBoxShadow;
background-color: @globalBgColor;
&.bgimg-background-loading {
background-color: @globalBgLoadingColor;
}
}
#mw-content-container::after {
display: none;
}
#mw-header-container {
background: @headerBgColor;
}
#simpleSearch {
background: rgba(0, 0, 0, 0.07);
border: solid 1px #a2a9b1;
box-shadow: none;
#searchInput-container input[type="search"]:focus {
background: #fff;
}
}
#mw-content {
position: relative;
}
@media screen and (max-width: 850px) {
.isekai-navbar-bg { .isekai-navbar-bg {
position: fixed; display: none;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 3.125em;
}
body {
background: #f3f3f3;
}
#mw-content-container {
background: none;
backdrop-filter: none;
}
#mw-footer-container {
position: relative;
background: none;
background-color: @footerBgColor;
&.bgimg-background-loading {
background-color: @footerBgLoadingColor;
}
} }
}
@media screen and (max-width: 1099px) {
#mw-content { #mw-content {
background: none; border-bottom-left-radius: 0;
border: none; border-bottom-right-radius: 0;
border-bottom-left-radius: @globalRadius; border: none;
border-bottom-right-radius: @globalRadius; background: none;
box-shadow: @globalBoxShadow; backdrop-filter: none;
box-shadow: none;
background-color: @globalBgColor;
&.bgimg-background-loading {
background-color: @globalBgLoadingColor;
}
} }
#mw-content-container::after { #mw-content-block {
display: none; background: none;
}
#mw-header-container {
background: @headerBgColor;
} }
#simpleSearch { #mw-content-container {
background: rgba(0, 0, 0, 0.07); background-color: @globalBgColor;
border: solid 1px #a2a9b1; backdrop-filter: @backdropFilter;
box-shadow: none;
#searchInput-container input[type="search"]:focus { &.bgimg-background-loading {
background: #fff; background-color: @globalBgLoadingColor;
} }
} }
#mw-content { #mw-header-hack {
position: relative; z-index: 99;
} }
@media screen and (max-width: 850px) { #mw-site-navigation .sidebar-chunk,
.isekai-navbar-bg { #mw-related-navigation .sidebar-chunk {
display: none; background: none;
} backdrop-filter: none;
} }
@media screen and (max-width: 1099px) { .isekai-bgimg {
#mw-content { display: none;
border-bottom-left-radius: 0; }
border-bottom-right-radius: 0; }
border: none;
background: none;
box-shadow: none;
&::before {
background: none;
}
&::after {
display: none;
}
}
#mw-content-block { @media screen and (min-width: 1100px) {
background: none; #mw-site-navigation .sidebar-chunk,
} #mw-related-navigation .sidebar-chunk {
position: relative;
border: none;
border-radius: @globalRadius;
box-shadow: @globalBoxShadow;
#mw-content-container { background: @globalBgColor;
background-color: @globalBgColor;
backdrop-filter: @backdropFilter;
&.bgimg-background-loading { &.bgimg-background-loading {
background-color: @globalBgLoadingColor; background-color: @globalBgLoadingColor;
} }
}
#mw-header-nav-hack { h3 {
background: rgba(255,255,255,0.5); border-bottom: solid 1px #a2a9b1;
} }
}
}
#mw-header-hack { .comment-body textarea,
z-index: 99; .comment-preview {
} background: @globalBgColor;
.isekai-bgimg { &.bgimg-background-loading {
display: none; background-color: @globalBgLoadingColor;
}
} }
}
@media screen and (min-width: 1100px) { .comment-toolbar {
#mw-site-navigation .sidebar-chunk, background: @globalBgColor;
#mw-related-navigation .sidebar-chunk {
position: relative;
border: none;
border-radius: @globalRadius;
box-shadow: @globalBoxShadow;
background: @globalBgColor;
&.bgimg-background-loading { &.bgimg-background-loading {
background-color: @globalBgLoadingColor; background-color: @globalBgLoadingColor;
} }
}
h3 { &.bgimg-fallback {
border-bottom: solid 1px #a2a9b1; #mw-content-container {
} background: none !important;
}
} }
@media screen and (max-width: 1099px) { #mw-footer-container {
#mw-site-navigation .sidebar-chunk, --bgimg-overlay-color: @footerBgColor;
#mw-related-navigation .sidebar-chunk {
&::after {
display: none;
}
}
} }
.comment-body textarea, .comment-preview { @media screen and (max-width: 1099px) {
background: @globalBgColor; #mw-content {
background: none !important;
}
&.bgimg-background-loading { #mw-content-container {
background-color: @globalBgLoadingColor; background: var(--bgimg-blur-image), var(--bgimg-overlay-color, @globalBgColor) !important;
} background-blend-mode: saturation !important;
background-attachment: fixed !important;
background-size: var(--bgimg-bg-size) !important;
background-position: var(--bgimg-bg-pos) !important;
}
} }
.comment-toolbar { @media screen and (max-width: 1099px) {
background: @globalBgColor; #mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
&.bgimg-background-loading { background: none !important;
background-color: @globalBgLoadingColor; }
}
} }
} }
}

59
src/BgImage.js
Unescape Escape View File

@ -1,7 +1,7 @@
import * as StackBlur from './stackblur'; import * as StackBlur from './stackblur';
class BgImage { class BgImage {
constructor(){ constructor() {
this.loaded = false; this.loaded = false;
this.isCrosBlocked = false; this.isCrosBlocked = false;
@ -18,10 +18,7 @@ class BgImage {
} }
}); });
this.domStyles = $('head').append('<style data-type="bgimg-styles"></style>').find('style[data-type="bgimg-styles"]'); this.domStyle = document.documentElement.style;
this.posStyles = $('head').append('<style data-type="bgimg-styles-pos"></style>').find('style[data-type="bgimg-styles-pos"]');
this.domStyleSheet = this.domStyles[0].sheet;
this.posStyleSheet = this.posStyles[0].sheet;
this.hasBlurArea = false; this.hasBlurArea = false;
this.blurRadius = 20; this.blurRadius = 20;
@ -76,10 +73,10 @@ class BgImage {
return featureSupport; return featureSupport;
} }
async loadImage(src, xCenter, yCenter){ async loadImage(src, xCenter, yCenter) {
try { try {
await fetch(src); await fetch(src);
} catch(e){ } catch (e) {
this.isCrosBlocked = true; this.isCrosBlocked = true;
this.img.crossOrigin = null; this.img.crossOrigin = null;
} }
@ -91,7 +88,7 @@ class BgImage {
this.img.src = src; this.img.src = src;
} }
generateBlurImage(){ generateBlurImage() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let canvas = document.createElement('canvas'); let canvas = document.createElement('canvas');
canvas.width = this.img.width; canvas.width = this.img.width;
@ -107,11 +104,11 @@ class BgImage {
}); });
} }
async onImageLoaded(){ async onImageLoaded() {
this.imgRatio = this.img.width / this.img.height; this.imgRatio = this.img.width / this.img.height;
if(this.hasBlurArea && !this.cssFeature.backdropFilter) { // 不支持backdrop-filter，使用js生成模糊 if (this.hasBlurArea && !this.cssFeature.backdropFilter) { // 不支持backdrop-filter，使用js生成模糊
if(!this.isCrosBlocked){ if (!this.isCrosBlocked) {
//生成模糊的图片 //生成模糊的图片
//css会有白边，为了效果好只能用canvas生成了 //css会有白边，为了效果好只能用canvas生成了
await this.generateBlurImage(); await this.generateBlurImage();
@ -122,7 +119,7 @@ class BgImage {
this.fixPosition(); this.fixPosition();
if(!this.loaded){ if (!this.loaded) {
this.viewports.forEach((viewport) => { this.viewports.forEach((viewport) => {
viewport.css({ viewport.css({
backgroundImage: "url('" + this.source + "')", backgroundImage: "url('" + this.source + "')",
@ -136,31 +133,30 @@ class BgImage {
}); });
if (!this.cssFeature.backdropFilter) { if (!this.cssFeature.backdropFilter) {
var css = ".has-bgimg .bgimg-background-blur { "; $('body').addClass('bgimg-fallback');
css += "background-image: url('" + this.blurSource + "'); ";
css += ";"; this.domStyle.setProperty('--bgimg-blur-image', `url('${this.blurSource}')`);
this.domStyleSheet.insertRule(css, this.domStyleSheet.rules.length);
} }
this.loaded = true; this.loaded = true;
} }
} }
onWindowResize(){ onWindowResize() {
if(this.loaded) this.fixPosition(); if (this.loaded) this.fixPosition();
} }
getOverflowSize(screenSize, imgSize, centerPoint){ getOverflowSize(screenSize, imgSize, centerPoint) {
let centerPointPx = imgSize * centerPoint / 100; let centerPointPx = imgSize * centerPoint / 100;
let maxOverflow = imgSize - screenSize; let maxOverflow = imgSize - screenSize;
let absOffset = centerPointPx - (screenSize / 2); let absOffset = centerPointPx - (screenSize / 2);
return Math.max(0, Math.min(maxOverflow, absOffset)); return Math.max(0, Math.min(maxOverflow, absOffset));
} }
fixPosition(){ fixPosition() {
let screenRatio = window.innerWidth / window.innerHeight; let screenRatio = window.innerWidth / window.innerHeight;
//计算出适合的大小以及offset //计算出适合的大小以及offset
if(this.imgRatio > screenRatio){ //窄屏 if (this.imgRatio > screenRatio) { //窄屏
//图片高度 = 屏幕高度，横向靠近中心点 //图片高度 = 屏幕高度，横向靠近中心点
this.imgSize.height = window.innerHeight; this.imgSize.height = window.innerHeight;
this.imgSize.width = this.imgSize.height * this.imgRatio; this.imgSize.width = this.imgSize.height * this.imgRatio;
@ -176,7 +172,7 @@ class BgImage {
this.fixViewportPosition(); this.fixViewportPosition();
} }
fixViewportPosition(){ fixViewportPosition() {
this.viewports.forEach((viewport) => { this.viewports.forEach((viewport) => {
//设置viewport的style //设置viewport的style
viewport.css({ viewport.css({
@ -185,24 +181,19 @@ class BgImage {
}); });
}); });
if(this.hasBlurArea){ if (this.hasBlurArea && !this.cssFeature.backdropFilter) {
//设置模糊背景的style //设置模糊背景的style
let css = ".has-bgimg .bgimg-background-blur { "; this.domStyle.setProperty('--bgimg-bg-size', `${this.imgSize.width}px ${this.imgSize.height}px`);
css += 'background-size: ' + this.imgSize.width + 'px ' + this.imgSize.height + 'px; '; this.domStyle.setProperty('--bgimg-bg-pos', `${this.imgOffset.left}px ${this.imgOffset.top}px`);
css += 'background-position: ' + this.imgOffset.left + 'px ' + this.imgOffset.top + 'px; ';
css += '}';
this.posStyleSheet.insertRule(css, this.posStyleSheet.rules.length);
if(this.posStyleSheet.rules.length > 1) this.posStyleSheet.deleteRule(this.posStyleSheet.rules.length - 2);
} }
} }
addViewport(element){ addViewport(element) {
element.css('opacity', 0); element.css('opacity', 0);
this.viewports.push(element); this.viewports.push(element);
} }
addBlurBackground(element){ addBlurBackground(element) {
let classList = ['bgimg-background-blur', 'bgimg-background-loading']; let classList = ['bgimg-background-blur', 'bgimg-background-loading'];
if (this.cssFeature.backdropFilter) { if (this.cssFeature.backdropFilter) {
classList.push('bgimg-backdrop-blur'); classList.push('bgimg-backdrop-blur');
@ -213,7 +204,7 @@ class BgImage {
} }
} }
if(!global.isekai){ if (!global.isekai) {
global.isekai = {}; global.isekai = {};
} }
global.isekai.BgImage = BgImage; global.isekai.BgImage = BgImage;

Write Preview
Loading…
Cancel
Save