Skip to content

Commit

Permalink
support to view images on a new window
Browse files Browse the repository at this point in the history
  • Loading branch information
sissilab committed Aug 19, 2023
1 parent fbc1b13 commit 995dd2d
Show file tree
Hide file tree
Showing 15 changed files with 1,024 additions and 508 deletions.
26 changes: 22 additions & 4 deletions src/conf/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,29 @@ export enum ViewMode {
Pin = 'Pin',
}

export const DEFAULT_VIEW_MODE: ViewMode = ViewMode.Pin;
export const DEFAULT_VIEW_MODE: ViewMode = ViewMode.Normal;

export const OIT_CLASS = {
CONTAINER_ROOT: 'oit',
CONTAINER_NORMAL: 'oit-normal',
CONTAINER_PIN: 'oit-pin',

// the place for storing images
IMG_CONTAINER: 'oit-img-container',
IMG_VIEW: 'oit-img-view',

IMG_TTP: 'oit-img-tip',

IMG_FOOTER: 'oit-img-footer',
IMG_TITLE: 'oit-img-title',
IMG_TITLE_NAME: 'oit-img-title-name',
IMG_TITLE_INDEX: 'oit-img-title-index',

IMG_TOOLBAR: 'oit-img-toolbar',

IMG_PLAYER: 'img-player',
IMG_FULLSCREEN: 'img-fullscreen',

export enum ContainerViewClass {
Normal = 'oit-normal-container-view',
Pin = 'oit-pin-container-view'
}

export const ZOOM_FACTOR = 0.8;
Expand Down
216 changes: 114 additions & 102 deletions src/conf/settings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ import {
IMG_FULL_SCREEN_MODE,
MODIFIER_HOTKEYS,
MOVE_THE_IMAGE,
SWITCH_THE_IMAGE, TOOLBAR_CONF, ViewMode
SWITCH_THE_IMAGE,
TOOLBAR_CONF,
ViewMode
} from './constants';
import Pickr from '@simonwep/pickr';
import {SettingsIto} from "../model/settings.to";
Expand All @@ -26,7 +28,7 @@ export const DEFAULT_SETTINGS: SettingsIto = {
viewImageWithLink: true,
viewImageOther: true,

pinMode: false,
// pinMode: false,
pinMaximum: 3,
pinCoverMode: true, // cover the earliest image which is being popped up

Expand Down Expand Up @@ -70,103 +72,11 @@ export class ImageToolkitSettingTab extends PluginSettingTab {
// Common Settings:
this.displayCommonSettings(containerEl);

// View Trigger Settings:
this.displayViewTriggerSettings(containerEl);

//region >>> VIEW_TRIGGER_SETTINGS
containerEl.createEl('h3', {text: t("VIEW_TRIGGER_SETTINGS")});

new Setting(containerEl)
.setName(t("VIEW_IMAGE_IN_EDITOR_NAME"))
.setDesc(t("VIEW_IMAGE_IN_EDITOR_DESC"))
.addToggle(toggle => toggle
.setValue(this.plugin.settings.viewImageInEditor)
.onChange(async (value) => {
this.plugin.settings.viewImageInEditor = value;
this.plugin.toggleViewImage();
await this.plugin.saveSettings();
}));

new 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(async (value) => {
this.plugin.settings.viewImageInCPB = value;
this.plugin.toggleViewImage();
await this.plugin.saveSettings();
}));

new Setting(containerEl)
.setName(t("VIEW_IMAGE_WITH_A_LINK_NAME"))
.setDesc(t("VIEW_IMAGE_WITH_A_LINK_DESC"))
.addToggle(toggle => toggle
.setValue(this.plugin.settings.viewImageWithLink)
.onChange(async (value) => {
this.plugin.settings.viewImageWithLink = value;
this.plugin.toggleViewImage();
await this.plugin.saveSettings();
}));

new Setting(containerEl)
.setName(t("VIEW_IMAGE_OTHER_NAME"))
.setDesc(t("VIEW_IMAGE_OTHER_DESC"))
.addToggle(toggle => toggle
.setValue(this.plugin.settings.viewImageOther)
.onChange(async (value) => {
this.plugin.settings.viewImageOther = value;
this.plugin.toggleViewImage();
await this.plugin.saveSettings();
}));
//endregion

//region >>> PIN_MODE_SETTINGS
let pinMaximumSetting: Setting, pinCoverSetting: Setting;

containerEl.createEl('h3', {text: t("PIN_MODE_SETTINGS")});

new Setting(containerEl)
.setName(t("PIN_MODE_NAME"))
.setDesc(t("PIN_MODE_DESC"))
.addToggle(toggle => toggle
.setValue(this.plugin.settings.pinMode)
.onChange(async (value) => {
this.plugin.settings.pinMode = value;
this.switchSettingsDisabled(!value, pinMaximumSetting, pinCoverSetting);
//this.plugin.togglePinMode(value);
await this.plugin.saveSettings();
}));

let pinMaximumScaleText: HTMLDivElement;
pinMaximumSetting = new Setting(containerEl)
.setName(t("PIN_MAXIMUM_NAME"))
.addSlider(slider => slider
.setLimits(1, 5, 1)
.setValue(this.plugin.settings.pinMaximum)
.onChange(async (value) => {
pinMaximumScaleText.innerText = " " + value.toString();
this.plugin.settings.pinMaximum = value;
this.plugin.containerView?.setPinMaximum(value);
this.plugin.saveSettings();
}));
pinMaximumSetting.settingEl.createDiv('', (el) => {
pinMaximumScaleText = el;
el.style.minWidth = "2.3em";
el.style.textAlign = "right";
el.innerText = " " + this.plugin.settings.pinMaximum.toString();
});

pinCoverSetting = new Setting(containerEl)
.setName(t("PIN_COVER_NAME"))
.setDesc(t("PIN_COVER_DESC"))
.addToggle(toggle => toggle
.setValue(this.plugin.settings.pinCoverMode)
.onChange(async (value) => {
this.plugin.settings.pinCoverMode = value;
await this.plugin.saveSettings();
}));

this.switchSettingsDisabled(!this.plugin.settings.pinMode, pinMaximumSetting, pinCoverSetting);
//endregion
// Pin Mode Settings:
this.displayPinModeSettings(containerEl);

//region >>> VIEW_DETAILS_SETTINGS
containerEl.createEl('h3', {text: t("VIEW_DETAILS_SETTINGS")});
Expand Down Expand Up @@ -393,7 +303,6 @@ export class ImageToolkitSettingTab extends PluginSettingTab {
});
});
//endregion

}

