Skip to content

Commit

Permalink
update imageReviewer: add thumbnail
Browse files Browse the repository at this point in the history
  • Loading branch information
@obgnail
obgnail committed Sep 10, 2024
1 parent cd218a9 commit 42ac57d
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 18 deletions.
63 changes: 50 additions & 13 deletions plugin/custom/plugins/imageReviewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ class imageReviewerPlugin extends BaseCustomPlugin {
imageMaxWidth: this.config.image_max_width + "%",
imageMaxHeight: this.config.image_max_height + "%",
toolPosition: this.config.tool_position === "top" ? "initial" : 0,
blurLevel: this.config.blur_level + "px",
})

html = () => {
Expand Down Expand Up @@ -84,9 +85,10 @@ class imageReviewerPlugin extends BaseCustomPlugin {
<div class="review-message">${messageList.join("")}</div>
<div class="review-options">${operationList.join("")}</div>
</div>
<img class="review-image"/>
<div class="review-item" action="get-previous"><i class="fa fa-angle-left"></i></div>
<div class="review-item" action="get-next"><i class="fa fa-angle-right"></i></div>
<div class="review-nav"></div>
<img class="review-image" alt=""/>
<div class="review-item" action="previousImage"><i class="fa fa-angle-left"></i></div>
<div class="review-item" action="nextImage"><i class="fa fa-angle-right"></i></div>
<div class="plugin-cover-content review-mask"></div>
</div>
`
Expand All @@ -108,6 +110,7 @@ class imageReviewerPlugin extends BaseCustomPlugin {
this.entities = {
reviewer: document.getElementById("plugin-image-reviewer"),
mask: document.querySelector("#plugin-image-reviewer .review-mask"),
nav: document.querySelector("#plugin-image-reviewer .review-nav"),
image: document.querySelector("#plugin-image-reviewer .review-image"),
msg: document.querySelector("#plugin-image-reviewer .review-message"),
ops: document.querySelector("#plugin-image-reviewer .review-options"),
Expand All @@ -121,7 +124,7 @@ class imageReviewerPlugin extends BaseCustomPlugin {
}
this.utils.eventHub.addEventListener(this.utils.eventHub.eventType.toggleSettingPage, hide => hide && this.close());
this.entities.reviewer.querySelectorAll(".review-item").forEach(ele => {
ele.addEventListener("click", ev => (ev.target.getAttribute("action") === "get-next" ? this.nextImage : this.previousImage)());
ele.addEventListener("click", ev => this[ev.target.closest(".review-item").getAttribute("action")]());
})
this.entities.reviewer.addEventListener("wheel", ev => {
ev.preventDefault();
Expand All @@ -136,11 +139,22 @@ class imageReviewerPlugin extends BaseCustomPlugin {
})
this.entities.ops.addEventListener("click", ev => {
const target = ev.target.closest("[option]");
if (!target) return
if (!target) return;
const option = target.getAttribute("option");
const arg = option.indexOf("rotate") !== -1 ? 90 : undefined;
(this[option] instanceof Function) && this[option](arg);
})
this.entities.nav.addEventListener("click", ev => {
const target = ev.target.closest(".review-thumbnail");
if (!target) return;
const idx = parseInt(target.dataset.idx);
this.dumpIndex(idx);
})
this.entities.nav.addEventListener("wheel", ev => {
const target = ev.target.closest("#plugin-image-reviewer .review-nav");
target.scrollLeft += ev.deltaY * 0.5;
ev.stopPropagation();
}, { passive: true })
}

getFuncList = (ev, method) => {
Expand Down Expand Up @@ -222,14 +236,14 @@ class imageReviewerPlugin extends BaseCustomPlugin {
const curImg = this.imageGetter(next);
if (condition(curImg)) {
this._showImage(curImg);
break;
return curImg;
}
}
}

dumpIndex = targetIdx => {
targetIdx = Math.max(targetIdx, 0);
this.dumpImage("next", img => img.idx === Math.min(targetIdx, img.total - 1))
return this.dumpImage("next", img => img.idx === Math.min(targetIdx, img.total - 1))
}

_showImage = imgInfo => {
Expand All @@ -251,8 +265,19 @@ class imageReviewerPlugin extends BaseCustomPlugin {
download && this.utils.toggleVisible(download, !this.utils.isNetworkImage(src));
}

const handleThumbnail = showIdx => {
const s = this.entities.nav.querySelector(".select");
s && s.classList.remove("select");
const active = this.entities.nav.querySelector(`.review-thumbnail[data-idx="${showIdx - 1}"]`);
if (active) {
active.classList.add("select");
active.scrollIntoView({ inline: "nearest", behavior: "smooth" });
}
}

handleMessage(imgInfo);
handleToolIcon(imgInfo.src);
handleThumbnail(imgInfo.showIdx);
this.restore();
}

Expand All @@ -276,8 +301,7 @@ class imageReviewerPlugin extends BaseCustomPlugin {
if (!img) return;

if (img === target) {
this.imageGetter(false);
return;
return this.imageGetter(false);
}
// 防御代码，防止死循环
if (showIdx === total) return;
Expand Down Expand Up @@ -305,6 +329,7 @@ class imageReviewerPlugin extends BaseCustomPlugin {
naturalWidth: img && img.naturalWidth || 0,
naturalHeight: img && img.naturalHeight || 0,
total: images.length || 0,
all: images,
};
}
}
Expand Down Expand Up @@ -336,6 +361,15 @@ class imageReviewerPlugin extends BaseCustomPlugin {
}
}

initThumbnailNav = current => {
const { idx: targetIdx, all = [] } = current || {};
const thumbnails = all.map((img, idx) => {
const select = idx === targetIdx ? "select" : "";
return `<img class="review-thumbnail ${select}" src="${img.src}" alt="${img.alt}" data-idx="${idx}">`
})
this.entities.nav.innerHTML = thumbnails.join("");
}

handleHotkey = (remove = false) => {
const unregister = item => this.utils.hotkeyHub.unregister(item[0]);
const register = item => this.utils.hotkeyHub.registerSingle(item[0], this[item[1]] || this.dummy);
Expand All @@ -357,9 +391,11 @@ class imageReviewerPlugin extends BaseCustomPlugin {

play = () => this.handlePlayTimer(!!this.playTimer)
restore = () => {
this.entities.image.style.maxWidth = "";
this.entities.image.style.maxHeight = "";
this.entities.image.style.transform = "scale(1) rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) translateX(0px) translateY(0px)";
Object.assign(this.entities.image.style, {
maxWidth: "",
maxHeight: "",
transform: "scale(1) rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) translateX(0px) translateY(0px)",
})
this.moveImageCenter();
}
location = () => {
Expand Down Expand Up @@ -395,7 +431,8 @@ class imageReviewerPlugin extends BaseCustomPlugin {
document.activeElement.blur();
this.handleHotkey(false);
this.utils.show(this.entities.reviewer);
this.initImageMsgGetter();
const cur = this.initImageMsgGetter();
this.initThumbnailNav(cur);
this.dumpImage();
}
close = () => {
Expand Down
4 changes: 2 additions & 2 deletions plugin/global/settings/custom_plugin.default.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -939,8 +939,8 @@ play_second = 3
mask_background_opacity = 0.6
# 图片最多占据80%的页面宽度
image_max_width = 80
# 图片最多占据80%的页面高度度
image_max_height = 80
# 图片最多占据70%的页面高度
image_max_height = 70
# 背景模糊等级: 数值越大越模糊（为0则不模糊）
blur_level = 6

Expand Down
37 changes: 34 additions & 3 deletions plugin/global/styles/imageReviewer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

#plugin-image-reviewer .review-mask {
background-color: rgba(0, 0, 0, ${this.config.mask_background_opacity});
backdrop-filter: blur(${this.config.blur_level}px);
backdrop-filter: blur(${blurLevel});
}

#plugin-image-reviewer .review-image {
Expand All @@ -19,6 +19,7 @@
height: auto;
max-width: ${imageMaxWidth};
max-height: ${imageMaxHeight};
transition: transform 0.2s ease 0s;
}

#plugin-image-reviewer .review-item {
Expand All @@ -43,14 +44,44 @@
background-color: rgba(64, 64, 64, .7);
}

#plugin-image-reviewer .review-item[action="get-previous"] {
#plugin-image-reviewer .review-item[action="previousImage"] {
left: 24px;
}

#plugin-image-reviewer .review-item[action="get-next"] {
#plugin-image-reviewer .review-item[action="nextImage"] {
right: 24px;
}

#plugin-image-reviewer .review-nav {
--review-thumbnail-width: 80px;
--review-thumbnail-padding-count: 2;

position: fixed;
display: inline-flex;
z-index: 99999;
width: 100%;
bottom: 0;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5);
padding: 0 5px;
height: var(--review-thumbnail-width);
scroll-padding: calc(var(--review-thumbnail-width) * var(--review-thumbnail-padding-count));
}

#plugin-image-reviewer .review-nav .review-thumbnail {
width: var(--review-thumbnail-width);
height: var(--review-thumbnail-width);
object-fit: scale-down;
padding: 4px 2px;
cursor: pointer;
opacity: 0.35;
}

#plugin-image-reviewer .review-nav .review-thumbnail:hover,
#plugin-image-reviewer .review-nav .review-thumbnail.select {
opacity: 1;
}

#plugin-image-reviewer .review-tool {
position: fixed;
z-index: 99999;
Expand Down

0 comments on commit 42ac57d

Please sign in to comment.