Skip to content

Commit

Permalink
Merge pull request #742 from obgnail/dev
Browse files Browse the repository at this point in the history 
Dev
  • Loading branch information
@obgnail
obgnail authored Sep 10, 2024
2 parents 2d9f827 + 42ac57d commit 6cc1136
Show file tree
Hide file tree
Showing 7 changed files with 192 additions and 131 deletions.
100 changes: 67 additions & 33 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,10 +85,11 @@ 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="plugin-cover-content mask"></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 @@ -107,7 +109,8 @@ class imageReviewerPlugin extends BaseCustomPlugin {
this.playTimer = null;
this.entities = {
reviewer: document.getElementById("plugin-image-reviewer"),
mask: document.querySelector("#plugin-image-reviewer .mask"),
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 => this.showImage(ev.target.getAttribute("action") === "get-next"));
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 @@ -216,25 +230,20 @@ class imageReviewerPlugin extends BaseCustomPlugin {
this.entities.image.style.top = (height - imageHeight) / 2 + "px";
}

showImage = (next = true) => {
this.initImageMsgGetter();
const imgInfo = this.imageGetter(next);
this._showImage(imgInfo);
dumpImage = (direction = "next", condition = () => true) => {
const next = direction === "next";
while (true) {
const curImg = this.imageGetter(next);
if (condition(curImg)) {
this._showImage(curImg);
return curImg;
}
}
}

dumpIndex = targetIdx => {
this.initImageMsgGetter();
let imgInfo = this.imageGetter(true);
if (!Number.isInteger(targetIdx)) {
targetIdx = 0;
}
targetIdx++;
targetIdx = Math.max(targetIdx, 1);
targetIdx = Math.min(targetIdx, imgInfo.total);
while (imgInfo.showIdx !== targetIdx) {
imgInfo = this.imageGetter(true);
}
this._showImage(imgInfo);
targetIdx = Math.max(targetIdx, 0);
return this.dumpImage("next", img => img.idx === Math.min(targetIdx, img.total - 1))
}

_showImage = imgInfo => {
Expand All @@ -256,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 @@ -281,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 All @@ -303,12 +322,14 @@ class imageReviewerPlugin extends BaseCustomPlugin {
const img = images[idx];
return {
img,
idx,
showIdx,
src: img && img.getAttribute("src") || "",
alt: img && img.getAttribute("alt") || "",
naturalWidth: img && img.naturalWidth || 0,
naturalHeight: img && img.naturalHeight || 0,
total: images.length || 0,
all: images,
};
}
}
Expand Down Expand Up @@ -340,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 @@ -350,7 +380,7 @@ class imageReviewerPlugin extends BaseCustomPlugin {
const btn = this.entities.ops.querySelector(`[option="play"]`);
if (!btn) return;
if (!stop && !this.playTimer) {
this.playTimer = setInterval(this.showImage, this.config.play_second * 1000);
this.playTimer = setInterval(this.nextImage, this.config.play_second * 1000);
btn.classList.add("active");
} else {
btn.classList.remove("active");
Expand All @@ -361,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 @@ -399,17 +431,19 @@ class imageReviewerPlugin extends BaseCustomPlugin {
document.activeElement.blur();
this.handleHotkey(false);
this.utils.show(this.entities.reviewer);
this.showImage();
const cur = this.initImageMsgGetter();
this.initThumbnailNav(cur);
this.dumpImage();
}
close = () => {
this.handleHotkey(true);
this.handlePlayTimer(true);
this.utils.hide(this.entities.reviewer);
this.imageGetter = null;
}
dummy = () => null
nextImage = () => this.showImage(true)
previousImage = () => this.showImage(false)
dummy = this.utils.noop
nextImage = () => this.dumpImage("next")
previousImage = () => this.dumpImage("previous")
firstImage = () => this.dumpIndex(-1)
lastImage = () => this.dumpIndex(Number.MAX_VALUE)
rotateLeft = rotateScale => this.rotate(false, null, rotateScale)
Expand Down
6 changes: 3 additions & 3 deletions plugin/custom/plugins/markdownLint/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,9 @@ class markdownLintPlugin extends BaseCustomPlugin {

init = () => {
this.errors = [];
this.checkLintError = () => undefined;
this.fixLintError = () => undefined;
this.resetConfig = () => undefined;
this.checkLintError = this.utils.noop;
this.fixLintError = this.utils.noop;
this.resetConfig = this.utils.noop;
this.l10n = require("./l10n.js");
this.entities = {
modal: document.querySelector("#plugin-markdownlint"),
Expand Down
71 changes: 24 additions & 47 deletions plugin/global/core/plugin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,65 +7,42 @@ class IPlugin {
this.utils = utils;
}

// 最先执行的函数，在这里准备插件需要的数据。若返回utils.stopLoadPluginError，则停止加载插件
async beforeProcess() {
}

// 以字符串形式导入样式
style() {
}

// 以文件形式导入样式
styleTemplate() {
}

// 原生插入html标签
html() {
}

// 使用htmlTemplater插入html标签，详见htmlTemplater
htmlTemplate() {
}

// 注册快捷键
hotkey() {
}

// 初始化数据
init() {
}

// 主要的处理流程
process() {
}

// 收尾，一般用于回收内存，用的比较少
afterProcess() {
}
/** 最先执行的函数，在这里准备插件需要的数据。若返回utils.stopLoadPluginError，则停止加载插件 */
async beforeProcess() {}
/** 以字符串形式导入样式 */
style() {}
/** 以文件形式导入样式 */
styleTemplate() {}
/** 原生插入html标签 */
html() {}
/** 使用htmlTemplater插入html标签，详见htmlTemplater */
htmlTemplate() {}
/** 注册快捷键 */
hotkey() {}
/** 初始化数据 */
init() {}
/** 主要的处理流程 */
process() {}
/** 收尾，一般用于回收内存，用的比较少 */
afterProcess() {}
}

// 一级插件
/** 一级插件 */
class BasePlugin extends IPlugin {
call(type, meta) {
}
call(type, meta) {}
}

// 二级插件
/** 二级插件 */
class BaseCustomPlugin extends IPlugin {
constructor(fixedName, setting) {
super(fixedName, setting.config);
this.info = setting;
this.showName = setting.name;
}

selector(isClick) {
}

hint(isDisable) {
}

callback(anchorNode) {
}
selector(isClick) {}
hint(isDisable) {}
callback(anchorNode) {}
}

const loadPlugin = async (fixedName, setting, isCustom) => {
Expand Down
Loading

0 comments on commit 6cc1136

Please sign in to comment.