From 18e3a4198447ddecf5976f500ae3dbb1cd9a385b Mon Sep 17 00:00:00 2001 From: Mathis Gauthey Date: Thu, 4 Jan 2024 10:46:54 +0100 Subject: [PATCH] update: obsidian-image-toolkit --- .../plugins/obsidian-image-toolkit/main.js | 922 +++++++++++------- .../obsidian-image-toolkit/manifest.json | 2 +- .../plugins/obsidian-image-toolkit/styles.css | 548 +++++++++-- 3 files changed, 1049 insertions(+), 423 deletions(-) diff --git a/.obsidian/plugins/obsidian-image-toolkit/main.js b/.obsidian/plugins/obsidian-image-toolkit/main.js index 40cc1f4..3324f2c 100644 --- a/.obsidian/plugins/obsidian-image-toolkit/main.js +++ b/.obsidian/plugins/obsidian-image-toolkit/main.js @@ -1,8 +1,9 @@ 'use strict'; var obsidian = require('obsidian'); +var crypto = require('crypto'); -/*! ***************************************************************************** +/****************************************************************************** Copyright (c) Microsoft Corporation. Permission to use, copy, modify, and/or distribute this software for any @@ -42,13 +43,18 @@ var de = {}; // English var en = { // settings - IMAGE_TOOLKIT_SETTINGS_TITLE: "Image Toolkit Settings", + IMAGE_TOOLKIT_SETTINGS_TITLE: 'Image Toolkit Settings', + // >>>Common Settings: + COMMON_SETTINGS: 'Common Settings:', + VIEW_MODE_NAME: 'Choose a mode to view images', + VIEW_MODE_NORMAL: '🖼 Normal', + VIEW_MODE_PIN: '📌 Pin', // >>>View Trigger Settings: VIEW_TRIGGER_SETTINGS: 'View Trigger Settings:', VIEW_IMAGE_GLOBAL_NAME: 'Click and view an image globally', VIEW_IMAGE_GLOBAL_DESC: 'You can zoom, rotate, drag, and invert it on the popup layer when clicking an image.', - VIEW_IMAGE_EDITOR_NAME: 'Click and view an image in the Editor Area', - VIEW_IMAGE_EDITOR_DESC: 'Turn on this option if you want to click and view an image in the Editor Area.', + VIEW_IMAGE_IN_EDITOR_NAME: 'Click and view an image in the Editor Area', + VIEW_IMAGE_IN_EDITOR_DESC: 'Turn on this option if you want to click and view an image in the Editor Area.', // CPB = COMMUNITY_PLUGINS_BROWSER VIEW_IMAGE_IN_CPB_NAME: 'Click and view an image in the Community Plugins browser', VIEW_IMAGE_IN_CPB_DESC: 'Turn on this option if you want to click and view an image in the Community Plugins browser.', @@ -60,9 +66,10 @@ var en = { PIN_MODE_SETTINGS: "Pin Mode Settings:", PIN_MODE_NAME: "📌 Pin an image", PIN_MODE_DESC: "You can pin an image onto the top of the screen. And have more options by right click. (press Esc to close the image where your mouse cursor is hovering)", - PIN_MAXIMUM_NAME: "The maximum image you can pin", + PIN_MAXIMUM_NAME: "The maximum images you can pin", PIN_COVER_NAME: "Cover mode", PIN_COVER_DESC: "After those pinned images reach maximum, you can cover the earliest pinned image when you click an image once again.", + PIN_MAXIMUM_NOTICE: "Exceeded maximum images you can pin (non cover mode)", // >>>View Detail Settings: VIEW_DETAILS_SETTINGS: 'View Detail Settings:', IMAGE_MOVE_SPEED_NAME: 'Set the moving speed of the image', @@ -214,13 +221,18 @@ var tr = {}; // 简体中文 var zhCN = { // settings - IMAGE_TOOLKIT_SETTINGS_TITLE: "Image Toolkit 插件设置", + IMAGE_TOOLKIT_SETTINGS_TITLE: "Image Toolkit 设置", + // >>>Common Settings: + COMMON_SETTINGS: '通用设置:', + VIEW_MODE_NAME: '选择查看模式', + VIEW_MODE_NORMAL: '🖼 普通', + VIEW_MODE_PIN: '📌 贴图', // >>> 预览触发配置: VIEW_TRIGGER_SETTINGS: '预览触发配置:', VIEW_IMAGE_GLOBAL_NAME: '支持全局预览图片', VIEW_IMAGE_GLOBAL_DESC: '开启后,在任何地方点击图片都可以弹出预览界面,可对图片进行缩放、旋转、拖动、和反色等。', - VIEW_IMAGE_EDITOR_NAME: '支持在编辑区域预览图片', - VIEW_IMAGE_EDITOR_DESC: '开启后,支持在编辑区域,点击图片预览。', + VIEW_IMAGE_IN_EDITOR_NAME: '支持在编辑区域预览图片', + VIEW_IMAGE_IN_EDITOR_DESC: '开启后,支持在编辑区域,点击图片预览。', // CPB = COMMUNITY_PLUGINS_BROWSER VIEW_IMAGE_IN_CPB_NAME: '支持在社区插件页面预览图片', VIEW_IMAGE_IN_CPB_DESC: '开启后,支持在社区插件页面,点击图片预览。', @@ -235,6 +247,7 @@ var zhCN = { PIN_MAXIMUM_NAME: "最大贴图数量", PIN_COVER_NAME: "覆盖模式", PIN_COVER_DESC: "当贴图数量达到最大值后,此时再次点击图片,该图片会覆盖最早弹出的那个贴图。", + PIN_MAXIMUM_NOTICE: "超过最大Pin图设置(非覆盖模式)", // >>>查看细节设置: VIEW_DETAILS_SETTINGS: '查看细节设置:', IMAGE_MOVE_SPEED_NAME: '图片移动速度设置', @@ -373,11 +386,33 @@ const localeMap = { const locale = localeMap[obsidian.moment.locale()]; function t(str) { if (!locale) { - console.error("Error: Image toolkit locale not found", obsidian.moment.locale()); + console.error("[oit] Image toolkit locale not found", obsidian.moment.locale()); } return (locale && locale[str]) || en[str]; } +var ViewMode; +(function (ViewMode) { + ViewMode["Normal"] = "Normal"; + ViewMode["Pin"] = "Pin"; +})(ViewMode || (ViewMode = {})); +const DEFAULT_VIEW_MODE = ViewMode.Normal; +const OIT_CLASS = { + CONTAINER_ROOT: 'oit', + CONTAINER_NORMAL: 'oit-normal', + CONTAINER_PIN: 'oit-pin', + // the place for storing images + IMG_CONTAINER: 'oit-img-container', + IMG_VIEW: 'oit-img-view', + IMG_TTP: 'oit-img-tip', + IMG_FOOTER: 'oit-img-footer', + IMG_TITLE: 'oit-img-title', + IMG_TITLE_NAME: 'oit-img-title-name', + IMG_TITLE_INDEX: 'oit-img-title-index', + IMG_TOOLBAR: 'oit-img-toolbar', + IMG_PLAYER: 'img-player', + IMG_FULLSCREEN: 'img-fullscreen', +}; const ZOOM_FACTOR = 0.8; const IMG_VIEW_MIN = 30; const ICONS = [{ @@ -483,8 +518,8 @@ const IMG_FULL_SCREEN_MODE = { const VIEW_IMG_SELECTOR = { EDITOR_AREAS: `.workspace-leaf-content[data-type='markdown'] img,.workspace-leaf-content[data-type='image'] img`, EDITOR_AREAS_NO_LINK: `.workspace-leaf-content[data-type='markdown'] img:not(a img),.workspace-leaf-content[data-type='image'] img:not(a img)`, - CPB: `.community-plugin-readme img`, - CPB_NO_LINK: `.community-plugin-readme img:not(a img)`, + CPB: `.community-modal-details img`, + CPB_NO_LINK: `.community-modal-details img:not(a img)`, OTHER: `#sr-flashcard-view img`, OTHER_NO_LINK: `#sr-flashcard-view img:not(a img)`, }; @@ -570,11 +605,12 @@ var pickr_min = createCommonjsModule(function (module, exports) { var Pickr = /*@__PURE__*/getDefaultExportFromCjs(pickr_min); const DEFAULT_SETTINGS = { - viewImageEditor: true, + viewMode: ViewMode.Normal, + viewImageInEditor: true, viewImageInCPB: true, - viewImageWithALink: true, + viewImageWithLink: true, viewImageOther: true, - pinMode: false, + // pinMode: false, pinMaximum: 3, pinCoverMode: true, imageMoveSpeed: 10, @@ -605,93 +641,12 @@ class ImageToolkitSettingTab extends obsidian.PluginSettingTab { let { containerEl } = this; containerEl.empty(); containerEl.createEl('h2', { text: t("IMAGE_TOOLKIT_SETTINGS_TITLE") }); - //region >>> VIEW_TRIGGER_SETTINGS - containerEl.createEl('h3', { text: t("VIEW_TRIGGER_SETTINGS") }); - new obsidian.Setting(containerEl) - .setName(t("VIEW_IMAGE_EDITOR_NAME")) - .setDesc(t("VIEW_IMAGE_EDITOR_DESC")) - .addToggle(toggle => toggle - .setValue(this.plugin.settings.viewImageEditor) - .onChange((value) => __awaiter(this, void 0, void 0, function* () { - this.plugin.settings.viewImageEditor = value; - this.plugin.toggleViewImage(); - yield this.plugin.saveSettings(); - }))); - new obsidian.Setting(containerEl) - .setName(t("VIEW_IMAGE_IN_CPB_NAME")) - .setDesc(t("VIEW_IMAGE_IN_CPB_DESC")) - .addToggle(toggle => toggle - .setValue(this.plugin.settings.viewImageInCPB) - .onChange((value) => __awaiter(this, void 0, void 0, function* () { - this.plugin.settings.viewImageInCPB = value; - this.plugin.toggleViewImage(); - yield this.plugin.saveSettings(); - }))); - new obsidian.Setting(containerEl) - .setName(t("VIEW_IMAGE_WITH_A_LINK_NAME")) - .setDesc(t("VIEW_IMAGE_WITH_A_LINK_DESC")) - .addToggle(toggle => toggle - .setValue(this.plugin.settings.viewImageWithALink) - .onChange((value) => __awaiter(this, void 0, void 0, function* () { - this.plugin.settings.viewImageWithALink = value; - this.plugin.toggleViewImage(); - yield this.plugin.saveSettings(); - }))); - new obsidian.Setting(containerEl) - .setName(t("VIEW_IMAGE_OTHER_NAME")) - .setDesc(t("VIEW_IMAGE_OTHER_DESC")) - .addToggle(toggle => toggle - .setValue(this.plugin.settings.viewImageOther) - .onChange((value) => __awaiter(this, void 0, void 0, function* () { - this.plugin.settings.viewImageOther = value; - this.plugin.toggleViewImage(); - yield this.plugin.saveSettings(); - }))); - //endregion - //region >>> PIN_MODE_SETTINGS - let pinMaximumSetting, pinCoverSetting; - containerEl.createEl('h3', { text: t("PIN_MODE_SETTINGS") }); - new obsidian.Setting(containerEl) - .setName(t("PIN_MODE_NAME")) - .setDesc(t("PIN_MODE_DESC")) - .addToggle(toggle => toggle - .setValue(this.plugin.settings.pinMode) - .onChange((value) => __awaiter(this, void 0, void 0, function* () { - this.plugin.settings.pinMode = value; - this.switchSettingsDisabled(!value, pinMaximumSetting, pinCoverSetting); - this.plugin.togglePinMode(value); - yield this.plugin.saveSettings(); - }))); - let pinMaximumScaleText; - pinMaximumSetting = new obsidian.Setting(containerEl) - .setName(t("PIN_MAXIMUM_NAME")) - .addSlider(slider => slider - .setLimits(1, 5, 1) - .setValue(this.plugin.settings.pinMaximum) - .onChange((value) => __awaiter(this, void 0, void 0, function* () { - var _a; - pinMaximumScaleText.innerText = " " + value.toString(); - this.plugin.settings.pinMaximum = value; - (_a = this.plugin.containerView) === null || _a === void 0 ? void 0 : _a.setPinMaximum(value); - this.plugin.saveSettings(); - }))); - pinMaximumSetting.settingEl.createDiv('', (el) => { - pinMaximumScaleText = el; - el.style.minWidth = "2.3em"; - el.style.textAlign = "right"; - el.innerText = " " + this.plugin.settings.pinMaximum.toString(); - }); - pinCoverSetting = new obsidian.Setting(containerEl) - .setName(t("PIN_COVER_NAME")) - .setDesc(t("PIN_COVER_DESC")) - .addToggle(toggle => toggle - .setValue(this.plugin.settings.pinCoverMode) - .onChange((value) => __awaiter(this, void 0, void 0, function* () { - this.plugin.settings.pinCoverMode = value; - yield this.plugin.saveSettings(); - }))); - this.switchSettingsDisabled(!this.plugin.settings.pinMode, pinMaximumSetting, pinCoverSetting); - //endregion + // Common Settings: + this.displayCommonSettings(containerEl); + // View Trigger Settings: + this.displayViewTriggerSettings(containerEl); + // Pin Mode Settings: + this.displayPinModeSettings(containerEl); //region >>> VIEW_DETAILS_SETTINGS containerEl.createEl('h3', { text: t("VIEW_DETAILS_SETTINGS") }); let imgMoveSpeedScaleText; @@ -895,6 +850,109 @@ class ImageToolkitSettingTab extends obsidian.PluginSettingTab { })); //endregion } + displayCommonSettings(containerEl) { + containerEl.createEl('h3', { text: t('COMMON_SETTINGS') }); + new obsidian.Setting(containerEl) + .setName(t("VIEW_MODE_NAME")) + .addDropdown((dropdown) => __awaiter(this, void 0, void 0, function* () { + for (const key in ViewMode) { + // @ts-ignore + dropdown.addOption(key, t('VIEW_MODE_' + key.toUpperCase())); + } + dropdown.setValue(this.plugin.settings.viewMode); + dropdown.onChange((option) => __awaiter(this, void 0, void 0, function* () { + yield this.plugin.switchViewMode(option); + })); + })); + } + displayViewTriggerSettings(containerEl) { + containerEl.createEl('h3', { text: t("VIEW_TRIGGER_SETTINGS") }); + new obsidian.Setting(containerEl) + .setName(t("VIEW_IMAGE_IN_EDITOR_NAME")) + .setDesc(t("VIEW_IMAGE_IN_EDITOR_DESC")) + .addToggle(toggle => toggle + .setValue(this.plugin.settings.viewImageInEditor) + .onChange((value) => __awaiter(this, void 0, void 0, function* () { + this.plugin.settings.viewImageInEditor = value; + this.plugin.refreshViewTrigger(); + yield this.plugin.saveSettings(); + }))); + new obsidian.Setting(containerEl) + .setName(t("VIEW_IMAGE_IN_CPB_NAME")) + .setDesc(t("VIEW_IMAGE_IN_CPB_DESC")) + .addToggle(toggle => toggle + .setValue(this.plugin.settings.viewImageInCPB) + .onChange((value) => __awaiter(this, void 0, void 0, function* () { + this.plugin.settings.viewImageInCPB = value; + this.plugin.refreshViewTrigger(); + yield this.plugin.saveSettings(); + }))); + new obsidian.Setting(containerEl) + .setName(t("VIEW_IMAGE_WITH_A_LINK_NAME")) + .setDesc(t("VIEW_IMAGE_WITH_A_LINK_DESC")) + .addToggle(toggle => toggle + .setValue(this.plugin.settings.viewImageWithLink) + .onChange((value) => __awaiter(this, void 0, void 0, function* () { + this.plugin.settings.viewImageWithLink = value; + this.plugin.refreshViewTrigger(); + yield this.plugin.saveSettings(); + }))); + new obsidian.Setting(containerEl) + .setName(t("VIEW_IMAGE_OTHER_NAME")) + .setDesc(t("VIEW_IMAGE_OTHER_DESC")) + .addToggle(toggle => toggle + .setValue(this.plugin.settings.viewImageOther) + .onChange((value) => __awaiter(this, void 0, void 0, function* () { + this.plugin.settings.viewImageOther = value; + this.plugin.refreshViewTrigger(); + yield this.plugin.saveSettings(); + }))); + } + displayPinModeSettings(containerEl) { + //region >>> PIN_MODE_SETTINGS + let pinMaximumSetting; + containerEl.createEl('h3', { text: t("PIN_MODE_SETTINGS") }); + /*new Setting(containerEl) + .setName(t("PIN_MODE_NAME")) + .setDesc(t("PIN_MODE_DESC")) + .addToggle(toggle => toggle + .setValue(this.plugin.settings.pinMode) + .onChange(async (value) => { + this.plugin.settings.pinMode = value; + this.switchSettingsDisabled(!value, pinMaximumSetting, pinCoverSetting); + //this.plugin.togglePinMode(value); + await this.plugin.saveSettings(); + }));*/ + let pinMaximumScaleText; + pinMaximumSetting = new obsidian.Setting(containerEl) + .setName(t("PIN_MAXIMUM_NAME")) + .addSlider(slider => slider + .setLimits(1, 5, 1) + .setValue(this.plugin.settings.pinMaximum) + .onChange((value) => __awaiter(this, void 0, void 0, function* () { + pinMaximumScaleText.innerText = " " + value.toString(); + this.plugin.settings.pinMaximum = value; + // this.plugin.containerView?.setPinMaximum(value); + this.plugin.saveSettings(); + }))); + pinMaximumSetting.settingEl.createDiv('', (el) => { + pinMaximumScaleText = el; + el.style.minWidth = "2.3em"; + el.style.textAlign = "right"; + el.innerText = " " + this.plugin.settings.pinMaximum.toString(); + }); + new obsidian.Setting(containerEl) + .setName(t("PIN_COVER_NAME")) + .setDesc(t("PIN_COVER_DESC")) + .addToggle(toggle => toggle + .setValue(this.plugin.settings.pinCoverMode) + .onChange((value) => __awaiter(this, void 0, void 0, function* () { + this.plugin.settings.pinCoverMode = value; + yield this.plugin.saveSettings(); + }))); + //this.switchSettingsDisabled(!this.plugin.settings.pinMode, pinMaximumSetting, pinCoverSetting); + //endregion + } switchSettingsDisabled(disabled, ...settings) { for (const setting of settings) { setting === null || setting === void 0 ? void 0 : setting.setDisabled(disabled); @@ -971,7 +1029,6 @@ class ImageToolkitSettingTab extends obsidian.PluginSettingTab { }); } setAndSavePickrSetting(name, savedColor) { - var _a; if ('GALLERY_NAVBAR_DEFAULT_COLOR_NAME' === name) { this.plugin.settings.galleryNavbarDefaultColor = savedColor; } @@ -983,7 +1040,10 @@ class ImageToolkitSettingTab extends obsidian.PluginSettingTab { } else if ('IMG_VIEW_BACKGROUND_COLOR_NAME' === name) { this.plugin.settings.imgViewBackgroundColor = savedColor; - (_a = this.plugin.containerView) === null || _a === void 0 ? void 0 : _a.setImgViewDefaultBackgroundForImgList(); + // this.plugin.containerView?.setImgViewDefaultBackgroundForImgList(); + this.plugin.getAllContainerViews().forEach(container => { + container.setImgViewDefaultBackgroundForImgList(); + }); } this.plugin.saveSettings(); } @@ -1011,7 +1071,7 @@ class ImageToolkitSettingTab extends obsidian.PluginSettingTab { } /** - * typescript class object for defining operating status of the image + * ts class object: image operating status */ class ImgStatusCto { constructor() { @@ -1025,10 +1085,13 @@ class ImgStatusCto { this.arrowLeft = false; this.arrowRight = false; this.fullScreen = false; - this.activeImgZIndex = 0; + this.activeImgZIndex = 0; /*--layer-status-bar*/ this.clickCount = 0; } } +/** + * ts class object: image information including all html elements + */ class ImgInfoCto { constructor() { this.imgList = new Array(); @@ -1118,9 +1181,13 @@ class ImgUtil { }; } } -ImgUtil.calculateImgZoomSize = (realImg, imgCto) => { - const windowWidth = document.documentElement.clientWidth || document.body.clientWidth; - const windowHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 100; +ImgUtil.calculateImgZoomSize = (realImg, imgCto, windowWidth, windowHeight) => { + if (!windowWidth) { + windowWidth = document.documentElement.clientWidth || document.body.clientWidth; + } + if (!windowHeight) { + windowHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 100; + } const windowZoomWidth = windowWidth * ZOOM_FACTOR; const windowZoomHeight = windowHeight * ZOOM_FACTOR; let tempWidth = realImg.width, tempHeight = realImg.height; @@ -1221,16 +1288,22 @@ ImgUtil.invertImgColor = (imgEle, open) => { }; class ContainerView { - constructor(plugin, containerType, pinMaximum) { + constructor(plugin) { this.lastClickedImgDefaultStyle = { borderWidth: '', borderStyle: '', borderColor: '' }; this.imgGlobalStatus = new ImgStatusCto(); - this.imgInfoCto = new ImgInfoCto(); + this.imgInfo = new ImgInfoCto(); + this.getViewMode = () => { + return this.plugin.settings.viewMode; + }; this.isPinMode = () => { - return 'PIN' === this.containerType; + return ViewMode.Pin === this.getViewMode(); + }; + this.isNormalMode = () => { + return ViewMode.Normal === this.getViewMode(); }; this.setMenuView = (menuView) => { this.menuView = menuView; @@ -1244,22 +1317,35 @@ class ContainerView { this.getActiveImg = () => { return this.imgGlobalStatus.activeImg; }; - this.setPinMaximum = (val) => { - this.pinMaximum = val; + this.getDoc = () => { + return this.doc; }; + /*public setPinMaximum = (val: number) => { + this.pinMaximum = val; + }*/ this.getOitContainerViewEl = () => { - return this.imgInfoCto.imgContainerEl; + return this.imgInfo.imgContainerEl; + }; + this.getParentContainerEl = (targetEl) => { + if (!targetEl) { + return this.parentContainerEl; + } + if (!this.parentContainerEl) { + this.parentContainerEl = targetEl.matchParent('body'); + this.doc = this.parentContainerEl.ownerDocument; + } + return this.parentContainerEl; }; //region ================== Container View & Init ======================== /** - * render when clicking an image - * @param targetEl the clicked image's element + * Render when clicking an image (core step) + * @param targetEl clicked image's element * @returns */ - this.renderContainerView = (targetEl) => { + this.renderContainer = (targetEl) => { if (!this.checkStatus()) return; - const matchedImg = this.initContainerView(targetEl, this.plugin.app.workspace.containerEl); + const matchedImg = this.initContainerView(targetEl, this.getParentContainerEl(targetEl)); if (!matchedImg) return; this.openOitContainerView(matchedImg); @@ -1267,8 +1353,13 @@ class ContainerView { this.refreshImg(matchedImg, targetEl.src, targetEl.alt); matchedImg.mtime = new Date().getTime(); }; - this.initContainerView = (targetEl, containerEl) => { - const matchedImg = this.initContainerViewDom(containerEl); + /** + * initContainerDom -> + * @param targetEl + * @param parentContainerEl targetEl's body + */ + this.initContainerView = (targetEl, parentContainerEl) => { + const matchedImg = this.initContainerDom(parentContainerEl); if (!matchedImg) return null; matchedImg.targetOriginalImgEl = targetEl; @@ -1282,50 +1373,37 @@ class ContainerView { var _a; this.restoreBorderForLastClickedImg(); this.removeGalleryNavbar(); - (_a = this.imgInfoCto.oitContainerViewEl) === null || _a === void 0 ? void 0 : _a.remove(); - this.imgInfoCto.oitContainerViewEl = null; - this.imgInfoCto.imgContainerEl = null; + (_a = this.imgInfo.oitContainerEl) === null || _a === void 0 ? void 0 : _a.remove(); + this.imgInfo.oitContainerEl = null; + this.imgInfo.imgContainerEl = null; this.imgGlobalStatus.dragging = false; this.imgGlobalStatus.popup = false; this.imgGlobalStatus.activeImgZIndex = 0; this.imgGlobalStatus.fullScreen = false; this.imgGlobalStatus.activeImg = null; // clear imgList - this.imgInfoCto.imgList.length = 0; + this.imgInfo.imgList.length = 0; }; this.checkStatus = () => { - if (!this.containerType) + const viewMode = this.plugin.getViewMode(); + if (!viewMode) return false; - let oitContainerViewClass; - switch (this.containerType) { - case 'MAIN': - if (this.plugin.settings.pinMode) { - return false; - } - oitContainerViewClass = 'oit-main-container-view'; - break; - case 'PIN': - if (!this.plugin.settings.pinMode) { - return false; - } - oitContainerViewClass = 'oit-pin-container-view'; - break; - default: - return false; - } - if (this.imgInfoCto.oitContainerViewEl) { - const containerElList = document.getElementsByClassName(oitContainerViewClass); - if (!containerElList || 0 >= containerElList.length) { - // when switch between workspaces, you should remove ContainerView - this.removeOitContainerView(); - } - } - if (this.isPinMode() && this.plugin.settings.pinCoverMode) { - return true; - } + // none of popped-up-images if (!this.imgGlobalStatus.popup) return true; - return this.pinMaximum > this.imgInfoCto.getPopupImgNum(); + // Pin mode && Cover mode + if (this.isPinMode() && this.plugin.settings.pinCoverMode) + return true; + // configured max images > current pop-up images + if (this.getConfiguredPinMaximum() > this.imgInfo.getPopupImgNum()) + return true; + new obsidian.Notice(t("PIN_MAXIMUM_NOTICE")); + return false; + }; + this.getConfiguredPinMaximum = () => { + if (this.isPinMode()) + return this.plugin.settings.pinMaximum; + return 1; }; this.initDefaultData = (matchedImg, targetImgStyle) => { if (targetImgStyle) { @@ -1393,35 +1471,35 @@ class ContainerView { }; //endregion //region ================== Image ======================== - this.updateImgViewElAndList = (pinMaximum) => { - if (!this.imgInfoCto.imgContainerEl) + this.updateImgViewElAndList = (imgInfo) => { + if (!(imgInfo === null || imgInfo === void 0 ? void 0 : imgInfo.imgContainerEl)) return; - const imgNum = this.imgInfoCto.imgList.length; + const pinMaximum = this.getConfiguredPinMaximum(); + const imgNum = this.imgInfo.imgList.length; if (pinMaximum < imgNum) { - if (this.imgInfoCto.imgContainerEl) { - // remove all imgViewEl and imgList - this.imgInfoCto.imgContainerEl.innerHTML = ''; - } + // remove all imgViewEl and imgList + imgInfo.imgContainerEl.innerHTML = ''; // clear imgList - this.imgInfoCto.imgList.length = 0; + imgInfo.imgList.length = 0; } - let imgViewEl; + // let isUpdate: boolean = false; const curTime = new Date().getTime(); for (let i = imgNum; i < pinMaximum; i++) { - //
- imgViewEl = createEl('img'); - imgViewEl.addClass('img-view'); - imgViewEl.hidden = true; // hide 'img-view' for now + //
``
+ let imgViewEl = createEl('img'); + imgViewEl.addClass(OIT_CLASS.IMG_VIEW); + imgViewEl.hidden = true; // hide 'oit-img-view' for now imgViewEl.dataset.index = i + ''; // set data-index this.setImgViewDefaultBackground(imgViewEl); - this.imgInfoCto.imgContainerEl.appendChild(imgViewEl); + imgInfo.imgContainerEl.appendChild(imgViewEl); // cache imgList - this.imgInfoCto.imgList.push(new ImgCto(i, curTime, imgViewEl)); + imgInfo.imgList.push(new ImgCto(i, curTime, imgViewEl)); + // isUpdate = true; } }; this.getMatchedImg = () => { let earliestImg; - for (const img of this.imgInfoCto.imgList) { + for (const img of this.imgInfo.imgList) { if (!earliestImg || earliestImg.mtime > img.mtime) earliestImg = img; if (img.popup) @@ -1454,10 +1532,11 @@ class ContainerView { let realImg = new Image(); realImg.src = imgSrc; imgCto.refreshImgInterval = setInterval((realImg) => { + var _a, _b; if (realImg.width > 0 || realImg.height > 0) { clearInterval(imgCto.refreshImgInterval); imgCto.refreshImgInterval = null; - this.setImgViewPosition(ImgUtil.calculateImgZoomSize(realImg, imgCto), 0); + this.setImgViewPosition(ImgUtil.calculateImgZoomSize(realImg, imgCto, (_a = this.parentContainerEl) === null || _a === void 0 ? void 0 : _a.clientWidth, (_b = this.parentContainerEl) === null || _b === void 0 ? void 0 : _b.clientHeight), 0); this.renderImgView(imgCto.imgViewEl, imgSrc, imgAlt); this.renderImgTip(imgCto); imgCto.imgViewEl.style.setProperty('transform', imgCto.defaultImgStyle.transform); @@ -1492,35 +1571,35 @@ class ContainerView { this.renderImgTip = (activeImg) => { if (!activeImg) activeImg = this.imgGlobalStatus.activeImg; - if (activeImg && this.imgInfoCto.imgTipEl && activeImg.realWidth > 0 && activeImg.curWidth > 0) { - if (this.imgInfoCto.imgTipTimeout) { - clearTimeout(this.imgInfoCto.imgTipTimeout); + if (activeImg && this.imgInfo.imgTipEl && activeImg.realWidth > 0 && activeImg.curWidth > 0) { + if (this.imgInfo.imgTipTimeout) { + clearTimeout(this.imgInfo.imgTipTimeout); } if (this.plugin.settings.imgTipToggle) { - this.imgInfoCto.imgTipEl.hidden = false; // display 'img-tip' + this.imgInfo.imgTipEl.hidden = false; // display 'oit-img-tip' const ratio = activeImg.curWidth * 100 / activeImg.realWidth; const isSingleDigit = 10 > ratio; const width = isSingleDigit ? 20 : 40; const left = activeImg.left + activeImg.curWidth / 2 - width / 2; const top = activeImg.top + activeImg.curHeight / 2 - 10; - this.imgInfoCto.imgTipEl.style.setProperty("width", width + 'px'); - this.imgInfoCto.imgTipEl.style.setProperty("font-size", isSingleDigit || 100 >= activeImg.curWidth ? 'xx-small' : 'x-small'); - this.imgInfoCto.imgTipEl.style.setProperty("left", left + 'px'); - this.imgInfoCto.imgTipEl.style.setProperty("top", top + 'px'); - this.imgInfoCto.imgTipEl.style.setProperty("z-index", activeImg.zIndex + ''); - this.imgInfoCto.imgTipEl.setText(parseInt(ratio + '') + '%'); - this.imgInfoCto.imgTipTimeout = setTimeout(() => { - this.imgInfoCto.imgTipEl.hidden = true; + this.imgInfo.imgTipEl.style.setProperty("width", width + 'px'); + this.imgInfo.imgTipEl.style.setProperty("font-size", isSingleDigit || 100 >= activeImg.curWidth ? 'xx-small' : 'x-small'); + this.imgInfo.imgTipEl.style.setProperty("left", left + 'px'); + this.imgInfo.imgTipEl.style.setProperty("top", top + 'px'); + this.imgInfo.imgTipEl.style.setProperty("z-index", activeImg.zIndex + ''); + this.imgInfo.imgTipEl.setText(parseInt(ratio + '') + '%'); + this.imgInfo.imgTipTimeout = setTimeout(() => { + this.imgInfo.imgTipEl.hidden = true; }, 1000); } else { - this.imgInfoCto.imgTipEl.hidden = true; // hide 'img-tip' - this.imgInfoCto.imgTipTimeout = null; + this.imgInfo.imgTipEl.hidden = true; // hide 'oit-img-tip' + this.imgInfo.imgTipTimeout = null; } } }; this.setImgViewDefaultBackgroundForImgList = () => { - for (const imgCto of this.imgInfoCto.imgList) { + for (const imgCto of this.imgInfo.imgList) { this.setImgViewDefaultBackground(imgCto.imgViewEl); } }; @@ -1557,13 +1636,13 @@ class ContainerView { this.imgGlobalStatus.fullScreen = true; activeImg.fullScreen = true; // activeImg.imgViewEl.style.setProperty('display', 'none', 'important'); // hide imgViewEl - // this.imgInfoCto.imgFooterEl?.style.setProperty('display', 'none'); // hide 'img-footer' + // this.imgInfoCto.imgFooterEl?.style.setProperty('display', 'none'); // hide 'oit-img-footer' // show the img-player - this.imgInfoCto.imgPlayerEl.style.setProperty('display', 'block'); - this.imgInfoCto.imgPlayerEl.style.setProperty('z-index', (this.imgGlobalStatus.activeImgZIndex + 10) + ''); - this.imgInfoCto.imgPlayerEl.addEventListener('click', this.closePlayerImg); - const windowWidth = document.documentElement.clientWidth || document.body.clientWidth; - const windowHeight = document.documentElement.clientHeight || document.body.clientHeight; + this.imgInfo.imgPlayerEl.style.setProperty('display', 'block'); + this.imgInfo.imgPlayerEl.style.setProperty('z-index', (this.imgGlobalStatus.activeImgZIndex + 10) + ''); + this.imgInfo.imgPlayerEl.addEventListener('click', this.closePlayerImg); + const windowWidth = this.doc.documentElement.clientWidth || this.doc.body.clientWidth; + const windowHeight = this.doc.documentElement.clientHeight || this.doc.body.clientHeight; let newWidth, newHeight; let top = 0; if (IMG_FULL_SCREEN_MODE.STRETCH == this.plugin.settings.imgFullScreenMode) { @@ -1590,7 +1669,7 @@ class ContainerView { newWidth = newWidth + 'px'; newHeight = newHeight + 'px'; } - const imgPlayerImgViewEl = this.imgInfoCto.imgPlayerImgViewEl; + const imgPlayerImgViewEl = this.imgInfo.imgPlayerImgViewEl; if (imgPlayerImgViewEl) { imgPlayerImgViewEl.setAttribute('src', activeImg.imgViewEl.src); imgPlayerImgViewEl.setAttribute('alt', activeImg.imgViewEl.alt); @@ -1605,7 +1684,7 @@ class ContainerView { * close full screen */ this.closePlayerImg = () => { - for (const imgCto of this.imgInfoCto.imgList) { + for (const imgCto of this.imgInfo.imgList) { if (!imgCto.fullScreen) continue; // show the popped up image @@ -1613,13 +1692,13 @@ class ContainerView { // this.imgInfoCto.imgFooterEl?.style.setProperty('display', 'block'); } // hide full screen - if (this.imgInfoCto.imgPlayerEl) { - this.imgInfoCto.imgPlayerEl.style.setProperty('display', 'none'); // hide 'img-player' - this.imgInfoCto.imgPlayerEl.removeEventListener('click', this.closePlayerImg); + if (this.imgInfo.imgPlayerEl) { + this.imgInfo.imgPlayerEl.style.setProperty('display', 'none'); // hide 'img-player' + this.imgInfo.imgPlayerEl.removeEventListener('click', this.closePlayerImg); } - if (this.imgInfoCto.imgPlayerImgViewEl) { - this.imgInfoCto.imgPlayerImgViewEl.setAttribute('src', ''); - this.imgInfoCto.imgPlayerImgViewEl.setAttribute('alt', ''); + if (this.imgInfo.imgPlayerImgViewEl) { + this.imgInfo.imgPlayerImgViewEl.setAttribute('src', ''); + this.imgInfo.imgPlayerImgViewEl.setAttribute('alt', ''); } this.imgGlobalStatus.fullScreen = false; }; @@ -1628,12 +1707,12 @@ class ContainerView { this.addOrRemoveEvents = (matchedImg, isAdd) => { if (isAdd) { if (!this.imgGlobalStatus.popup) { - document.addEventListener('keydown', this.triggerKeydown); - document.addEventListener('keyup', this.triggerKeyup); + this.doc.addEventListener('keydown', this.triggerKeydown); + this.doc.addEventListener('keyup', this.triggerKeyup); } - if (!this.isPinMode()) { + if (this.isNormalMode()) { // click event: hide container view - this.imgInfoCto.oitContainerViewEl.addEventListener('click', this.closeContainerView); + this.imgInfo.oitContainerEl.addEventListener('click', this.closeContainerView); } matchedImg.imgViewEl.addEventListener('mouseenter', this.mouseenterImgView); matchedImg.imgViewEl.addEventListener('mouseleave', this.mouseleaveImgView); @@ -1645,8 +1724,8 @@ class ContainerView { } else { if (!this.imgGlobalStatus.popup) { - document.removeEventListener('keydown', this.triggerKeydown); - document.removeEventListener('keyup', this.triggerKeyup); + this.doc.removeEventListener('keydown', this.triggerKeydown); + this.doc.removeEventListener('keyup', this.triggerKeyup); if (this.imgGlobalStatus.clickTimer) { clearTimeout(this.imgGlobalStatus.clickTimer); this.imgGlobalStatus.clickTimer = null; @@ -1654,7 +1733,7 @@ class ContainerView { } } if (!this.isPinMode()) { - this.imgInfoCto.oitContainerViewEl.removeEventListener('click', this.closeContainerView); + this.imgInfo.oitContainerEl.removeEventListener('click', this.closeContainerView); } matchedImg.imgViewEl.removeEventListener('mouseenter', this.mouseenterImgView); matchedImg.imgViewEl.removeEventListener('mouseleave', this.mouseleaveImgView); @@ -1787,6 +1866,7 @@ class ContainerView { } }; this.checkHotkeySettings = (event, hotkey) => { + // console.log("[oit] checkHotkeySettings: ", event.ctrlKey, event.altKey, event.shiftKey) switch (hotkey) { case "NONE": return !event.ctrlKey && !event.altKey && !event.shiftKey; @@ -1910,7 +1990,7 @@ class ContainerView { let index; if (!targetEl || !(index = targetEl.dataset.index)) return; - const activeImg = this.imgInfoCto.imgList[parseInt(index)]; + const activeImg = this.imgInfo.imgList[parseInt(index)]; if (activeImg && (!this.imgGlobalStatus.activeImg || activeImg.index !== this.imgGlobalStatus.activeImg.index)) { this.setActiveImgForMouseEvent(activeImg); // update activeImg } @@ -1998,8 +2078,6 @@ class ContainerView { } }; this.plugin = plugin; - this.containerType = containerType; - this.pinMaximum = pinMaximum; } } @@ -2200,14 +2278,6 @@ var Md5 = /** @class */ (function () { return Md5; }()); -class FileCto { - constructor(path, ctime, mtime) { - this.path = path; - this.ctime = ctime; - this.mtime = mtime; - } -} - class GalleryImgCto { constructor(alt, src) { this.alt = alt; @@ -2222,6 +2292,14 @@ class GalleryImgCacheCto { } } +class FileCto { + constructor(path, ctime, mtime) { + this.path = path; + this.ctime = ctime; + this.mtime = mtime; + } +} + /* // const imgList: Array = parseMarkDown(plugin, activeView.sourceMode?.cmEditor, activeView.file.path); export const parseMarkDown = (plugin: ImageToolkitPlugin, cm: CodeMirror.Editor, filePath: string) => { let line, lineText; @@ -2468,7 +2546,7 @@ class GalleryNavbarView { if (!activeView || 'markdown' !== activeView.getViewType() // modal-container: community plugin, flashcards (Space Repetition) - || 0 < document.getElementsByClassName('modal-container').length) { + || 0 < this.mainContainerView.getDoc().getElementsByClassName('modal-container').length) { if (this.galleryNavbarEl) this.galleryNavbarEl.hidden = true; if (this.galleryListEl) @@ -2493,15 +2571,15 @@ class GalleryNavbarView { let targetImageIdx = -1, targetRealIdx = 0; let isAddGalleryActive = false; let prevHash, nextHash; - const viewImageWithALink = this.plugin.settings.viewImageWithALink; + const viewImageWithLink = this.plugin.settings.viewImageWithLink; for (let i = 0, len = imgList.length; i < len; i++) { const img = imgList[i]; - if (!viewImageWithALink && img.link) + if (!viewImageWithLink && img.link) continue; //
  • this.galleryListEl.append(liEl = createEl('li')); liEl.append(imgEl = createEl('img')); - imgEl.addClass('gallery-img'); + imgEl.addClass('gallery-img', 'oit-img'); imgEl.setAttr('alt', img.alt); imgEl.setAttr('src', img.src); imgListEl.push(imgEl); @@ -2546,7 +2624,7 @@ class GalleryNavbarView { liElActive.style.setProperty('border-color', this.settings.galleryImgBorderActiveColor); } } - this.galleryTranslateX = (document.documentElement.clientWidth || document.body.clientWidth) / 2.5 - targetImageIdx * 52; + this.galleryTranslateX = (this.mainContainerView.getDoc().documentElement.clientWidth || this.mainContainerView.getDoc().body.clientWidth) / 2.5 - targetImageIdx * 52; this.galleryListEl.style.transform = 'translateX(' + this.galleryTranslateX + 'px)'; } }); @@ -2726,7 +2804,7 @@ class GalleryNavbarView { return; this.galleryMouseDownClientX = event.clientX; this.galleryTranslateX += moveDistance; - const windowWidth = document.documentElement.clientWidth || document.body.clientWidth; + const windowWidth = this.mainContainerView.getDoc().documentElement.clientWidth || this.mainContainerView.getDoc().body.clientWidth; const imgLiWidth = (this.galleryListEl.childElementCount - 1) * 52; // console.log('move...', 'windowWidth=' + windowWidth, 'galleryTranslateX=' + galleryTranslateX, 'li count=' + imgInfo.galleryList.childElementCount); if (this.galleryTranslateX + 50 >= windowWidth) @@ -2804,35 +2882,36 @@ class GalleryNavbarView { } GalleryNavbarView.GALLERY_IMG_CACHE = new Map(); -class MainContainerView extends ContainerView { - constructor(plugin, containerType) { - super(plugin, containerType, 1); +class NormalContainerView extends ContainerView { + constructor(plugin) { + super(plugin); //region ================== Container View ======================== - this.initContainerViewDom = (containerEl) => { + this.initContainerDom = (parentContainerEl) => { let imgCto; - if (!this.imgInfoCto.oitContainerViewEl) { - // init at first time - // create:
    - containerEl.appendChild(this.imgInfoCto.oitContainerViewEl = createDiv('oit-main-container-view')); - //
    - this.imgInfoCto.oitContainerViewEl.append(this.imgInfoCto.imgContainerEl = createDiv('img-container')); - //
    - this.updateImgViewElAndList(this.pinMaximum); - //
    - this.imgInfoCto.oitContainerViewEl.appendChild(this.imgInfoCto.imgTipEl = createDiv()); // img-tip - this.imgInfoCto.imgTipEl.addClass('img-tip'); - this.imgInfoCto.imgTipEl.hidden = true; // hide 'img-tip' - //