mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add new-tab and copy-link in view cover
This commit is contained in:
parent
2802f9a44d
commit
f2560085fd
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
min/image-viewer.min.css
vendored
2
min/image-viewer.min.css
vendored
@ -1 +1 @@
|
||||
body.image-viewer-opened,html.image-viewer-opened{overflow:hidden!important}.image-viewer-container{background:rgba(0,0,0,.85);width:100%;height:100%;position:fixed;top:0;left:0;z-index:100000;display:none;justify-content:center;align-items:center}.image-viewer-container.opened{display:flex}.image-viewer{width:90%;height:90%;display:grid;grid-template-columns:auto 48px;grid-template-rows:48px auto 48px;grid-template-areas:"image close" "image ." "image download";grid-column-gap:12px;justify-items:center;justify-content:stretch;align-items:center;align-content:stretch}.image-viewer .image{grid-area:image;width:auto;height:auto;max-width:100%;max-height:100%}.image-viewer .close{grid-area:close}.image-viewer .download{grid-area:download}.image-viewer-icon{cursor:pointer;width:100%;height:100%}.image-viewer-icon svg{max-width:48px;max-height:48px}.image-viewer-icon path{fill:#eee;transition:.2s;transform-origin:center}.image-viewer-icon:hover path{fill:var(--theme-color);transform:scale(1.2)}
|
||||
body.image-viewer-opened,html.image-viewer-opened{overflow:hidden!important}.image-viewer-container{background:rgba(0,0,0,.85);width:100%;height:100%;position:fixed;top:0;left:0;z-index:100000;display:none;justify-content:center;align-items:center}.image-viewer-container.opened{display:flex}.image-viewer{width:90%;height:90%;display:grid;grid-template-columns:auto 48px;grid-template-rows:48px auto 48px 12px 48px 12px 48px;grid-template-areas:"image close" "image ." "image copy-link" "image ." "image new-tab" "image ." "image download";grid-column-gap:12px;justify-items:center;justify-content:stretch;align-items:center;align-content:stretch}.image-viewer .image{grid-area:image;width:auto;height:auto;max-width:100%;max-height:100%}.image-viewer .close{grid-area:close}.image-viewer .download{grid-area:download}.image-viewer .copy-link{grid-area:copy-link;transform:scale(.85)}.image-viewer .new-tab{grid-area:new-tab;transform:scale(.85)}.image-viewer-icon{cursor:pointer;width:100%;height:100%}.image-viewer-icon svg{max-width:48px;max-height:48px}.image-viewer-icon path{fill:#eee;transition:.2s;transform-origin:center}.image-viewer-icon:hover path{fill:var(--theme-color);transform:scale(1.1)}
|
||||
@ -1 +1 @@
|
||||
<div class=image-viewer-container><div class=image-viewer><img class=image><a class="close image-viewer-icon"title=关闭><svg viewBox="0 0 24 24"><path d=M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z /></svg></a><a target=_blank class="download image-viewer-icon"title=下载><svg viewBox="0 0 24 24"><path d=M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z /></svg></a></div></div>
|
||||
<div class=image-viewer-container><div class=image-viewer><img class=image><a class="close image-viewer-icon"title=关闭><svg viewBox="0 0 24 24"><path d=M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z /></svg></a><a target=_blank class="copy-link image-viewer-icon"title=复制原链接><svg viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg></a><a target=_blank class="new-tab image-viewer-icon"title=在新标签页打开><svg viewBox="0 0 24 24"><path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/></svg></a><a target=_blank class="download image-viewer-icon"title=下载><svg viewBox="0 0 24 24"><path d=M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z /></svg></a></div></div>
|
||||
2
min/view-cover.min.js
vendored
2
min/view-cover.min.js
vendored
@ -1 +1 @@
|
||||
(()=>{return(e,t)=>{const{VideoInfo:n}=t.import("video-info");const{getFriendlyTitle:i}=t.import("title");class o{constructor(e){this.url=e;if($(".image-viewer").length===0){this.createContainer()}this.viewer=$(".image-viewer-container");this.downloadImage()}createContainer(){$("body").append((t.data.imageViewerDom||t.data.imageViewerHtml).text);$(".image-viewer-container .close").on("click",()=>this.hide());t.applyStyle("imageViewerStyle")}downloadImage(){const e=new XMLHttpRequest;e.open("GET",this.url.replace("http:","https:"),true);e.responseType="blob";e.onload=(()=>{const t=i();const n=URL.createObjectURL(e.response);if(this.imageData){URL.revokeObjectURL(this.imageData)}this.imageData=n;this.viewer.find(".download").attr("href",n).attr("download",t);this.viewer.find(".image").prop("src",n)});e.send()}show(){this.viewer.addClass("opened")}hide(){this.viewer.removeClass("opened")}}return(()=>{if($("meta[itemprop='image'],meta[property='og:image']").length>0){return{widget:{content:`\n <button\n class="gui-settings-flat-button"\n id="view-cover">\n <i class="icon-view"></i>\n <span>查看封面</span>\n </button>`,condition:async()=>{const e=await SpinQuery.select(()=>(unsafeWindow||window).aid);return Boolean(e)},success:async()=>{async function e(){const e=(unsafeWindow||window).aid;const t=new n(e);await t.fetchInfo();return t.coverUrl}let t=new o(await e());$("#view-cover").on("click",()=>{t.show()});const i=async()=>{t=new o(await e())};if(Observer.videoChange){Observer.videoChange(i)}else{Observer.childList("#bofqi",i)}}}}}else{return{widget:{content:`\n <button\n class="gui-settings-flat-button"\n id="view-cover">\n <i class="icon-view"></i>\n <span>查看封面</span>\n </button>`,condition:async()=>{const e=await SpinQuery.select(()=>document.querySelector(".header-info-ctnr .room-cover"));return Boolean(e)},success:async()=>{const e=$(".header-info-ctnr .room-cover");const t=e.attr("href").match(/space\.bilibili\.com\/([\d]+)/);if(t&&t[1]){const e=t[1];const n=`https://api.live.bilibili.com/room/v1/Room/getRoomInfoOld?mid=${e}`;const i=await downloadText(n);const a=JSON.parse(i).data.cover;const s=new o(a);$("#view-cover").on("click",()=>{s.show()})}}}}}})()}})();
|
||||
(()=>{return(e,t)=>{const{VideoInfo:i}=t.import("video-info");const{getFriendlyTitle:n}=t.import("title");class o{constructor(e){this.url=e;if($(".image-viewer").length===0){this.createContainer()}this.viewer=$(".image-viewer-container");this.downloadImage()}createContainer(){$("body").append((t.data.imageViewerDom||t.data.imageViewerHtml).text);$(".image-viewer-container .close").on("click",()=>this.hide());t.applyStyle("imageViewerStyle")}downloadImage(){const e=new XMLHttpRequest;e.open("GET",this.url.replace("http:","https:"),true);e.responseType="blob";e.onload=(()=>{const t=n();const i=URL.createObjectURL(e.response);if(this.imageData){URL.revokeObjectURL(this.imageData)}this.imageData=i;this.viewer.find(".download").attr("href",i).attr("download",t);this.viewer.find(".copy-link").on("click",()=>GM_setClipboard(this.url));this.viewer.find(".new-tab").attr("href",this.url);this.viewer.find(".image").prop("src",i)});e.send()}show(){this.viewer.addClass("opened")}hide(){this.viewer.removeClass("opened")}}return(()=>{if($("meta[itemprop='image'],meta[property='og:image']").length>0){return{widget:{content:`\n <button\n class="gui-settings-flat-button"\n id="view-cover">\n <i class="icon-view"></i>\n <span>查看封面</span>\n </button>`,condition:async()=>{const e=await SpinQuery.select(()=>(unsafeWindow||window).aid);return Boolean(e)},success:async()=>{async function e(){const e=(unsafeWindow||window).aid;const t=new i(e);await t.fetchInfo();return t.coverUrl}let t=new o(await e());$("#view-cover").on("click",()=>{t.show()});const n=async()=>{t=new o(await e())};if(Observer.videoChange){Observer.videoChange(n)}else{Observer.childList("#bofqi",n)}}}}}else{return{widget:{content:`\n <button\n class="gui-settings-flat-button"\n id="view-cover">\n <i class="icon-view"></i>\n <span>查看封面</span>\n </button>`,condition:async()=>{const e=await SpinQuery.select(()=>document.querySelector(".header-info-ctnr .room-cover"));return Boolean(e)},success:async()=>{const e=$(".header-info-ctnr .room-cover");const t=e.attr("href").match(/space\.bilibili\.com\/([\d]+)/);if(t&&t[1]){const e=t[1];const i=`https://api.live.bilibili.com/room/v1/Room/getRoomInfoOld?mid=${e}`;const n=await downloadText(i);const a=JSON.parse(n).data.cover;const s=new o(a);$("#view-cover").on("click",()=>{s.show()})}}}}}})()}})();
|
||||
@ -36,8 +36,15 @@ html.image-viewer-opened, body.image-viewer-opened
|
||||
height: 90%;
|
||||
display: grid;
|
||||
grid-template-columns: auto 48px;
|
||||
grid-template-rows: 48px auto 48px;
|
||||
grid-template-areas: "image close" "image ." "image download";
|
||||
grid-template-rows: 48px auto 48px 12px 48px 12px 48px;
|
||||
grid-template-areas:
|
||||
"image close"
|
||||
"image ."
|
||||
"image copy-link"
|
||||
"image ."
|
||||
"image new-tab"
|
||||
"image ."
|
||||
"image download";
|
||||
grid-column-gap: 12px;
|
||||
justify-items: center;
|
||||
justify-content: stretch;
|
||||
@ -60,6 +67,16 @@ html.image-viewer-opened, body.image-viewer-opened
|
||||
{
|
||||
grid-area: download;
|
||||
}
|
||||
.image-viewer .copy-link
|
||||
{
|
||||
grid-area: copy-link;
|
||||
transform: scale(0.85);
|
||||
}
|
||||
.image-viewer .new-tab
|
||||
{
|
||||
grid-area: new-tab;
|
||||
transform: scale(0.85);
|
||||
}
|
||||
.image-viewer-icon
|
||||
{
|
||||
cursor: pointer;
|
||||
@ -80,5 +97,5 @@ html.image-viewer-opened, body.image-viewer-opened
|
||||
.image-viewer-icon:hover path
|
||||
{
|
||||
fill: var(--theme-color);
|
||||
transform: scale(1.2);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
@ -3,7 +3,20 @@
|
||||
<img class="image" />
|
||||
<a class="close image-viewer-icon" title="关闭">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
|
||||
<path
|
||||
d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a target="_blank" class="copy-link image-viewer-icon" title="复制原链接">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a target="_blank" class="new-tab image-viewer-icon" title="在新标签页打开">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a target="_blank" class="download image-viewer-icon" title="下载">
|
||||
@ -12,4 +25,4 @@
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -35,6 +35,10 @@ class ImageViewer
|
||||
this.viewer.find(".download")
|
||||
.attr("href", data)
|
||||
.attr("download", title);
|
||||
this.viewer.find(".copy-link")
|
||||
.on("click", () => GM_setClipboard(this.url));
|
||||
this.viewer.find(".new-tab")
|
||||
.attr("href", this.url);
|
||||
this.viewer.find(".image")
|
||||
.prop("src", data);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user