private displayCommonSettings(containerEl: HTMLElement) {
Expand All @@ -408,12 +317,112 @@ export class ImageToolkitSettingTab extends PluginSettingTab {
}
dropdown.setValue(this.plugin.settings.viewMode);
dropdown.onChange(async (option: ViewMode) => {
this.plugin.settings.viewMode = option;
await this.plugin.saveSettings();
await this.plugin.switchViewMode(option);
});
});
}

private displayViewTriggerSettings(containerEl: HTMLElement) {
containerEl.createEl('h3', {text: t("VIEW_TRIGGER_SETTINGS")});

new Setting(containerEl)
.setName(t("VIEW_IMAGE_IN_EDITOR_NAME"))
.setDesc(t("VIEW_IMAGE_IN_EDITOR_DESC"))
.addToggle(toggle => toggle
.setValue(this.plugin.settings.viewImageInEditor)
.onChange(async (value) => {
this.plugin.settings.viewImageInEditor = value;
this.plugin.refreshViewTrigger();
await this.plugin.saveSettings();
}));

new 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(async (value) => {
this.plugin.settings.viewImageInCPB = value;
this.plugin.refreshViewTrigger();
await this.plugin.saveSettings();
}));

new Setting(containerEl)
.setName(t("VIEW_IMAGE_WITH_A_LINK_NAME"))
.setDesc(t("VIEW_IMAGE_WITH_A_LINK_DESC"))
.addToggle(toggle => toggle
.setValue(this.plugin.settings.viewImageWithLink)
.onChange(async (value) => {
this.plugin.settings.viewImageWithLink = value;
this.plugin.refreshViewTrigger();
await this.plugin.saveSettings();
}));

new Setting(containerEl)
.setName(t("VIEW_IMAGE_OTHER_NAME"))
.setDesc(t("VIEW_IMAGE_OTHER_DESC"))
.addToggle(toggle => toggle
.setValue(this.plugin.settings.viewImageOther)
.onChange(async (value) => {
this.plugin.settings.viewImageOther = value;
this.plugin.refreshViewTrigger();
await this.plugin.saveSettings();
}));
}

private displayPinModeSettings(containerEl: HTMLElement) {
//region >>> PIN_MODE_SETTINGS
let pinMaximumSetting: Setting,
pinCoverSetting: Setting;

containerEl.createEl('h3', {text: t("PIN_MODE_SETTINGS")});

/*new Setting(containerEl)
.setName(t("PIN_MODE_NAME"))
.setDesc(t("PIN_MODE_DESC"))
.addToggle(toggle => toggle
.setValue(this.plugin.settings.pinMode)
.onChange(async (value) => {
this.plugin.settings.pinMode = value;
this.switchSettingsDisabled(!value, pinMaximumSetting, pinCoverSetting);
//this.plugin.togglePinMode(value);
await this.plugin.saveSettings();
}));*/

let pinMaximumScaleText: HTMLDivElement;
pinMaximumSetting = new Setting(containerEl)
.setName(t("PIN_MAXIMUM_NAME"))
.addSlider(slider => slider
.setLimits(1, 5, 1)
.setValue(this.plugin.settings.pinMaximum)
.onChange(async (value) => {
pinMaximumScaleText.innerText = " " + value.toString();
this.plugin.settings.pinMaximum = value;
// this.plugin.containerView?.setPinMaximum(value);
this.plugin.saveSettings();
}));
pinMaximumSetting.settingEl.createDiv('', (el) => {
pinMaximumScaleText = el;
el.style.minWidth = "2.3em";
el.style.textAlign = "right";
el.innerText = " " + this.plugin.settings.pinMaximum.toString();
});

pinCoverSetting = new Setting(containerEl)
.setName(t("PIN_COVER_NAME"))
.setDesc(t("PIN_COVER_DESC"))
.addToggle(toggle => toggle
.setValue(this.plugin.settings.pinCoverMode)
.onChange(async (value) => {
this.plugin.settings.pinCoverMode = value;
await this.plugin.saveSettings();
}));

//this.switchSettingsDisabled(!this.plugin.settings.pinMode, pinMaximumSetting, pinCoverSetting);
//endregion
}


