Set height for avatar border (fix #2030)

This commit is contained in:
the1812 2021-07-12 13:25:08 +08:00
parent 7b73742443
commit 42e6c19629
3 changed files with 18 additions and 14 deletions

View File

@ -75,6 +75,7 @@
],
"javascript.validate.enable": true,
"files.associations": {
"*.user.js": "plain"
"*.user.js": "plain",
"*.dev.js": "plain"
}
}

View File

@ -1 +1 @@
(()=>(t,e)=>{const n=/@(\d+)[Ww]_(\d+)[Hh]/;const i=t.imageResolutionScale==="auto"?window.devicePixelRatio:parseFloat(t.imageResolutionScale);const o=["#certify-img1","#certify-img2"];const r=(t,e)=>{const n=document.createNodeIterator(t,NodeFilter.SHOW_ELEMENT,null);let i=n.nextNode();while(i){if(i instanceof HTMLElement){e(i)}i=n.nextNode()}};async function a(t){const e=(e,r)=>{const a=e(t);if(a===null){return}if(o.some((e=>t.matches(e)))){return}const s=a.match(n);if(!s){return}let[,l,c]=s;let d=parseInt(t.getAttribute("data-resolution-width")||"0");if(parseInt(l)>=d&&d!==0){return}if(t.getAttribute("width")===null&&t.getAttribute("height")===null){t.setAttribute("width",l)}l=Math.round(i*parseInt(l)).toString();c=Math.round(i*parseInt(c)).toString();t.setAttribute("data-resolution-width",l);r(t,a.replace(n,`@${l}w_${c}h`))};Observer.attributes(t,(()=>{e((t=>t.getAttribute("src")),((t,e)=>t.setAttribute("src",e)));e((t=>t.style.backgroundImage),((t,e)=>t.style.backgroundImage=e))}))}const s=async()=>{r(document.body,(t=>a(t)));Observer.childListSubtree(document.body,(t=>{for(const e of t){for(const t of e.addedNodes){if(t instanceof HTMLElement){a(t);if(t.nodeName.toUpperCase()!=="IMG"){r(t,(t=>a(t)))}}}}}))};s();e.applyStyleFromText(`\n.favInfo-box .favInfo-cover img {\n width: 100% !important;\n object-position: left !important;\n}\n.bili-avatar-img {\n width: 100% !important;\n}\n.bb-comment .sailing .sailing-img,\n.comment-bilibili-fold .sailing .sailing-img {\n width: 288px;\n}\n`,"image-resolution-fix");return{export:{imageResolution:a}}})();
(()=>(t,e)=>{const i=/@(\d+)[Ww]_(\d+)[Hh]/;const n=t.imageResolutionScale==="auto"?window.devicePixelRatio:parseFloat(t.imageResolutionScale);const o=["#certify-img1","#certify-img2"];const r=(t,e)=>{const i=document.createNodeIterator(t,NodeFilter.SHOW_ELEMENT,null);let n=i.nextNode();while(n){if(n instanceof HTMLElement){e(n)}n=i.nextNode()}};async function s(t){const e=(e,r)=>{const s=e(t);if(s===null){return}if(o.some((e=>t.matches(e)))){return}const a=s.match(i);if(!a){return}let[,l,c]=a;let u=parseInt(t.getAttribute("data-resolution-width")||"0");if(parseInt(l)>=u&&u!==0){return}if(t.getAttribute("width")===null&&t.getAttribute("height")===null){if(t.classList.contains("bili-avatar-img")){t.setAttribute("height",c)}else{t.setAttribute("width",l)}}l=Math.round(n*parseInt(l)).toString();c=Math.round(n*parseInt(c)).toString();t.setAttribute("data-resolution-width",l);r(t,s.replace(i,`@${l}w_${c}h`))};Observer.attributes(t,(()=>{e((t=>t.getAttribute("src")),((t,e)=>t.setAttribute("src",e)));e((t=>t.style.backgroundImage),((t,e)=>t.style.backgroundImage=e))}))}const a=async()=>{r(document.body,(t=>s(t)));Observer.childListSubtree(document.body,(t=>{for(const e of t){for(const t of e.addedNodes){if(t instanceof HTMLElement){s(t);if(t.nodeName.toUpperCase()!=="IMG"){r(t,(t=>s(t)))}}}}}))};a();e.applyStyleFromText(`\n.favInfo-box .favInfo-cover img {\n width: 100% !important;\n object-position: left !important;\n}\n.bb-comment .sailing .sailing-img,\n.comment-bilibili-fold .sailing .sailing-img {\n width: 288px;\n}\n`,"image-resolution-fix");return{export:{imageResolution:s}}})();

View File

@ -1,8 +1,8 @@
const regex = /@(\d+)[Ww]_(\d+)[Hh]/
const dpi = settings.imageResolutionScale === "auto" ? window.devicePixelRatio : parseFloat(settings.imageResolutionScale)
const dpi = settings.imageResolutionScale === 'auto' ? window.devicePixelRatio : parseFloat(settings.imageResolutionScale)
const excludeSelectors = [
"#certify-img1",
"#certify-img2",
'#certify-img1',
'#certify-img2',
]
const walk = (rootElement: Node, action: (node: HTMLElement) => void) => {
const walker = document.createNodeIterator(rootElement, NodeFilter.SHOW_ELEMENT, null)
@ -28,20 +28,26 @@ export async function imageResolution(element: HTMLElement) {
return
}
let [, width, height] = match
let lastWidth = parseInt(element.getAttribute("data-resolution-width") || "0")
let lastWidth = parseInt(element.getAttribute('data-resolution-width') || '0')
if (parseInt(width) >= lastWidth && lastWidth !== 0) {
return
}
if (element.getAttribute("width") === null && element.getAttribute("height") === null) {
element.setAttribute("width", width)
if (element.getAttribute('width') === null && element.getAttribute('height') === null) {
if (element.classList.contains('bili-avatar-img')) {
// 动态头像框必须设高度
// https://github.com/the1812/Bilibili-Evolved/issues/2030
element.setAttribute('height', height)
} else {
element.setAttribute('width', width)
}
}
width = Math.round(dpi * parseInt(width)).toString()
height = Math.round(dpi * parseInt(height)).toString()
element.setAttribute("data-resolution-width", width)
element.setAttribute('data-resolution-width', width)
setValue(element, value.replace(regex, `@${width}w_${height}h`))
}
Observer.attributes(element, () => {
replaceSource(e => e.getAttribute("src"), (e, v) => e.setAttribute("src", v))
replaceSource(e => e.getAttribute('src'), (e, v) => e.setAttribute('src', v))
replaceSource(e => e.style.backgroundImage, (e, v) => e.style.backgroundImage = v)
})
}
@ -52,7 +58,7 @@ const startResolution = async () => {
for (const node of record.addedNodes) {
if (node instanceof HTMLElement) {
imageResolution(node)
if (node.nodeName.toUpperCase() !== "IMG") {
if (node.nodeName.toUpperCase() !== 'IMG') {
walk(node, it => imageResolution(it))
}
}
@ -66,9 +72,6 @@ resources.applyStyleFromText(`
width: 100% !important;
object-position: left !important;
}
.bili-avatar-img {
width: 100% !important;
}
.bb-comment .sailing .sailing-img,
.comment-bilibili-fold .sailing .sailing-img {
width: 288px;