From e611d3b6512cf72701093302619e6cec19e63d56 Mon Sep 17 00:00:00 2001 From: Devon22 Date: Wed, 23 Jul 2025 00:30:13 +0800 Subject: [PATCH] 1.9.15 --- manifest.json | 2 +- package-lock.json | 4 +- package.json | 2 +- src/fullscreen.ts | 95 +++++++++++++++++++++++++++++++++++++++++++---- styles.css | 2 +- versions.json | 2 +- 6 files changed, 94 insertions(+), 13 deletions(-) diff --git a/manifest.json b/manifest.json index 57b1704..2ff4faa 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "mediaviewer", "name": "Media Viewer", - "version": "1.9.14", + "version": "1.9.15", "minAppVersion": "1.1.0", "description": "View and manage media files within your notes.", "author": "Devon22", diff --git a/package-lock.json b/package-lock.json index fe55f9e..b8a6e1e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "mediaviewer", - "version": "1.9.14", + "version": "1.9.15", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "mediaviewer", - "version": "1.9.14", + "version": "1.9.15", "license": "MIT", "devDependencies": { "@types/node": "^16.11.6", diff --git a/package.json b/package.json index 7272037..d18d7a5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mediaviewer", - "version": "1.9.14", + "version": "1.9.15", "description": "This is a sample plugin for Obsidian (https://obsidian.md)", "main": "main.js", "scripts": { diff --git a/src/fullscreen.ts b/src/fullscreen.ts index af630d7..307b331 100644 --- a/src/fullscreen.ts +++ b/src/fullscreen.ts @@ -26,6 +26,13 @@ export class FullScreenModal extends Modal { autoPlayTimer: number | null; isAutoPlaying: boolean; sourcePath?: string; // 來源檔案路徑（由 Gallery Block 傳入） + // 觸控拖曳相關屬性 + private touchStartX = 0; + private touchStartY = 0; + private touchStartTime = 0; + private isDragging = false; + private minSwipeDistance = 50; // 最小滑動距離 + private maxSwipeTime = 300; // 最大滑動時間（毫秒） constructor(app: App, plugin: MediaViewPlugin, openType: string = 'command', sourcePath?: string) { super(app); @@ -305,6 +312,9 @@ export class FullScreenModal extends Modal { // 註冊事件監聽 this.registerMediaEvents(); + + // 註冊觸控事件（行動裝置拖曳翻頁） + this.registerTouchEvents(this.fullMediaView); // 根據類型決定是否自動顯示一張圖片 if (this.openType === 'command') { @@ -611,11 +621,12 @@ export class FullScreenModal extends Modal { e.preventDefault(); if (e.deltaY < 0) { - this.currentIndex = (this.currentIndex - 1 + this.mediaUrls.length) % this.mediaUrls.length; + // 切換到上一個媒體 + this.showPrevMedia(); } else { - this.currentIndex = (this.currentIndex + 1) % this.mediaUrls.length; + // 切換到下一個媒體 + this.showNextMedia(); } - this.showMedia(this.currentIndex); }; // 鍵盤事件 @@ -626,8 +637,7 @@ export class FullScreenModal extends Modal { evt.preventDefault(); } else { // 普通左方向鍵：切換到上一個媒體 - this.currentIndex = (this.currentIndex - 1 + this.mediaUrls.length) % this.mediaUrls.length; - this.showMedia(this.currentIndex); + this.showPrevMedia(); } }); @@ -638,8 +648,7 @@ export class FullScreenModal extends Modal { evt.preventDefault(); } else { // 普通右方向鍵：切換到下一個媒體 - this.currentIndex = (this.currentIndex + 1) % this.mediaUrls.length; - this.showMedia(this.currentIndex); + this.showNextMedia(); } }); @@ -652,6 +661,78 @@ export class FullScreenModal extends Modal { }); } + // 顯示上一個媒體 + showPrevMedia() { + this.currentIndex = (this.currentIndex - 1 + this.mediaUrls.length) % this.mediaUrls.length; + this.showMedia(this.currentIndex); + } + + // 顯示下一個媒體 + showNextMedia() { + this.currentIndex = (this.currentIndex + 1) % this.mediaUrls.length; + this.showMedia(this.currentIndex); + } + + // 註冊觸控事件處理器（行動裝置拖曳翻頁） + private registerTouchEvents(element: HTMLElement) { + element.addEventListener('touchstart', (e) => { + // 只有在非縮放狀態下才處理觸控事件 + if (this.isZoomed) return; + + const touch = e.touches[0]; + this.touchStartX = touch.clientX; + this.touchStartY = touch.clientY; + this.touchStartTime = Date.now(); + this.isDragging = false; + }, { passive: true }); + + element.addEventListener('touchmove', (e) => { + // 只有在非縮放狀態下才處理觸控事件 + if (this.isZoomed) return; + + const touch = e.touches[0]; + const deltaX = Math.abs(touch.clientX - this.touchStartX); + const deltaY = Math.abs(touch.clientY - this.touchStartY); + + // 如果水平移動距離大於垂直移動距離，則認為是水平拖曳 + if (deltaX > deltaY && deltaX > 10) { + this.isDragging = true; + // 阻止預設的滾動行為 + e.preventDefault(); + } + }, { passive: false }); + + element.addEventListener('touchend', (e) => { + // 只有在非縮放狀態下才處理觸控事件 + if (this.isZoomed) return; + + if (!this.isDragging) return; + + const touch = e.changedTouches[0]; + const deltaX = touch.clientX - this.touchStartX; + const deltaY = touch.clientY - this.touchStartY; + const deltaTime = Date.now() - this.touchStartTime; + + // 檢查是否符合滑動條件 + const isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY); + const isValidDistance = Math.abs(deltaX) >= this.minSwipeDistance; + const isValidTime = deltaTime <= this.maxSwipeTime; + + if (isHorizontalSwipe && isValidDistance && isValidTime) { + if (deltaX > 0) { + // 向右滑動 - 顯示上一個媒體 + this.showPrevMedia(); + } else { + // 向左滑動 - 顯示下一個媒體 + this.showNextMedia(); + } + } + + // 重置拖曳狀態 + this.isDragging = false; + }, { passive: true }); + } + // 刪除媒體檔案 async deleteMedia(index: number) { if (!this.plugin.settings.allowMediaDeletion) { diff --git a/styles.css b/styles.css index 22b72f4..8513121 100644 --- a/styles.css +++ b/styles.css @@ -172,7 +172,7 @@ position: absolute; top: 20%; height: 70%; - width: 10%; + width: 7%; z-index: 1001; cursor: pointer; display: flex; diff --git a/versions.json b/versions.json index 4a41346..0d6814c 100644 --- a/versions.json +++ b/versions.json @@ -1,3 +1,3 @@ { - "1.9.14": "1.1.0" + "1.9.15": "1.1.0" } \ No newline at end of file