switchSettingsDisabled(disabled: boolean, ...settings: Setting[]) {
for (const setting of settings) {
setting?.setDisabled(disabled)
Expand Down Expand Up @@ -497,7 +506,10 @@ export class ImageToolkitSettingTab extends PluginSettingTab {
this.plugin.settings.galleryImgBorderActiveColor = savedColor;
} else if ('IMG_VIEW_BACKGROUND_COLOR_NAME' === name) {
this.plugin.settings.imgViewBackgroundColor = savedColor;
this.plugin.containerView?.setImgViewDefaultBackgroundForImgList();
// this.plugin.containerView?.setImgViewDefaultBackgroundForImgList();
this.plugin.getAllContainerViews().forEach(container => {
container.setImgViewDefaultBackgroundForImgList();
});
}
this.plugin.saveSettings();
}
Expand Down
53 changes: 53 additions & 0 deletions src/factory/containerFactory.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import {ContainerView} from "../ui/container/container.view";

export class ContainerFactory {

// main window container
private mainContainer: ContainerView;

// popout window containers: hash -> ContainerView
private popoutContainers: Map<string, ContainerView> = new Map<string, ContainerView>();


public setMainContainer = (container: ContainerView): void => {
this.mainContainer = container;
}
public getMainContainer = (): ContainerView => {
return this.mainContainer;
}

public setPopoutContainer = (key: string, container: ContainerView): void => {
this.popoutContainers.set(key, container);
}
public getPopoutContainer = (key: string): ContainerView => {
return this.popoutContainers.get(key);
}
public getPopoutContainers = (): Map<string, ContainerView> => {
return this.popoutContainers;
}

public getContainer = (targetEl: HTMLImageElement): ContainerView => {
const bodyEl = targetEl?.matchParent('body');
if (!bodyEl) return null;
const oitEventKey = bodyEl.getAttribute('data-oit-event');
if (oitEventKey) {
//popout window
return this.getPopoutContainer(oitEventKey);
}
return this.mainContainer;
}

public getAllContainers = (): ContainerView[] => {
let allContainerViews = [this.mainContainer];
for (let value of this.popoutContainers.values()) {
allContainerViews.push(value);
}
return allContainerViews;
}

public clearAll = () => {
this.mainContainer = null;
this.popoutContainers.clear();
}

}
2 changes: 1 addition & 1 deletion src/lang/helpers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const locale = localeMap[moment.locale()];

export function t(str: keyof typeof en): string {
if (!locale) {
console.error("Error: Image toolkit locale not found", moment.locale());
console.error("[oit] Image toolkit locale not found", moment.locale());
}

return (locale && locale[str]) || en[str];
Expand Down
1 change: 1 addition & 0 deletions src/lang/locale/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export default {
PIN_MAXIMUM_NAME: "The maximum images you can pin",
PIN_COVER_NAME: "Cover mode",
PIN_COVER_DESC: "After those pinned images reach maximum, you can cover the earliest pinned image when you click an image once again.",
PIN_MAXIMUM_NOTICE: "Exceeded maximum images you can pin (non cover mode)",

// >>>View Detail Settings:
VIEW_DETAILS_SETTINGS: 'View Detail Settings:',
Expand Down
7 changes: 7 additions & 0 deletions src/lang/locale/zh-cn.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ export default {
// settings
IMAGE_TOOLKIT_SETTINGS_TITLE: "Image Toolkit 设置",

// >>>Common Settings:
COMMON_SETTINGS: '通用设置:',
VIEW_MODE_NAME: '选择查看模式',
VIEW_MODE_NORMAL: '🖼 普通',
VIEW_MODE_PIN: '📌 贴图',

// >>> 预览触发配置:
VIEW_TRIGGER_SETTINGS: '预览触发配置:',
VIEW_IMAGE_GLOBAL_NAME: '支持全局预览图片',
Expand All @@ -26,6 +32,7 @@ export default {
PIN_MAXIMUM_NAME: "最大贴图数量",
PIN_COVER_NAME: "覆盖模式",
PIN_COVER_DESC: "当贴图数量达到最大值后,此时再次点击图片,该图片会覆盖最早弹出的那个贴图。",
PIN_MAXIMUM_NOTICE: "超过最大Pin图设置(非覆盖模式)",

// >>>查看细节设置:
VIEW_DETAILS_SETTINGS: '查看细节设置:',
Expand Down
Loading

0 comments on commit 995dd2d

Please sign in to comment.