3193 lines
369 KiB
JavaScript
3193 lines
369 KiB
JavaScript
|
'use strict';
|
|||
|
|
|
|||
|
|
var obsidian = require('obsidian');
|
|||
|
|
|
|||
|
|
/*! *****************************************************************************
|
|||
|
|
Copyright (c) Microsoft Corporation.
|
|||
|
|
|
|||
|
|
Permission to use, copy, modify, and/or distribute this software for any
|
|||
|
|
purpose with or without fee is hereby granted.
|
|||
|
|
|
|||
|
|
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|||
|
|
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|||
|
|
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|||
|
|
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|||
|
|
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|||
|
|
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|||
|
|
PERFORMANCE OF THIS SOFTWARE.
|
|||
|
|
***************************************************************************** */
|
|||
|
|
|
|||
|
|
function __awaiter(thisArg, _arguments, P, generator) {
|
|||
|
|
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|||
|
|
return new (P || (P = Promise))(function (resolve, reject) {
|
|||
|
|
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|||
|
|
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|||
|
|
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|||
|
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// العربية
|
|||
|
|
var ar = {};
|
|||
|
|
|
|||
|
|
// čeština
|
|||
|
|
var cz = {};
|
|||
|
|
|
|||
|
|
// Dansk
|
|||
|
|
var da = {};
|
|||
|
|
|
|||
|
|
// Deutsch
|
|||
|
|
var de = {};
|
|||
|
|
|
|||
|
|
// English
|
|||
|
|
var en = {
|
|||
|
|
// settings
|
|||
|
|
IMAGE_TOOLKIT_SETTINGS_TITLE: "Image Toolkit Settings",
|
|||
|
|
// >>>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.',
|
|||
|
|
// 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.',
|
|||
|
|
VIEW_IMAGE_WITH_A_LINK_NAME: 'Click and view an image with a link',
|
|||
|
|
VIEW_IMAGE_WITH_A_LINK_DESC: 'Turn on this option if you want to click and view an image with a link. (NOTE: The browser will be opened for you to visit the link and the image will be popped up for being viewed at the same time when you click the image.)',
|
|||
|
|
VIEW_IMAGE_OTHER_NAME: 'Click and view in the other areas except the above',
|
|||
|
|
VIEW_IMAGE_OTHER_DESC: 'Except for the above mentioned, it also supports other areas, e.g. flashcards.',
|
|||
|
|
// >>> PIN_MODE_SETTINGS
|
|||
|
|
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_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.",
|
|||
|
|
// >>>View Detail Settings:
|
|||
|
|
VIEW_DETAILS_SETTINGS: 'View Detail Settings:',
|
|||
|
|
IMAGE_MOVE_SPEED_NAME: 'Set the moving speed of the image',
|
|||
|
|
IMAGE_MOVE_SPEED_DESC: 'When you move an image on the popup layer by keyboard (up, down, left, right), the moving speed of the image can be set here.',
|
|||
|
|
IMAGE_TIP_TOGGLE_NAME: "Display the image's zoom number",
|
|||
|
|
IMAGE_TIP_TOGGLE_DESC: "Turn on this option if you want to display the zoom number when you zoom the image.",
|
|||
|
|
IMG_FULL_SCREEN_MODE_NAME: 'Full-screen preview mode',
|
|||
|
|
// preview mode options:
|
|||
|
|
FIT: 'Fit',
|
|||
|
|
FILL: 'Fill',
|
|||
|
|
STRETCH: 'Stretch',
|
|||
|
|
IMG_VIEW_BACKGROUND_COLOR_NAME: "Set the background color of the previewed image (Only support the image with transparent background)",
|
|||
|
|
// >>>Image Border Settings:
|
|||
|
|
IMAGE_BORDER_SETTINGS: 'Image Border Settings:',
|
|||
|
|
IMAGE_BORDER_TOGGLE_NAME: "Display the image's border",
|
|||
|
|
IMAGE_BORDER_TOGGLE_DESC: "The clicked image's border can be displayed after you exit previewing and close the popup layer.",
|
|||
|
|
IMAGE_BORDER_WIDTH_NAME: "Set the image's border width",
|
|||
|
|
IMAGE_BORDER_STYLE_NAME: "Set the image's border style",
|
|||
|
|
IMAGE_BORDER_COLOR_NAME: "Set the image's border color",
|
|||
|
|
// IMG_BORDER_WIDTH options:
|
|||
|
|
THIN: 'thin',
|
|||
|
|
MEDIUM: 'medium',
|
|||
|
|
THICK: 'thick',
|
|||
|
|
// IMG_BORDER_STYLE options:
|
|||
|
|
//HIDDEN: 'hidden',
|
|||
|
|
DOTTED: 'dotted',
|
|||
|
|
DASHED: 'dashed',
|
|||
|
|
SOLID: 'solid',
|
|||
|
|
DOUBLE: 'double',
|
|||
|
|
GROOVE: 'groove',
|
|||
|
|
RIDGE: 'ridge',
|
|||
|
|
INSET: 'inset',
|
|||
|
|
OUTSET: 'outset',
|
|||
|
|
// IMAGE_BORDER_COLOR_NAME options:
|
|||
|
|
BLACK: 'black',
|
|||
|
|
BLUE: 'blue',
|
|||
|
|
DARK_GREEN: 'dark green',
|
|||
|
|
GREEN: 'green',
|
|||
|
|
LIME: 'lime',
|
|||
|
|
STEEL_BLUE: 'steel blue',
|
|||
|
|
INDIGO: 'indigo',
|
|||
|
|
PURPLE: 'purple',
|
|||
|
|
GRAY: 'gray',
|
|||
|
|
DARK_RED: 'dark red',
|
|||
|
|
LIGHT_GREEN: 'light green',
|
|||
|
|
BROWN: 'brown',
|
|||
|
|
LIGHT_BLUE: 'light blue',
|
|||
|
|
SILVER: 'silver',
|
|||
|
|
RED: 'red',
|
|||
|
|
PINK: 'pink',
|
|||
|
|
ORANGE: 'orange',
|
|||
|
|
GOLD: 'gold',
|
|||
|
|
YELLOW: 'yellow',
|
|||
|
|
// >>>Gallery Navbar Settings:
|
|||
|
|
GALLERY_NAVBAR_SETTINGS: 'Gallery Navbar Settings (Experimental):',
|
|||
|
|
GALLERY_NAVBAR_TOGGLE_NAME: "Display gallery navbar",
|
|||
|
|
GALLERY_NAVBAR_TOGGLE_DESC: "All of the images in the current pane view can be displayed at the bottom of the popup layer.",
|
|||
|
|
GALLERY_NAVBAR_DEFAULT_COLOR_NAME: "Set the background color of the gallery navbar (default state)",
|
|||
|
|
GALLERY_NAVBAR_HOVER_COLOR_NAME: "Set the background color of the gallery navbar (hovering state)",
|
|||
|
|
GALLERY_IMG_BORDER_TOGGLE_NAME: "Display the selected image on the gallery navbar",
|
|||
|
|
GALLERY_IMG_BORDER_TOGGLE_DESC: "When you select an image, the image's border will be displayed, so you can know which image is currently active.",
|
|||
|
|
GALLERY_IMG_BORDER_ACTIVE_COLOR_NAME: 'Set the border color of the selected image',
|
|||
|
|
// >>>HOTKEYS_SETTINGS:
|
|||
|
|
HOTKEY_SETTINGS: "Hotkey Settings:",
|
|||
|
|
HOTKEY_SETTINGS_DESC: "📢 You cannot set the same hotkey for 'Move the image' and 'Switch the image' at the same time. (NOT SUPPORT in Pin Mode)",
|
|||
|
|
MOVE_THE_IMAGE_NAME: "Set the hotkey for moving the image",
|
|||
|
|
MOVE_THE_IMAGE_DESC: "You can move the image on the popup layer by hotkey.",
|
|||
|
|
SWITCH_THE_IMAGE_NAME: "Set the hotkey for switching the image",
|
|||
|
|
SWITCH_THE_IMAGE_DESC: "You can switch to the previous/next image on the gallery navbar by hotkey. (NOTE: You need to turn on 'Display gallery navbar' first, if you wanna use this hotkey.)",
|
|||
|
|
DOUBLE_CLICK_TOOLBAR_NAME: "Double click",
|
|||
|
|
VIEW_TRIGGER_HOTKEY_NAME: "Set the hotkey for triggering viewing an image",
|
|||
|
|
VIEW_TRIGGER_HOTKEY_DESC: "When you set 'None', you can directly click and preview an image without holding any modifier keys; otherwise, you must hold the configured modifier keys to click and preview an image.",
|
|||
|
|
// MODIFIER_HOTKEYS
|
|||
|
|
NONE: "None",
|
|||
|
|
CTRL: "Ctrl",
|
|||
|
|
ALT: "Alt",
|
|||
|
|
SHIFT: "Shift",
|
|||
|
|
CTRL_ALT: "Ctrl+Alt",
|
|||
|
|
CTRL_SHIFT: "Ctrl+Shift",
|
|||
|
|
SHIFT_ALT: "Shift+Alt",
|
|||
|
|
CTRL_SHIFT_ALT: "Ctrl+Shift+Alt",
|
|||
|
|
// toolbar icon title
|
|||
|
|
ZOOM_TO_100: "zoom to 100%",
|
|||
|
|
ZOOM_IN: "zoom in",
|
|||
|
|
ZOOM_OUT: "zoom out",
|
|||
|
|
FULL_SCREEN: 'full screen',
|
|||
|
|
REFRESH: "refresh",
|
|||
|
|
ROTATE_LEFT: "rotate left",
|
|||
|
|
ROTATE_RIGHT: "rotate right",
|
|||
|
|
SCALE_X: 'flip along x-axis',
|
|||
|
|
SCALE_Y: 'flip along y-axis',
|
|||
|
|
INVERT_COLOR: 'invert color',
|
|||
|
|
COPY: 'copy',
|
|||
|
|
CLOSE: 'close',
|
|||
|
|
// tip:
|
|||
|
|
COPY_IMAGE_SUCCESS: 'Copy the image successfully!',
|
|||
|
|
COPY_IMAGE_ERROR: 'Fail to copy the image!'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// British English
|
|||
|
|
var enGB = {};
|
|||
|
|
|
|||
|
|
// Español
|
|||
|
|
var es = {};
|
|||
|
|
|
|||
|
|
// français
|
|||
|
|
var fr = {};
|
|||
|
|
|
|||
|
|
// हिन्दी
|
|||
|
|
var hi = {};
|
|||
|
|
|
|||
|
|
// Bahasa Indonesia
|
|||
|
|
var id = {};
|
|||
|
|
|
|||
|
|
// Italiano
|
|||
|
|
var it = {};
|
|||
|
|
|
|||
|
|
// 日本語
|
|||
|
|
var ja = {};
|
|||
|
|
|
|||
|
|
// 한국어
|
|||
|
|
var ko = {};
|
|||
|
|
|
|||
|
|
// Nederlands
|
|||
|
|
var nl = {};
|
|||
|
|
|
|||
|
|
// Norsk
|
|||
|
|
var no = {};
|
|||
|
|
|
|||
|
|
// język polski
|
|||
|
|
var pl = {};
|
|||
|
|
|
|||
|
|
// Português
|
|||
|
|
var pt = {};
|
|||
|
|
|
|||
|
|
// Português do Brasil
|
|||
|
|
// Brazilian Portuguese
|
|||
|
|
var ptBR = {};
|
|||
|
|
|
|||
|
|
// Română
|
|||
|
|
var ro = {};
|
|||
|
|
|
|||
|
|
// русский
|
|||
|
|
var ru = {};
|
|||
|
|
|
|||
|
|
// Türkçe
|
|||
|
|
var tr = {};
|
|||
|
|
|
|||
|
|
// 简体中文
|
|||
|
|
var zhCN = {
|
|||
|
|
// settings
|
|||
|
|
IMAGE_TOOLKIT_SETTINGS_TITLE: "Image Toolkit 插件设置",
|
|||
|
|
// >>> 预览触发配置：
|
|||
|
|
VIEW_TRIGGER_SETTINGS: '预览触发配置：',
|
|||
|
|
VIEW_IMAGE_GLOBAL_NAME: '支持全局预览图片',
|
|||
|
|
VIEW_IMAGE_GLOBAL_DESC: '开启后，在任何地方点击图片都可以弹出预览界面，可对图片进行缩放、旋转、拖动、和反色等。',
|
|||
|
|
VIEW_IMAGE_EDITOR_NAME: '支持在编辑区域预览图片',
|
|||
|
|
VIEW_IMAGE_EDITOR_DESC: '开启后，支持在编辑区域，点击图片预览。',
|
|||
|
|
// CPB = COMMUNITY_PLUGINS_BROWSER
|
|||
|
|
VIEW_IMAGE_IN_CPB_NAME: '支持在社区插件页面预览图片',
|
|||
|
|
VIEW_IMAGE_IN_CPB_DESC: '开启后，支持在社区插件页面，点击图片预览。',
|
|||
|
|
VIEW_IMAGE_WITH_A_LINK_NAME: '支持预览带链接的图片',
|
|||
|
|
VIEW_IMAGE_WITH_A_LINK_DESC: '开启后，支持点击带链接的图片（注意：点击该图片，会同时打开浏览器访问指定地址和弹出预览图片）',
|
|||
|
|
VIEW_IMAGE_OTHER_NAME: '支持除上述其他地方来预览图片',
|
|||
|
|
VIEW_IMAGE_OTHER_DESC: '除上述支持范围外，还支持一些其他区域，如flashcards。',
|
|||
|
|
// >>> PIN_MODE_SETTINGS
|
|||
|
|
PIN_MODE_SETTINGS: "贴图模式设置：",
|
|||
|
|
PIN_MODE_NAME: "📌 将所点击的图片贴到屏幕上",
|
|||
|
|
PIN_MODE_DESC: "你可以将当前所点击的图片贴到屏幕上，并且可以通过右击图片选择更多操作（按 Esc 关闭已贴图片的展示）",
|
|||
|
|
PIN_MAXIMUM_NAME: "最大贴图数量",
|
|||
|
|
PIN_COVER_NAME: "覆盖模式",
|
|||
|
|
PIN_COVER_DESC: "当贴图数量达到最大值后，此时再次点击图片，该图片会覆盖最早弹出的那个贴图。",
|
|||
|
|
// >>>查看细节设置：
|
|||
|
|
VIEW_DETAILS_SETTINGS: '查看细节设置：',
|
|||
|
|
IMAGE_MOVE_SPEED_NAME: '图片移动速度设置',
|
|||
|
|
IMAGE_MOVE_SPEED_DESC: '当使用键盘（上、下、左、右）移动图片时，可对图片移动速度进行设置。',
|
|||
|
|
IMAGE_TIP_TOGGLE_NAME: "展示缩放比例提示",
|
|||
|
|
IMAGE_TIP_TOGGLE_DESC: "开启后，当你缩放图片时会展示当前缩放的比例。",
|
|||
|
|
IMG_FULL_SCREEN_MODE_NAME: '全屏预览模式',
|
|||
|
|
// 全屏预览模式 下拉：
|
|||
|
|
FIT: '自适应',
|
|||
|
|
FILL: '填充',
|
|||
|
|
STRETCH: '拉伸',
|
|||
|
|
IMG_VIEW_BACKGROUND_COLOR_NAME: "设置预览图片的背景色（仅对透明背景的图片生效）",
|
|||
|
|
// >>>图片边框设置：
|
|||
|
|
IMAGE_BORDER_SETTINGS: '图片边框设置：',
|
|||
|
|
IMAGE_BORDER_TOGGLE_NAME: "展示被点击图片的边框",
|
|||
|
|
IMAGE_BORDER_TOGGLE_DESC: "当离开图片预览和关闭弹出层后，突出展示被点击图片的边框。",
|
|||
|
|
IMAGE_BORDER_WIDTH_NAME: "设置图片边框宽度",
|
|||
|
|
IMAGE_BORDER_STYLE_NAME: "设置图片边框样式",
|
|||
|
|
IMAGE_BORDER_COLOR_NAME: "设置图片边框颜色",
|
|||
|
|
// IMG_BORDER_WIDTH 下拉：
|
|||
|
|
THIN: '较细',
|
|||
|
|
MEDIUM: '正常',
|
|||
|
|
THICK: '较粗',
|
|||
|
|
// IMG_BORDER_STYLE 下拉：
|
|||
|
|
//HIDDEN: '隐藏',
|
|||
|
|
DOTTED: '点状',
|
|||
|
|
DASHED: '虚线',
|
|||
|
|
SOLID: '实线',
|
|||
|
|
DOUBLE: '双线',
|
|||
|
|
GROOVE: '凹槽',
|
|||
|
|
RIDGE: ' 垄状',
|
|||
|
|
INSET: '凹边',
|
|||
|
|
OUTSET: '凸边',
|
|||
|
|
// IMAGE_BORDER_COLOR_NAME 下拉：
|
|||
|
|
BLACK: '黑色',
|
|||
|
|
BLUE: '蓝色',
|
|||
|
|
DARK_GREEN: '深绿色',
|
|||
|
|
GREEN: '绿色',
|
|||
|
|
LIME: '淡黄绿色',
|
|||
|
|
STEEL_BLUE: '钢青色',
|
|||
|
|
INDIGO: '靛蓝色',
|
|||
|
|
PURPLE: '紫色',
|
|||
|
|
GRAY: '灰色',
|
|||
|
|
DARK_RED: '深红色',
|
|||
|
|
LIGHT_GREEN: '浅绿色',
|
|||
|
|
BROWN: '棕色',
|
|||
|
|
LIGHT_BLUE: '浅蓝色',
|
|||
|
|
SILVER: '银色',
|
|||
|
|
RED: '红色',
|
|||
|
|
PINK: '粉红色',
|
|||
|
|
ORANGE: '橘黄色',
|
|||
|
|
GOLD: '金色',
|
|||
|
|
YELLOW: '黄色',
|
|||
|
|
// >>>Gallery Navbar Settings:
|
|||
|
|
GALLERY_NAVBAR_SETTINGS: '图片导航设置 (体验版):',
|
|||
|
|
GALLERY_NAVBAR_TOGGLE_NAME: "展示图片导航",
|
|||
|
|
GALLERY_NAVBAR_TOGGLE_DESC: "当前文档的所有图片会展示在弹出层的底部，可随意切换展示不同图片。",
|
|||
|
|
GALLERY_NAVBAR_DEFAULT_COLOR_NAME: "设置图片导航底栏背景色（默认展示）",
|
|||
|
|
GALLERY_NAVBAR_HOVER_COLOR_NAME: "设置图片导航底栏背景色（鼠标悬浮时）",
|
|||
|
|
GALLERY_IMG_BORDER_TOGGLE_NAME: "展示图片导航上被选中的图片",
|
|||
|
|
GALLERY_IMG_BORDER_TOGGLE_DESC: "当你选中正查看某一图片，对应图片导航底栏上将突出显示该缩略图片的边框。",
|
|||
|
|
GALLERY_IMG_BORDER_ACTIVE_COLOR_NAME: '设置被选中图片的边框色',
|
|||
|
|
// >>>HOTKEYS_SETTINGS:
|
|||
|
|
HOTKEY_SETTINGS: "快捷键设置:",
|
|||
|
|
HOTKEY_SETTINGS_DESC: "📢 你无法为'移动图片'和'切换图片'设置相同的快捷键。（不支持贴图模式）",
|
|||
|
|
MOVE_THE_IMAGE_NAME: "为移动图片设置快捷键",
|
|||
|
|
MOVE_THE_IMAGE_DESC: "你可以利用快捷键来移动弹出层上的图片。",
|
|||
|
|
SWITCH_THE_IMAGE_NAME: "为切换图片设置快捷键",
|
|||
|
|
SWITCH_THE_IMAGE_DESC: "你可以利用快捷键来切换在图片导航栏上的图片至上一张/下一张。(注意: 仅当开启“展示图片导航”后，才能使用该快捷键来控制切换图片。)",
|
|||
|
|
DOUBLE_CLICK_TOOLBAR_NAME: "双击",
|
|||
|
|
VIEW_TRIGGER_HOTKEY_NAME: "为触发弹出查看图片设置快捷键",
|
|||
|
|
VIEW_TRIGGER_HOTKEY_DESC: "当你设置为“无”，你可以直接点击预览图片；否则，须按住已配置的修改键（Ctrl、Alt、Shift）才能点击查看某个图片。",
|
|||
|
|
// MODIFIER_HOTKEYS
|
|||
|
|
NONE: "无",
|
|||
|
|
// toolbar icon title
|
|||
|
|
ZOOM_TO_100: "缩放至100%",
|
|||
|
|
ZOOM_IN: "放大",
|
|||
|
|
ZOOM_OUT: "缩小",
|
|||
|
|
FULL_SCREEN: "全屏",
|
|||
|
|
REFRESH: "刷新",
|
|||
|
|
ROTATE_LEFT: "左旋",
|
|||
|
|
ROTATE_RIGHT: "右旋",
|
|||
|
|
SCALE_X: 'x轴翻转',
|
|||
|
|
SCALE_Y: 'y轴翻转',
|
|||
|
|
INVERT_COLOR: '反色',
|
|||
|
|
COPY: '复制',
|
|||
|
|
CLOSE: '关闭',
|
|||
|
|
// tip:
|
|||
|
|
COPY_IMAGE_SUCCESS: '拷贝图片成功！',
|
|||
|
|
COPY_IMAGE_ERROR: '拷贝图片失败！'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 繁體中文
|
|||
|
|
var zhTW = {
|
|||
|
|
// settings
|
|||
|
|
IMAGE_TOOLKIT_SETTINGS_TITLE: "image toolkit 設定",
|
|||
|
|
// toolbar icon title
|
|||
|
|
ZOOM_IN: "放大",
|
|||
|
|
ZOOM_OUT: "縮小",
|
|||
|
|
FULL_SCREEN: '全螢幕',
|
|||
|
|
REFRESH: "重整",
|
|||
|
|
ROTATE_LEFT: "向左旋轉",
|
|||
|
|
ROTATE_RIGHT: "向右旋轉",
|
|||
|
|
SCALE_X: 'x 軸縮放',
|
|||
|
|
SCALE_Y: 'y 軸縮放',
|
|||
|
|
INVERT_COLOR: '色彩反轉',
|
|||
|
|
COPY: '複製',
|
|||
|
|
COPY_IMAGE_SUCCESS: '成功複製圖片！'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const localeMap = {
|
|||
|
|
ar,
|
|||
|
|
cs: cz,
|
|||
|
|
da,
|
|||
|
|
de,
|
|||
|
|
en,
|
|||
|
|
"en-gb": enGB,
|
|||
|
|
es,
|
|||
|
|
fr,
|
|||
|
|
hi,
|
|||
|
|
id,
|
|||
|
|
it,
|
|||
|
|
ja,
|
|||
|
|
ko,
|
|||
|
|
nl,
|
|||
|
|
nn: no,
|
|||
|
|
pl,
|
|||
|
|
pt,
|
|||
|
|
"pt-br": ptBR,
|
|||
|
|
ro,
|
|||
|
|
ru,
|
|||
|
|
tr,
|
|||
|
|
"zh-cn": zhCN,
|
|||
|
|
"zh-tw": zhTW,
|
|||
|
|
};
|
|||
|
|
const locale = localeMap[obsidian.moment.locale()];
|
|||
|
|
function t(str) {
|
|||
|
|
if (!locale) {
|
|||
|
|
console.error("Error: Image toolkit locale not found", obsidian.moment.locale());
|
|||
|
|
}
|
|||
|
|
return (locale && locale[str]) || en[str];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const ZOOM_FACTOR = 0.8;
|
|||
|
|
const IMG_VIEW_MIN = 30;
|
|||
|
|
const ICONS = [{
|
|||
|
|
id: 'zoom-to-100',
|
|||
|
|
svg: `<g> <path id="svg_1" d="m42,6c-18.8,0 -34,15.2 -34,34s15.2,34 34,34c7.4,0 14.3,-2.4 19.9,-6.4l26.3,26.3l5.6,-5.6l-26,-26.1c5.1,-6 8.2,-13.7 8.2,-22.1c0,-18.9 -15.2,-34.1 -34,-34.1zm0,4c16.6,0 30,13.4 30,30s-13.4,30 -30,30s-30,-13.4 -30,-30s13.4,-30 30,-30z" stroke-width="2" stroke="currentColor" fill="currentColor"/> <text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="24" id="svg_2" y="48.5" x="24" stroke-width="0" stroke="#000" fill="#000000">1:1</text> </g>`
|
|||
|
|
}];
|
|||
|
|
const SEPARATOR_SYMBOL = "---";
|
|||
|
|
const TOOLBAR_CONF = [{
|
|||
|
|
title: "ZOOM_TO_100",
|
|||
|
|
class: 'toolbar_zoom_to_100',
|
|||
|
|
icon: 'zoom-to-100',
|
|||
|
|
enableToolbarIcon: true,
|
|||
|
|
enableMenu: true,
|
|||
|
|
enableHotKey: true
|
|||
|
|
}, {
|
|||
|
|
title: "ZOOM_IN",
|
|||
|
|
class: 'toolbar_zoom_in',
|
|||
|
|
icon: 'zoom-in',
|
|||
|
|
enableToolbarIcon: true,
|
|||
|
|
enableMenu: false,
|
|||
|
|
enableHotKey: true
|
|||
|
|
}, {
|
|||
|
|
title: "ZOOM_OUT",
|
|||
|
|
class: 'toolbar_zoom_out',
|
|||
|
|
icon: 'zoom-out',
|
|||
|
|
enableToolbarIcon: true,
|
|||
|
|
enableMenu: false,
|
|||
|
|
enableHotKey: true
|
|||
|
|
}, {
|
|||
|
|
title: "FULL_SCREEN",
|
|||
|
|
class: 'toolbar_full_screen',
|
|||
|
|
icon: 'expand',
|
|||
|
|
enableToolbarIcon: true,
|
|||
|
|
enableMenu: true,
|
|||
|
|
enableHotKey: true
|
|||
|
|
}, {
|
|||
|
|
title: "REFRESH",
|
|||
|
|
class: 'toolbar_refresh',
|
|||
|
|
icon: 'refresh-ccw',
|
|||
|
|
enableToolbarIcon: true,
|
|||
|
|
enableMenu: true,
|
|||
|
|
enableHotKey: true
|
|||
|
|
}, {
|
|||
|
|
title: "ROTATE_LEFT",
|
|||
|
|
class: 'toolbar_rotate_left',
|
|||
|
|
icon: 'rotate-ccw',
|
|||
|
|
enableToolbarIcon: true,
|
|||
|
|
enableMenu: true,
|
|||
|
|
enableHotKey: true
|
|||
|
|
}, {
|
|||
|
|
title: "ROTATE_RIGHT",
|
|||
|
|
class: 'toolbar_rotate_right',
|
|||
|
|
icon: 'rotate-cw',
|
|||
|
|
enableToolbarIcon: true,
|
|||
|
|
enableMenu: true,
|
|||
|
|
enableHotKey: true
|
|||
|
|
}, {
|
|||
|
|
title: "SCALE_X",
|
|||
|
|
class: 'toolbar_scale_x',
|
|||
|
|
icon: 'move-horizontal',
|
|||
|
|
enableToolbarIcon: true,
|
|||
|
|
enableMenu: true,
|
|||
|
|
enableHotKey: true
|
|||
|
|
}, {
|
|||
|
|
title: "SCALE_Y",
|
|||
|
|
class: 'toolbar_scale_y',
|
|||
|
|
icon: 'move-vertical',
|
|||
|
|
enableToolbarIcon: true,
|
|||
|
|
enableMenu: true,
|
|||
|
|
enableHotKey: true
|
|||
|
|
}, {
|
|||
|
|
title: "INVERT_COLOR",
|
|||
|
|
class: 'toolbar_invert_color',
|
|||
|
|
icon: 'droplet',
|
|||
|
|
enableToolbarIcon: true,
|
|||
|
|
enableMenu: true,
|
|||
|
|
enableHotKey: true
|
|||
|
|
}, {
|
|||
|
|
title: "COPY",
|
|||
|
|
class: 'toolbar_copy',
|
|||
|
|
icon: 'copy',
|
|||
|
|
enableToolbarIcon: true,
|
|||
|
|
enableMenu: true,
|
|||
|
|
enableHotKey: true
|
|||
|
|
}, {
|
|||
|
|
title: SEPARATOR_SYMBOL,
|
|||
|
|
enableToolbarIcon: false,
|
|||
|
|
enableMenu: true,
|
|||
|
|
enableHotKey: false
|
|||
|
|
}, {
|
|||
|
|
title: "CLOSE",
|
|||
|
|
class: 'toolbar_close',
|
|||
|
|
icon: 'trash',
|
|||
|
|
enableToolbarIcon: false,
|
|||
|
|
enableMenu: true,
|
|||
|
|
enableHotKey: true
|
|||
|
|
}];
|
|||
|
|
const IMG_FULL_SCREEN_MODE = {
|
|||
|
|
FIT: 'FIT',
|
|||
|
|
FILL: 'FILL',
|
|||
|
|
STRETCH: 'STRETCH'
|
|||
|
|
};
|
|||
|
|
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)`,
|
|||
|
|
OTHER: `#sr-flashcard-view img`,
|
|||
|
|
OTHER_NO_LINK: `#sr-flashcard-view img:not(a img)`,
|
|||
|
|
};
|
|||
|
|
const IMG_BORDER_WIDTH = {
|
|||
|
|
THIN: 'thin',
|
|||
|
|
MEDIUM: 'medium',
|
|||
|
|
THICK: 'thick'
|
|||
|
|
};
|
|||
|
|
const IMG_BORDER_STYLE = {
|
|||
|
|
// HIDDEN: 'hidden',
|
|||
|
|
DOTTED: 'dotted',
|
|||
|
|
DASHED: 'dashed',
|
|||
|
|
SOLID: 'solid',
|
|||
|
|
DOUBLE: 'double',
|
|||
|
|
GROOVE: 'groove',
|
|||
|
|
RIDGE: 'ridge',
|
|||
|
|
INSET: 'inset',
|
|||
|
|
OUTSET: 'outset'
|
|||
|
|
};
|
|||
|
|
// https://www.runoob.com/cssref/css-colorsfull.html
|
|||
|
|
const IMG_BORDER_COLOR = {
|
|||
|
|
BLACK: 'black',
|
|||
|
|
BLUE: 'blue',
|
|||
|
|
DARK_GREEN: 'darkgreen',
|
|||
|
|
GREEN: 'green',
|
|||
|
|
LIME: 'lime',
|
|||
|
|
STEEL_BLUE: 'steelblue',
|
|||
|
|
INDIGO: 'indigo',
|
|||
|
|
PURPLE: 'purple',
|
|||
|
|
GRAY: 'gray',
|
|||
|
|
DARK_RED: 'darkred',
|
|||
|
|
LIGHT_GREEN: 'lightgreen',
|
|||
|
|
BROWN: 'brown',
|
|||
|
|
LIGHT_BLUE: 'lightblue',
|
|||
|
|
SILVER: 'silver',
|
|||
|
|
RED: 'red',
|
|||
|
|
PINK: 'pink',
|
|||
|
|
ORANGE: 'orange',
|
|||
|
|
GOLD: 'gold',
|
|||
|
|
YELLOW: 'yellow'
|
|||
|
|
};
|
|||
|
|
const GALLERY_NAVBAR_DEFAULT_COLOR = '#0000001A'; // rgba(0, 0, 0, 0.1)
|
|||
|
|
const GALLERY_NAVBAR_HOVER_COLOR = '#0000004D'; // rgba(0, 0, 0, 0.3)
|
|||
|
|
const GALLERY_IMG_BORDER_ACTIVE_COLOR = '#FF0000'; // red
|
|||
|
|
const MODIFIER_HOTKEYS = {
|
|||
|
|
NONE: "NONE",
|
|||
|
|
CTRL: "CTRL",
|
|||
|
|
ALT: "ALT",
|
|||
|
|
SHIFT: "SHIFT",
|
|||
|
|
CTRL_ALT: "CTRL_ALT",
|
|||
|
|
CTRL_SHIFT: "CTRL_SHIFT",
|
|||
|
|
SHIFT_ALT: "SHIFT_ALT",
|
|||
|
|
CTRL_SHIFT_ALT: "CTRL_SHIFT_ALT"
|
|||
|
|
};
|
|||
|
|
const MOVE_THE_IMAGE = {
|
|||
|
|
CODE: "MOVE_THE_IMAGE",
|
|||
|
|
DEFAULT_HOTKEY: MODIFIER_HOTKEYS.NONE,
|
|||
|
|
SVG: `<svg width="56" height="37" xmlns="http://www.w3.org/2000/svg" class="icon"><path fill="none" d="M-1 -1H57V38H-1z"/><g><path stroke="null" fill="#707070" d="M19.001 16.067V1.928C19.001.864 19.865 0 20.93 0h14.142c1.064 0 1.928.864 1.928 1.928v14.14a1.929 1.929 0 01-1.928 1.927H20.929a1.929 1.929 0 01-1.928-1.928zm4.805-5.909l2.908-3.032v7.334c0 .535.43.964.965.964h.642c.535 0 .965-.43.965-.964V7.126l2.908 3.032a.965.965 0 001.378.017l.438-.442a.96.96 0 000-1.362l-5.327-5.33a.96.96 0 00-1.362 0l-5.335 5.33a.96.96 0 000 1.362l.438.441a.97.97 0 001.382-.016zM36.999 20.933v14.139A1.929 1.929 0 0135.07 37H20.929a1.929 1.929 0 01-1.928-1.928v-14.14c0-1.064.864-1.927 1.928-1.927h14.142c1.064 0 1.928.863 1.928 1.928zm-4.805 5.909l-2.908 3.032V22.54a.962.962 0 00-.965-.964h-.642a.962.962 0 00-.965.964v7.334l-2.908-3.032a.965.965 0 00-1.378-.016l-.438.441a.96.96 0 000 1.362l5.327 5.33a.96.96 0 001.362 0l5.335-5.33a.96.96 0 000-1.362l-.438-.441a.97.97 0 00-1.382.016zM16.068 37.001H1.93a1.929 1.929 0 01-1.928-1.928V20.932c0-1.065.864-1.928 1.928-1.928h14.14c1.064 0 1.927.863 1.927 1.928v14.14a1.929 1.929 0 01-1.928 1.93zm-5.908-4.804l-3.033-2.909h7.335c.534 0 .964-.43.964-.964v-.643a.962.962 0 00-.964-.964H7.127l3.033-2.909a.965.965 0 00.016-1.378l-.442-.438a.96.96 0 00-1.362 0l-5.33 5.327a.96.96 0 000 1.362l5.33 5.335a.96.96 0 001.362 0l.442-.438a.97.97 0 00-.016-1.381zM39.932 19.004H54.07c1.064 0 1.928.863 1.928 1.928v14.14a1.929 1.929 0 01-1.928 1.93H39.93a1.929 1.929 0 01-1.927-1.93v-14.14c0-1.065.863-1.928 1.928-1.928zm5.908 4.804l3.033 2.909h-7.335a.962.962 0 00-.964.964v.643c0 .534.43.964.964.964h7.335l-3.033 2.909a.965.965 0 00-.016 1.377l.442.438a.96.96 0 001.362 0l5.33-5.327a.96.96 0 000-1.362l-5.33-5.335a.96.96 0 00-1.362 0l-.442.438a.97.97 0 00.016 1.382z"/></g></svg>`
|
|||
|
|
};
|
|||
|
|
const SWITCH_THE_IMAGE = {
|
|||
|
|
CODE: "SWITCH_THE_IMAGE",
|
|||
|
|
DEFAULT_HOTKEY: MODIFIER_HOTKEYS.CTRL,
|
|||
|
|
SVG: `<svg width="37" height="18" xmlns="http://www.w3.org/2000/svg" class="icon"><path fill="none" d="M-1 -1H38V19H-1z"/><g><path stroke="null" fill="#707070" d="M16.068 17.999H1.93A1.929 1.929 0 01.001 16.07V1.929C.001.865.865.001 1.93.001h14.14c1.064 0 1.927.864 1.927 1.928v14.142a1.929 1.929 0 01-1.928 1.928zm-5.908-4.805l-3.033-2.908h7.335c.534 0 .964-.43.964-.965V8.68a.962.962 0 00-.964-.965H7.127l3.033-2.908a.965.965 0 00.016-1.378l-.442-.438a.96.96 0 00-1.362 0l-5.33 5.327a.96.96 0 000 1.362l5.33 5.335a.96.96 0 001.362 0l.442-.438a.97.97 0 00-.016-1.382zM20.932.001H35.07c1.064 0 1.928.864 1.928 1.928v14.142a1.929 1.929 0 01-1.928 1.928H20.93a1.929 1.929 0 01-1.927-1.928V1.929c0-1.064.863-1.928 1.928-1.928zm5.908 4.805l3.033 2.908h-7.335a.962.962 0 00-.964.965v.642c0 .535.43.965.964.965h7.335l-3.033 2.908a.965.965 0 00-.016 1.378l.442.438a.96.96 0 001.362 0l5.33-5.327a.96.96 0 000-1.362l-5.33-5.335a.96.96 0 00-1.362 0l-.442.438a.97.97 0 00.016 1.382z"/></g></svg>`
|
|||
|
|
};
|
|||
|
|
const IMG_DEFAULT_BACKGROUND_COLOR = '#00000000';
|
|||
|
|
|
|||
|
|
function getDefaultExportFromCjs (x) {
|
|||
|
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function createCommonjsModule(fn) {
|
|||
|
|
var module = { exports: {} };
|
|||
|
|
return fn(module, module.exports), module.exports;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*! Pickr 1.8.2 MIT | https://github.com/Simonwep/pickr */
|
|||
|
|
|
|||
|
|
var pickr_min = createCommonjsModule(function (module, exports) {
|
|||
|
|
!function(t,e){module.exports=e();}(self,(function(){return (()=>{var t={d:(e,o)=>{for(var n in o)t.o(o,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:o[n]});},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0});}},e={};t.d(e,{default:()=>L});var o={};function n(t,e,o,n,i={}){e instanceof HTMLCollection||e instanceof NodeList?e=Array.from(e):Array.isArray(e)||(e=[e]),Array.isArray(o)||(o=[o]);for(const s of e)for(const e of o)s[t](e,n,{capture:!1,...i});return Array.prototype.slice.call(arguments,1)}t.r(o),t.d(o,{adjustableInputNumbers:()=>p,createElementFromString:()=>r,createFromTemplate:()=>a,eventPath:()=>l,off:()=>s,on:()=>i,resolveElement:()=>c});const i=n.bind(null,"addEventListener"),s=n.bind(null,"removeEventListener");function r(t){const e=document.createElement("div");return e.innerHTML=t.trim(),e.firstElementChild}function a(t){const e=(t,e)=>{const o=t.getAttribute(e);return t.removeAttribute(e),o},o=(t,n={})=>{const i=e(t,":obj"),s=e(t,":ref"),r=i?n[i]={}:n;s&&(n[s]=t);for(const n of Array.from(t.children)){const t=e(n,":arr"),i=o(n,t?{}:r);t&&(r[t]||(r[t]=[])).push(Object.keys(i).length?i:n);}return n};return o(r(t))}function l(t){let e=t.path||t.composedPath&&t.composedPath();if(e)return e;let o=t.target.parentElement;for(e=[t.target,o];o=o.parentElement;)e.push(o);return e.push(document,window),e}function c(t){return t instanceof Element?t:"string"==typeof t?t.split(/>>/g).reduce(((t,e,o,n)=>(t=t.querySelector(e),o<n.length-1?t.shadowRoot:t)),document):null}function p(t,e=(t=>t)){function o(o){const n=[.001,.01,.1][Number(o.shiftKey||2*o.ctrlKey)]*(o.deltaY<0?1:-1);let i=0,s=t.selectionStart;t.value=t.value.replace(/[\d.]+/g,((t,o)=>o<=s&&o+t.length>=s?(s=o,e(Number(t),n,i)):(i++,t))),t.focus(),t.setSelectionRange(s,s),o.preventDefault(),t.dispatchEvent(new Event("input"));}i(t,"focus",(()=>i(window,"wheel",o,{passive:!1}))),i(t,"blur",(()=>s(window,"wheel",o)));}const{min:u,max:h,floor:d,round:m}=Math;function f(t,e,o){e/=100,o/=100;const n=d(t=t/360*6),i=t-n,s=o*(1-e),r=o*(1-i*e),a=o*(1-(1-i)*e),l=n%6;return [255*[o,r,s,s,a,o][l],255*[a,o,o,r,s,s][l],255*[s,s,a,o,o,r][l]]}function v(t,e,o){const n=(2-(e/=100))*(o/=100)/2;return 0!==n&&(e=1===n?0:n<.5?e*o/(2*n):e*o/(2-2*n)),[t,100*e,100*n]}function b(t,e,o){const n=u(t/=255,e/=255,o/=255),i=h(t,e,o),s=i-n;let r,a;if(0===s)r=a=0;else {a=s/i;const n=((i-t)/6+s/2)/s,l=((i-e)/6+s/2)/s,c=((i-o)/6+s/2)/s;t===i?r=c-l:e===i?r=1/3+n-c:o===i&&(r=2/3+l-n),r<0?r+=1:r>1&&(r-=1);}return [360*r,100*a,100*i]}function y(t,e,o,n){e/=100,o/=100;return [...b(255*(1-u(1,(t/=100)*(1-(n/=100))+n)),255*(1-u(1,e*(1-n)+n)),255*(1-u(1,o*(1-n)+n)))]}function g(t,e,o){e/=100;const n=2*(e*=(o/=100)<.5?o:1-o)/(o+e)*100,i=100*(o+e);return [t,isNaN(n)?0:n,i]}function _(t){return b(...t.match(/.{2}/g).map((t=>parseInt(t,16))))}function w(t){t=t.match(/^[a-zA-Z]+$/)?function(t){if("black"===t.toLowerCase())return "#000";const e=document.createElement("canvas").getContext("2d");return e.fillStyle=t,"#000"===e.fillStyle?null:e.fillStyle}(t):t;const e={cmyk:/^cmyk[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)/i,rgba:/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,hsla:/^((hsla)|hsl)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,hsva:/^((hsva)|hsv)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,hexa:/^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i},o=t=>t.map((t=>/^(|\d+)\.\d+|\d+$/.test(t)?Number(t):void 0));let n;t:for(const i in e){if(!(n=e[i].exec(t)))continue;const s=t=>!!n[2]==("number"==typeof t);switch(i){case"cmyk":{const[,t,e,s,r]=o(n);if(t>100||e>100||s>100||r>100)break t;return {values:y(t,e,s,r),type:i}}case"rgba":{const[,,,t,e,r,a]=o(n);if(t>255||e>255||r>255||a<0||a>1||!s(a))break t;return {values:[...b(t,e,r),a],a,type:i}}case"hexa":{let[,t]=n;4!==t.length&&3!==t.length||(t=t.split("").map((t=>t+t)).join(""));const e=t.substring(0,6);let o=t.
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var Pickr = /*@__PURE__*/getDefaultExportFromCjs(pickr_min);
|
|||
|
|
|
|||
|
|
const DEFAULT_SETTINGS = {
|
|||
|
|
viewImageEditor: true,
|
|||
|
|
viewImageInCPB: true,
|
|||
|
|
viewImageWithALink: true,
|
|||
|
|
viewImageOther: true,
|
|||
|
|
pinMode: false,
|
|||
|
|
pinMaximum: 3,
|
|||
|
|
pinCoverMode: true,
|
|||
|
|
imageMoveSpeed: 10,
|
|||
|
|
imgTipToggle: true,
|
|||
|
|
imgFullScreenMode: IMG_FULL_SCREEN_MODE.FIT,
|
|||
|
|
imgViewBackgroundColor: IMG_DEFAULT_BACKGROUND_COLOR,
|
|||
|
|
imageBorderToggle: false,
|
|||
|
|
imageBorderWidth: IMG_BORDER_WIDTH.MEDIUM,
|
|||
|
|
imageBorderStyle: IMG_BORDER_STYLE.SOLID,
|
|||
|
|
imageBorderColor: IMG_BORDER_COLOR.RED,
|
|||
|
|
galleryNavbarToggle: true,
|
|||
|
|
galleryNavbarDefaultColor: GALLERY_NAVBAR_DEFAULT_COLOR,
|
|||
|
|
galleryNavbarHoverColor: GALLERY_NAVBAR_HOVER_COLOR,
|
|||
|
|
galleryImgBorderActive: true,
|
|||
|
|
galleryImgBorderActiveColor: GALLERY_IMG_BORDER_ACTIVE_COLOR,
|
|||
|
|
// hotkeys conf
|
|||
|
|
moveTheImageHotkey: MOVE_THE_IMAGE.DEFAULT_HOTKEY,
|
|||
|
|
switchTheImageHotkey: SWITCH_THE_IMAGE.DEFAULT_HOTKEY,
|
|||
|
|
doubleClickToolbar: TOOLBAR_CONF[3].class,
|
|||
|
|
viewTriggerHotkey: MODIFIER_HOTKEYS.NONE
|
|||
|
|
};
|
|||
|
|
class ImageToolkitSettingTab extends obsidian.PluginSettingTab {
|
|||
|
|
constructor(app, plugin) {
|
|||
|
|
super(app, plugin);
|
|||
|
|
this.plugin = plugin;
|
|||
|
|
}
|
|||
|
|
display() {
|
|||
|
|
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
|
|||
|
|
//region >>> VIEW_DETAILS_SETTINGS
|
|||
|
|
containerEl.createEl('h3', { text: t("VIEW_DETAILS_SETTINGS") });
|
|||
|
|
let imgMoveSpeedScaleText;
|
|||
|
|
new obsidian.Setting(containerEl)
|
|||
|
|
.setName(t("IMAGE_MOVE_SPEED_NAME"))
|
|||
|
|
.setDesc(t("IMAGE_MOVE_SPEED_DESC"))
|
|||
|
|
.addSlider(slider => slider
|
|||
|
|
.setLimits(1, 30, 1)
|
|||
|
|
.setValue(this.plugin.settings.imageMoveSpeed)
|
|||
|
|
.onChange((value) => __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
imgMoveSpeedScaleText.innerText = " " + value.toString();
|
|||
|
|
this.plugin.settings.imageMoveSpeed = value;
|
|||
|
|
this.plugin.saveSettings();
|
|||
|
|
})))
|
|||
|
|
.settingEl.createDiv('', (el) => {
|
|||
|
|
imgMoveSpeedScaleText = el;
|
|||
|
|
el.style.minWidth = "2.3em";
|
|||
|
|
el.style.textAlign = "right";
|
|||
|
|
el.innerText = " " + this.plugin.settings.imageMoveSpeed.toString();
|
|||
|
|
});
|
|||
|
|
new obsidian.Setting(containerEl)
|
|||
|
|
.setName(t("IMAGE_TIP_TOGGLE_NAME"))
|
|||
|
|
.setDesc(t("IMAGE_TIP_TOGGLE_DESC"))
|
|||
|
|
.addToggle(toggle => toggle
|
|||
|
|
.setValue(this.plugin.settings.imgTipToggle)
|
|||
|
|
.onChange((value) => __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
this.plugin.settings.imgTipToggle = value;
|
|||
|
|
yield this.plugin.saveSettings();
|
|||
|
|
})));
|
|||
|
|
new obsidian.Setting(containerEl)
|
|||
|
|
.setName(t("IMG_FULL_SCREEN_MODE_NAME"))
|
|||
|
|
.addDropdown((dropdown) => __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
for (const key in IMG_FULL_SCREEN_MODE) {
|
|||
|
|
// @ts-ignore
|
|||
|
|
dropdown.addOption(key, t(key));
|
|||
|
|
}
|
|||
|
|
dropdown.setValue(this.plugin.settings.imgFullScreenMode);
|
|||
|
|
dropdown.onChange((option) => __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
this.plugin.settings.imgFullScreenMode = option;
|
|||
|
|
yield this.plugin.saveSettings();
|
|||
|
|
}));
|
|||
|
|
}));
|
|||
|
|
this.createPickrSetting(containerEl, 'IMG_VIEW_BACKGROUND_COLOR_NAME', IMG_DEFAULT_BACKGROUND_COLOR);
|
|||
|
|
//endregion
|
|||
|
|
//region >>> IMAGE_BORDER_SETTINGS
|
|||
|
|
containerEl.createEl('h3', { text: t("IMAGE_BORDER_SETTINGS") });
|
|||
|
|
new obsidian.Setting(containerEl)
|
|||
|
|
.setName(t("IMAGE_BORDER_TOGGLE_NAME"))
|
|||
|
|
.setDesc(t("IMAGE_BORDER_TOGGLE_DESC"))
|
|||
|
|
.addToggle(toggle => toggle
|
|||
|
|
.setValue(this.plugin.settings.imageBorderToggle)
|
|||
|
|
.onChange((value) => __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
this.plugin.settings.imageBorderToggle = value;
|
|||
|
|
yield this.plugin.saveSettings();
|
|||
|
|
})));
|
|||
|
|
new obsidian.Setting(containerEl)
|
|||
|
|
.setName(t("IMAGE_BORDER_WIDTH_NAME"))
|
|||
|
|
.addDropdown((dropdown) => __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
for (const key in IMG_BORDER_WIDTH) {
|
|||
|
|
// @ts-ignore
|
|||
|
|
dropdown.addOption(IMG_BORDER_WIDTH[key], t(key));
|
|||
|
|
}
|
|||
|
|
dropdown.setValue(this.plugin.settings.imageBorderWidth);
|
|||
|
|
dropdown.onChange((option) => __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
this.plugin.settings.imageBorderWidth = option;
|
|||
|
|
yield this.plugin.saveSettings();
|
|||
|
|
}));
|
|||
|
|
}));
|
|||
|
|
new obsidian.Setting(containerEl)
|
|||
|
|
.setName(t("IMAGE_BORDER_STYLE_NAME"))
|
|||
|
|
.addDropdown((dropdown) => __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
for (const key in IMG_BORDER_STYLE) {
|
|||
|
|
// @ts-ignore
|
|||
|
|
dropdown.addOption(IMG_BORDER_STYLE[key], t(key));
|
|||
|
|
}
|
|||
|
|
dropdown.setValue(this.plugin.settings.imageBorderStyle);
|
|||
|
|
dropdown.onChange((option) => __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
this.plugin.settings.imageBorderStyle = option;
|
|||
|
|
yield this.plugin.saveSettings();
|
|||
|
|
}));
|
|||
|
|
}));
|
|||
|
|
new obsidian.Setting(containerEl)
|
|||
|
|
.setName(t("IMAGE_BORDER_COLOR_NAME"))
|
|||
|
|
.addDropdown((dropdown) => __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
for (const key in IMG_BORDER_COLOR) {
|
|||
|
|
// @ts-ignore
|
|||
|
|
dropdown.addOption(IMG_BORDER_COLOR[key], t(key));
|
|||
|
|
}
|
|||
|
|
dropdown.setValue(this.plugin.settings.imageBorderColor);
|
|||
|
|
dropdown.onChange((option) => __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
this.plugin.settings.imageBorderColor = option;
|
|||
|
|
yield this.plugin.saveSettings();
|
|||
|
|
}));
|
|||
|
|
}));
|
|||
|
|
//endregion
|
|||
|
|
//region >>> GALLERY_NAVBAR_SETTINGS
|
|||
|
|
let galleryNavbarDefaultColorSetting, galleryNavbarHoverColorSetting, galleryImgBorderToggleSetting, galleryImgBorderActiveColorSetting;
|
|||
|
|
containerEl.createEl('h3', { text: t("GALLERY_NAVBAR_SETTINGS") });
|
|||
|
|
new obsidian.Setting(containerEl)
|
|||
|
|
.setName(t("GALLERY_NAVBAR_TOGGLE_NAME"))
|
|||
|
|
.setDesc(t("GALLERY_NAVBAR_TOGGLE_DESC"))
|
|||
|
|
.addToggle(toggle => toggle
|
|||
|
|
.setValue(this.plugin.settings.galleryNavbarToggle)
|
|||
|
|
.onChange((value) => __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
this.plugin.settings.galleryNavbarToggle = value;
|
|||
|
|
this.switchSettingsDisabled(!value, galleryNavbarDefaultColorSetting, galleryNavbarHoverColorSetting, galleryImgBorderToggleSetting, galleryImgBorderActiveColorSetting);
|
|||
|
|
yield this.plugin.saveSettings();
|
|||
|
|
})));
|
|||
|
|
galleryNavbarDefaultColorSetting = this.createPickrSetting(containerEl, 'GALLERY_NAVBAR_DEFAULT_COLOR_NAME', GALLERY_NAVBAR_DEFAULT_COLOR);
|
|||
|
|
galleryNavbarHoverColorSetting = this.createPickrSetting(containerEl, 'GALLERY_NAVBAR_HOVER_COLOR_NAME', GALLERY_NAVBAR_HOVER_COLOR);
|
|||
|
|
galleryImgBorderToggleSetting = new obsidian.Setting(containerEl)
|
|||
|
|
.setName(t("GALLERY_IMG_BORDER_TOGGLE_NAME"))
|
|||
|
|
.setDesc(t("GALLERY_IMG_BORDER_TOGGLE_DESC"))
|
|||
|
|
.addToggle(toggle => toggle
|
|||
|
|
.setValue(this.plugin.settings.galleryImgBorderActive)
|
|||
|
|
.onChange((value) => __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
this.plugin.settings.galleryImgBorderActive = value;
|
|||
|
|
yield this.plugin.saveSettings();
|
|||
|
|
})));
|
|||
|
|
galleryImgBorderActiveColorSetting = this.createPickrSetting(containerEl, 'GALLERY_IMG_BORDER_ACTIVE_COLOR_NAME', GALLERY_IMG_BORDER_ACTIVE_COLOR);
|
|||
|
|
this.switchSettingsDisabled(!this.plugin.settings.galleryNavbarToggle, galleryNavbarDefaultColorSetting, galleryNavbarHoverColorSetting, galleryImgBorderToggleSetting, galleryImgBorderActiveColorSetting);
|
|||
|
|
//endregion
|
|||
|
|
//region >>> HOTKEYS_SETTINGS
|
|||
|
|
containerEl.createEl('h3', { text: t("HOTKEY_SETTINGS") });
|
|||
|
|
containerEl.createEl('p', { text: t("HOTKEY_SETTINGS_DESC") });
|
|||
|
|
if (this.plugin.settings.moveTheImageHotkey === this.plugin.settings.switchTheImageHotkey) {
|
|||
|
|
this.plugin.settings.moveTheImageHotkey = MOVE_THE_IMAGE.DEFAULT_HOTKEY;
|
|||
|
|
}
|
|||
|
|
const moveTheImageSetting = new obsidian.Setting(containerEl)
|
|||
|
|
.setName(t("MOVE_THE_IMAGE_NAME"))
|
|||
|
|
.setDesc(t("MOVE_THE_IMAGE_DESC"))
|
|||
|
|
.addDropdown((dropdown) => __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
dropdown.addOptions(this.getDropdownOptions());
|
|||
|
|
dropdown.setValue(this.plugin.settings.moveTheImageHotkey);
|
|||
|
|
dropdown.onChange((option) => __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
this.plugin.settings.moveTheImageHotkey = option;
|
|||
|
|
this.checkDropdownOptions(MOVE_THE_IMAGE.CODE, switchTheImageSetting);
|
|||
|
|
yield this.plugin.saveSettings();
|
|||
|
|
}));
|
|||
|
|
})).then((setting) => {
|
|||
|
|
setting.controlEl.appendChild(createDiv('setting-editor-extra-setting-button hotkeys-settings-plus', (el) => {
|
|||
|
|
el.innerHTML = "+";
|
|||
|
|
}));
|
|||
|
|
setting.controlEl.appendChild(createDiv('setting-editor-extra-setting-button', (el) => {
|
|||
|
|
el.innerHTML = MOVE_THE_IMAGE.SVG;
|
|||
|
|
}));
|
|||
|
|
});
|
|||
|
|
if (this.plugin.settings.switchTheImageHotkey === this.plugin.settings.moveTheImageHotkey) {
|
|||
|
|
this.plugin.settings.switchTheImageHotkey = SWITCH_THE_IMAGE.DEFAULT_HOTKEY;
|
|||
|
|
}
|
|||
|
|
const switchTheImageSetting = new obsidian.Setting(containerEl)
|
|||
|
|
.setName(t("SWITCH_THE_IMAGE_NAME"))
|
|||
|
|
.setDesc(t("SWITCH_THE_IMAGE_DESC"))
|
|||
|
|
.addDropdown((dropdown) => __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
dropdown.addOptions(this.getDropdownOptions());
|
|||
|
|
dropdown.setValue(this.plugin.settings.switchTheImageHotkey);
|
|||
|
|
dropdown.onChange((option) => __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
this.plugin.settings.switchTheImageHotkey = option;
|
|||
|
|
this.checkDropdownOptions(SWITCH_THE_IMAGE.CODE, moveTheImageSetting);
|
|||
|
|
yield this.plugin.saveSettings();
|
|||
|
|
}));
|
|||
|
|
})).then((setting) => {
|
|||
|
|
setting.controlEl.appendChild(createDiv('setting-editor-extra-setting-button hotkeys-settings-plus', (el) => {
|
|||
|
|
el.innerHTML = "+";
|
|||
|
|
}));
|
|||
|
|
setting.controlEl.appendChild(createDiv('setting-editor-extra-setting-button', (el) => {
|
|||
|
|
el.innerHTML = SWITCH_THE_IMAGE.SVG;
|
|||
|
|
}));
|
|||
|
|
});
|
|||
|
|
if (switchTheImageSetting) {
|
|||
|
|
this.checkDropdownOptions(MOVE_THE_IMAGE.CODE, switchTheImageSetting);
|
|||
|
|
}
|
|||
|
|
if (moveTheImageSetting) {
|
|||
|
|
this.checkDropdownOptions(SWITCH_THE_IMAGE.CODE, moveTheImageSetting);
|
|||
|
|
}
|
|||
|
|
new obsidian.Setting(containerEl)
|
|||
|
|
.setName(t("DOUBLE_CLICK_TOOLBAR_NAME"))
|
|||
|
|
.addDropdown((dropdown) => __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
for (const conf of TOOLBAR_CONF) {
|
|||
|
|
if (!conf.enableHotKey)
|
|||
|
|
continue;
|
|||
|
|
// @ts-ignore
|
|||
|
|
dropdown.addOption(conf.class, t(conf.title));
|
|||
|
|
}
|
|||
|
|
dropdown.setValue(this.plugin.settings.doubleClickToolbar);
|
|||
|
|
dropdown.onChange((option) => __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
this.plugin.settings.doubleClickToolbar = option;
|
|||
|
|
yield this.plugin.saveSettings();
|
|||
|
|
}));
|
|||
|
|
}));
|
|||
|
|
new obsidian.Setting(containerEl)
|
|||
|
|
.setName(t("VIEW_TRIGGER_HOTKEY_NAME"))
|
|||
|
|
.setDesc(t("VIEW_TRIGGER_HOTKEY_DESC"))
|
|||
|
|
.addDropdown((dropdown) => __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
dropdown.addOptions(this.getDropdownOptions());
|
|||
|
|
dropdown.setValue(this.plugin.settings.viewTriggerHotkey);
|
|||
|
|
dropdown.onChange((option) => __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
this.plugin.settings.viewTriggerHotkey = option;
|
|||
|
|
yield this.plugin.saveSettings();
|
|||
|
|
}));
|
|||
|
|
}));
|
|||
|
|
//endregion
|
|||
|
|
}
|
|||
|
|
switchSettingsDisabled(disabled, ...settings) {
|
|||
|
|
for (const setting of settings) {
|
|||
|
|
setting === null || setting === void 0 ? void 0 : setting.setDisabled(disabled);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
createPickrSetting(containerEl, name, defaultColor) {
|
|||
|
|
let pickrDefault;
|
|||
|
|
if ('GALLERY_NAVBAR_DEFAULT_COLOR_NAME' === name) {
|
|||
|
|
pickrDefault = this.plugin.settings.galleryNavbarDefaultColor;
|
|||
|
|
}
|
|||
|
|
else if ('GALLERY_NAVBAR_HOVER_COLOR_NAME' === name) {
|
|||
|
|
pickrDefault = this.plugin.settings.galleryNavbarHoverColor;
|
|||
|
|
}
|
|||
|
|
else if ('GALLERY_IMG_BORDER_ACTIVE_COLOR_NAME' === name) {
|
|||
|
|
pickrDefault = this.plugin.settings.galleryImgBorderActiveColor;
|
|||
|
|
}
|
|||
|
|
else if ('IMG_VIEW_BACKGROUND_COLOR_NAME' === name) {
|
|||
|
|
pickrDefault = this.plugin.settings.imgViewBackgroundColor;
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
pickrDefault = defaultColor;
|
|||
|
|
}
|
|||
|
|
let pickr;
|
|||
|
|
return new obsidian.Setting(containerEl)
|
|||
|
|
// @ts-ignore
|
|||
|
|
.setName(t(name))
|
|||
|
|
.then((setting) => {
|
|||
|
|
pickr = Pickr.create({
|
|||
|
|
el: setting.controlEl.createDiv({ cls: "picker" }),
|
|||
|
|
theme: 'nano',
|
|||
|
|
position: "left-middle",
|
|||
|
|
lockOpacity: false,
|
|||
|
|
default: pickrDefault,
|
|||
|
|
swatches: [],
|
|||
|
|
components: {
|
|||
|
|
preview: true,
|
|||
|
|
hue: true,
|
|||
|
|
opacity: true,
|
|||
|
|
interaction: {
|
|||
|
|
hex: true,
|
|||
|
|
rgba: true,
|
|||
|
|
hsla: false,
|
|||
|
|
input: true,
|
|||
|
|
cancel: true,
|
|||
|
|
save: true,
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.on('show', (color, instance) => {
|
|||
|
|
if (!this.plugin.settings.galleryNavbarToggle)
|
|||
|
|
pickr === null || pickr === void 0 ? void 0 : pickr.hide();
|
|||
|
|
const { result } = pickr.getRoot().interaction;
|
|||
|
|
requestAnimationFrame(() => requestAnimationFrame(() => result.select()));
|
|||
|
|
})
|
|||
|
|
.on('save', (color, instance) => {
|
|||
|
|
if (!color)
|
|||
|
|
return;
|
|||
|
|
instance.hide();
|
|||
|
|
const savedColor = color.toHEXA().toString();
|
|||
|
|
instance.addSwatch(savedColor);
|
|||
|
|
this.setAndSavePickrSetting(name, savedColor);
|
|||
|
|
})
|
|||
|
|
.on('cancel', (instance) => {
|
|||
|
|
instance.hide();
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
.addExtraButton((btn) => {
|
|||
|
|
btn.setIcon("reset")
|
|||
|
|
.onClick(() => {
|
|||
|
|
pickr.setColor(defaultColor);
|
|||
|
|
this.setAndSavePickrSetting(name, defaultColor);
|
|||
|
|
})
|
|||
|
|
.setTooltip('restore default color');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
setAndSavePickrSetting(name, savedColor) {
|
|||
|
|
var _a;
|
|||
|
|
if ('GALLERY_NAVBAR_DEFAULT_COLOR_NAME' === name) {
|
|||
|
|
this.plugin.settings.galleryNavbarDefaultColor = savedColor;
|
|||
|
|
}
|
|||
|
|
else if ('GALLERY_NAVBAR_HOVER_COLOR_NAME' === name) {
|
|||
|
|
this.plugin.settings.galleryNavbarHoverColor = savedColor;
|
|||
|
|
}
|
|||
|
|
else if ('GALLERY_IMG_BORDER_ACTIVE_COLOR_NAME' === name) {
|
|||
|
|
this.plugin.settings.galleryImgBorderActiveColor = savedColor;
|
|||
|
|
}
|
|||
|
|
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.saveSettings();
|
|||
|
|
}
|
|||
|
|
getDropdownOptions() {
|
|||
|
|
let options = {};
|
|||
|
|
for (const key in MODIFIER_HOTKEYS) {
|
|||
|
|
//@ts-ignore
|
|||
|
|
options[key] = t(key);
|
|||
|
|
}
|
|||
|
|
return options;
|
|||
|
|
}
|
|||
|
|
checkDropdownOptions(code, setting) {
|
|||
|
|
if (!setting || !setting.controlEl)
|
|||
|
|
return;
|
|||
|
|
const optionElList = setting.controlEl.getElementsByClassName('dropdown')[0].getElementsByTagName('option');
|
|||
|
|
for (let i = 0, size = optionElList.length; i < size; i++) {
|
|||
|
|
if (code === MOVE_THE_IMAGE.CODE) {
|
|||
|
|
optionElList[i].disabled = optionElList[i].value === this.plugin.settings.moveTheImageHotkey;
|
|||
|
|
}
|
|||
|
|
else if (code === SWITCH_THE_IMAGE.CODE) {
|
|||
|
|
optionElList[i].disabled = optionElList[i].value === this.plugin.settings.switchTheImageHotkey;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* typescript class object for defining operating status of the image
|
|||
|
|
*/
|
|||
|
|
class ImgStatusCto {
|
|||
|
|
constructor() {
|
|||
|
|
// true: the popup layer of viewing image is displayed
|
|||
|
|
this.popup = false;
|
|||
|
|
// whether the image is being dragged
|
|||
|
|
this.dragging = false;
|
|||
|
|
// keybord pressing status
|
|||
|
|
this.arrowUp = false;
|
|||
|
|
this.arrowDown = false;
|
|||
|
|
this.arrowLeft = false;
|
|||
|
|
this.arrowRight = false;
|
|||
|
|
this.fullScreen = false;
|
|||
|
|
this.activeImgZIndex = 0;
|
|||
|
|
this.clickCount = 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
class ImgInfoCto {
|
|||
|
|
constructor() {
|
|||
|
|
this.imgList = new Array();
|
|||
|
|
this.getPopupImgNum = () => {
|
|||
|
|
let num = 0;
|
|||
|
|
for (const imgCto of this.imgList) {
|
|||
|
|
if (imgCto.popup)
|
|||
|
|
num++;
|
|||
|
|
}
|
|||
|
|
return num;
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
class ImgCto {
|
|||
|
|
constructor(index, mtime, imgViewEl) {
|
|||
|
|
this.popup = false;
|
|||
|
|
this.zIndex = 0;
|
|||
|
|
this.curWidth = 0; // image's current width
|
|||
|
|
this.curHeight = 0;
|
|||
|
|
this.realWidth = 0; // image's real width
|
|||
|
|
this.realHeight = 0;
|
|||
|
|
this.left = 0; // margin-left
|
|||
|
|
this.top = 0; // margin-top
|
|||
|
|
this.moveX = 0; // 鼠标相对于图片的位置
|
|||
|
|
this.moveY = 0;
|
|||
|
|
this.rotate = 0; // rotateDeg
|
|||
|
|
this.invertColor = false;
|
|||
|
|
this.scaleX = false; // scaleX(-1)
|
|||
|
|
this.scaleY = false; // scaleY(-1)
|
|||
|
|
this.fullScreen = false; // whether the image is being previewed in full-screen mode
|
|||
|
|
this.defaultImgStyle = {
|
|||
|
|
transform: 'none',
|
|||
|
|
filter: 'none',
|
|||
|
|
mixBlendMode: 'normal',
|
|||
|
|
borderWidth: '',
|
|||
|
|
borderStyle: '',
|
|||
|
|
borderColor: ''
|
|||
|
|
};
|
|||
|
|
this.index = index;
|
|||
|
|
this.mtime = mtime;
|
|||
|
|
this.imgViewEl = imgViewEl;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Image utility class
|
|||
|
|
*/
|
|||
|
|
class ImgUtil {
|
|||
|
|
static copyText(text) {
|
|||
|
|
navigator.clipboard.writeText(text)
|
|||
|
|
.then(() => {
|
|||
|
|
//console.log('copyText:', copyText);
|
|||
|
|
})
|
|||
|
|
.catch(err => {
|
|||
|
|
console.error('copy text error', err);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
static copyImage(imgEle, width, height) {
|
|||
|
|
let image = new Image();
|
|||
|
|
image.crossOrigin = 'anonymous';
|
|||
|
|
image.src = imgEle.src;
|
|||
|
|
image.onload = () => {
|
|||
|
|
const canvas = document.createElement('canvas');
|
|||
|
|
canvas.width = image.width;
|
|||
|
|
canvas.height = image.height;
|
|||
|
|
const ctx = canvas.getContext('2d');
|
|||
|
|
ctx.fillStyle = '#fff';
|
|||
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|||
|
|
ctx.drawImage(image, 0, 0);
|
|||
|
|
try {
|
|||
|
|
canvas.toBlob((blob) => __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
yield navigator.clipboard.write([new ClipboardItem({ "image/png": blob })])
|
|||
|
|
.then(() => {
|
|||
|
|
new obsidian.Notice(t("COPY_IMAGE_SUCCESS"));
|
|||
|
|
}, () => {
|
|||
|
|
new obsidian.Notice(t("COPY_IMAGE_ERROR"));
|
|||
|
|
});
|
|||
|
|
}));
|
|||
|
|
}
|
|||
|
|
catch (error) {
|
|||
|
|
new obsidian.Notice(t("COPY_IMAGE_ERROR"));
|
|||
|
|
console.error(error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
image.onerror = () => {
|
|||
|
|
new obsidian.Notice(t("COPY_IMAGE_ERROR"));
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
ImgUtil.calculateImgZoomSize = (realImg, imgCto) => {
|
|||
|
|
const windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
|
|||
|
|
const 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;
|
|||
|
|
if (realImg.height > windowZoomHeight) {
|
|||
|
|
tempHeight = windowZoomHeight;
|
|||
|
|
if ((tempWidth = tempHeight / realImg.height * realImg.width) > windowZoomWidth) {
|
|||
|
|
tempWidth = windowZoomWidth;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else if (realImg.width > windowZoomWidth) {
|
|||
|
|
tempWidth = windowZoomWidth;
|
|||
|
|
tempHeight = tempWidth / realImg.width * realImg.height;
|
|||
|
|
}
|
|||
|
|
tempHeight = tempWidth * realImg.height / realImg.width;
|
|||
|
|
// cache image info: curWidth, curHeight, realWidth, realHeight, left, top
|
|||
|
|
imgCto.left = (windowWidth - tempWidth) / 2;
|
|||
|
|
imgCto.top = (windowHeight - tempHeight) / 2;
|
|||
|
|
imgCto.curWidth = tempWidth;
|
|||
|
|
imgCto.curHeight = tempHeight;
|
|||
|
|
imgCto.realWidth = realImg.width;
|
|||
|
|
imgCto.realHeight = realImg.height;
|
|||
|
|
/* console.log('calculateImgZoomSize', 'realImg: ' + realImg.width + ',' + realImg.height,
|
|||
|
|
'tempSize: ' + tempWidth + ',' + tempHeight,
|
|||
|
|
'windowZoomSize: ' + windowZoomWidth + ',' + windowZoomHeight,
|
|||
|
|
'windowSize: ' + windowWidth + ',' + windowHeight); */
|
|||
|
|
return imgCto;
|
|||
|
|
};
|
|||
|
|
/**
|
|||
|
|
* zoom an image
|
|||
|
|
* @param ratio
|
|||
|
|
* @param targetImgInfo
|
|||
|
|
* @param offsetSize
|
|||
|
|
* @param actualSize
|
|||
|
|
* @returns
|
|||
|
|
*/
|
|||
|
|
ImgUtil.zoom = (ratio, targetImgInfo, offsetSize, actualSize) => {
|
|||
|
|
let zoomRatio;
|
|||
|
|
if (!actualSize) {
|
|||
|
|
const zoomInFlag = ratio > 0;
|
|||
|
|
ratio = zoomInFlag ? 1 + ratio : 1 / (1 - ratio);
|
|||
|
|
zoomRatio = targetImgInfo.curWidth * ratio / targetImgInfo.realWidth;
|
|||
|
|
}
|
|||
|
|
// Snap to 100% zoom when we pass over it
|
|||
|
|
const curRatio = targetImgInfo.curWidth / targetImgInfo.realWidth;
|
|||
|
|
if (actualSize || (curRatio < 1 && zoomRatio > 1) || (curRatio > 1 && zoomRatio < 1)) {
|
|||
|
|
// set zoom ratio to 100%
|
|||
|
|
zoomRatio = 1;
|
|||
|
|
// reduce snap offset ratio accordingly
|
|||
|
|
ratio = 1 / curRatio;
|
|||
|
|
}
|
|||
|
|
let newWidth = targetImgInfo.realWidth * zoomRatio;
|
|||
|
|
let newHeight = targetImgInfo.realHeight * zoomRatio;
|
|||
|
|
if (IMG_VIEW_MIN >= newWidth || IMG_VIEW_MIN >= newHeight) {
|
|||
|
|
// set minimum width or height
|
|||
|
|
if (IMG_VIEW_MIN >= newWidth) {
|
|||
|
|
newWidth = IMG_VIEW_MIN;
|
|||
|
|
newHeight = (newWidth * targetImgInfo.realHeight) / targetImgInfo.realWidth;
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
newHeight = IMG_VIEW_MIN;
|
|||
|
|
newWidth = (newHeight * targetImgInfo.realWidth) / targetImgInfo.realHeight;
|
|||
|
|
}
|
|||
|
|
ratio = 1;
|
|||
|
|
}
|
|||
|
|
const left = targetImgInfo.left + offsetSize.offsetX * (1 - ratio);
|
|||
|
|
const top = targetImgInfo.top + offsetSize.offsetY * (1 - ratio);
|
|||
|
|
// cache image info: curWidth, curHeight, left, top
|
|||
|
|
targetImgInfo.curWidth = newWidth;
|
|||
|
|
targetImgInfo.curHeight = newHeight;
|
|||
|
|
targetImgInfo.left = left;
|
|||
|
|
targetImgInfo.top = top;
|
|||
|
|
// return { newWidth, left, top };
|
|||
|
|
return targetImgInfo;
|
|||
|
|
};
|
|||
|
|
ImgUtil.transform = (targetImgInfo) => {
|
|||
|
|
let transform = 'rotate(' + targetImgInfo.rotate + 'deg)';
|
|||
|
|
if (targetImgInfo.scaleX) {
|
|||
|
|
transform += ' scaleX(-1)';
|
|||
|
|
}
|
|||
|
|
if (targetImgInfo.scaleY) {
|
|||
|
|
transform += ' scaleY(-1)';
|
|||
|
|
}
|
|||
|
|
targetImgInfo.imgViewEl.style.setProperty('transform', transform);
|
|||
|
|
};
|
|||
|
|
ImgUtil.rotate = (degree, targetImgInfo) => {
|
|||
|
|
targetImgInfo.imgViewEl.style.setProperty('transform', 'rotate(' + (targetImgInfo.rotate += degree) + 'deg)');
|
|||
|
|
};
|
|||
|
|
ImgUtil.invertImgColor = (imgEle, open) => {
|
|||
|
|
if (open) {
|
|||
|
|
imgEle.style.setProperty('filter', 'invert(1) hue-rotate(180deg)');
|
|||
|
|
imgEle.style.setProperty('mix-blend-mode', 'screen');
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
imgEle.style.setProperty('filter', 'none');
|
|||
|
|
imgEle.style.setProperty('mix-blend-mode', 'normal');
|
|||
|
|
}
|
|||
|
|
// open ? imgEle.addClass('image-toolkit-img-invert') : imgEle.removeClass('image-toolkit-img-invert');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
class ContainerView {
|
|||
|
|
constructor(plugin, containerType, pinMaximum) {
|
|||
|
|
this.lastClickedImgDefaultStyle = {
|
|||
|
|
borderWidth: '',
|
|||
|
|
borderStyle: '',
|
|||
|
|
borderColor: ''
|
|||
|
|
};
|
|||
|
|
this.imgGlobalStatus = new ImgStatusCto();
|
|||
|
|
this.imgInfoCto = new ImgInfoCto();
|
|||
|
|
this.isPinMode = () => {
|
|||
|
|
return 'PIN' === this.containerType;
|
|||
|
|
};
|
|||
|
|
this.setMenuView = (menuView) => {
|
|||
|
|
this.menuView = menuView;
|
|||
|
|
};
|
|||
|
|
this.getPlugin = () => {
|
|||
|
|
return this.plugin;
|
|||
|
|
};
|
|||
|
|
this.getLastClickedImgEl = () => {
|
|||
|
|
return this.lastClickedImgEl;
|
|||
|
|
};
|
|||
|
|
this.getActiveImg = () => {
|
|||
|
|
return this.imgGlobalStatus.activeImg;
|
|||
|
|
};
|
|||
|
|
this.setPinMaximum = (val) => {
|
|||
|
|
this.pinMaximum = val;
|
|||
|
|
};
|
|||
|
|
this.getOitContainerViewEl = () => {
|
|||
|
|
return this.imgInfoCto.imgContainerEl;
|
|||
|
|
};
|
|||
|
|
//region ================== Container View & Init ========================
|
|||
|
|
/**
|
|||
|
|
* render when clicking an image
|
|||
|
|
* @param targetEl the clicked image's element
|
|||
|
|
* @returns
|
|||
|
|
*/
|
|||
|
|
this.renderContainerView = (targetEl) => {
|
|||
|
|
if (!this.checkStatus())
|
|||
|
|
return;
|
|||
|
|
const matchedImg = this.initContainerView(targetEl, this.plugin.app.workspace.containerEl);
|
|||
|
|
if (!matchedImg)
|
|||
|
|
return;
|
|||
|
|
this.openOitContainerView(matchedImg);
|
|||
|
|
this.renderGalleryNavbar();
|
|||
|
|
this.refreshImg(matchedImg, targetEl.src, targetEl.alt);
|
|||
|
|
matchedImg.mtime = new Date().getTime();
|
|||
|
|
};
|
|||
|
|
this.initContainerView = (targetEl, containerEl) => {
|
|||
|
|
const matchedImg = this.initContainerViewDom(containerEl);
|
|||
|
|
if (!matchedImg)
|
|||
|
|
return null;
|
|||
|
|
matchedImg.targetOriginalImgEl = targetEl;
|
|||
|
|
this.restoreBorderForLastClickedImg();
|
|||
|
|
this.initDefaultData(matchedImg, window.getComputedStyle(targetEl));
|
|||
|
|
this.addBorderForLastClickedImg(targetEl);
|
|||
|
|
this.addOrRemoveEvents(matchedImg, true); // add events
|
|||
|
|
return matchedImg;
|
|||
|
|
};
|
|||
|
|
this.removeOitContainerView = () => {
|
|||
|
|
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;
|
|||
|
|
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.checkStatus = () => {
|
|||
|
|
if (!this.containerType)
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
if (!this.imgGlobalStatus.popup)
|
|||
|
|
return true;
|
|||
|
|
return this.pinMaximum > this.imgInfoCto.getPopupImgNum();
|
|||
|
|
};
|
|||
|
|
this.initDefaultData = (matchedImg, targetImgStyle) => {
|
|||
|
|
if (targetImgStyle) {
|
|||
|
|
matchedImg.defaultImgStyle.transform = 'none';
|
|||
|
|
matchedImg.defaultImgStyle.filter = targetImgStyle.filter;
|
|||
|
|
matchedImg.defaultImgStyle.mixBlendMode = targetImgStyle.mixBlendMode;
|
|||
|
|
matchedImg.defaultImgStyle.borderWidth = targetImgStyle.borderWidth;
|
|||
|
|
matchedImg.defaultImgStyle.borderStyle = targetImgStyle.borderStyle;
|
|||
|
|
matchedImg.defaultImgStyle.borderColor = targetImgStyle.borderColor;
|
|||
|
|
this.lastClickedImgDefaultStyle.borderWidth = targetImgStyle.borderWidth;
|
|||
|
|
this.lastClickedImgDefaultStyle.borderStyle = targetImgStyle.borderStyle;
|
|||
|
|
this.lastClickedImgDefaultStyle.borderColor = targetImgStyle.borderColor;
|
|||
|
|
}
|
|||
|
|
this.imgGlobalStatus.dragging = false;
|
|||
|
|
this.imgGlobalStatus.arrowUp = false;
|
|||
|
|
this.imgGlobalStatus.arrowDown = false;
|
|||
|
|
this.imgGlobalStatus.arrowLeft = false;
|
|||
|
|
this.imgGlobalStatus.arrowRight = false;
|
|||
|
|
matchedImg.invertColor = false;
|
|||
|
|
matchedImg.scaleX = false;
|
|||
|
|
matchedImg.scaleY = false;
|
|||
|
|
matchedImg.fullScreen = false;
|
|||
|
|
if (!this.imgGlobalStatus.popup) {
|
|||
|
|
this.resetClickTimer();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
/**
|
|||
|
|
* set 'data-oit-target' and lastClickedImgEl
|
|||
|
|
* @param targetEl
|
|||
|
|
*/
|
|||
|
|
this.setLastClickedImg = (targetEl) => {
|
|||
|
|
if (!targetEl)
|
|||
|
|
return;
|
|||
|
|
// 'data-oit-target' is set for locating current image
|
|||
|
|
targetEl.setAttribute('data-oit-target', '1');
|
|||
|
|
this.lastClickedImgEl = targetEl;
|
|||
|
|
};
|
|||
|
|
//endregion
|
|||
|
|
//region ================== (Original) Image Border ========================
|
|||
|
|
this.addBorderForLastClickedImg = (targetEl) => {
|
|||
|
|
this.setLastClickedImg(targetEl);
|
|||
|
|
if (!targetEl || !this.plugin.settings.imageBorderToggle)
|
|||
|
|
return;
|
|||
|
|
const lastClickedImgStyle = targetEl === null || targetEl === void 0 ? void 0 : targetEl.style;
|
|||
|
|
if (!lastClickedImgStyle)
|
|||
|
|
return;
|
|||
|
|
lastClickedImgStyle.setProperty('border-width', this.plugin.settings.imageBorderWidth);
|
|||
|
|
lastClickedImgStyle.setProperty('border-style', this.plugin.settings.imageBorderStyle);
|
|||
|
|
lastClickedImgStyle.setProperty('border-color', this.plugin.settings.imageBorderColor);
|
|||
|
|
};
|
|||
|
|
/**
|
|||
|
|
* remove 'data-oit-target'
|
|||
|
|
* restore default border style
|
|||
|
|
*/
|
|||
|
|
this.restoreBorderForLastClickedImg = () => {
|
|||
|
|
if (!this.lastClickedImgEl)
|
|||
|
|
return;
|
|||
|
|
this.lastClickedImgEl.removeAttribute('data-oit-target');
|
|||
|
|
const lastClickedImgStyle = this.lastClickedImgEl.style;
|
|||
|
|
if (lastClickedImgStyle) {
|
|||
|
|
lastClickedImgStyle.setProperty('border-width', this.lastClickedImgDefaultStyle.borderWidth);
|
|||
|
|
lastClickedImgStyle.setProperty('border-style', this.lastClickedImgDefaultStyle.borderStyle);
|
|||
|
|
lastClickedImgStyle.setProperty('border-color', this.lastClickedImgDefaultStyle.borderColor);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
//endregion
|
|||
|
|
//region ================== Image ========================
|
|||
|
|
this.updateImgViewElAndList = (pinMaximum) => {
|
|||
|
|
if (!this.imgInfoCto.imgContainerEl)
|
|||
|
|
return;
|
|||
|
|
const imgNum = this.imgInfoCto.imgList.length;
|
|||
|
|
if (pinMaximum < imgNum) {
|
|||
|
|
if (this.imgInfoCto.imgContainerEl) {
|
|||
|
|
// remove all imgViewEl and imgList
|
|||
|
|
this.imgInfoCto.imgContainerEl.innerHTML = '';
|
|||
|
|
}
|
|||
|
|
// clear imgList
|
|||
|
|
this.imgInfoCto.imgList.length = 0;
|
|||
|
|
}
|
|||
|
|
let imgViewEl;
|
|||
|
|
const curTime = new Date().getTime();
|
|||
|
|
for (let i = imgNum; i < pinMaximum; i++) {
|
|||
|
|
// <div class="img-container"> <img class='img-view' data-index='0' src='' alt=''> </div>
|
|||
|
|
imgViewEl = createEl('img');
|
|||
|
|
imgViewEl.addClass('img-view');
|
|||
|
|
imgViewEl.hidden = true; // hide 'img-view' for now
|
|||
|
|
imgViewEl.dataset.index = i + ''; // set data-index
|
|||
|
|
this.setImgViewDefaultBackground(imgViewEl);
|
|||
|
|
this.imgInfoCto.imgContainerEl.appendChild(imgViewEl);
|
|||
|
|
// cache imgList
|
|||
|
|
this.imgInfoCto.imgList.push(new ImgCto(i, curTime, imgViewEl));
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
this.getMatchedImg = () => {
|
|||
|
|
let earliestImg;
|
|||
|
|
for (const img of this.imgInfoCto.imgList) {
|
|||
|
|
if (!earliestImg || earliestImg.mtime > img.mtime)
|
|||
|
|
earliestImg = img;
|
|||
|
|
if (img.popup)
|
|||
|
|
continue;
|
|||
|
|
return img;
|
|||
|
|
}
|
|||
|
|
if (this.plugin.settings.pinCoverMode) {
|
|||
|
|
return earliestImg;
|
|||
|
|
}
|
|||
|
|
return null;
|
|||
|
|
};
|
|||
|
|
/**
|
|||
|
|
* it may from: renderContainerView(), switch GalleryNavbarView, click toolbar_refresh
|
|||
|
|
* @param imgCto
|
|||
|
|
* @param imgSrc
|
|||
|
|
* @param imgAlt
|
|||
|
|
* @param imgTitleIndex
|
|||
|
|
*/
|
|||
|
|
this.refreshImg = (imgCto, imgSrc, imgAlt, imgTitleIndex) => {
|
|||
|
|
if (!imgSrc)
|
|||
|
|
imgSrc = imgCto.imgViewEl.src;
|
|||
|
|
if (!imgAlt)
|
|||
|
|
imgAlt = imgCto.imgViewEl.alt;
|
|||
|
|
this.renderImgTitle(imgAlt, imgTitleIndex);
|
|||
|
|
if (imgSrc) {
|
|||
|
|
if (imgCto.refreshImgInterval) {
|
|||
|
|
clearInterval(imgCto.refreshImgInterval);
|
|||
|
|
imgCto.refreshImgInterval = null;
|
|||
|
|
}
|
|||
|
|
let realImg = new Image();
|
|||
|
|
realImg.src = imgSrc;
|
|||
|
|
imgCto.refreshImgInterval = setInterval((realImg) => {
|
|||
|
|
if (realImg.width > 0 || realImg.height > 0) {
|
|||
|
|
clearInterval(imgCto.refreshImgInterval);
|
|||
|
|
imgCto.refreshImgInterval = null;
|
|||
|
|
this.setImgViewPosition(ImgUtil.calculateImgZoomSize(realImg, imgCto), 0);
|
|||
|
|
this.renderImgView(imgCto.imgViewEl, imgSrc, imgAlt);
|
|||
|
|
this.renderImgTip(imgCto);
|
|||
|
|
imgCto.imgViewEl.style.setProperty('transform', imgCto.defaultImgStyle.transform);
|
|||
|
|
imgCto.imgViewEl.style.setProperty('filter', imgCto.defaultImgStyle.filter);
|
|||
|
|
imgCto.imgViewEl.style.setProperty('mix-blend-mode', imgCto.defaultImgStyle.mixBlendMode);
|
|||
|
|
}
|
|||
|
|
}, 40, realImg);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
this.renderImgTitle = (name, index) => {
|
|||
|
|
};
|
|||
|
|
this.setImgViewPosition = (imgZoomSize, rotate) => {
|
|||
|
|
const imgViewEl = imgZoomSize.imgViewEl;
|
|||
|
|
if (!imgViewEl)
|
|||
|
|
return;
|
|||
|
|
if (imgZoomSize) {
|
|||
|
|
imgViewEl.setAttribute('width', imgZoomSize.curWidth + 'px');
|
|||
|
|
imgViewEl.style.setProperty('margin-top', imgZoomSize.top + 'px', 'important');
|
|||
|
|
imgViewEl.style.setProperty('margin-left', imgZoomSize.left + 'px', 'important');
|
|||
|
|
}
|
|||
|
|
const rotateDeg = rotate ? rotate : 0;
|
|||
|
|
imgViewEl.style.transform = 'rotate(' + rotateDeg + 'deg)';
|
|||
|
|
imgZoomSize.rotate = rotateDeg;
|
|||
|
|
};
|
|||
|
|
this.renderImgView = (imgViewEl, src, alt) => {
|
|||
|
|
if (!imgViewEl)
|
|||
|
|
return;
|
|||
|
|
imgViewEl.setAttribute('src', src);
|
|||
|
|
imgViewEl.setAttribute('alt', alt);
|
|||
|
|
imgViewEl.hidden = !src && !alt;
|
|||
|
|
};
|
|||
|
|
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 (this.plugin.settings.imgTipToggle) {
|
|||
|
|
this.imgInfoCto.imgTipEl.hidden = false; // display '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;
|
|||
|
|
}, 1000);
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
this.imgInfoCto.imgTipEl.hidden = true; // hide 'img-tip'
|
|||
|
|
this.imgInfoCto.imgTipTimeout = null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
this.setImgViewDefaultBackgroundForImgList = () => {
|
|||
|
|
for (const imgCto of this.imgInfoCto.imgList) {
|
|||
|
|
this.setImgViewDefaultBackground(imgCto.imgViewEl);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
this.setImgViewDefaultBackground = (imgViewEl) => {
|
|||
|
|
if (!imgViewEl)
|
|||
|
|
return;
|
|||
|
|
if (this.plugin.settings.imgViewBackgroundColor && IMG_DEFAULT_BACKGROUND_COLOR != this.plugin.settings.imgViewBackgroundColor) {
|
|||
|
|
imgViewEl.removeClass('img-default-background');
|
|||
|
|
imgViewEl.style.setProperty('background-color', this.plugin.settings.imgViewBackgroundColor);
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
imgViewEl.addClass('img-default-background');
|
|||
|
|
imgViewEl.style.removeProperty('background-color');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
this.setActiveImgZIndex = (activeImg) => {
|
|||
|
|
};
|
|||
|
|
//endregion
|
|||
|
|
//region ================== Gallery NavBar ========================
|
|||
|
|
this.switchImageOnGalleryNavBar = (event, next) => {
|
|||
|
|
};
|
|||
|
|
this.renderGalleryNavbar = () => {
|
|||
|
|
};
|
|||
|
|
this.removeGalleryNavbar = () => {
|
|||
|
|
};
|
|||
|
|
//endregion
|
|||
|
|
//region ================== full screen ========================
|
|||
|
|
/**
|
|||
|
|
* full-screen mode
|
|||
|
|
*/
|
|||
|
|
this.showPlayerImg = (activeImg) => {
|
|||
|
|
if (!activeImg && !(activeImg = this.imgGlobalStatus.activeImg))
|
|||
|
|
return;
|
|||
|
|
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'
|
|||
|
|
// 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;
|
|||
|
|
let newWidth, newHeight;
|
|||
|
|
let top = 0;
|
|||
|
|
if (IMG_FULL_SCREEN_MODE.STRETCH == this.plugin.settings.imgFullScreenMode) {
|
|||
|
|
newWidth = windowWidth + 'px';
|
|||
|
|
newHeight = windowHeight + 'px';
|
|||
|
|
}
|
|||
|
|
else if (IMG_FULL_SCREEN_MODE.FILL == this.plugin.settings.imgFullScreenMode) {
|
|||
|
|
newWidth = '100%';
|
|||
|
|
newHeight = '100%';
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// fit
|
|||
|
|
const widthRatio = windowWidth / activeImg.realWidth;
|
|||
|
|
const heightRatio = windowHeight / activeImg.realHeight;
|
|||
|
|
if (widthRatio <= heightRatio) {
|
|||
|
|
newWidth = windowWidth;
|
|||
|
|
newHeight = widthRatio * activeImg.realHeight;
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
newHeight = windowHeight;
|
|||
|
|
newWidth = heightRatio * activeImg.realWidth;
|
|||
|
|
}
|
|||
|
|
top = (windowHeight - newHeight) / 2;
|
|||
|
|
newWidth = newWidth + 'px';
|
|||
|
|
newHeight = newHeight + 'px';
|
|||
|
|
}
|
|||
|
|
const imgPlayerImgViewEl = this.imgInfoCto.imgPlayerImgViewEl;
|
|||
|
|
if (imgPlayerImgViewEl) {
|
|||
|
|
imgPlayerImgViewEl.setAttribute('src', activeImg.imgViewEl.src);
|
|||
|
|
imgPlayerImgViewEl.setAttribute('alt', activeImg.imgViewEl.alt);
|
|||
|
|
imgPlayerImgViewEl.setAttribute('width', newWidth);
|
|||
|
|
imgPlayerImgViewEl.setAttribute('height', newHeight);
|
|||
|
|
imgPlayerImgViewEl.style.setProperty('margin-top', top + 'px');
|
|||
|
|
//this.imgInfo.imgPlayerImgViewEl.style.setProperty('margin-left', left + 'px');
|
|||
|
|
this.setImgViewDefaultBackground(imgPlayerImgViewEl);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
/**
|
|||
|
|
* close full screen
|
|||
|
|
*/
|
|||
|
|
this.closePlayerImg = () => {
|
|||
|
|
for (const imgCto of this.imgInfoCto.imgList) {
|
|||
|
|
if (!imgCto.fullScreen)
|
|||
|
|
continue;
|
|||
|
|
// show the popped up image
|
|||
|
|
// imgCto.imgViewEl?.style.setProperty('display', 'block', 'important');
|
|||
|
|
// 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.imgInfoCto.imgPlayerImgViewEl) {
|
|||
|
|
this.imgInfoCto.imgPlayerImgViewEl.setAttribute('src', '');
|
|||
|
|
this.imgInfoCto.imgPlayerImgViewEl.setAttribute('alt', '');
|
|||
|
|
}
|
|||
|
|
this.imgGlobalStatus.fullScreen = false;
|
|||
|
|
};
|
|||
|
|
//endregion
|
|||
|
|
//region ================== events ========================
|
|||
|
|
this.addOrRemoveEvents = (matchedImg, isAdd) => {
|
|||
|
|
if (isAdd) {
|
|||
|
|
if (!this.imgGlobalStatus.popup) {
|
|||
|
|
document.addEventListener('keydown', this.triggerKeydown);
|
|||
|
|
document.addEventListener('keyup', this.triggerKeyup);
|
|||
|
|
}
|
|||
|
|
if (!this.isPinMode()) {
|
|||
|
|
// click event: hide container view
|
|||
|
|
this.imgInfoCto.oitContainerViewEl.addEventListener('click', this.closeContainerView);
|
|||
|
|
}
|
|||
|
|
matchedImg.imgViewEl.addEventListener('mouseenter', this.mouseenterImgView);
|
|||
|
|
matchedImg.imgViewEl.addEventListener('mouseleave', this.mouseleaveImgView);
|
|||
|
|
// drag the image via mouse
|
|||
|
|
matchedImg.imgViewEl.addEventListener('mousedown', this.mousedownImgView);
|
|||
|
|
matchedImg.imgViewEl.addEventListener('mouseup', this.mouseupImgView);
|
|||
|
|
// zoom the image via mouse wheel
|
|||
|
|
matchedImg.imgViewEl.addEventListener('mousewheel', this.mousewheelViewContainer, { passive: true });
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
if (!this.imgGlobalStatus.popup) {
|
|||
|
|
document.removeEventListener('keydown', this.triggerKeydown);
|
|||
|
|
document.removeEventListener('keyup', this.triggerKeyup);
|
|||
|
|
if (this.imgGlobalStatus.clickTimer) {
|
|||
|
|
clearTimeout(this.imgGlobalStatus.clickTimer);
|
|||
|
|
this.imgGlobalStatus.clickTimer = null;
|
|||
|
|
this.imgGlobalStatus.clickCount = 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (!this.isPinMode()) {
|
|||
|
|
this.imgInfoCto.oitContainerViewEl.removeEventListener('click', this.closeContainerView);
|
|||
|
|
}
|
|||
|
|
matchedImg.imgViewEl.removeEventListener('mouseenter', this.mouseenterImgView);
|
|||
|
|
matchedImg.imgViewEl.removeEventListener('mouseleave', this.mouseleaveImgView);
|
|||
|
|
matchedImg.imgViewEl.removeEventListener('mousedown', this.mousedownImgView);
|
|||
|
|
matchedImg.imgViewEl.removeEventListener('mouseup', this.mouseupImgView);
|
|||
|
|
matchedImg.imgViewEl.removeEventListener('mousewheel', this.mousewheelViewContainer);
|
|||
|
|
if (matchedImg.refreshImgInterval) {
|
|||
|
|
clearInterval(matchedImg.refreshImgInterval);
|
|||
|
|
matchedImg.refreshImgInterval = null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
this.triggerKeyup = (event) => {
|
|||
|
|
// console.log('keyup', event, event.key);
|
|||
|
|
const key = event.key;
|
|||
|
|
if (!key)
|
|||
|
|
return;
|
|||
|
|
if (!('Escape' === key)) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
event.stopPropagation();
|
|||
|
|
}
|
|||
|
|
switch (key) {
|
|||
|
|
case 'Escape':
|
|||
|
|
// close full screen, hide container view
|
|||
|
|
this.imgGlobalStatus.fullScreen ? this.closePlayerImg() : this.closeContainerView();
|
|||
|
|
break;
|
|||
|
|
case 'ArrowUp':
|
|||
|
|
this.imgGlobalStatus.arrowUp = false;
|
|||
|
|
break;
|
|||
|
|
case 'ArrowDown':
|
|||
|
|
this.imgGlobalStatus.arrowDown = false;
|
|||
|
|
break;
|
|||
|
|
case 'ArrowLeft':
|
|||
|
|
this.imgGlobalStatus.arrowLeft = false;
|
|||
|
|
// switch to the previous image on the gallery navBar
|
|||
|
|
this.switchImageOnGalleryNavBar(event, false);
|
|||
|
|
break;
|
|||
|
|
case 'ArrowRight':
|
|||
|
|
this.imgGlobalStatus.arrowRight = false;
|
|||
|
|
// switch to the next image on the gallery navBar
|
|||
|
|
this.switchImageOnGalleryNavBar(event, true);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
/**
|
|||
|
|
* move the image by keyboard
|
|||
|
|
* @param event
|
|||
|
|
*/
|
|||
|
|
this.triggerKeydown = (event) => {
|
|||
|
|
//console.log('keydown', event, event.key, this.imgStatus);
|
|||
|
|
if (this.isPinMode())
|
|||
|
|
return;
|
|||
|
|
event.preventDefault();
|
|||
|
|
event.stopPropagation();
|
|||
|
|
if (this.imgGlobalStatus.arrowUp && this.imgGlobalStatus.arrowLeft) {
|
|||
|
|
this.moveImgViewByHotkey(event, 'UP_LEFT');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
else if (this.imgGlobalStatus.arrowUp && this.imgGlobalStatus.arrowRight) {
|
|||
|
|
this.moveImgViewByHotkey(event, 'UP_RIGHT');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
else if (this.imgGlobalStatus.arrowDown && this.imgGlobalStatus.arrowLeft) {
|
|||
|
|
this.moveImgViewByHotkey(event, 'DOWN_LEFT');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
else if (this.imgGlobalStatus.arrowDown && this.imgGlobalStatus.arrowRight) {
|
|||
|
|
this.moveImgViewByHotkey(event, 'DOWN_RIGHT');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
switch (event.key) {
|
|||
|
|
case 'ArrowUp':
|
|||
|
|
this.imgGlobalStatus.arrowUp = true;
|
|||
|
|
this.moveImgViewByHotkey(event, 'UP');
|
|||
|
|
break;
|
|||
|
|
case 'ArrowDown':
|
|||
|
|
this.imgGlobalStatus.arrowDown = true;
|
|||
|
|
this.moveImgViewByHotkey(event, 'DOWN');
|
|||
|
|
break;
|
|||
|
|
case 'ArrowLeft':
|
|||
|
|
this.imgGlobalStatus.arrowLeft = true;
|
|||
|
|
this.moveImgViewByHotkey(event, 'LEFT');
|
|||
|
|
break;
|
|||
|
|
case 'ArrowRight':
|
|||
|
|
this.imgGlobalStatus.arrowRight = true;
|
|||
|
|
this.moveImgViewByHotkey(event, 'RIGHT');
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
this.moveImgViewByHotkey = (event, orientation) => {
|
|||
|
|
if (!orientation || !this.imgGlobalStatus.popup || !this.checkHotkeySettings(event, this.plugin.settings.moveTheImageHotkey))
|
|||
|
|
return;
|
|||
|
|
switch (orientation) {
|
|||
|
|
case 'UP':
|
|||
|
|
this.mousemoveImgView(null, { offsetX: 0, offsetY: -this.plugin.settings.imageMoveSpeed });
|
|||
|
|
break;
|
|||
|
|
case 'DOWN':
|
|||
|
|
this.mousemoveImgView(null, { offsetX: 0, offsetY: this.plugin.settings.imageMoveSpeed });
|
|||
|
|
break;
|
|||
|
|
case 'LEFT':
|
|||
|
|
this.mousemoveImgView(null, { offsetX: -this.plugin.settings.imageMoveSpeed, offsetY: 0 });
|
|||
|
|
break;
|
|||
|
|
case 'RIGHT':
|
|||
|
|
this.mousemoveImgView(null, { offsetX: this.plugin.settings.imageMoveSpeed, offsetY: 0 });
|
|||
|
|
break;
|
|||
|
|
case 'UP_LEFT':
|
|||
|
|
this.mousemoveImgView(null, {
|
|||
|
|
offsetX: -this.plugin.settings.imageMoveSpeed,
|
|||
|
|
offsetY: -this.plugin.settings.imageMoveSpeed
|
|||
|
|
});
|
|||
|
|
break;
|
|||
|
|
case 'UP_RIGHT':
|
|||
|
|
this.mousemoveImgView(null, {
|
|||
|
|
offsetX: this.plugin.settings.imageMoveSpeed,
|
|||
|
|
offsetY: -this.plugin.settings.imageMoveSpeed
|
|||
|
|
});
|
|||
|
|
break;
|
|||
|
|
case 'DOWN_LEFT':
|
|||
|
|
this.mousemoveImgView(null, {
|
|||
|
|
offsetX: -this.plugin.settings.imageMoveSpeed,
|
|||
|
|
offsetY: this.plugin.settings.imageMoveSpeed
|
|||
|
|
});
|
|||
|
|
break;
|
|||
|
|
case 'DOWN_RIGHT':
|
|||
|
|
this.mousemoveImgView(null, {
|
|||
|
|
offsetX: this.plugin.settings.imageMoveSpeed,
|
|||
|
|
offsetY: this.plugin.settings.imageMoveSpeed
|
|||
|
|
});
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
this.checkHotkeySettings = (event, hotkey) => {
|
|||
|
|
switch (hotkey) {
|
|||
|
|
case "NONE":
|
|||
|
|
return !event.ctrlKey && !event.altKey && !event.shiftKey;
|
|||
|
|
case "CTRL":
|
|||
|
|
return event.ctrlKey && !event.altKey && !event.shiftKey;
|
|||
|
|
case "ALT":
|
|||
|
|
return !event.ctrlKey && event.altKey && !event.shiftKey;
|
|||
|
|
case "SHIFT":
|
|||
|
|
return !event.ctrlKey && !event.altKey && event.shiftKey;
|
|||
|
|
case "CTRL_ALT":
|
|||
|
|
return event.ctrlKey && event.altKey && !event.shiftKey;
|
|||
|
|
case "CTRL_SHIFT":
|
|||
|
|
return event.ctrlKey && !event.altKey && event.shiftKey;
|
|||
|
|
case "SHIFT_ALT":
|
|||
|
|
return !event.ctrlKey && event.altKey && event.shiftKey;
|
|||
|
|
case "CTRL_SHIFT_ALT":
|
|||
|
|
return event.ctrlKey && event.altKey && event.shiftKey;
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
};
|
|||
|
|
this.mouseenterImgView = (event) => {
|
|||
|
|
this.resetClickTimer();
|
|||
|
|
event.stopPropagation();
|
|||
|
|
event.preventDefault();
|
|||
|
|
this.getAndUpdateActiveImg(event);
|
|||
|
|
// console.log('mouseenterImgView', event, this.imgGlobalStatus.activeImg);
|
|||
|
|
};
|
|||
|
|
this.mousedownImgView = (event) => {
|
|||
|
|
// console.log('mousedownImgView', event, this.imgGlobalStatus.activeImg, event.button);
|
|||
|
|
event.stopPropagation();
|
|||
|
|
event.preventDefault();
|
|||
|
|
const activeImg = this.getAndUpdateActiveImg(event);
|
|||
|
|
if (!activeImg)
|
|||
|
|
return;
|
|||
|
|
if (0 == event.button) { // left click
|
|||
|
|
this.setClickTimer(activeImg);
|
|||
|
|
this.setActiveImgZIndex(activeImg);
|
|||
|
|
this.imgGlobalStatus.dragging = true;
|
|||
|
|
// 鼠标相对于图片的位置
|
|||
|
|
activeImg.moveX = activeImg.imgViewEl.offsetLeft - event.clientX;
|
|||
|
|
activeImg.moveY = activeImg.imgViewEl.offsetTop - event.clientY;
|
|||
|
|
// 鼠标按下时持续触发/移动事件
|
|||
|
|
activeImg.imgViewEl.onmousemove = this.mousemoveImgView;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
/**
|
|||
|
|
* move the image by mouse or keyboard
|
|||
|
|
* @param event
|
|||
|
|
* @param offsetSize
|
|||
|
|
*/
|
|||
|
|
this.mousemoveImgView = (event, offsetSize) => {
|
|||
|
|
// console.log('mousemoveImgView', event, this.imgGlobalStatus.activeImg);
|
|||
|
|
const activeImg = this.imgGlobalStatus.activeImg;
|
|||
|
|
if (!activeImg)
|
|||
|
|
return;
|
|||
|
|
if (event) {
|
|||
|
|
if (!this.imgGlobalStatus.dragging)
|
|||
|
|
return;
|
|||
|
|
// drag via mouse cursor (Both Mode)
|
|||
|
|
activeImg.left = event.clientX + activeImg.moveX;
|
|||
|
|
activeImg.top = event.clientY + activeImg.moveY;
|
|||
|
|
}
|
|||
|
|
else if (offsetSize) {
|
|||
|
|
// move by arrow keys (Normal Mode)
|
|||
|
|
activeImg.left += offsetSize.offsetX;
|
|||
|
|
activeImg.top += offsetSize.offsetY;
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// move the image
|
|||
|
|
activeImg.imgViewEl.style.setProperty('margin-left', activeImg.left + 'px', 'important');
|
|||
|
|
activeImg.imgViewEl.style.setProperty('margin-top', activeImg.top + 'px', 'important');
|
|||
|
|
};
|
|||
|
|
this.mouseupImgView = (event) => {
|
|||
|
|
var _a;
|
|||
|
|
// console.log('mouseupImgView', event, this.imgGlobalStatus.activeImg);
|
|||
|
|
this.imgGlobalStatus.dragging = false;
|
|||
|
|
event.preventDefault();
|
|||
|
|
event.stopPropagation();
|
|||
|
|
const activeImg = this.imgGlobalStatus.activeImg;
|
|||
|
|
if (activeImg) {
|
|||
|
|
activeImg.imgViewEl.onmousemove = null;
|
|||
|
|
if (2 == event.button) { // right click
|
|||
|
|
(_a = this.menuView) === null || _a === void 0 ? void 0 : _a.show(event, activeImg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
this.mouseleaveImgView = (event) => {
|
|||
|
|
// console.log('mouseleaveImgView', event, this.imgGlobalStatus.activeImg, '>>> set null');
|
|||
|
|
this.imgGlobalStatus.dragging = false;
|
|||
|
|
this.resetClickTimer();
|
|||
|
|
event.preventDefault();
|
|||
|
|
event.stopPropagation();
|
|||
|
|
const activeImg = this.imgGlobalStatus.activeImg;
|
|||
|
|
if (activeImg) {
|
|||
|
|
activeImg.imgViewEl.onmousemove = null;
|
|||
|
|
this.setActiveImgForMouseEvent(null); // for pin mode
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
this.setClickTimer = (activeImg) => {
|
|||
|
|
++this.imgGlobalStatus.clickCount;
|
|||
|
|
clearTimeout(this.imgGlobalStatus.clickTimer);
|
|||
|
|
this.imgGlobalStatus.clickTimer = setTimeout(() => {
|
|||
|
|
const clickCount = this.imgGlobalStatus.clickCount;
|
|||
|
|
this.resetClickTimer();
|
|||
|
|
if (2 === clickCount) { // double click
|
|||
|
|
if (!activeImg)
|
|||
|
|
activeImg = this.imgGlobalStatus.activeImg;
|
|||
|
|
// console.log('mousedownImgView: double click...', activeImg.index);
|
|||
|
|
this.clickImgToolbar(null, this.plugin.settings.doubleClickToolbar, activeImg);
|
|||
|
|
}
|
|||
|
|
}, 200);
|
|||
|
|
};
|
|||
|
|
this.resetClickTimer = () => {
|
|||
|
|
this.imgGlobalStatus.clickTimer = null;
|
|||
|
|
this.imgGlobalStatus.clickCount = 0;
|
|||
|
|
};
|
|||
|
|
this.getAndUpdateActiveImg = (event) => {
|
|||
|
|
const targetEl = event.target;
|
|||
|
|
let index;
|
|||
|
|
if (!targetEl || !(index = targetEl.dataset.index))
|
|||
|
|
return;
|
|||
|
|
const activeImg = this.imgInfoCto.imgList[parseInt(index)];
|
|||
|
|
if (activeImg && (!this.imgGlobalStatus.activeImg || activeImg.index !== this.imgGlobalStatus.activeImg.index)) {
|
|||
|
|
this.setActiveImgForMouseEvent(activeImg); // update activeImg
|
|||
|
|
}
|
|||
|
|
// console.log('getAndUpdateActiveImg: ', activeImg)
|
|||
|
|
return activeImg;
|
|||
|
|
};
|
|||
|
|
this.mousewheelViewContainer = (event) => {
|
|||
|
|
// event.preventDefault();
|
|||
|
|
event.stopPropagation();
|
|||
|
|
// @ts-ignore
|
|||
|
|
this.zoomAndRender(0 < event.wheelDelta ? 0.1 : -0.1, event);
|
|||
|
|
};
|
|||
|
|
this.zoomAndRender = (ratio, event, actualSize, activeImg) => {
|
|||
|
|
if (!activeImg) {
|
|||
|
|
activeImg = this.imgGlobalStatus.activeImg;
|
|||
|
|
}
|
|||
|
|
let activeImgViewEl;
|
|||
|
|
if (!activeImg || !(activeImgViewEl = activeImg.imgViewEl))
|
|||
|
|
return;
|
|||
|
|
let offsetSize = { offsetX: 0, offsetY: 0 };
|
|||
|
|
if (event) {
|
|||
|
|
offsetSize.offsetX = event.offsetX;
|
|||
|
|
offsetSize.offsetY = event.offsetY;
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
offsetSize.offsetX = activeImg.curWidth / 2;
|
|||
|
|
offsetSize.offsetY = activeImg.curHeight / 2;
|
|||
|
|
}
|
|||
|
|
const zoomData = ImgUtil.zoom(ratio, activeImg, offsetSize, actualSize);
|
|||
|
|
this.renderImgTip(activeImg);
|
|||
|
|
activeImgViewEl.setAttribute('width', zoomData.curWidth + 'px');
|
|||
|
|
activeImgViewEl.style.setProperty('margin-top', zoomData.top + 'px', 'important');
|
|||
|
|
activeImgViewEl.style.setProperty('margin-left', zoomData.left + 'px', 'important');
|
|||
|
|
};
|
|||
|
|
this.clickImgToolbar = (event, targetElClass, activeImg) => {
|
|||
|
|
if (!targetElClass && !activeImg) {
|
|||
|
|
if (!event)
|
|||
|
|
return;
|
|||
|
|
// comes from clicking toolbar
|
|||
|
|
targetElClass = event.target.className;
|
|||
|
|
activeImg = this.imgGlobalStatus.activeImg;
|
|||
|
|
}
|
|||
|
|
switch (targetElClass) {
|
|||
|
|
case 'toolbar_zoom_to_100':
|
|||
|
|
this.zoomAndRender(null, null, true, activeImg);
|
|||
|
|
break;
|
|||
|
|
case 'toolbar_zoom_in':
|
|||
|
|
this.zoomAndRender(0.1);
|
|||
|
|
break;
|
|||
|
|
case 'toolbar_zoom_out':
|
|||
|
|
this.zoomAndRender(-0.1);
|
|||
|
|
break;
|
|||
|
|
case 'toolbar_full_screen':
|
|||
|
|
this.showPlayerImg(activeImg);
|
|||
|
|
break;
|
|||
|
|
case 'toolbar_refresh':
|
|||
|
|
this.refreshImg(activeImg);
|
|||
|
|
break;
|
|||
|
|
case 'toolbar_rotate_left':
|
|||
|
|
activeImg.rotate -= 90;
|
|||
|
|
ImgUtil.transform(activeImg);
|
|||
|
|
break;
|
|||
|
|
case 'toolbar_rotate_right':
|
|||
|
|
activeImg.rotate += 90;
|
|||
|
|
ImgUtil.transform(activeImg);
|
|||
|
|
break;
|
|||
|
|
case 'toolbar_scale_x':
|
|||
|
|
activeImg.scaleX = !activeImg.scaleX;
|
|||
|
|
ImgUtil.transform(activeImg);
|
|||
|
|
break;
|
|||
|
|
case 'toolbar_scale_y':
|
|||
|
|
activeImg.scaleY = !activeImg.scaleY;
|
|||
|
|
ImgUtil.transform(activeImg);
|
|||
|
|
break;
|
|||
|
|
case 'toolbar_invert_color':
|
|||
|
|
activeImg.invertColor = !activeImg.invertColor;
|
|||
|
|
ImgUtil.invertImgColor(activeImg.imgViewEl, activeImg.invertColor);
|
|||
|
|
break;
|
|||
|
|
case 'toolbar_copy':
|
|||
|
|
ImgUtil.copyImage(activeImg.imgViewEl, activeImg.curWidth, activeImg.curHeight);
|
|||
|
|
break;
|
|||
|
|
case 'toolbar_close':
|
|||
|
|
this.closeContainerView(event, activeImg);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
this.plugin = plugin;
|
|||
|
|
this.containerType = containerType;
|
|||
|
|
this.pinMaximum = pinMaximum;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var Md5 = /** @class */ (function () {
|
|||
|
|
function Md5() {
|
|||
|
|
}
|
|||
|
|
Md5.AddUnsigned = function (lX, lY) {
|
|||
|
|
var lX4, lY4, lX8, lY8, lResult;
|
|||
|
|
lX8 = (lX & 0x80000000);
|
|||
|
|
lY8 = (lY & 0x80000000);
|
|||
|
|
lX4 = (lX & 0x40000000);
|
|||
|
|
lY4 = (lY & 0x40000000);
|
|||
|
|
lResult = (lX & 0x3FFFFFFF) + (lY & 0x3FFFFFFF);
|
|||
|
|
if (!!(lX4 & lY4)) {
|
|||
|
|
return (lResult ^ 0x80000000 ^ lX8 ^ lY8);
|
|||
|
|
}
|
|||
|
|
if (!!(lX4 | lY4)) {
|
|||
|
|
if (!!(lResult & 0x40000000)) {
|
|||
|
|
return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
return (lResult ^ 0x40000000 ^ lX8 ^ lY8);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
return (lResult ^ lX8 ^ lY8);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
Md5.FF = function (a, b, c, d, x, s, ac) {
|
|||
|
|
a = this.AddUnsigned(a, this.AddUnsigned(this.AddUnsigned(this.F(b, c, d), x), ac));
|
|||
|
|
return this.AddUnsigned(this.RotateLeft(a, s), b);
|
|||
|
|
};
|
|||
|
|
Md5.GG = function (a, b, c, d, x, s, ac) {
|
|||
|
|
a = this.AddUnsigned(a, this.AddUnsigned(this.AddUnsigned(this.G(b, c, d), x), ac));
|
|||
|
|
return this.AddUnsigned(this.RotateLeft(a, s), b);
|
|||
|
|
};
|
|||
|
|
Md5.HH = function (a, b, c, d, x, s, ac) {
|
|||
|
|
a = this.AddUnsigned(a, this.AddUnsigned(this.AddUnsigned(this.H(b, c, d), x), ac));
|
|||
|
|
return this.AddUnsigned(this.RotateLeft(a, s), b);
|
|||
|
|
};
|
|||
|
|
Md5.II = function (a, b, c, d, x, s, ac) {
|
|||
|
|
a = this.AddUnsigned(a, this.AddUnsigned(this.AddUnsigned(this.I(b, c, d), x), ac));
|
|||
|
|
return this.AddUnsigned(this.RotateLeft(a, s), b);
|
|||
|
|
};
|
|||
|
|
Md5.ConvertToWordArray = function (string) {
|
|||
|
|
var lWordCount, lMessageLength = string.length, lNumberOfWords_temp1 = lMessageLength + 8, lNumberOfWords_temp2 = (lNumberOfWords_temp1 - (lNumberOfWords_temp1 % 64)) / 64, lNumberOfWords = (lNumberOfWords_temp2 + 1) * 16, lWordArray = Array(lNumberOfWords - 1), lBytePosition = 0, lByteCount = 0;
|
|||
|
|
while (lByteCount < lMessageLength) {
|
|||
|
|
lWordCount = (lByteCount - (lByteCount % 4)) / 4;
|
|||
|
|
lBytePosition = (lByteCount % 4) * 8;
|
|||
|
|
lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition));
|
|||
|
|
lByteCount++;
|
|||
|
|
}
|
|||
|
|
lWordCount = (lByteCount - (lByteCount % 4)) / 4;
|
|||
|
|
lBytePosition = (lByteCount % 4) * 8;
|
|||
|
|
lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition);
|
|||
|
|
lWordArray[lNumberOfWords - 2] = lMessageLength << 3;
|
|||
|
|
lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29;
|
|||
|
|
return lWordArray;
|
|||
|
|
};
|
|||
|
|
Md5.WordToHex = function (lValue) {
|
|||
|
|
var WordToHexValue = "", WordToHexValue_temp = "", lByte, lCount;
|
|||
|
|
for (lCount = 0; lCount <= 3; lCount++) {
|
|||
|
|
lByte = (lValue >>> (lCount * 8)) & 255;
|
|||
|
|
WordToHexValue_temp = "0" + lByte.toString(16);
|
|||
|
|
WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length - 2, 2);
|
|||
|
|
}
|
|||
|
|
return WordToHexValue;
|
|||
|
|
};
|
|||
|
|
Md5.Utf8Encode = function (string) {
|
|||
|
|
var utftext = "", c;
|
|||
|
|
string = string.replace(/\r\n/g, "\n");
|
|||
|
|
for (var n = 0; n < string.length; n++) {
|
|||
|
|
c = string.charCodeAt(n);
|
|||
|
|
if (c < 128) {
|
|||
|
|
utftext += String.fromCharCode(c);
|
|||
|
|
}
|
|||
|
|
else if ((c > 127) && (c < 2048)) {
|
|||
|
|
utftext += String.fromCharCode((c >> 6) | 192);
|
|||
|
|
utftext += String.fromCharCode((c & 63) | 128);
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
utftext += String.fromCharCode((c >> 12) | 224);
|
|||
|
|
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
|
|||
|
|
utftext += String.fromCharCode((c & 63) | 128);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return utftext;
|
|||
|
|
};
|
|||
|
|
Md5.init = function (string) {
|
|||
|
|
var temp;
|
|||
|
|
if (typeof string !== 'string')
|
|||
|
|
string = JSON.stringify(string);
|
|||
|
|
this._string = this.Utf8Encode(string);
|
|||
|
|
this.x = this.ConvertToWordArray(this._string);
|
|||
|
|
this.a = 0x67452301;
|
|||
|
|
this.b = 0xEFCDAB89;
|
|||
|
|
this.c = 0x98BADCFE;
|
|||
|
|
this.d = 0x10325476;
|
|||
|
|
for (this.k = 0; this.k < this.x.length; this.k += 16) {
|
|||
|
|
this.AA = this.a;
|
|||
|
|
this.BB = this.b;
|
|||
|
|
this.CC = this.c;
|
|||
|
|
this.DD = this.d;
|
|||
|
|
this.a = this.FF(this.a, this.b, this.c, this.d, this.x[this.k], this.S11, 0xD76AA478);
|
|||
|
|
this.d = this.FF(this.d, this.a, this.b, this.c, this.x[this.k + 1], this.S12, 0xE8C7B756);
|
|||
|
|
this.c = this.FF(this.c, this.d, this.a, this.b, this.x[this.k + 2], this.S13, 0x242070DB);
|
|||
|
|
this.b = this.FF(this.b, this.c, this.d, this.a, this.x[this.k + 3], this.S14, 0xC1BDCEEE);
|
|||
|
|
this.a = this.FF(this.a, this.b, this.c, this.d, this.x[this.k + 4], this.S11, 0xF57C0FAF);
|
|||
|
|
this.d = this.FF(this.d, this.a, this.b, this.c, this.x[this.k + 5], this.S12, 0x4787C62A);
|
|||
|
|
this.c = this.FF(this.c, this.d, this.a, this.b, this.x[this.k + 6], this.S13, 0xA8304613);
|
|||
|
|
this.b = this.FF(this.b, this.c, this.d, this.a, this.x[this.k + 7], this.S14, 0xFD469501);
|
|||
|
|
this.a = this.FF(this.a, this.b, this.c, this.d, this.x[this.k + 8], this.S11, 0x698098D8);
|
|||
|
|
this.d = this.FF(this.d, this.a, this.b, this.c, this.x[this.k + 9], this.S12, 0x8B44F7AF);
|
|||
|
|
this.c = this.FF(this.c, this.d, this.a, this.b, this.x[this.k + 10], this.S13, 0xFFFF5BB1);
|
|||
|
|
this.b = this.FF(this.b, this.c, this.d, this.a, this.x[this.k + 11], this.S14, 0x895CD7BE);
|
|||
|
|
this.a = this.FF(this.a, this.b, this.c, this.d, this.x[this.k + 12], this.S11, 0x6B901122);
|
|||
|
|
this.d = this.FF(this.d, this.a, this.b, this.c, this.x[this.k + 13], this.S12, 0xFD987193);
|
|||
|
|
this.c = this.FF(this.c, this.d, this.a, this.b, this.x[this.k + 14], this.S13, 0xA679438E);
|
|||
|
|
this.b = this.FF(this.b, this.c, this.d, this.a, this.x[this.k + 15], this.S14, 0x49B40821);
|
|||
|
|
this.a = this.GG(this.a, this.b, this.c, this.d, this.x[this.k + 1], this.S21, 0xF61E2562);
|
|||
|
|
this.d = this.GG(this.d, this.a, this.b, this.c, this.x[this.k + 6], this.S22, 0xC040B340);
|
|||
|
|
this.c = this.GG(this.c, this.d, this.a, this.b, this.x[this.k + 11], this.S23, 0x265E5A51);
|
|||
|
|
this.b = this.GG(this.b, this.c, this.d, this.a, this.x[this.k], this.S24, 0xE9B6C7AA);
|
|||
|
|
this.a = this.GG(this.a, this.b, this.c, this.d, this.x[this.k + 5], this.S21, 0xD62F105D);
|
|||
|
|
this.d = this.GG(this.d, this.a, this.b, this.c, this.x[this.k + 10], this.S22, 0x2441453);
|
|||
|
|
this.c = this.GG(this.c, this.d, this.a, this.b, this.x[this.k + 15], this.S23, 0xD8A1E681);
|
|||
|
|
this.b = this.GG(this.b, this.c, this.d, this.a, this.x[this.k + 4], this.S24, 0xE7D3FBC8);
|
|||
|
|
this.a = this.GG(this.a, this.b, this.c, this.d, this.x[this.k + 9], this.S21, 0x21E1CDE6);
|
|||
|
|
this.d = this.GG(this.d, this.a, this.b, this.c, this.x[this.k + 14], this.S22, 0xC33707D6);
|
|||
|
|
this.c = this.GG(this.c, this.d, this.a, this.b, this.x[this.k + 3], this.S23, 0xF4D50D87);
|
|||
|
|
this.b = this.GG(this.b, this.c, this.d, this.a, this.x[this.k + 8], this.S24, 0x455A14ED);
|
|||
|
|
this.a = this.GG(this.a, this.b, this.c, this.d, this.x[this.k + 13], this.S21, 0xA9E3E905);
|
|||
|
|
this.d = this.GG(this.d, this.a, this.b, this.c, this.x[this.k + 2], this.S22, 0xFCEFA3F8);
|
|||
|
|
this.c = this.GG(this.c, this.d, this.a, this.b, this.x[this.k + 7], this.S23, 0x676F02D9);
|
|||
|
|
this.b = this.GG(this.b, this.c, this.d, this.a, this.x[this.k + 12], this.S24, 0x8D2A4C8A);
|
|||
|
|
this.a = this.HH(this.a, this.b, this.c, this.d, this.x[this.k + 5], this.S31, 0xFFFA3942);
|
|||
|
|
this.d = this.HH(this.d, this.a, this.b, this.c, this.x[this.k + 8], this.S32, 0x8771F681);
|
|||
|
|
this.c = this.HH(this.c, this.d, this.a, this.b, this.x[this.k + 11], this.S33, 0x6D9D6122);
|
|||
|
|
this.b = this.HH(this.b, this.c, this.d, this.a, this.x[this.k + 14], this.S34, 0xFDE5380C);
|
|||
|
|
this.a = this.HH(this.a, this.b, this.c, this.d, this.x[this.k + 1], this.S31, 0xA4BEEA44);
|
|||
|
|
this.d = this.HH(this.d, this.a, this.b, this.c, this.x[this.k + 4], this.S32, 0x4BDECFA9);
|
|||
|
|
this.c = this.HH(this.c, this.d, this.a, this.b, this.x[this.k + 7], this.S33, 0xF6BB4B60);
|
|||
|
|
this.b = this.HH(this.b, this.c, this.d, this.a, this.x[this.k + 10], this.S34, 0xBEBFBC70);
|
|||
|
|
this.a = this.HH(this.a, this.b, this.c, this.d, this.x[this.k + 13], this.S31, 0x289B7EC6);
|
|||
|
|
this.d = this.HH(this.d, this.a, this.b, this.c, this.x[this.k], this.S32, 0xEAA127FA);
|
|||
|
|
this.c = this.HH(this.c, this.d, this.a, this.b, this.x[this.k + 3], this.S33, 0xD4EF3085);
|
|||
|
|
this.b = this.HH(this.b, this.c, this.d, this.a, this.x[this.k + 6], this.S34, 0x4881D05);
|
|||
|
|
this.a = this.HH(this.a, this.b, this.c, this.d, this.x[this.k + 9], this.S31, 0xD9D4D039);
|
|||
|
|
this.d = this.HH(this.d, this.a, this.b, this.c, this.x[this.k + 12], this.S32, 0xE6DB99E5);
|
|||
|
|
this.c = this.HH(this.c, this.d, this.a, this.b, this.x[this.k + 15], this.S33, 0x1FA27CF8);
|
|||
|
|
this.b = this.HH(this.b, this.c, this.d, this.a, this.x[this.k + 2], this.S34, 0xC4AC5665);
|
|||
|
|
this.a = this.II(this.a, this.b, this.c, this.d, this.x[this.k], this.S41, 0xF4292244);
|
|||
|
|
this.d = this.II(this.d, this.a, this.b, this.c, this.x[this.k + 7], this.S42, 0x432AFF97);
|
|||
|
|
this.c = this.II(this.c, this.d, this.a, this.b, this.x[this.k + 14], this.S43, 0xAB9423A7);
|
|||
|
|
this.b = this.II(this.b, this.c, this.d, this.a, this.x[this.k + 5], this.S44, 0xFC93A039);
|
|||
|
|
this.a = this.II(this.a, this.b, this.c, this.d, this.x[this.k + 12], this.S41, 0x655B59C3);
|
|||
|
|
this.d = this.II(this.d, this.a, this.b, this.c, this.x[this.k + 3], this.S42, 0x8F0CCC92);
|
|||
|
|
this.c = this.II(this.c, this.d, this.a, this.b, this.x[this.k + 10], this.S43, 0xFFEFF47D);
|
|||
|
|
this.b = this.II(this.b, this.c, this.d, this.a, this.x[this.k + 1], this.S44, 0x85845DD1);
|
|||
|
|
this.a = this.II(this.a, this.b, this.c, this.d, this.x[this.k + 8], this.S41, 0x6FA87E4F);
|
|||
|
|
this.d = this.II(this.d, this.a, this.b, this.c, this.x[this.k + 15], this.S42, 0xFE2CE6E0);
|
|||
|
|
this.c = this.II(this.c, this.d, this.a, this.b, this.x[this.k + 6], this.S43, 0xA3014314);
|
|||
|
|
this.b = this.II(this.b, this.c, this.d, this.a, this.x[this.k + 13], this.S44, 0x4E0811A1);
|
|||
|
|
this.a = this.II(this.a, this.b, this.c, this.d, this.x[this.k + 4], this.S41, 0xF7537E82);
|
|||
|
|
this.d = this.II(this.d, this.a, this.b, this.c, this.x[this.k + 11], this.S42, 0xBD3AF235);
|
|||
|
|
this.c = this.II(this.c, this.d, this.a, this.b, this.x[this.k + 2], this.S43, 0x2AD7D2BB);
|
|||
|
|
this.b = this.II(this.b, this.c, this.d, this.a, this.x[this.k + 9], this.S44, 0xEB86D391);
|
|||
|
|
this.a = this.AddUnsigned(this.a, this.AA);
|
|||
|
|
this.b = this.AddUnsigned(this.b, this.BB);
|
|||
|
|
this.c = this.AddUnsigned(this.c, this.CC);
|
|||
|
|
this.d = this.AddUnsigned(this.d, this.DD);
|
|||
|
|
}
|
|||
|
|
temp = this.WordToHex(this.a) + this.WordToHex(this.b) + this.WordToHex(this.c) + this.WordToHex(this.d);
|
|||
|
|
return temp.toLowerCase();
|
|||
|
|
};
|
|||
|
|
Md5.x = Array();
|
|||
|
|
Md5.S11 = 7;
|
|||
|
|
Md5.S12 = 12;
|
|||
|
|
Md5.S13 = 17;
|
|||
|
|
Md5.S14 = 22;
|
|||
|
|
Md5.S21 = 5;
|
|||
|
|
Md5.S22 = 9;
|
|||
|
|
Md5.S23 = 14;
|
|||
|
|
Md5.S24 = 20;
|
|||
|
|
Md5.S31 = 4;
|
|||
|
|
Md5.S32 = 11;
|
|||
|
|
Md5.S33 = 16;
|
|||
|
|
Md5.S34 = 23;
|
|||
|
|
Md5.S41 = 6;
|
|||
|
|
Md5.S42 = 10;
|
|||
|
|
Md5.S43 = 15;
|
|||
|
|
Md5.S44 = 21;
|
|||
|
|
Md5.RotateLeft = function (lValue, iShiftBits) { return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits)); };
|
|||
|
|
Md5.F = function (x, y, z) { return (x & y) | ((~x) & z); };
|
|||
|
|
Md5.G = function (x, y, z) { return (x & z) | (y & (~z)); };
|
|||
|
|
Md5.H = function (x, y, z) { return (x ^ y ^ z); };
|
|||
|
|
Md5.I = function (x, y, z) { return (y ^ (x | (~z))); };
|
|||
|
|
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;
|
|||
|
|
this.src = src;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
class GalleryImgCacheCto {
|
|||
|
|
constructor(file, galleryImgList, mtime) {
|
|||
|
|
this.file = file;
|
|||
|
|
this.galleryImgList = galleryImgList;
|
|||
|
|
this.mtime = mtime;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* // const imgList: Array<GalleryImg> = parseMarkDown(plugin, activeView.sourceMode?.cmEditor, activeView.file.path);
|
|||
|
|
export const parseMarkDown = (plugin: ImageToolkitPlugin, cm: CodeMirror.Editor, filePath: string) => {
|
|||
|
|
let line, lineText;
|
|||
|
|
for (let i = 0, lastLine = cm.lastLine(); i <= lastLine; i++) {
|
|||
|
|
if (!(line = cm.lineInfo(i))) continue;
|
|||
|
|
if (!(lineText = line.text)) continue;
|
|||
|
|
console.debug((i + 1) + ' line: ' + lineText);
|
|||
|
|
}
|
|||
|
|
} */
|
|||
|
|
const parseActiveViewData = (plugin, lines, file) => {
|
|||
|
|
if (!lines || 0 >= lines.length)
|
|||
|
|
return null;
|
|||
|
|
let lineText;
|
|||
|
|
let isCodeArea = false;
|
|||
|
|
let textArr;
|
|||
|
|
const imgList = new Array();
|
|||
|
|
for (let i = 0, len = lines.length; i < len; i++) {
|
|||
|
|
if (!(lineText = lines[i]))
|
|||
|
|
continue;
|
|||
|
|
// console.log((i + 1) + ' line: ' + lineText);
|
|||
|
|
if (lineText.startsWith('```')) {
|
|||
|
|
isCodeArea = !isCodeArea;
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
if (isCodeArea)
|
|||
|
|
continue;
|
|||
|
|
if (textArr = getNonCodeAreaTexts(lineText)) {
|
|||
|
|
for (const text of textArr) {
|
|||
|
|
extractImage(text, imgList);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
extractImage(lineText, imgList);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const filePath = file.path;
|
|||
|
|
for (let i = 0, len = imgList.length; i < len; i++) {
|
|||
|
|
const img = imgList[i];
|
|||
|
|
if (img.convert) {
|
|||
|
|
const imageFile = plugin.app.metadataCache.getFirstLinkpathDest(decodeURIComponent(img.src), filePath);
|
|||
|
|
img.src = imageFile ? plugin.app.vault.getResourcePath(imageFile) : '';
|
|||
|
|
}
|
|||
|
|
img.hash = md5Img(img.alt, img.src);
|
|||
|
|
img.match = null;
|
|||
|
|
img.name = null;
|
|||
|
|
}
|
|||
|
|
return new GalleryImgCacheCto(new FileCto(file.path, file.stat.ctime, file.stat.mtime), imgList, new Date().getTime());
|
|||
|
|
};
|
|||
|
|
const getNonCodeAreaTexts = (lineText) => {
|
|||
|
|
let textArr = [];
|
|||
|
|
const idx1 = lineText.indexOf('`');
|
|||
|
|
if (0 > idx1)
|
|||
|
|
return null;
|
|||
|
|
const idx2 = lineText.lastIndexOf('`');
|
|||
|
|
if (idx1 === idx2)
|
|||
|
|
return null;
|
|||
|
|
if (idx1 > 0)
|
|||
|
|
textArr.push(lineText.substring(0, idx1));
|
|||
|
|
if (lineText.length - 1 > idx2)
|
|||
|
|
textArr.push(lineText.substring(idx2 + 1));
|
|||
|
|
return textArr;
|
|||
|
|
};
|
|||
|
|
const IMAGE_LINK_REGEX1 = /\[\s*?(!\[(.*?)\]\((.*?)\))\s*?\]\(.*?\)/; // 1-link: [  ](https://...)
|
|||
|
|
const IMAGE_REGEX1 = /!\[(.*?)\]\((.*?)\)/; // 1: 
|
|||
|
|
const IMAGE_LINK_REGEX2 = /\[\s*?(!\[\[(.*?[jpe?g|png|gif|svg|bmp].*?)\]\])\s*?\]\(.*?\)/i; // 2-link: [ ![[src|alt1|alt2|width]] ](https://...)
|
|||
|
|
const IMAGE_REGEX2 = /!\[\[(.*?[jpe?g|png|gif|svg|bmp].*?)\]\]/i; // 2: ![[src|alt1|alt2|width]]
|
|||
|
|
const SRC_LINK_REGEX = /[a-z][a-z0-9+\-.]+:\/.*/i; // match link: http://, file://, app://
|
|||
|
|
const SRC_IMG_REGREX = /.*?\.jpe?g|png|gif|svg|bmp/i; // match image ext: .jpg/.jpeg/.png/.gif/.svg/.bmp
|
|||
|
|
const IMG_TAG_LINK_SRC_REGEX = /<a.*?(<img.*?src=[\'"](.*?)[\'"].*?\/?>).*?\/a>/i; // 3-a-img-src: <a> <img ... src=''/> </a>
|
|||
|
|
const IMG_TAG_SRC_REGEX = /<img.*?src=[\'"](.*?)[\'"].*?\/?>/i; // 3-img-src: <img ... src='' />
|
|||
|
|
const IMG_TAG_ALT_REGEX = /<img.*?alt=[\'"](.*?)[\'"].*?\/?>/i; // 3-img-alt: <img ... alt='' />
|
|||
|
|
const FULL_PATH_REGEX = /^[a-z]\:.*?[jpe?g|png|gif|svg|bmp]/i;
|
|||
|
|
const BLOCKQUOTE_PREFIX = `#^`;
|
|||
|
|
const IMG_MATCH_MIN_LEN = 7;
|
|||
|
|
const extractImage = (text, imgList) => {
|
|||
|
|
let img;
|
|||
|
|
if (!(img = matchImage1(text))) {
|
|||
|
|
if (!(img = matchImage2(text))) {
|
|||
|
|
if (!(img = matchImageTag(text))) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
imgList.push(img);
|
|||
|
|
if (img.match) {
|
|||
|
|
const idx = img.match.index + img.match[0].length;
|
|||
|
|
if (idx > text.length - IMG_MATCH_MIN_LEN)
|
|||
|
|
return;
|
|||
|
|
extractImage(text.substring(idx), imgList);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
/**
|
|||
|
|
* 
|
|||
|
|
* @param text
|
|||
|
|
* @returns
|
|||
|
|
*/
|
|||
|
|
const matchImage1 = (text) => {
|
|||
|
|
var _a;
|
|||
|
|
let match = text.match(IMAGE_LINK_REGEX1); // 1-link: [  ](https://...)
|
|||
|
|
let link = false;
|
|||
|
|
let alt, src;
|
|||
|
|
if (match) {
|
|||
|
|
link = true;
|
|||
|
|
alt = match[2];
|
|||
|
|
src = match[3];
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
match = text.match(IMAGE_REGEX1); // 1: 
|
|||
|
|
if (match) {
|
|||
|
|
if (alt = match[1]) {
|
|||
|
|
if (0 <= alt.indexOf('[') && 0 <= alt.indexOf(']'))
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
src = match[2];
|
|||
|
|
if (src && src.startsWith(BLOCKQUOTE_PREFIX))
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (!match)
|
|||
|
|
return null;
|
|||
|
|
const img = new GalleryImgCto();
|
|||
|
|
img.link = link;
|
|||
|
|
img.match = match;
|
|||
|
|
img.alt = alt;
|
|||
|
|
img.src = src;
|
|||
|
|
let width;
|
|||
|
|
if (img.src) {
|
|||
|
|
if (SRC_LINK_REGEX.test(img.src)) { // 1.2: match link: http://, file://, app://local/
|
|||
|
|
if (img.src.startsWith('file://')) {
|
|||
|
|
img.src = img.src.replace(/^file:\/+/, 'app://local/');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else if (SRC_IMG_REGREX.test(img.src)) { // 1.3: match image ext: .jpg/.jpeg/.png/.gif/.svg/.bmp
|
|||
|
|
const srcArr = img.src.split('/');
|
|||
|
|
if (srcArr && 0 < srcArr.length) {
|
|||
|
|
img.name = srcArr[srcArr.length - 1];
|
|||
|
|
}
|
|||
|
|
img.convert = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const altArr = (_a = img.alt) === null || _a === void 0 ? void 0 : _a.split('\|'); // match[1] = alt1|alt2|...|altn|width
|
|||
|
|
if (altArr && 1 < altArr.length) {
|
|||
|
|
if (/\d+/.test(width = altArr[altArr.length - 1])) {
|
|||
|
|
img.alt = img.alt.substring(0, img.alt.length - width.length - 1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return img;
|
|||
|
|
};
|
|||
|
|
/**
|
|||
|
|
* ![[src|alt1|alt2|width]]
|
|||
|
|
* @param text
|
|||
|
|
* @returns
|
|||
|
|
*/
|
|||
|
|
const matchImage2 = (text) => {
|
|||
|
|
let match = text.match(IMAGE_LINK_REGEX2); // 2-link: [ ![[src|alt1|alt2|width]] ](https://...)
|
|||
|
|
let link = false;
|
|||
|
|
let content;
|
|||
|
|
if (match) {
|
|||
|
|
link = true;
|
|||
|
|
content = match[2];
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
match = text.match(IMAGE_REGEX2); // 2: ![[src|alt1|alt2|width]]
|
|||
|
|
content = match ? match[1] : null;
|
|||
|
|
if (content && content.startsWith(BLOCKQUOTE_PREFIX))
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!match)
|
|||
|
|
return null;
|
|||
|
|
const img = new GalleryImgCto();
|
|||
|
|
img.link = link;
|
|||
|
|
img.match = match;
|
|||
|
|
const contentArr = content === null || content === void 0 ? void 0 : content.split('|');
|
|||
|
|
if (contentArr && 0 < contentArr.length && (img.src = contentArr[0])) {
|
|||
|
|
const srcArr = img.src.split('/');
|
|||
|
|
if (srcArr && 0 < srcArr.length) {
|
|||
|
|
img.name = srcArr[srcArr.length - 1];
|
|||
|
|
}
|
|||
|
|
if (1 == contentArr.length) {
|
|||
|
|
img.alt = img.src;
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
img.alt = '';
|
|||
|
|
for (let i = 1; i < contentArr.length; i++) {
|
|||
|
|
if (i == contentArr.length - 1 && /\d+/.test(contentArr[i]))
|
|||
|
|
break;
|
|||
|
|
if (img.alt)
|
|||
|
|
img.alt += '|';
|
|||
|
|
img.alt += contentArr[i];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
img.convert = true;
|
|||
|
|
}
|
|||
|
|
return img;
|
|||
|
|
};
|
|||
|
|
const matchImageTag = (text) => {
|
|||
|
|
let match = text.match(IMG_TAG_LINK_SRC_REGEX); // 3-a-img-src: <a> <img ... src=''/> </a>
|
|||
|
|
let link = false;
|
|||
|
|
if (match) {
|
|||
|
|
link = true;
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
match = text.match(IMG_TAG_SRC_REGEX); // 3-img-src: <img ... src='' />
|
|||
|
|
}
|
|||
|
|
if (!match)
|
|||
|
|
return null;
|
|||
|
|
const img = new GalleryImgCto();
|
|||
|
|
img.link = link;
|
|||
|
|
img.match = match;
|
|||
|
|
img.src = img.link ? match[2] : match[1];
|
|||
|
|
if (img.src) {
|
|||
|
|
if (img.src.startsWith('file://')) {
|
|||
|
|
img.src = img.src.replace(/^file:\/+/, 'app://local/');
|
|||
|
|
}
|
|||
|
|
else if (FULL_PATH_REGEX.test(img.src)) {
|
|||
|
|
img.src = 'app://local/' + img.src;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const matchAlt = text.match(IMG_TAG_ALT_REGEX);
|
|||
|
|
img.alt = matchAlt ? matchAlt[1] : '';
|
|||
|
|
return img;
|
|||
|
|
};
|
|||
|
|
const md5Img = (alt, src) => {
|
|||
|
|
return Md5.init((alt ? alt : '') + '_' + src);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
class GalleryNavbarView {
|
|||
|
|
constructor(mainContainerView, plugin) {
|
|||
|
|
// whether to display gallery navbar
|
|||
|
|
this.state = false;
|
|||
|
|
this.galleryNavbarEl = null;
|
|||
|
|
this.galleryListEl = null;
|
|||
|
|
this.galleryIsMousingDown = false;
|
|||
|
|
this.galleryMouseDownClientX = 0;
|
|||
|
|
this.galleryTranslateX = 0;
|
|||
|
|
this.CACHE_LIMIT = 10;
|
|||
|
|
this.CLICK_TIME = 150;
|
|||
|
|
this.renderGalleryImg = (imgFooterEl) => __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
var _a;
|
|||
|
|
if (this.state)
|
|||
|
|
return;
|
|||
|
|
// get all of images on the current editor
|
|||
|
|
const activeView = this.plugin.app.workspace.getActiveViewOfType(obsidian.MarkdownView);
|
|||
|
|
if (!activeView
|
|||
|
|
|| 'markdown' !== activeView.getViewType()
|
|||
|
|
// modal-container: community plugin, flashcards (Space Repetition)
|
|||
|
|
|| 0 < document.getElementsByClassName('modal-container').length) {
|
|||
|
|
if (this.galleryNavbarEl)
|
|||
|
|
this.galleryNavbarEl.hidden = true;
|
|||
|
|
if (this.galleryListEl)
|
|||
|
|
this.galleryListEl.innerHTML = '';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// <div class="gallery-navbar"> <ul class="gallery-list"> <li> <img src='' alt=''> </li> <li...> <ul> </div>
|
|||
|
|
this.initGalleryNavbar(imgFooterEl);
|
|||
|
|
const activeFile = activeView.file;
|
|||
|
|
let galleryImg = this.getGalleryImgCache(activeFile);
|
|||
|
|
// let hitCache: boolean = true;
|
|||
|
|
if (!galleryImg) {
|
|||
|
|
// hitCache = false;
|
|||
|
|
galleryImg = parseActiveViewData(this.plugin, (_a = activeView.data) === null || _a === void 0 ? void 0 : _a.split('\n'), activeFile);
|
|||
|
|
this.setGalleryImgCache(galleryImg);
|
|||
|
|
}
|
|||
|
|
// console.log('oit-gallery-navbar: ' + (hitCache ? 'hit cache' : 'miss cache') + '!', galleryImg);
|
|||
|
|
const imgList = galleryImg.galleryImgList;
|
|||
|
|
const imgContextHash = this.getTargetImgContextHash(this.mainContainerView.getLastClickedImgEl(), activeView.containerEl, this.plugin.imgSelector);
|
|||
|
|
let liEl, imgEl, liElActive;
|
|||
|
|
let imgListEl = new Array();
|
|||
|
|
let targetImageIdx = -1, targetRealIdx = 0;
|
|||
|
|
let isAddGalleryActive = false;
|
|||
|
|
let prevHash, nextHash;
|
|||
|
|
const viewImageWithALink = this.plugin.settings.viewImageWithALink;
|
|||
|
|
for (let i = 0, len = imgList.length; i < len; i++) {
|
|||
|
|
const img = imgList[i];
|
|||
|
|
if (!viewImageWithALink && img.link)
|
|||
|
|
continue;
|
|||
|
|
// <li> <img class='gallery-img' src='' alt=''> </li>
|
|||
|
|
this.galleryListEl.append(liEl = createEl('li'));
|
|||
|
|
liEl.append(imgEl = createEl('img'));
|
|||
|
|
imgEl.addClass('gallery-img');
|
|||
|
|
imgEl.setAttr('alt', img.alt);
|
|||
|
|
imgEl.setAttr('src', img.src);
|
|||
|
|
imgListEl.push(imgEl);
|
|||
|
|
this.mainContainerView.setImgViewDefaultBackground(imgEl);
|
|||
|
|
// find the target image (which image is just clicked)
|
|||
|
|
if (!imgContextHash || isAddGalleryActive)
|
|||
|
|
continue;
|
|||
|
|
if (imgContextHash[1] == img.hash) {
|
|||
|
|
if (0 > targetImageIdx) {
|
|||
|
|
targetImageIdx = i;
|
|||
|
|
liElActive = liEl;
|
|||
|
|
targetRealIdx = imgListEl.length;
|
|||
|
|
}
|
|||
|
|
if (0 == i) {
|
|||
|
|
prevHash = null;
|
|||
|
|
nextHash = 1 < len ? imgList[i + 1].hash : null;
|
|||
|
|
}
|
|||
|
|
else if (len - 1 == i) {
|
|||
|
|
prevHash = imgList[i - 1].hash;
|
|||
|
|
nextHash = null;
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
prevHash = imgList[i - 1].hash;
|
|||
|
|
nextHash = imgList[i + 1].hash;
|
|||
|
|
}
|
|||
|
|
if (imgContextHash[0] == prevHash && imgContextHash[2] == nextHash) {
|
|||
|
|
isAddGalleryActive = true;
|
|||
|
|
liElActive = liEl;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const realTotalNum = imgListEl.length;
|
|||
|
|
this.mainContainerView.renderImgTitle(null, '[' + targetRealIdx + '/' + realTotalNum + ']');
|
|||
|
|
imgListEl.forEach((value, index) => {
|
|||
|
|
value.dataset.index = '[' + (index + 1) + '/' + realTotalNum + ']';
|
|||
|
|
});
|
|||
|
|
if (0 <= targetImageIdx) {
|
|||
|
|
if (liElActive) {
|
|||
|
|
liElActive.addClass('gallery-active');
|
|||
|
|
if (this.settings.galleryImgBorderActive) {
|
|||
|
|
liElActive.addClass('img-border-active');
|
|||
|
|
liElActive.style.setProperty('border-color', this.settings.galleryImgBorderActiveColor);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.galleryTranslateX = (document.documentElement.clientWidth || document.body.clientWidth) / 2.5 - targetImageIdx * 52;
|
|||
|
|
this.galleryListEl.style.transform = 'translateX(' + this.galleryTranslateX + 'px)';
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.initDefaultData = () => {
|
|||
|
|
this.galleryMouseDownClientX = 0;
|
|||
|
|
this.galleryTranslateX = 0;
|
|||
|
|
if (this.galleryListEl) {
|
|||
|
|
this.galleryListEl.style.transform = 'translateX(0px)';
|
|||
|
|
// remove all childs (li) of gallery-list
|
|||
|
|
this.galleryListEl.innerHTML = '';
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
this.initGalleryNavbar = (imgFooterEl) => {
|
|||
|
|
// <div class="gallery-navbar">
|
|||
|
|
if (!this.galleryNavbarEl) {
|
|||
|
|
// imgInfo.imgFooterEl.append(galleryNavbarEl = createDiv());
|
|||
|
|
imgFooterEl.append(this.galleryNavbarEl = createDiv());
|
|||
|
|
this.galleryNavbarEl.addClass('gallery-navbar');
|
|||
|
|
this.galleryNavbarEl.onmouseover = () => {
|
|||
|
|
this.galleryNavbarEl.style.setProperty('background-color', this.settings.galleryNavbarHoverColor);
|
|||
|
|
};
|
|||
|
|
this.galleryNavbarEl.onmouseout = () => {
|
|||
|
|
this.galleryNavbarEl.style.setProperty('background-color', this.settings.galleryNavbarDefaultColor);
|
|||
|
|
};
|
|||
|
|
// add events
|
|||
|
|
this.galleryNavbarEl.addEventListener('mousedown', this.mouseDownGallery);
|
|||
|
|
this.galleryNavbarEl.addEventListener('mousemove', this.mouseMoveGallery);
|
|||
|
|
this.galleryNavbarEl.addEventListener('mouseup', this.mouseUpGallery);
|
|||
|
|
this.galleryNavbarEl.addEventListener('mouseleave', this.mouseLeaveGallery);
|
|||
|
|
}
|
|||
|
|
this.galleryNavbarEl.style.setProperty('background-color', this.settings.galleryNavbarDefaultColor);
|
|||
|
|
if (!this.galleryListEl) {
|
|||
|
|
this.galleryNavbarEl.append(this.galleryListEl = createEl('ul')); // <ul class="gallery-list">
|
|||
|
|
this.galleryListEl.addClass('gallery-list');
|
|||
|
|
}
|
|||
|
|
this.initDefaultData();
|
|||
|
|
this.galleryNavbarEl.hidden = false; // display 'gallery-navbar'
|
|||
|
|
this.state = true;
|
|||
|
|
};
|
|||
|
|
this.closeGalleryNavbar = () => {
|
|||
|
|
if (!this.state)
|
|||
|
|
return;
|
|||
|
|
this.galleryNavbarEl.hidden = true; // hide 'gallery-navbar'
|
|||
|
|
this.state = false;
|
|||
|
|
this.initDefaultData();
|
|||
|
|
};
|
|||
|
|
this.remove = () => {
|
|||
|
|
var _a, _b;
|
|||
|
|
this.state = false;
|
|||
|
|
(_a = this.galleryNavbarEl) === null || _a === void 0 ? void 0 : _a.remove();
|
|||
|
|
(_b = this.galleryListEl) === null || _b === void 0 ? void 0 : _b.remove();
|
|||
|
|
this.galleryNavbarEl = null;
|
|||
|
|
this.galleryListEl = null;
|
|||
|
|
this.galleryIsMousingDown = false;
|
|||
|
|
this.galleryMouseDownClientX = 0;
|
|||
|
|
this.galleryTranslateX = 0;
|
|||
|
|
this.mouseDownTime = null;
|
|||
|
|
GalleryNavbarView.GALLERY_IMG_CACHE = new Map();
|
|||
|
|
this.initDefaultData();
|
|||
|
|
};
|
|||
|
|
this.getTargetImgContextHash = (targetImgEl, containerEl, imageSelector) => {
|
|||
|
|
let imgEl;
|
|||
|
|
let targetImgHash = null;
|
|||
|
|
let targetIdx = -1;
|
|||
|
|
const imgs = containerEl.querySelectorAll(imageSelector);
|
|||
|
|
// console.log('IMAGE_SELECTOR>>', imageSelector, imgs);
|
|||
|
|
const len = imgs.length;
|
|||
|
|
for (let i = 0; i < len; i++) {
|
|||
|
|
if ((imgEl = imgs[i])) {
|
|||
|
|
if ('1' == imgEl.getAttribute('data-oit-target')) {
|
|||
|
|
targetIdx = i;
|
|||
|
|
targetImgHash = md5Img(imgEl.alt, imgEl.src);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (0 > targetIdx)
|
|||
|
|
targetImgHash = md5Img(targetImgEl.alt, targetImgEl.src);
|
|||
|
|
let prevHash, nextHash;
|
|||
|
|
if (0 == targetIdx) {
|
|||
|
|
prevHash = null;
|
|||
|
|
nextHash = 1 < len ? md5Img(imgs[1].alt, imgs[1].src) : null;
|
|||
|
|
}
|
|||
|
|
else if (len - 1 == targetIdx) {
|
|||
|
|
prevHash = md5Img(imgs[targetIdx - 1].alt, imgs[targetIdx - 1].src);
|
|||
|
|
nextHash = null;
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
prevHash = md5Img(imgs[targetIdx - 1].alt, imgs[targetIdx - 1].src);
|
|||
|
|
nextHash = md5Img(imgs[targetIdx + 1].alt, imgs[targetIdx + 1].src);
|
|||
|
|
}
|
|||
|
|
return [prevHash, targetImgHash, nextHash];
|
|||
|
|
};
|
|||
|
|
this.activateImage = (liEl, imgEL) => {
|
|||
|
|
if (!liEl || 'LI' !== liEl.tagName)
|
|||
|
|
return;
|
|||
|
|
if (!imgEL) {
|
|||
|
|
const imgELList = liEl.getElementsByTagName('img');
|
|||
|
|
if (imgELList && 0 < imgELList.length) {
|
|||
|
|
imgEL = imgELList[0];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (imgEL) {
|
|||
|
|
const activeImg = this.mainContainerView.getActiveImg();
|
|||
|
|
this.mainContainerView.initDefaultData(activeImg, imgEL.style);
|
|||
|
|
this.mainContainerView.refreshImg(activeImg, imgEL.src, imgEL.alt || '', imgEL.dataset.index);
|
|||
|
|
}
|
|||
|
|
liEl.addClass('gallery-active');
|
|||
|
|
if (this.settings.galleryImgBorderActive) {
|
|||
|
|
liEl.addClass('img-border-active');
|
|||
|
|
liEl.style.setProperty('border-color', this.settings.galleryImgBorderActiveColor);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
this.deactivateImage = (liEl) => {
|
|||
|
|
if (!liEl)
|
|||
|
|
return;
|
|||
|
|
liEl.removeClass('gallery-active');
|
|||
|
|
if (liEl.hasClass('img-border-active')) {
|
|||
|
|
liEl.removeClass('img-border-active');
|
|||
|
|
liEl.style.removeProperty('border-color');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
this.clickGalleryImg = (event) => {
|
|||
|
|
const targetEl = event.target;
|
|||
|
|
if (!targetEl || 'IMG' !== targetEl.tagName)
|
|||
|
|
return;
|
|||
|
|
if (this.galleryListEl) {
|
|||
|
|
const liElList = this.galleryListEl.getElementsByClassName('gallery-active');
|
|||
|
|
for (let i = 0, len = liElList.length; i < len; i++) {
|
|||
|
|
this.deactivateImage(liElList[i]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.activateImage(targetEl.parentElement, targetEl);
|
|||
|
|
};
|
|||
|
|
/**
|
|||
|
|
* switch the image on the gallery navbar
|
|||
|
|
* @param next true: switch to the next image; false: switch to the previous image
|
|||
|
|
*/
|
|||
|
|
this.switchImage = (next) => {
|
|||
|
|
if (!this.state || !this.galleryListEl)
|
|||
|
|
return;
|
|||
|
|
const liElList = this.galleryListEl.getElementsByTagName('li');
|
|||
|
|
if (!liElList || 0 >= liElList.length)
|
|||
|
|
return;
|
|||
|
|
let liEl;
|
|||
|
|
let toSwitchIdx = -1;
|
|||
|
|
for (let i = 0, len = liElList.length; i < len; i++) {
|
|||
|
|
if (!(liEl = liElList[i]))
|
|||
|
|
continue;
|
|||
|
|
if (liEl.hasClass('gallery-active')) {
|
|||
|
|
toSwitchIdx = next ? (len <= (i + 1) ? 0 : i + 1) : (0 == i ? len - 1 : i - 1);
|
|||
|
|
this.deactivateImage(liEl);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (0 >= toSwitchIdx) {
|
|||
|
|
toSwitchIdx = 0;
|
|||
|
|
}
|
|||
|
|
this.activateImage(liElList[toSwitchIdx]);
|
|||
|
|
};
|
|||
|
|
this.mouseDownGallery = (event) => {
|
|||
|
|
// console.log('mouse Down Gallery...');
|
|||
|
|
event.preventDefault();
|
|||
|
|
event.stopPropagation();
|
|||
|
|
this.mouseDownTime = new Date().getTime();
|
|||
|
|
this.galleryIsMousingDown = true;
|
|||
|
|
this.galleryMouseDownClientX = event.clientX;
|
|||
|
|
};
|
|||
|
|
this.mouseMoveGallery = (event) => {
|
|||
|
|
// console.log('mouse Move Gallery...');
|
|||
|
|
event.preventDefault();
|
|||
|
|
event.stopPropagation();
|
|||
|
|
if (!this.galleryIsMousingDown)
|
|||
|
|
return;
|
|||
|
|
let moveDistance = event.clientX - this.galleryMouseDownClientX;
|
|||
|
|
if (4 > Math.abs(moveDistance))
|
|||
|
|
return;
|
|||
|
|
this.galleryMouseDownClientX = event.clientX;
|
|||
|
|
this.galleryTranslateX += moveDistance;
|
|||
|
|
const windowWidth = document.documentElement.clientWidth || document.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)
|
|||
|
|
this.galleryTranslateX = windowWidth - 50;
|
|||
|
|
if (0 > this.galleryTranslateX + imgLiWidth)
|
|||
|
|
this.galleryTranslateX = -imgLiWidth;
|
|||
|
|
this.galleryListEl.style.transform = 'translateX(' + this.galleryTranslateX + 'px)';
|
|||
|
|
};
|
|||
|
|
this.mouseUpGallery = (event) => {
|
|||
|
|
// console.log('mouse Up Gallery>>>', event.target);
|
|||
|
|
event.preventDefault();
|
|||
|
|
event.stopPropagation();
|
|||
|
|
this.galleryIsMousingDown = false;
|
|||
|
|
if (!this.mouseDownTime || this.CLICK_TIME > new Date().getTime() - this.mouseDownTime) {
|
|||
|
|
this.clickGalleryImg(event);
|
|||
|
|
}
|
|||
|
|
this.mouseDownTime = null;
|
|||
|
|
};
|
|||
|
|
this.mouseLeaveGallery = (event) => {
|
|||
|
|
// console.log('mouse Leave Gallery>>>', event.target);
|
|||
|
|
event.preventDefault();
|
|||
|
|
event.stopPropagation();
|
|||
|
|
this.galleryIsMousingDown = false;
|
|||
|
|
this.mouseDownTime = null;
|
|||
|
|
};
|
|||
|
|
this.getGalleryImgCache = (file) => {
|
|||
|
|
if (!file)
|
|||
|
|
return null;
|
|||
|
|
const md5File = this.md5File(file.path, file.stat.ctime);
|
|||
|
|
if (!md5File)
|
|||
|
|
return null;
|
|||
|
|
const galleryImgCache = GalleryNavbarView.GALLERY_IMG_CACHE.get(md5File);
|
|||
|
|
if (galleryImgCache && file.stat.mtime !== galleryImgCache.file.mtime) {
|
|||
|
|
GalleryNavbarView.GALLERY_IMG_CACHE.delete(md5File);
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
return galleryImgCache;
|
|||
|
|
};
|
|||
|
|
this.setGalleryImgCache = (galleryImg) => {
|
|||
|
|
const md5File = this.md5File(galleryImg.file.path, galleryImg.file.ctime);
|
|||
|
|
if (!md5File)
|
|||
|
|
return;
|
|||
|
|
this.trimGalleryImgCache();
|
|||
|
|
GalleryNavbarView.GALLERY_IMG_CACHE.set(md5File, galleryImg);
|
|||
|
|
};
|
|||
|
|
this.trimGalleryImgCache = () => {
|
|||
|
|
if (GalleryNavbarView.GALLERY_IMG_CACHE.size < this.CACHE_LIMIT)
|
|||
|
|
return;
|
|||
|
|
let earliestMtime, earliestKey;
|
|||
|
|
GalleryNavbarView.GALLERY_IMG_CACHE.forEach((value, key) => {
|
|||
|
|
if (!earliestMtime) {
|
|||
|
|
earliestMtime = value.mtime;
|
|||
|
|
earliestKey = key;
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
if (earliestMtime > value.mtime) {
|
|||
|
|
earliestMtime = value.mtime;
|
|||
|
|
earliestKey = key;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
if (earliestKey) {
|
|||
|
|
GalleryNavbarView.GALLERY_IMG_CACHE.delete(earliestKey);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
this.md5File = (path, ctime) => {
|
|||
|
|
if (!path || !ctime)
|
|||
|
|
return;
|
|||
|
|
return Md5.init(path + '_' + ctime);
|
|||
|
|
};
|
|||
|
|
this.mainContainerView = mainContainerView;
|
|||
|
|
this.plugin = plugin;
|
|||
|
|
this.settings = plugin.settings;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
GalleryNavbarView.GALLERY_IMG_CACHE = new Map();
|
|||
|
|
|
|||
|
|
class MainContainerView extends ContainerView {
|
|||
|
|
constructor(plugin, containerType) {
|
|||
|
|
super(plugin, containerType, 1);
|
|||
|
|
//region ================== Container View ========================
|
|||
|
|
this.initContainerViewDom = (containerEl) => {
|
|||
|
|
let imgCto;
|
|||
|
|
if (!this.imgInfoCto.oitContainerViewEl) {
|
|||
|
|
// init at first time
|
|||
|
|
// create: <div class="oit-main-container-view">
|
|||
|
|
containerEl.appendChild(this.imgInfoCto.oitContainerViewEl = createDiv('oit-main-container-view'));
|
|||
|
|
// <div class="oit-main-container-view"> <div class="img-container"/> </div>
|
|||
|
|
this.imgInfoCto.oitContainerViewEl.append(this.imgInfoCto.imgContainerEl = createDiv('img-container'));
|
|||
|
|
// <div class="img-container"> <img class="img-view" src="" alt=""> </div>
|
|||
|
|
this.updateImgViewElAndList(this.pinMaximum);
|
|||
|
|
// <div class="img-tip"></div>
|
|||
|
|
this.imgInfoCto.oitContainerViewEl.appendChild(this.imgInfoCto.imgTipEl = createDiv()); // img-tip
|
|||
|
|
this.imgInfoCto.imgTipEl.addClass('img-tip');
|
|||
|
|
this.imgInfoCto.imgTipEl.hidden = true; // hide 'img-tip'
|
|||
|
|
// <div class="img-footer"> ... <div>
|
|||
|
|
this.imgInfoCto.oitContainerViewEl.appendChild(this.imgInfoCto.imgFooterEl = createDiv()); // img-footer
|
|||
|
|
this.imgInfoCto.imgFooterEl.addClass('img-footer');
|
|||
|
|
// <div class="img-title"></div>
|
|||
|
|
this.imgInfoCto.imgFooterEl.appendChild(this.imgInfoCto.imgTitleEl = createDiv('img-title')); // img-title
|
|||
|
|
this.imgInfoCto.imgTitleEl.appendChild(this.imgInfoCto.imgTitleNameEl = createSpan('img-title-name'));
|
|||
|
|
this.imgInfoCto.imgTitleEl.appendChild(this.imgInfoCto.imgTitleIndexEl = createSpan('img-title-index'));
|
|||
|
|
// <ul class="img-toolbar">
|
|||
|
|
const imgToolbarUlEL = createEl('ul'); // img-toolbar
|
|||
|
|
imgToolbarUlEL.addClass('img-toolbar');
|
|||
|
|
this.imgInfoCto.imgFooterEl.appendChild(imgToolbarUlEL);
|
|||
|
|
let toolbarLi;
|
|||
|
|
for (const toolbar of TOOLBAR_CONF) {
|
|||
|
|
if (!toolbar.enableToolbarIcon)
|
|||
|
|
continue;
|
|||
|
|
imgToolbarUlEL.appendChild(toolbarLi = createEl('li'));
|
|||
|
|
toolbarLi.addClass(toolbar.class);
|
|||
|
|
toolbarLi.setAttribute('alt', toolbar.title);
|
|||
|
|
// @ts-ignore
|
|||
|
|
toolbarLi.setAttribute('title', t(toolbar.title));
|
|||
|
|
}
|
|||
|
|
// add event: for img-toolbar ul
|
|||
|
|
imgToolbarUlEL.addEventListener('click', this.clickImgToolbar);
|
|||
|
|
// <div class="img-player"> <img class='img-fullscreen' src=''> </div>
|
|||
|
|
this.imgInfoCto.oitContainerViewEl.appendChild(this.imgInfoCto.imgPlayerEl = createDiv('img-player')); // img-player for full screen mode
|
|||
|
|
this.imgInfoCto.imgPlayerEl.appendChild(this.imgInfoCto.imgPlayerImgViewEl = createEl('img'));
|
|||
|
|
this.imgInfoCto.imgPlayerImgViewEl.addClass('img-fullscreen');
|
|||
|
|
}
|
|||
|
|
imgCto = this.imgInfoCto.imgList[0];
|
|||
|
|
this.imgGlobalStatus.activeImg = imgCto;
|
|||
|
|
return imgCto;
|
|||
|
|
};
|
|||
|
|
this.openOitContainerView = (matchedImg) => {
|
|||
|
|
if (!this.imgInfoCto.oitContainerViewEl) {
|
|||
|
|
console.error('obsidian-image-toolkit: oit-*-container-view has not been initialized!');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
matchedImg.popup = true;
|
|||
|
|
this.imgGlobalStatus.popup = true;
|
|||
|
|
// display 'oit-main-container-view'
|
|||
|
|
this.imgInfoCto.oitContainerViewEl.style.setProperty('display', 'block');
|
|||
|
|
};
|
|||
|
|
this.closeContainerView = (event, activeImg) => {
|
|||
|
|
if (event) {
|
|||
|
|
const targetClassName = event.target.className;
|
|||
|
|
if ('img-container' != targetClassName && 'oit-main-container-view' != targetClassName)
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!activeImg && !(activeImg = this.imgGlobalStatus.activeImg))
|
|||
|
|
return;
|
|||
|
|
if (this.imgInfoCto.oitContainerViewEl) {
|
|||
|
|
this.imgInfoCto.oitContainerViewEl.style.setProperty('display', 'none'); // hide 'oit-main-container-view'
|
|||
|
|
this.renderImgTitle('', '');
|
|||
|
|
this.renderImgView(activeImg.imgViewEl, '', '');
|
|||
|
|
// remove events
|
|||
|
|
this.imgGlobalStatus.popup = false;
|
|||
|
|
activeImg.popup = false;
|
|||
|
|
activeImg.mtime = 0;
|
|||
|
|
this.addOrRemoveEvents(activeImg, false);
|
|||
|
|
}
|
|||
|
|
if (this.plugin.settings.galleryNavbarToggle && this.galleryNavbarView) {
|
|||
|
|
this.galleryNavbarView.closeGalleryNavbar();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
//endregion
|
|||
|
|
//region ================== Gallery Navbar ========================
|
|||
|
|
this.renderGalleryNavbar = () => {
|
|||
|
|
// <div class="gallery-navbar"> <ul class="gallery-list"> <li> <img src='' alt=''> </li> <li...> <ul> </div>
|
|||
|
|
if (!this.plugin.settings.galleryNavbarToggle)
|
|||
|
|
return;
|
|||
|
|
if (!this.galleryNavbarView) {
|
|||
|
|
this.galleryNavbarView = new GalleryNavbarView(this, this.plugin);
|
|||
|
|
}
|
|||
|
|
this.galleryNavbarView.renderGalleryImg(this.imgInfoCto.imgFooterEl);
|
|||
|
|
};
|
|||
|
|
this.removeGalleryNavbar = () => {
|
|||
|
|
if (!this.galleryNavbarView)
|
|||
|
|
return;
|
|||
|
|
this.galleryNavbarView.remove();
|
|||
|
|
this.galleryNavbarView = null;
|
|||
|
|
};
|
|||
|
|
//endregion
|
|||
|
|
this.renderImgTitle = (name, index) => {
|
|||
|
|
var _a, _b;
|
|||
|
|
if (undefined !== name && null !== name)
|
|||
|
|
(_a = this.imgInfoCto.imgTitleNameEl) === null || _a === void 0 ? void 0 : _a.setText(name);
|
|||
|
|
if (undefined !== index && null !== index)
|
|||
|
|
(_b = this.imgInfoCto.imgTitleIndexEl) === null || _b === void 0 ? void 0 : _b.setText(' ' + index);
|
|||
|
|
};
|
|||
|
|
this.switchImageOnGalleryNavBar = (event, next) => {
|
|||
|
|
var _a;
|
|||
|
|
if (!this.checkHotkeySettings(event, this.plugin.settings.switchTheImageHotkey))
|
|||
|
|
return;
|
|||
|
|
(_a = this.galleryNavbarView) === null || _a === void 0 ? void 0 : _a.switchImage(next);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
setActiveImgForMouseEvent(imgCto) {
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class MenuView {
|
|||
|
|
constructor(pinContainerView) {
|
|||
|
|
this.init = () => {
|
|||
|
|
if (this.menu)
|
|||
|
|
return;
|
|||
|
|
this.menu = new obsidian.Menu();
|
|||
|
|
for (const itemConf of TOOLBAR_CONF) {
|
|||
|
|
if (!itemConf.enableMenu)
|
|||
|
|
continue;
|
|||
|
|
if (SEPARATOR_SYMBOL === itemConf.title) {
|
|||
|
|
this.menu.addSeparator();
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
this.menu.addItem(item => {
|
|||
|
|
if (itemConf.icon)
|
|||
|
|
item.setIcon(itemConf.icon);
|
|||
|
|
// @ts-ignore
|
|||
|
|
item.setTitle(t(itemConf.title))
|
|||
|
|
.onClick(() => {
|
|||
|
|
this.pinContainerView.clickImgToolbar(null, itemConf.class, MenuView.activeImg);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
this.show = (event, activeImg) => {
|
|||
|
|
MenuView.activeImg = activeImg;
|
|||
|
|
this.init();
|
|||
|
|
this.menu.showAtPosition({ x: event.clientX, y: event.clientY });
|
|||
|
|
};
|
|||
|
|
this.pinContainerView = pinContainerView;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* PinContainerView: Pin an image on the top
|
|||
|
|
* @Support: move an image by mouse; close an image by Esc
|
|||
|
|
* @Nonsupport: move an image by keyboard; display gallery navbar
|
|||
|
|
*/
|
|||
|
|
class PinContainerView extends ContainerView {
|
|||
|
|
constructor(plugin, containerType) {
|
|||
|
|
super(plugin, containerType, plugin.settings.pinMaximum);
|
|||
|
|
//region ================== Container View ========================
|
|||
|
|
this.initContainerViewDom = (containerEl) => {
|
|||
|
|
/*
|
|||
|
|
<div class="oit-pin-container-view">
|
|||
|
|
<div class="img-container">
|
|||
|
|
<img class="img-view" data-index='0' src="" alt="">
|
|||
|
|
<img class="img-view" data-index='1' src="" alt="">
|
|||
|
|
...
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
*/
|
|||
|
|
if (!this.imgInfoCto.oitContainerViewEl) { // init at first time
|
|||
|
|
// create: <div class="oit-pin-container-view">
|
|||
|
|
containerEl.appendChild(this.imgInfoCto.oitContainerViewEl = createDiv('oit-pin-container-view'));
|
|||
|
|
// <div class="oit-pin-container-view"> <div class="img-container"/> </div>
|
|||
|
|
this.imgInfoCto.oitContainerViewEl.append(this.imgInfoCto.imgContainerEl = createDiv('img-container'));
|
|||
|
|
// <div class="img-tip"></div>
|
|||
|
|
this.imgInfoCto.oitContainerViewEl.appendChild(this.imgInfoCto.imgTipEl = createDiv('img-tip')); // img-tip
|
|||
|
|
this.imgInfoCto.imgTipEl.hidden = true; // hide 'img-tip'
|
|||
|
|
// <div class="img-player"> <img class='img-fullscreen' src=''> </div>
|
|||
|
|
this.imgInfoCto.oitContainerViewEl.appendChild(this.imgInfoCto.imgPlayerEl = createDiv('img-player')); // img-player for full screen mode
|
|||
|
|
this.imgInfoCto.imgPlayerEl.appendChild(this.imgInfoCto.imgPlayerImgViewEl = createEl('img'));
|
|||
|
|
this.imgInfoCto.imgPlayerImgViewEl.addClass('img-fullscreen');
|
|||
|
|
}
|
|||
|
|
// <div class="img-container"> <img class="img-view" src="" alt=""> </div>
|
|||
|
|
this.updateImgViewElAndList(this.pinMaximum);
|
|||
|
|
return this.getMatchedImg();
|
|||
|
|
};
|
|||
|
|
this.openOitContainerView = (matchedImg) => {
|
|||
|
|
if (!this.imgInfoCto.oitContainerViewEl) {
|
|||
|
|
console.error('obsidian-image-toolkit: oit-*-container-view has not been initialized!');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
matchedImg.popup = true;
|
|||
|
|
if (!this.imgGlobalStatus.popup) {
|
|||
|
|
this.imgGlobalStatus.popup = true;
|
|||
|
|
this.imgGlobalStatus.activeImgZIndex = 0;
|
|||
|
|
this.imgInfoCto.imgList.forEach(value => {
|
|||
|
|
value.zIndex = 0;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
matchedImg.zIndex = (++this.imgGlobalStatus.activeImgZIndex);
|
|||
|
|
}
|
|||
|
|
matchedImg.imgViewEl.style.setProperty('z-index', matchedImg.zIndex + '');
|
|||
|
|
// display 'oit-pin-container-view'
|
|||
|
|
this.imgInfoCto.oitContainerViewEl.style.setProperty('display', 'block');
|
|||
|
|
};
|
|||
|
|
/**
|
|||
|
|
* hide container view
|
|||
|
|
* @param event not null: click event; null: keyboard event (Esc)
|
|||
|
|
* @param activeImg
|
|||
|
|
*/
|
|||
|
|
this.closeContainerView = (event, activeImg) => {
|
|||
|
|
if (event && !activeImg) {
|
|||
|
|
// PinContainerView doesn't need click event to hide container for now
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!this.imgInfoCto.oitContainerViewEl)
|
|||
|
|
return;
|
|||
|
|
if (!activeImg && !(activeImg = this.imgGlobalStatus.activeImg))
|
|||
|
|
return;
|
|||
|
|
// console.log('closeContainerView', event, activeImg)
|
|||
|
|
this.renderImgView(activeImg.imgViewEl, '', '');
|
|||
|
|
activeImg.popup = false;
|
|||
|
|
activeImg.mtime = 0;
|
|||
|
|
let globalPopupFlag = false;
|
|||
|
|
for (const imgCto of this.imgInfoCto.imgList) {
|
|||
|
|
if (imgCto.popup) {
|
|||
|
|
globalPopupFlag = true;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (!globalPopupFlag) {
|
|||
|
|
this.imgInfoCto.oitContainerViewEl.style.setProperty('display', 'none'); // hide 'oit-pin-container-view'
|
|||
|
|
this.imgGlobalStatus.activeImgZIndex = 0;
|
|||
|
|
this.imgInfoCto.imgList.forEach(value => {
|
|||
|
|
value.zIndex = 0;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
this.imgGlobalStatus.popup = globalPopupFlag;
|
|||
|
|
this.addOrRemoveEvents(activeImg, false);
|
|||
|
|
};
|
|||
|
|
//endregion
|
|||
|
|
this.setActiveImgZIndex = (activeImg) => {
|
|||
|
|
var _a;
|
|||
|
|
let isUpdate = false;
|
|||
|
|
for (const imgCto of this.imgInfoCto.imgList) {
|
|||
|
|
if (activeImg.index !== imgCto.index && activeImg.zIndex <= imgCto.zIndex) {
|
|||
|
|
isUpdate = true;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (isUpdate) {
|
|||
|
|
activeImg.zIndex = (++this.imgGlobalStatus.activeImgZIndex);
|
|||
|
|
(_a = activeImg.imgViewEl) === null || _a === void 0 ? void 0 : _a.style.setProperty("z-index", activeImg.zIndex + '');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
this.setMenuView(new MenuView(this));
|
|||
|
|
}
|
|||
|
|
setActiveImgForMouseEvent(imgCto) {
|
|||
|
|
this.imgGlobalStatus.activeImg = imgCto;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class ImageToolkitPlugin extends obsidian.Plugin {
|
|||
|
|
constructor() {
|
|||
|
|
super(...arguments);
|
|||
|
|
this.imgSelector = ``;
|
|||
|
|
this.addIcons = () => {
|
|||
|
|
for (const icon of ICONS) {
|
|||
|
|
obsidian.addIcon(icon.id, icon.svg);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
this.initContainerView = (pinMode) => {
|
|||
|
|
this.containerView = pinMode ?
|
|||
|
|
new PinContainerView(this, "PIN") :
|
|||
|
|
new MainContainerView(this, "MAIN");
|
|||
|
|
};
|
|||
|
|
this.togglePinMode = (pinMode) => {
|
|||
|
|
this.containerView.removeOitContainerView();
|
|||
|
|
this.initContainerView(pinMode);
|
|||
|
|
};
|
|||
|
|
this.clickImage = (event) => {
|
|||
|
|
const targetEl = event.target;
|
|||
|
|
if (!targetEl || 'IMG' !== targetEl.tagName
|
|||
|
|
|| !this.containerView.checkHotkeySettings(event, this.settings.viewTriggerHotkey))
|
|||
|
|
return;
|
|||
|
|
this.containerView.renderContainerView(targetEl);
|
|||
|
|
};
|
|||
|
|
this.mouseoverImg = (event) => {
|
|||
|
|
const targetEl = event.target;
|
|||
|
|
if (!targetEl || 'IMG' !== targetEl.tagName)
|
|||
|
|
return;
|
|||
|
|
// console.log('mouseoverImg......');
|
|||
|
|
const defaultCursor = targetEl.getAttribute('data-oit-default-cursor');
|
|||
|
|
if (null === defaultCursor) {
|
|||
|
|
targetEl.setAttribute('data-oit-default-cursor', targetEl.style.cursor || '');
|
|||
|
|
}
|
|||
|
|
targetEl.style.cursor = 'zoom-in';
|
|||
|
|
};
|
|||
|
|
this.mouseoutImg = (event) => {
|
|||
|
|
const targetEl = event.target;
|
|||
|
|
// console.log('mouseoutImg....');
|
|||
|
|
if (!targetEl || 'IMG' !== targetEl.tagName)
|
|||
|
|
return;
|
|||
|
|
targetEl.style.cursor = targetEl.getAttribute('data-oit-default-cursor');
|
|||
|
|
};
|
|||
|
|
this.toggleViewImage = () => {
|
|||
|
|
const viewImageEditor = this.settings.viewImageEditor; // .workspace-leaf-content[data-type='markdown'] img,.workspace-leaf-content[data-type='image'] img
|
|||
|
|
const viewImageInCPB = this.settings.viewImageInCPB; // .community-plugin-readme img
|
|||
|
|
const viewImageWithALink = this.settings.viewImageWithALink; // false: ... img:not(a img)
|
|||
|
|
const viewImageOther = this.settings.viewImageOther; // #sr-flashcard-view img
|
|||
|
|
if (this.imgSelector) {
|
|||
|
|
document.off('click', this.imgSelector, this.clickImage);
|
|||
|
|
document.off('mouseover', this.imgSelector, this.mouseoverImg);
|
|||
|
|
document.off('mouseout', this.imgSelector, this.mouseoutImg);
|
|||
|
|
}
|
|||
|
|
if (!viewImageOther && !viewImageEditor && !viewImageInCPB && !viewImageWithALink) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
let selector = ``;
|
|||
|
|
if (viewImageEditor) {
|
|||
|
|
selector += (viewImageWithALink ? VIEW_IMG_SELECTOR.EDITOR_AREAS : VIEW_IMG_SELECTOR.EDITOR_AREAS_NO_LINK);
|
|||
|
|
}
|
|||
|
|
if (viewImageInCPB) {
|
|||
|
|
selector += (1 < selector.length ? `,` : ``) + (viewImageWithALink ? VIEW_IMG_SELECTOR.CPB : VIEW_IMG_SELECTOR.CPB_NO_LINK);
|
|||
|
|
}
|
|||
|
|
if (viewImageOther) {
|
|||
|
|
selector += (1 < selector.length ? `,` : ``) + (viewImageWithALink ? VIEW_IMG_SELECTOR.OTHER : VIEW_IMG_SELECTOR.OTHER_NO_LINK);
|
|||
|
|
}
|
|||
|
|
if (selector) {
|
|||
|
|
// console.log('selector: ', selector);
|
|||
|
|
this.imgSelector = selector;
|
|||
|
|
document.on('click', this.imgSelector, this.clickImage);
|
|||
|
|
document.on('mouseover', this.imgSelector, this.mouseoverImg);
|
|||
|
|
document.on('mouseout', this.imgSelector, this.mouseoutImg);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
onload() {
|
|||
|
|
return __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
console.log('loading ' + this.manifest.id + ' plugin v' + this.manifest.version + ' ...');
|
|||
|
|
yield this.loadSettings();
|
|||
|
|
// plugin settings
|
|||
|
|
this.addSettingTab(new ImageToolkitSettingTab(this.app, this));
|
|||
|
|
// this.registerCommands();
|
|||
|
|
this.initContainerView(this.settings.pinMode);
|
|||
|
|
this.toggleViewImage();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
onunload() {
|
|||
|
|
console.log('unloading obsidian-image-toolkit plugin...');
|
|||
|
|
this.containerView.removeOitContainerView();
|
|||
|
|
this.containerView = null;
|
|||
|
|
document.off('click', this.imgSelector, this.clickImage);
|
|||
|
|
document.off('mouseover', this.imgSelector, this.mouseoverImg);
|
|||
|
|
document.off('mouseout', this.imgSelector, this.mouseoutImg);
|
|||
|
|
}
|
|||
|
|
loadSettings() {
|
|||
|
|
return __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
this.settings = Object.assign({}, DEFAULT_SETTINGS, yield this.loadData());
|
|||
|
|
this.addIcons();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
saveSettings() {
|
|||
|
|
return __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
yield this.saveData(this.settings);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
registerCommands() {
|
|||
|
|
return __awaiter(this, void 0, void 0, function* () {
|
|||
|
|
/* this.addCommand({
|
|||
|
|
"id": "oit-move-up-image",
|
|||
|
|
"name": "move up the image",
|
|||
|
|
hotkeys: [{ modifiers: ["Ctrl"], key: "ArrowUp" }],
|
|||
|
|
checkCallback: (checking: boolean) => {
|
|||
|
|
if (checking) return false;
|
|||
|
|
this.containerView.moveImgViewByHotkey('UP');
|
|||
|
|
},
|
|||
|
|
}); */
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
module.exports = ImageToolkitPlugin;
|
|||
|
|
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi5qcyIsInNvdXJjZXMiOlsibm9kZV9tb2R1bGVzL3RzbGliL3RzbGliLmVzNi5qcyIsInNyYy9sYW5nL2xvY2FsZS9hci50cyIsInNyYy9sYW5nL2xvY2FsZS9jei50cyIsInNyYy9sYW5nL2xvY2FsZS9kYS50cyIsInNyYy9sYW5nL2xvY2FsZS9kZS50cyIsInNyYy9sYW5nL2xvY2FsZS9lbi50cyIsInNyYy9sYW5nL2xvY2FsZS9lbi1nYi50cyIsInNyYy9sYW5nL2xvY2FsZS9lcy50cyIsInNyYy9sYW5nL2xvY2FsZS9mci50cyIsInNyYy9sYW5nL2xvY2FsZS9oaS50cyIsInNyYy9sYW5nL2xvY2FsZS9pZC50cyIsInNyYy9sYW5nL2xvY2FsZS9pdC50cyIsInNyYy9sYW5nL2xvY2FsZS9qYS50cyIsInNyYy9sYW5nL2xvY2FsZS9rby50cyIsInNyYy9sYW5nL2xvY2FsZS9ubC50cyIsInNyYy9sYW5nL2xvY2FsZS9uby50cyIsInNyYy9sYW5nL2xvY2FsZS9wbC50cyIsInNyYy9sYW5nL2xvY2FsZS9wdC50cyIsInNyYy9sYW5nL2xvY2FsZS9wdC1ici50cyIsInNyYy9sYW5nL2xvY2FsZS9yby50cyIsInNyYy9sYW5nL2xvY2FsZS9ydS50cyIsInNyYy9sYW5nL2xvY2FsZS90ci50cyIsInNyYy9sYW5nL2xvY2FsZS96aC1jbi50cyIsInNyYy9sYW5nL2xvY2FsZS96aC10dy50cyIsInNyYy9sYW5nL2hlbHBlcnMudHMiLCJzcmMvY29uZi9jb25zdGFudHMudHMiLCJub2RlX21vZHVsZXMvQHNpbW9ud2VwL3BpY2tyL2Rpc3QvcGlja3IubWluLmpzIiwic3JjL2NvbmYvc2V0dGluZ3MudHMiLCJzcmMvdG8vaW1nVG8udHMiLCJzcmMvdXRpbC9pbWdVdGlsLnRzIiwic3JjL3VpL2NvbnRhaW5lclZpZXcudHMiLCJub2RlX21vZHVsZXMvbWQ1LXR5cGVzY3JpcHQvZGlzdC9pbmRleC5qcyIsInNyYy90by9jb21tb25Uby50cyIsInNyYy90by9nYWxsZXJ5TmF2YmFyVG8udHMiLCJzcmMvdXRpbC9tYXJrZG93UGFyc2UudHMiLCJzcmMvdWkvZ2FsbGVyeU5hdmJhclZpZXcudHMiLCJzcmMvdWkvbWFpbkNvbnRhaW5lclZpZXcudHMiLCJzcmMvdWkvbWVudVZpZXcudHMiLCJzcmMvdWkvcGluQ29udGFpbmVyVmlldy50cyIsInNyYy9tYWluLnRzIl0sInNvdXJjZXNDb250ZW50IjpudWxsLCJuYW1lcyI6WyJtb21lbnQiLCJQbHVnaW5TZXR0aW5nVGFiIiwiU2V0dGluZyIsIk5vdGljZSIsIk1hcmtkb3duVmlldyIsIk1lbnUiLCJQbHVnaW4iLCJhZGRJY29uIl0sIm1hcHBpbmdzIjoiOzs7O0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQXVEQTtBQUNPLFNBQVMsU0FBUyxDQUFDLE9BQU8sRUFBRSxVQUFVLEVBQUUsQ0FBQyxFQUFFLFNBQVMsRUFBRTtBQUM3RCxJQUFJLFNBQVMsS0FBSyxDQUFDLEtBQUssRUFBRSxFQUFFLE9BQU8sS0FBSyxZQUFZLENBQUMsR0FBRyxLQUFLLEdBQUcsSUFBSSxDQUFDLENBQUMsVUFBVSxPQUFPLEVBQUUsRUFBRSxPQUFPLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsRUFBRTtBQUNoSCxJQUFJLE9BQU8sS0FBSyxDQUFDLEtBQUssQ0FBQyxHQUFHLE9BQU8sQ0FBQyxFQUFFLFVBQVUsT0FBTyxFQUFFLE1BQU0sRUFBRTtBQUMvRCxRQUFRLFNBQVMsU0FBUyxDQUFDLEtBQUssRUFBRSxFQUFFLElBQUksRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxPQUFPLENBQUMsRUFBRSxFQUFFLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUU7QUFDbkcsUUFBUSxTQUFTLFFBQVEsQ0FBQyxLQUFLLEVBQUUsRUFBRSxJQUFJLEVBQUUsSUFBSSxDQUFDLFNBQVMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxPQUFPLENBQUMsRUFBRSxFQUFFLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUU7QUFDdEcsUUFBUSxTQUFTLElBQUksQ0FBQyxNQUFNLEVBQUUsRUFBRSxNQUFNLENBQUMsSUFBSSxHQUFHLE9BQU8sQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQyxJQUFJLENBQUMsU0FBUyxFQUFFLFFBQVEsQ0FBQyxDQUFDLEVBQUU7QUFDdEgsUUFBUSxJQUFJLENBQUMsQ0FBQyxTQUFTLEdBQUcsU0FBUyxDQUFDLEtBQUssQ0FBQyxPQUFPLEVBQUUsVUFBVSxJQUFJLEVBQUUsQ0FBQyxFQUFFLElBQUksRUFBRSxDQUFDLENBQUM7QUFDOUUsS0FBSyxDQUFDLENBQUM7QUFDUDs7QUM3RUE7QUFFQSxTQUFlLEVBQUU7O0FDRmpCO0FBRUEsU0FBZSxFQUFFOztBQ0ZqQjtBQUVBLFNBQWUsRUFBRTs7QUNGakI7QUFFQSxTQUFlLEVBQUU7O0FDRmpCO0FBRUEsU0FBZTs7SUFHWCw0QkFBNEIsRUFBRSx3QkFBd0I7O0lBR3RELHFCQUFxQixFQUFFLHdCQUF3QjtJQUMvQyxzQkFBc0IsRUFBRSxrQ0FBa0M7SUFDMUQsc0JBQXNCLEVBQUUsc0ZBQXNGO0lBQzlHLHNCQUFzQixFQUFFLDRDQUE0QztJQUNwRSxzQkFBc0IsRUFBRSxnRkFBZ0Y7O0lBRXhHLHNCQUFzQixFQUFFLDBEQUEwRDtJQUNsRixzQkFBc0IsRUFBRSw4RkFBOEY7SUFDdEgsMkJBQTJCLEVBQUUscUNBQXFDO0lBQ2xFLDJCQUEyQixFQUFFLGtPQUFrTztJQUMvUCxxQkFBcUIsRUFBRSxvREFBb0Q7SUFDM0UscUJBQXFCLEVBQUUsZ0ZBQWdGOztJQUd2RyxpQkFBaUIsRUFBRSxvQkFBb0I7SUFDdkMsYUFBYSxFQUFFLGlCQUFpQjtJQUNoQyxhQUFhLEVBQUUsMkpBQTJKO0lBQzFLLGdCQUFnQixFQUFFLCtCQUErQjtJQUNqRCxjQUFjLEVBQUUsWUFBWTtJQUM1QixjQUFjLEVBQUUsc0hBQXNIOztJQUd0SSxxQkFBcUIsRUFBRSx1QkFBdUI7SUFDOUMscUJBQXFCLEVBQUUsbUNBQW1DO0lBQzFELHFCQUFxQixFQUFFLCtIQUErSDtJQUN0SixxQkFBcUIsRUFBRSxpQ0FBaUM7SUFDeEQscUJBQXFCLEVBQUUscUZBQXFGO0lBQzVHLHlCQUF5QixFQUFFLDBCQUEwQjs7SUFFckQsR0FBRyxFQUFFLEtBQUs7SUFDVixJQUFJLEVBQUUsTUFBTTtJQUNaLE9BQU8sRUFBRSxTQUFTO0lBQ2xCLDhCQUE4QixFQUFFLHNHQUFzRzs7SUFHdEkscUJBQXFCLEV
|