Add new-tab and copy-link in view cover

This commit is contained in:
the1812 2019-03-02 11:24:03 +08:00
parent 2802f9a44d
commit f2560085fd
8 changed files with 50 additions and 16 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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)}

View File

@ -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>

View File

@ -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()})}}}}}})()}})();

View File

@ -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);
}

View File

@ -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>

View File

@ -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);
};