Clipboard Mode

css/kjs.css

@@ -116,6 +116,35 @@ textarea {
   margin: 0.25rem;
 }
 
+.btn-banner {
+  align-self: center;
+  background-color: transparent;
+  flex: 1 1 auto;
+  height: 100%;
+  overflow: hidden;
+  padding: 0 0.5rem;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.btn-banner--active {
+  background-color: var(--ui-hint-bg);
+  color: var(--ui-hint-fg);
+}
+
+.btn-banner--bookmark-list {
+  width: 100%;
+}
+
+.btn-banner--search-result {
+  width: 100%;
+}
+
+.btn-banner--strong-result {
+  width: 100%;
+}
+
 .btn-book {
   flex: 0 0 20%;
   height: var(--target-size);

help/about.html

@@ -8,7 +8,7 @@ <h1>KJS</h1>
   <blockquote><strong>Heaven and earth shall pass away, but my words shall not pass away.</strong></blockquote>
   <hr>
   <h1>Version</h1>
-  <p>2022.11.20</p>
+  <p>2022.12.01</p>
   <h1>Contact</h1>
   <p>github.1john419@gmail.com</p>
   <h1>Source Code</h1>

help/bookmark.html

@@ -43,7 +43,7 @@ <h3>Expand Mode</h3>
     </div>
   </div>
   <br>
-  <p>When Expand Mode is on, verse text for each bookmark is displayed</p>
+  <p>When Expand Mode is active, verse text for each bookmark is displayed</p>
   <h3>Strong Mode</h3>
   <p>This toggle button in the lower toolbar sets the Strong Mode:</p>
   <div class="entry entry--icon">

help/clipboard-mode.html

@@ -0,0 +1,9 @@
+<div class="topic--clipboard-mode">
+    <h1>Clipboard Mode</h1>
+    <p>The Clipboard Mode can be activated in the Read, Bookmark List, and Search Result, and Strong Result panes.</p>
+    <p>When Clipboard Mode is active, tapping a verse in the associated pane will copy the verse text to the system clipboard.</p>
+    <p>To activate Clipboard Mode, tap the pane banner in the upper toolbar. The banner is highlighted, indicating Clipboard Mode is active.</p>
+    <p>To deactivate Clipboard Mode, tap the banner in the upper toolbar again. The banner is dehighlighted, indicating Clipboard Mode is inactive.</p>
+    <p>Note: In the Bookmark List pane, Clipboard Mode is available only when the Expand Mode is active (see Bookmark help topic).</p>
+</div>
+

js/Model/HelpModel.js

@@ -8,8 +8,8 @@ const validTasks = [
   'help-read', 'help-topic',
 ];
 const validTopics = [
-  'about', 'bookmark', 'help', 'name-mode', 'navigator', 'overview', 'read',
-  'search', 'setting', 'strong', 'thats-my-king',
+  'about', 'bookmark', 'clipboard-mode', 'help', 'name-mode', 'navigator',
+  'overview', 'read', 'search', 'setting', 'strong', 'thats-my-king',
 ];
 
 class HelpModel {

js/Model/SearchModel.js

@@ -279,7 +279,7 @@ class SearchModel {
   tomeFilter() {
     return {
       bookIdx: -1,
-      chapterIdx: -1
+      chapterIdx: -1,
     };
   }
 

js/View/BookmarkExportView.js

@@ -109,9 +109,9 @@ class BookmarkExportview {
 
   toolbarLowerClick(event) {
     event.preventDefault();
-    let target = event.target.closest('button');
-    if (target) {
-      if (target === this.btnBookmarkFolder) {
+    let btn = event.target.closest('button');
+    if (btn) {
+      if (btn === this.btnBookmarkFolder) {
         queue.publish('bookmark-folder', null);
       }
     }

js/View/BookmarkFolderAddView.js

@@ -69,8 +69,8 @@ class BookmarkFolderAddView {
 
   dialogClick(event) {
     event.preventDefault();
-    let target = event.target;
-    if (target === this.btnSave) {
+    let btn = event.target.closest('button');
+    if (btn === this.btnSave) {
       this.saveClick();
     }
   }
@@ -136,9 +136,9 @@ class BookmarkFolderAddView {
 
   toolbarLowerClick(event) {
     event.preventDefault();
-    let target = event.target.closest('button');
-    if (target) {
-      if (target === this.btnBookmarkFolder) {
+    let btn = event.target.closest('button');
+    if (btn) {
+      if (btn === this.btnBookmarkFolder) {
         queue.publish('bookmark-folder', null);
       }
     }

js/View/BookmarkFolderDeleteView.js

@@ -63,8 +63,8 @@ class BookmarkFolderDeleteView {
 
   dialogClick(event) {
     event.preventDefault();
-    let target = event.target;
-    if (target === this.btnDelete) {
+    let btn = event.target.closest('button');
+    if (btn === this.btnDelete) {
       this.deleteClick();
     }
   }
@@ -116,9 +116,9 @@ class BookmarkFolderDeleteView {
 
   toolbarLowerClick(event) {
     event.preventDefault();
-    let target = event.target.closest('button');
-    if (target) {
-      if (target === this.btnBookmarkFolder) {
+    let btn = event.target.closest('button');
+    if (btn) {
+      if (btn === this.btnBookmarkFolder) {
         queue.publish('bookmark-folder', null);
       }
     }

js/View/BookmarkFolderRenameView.js

@@ -69,8 +69,8 @@ class BookmarkFolderRenameView {
 
   dialogClick(event) {
     event.preventDefault();
-    let target = event.target;
-    if (target === this.btnSave) {
+    let btn = event.target.closest('button');
+    if (btn === this.btnSave) {
       this.saveClick();
     }
   }
@@ -149,9 +149,9 @@ class BookmarkFolderRenameView {
 
   toolbarLowerClick(event) {
     event.preventDefault();
-    let target = event.target.closest('button');
-    if (target) {
-      if (target === this.btnBookmarkFolder) {
+    let btn = event.target.closest('button');
+    if (btn) {
+      if (btn === this.btnBookmarkFolder) {
         queue.publish('bookmark-folder', null);
       }
     }

js/View/BookmarkFolderView.js

@@ -154,13 +154,13 @@ class BookmarkFolderView {
 
   listClick(event) {
     event.preventDefault();
-    let target = event.target.closest('button');
-    if (target) {
-      if (target.classList.contains('btn-entry')) {
-        let folderName = target.textContent;
+    let btn = event.target.closest('button');
+    if (btn) {
+      if (btn.classList.contains('btn-entry')) {
+        let folderName = btn.textContent;
         queue.publish('bookmark-folder.select', folderName);
-      } else if (target.classList.contains('btn-icon--h-menu')) {
-        let entry = target.previousSibling;
+      } else if (btn.classList.contains('btn-icon--h-menu')) {
+        let entry = btn.previousSibling;
         this.menuClick(entry);
       }
     }
@@ -200,17 +200,17 @@ class BookmarkFolderView {
 
   toolbarLowerClick(event) {
     event.preventDefault();
-    let target = event.target.closest('button');
-    if (target) {
-      if (target === this.btnBack) {
+    let btn = event.target.closest('button');
+    if (btn) {
+      if (btn === this.btnBack) {
         queue.publish('bookmark.back', null);
-      } else if (target === this.btnBookmarkList) {
+      } else if (btn === this.btnBookmarkList) {
         queue.publish('bookmark-list', null);
-      } else if (target === this.btnBookmarkFolderAdd) {
+      } else if (btn === this.btnBookmarkFolderAdd) {
         queue.publish('bookmark-folder-add', null);
-      } else if (target === this.btnExport) {
+      } else if (btn === this.btnExport) {
         queue.publish('bookmark-export', null);
-      } else if (target === this.btnImport) {
+      } else if (btn === this.btnImport) {
         queue.publish('bookmark-import', null);
       }
     }

js/View/BookmarkImportView.js

@@ -65,8 +65,8 @@ class BookmarkImportView {
 
   dialogClick(event) {
     event.preventDefault();
-    let target = event.target;
-    if (target === this.btnImport) {
+    let btn = event.target.closest('button');
+    if (btn === this.btnImport) {
       this.importClick();
     }
   }
@@ -128,9 +128,9 @@ class BookmarkImportView {
 
   toolbarLowerClick(event) {
     event.preventDefault();
-    let target = event.target.closest('button');
-    if (target) {
-      if (target === this.btnBookmarkFolder) {
+    let btn = event.target.closest('button');
+    if (btn) {
+      if (btn === this.btnBookmarkFolder) {
         queue.publish('bookmark-folder', null);
       }
     }