Media Query

1John419 · Apr 14, 2022 · de38ef9 · de38ef9
1 parent 7845650
commit de38ef9
Show file tree

Hide file tree

Showing 20 changed files with 134 additions and 399 deletions.
diff --git a/bundle.js b/bundle.js
diff --git a/css/kjs.css b/css/kjs.css
@@ -919,11 +919,6 @@ textarea {
   margin-top: 12.5px;
 }
 
-.verse-last {
-  height: 1px;
-  width: 328px;
-}
-
 .verse-num {
   margin-right: 0.5em;
 }
@@ -937,6 +932,52 @@ textarea {
   border-radius: var(--border-radius);
 }
 
+@media screen and (min-width: 320px) and (max-width: 359px) {
+  .btn-icon--help,
+  .btn-icon--setting {
+    display: none;
+  }
+
+  .btn-icon--v-menu {
+    display: block;
+  }
+}
+
+@media screen and (min-width: 360px) and (max-width: 640px) {
+  .btn-icon--help,
+  .btn-icon--setting {
+    display: block;
+  }
+
+  .btn-icon--v-menu {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 640px) and (max-width: 681px) {
+  .btn-icon--back,
+  .btn-icon--help,
+  .btn-icon--setting {
+    display: none;
+  }
+
+  .btn-icon--v-menu {
+    display: block;
+  }
+}
+
+@media screen and (min-width: 681px) {
+  .btn-icon--help,
+  .btn-icon--setting {
+    display: block;
+  }
+
+  .btn-icon--back,
+  .btn-icon--v-menu {
+    display: none;
+  }
+}
+
 @media screen and (min-width: 640px) {
   .page {
     flex: 0 0 320px;
@@ -946,6 +987,16 @@ textarea {
     border-right: solid 1px var(--ui-base-fg);
     flex: 0 0 calc(100% - 320px);
   }
+
+  .btn-icon--back {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 959px) {
+  .btn-icon--column-mode {
+    display: none;
+  }
 }
 
 @media (pointer: fine) {

diff --git a/help/about.html b/help/about.html
@@ -5,7 +5,7 @@ <h1>KJS</h1>
   <p>ALL the power belongs to My King! The glory is all His.</p>
   <p>"Heaven and earth shall pass away, but my words shall not pass away."</p>
   <h1>Version</h1>
-  <p>2022.03.02</p>
+  <p>2022.04.14</p>
   <h1>Contact</h1>
   <p>Questions or comments?</p>
   <a href="mailto:github.1john419@gmail.com?subject=KJS%20Feedback" target="_blank">Send email</a>

diff --git a/index.html b/index.html
@@ -1,8 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 
 <head>
   <meta charset="utf-8">
+  <title>KJS</title>
   <meta name="description" content="Offline King James Strong Search">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="manifest" href="./manifest.json">
@@ -12,7 +13,6 @@
   <link rel="apple-touch-icon" sizes="167x167" href="./png/touch-icon-167.png">
   <link rel="apple-touch-icon" sizes="180x180" href="./png/touch-icon-180.png">
   <link rel="stylesheet" href="./css/kjs.css">
-  <title>KJS</title>
 </head>
 
 <body>

diff --git a/js/Controller/ReadController.js b/js/Controller/ReadController.js
@@ -4,6 +4,10 @@ import queue from '../CommandQueue.js';
 
 const SIDEBAR_WIDTH = 320;
 
+const mqlOnePane = window.matchMedia('screen and (max-width: 639px)');
+const mqlTwoPanes = window.matchMedia('screen and (min-width: 640px) and (max-width: 959px)');
+const mqlThreePanes = window.matchMedia('screen and (min-width: 960px)');
+
 class ReadController {
 
   constructor() {
@@ -52,6 +56,9 @@ class ReadController {
     this.subscribe();
     this.sidebar = null;
     this.lastSidebar = null;
+    this.panes = null;
+    this.currentPanes = null;
+    this.PaneListeners();
   }
 
   initializeApp() {
@@ -74,12 +81,36 @@ class ReadController {
     queue.publish('chapter.next', null);
   }
 
+  PaneListeners() {
+    mqlOnePane.addEventListener('change', (event) => {
+      if (event.matches) {
+        this.updatePanes();
+      }
+    });
+    mqlTwoPanes.addEventListener('change',  (event) => {
+      if (event.matches) {
+        this.updatePanes();
+      }
+    });
+    mqlThreePanes.addEventListener('change',  (event) => {
+      if (event.matches) {
+        this.updatePanes();
+      }
+    });
+  }
+
   prevChapter() {
     queue.publish('chapter.prev', null);
   }
 
   setPanes() {
-    this.panes = Math.min(Math.floor(window.innerWidth / SIDEBAR_WIDTH), 4);
+    if (mqlOnePane.matches) {
+      this.panes = 1;
+    } else if (mqlTwoPanes.matches) {
+      this.panes = 2;
+    } else if (mqlThreePanes.matches) {
+      this.panes = 3;
+    } 
     queue.publish('panes.change', this.panes);
   }
 
@@ -174,9 +205,6 @@ class ReadController {
       this.strongVerseUpdate();
     });
 
-    queue.subscribe('window.resize', () => {
-      this.updatePanes();
-    });
   }
 
   updatePanes() {

diff --git a/js/View/BookmarkFolderView.js b/js/View/BookmarkFolderView.js
@@ -166,14 +166,6 @@ class BookmarkFolderView {
     this.showActionMenu(target);
   }
 
-  panesUpdate(panes) {
-    if (panes === 1) {
-      this.btnBack.classList.remove('btn-icon--hide');
-    } else {
-      this.btnBack.classList.add('btn-icon--hide');
-    }
-  }
-
   rename(folderName) {
     queue.publish('bookmark-folder-rename', folderName);
   }
@@ -200,10 +192,6 @@ class BookmarkFolderView {
     queue.subscribe('bookmark.folder-list.update', (folderList) => {
       this.folderListUpdate(folderList);
     });
-
-    queue.subscribe('panes.update', (panes) => {
-      this.panesUpdate(panes);
-    });
   }
 
   toolbarLowerClick(event) {

diff --git a/js/View/BookmarkListView.js b/js/View/BookmarkListView.js
@@ -180,14 +180,6 @@ class BookmarkListView {
     queue.publish('bookmark-list.move-copy', verseIdx);
   }
 
-  panesUpdate(panes) {
-    if (panes === 1) {
-      this.btnBack.classList.remove('btn-icon--hide');
-    } else {
-      this.btnBack.classList.add('btn-icon--hide');
-    }
-  }
-
   show() {
     this.page.classList.remove('page--hide');
   }
@@ -226,10 +218,6 @@ class BookmarkListView {
     queue.subscribe('bookmark.strong-mode.update', (strongMode) => {
       this.strongModeUpdate(strongMode);
     });
-
-    queue.subscribe('panes.update', (panes) => {
-      this.panesUpdate(panes);
-    });
   }
 
   toolbarLowerClick(event) {

diff --git a/js/View/HelpReadView.js b/js/View/HelpReadView.js
@@ -66,14 +66,6 @@ class HelpReadView {
     this.subscribe();
   }
 
-  panesUpdate(panes) {
-    if (panes === 1) {
-      this.btnBack.classList.remove('btn-icon--hide');
-    } else {
-      this.btnBack.classList.add('btn-icon--hide');
-    }
-  }
-
   show() {
     this.page.classList.remove('page--hide');
   }
@@ -89,10 +81,6 @@ class HelpReadView {
     queue.subscribe('help.topic.update', (helpTopic) => {
       this.topicUpdate(helpTopic);
     });
-
-    queue.subscribe('panes.update', (panes) => {
-      this.panesUpdate(panes);
-    });
   }
 
   toolbarLowerClick(event) {

diff --git a/js/View/HelpTopicView.js b/js/View/HelpTopicView.js
@@ -100,14 +100,6 @@ class HelpTopicView {
     this.subscribe();
   }
 
-  panesUpdate(panes) {
-    if (panes === 1) {
-      this.btnBack.classList.remove('btn-icon--hide');
-    } else {
-      this.btnBack.classList.add('btn-icon--hide');
-    }
-  }
-
   scrollClick(event) {
     event.preventDefault();
     let target = event.target.closest('button');
@@ -130,10 +122,6 @@ class HelpTopicView {
     queue.subscribe('help-topic.hide', () => {
       this.hide();
     });
-
-    queue.subscribe('panes.update', (panes) => {
-      this.panesUpdate(panes);
-    });
   }
 
   toolbarLowerClick(event) {

diff --git a/js/View/NavigatorBookView.js b/js/View/NavigatorBookView.js
@@ -152,14 +152,6 @@ class NavigatorBookView {
     this.page.classList.remove('page--hide');
   }
 
-  panesUpdate(panes) {
-    if (panes === 1) {
-      this.btnBack.classList.remove('btn-icon--hide');
-    } else {
-      this.btnBack.classList.add('btn-icon--hide');
-    }
-  }
-
   subscribe() {
     queue.subscribe('bookIdx.update', (bookIdx) => {
       this.bookIdxUpdate(bookIdx);
@@ -171,10 +163,6 @@ class NavigatorBookView {
     queue.subscribe('navigator-book.show', () => {
       this.show();
     });
-
-    queue.subscribe('panes.update', (panes) => {
-      this.panesUpdate(panes);
-    });
   }
 
   toolbarLowerClick(event) {

diff --git a/js/View/NavigatorChapterView.js b/js/View/NavigatorChapterView.js
@@ -133,14 +133,6 @@ class NavigatorChapterView {
     }
   }
 
-  panesUpdate(panes) {
-    if (panes === 1) {
-      this.btnBack.classList.remove('btn-icon--hide');
-    } else {
-      this.btnBack.classList.add('btn-icon--hide');
-    }
-  }
-
   scrollToTop() {
     this.scroll.scrollTop = 0;
   }
@@ -164,10 +156,6 @@ class NavigatorChapterView {
     queue.subscribe('navigator-chapter.show', () => {
       this.show();
     });
-
-    queue.subscribe('panes.update', (panes) => {
-      this.panesUpdate(panes);
-    });
   }
 
   toolbarLowerClick(event) {