Clipboard Mode

css/kja.css

@@ -116,6 +116,31 @@ 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-book {
   flex: 0 0 100%;
   height: var(--target-size);

help/about.html

@@ -8,7 +8,7 @@ <h1>KJA</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.14</p>
+  <p>2022.12.01</p>
   <h1>Contact</h1>
   <p>[email protected]</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>
   <h2>Folder Pane</h2>
   <p>The Folder pane displays the bookmark folder list.</p>
   <p>Tap a folder name to set the Active Folder and open the List pane.</p>

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 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', 'navigator', 'overview', 'read', 'search',
-  'setting', 'thats-my-king',
+  'about', 'bookmark', 'clipboard-mode', 'help', 'navigator', 'overview',
+  'read', 'search', 'setting', 'thats-my-king',
 ];
 
 class HelpModel {

js/Model/SearchModel.js

@@ -20,7 +20,7 @@ const validTasks = [
   'search-result', 'search-lookup', 'search-filter', 'search-history',
 ];
 
-const DEFAULT_QUERY = 'day of the lord';
+const DEFAULT_QUERY = 'lord of israel';
 
 class SearchModel {
 

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

@@ -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

@@ -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

@@ -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

@@ -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);
       }
     }

js/View/BookmarkListView.js

@@ -41,7 +41,7 @@ const lowerToolSet = [
 ];
 
 const upperToolSet = [
-  { type: 'banner', cssModifier: 'bookmark-list', text: null },
+  { type: 'btn-banner', cssModifier: 'bookmark-list', ariaLbael: 'Toogle Clipboard' },
 ];
 
 class BookmarkListView {
@@ -81,6 +81,9 @@ class BookmarkListView {
     this.toolbarLower.addEventListener('click', (event) => {
       this.toolbarLowerClick(event);
     });
+    this.toolbarUpper.addEventListener('click', (event) => {
+      this.toolbarUpperClick(event);
+    });
   }
 
   buildEntry(verseIdx) {
@@ -172,16 +175,33 @@ class BookmarkListView {
     this.expandMode = expandMode;
     if (this.expandMode) {
       this.btnExpandMode.classList.add('btn-icon--active');
+      this.list.classList.add(this.font.fontClass);
+      this.list.classList.add(this.fontSize);
     } else {
       this.btnExpandMode.classList.remove('btn-icon--active');
+      this.list.classList.remove(this.font.fontClass);
+      this.list.classList.remove(this.fontSize);
     }
     this.updateBookmarks()
   }
 
+  fontSizeUpdate(fontSize) {
+    this.fontSize = fontSize;
+    this.updateFontSize();
+    this.lastFontSize = this.fontSize;
+  }
+
+  fontUpdate(font) {
+    this.font = font;
+    this.updateFont();
+    this.lastFont = this.font;
+    this.lastFontSize = null;
+  }
+
   getElements() {
     this.btnFolderAdd = this.toolbarUpper.querySelector(
       '.btn-icon--folder-add');
-    this.banner = this.toolbarUpper.querySelector('.banner--bookmark-list');
+    this.btnBanner = this.toolbarUpper.querySelector('.btn-banner--bookmark-list');
 
     this.btnUp = this.actionMenu.querySelector('.btn-icon--up');
     this.btnDown = this.actionMenu.querySelector('.btn-icon--down');
@@ -210,15 +230,17 @@ class BookmarkListView {
     this.getElements();
     this.addListeners();
     this.subscribe();
+    this.lastFont = null;
+    this.clipboardMode = false;
   }
 
   listClick(event) {
     event.preventDefault();
-    let target = event.target.closest('button');
+    let btn = event.target.closest('button');
     if (this.expandMode) {
-      this.verseClick(target);
+      this.verseClick(btn);
     } else {
-      this.entryClick(target);
+      this.entryClick(btn);
     }
   }
 
@@ -259,32 +281,62 @@ class BookmarkListView {
     queue.subscribe('bookmark.expand-mode.update', (expandMode) => {
       this.expandModeUpdate(expandMode);
     });
+
+    queue.subscribe('font.update', (font) => {
+      this.fontUpdate(font);
+    });
+
+    queue.subscribe('font-size.update', (fontSize) => {
+      this.fontSizeUpdate(fontSize);
+    });
+  }
+
+  toogleClipboardMode() {
+    if (this.clipboardMode) {
+      this.btnBanner.classList.remove('btn-banner--active');
+    } else {
+      this.btnBanner.classList.add('btn-banner--active');
+    }
+    this.clipboardMode = !this.clipboardMode;
   }
 
   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.btnSortAscend) {
+      } else if (btn === this.btnSortAscend) {
         queue.publish('bookmark-list.sort-ascend', null);
-      } else if (target === this.btnSortInvert) {
+      } else if (btn === this.btnSortInvert) {
         queue.publish('bookmark-list.sort-invert', null);
-      } else if (target === this.btnBookmarkFolder) {
+      } else if (btn === this.btnBookmarkFolder) {
         queue.publish('bookmark-folder', null);
-      } else if (target === this.btnExpandMode) {
+      } else if (btn === this.btnExpandMode) {
         queue.publish('bookmark-list.expand-mode.click', null);
       }
     }
   }
 
+  toolbarUpperClick(event) {
+    event.preventDefault();
+    if (!this.expandMode) {
+      return;
+    }
+    let btn = event.target.closest('button');
+    if (btn) {
+      if (btn === this.btnBanner) {
+        this.toogleClipboardMode();
+      }
+    }
+  }
+
   up(verseIdx) {
     queue.publish('bookmark-list.up', verseIdx);
   }
 
   updateBanner() {
-    this.banner.innerHTML = `${this.activeFolder.name}`;
+    this.btnBanner.innerHTML = `${this.activeFolder.name}`;
   }
 
   updateActiveFolder(activeFolder) {
@@ -317,11 +369,36 @@ class BookmarkListView {
     this.scroll.scrollTop = scrollSave;
   }
 
+  updateFontSize() {
+    if (!this.expandMode) {
+      return;
+    }
+    if (this.lastFontSize) {
+      this.list.classList.remove(this.lastFontSize);
+    }
+    this.list.classList.add(this.fontSize);
+  }
+
+  updateFont() {
+    if (!this.expandMode) {
+      return;
+    }
+    if (this.lastFont) {
+      this.list.classList.remove(this.lastFont.fontClass);
+    }
+    this.list.classList.add(this.font.fontClass);
+  }
+
   verseClick(target) {
     if (target) {
       if (target.classList.contains('btn-result')) {
-        let verseIdx = parseInt(target.dataset.verseIdx);
-        queue.publish('bookmark-list.select', verseIdx);
+        if (this.clipboardMode) {
+          let text = target.textContent;
+          navigator.clipboard.writeText(text);
+        } else {
+          let verseIdx = parseInt(target.dataset.verseIdx);
+          queue.publish('bookmark-list.select', verseIdx);
+        }
       }
     }
   }