From 132feeb955551db790e6f3c727fee881cb2acc4f Mon Sep 17 00:00:00 2001 From: Lex Lim Date: Fri, 20 May 2022 11:15:47 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=85=BC=E5=AE=B9=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ext.isekai.backgroundWidget/BgImage.js | 2 +- .../ext.isekai.backgroundWidget/global.less | 12 +- .../ext.isekai.backgroundWidget/minerva.less | 21 +- .../ext.isekai.backgroundWidget/timeless.less | 296 ++++++++++-------- src/BgImage.js | 59 ++-- 5 files changed, 199 insertions(+), 191 deletions(-) diff --git a/modules/ext.isekai.backgroundWidget/BgImage.js b/modules/ext.isekai.backgroundWidget/BgImage.js index 34fe220..90a29c4 100644 --- a/modules/ext.isekai.backgroundWidget/BgImage.js +++ b/modules/ext.isekai.backgroundWidget/BgImage.js @@ -1 +1 @@ -!function(t){var e={};function i(r){if(e[r])return e[r].exports;var s=e[r]={i:r,l:!1,exports:{}};return t[r].call(s.exports,s,s.exports,i),s.l=!0,s.exports}i.m=t,i.c=e,i.d=function(t,e,r){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var s in t)i.d(r,s,function(e){return t[e]}.bind(null,s));return r},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=2)}([function(t,e){var i;i=function(){return this}();try{i=i||new Function("return this")()}catch(t){"object"==typeof window&&(i=window)}t.exports=i},function(t,e,i){!function(t){"use strict";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var i=[512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512,454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512,482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456,437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512,497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328,320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456,446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335,329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512,505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405,399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328,324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271,268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456,451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,289,287,285,282,280,278,275,273,271,269,267,265,263,261,259],r=[9,11,12,13,13,14,14,15,15,15,15,16,16,16,16,17,17,17,17,17,17,17,18,18,18,18,18,18,18,18,18,19,19,19,19,19,19,19,19,19,19,19,19,19,19,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24];function s(t,i,r,s,n){if("string"==typeof t&&(t=document.getElementById(t)),!t||"object"!==e(t)||!("getContext"in t))throw new TypeError("Expecting canvas with `getContext` method in processCanvasRGB(A) calls!");var o=t.getContext("2d");try{return o.getImageData(i,r,s,n)}catch(t){throw new Error("unable to access image data: "+t)}}function n(t,e,i,r,n,a){if(!(isNaN(a)||a<1)){a|=0;var h=s(t,e,i,r,n);h=o(h,0,0,r,n,a),t.getContext("2d").putImageData(h,e,i)}}function o(t,e,s,n,o,a){var h,l,u,d,c,f,m,b,p,y,w,x,S,v,k,B,O,C,z,R,I,E,P,F,j,A=t.data,W=2*a+1,_=n-1,L=o-1,M=a+1,G=M*(M+1)/2,N=new g,D=N;for(u=1;u>U,0!==P?(P=255/P,A[f]=(b*V>>U)*P,A[f+1]=(p*V>>U)*P,A[f+2]=(y*V>>U)*P):A[f]=A[f+1]=A[f+2]=0,b-=x,p-=S,y-=v,w-=k,x-=H.r,S-=H.g,v-=H.b,k-=H.a,d=m+((d=h+a+1)<_?d:_)<<2,b+=B+=H.r=A[d],p+=O+=H.g=A[d+1],y+=C+=H.b=A[d+2],w+=z+=H.a=A[d+3],H=H.next,x+=R=T.r,S+=I=T.g,v+=E=T.b,k+=P=T.a,B-=R,O-=I,C-=E,z-=P,T=T.next,f+=4;m+=n}for(h=0;h>U,P>0?(P=255/P,A[d]=(b*V>>U)*P,A[d+1]=(p*V>>U)*P,A[d+2]=(y*V>>U)*P):A[d]=A[d+1]=A[d+2]=0,b-=x,p-=S,y-=v,w-=k,x-=H.r,S-=H.g,v-=H.b,k-=H.a,d=h+((d=l+M)>D,E[f+1]=p*N>>D,E[f+2]=y*N>>D,b-=w,p-=x,y-=S,w-=M.r,x-=M.g,S-=M.b,d=m+((d=h+a+1)>D,E[d+1]=p*N>>D,E[d+2]=y*N>>D,b-=w,p-=x,y-=S,w-=M.r,x-=M.g,S-=M.b,d=h+((d=l+A)').find('style[data-type="bgimg-styles"]'),this.posStyles=$("head").append('').find('style[data-type="bgimg-styles-pos"]'),this.domStyleSheet=this.domStyles[0].sheet,this.posStyleSheet=this.posStyles[0].sheet,this.hasBlurArea=!1,this.blurRadius=20,this.blurSource=null,this.img=new Image,this.img.crossOrigin="anonymous",this.img.addEventListener("load",this.onImageLoaded.bind(this)),this.imgRatio=0,this.imgOffset={top:0,left:0},this.imgSize={width:0,height:0},this.viewports=[],this.blurWidgets=[],window.addEventListener("resize",this.onWindowResize.bind(this))}getCssFeatures(t){var e=(navigator.userAgent||"").match(/(?(chrome|firefox|safari))\/(?[0-9]+(\.[0-9]+)?)/i);if(e){var i=(e.groups.browser||"").toLowerCase(),r=parseFloat(e.groups.version),s={};for(var n in t){var o=t[n];for(var a in s[n]=!1,o)if(i==a){r>=o[a]&&(s[n]=!0);break}}return s}}async loadImage(t,e,i){try{await fetch(t)}catch(t){this.isCrosBlocked=!0,this.img.crossOrigin=null}this.source=t,this.xCenter=e||50,this.yCenter=i||50,this.img.src=t}generateBlurImage(){return new Promise((t,i)=>{let r=document.createElement("canvas");r.width=this.img.width,r.height=this.img.height,r.getContext("2d").drawImage(this.img,0,0),e.canvasRGBA(r,0,0,r.width,r.height,this.blurRadius),r.toBlob(e=>{this.blurSource=URL.createObjectURL(e),t()})})}async onImageLoaded(){if(this.imgRatio=this.img.width/this.img.height,this.hasBlurArea&&!this.cssFeature.backdropFilter&&(this.isCrosBlocked?this.blurSource=this.source:await this.generateBlurImage()),this.fixPosition(),!this.loaded){if(this.viewports.forEach(t=>{t.css({backgroundImage:"url('"+this.source+"')",backgroundAttachement:"fixed",opacity:1})}),this.blurWidgets.forEach(t=>{t.removeClass("bgimg-background-loading")}),!this.cssFeature.backdropFilter){var t=".has-bgimg .bgimg-background-blur { ";t+="background-image: url('"+this.blurSource+"'); ",t+=";",this.domStyleSheet.insertRule(t,this.domStyleSheet.rules.length)}this.loaded=!0}}onWindowResize(){this.loaded&&this.fixPosition()}getOverflowSize(t,e,i){let r=e-t,s=e*i/100-t/2;return Math.max(0,Math.min(r,s))}fixPosition(){let t=window.innerWidth/window.innerHeight;this.imgRatio>t?(this.imgSize.height=window.innerHeight,this.imgSize.width=this.imgSize.height*this.imgRatio,this.imgOffset.top=0,this.imgOffset.left=-this.getOverflowSize(window.innerWidth,this.imgSize.width,this.xCenter)):(this.imgSize.width=window.innerWidth,this.imgSize.height=this.imgSize.width/this.imgRatio,this.imgOffset.left=0,this.imgOffset.top=-this.getOverflowSize(window.innerHeight,this.imgSize.height,this.yCenter)),this.fixViewportPosition()}fixViewportPosition(){if(this.viewports.forEach(t=>{t.css({backgroundSize:this.imgSize.width+"px "+this.imgSize.height+"px",backgroundPosition:this.imgOffset.left+"px "+this.imgOffset.top+"px"})}),this.hasBlurArea){let t=".has-bgimg .bgimg-background-blur { ";t+="background-size: "+this.imgSize.width+"px "+this.imgSize.height+"px; ",t+="background-position: "+this.imgOffset.left+"px "+this.imgOffset.top+"px; ",t+="}",this.posStyleSheet.insertRule(t,this.posStyleSheet.rules.length),this.posStyleSheet.rules.length>1&&this.posStyleSheet.deleteRule(this.posStyleSheet.rules.length-2)}}addViewport(t){t.css("opacity",0),this.viewports.push(t)}addBlurBackground(t){let e=["bgimg-background-blur","bgimg-background-loading"];this.cssFeature.backdropFilter&&e.push("bgimg-backdrop-blur"),t.addClass(e),this.hasBlurArea=!0,this.blurWidgets.push(t)}}}.call(this,i(0))}]); \ No newline at end of file +!function(t){var e={};function i(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,i),o.l=!0,o.exports}i.m=t,i.c=e,i.d=function(t,e,r){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)i.d(r,o,function(e){return t[e]}.bind(null,o));return r},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=2)}([function(t,e){var i;i=function(){return this}();try{i=i||new Function("return this")()}catch(t){"object"==typeof window&&(i=window)}t.exports=i},function(t,e,i){!function(t){"use strict";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var i=[512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512,454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512,482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456,437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512,497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328,320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456,446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335,329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512,505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405,399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328,324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271,268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456,451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,289,287,285,282,280,278,275,273,271,269,267,265,263,261,259],r=[9,11,12,13,13,14,14,15,15,15,15,16,16,16,16,17,17,17,17,17,17,17,18,18,18,18,18,18,18,18,18,19,19,19,19,19,19,19,19,19,19,19,19,19,19,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24];function o(t,i,r,o,n){if("string"==typeof t&&(t=document.getElementById(t)),!t||"object"!==e(t)||!("getContext"in t))throw new TypeError("Expecting canvas with `getContext` method in processCanvasRGB(A) calls!");var s=t.getContext("2d");try{return s.getImageData(i,r,o,n)}catch(t){throw new Error("unable to access image data: "+t)}}function n(t,e,i,r,n,a){if(!(isNaN(a)||a<1)){a|=0;var h=o(t,e,i,r,n);h=s(h,0,0,r,n,a),t.getContext("2d").putImageData(h,e,i)}}function s(t,e,o,n,s,a){var h,u,c,f,l,d,m,b,p,w,x,y,v,S,k,B,C,O,z,R,I,P,E,F,j,A=t.data,W=2*a+1,_=n-1,L=s-1,M=a+1,G=M*(M+1)/2,N=new g,$=N;for(c=1;c>V,0!==E?(E=255/E,A[d]=(b*T>>V)*E,A[d+1]=(p*T>>V)*E,A[d+2]=(w*T>>V)*E):A[d]=A[d+1]=A[d+2]=0,b-=y,p-=v,w-=S,x-=k,y-=D.r,v-=D.g,S-=D.b,k-=D.a,f=m+((f=h+a+1)<_?f:_)<<2,b+=B+=D.r=A[f],p+=C+=D.g=A[f+1],w+=O+=D.b=A[f+2],x+=z+=D.a=A[f+3],D=D.next,y+=R=H.r,v+=I=H.g,S+=P=H.b,k+=E=H.a,B-=R,C-=I,O-=P,z-=E,H=H.next,d+=4;m+=n}for(h=0;h>V,E>0?(E=255/E,A[f]=(b*T>>V)*E,A[f+1]=(p*T>>V)*E,A[f+2]=(w*T>>V)*E):A[f]=A[f+1]=A[f+2]=0,b-=y,p-=v,w-=S,x-=k,y-=D.r,v-=D.g,S-=D.b,k-=D.a,f=h+((f=u+M)>$,P[d+1]=p*N>>$,P[d+2]=w*N>>$,b-=x,p-=y,w-=v,x-=M.r,y-=M.g,v-=M.b,f=m+((f=h+a+1)>$,P[f+1]=p*N>>$,P[f+2]=w*N>>$,b-=x,p-=y,w-=v,x-=M.r,y-=M.g,v-=M.b,f=h+((f=u+A)(chrome|firefox|safari))\/(?[0-9]+(\.[0-9]+)?)/i);if(e){var i=(e.groups.browser||"").toLowerCase(),r=parseFloat(e.groups.version),o={};for(var n in t){var s=t[n];for(var a in o[n]=!1,s)if(i==a){r>=s[a]&&(o[n]=!0);break}}return o}}async loadImage(t,e,i){try{await fetch(t)}catch(t){this.isCrosBlocked=!0,this.img.crossOrigin=null}this.source=t,this.xCenter=e||50,this.yCenter=i||50,this.img.src=t}generateBlurImage(){return new Promise((t,i)=>{let r=document.createElement("canvas");r.width=this.img.width,r.height=this.img.height,r.getContext("2d").drawImage(this.img,0,0),e.canvasRGBA(r,0,0,r.width,r.height,this.blurRadius),r.toBlob(e=>{this.blurSource=URL.createObjectURL(e),t()})})}async onImageLoaded(){this.imgRatio=this.img.width/this.img.height,this.hasBlurArea&&!this.cssFeature.backdropFilter&&(this.isCrosBlocked?this.blurSource=this.source:await this.generateBlurImage()),this.fixPosition(),this.loaded||(this.viewports.forEach(t=>{t.css({backgroundImage:"url('"+this.source+"')",backgroundAttachement:"fixed",opacity:1})}),this.blurWidgets.forEach(t=>{t.removeClass("bgimg-background-loading")}),this.cssFeature.backdropFilter||($("body").addClass("bgimg-fallback"),this.domStyle.setProperty("--bgimg-blur-image",`url('${this.blurSource}')`)),this.loaded=!0)}onWindowResize(){this.loaded&&this.fixPosition()}getOverflowSize(t,e,i){let r=e-t,o=e*i/100-t/2;return Math.max(0,Math.min(r,o))}fixPosition(){let t=window.innerWidth/window.innerHeight;this.imgRatio>t?(this.imgSize.height=window.innerHeight,this.imgSize.width=this.imgSize.height*this.imgRatio,this.imgOffset.top=0,this.imgOffset.left=-this.getOverflowSize(window.innerWidth,this.imgSize.width,this.xCenter)):(this.imgSize.width=window.innerWidth,this.imgSize.height=this.imgSize.width/this.imgRatio,this.imgOffset.left=0,this.imgOffset.top=-this.getOverflowSize(window.innerHeight,this.imgSize.height,this.yCenter)),this.fixViewportPosition()}fixViewportPosition(){this.viewports.forEach(t=>{t.css({backgroundSize:this.imgSize.width+"px "+this.imgSize.height+"px",backgroundPosition:this.imgOffset.left+"px "+this.imgOffset.top+"px"})}),this.hasBlurArea&&!this.cssFeature.backdropFilter&&(this.domStyle.setProperty("--bgimg-bg-size",`${this.imgSize.width}px ${this.imgSize.height}px`),this.domStyle.setProperty("--bgimg-bg-pos",`${this.imgOffset.left}px ${this.imgOffset.top}px`))}addViewport(t){t.css("opacity",0),this.viewports.push(t)}addBlurBackground(t){let e=["bgimg-background-blur","bgimg-background-loading"];this.cssFeature.backdropFilter&&e.push("bgimg-backdrop-blur"),t.addClass(e),this.hasBlurArea=!0,this.blurWidgets.push(t)}}}.call(this,i(0))}]); \ No newline at end of file diff --git a/modules/ext.isekai.backgroundWidget/global.less b/modules/ext.isekai.backgroundWidget/global.less index 971c0ec..bdbeb3d 100644 --- a/modules/ext.isekai.backgroundWidget/global.less +++ b/modules/ext.isekai.backgroundWidget/global.less @@ -1,4 +1,4 @@ -@globalTransition: background-color 250ms linear; +@globalTransition: opacity 250ms linear, background-color 250ms linear; @globalBgColor: rgba(252, 252, 252, 0.8); @globalBgLoadingColor: rgba(252, 252, 252, 1); @backdropFilter: saturate(120%) blur(20px); @@ -21,4 +21,14 @@ .breadcrumb { 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; + } + } } \ No newline at end of file diff --git a/modules/ext.isekai.backgroundWidget/minerva.less b/modules/ext.isekai.backgroundWidget/minerva.less index 46711b7..62ff2e7 100644 --- a/modules/ext.isekai.backgroundWidget/minerva.less +++ b/modules/ext.isekai.backgroundWidget/minerva.less @@ -1,8 +1,9 @@ @globalRadius: 0.4em; -@globalBgColor: rgba(252, 252, 252, 0.8); +@globalBgColor: rgba(252, 252, 252, 1); @globalBgLoadingColor: rgba(252, 252, 252, 1); -@headerBgColor: rgba(252, 252, 252, 0.8); -@footerBgColor: rgba(255, 255, 255, 0.75); +@contentBgColor: rgba(252, 252, 252, 0.5); +@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); @backdropFilter: saturate(120%) blur(20px); @globalTransition: opacity 250ms linear, background-color 250ms linear; @@ -29,26 +30,14 @@ .header-container.header-chrome { background-color: @headerBgColor; position: relative; - - &.bgimg-background-loading { - background-color: @globalBgLoadingColor; - } } .minerva-footer { background-color: @footerBgColor; position: relative; - - &.bgimg-background-loading { - background-color: @globalBgLoadingColor; - } } #content { - background-color: @globalBgColor; - - &.bgimg-background-loading { - background-color: @globalBgLoadingColor; - } + background-color: @contentBgColor; } } \ No newline at end of file diff --git a/modules/ext.isekai.backgroundWidget/timeless.less b/modules/ext.isekai.backgroundWidget/timeless.less index b8182ae..0e4bbe4 100644 --- a/modules/ext.isekai.backgroundWidget/timeless.less +++ b/modules/ext.isekai.backgroundWidget/timeless.less @@ -4,179 +4,197 @@ @headerBgColor: transparent; @footerBgColor: rgba(149, 149, 149, 0.7); @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); @globalTransition: opacity 250ms linear, background-color 250ms linear; -@headerBlurDepth: 10px; .has-bgimg { - .isekai-bgimg { - position: fixed; - opacity: 0; - transition: @globalTransition; - - z-index: -2; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - } - + .isekai-bgimg { + position: fixed; + opacity: 0; + transition: @globalTransition; + + z-index: -2; + top: 0; + left: 0; + width: 100vw; + 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 { - 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; - } + display: none; } + } + @media screen and (max-width: 1099px) { #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; - } + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + border: none; + background: none; + backdrop-filter: none; + box-shadow: none; } - #mw-content-container::after { - display: none; - } - - #mw-header-container { - background: @headerBgColor; + #mw-content-block { + background: none; } - #simpleSearch { - background: rgba(0, 0, 0, 0.07); - border: solid 1px #a2a9b1; - box-shadow: none; + #mw-content-container { + background-color: @globalBgColor; + backdrop-filter: @backdropFilter; - #searchInput-container input[type="search"]:focus { - background: #fff; - } + &.bgimg-background-loading { + background-color: @globalBgLoadingColor; + } } - #mw-content { - position: relative; + #mw-header-hack { + z-index: 99; } - @media screen and (max-width: 850px) { - .isekai-navbar-bg { - display: none; - } + #mw-site-navigation .sidebar-chunk, + #mw-related-navigation .sidebar-chunk { + background: none; + backdrop-filter: none; } - @media screen and (max-width: 1099px) { - #mw-content { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - border: none; - background: none; - box-shadow: none; - - &::before { - background: none; - } - - &::after { - display: none; - } - } + .isekai-bgimg { + display: none; + } + } - #mw-content-block { - background: none; - } + @media screen and (min-width: 1100px) { + #mw-site-navigation .sidebar-chunk, + #mw-related-navigation .sidebar-chunk { + position: relative; + border: none; + border-radius: @globalRadius; + box-shadow: @globalBoxShadow; - #mw-content-container { - background-color: @globalBgColor; - backdrop-filter: @backdropFilter; + background: @globalBgColor; - &.bgimg-background-loading { - background-color: @globalBgLoadingColor; - } - } + &.bgimg-background-loading { + background-color: @globalBgLoadingColor; + } - #mw-header-nav-hack { - background: rgba(255,255,255,0.5); - } + h3 { + border-bottom: solid 1px #a2a9b1; + } + } + } - #mw-header-hack { - z-index: 99; - } + .comment-body textarea, + .comment-preview { + background: @globalBgColor; - .isekai-bgimg { - display: none; - } + &.bgimg-background-loading { + background-color: @globalBgLoadingColor; } + } - @media screen and (min-width: 1100px) { - #mw-site-navigation .sidebar-chunk, - #mw-related-navigation .sidebar-chunk { - position: relative; - border: none; - border-radius: @globalRadius; - box-shadow: @globalBoxShadow; - - background: @globalBgColor; + .comment-toolbar { + background: @globalBgColor; - &.bgimg-background-loading { - background-color: @globalBgLoadingColor; - } + &.bgimg-background-loading { + background-color: @globalBgLoadingColor; + } + } - h3 { - border-bottom: solid 1px #a2a9b1; - } - } + &.bgimg-fallback { + #mw-content-container { + background: none !important; } - @media screen and (max-width: 1099px) { - #mw-site-navigation .sidebar-chunk, - #mw-related-navigation .sidebar-chunk { - &::after { - display: none; - } - } + #mw-footer-container { + --bgimg-overlay-color: @footerBgColor; } - .comment-body textarea, .comment-preview { - background: @globalBgColor; + @media screen and (max-width: 1099px) { + #mw-content { + background: none !important; + } - &.bgimg-background-loading { - background-color: @globalBgLoadingColor; - } + #mw-content-container { + 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 { - background: @globalBgColor; - - &.bgimg-background-loading { - background-color: @globalBgLoadingColor; - } + @media screen and (max-width: 1099px) { + #mw-site-navigation .sidebar-chunk, + #mw-related-navigation .sidebar-chunk { + background: none !important; + } } -} \ No newline at end of file + } +} diff --git a/src/BgImage.js b/src/BgImage.js index 454e627..714fb60 100644 --- a/src/BgImage.js +++ b/src/BgImage.js @@ -1,7 +1,7 @@ import * as StackBlur from './stackblur'; class BgImage { - constructor(){ + constructor() { this.loaded = false; this.isCrosBlocked = false; @@ -18,10 +18,7 @@ class BgImage { } }); - this.domStyles = $('head').append('').find('style[data-type="bgimg-styles"]'); - this.posStyles = $('head').append('').find('style[data-type="bgimg-styles-pos"]'); - this.domStyleSheet = this.domStyles[0].sheet; - this.posStyleSheet = this.posStyles[0].sheet; + this.domStyle = document.documentElement.style; this.hasBlurArea = false; this.blurRadius = 20; @@ -76,10 +73,10 @@ class BgImage { return featureSupport; } - async loadImage(src, xCenter, yCenter){ + async loadImage(src, xCenter, yCenter) { try { await fetch(src); - } catch(e){ + } catch (e) { this.isCrosBlocked = true; this.img.crossOrigin = null; } @@ -91,7 +88,7 @@ class BgImage { this.img.src = src; } - generateBlurImage(){ + generateBlurImage() { return new Promise((resolve, reject) => { let canvas = document.createElement('canvas'); canvas.width = this.img.width; @@ -107,11 +104,11 @@ class BgImage { }); } - async onImageLoaded(){ + async onImageLoaded() { this.imgRatio = this.img.width / this.img.height; - if(this.hasBlurArea && !this.cssFeature.backdropFilter) { // 不支持backdrop-filter，使用js生成模糊 - if(!this.isCrosBlocked){ + if (this.hasBlurArea && !this.cssFeature.backdropFilter) { // 不支持backdrop-filter，使用js生成模糊 + if (!this.isCrosBlocked) { //生成模糊的图片 //css会有白边，为了效果好只能用canvas生成了 await this.generateBlurImage(); @@ -122,7 +119,7 @@ class BgImage { this.fixPosition(); - if(!this.loaded){ + if (!this.loaded) { this.viewports.forEach((viewport) => { viewport.css({ backgroundImage: "url('" + this.source + "')", @@ -136,31 +133,30 @@ class BgImage { }); if (!this.cssFeature.backdropFilter) { - var css = ".has-bgimg .bgimg-background-blur { "; - css += "background-image: url('" + this.blurSource + "'); "; - css += ";"; - this.domStyleSheet.insertRule(css, this.domStyleSheet.rules.length); + $('body').addClass('bgimg-fallback'); + + this.domStyle.setProperty('--bgimg-blur-image', `url('${this.blurSource}')`); } this.loaded = true; } } - onWindowResize(){ - if(this.loaded) this.fixPosition(); + onWindowResize() { + if (this.loaded) this.fixPosition(); } - getOverflowSize(screenSize, imgSize, centerPoint){ + getOverflowSize(screenSize, imgSize, centerPoint) { let centerPointPx = imgSize * centerPoint / 100; let maxOverflow = imgSize - screenSize; let absOffset = centerPointPx - (screenSize / 2); return Math.max(0, Math.min(maxOverflow, absOffset)); } - fixPosition(){ + fixPosition() { let screenRatio = window.innerWidth / window.innerHeight; //计算出适合的大小以及offset - if(this.imgRatio > screenRatio){ //窄屏 + if (this.imgRatio > screenRatio) { //窄屏 //图片高度 = 屏幕高度，横向靠近中心点 this.imgSize.height = window.innerHeight; this.imgSize.width = this.imgSize.height * this.imgRatio; @@ -176,7 +172,7 @@ class BgImage { this.fixViewportPosition(); } - fixViewportPosition(){ + fixViewportPosition() { this.viewports.forEach((viewport) => { //设置viewport的style viewport.css({ @@ -185,24 +181,19 @@ class BgImage { }); }); - if(this.hasBlurArea){ + if (this.hasBlurArea && !this.cssFeature.backdropFilter) { //设置模糊背景的style - let css = ".has-bgimg .bgimg-background-blur { "; - css += 'background-size: ' + this.imgSize.width + 'px ' + this.imgSize.height + '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); + this.domStyle.setProperty('--bgimg-bg-size', `${this.imgSize.width}px ${this.imgSize.height}px`); + this.domStyle.setProperty('--bgimg-bg-pos', `${this.imgOffset.left}px ${this.imgOffset.top}px`); } } - addViewport(element){ + addViewport(element) { element.css('opacity', 0); this.viewports.push(element); } - addBlurBackground(element){ + addBlurBackground(element) { let classList = ['bgimg-background-blur', 'bgimg-background-loading']; if (this.cssFeature.backdropFilter) { classList.push('bgimg-backdrop-blur'); @@ -213,7 +204,7 @@ class BgImage { } } -if(!global.isekai){ - global.isekai = {}; +if (!global.isekai) { + global.isekai = {}; } global.isekai.BgImage = BgImage;