feat: add click to turn page btn

dfface · dfface · commit 4fb36da2880d · 2026-03-18T02:49:06.000+08:00
diff --git a/epub_browser/assets/book.js b/epub_browser/assets/book.js
@@ -137,8 +137,8 @@ function initScript() {
     var el = document.querySelector('.container');
     if (!isKindleMode()) {
         var sortable = Sortable.create(el, {
-        delay: 10, // 延迟100ms后才开始拖动，给用户选择文字的时间
-        delayOnTouchOnly: false, // 在触摸设备上也应用延迟
+        delay: 300, // 延迟300ms后才开始拖动，避免移动端滑动时误触发
+        delayOnTouchOnly: true, // 只在触摸设备上应用延迟
         filter: '.toc-container', // 允许直接选择文字
         preventOnFilter: false, // 过滤时不阻止默认行为
         onEnd: function(evt) {
diff --git a/epub_browser/assets/chapter.css b/epub_browser/assets/chapter.css
@@ -1047,7 +1047,7 @@ body {
 }
 
 @media (max-width: 768px) {
-    .container {
+    body:not(.pagination-mode) .container {
         width: 100%;
     }
 
diff --git a/epub_browser/assets/chapter.js b/epub_browser/assets/chapter.js
@@ -332,6 +332,7 @@ function initScript() {
     const progressFill = document.getElementById('progressBar');
     const pageHeightSetBtn = document.querySelector("#setPageHeight");
     const pageHeightInput = document.querySelector("#pageHeightInput");
+    const toggleClickPageBtn = document.getElementById('toggleClickPage');
 
     // 生成存储键名
     function getStorageKey(mode) {
@@ -347,6 +348,7 @@ function initScript() {
     let totalPages = 0;
     let contentWidth = 0;
     let pageWidth = 0;
+    let isClickPageEnabled = false; // 点击翻页功能状态
 
     let fontSize = "small";
     let fontFamily = "system-ui, -apple-system, sans-serif";
@@ -386,8 +388,8 @@ function initScript() {
     var el = document.querySelector('.container');
     if (!isKindleMode()) {
         var sortable = Sortable.create(el, {
-        delay: 10, // 延迟100ms后才开始拖动，给用户选择文字的时间
-        delayOnTouchOnly: false, // 在触摸设备上也应用延迟
+        delay: 300, // 延迟300ms后才开始拖动，避免移动端滑动时误触发
+        delayOnTouchOnly: true, // 只在触摸设备上应用延迟
         filter: '#eb-content, #pageJumpInput, .page-height-adjustment, #customCssInput', // 允许直接选择#eb-content中的文字
         preventOnFilter: false, // 过滤时不阻止默认行为
         onStart: function(evt) {
@@ -982,22 +984,79 @@ function initScript() {
         }
     });
 
-    // 监听点击事件
-    if (isKindleMode()) {
-        content.addEventListener('click', function(e) {
-            const screenWidth = window.innerWidth;
-            const targetArea = screenWidth * 0.2;
-            
-            // 左侧40px内点击
-            if (e.clientX < targetArea) {
-                prevPageBtn.click();
-            }
-            // 右侧40px内点击
-            else if (e.clientX > screenWidth - targetArea) {
-                nextPageBtn.click();
-            }
-        });
+    // 点击翻页功能
+    function handleClickPage(e) {
+        if (!isClickPageEnabled || !isPaginationMode) return;
+        
+        const screenWidth = window.innerWidth;
+        const targetArea = screenWidth * 0.2;
+        
+        // 左侧20%区域点击
+        if (e.clientX < targetArea) {
+            prevPageBtn.click();
+        }
+        // 右侧20%区域点击
+        else if (e.clientX > screenWidth - targetArea) {
+            nextPageBtn.click();
+        }
+    }
+    
+    // 初始化点击翻页功能状态
+    function initClickPageState() {
+        if (!isKindleMode()) {
+            isClickPageEnabled = localStorage.getItem('clickPageEnabled') === 'true';
+        } else {
+            isClickPageEnabled = getCookie('clickPageEnabled') === 'true';
+        }
+        updateClickPageButton();
+        
+        // 如果是 Kindle 模式，默认开启点击翻页
+        if (isKindleMode() && localStorage.getItem('clickPageEnabled') === null && getCookie('clickPageEnabled') === null) {
+            isClickPageEnabled = true;
+            saveClickPageState();
+        }
     }
+    
+    // 保存点击翻页功能状态
+    function saveClickPageState() {
+        if (!isKindleMode()) {
+            localStorage.setItem('clickPageEnabled', isClickPageEnabled.toString());
+        } else {
+            setCookie('clickPageEnabled', isClickPageEnabled.toString());
+        }
+    }
+    
+    // 更新点击翻页按钮状态
+    function updateClickPageButton() {
+        if (isClickPageEnabled) {
+            toggleClickPageBtn.classList.add('active');
+            toggleClickPageBtn.style.background = 'var(--primary)';
+            toggleClickPageBtn.style.color = 'white';
+        } else {
+            toggleClickPageBtn.classList.remove('active');
+            toggleClickPageBtn.style.background = '';
+            toggleClickPageBtn.style.color = '';
+        }
+    }
+    
+    // 初始化点击翻页功能状态
+    initClickPageState();
+    
+    // 监听点击事件
+    content.addEventListener('click', handleClickPage);
+    
+    // 点击翻页按钮点击事件
+    toggleClickPageBtn.addEventListener('click', function() {
+        isClickPageEnabled = !isClickPageEnabled;
+        saveClickPageState();
+        updateClickPageButton();
+        
+        if (isClickPageEnabled) {
+            showNotification('Click to turn page enabled', 'info');
+        } else {
+            showNotification('Click to turn page disabled', 'info');
+        }
+    });
 
     // 自定义 css
     customCssFunc();
diff --git a/epub_browser/assets/library.js b/epub_browser/assets/library.js
@@ -79,6 +79,8 @@ function initScript() {
     var elContainer = document.querySelector('.container');
     if (!isKindleMode()) {
         var sortableBook = Sortable.create(elBook, {
+        delay: 300, // 延迟300ms后才开始拖动，避免移动端滑动时误触发
+        delayOnTouchOnly: true, // 只在触摸设备上应用延迟
         onEnd: function(evt) {
             // 获取所有项目的ID
             var itemIds = Array.from(evt.from.children).map(function(child) {
@@ -89,6 +91,8 @@ function initScript() {
         }
         });
         var sortableTag = Sortable.create(elTag, {
+        delay: 300, // 延迟300ms后才开始拖动，避免移动端滑动时误触发
+        delayOnTouchOnly: true, // 只在触摸设备上应用延迟
         onEnd: function(evt) {
             // 获取所有项目的ID
             var itemIds = Array.from(evt.from.children).map(function(child) {
@@ -98,9 +102,9 @@ function initScript() {
             localStorage.setItem(storageKeySortableTag, JSON.stringify(itemIds));
         }
         });
-        var sortableTag = Sortable.create(elContainer, {
-        delay: 10, // 延迟100ms后才开始拖动，给用户选择文字的时间
-        delayOnTouchOnly: false, // 在触摸设备上也应用延迟
+        var sortableContainer = Sortable.create(elContainer, {
+        delay: 300, // 延迟300ms后才开始拖动，给用户选择文字的时间
+        delayOnTouchOnly: true, // 只在触摸设备上应用延迟
         filter: '.book-grid, .search-box', // 允许直接选择.content中的文字
         preventOnFilter: false, // 过滤时不阻止默认行为
         onEnd: function(evt) {
diff --git a/epub_browser/library.py b/epub_browser/library.py
@@ -195,9 +195,10 @@ def create_library_home(self):
         <div class="book-card" data-id="{book_hash}">
             <a href="/book/{book_hash}/index.html" class="book-link" id="{book_hash}">
                 <img src="/book/{book_hash}/{book_info['cover']}" alt="cover" class="book-cover"/>
-                <div class="book-card-content">
-                    <h3 class="book-title">{book_info['title']}</h3>
-                    <div class="book-author">{" & ".join(book_info['authors']) if book_info['authors'] else ""}</div>
+            </a>
+            <div class="book-card-content">
+                <h3 class="book-title">{book_info['title']}</h3>
+                <div class="book-author">{" & ".join(book_info['authors']) if book_info['authors'] else ""}</div>
             """
             if book_info['tags']:
                 library_html += """<div class="book-tags">"""
@@ -208,7 +209,6 @@ def create_library_home(self):
                 library_html += """</div>"""
             library_html += """
                 </div>
-            </a>
         </div>
 """      
         library_html += f"""
diff --git a/epub_browser/processor.py b/epub_browser/processor.py
@@ -964,6 +964,10 @@ def create_chapter_template(self, content, style_links, chapter_index, chapter_t
                         <i class="fas fa-arrow-right-to-bracket"></i>
                         <span class="control-name">Jump</span>
                     </div>
+                    <div class="control-btn" style="padding-left:10px;" id="toggleClickPage" title="Click to turn page">
+                        <i class="fas fa-hand-pointer"></i>
+                        <span class="control-name">Click</span>
+                    </div>
                 </div>
                 <div style="display: none; flex-direction: row;" class="page-height-adjustment">
                     <span>
diff --git a/setup.py b/setup.py
@@ -6,7 +6,7 @@
 
 setup(
     name="epub-browser",  # 在PyPI上显示的项目名称
-    version="1.7.3",      # 初始版本号
+    version="1.7.4",      # 初始版本号
     author="dfface",   # 作者名
     author_email="dfface@sina.com",  # 作者邮箱
     keywords="epub reader html export browser convert calibre-web calibre kindle web server local",

Original file line number	Diff line number	Diff line change
`@@ -1047,7 +1047,7 @@ body {`
`1047`	`1047`	`}`
`1048`	`1048`
`1049`	`1049`	`@media (max-width: 768px) {`
`1050`		`- .container {`
	`1050`	`+ body:not(.pagination-mode) .container {`
`1051`	`1051`	`width: 100%;`
`1052`	`1052`	`}`
`1053`	`1053`