Add smooth scroll option

- Fix URL not updating with scroll in Firefox
luejerry · Feb 12, 2020 · 88789b1 · 88789b1
1 parent 12fc84d
commit 88789b1
Show file tree

Hide file tree

Showing 7 changed files with 573 additions and 10 deletions.
diff --git a/build-win.cmd b/build-win.cmd
@@ -6,6 +6,7 @@ pyi-makespec --add-data="mangareader\styles.css;mangareader" ^
   --add-data="mangareader\scripts.js;mangareader" ^
   --add-data="mangareader\roboto-regular.woff2;mangareader" ^
   --add-data="mangareader\roboto-bold.woff2;mangareader" ^
+  --add-data="mangareader\zenscroll.js;mangareader" ^
   --add-data="version;." ^
   --add-data="unrar.exe;." ^
   --icon="symbols\air1.ico" ^

diff --git a/mangareader/doc.template.html b/mangareader/doc.template.html
@@ -19,12 +19,17 @@
         <button id="btn-fit-width">Fit to width</button>
         <button class="btn-smart-fit" data-fit-key="size0">Smart fit small</button>
         <button class="btn-smart-fit" data-fit-key="size1">Smart fit large</button>
+        <label class="label-toggle">
+          <input type="checkbox" id="input-smooth-scroll" class="input-toggle" />
+          <span>Smooth scrolling</span>
+        </label>
       </div>
     </div>
     <div id="update-toast">
       <span> A new version of Mangareader (<span id="next-version"></span>) is available. </span>
       <a id="link-update" target="_blank">Download</a>
     </div>
+    <script type="text/javascript" src="zenscroll.js"></script>
     <script type="text/javascript" src="scripts.js"></script>
   </body>
 </html>
diff --git a/mangareader/scripts.js b/mangareader/scripts.js
@@ -1,5 +1,11 @@
 (function() {
   const versionCheckUrl = 'https://api.github.com/repos/luejerry/html-mangareader/contents/version';
+  const storageKey = 'mangareader-config';
+
+  const defaultConfig = {
+    smoothScroll: true,
+  };
+
   const widthClamp = {
     none: 'none',
     shrink: 'shrink',
@@ -39,6 +45,7 @@
   const shrinkWidthBtn = document.getElementById('btn-shrink-width');
   const fitWidthBtn = document.getElementById('btn-fit-width');
   const smartFitBtns = Array.from(document.getElementsByClassName('btn-smart-fit'));
+  const smoothScrollCheckbox = document.getElementById('input-smooth-scroll');
 
   let visiblePage;
 
@@ -53,9 +60,9 @@
           if (!index) {
             visiblePage = target;
             // Update the URL hash as user scrolls.
-            // Since we're using a file:// url, need to strip out the drive letter on Windows
-            const path = location.pathname.replace(/\/[A-Za-z]:/, '');
-            history.replaceState(null, '', `${path}#${target.id}`);
+            const url = new URL(location.href);
+            url.hash = target.id;
+            history.replaceState(null, '', url.toString());
           }
         });
     },
@@ -70,6 +77,37 @@
     };
   });
 
+  function readConfig() {
+    let config;
+    try {
+      // Unfortunately Edge does not allow localStorage access for file:// urls
+      config = localStorage.getItem(storageKey);
+    } catch (err) {
+      console.error(err);
+    }
+    return config ? JSON.parse(config) : defaultConfig;
+  }
+
+  function writeConfig(config) {
+    const oldConfig = readConfig();
+    const newConfig = Object.assign({}, oldConfig, config);
+    try {
+      localStorage.setItem(storageKey, JSON.stringify(newConfig));
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  function setupZenscroll() {
+    window.zenscroll.setup(170);
+    const config = readConfig();
+    if (config.smoothScroll) {
+      smoothScrollCheckbox.checked = true;
+    } else {
+      window.pauseZenscroll = true;
+    }
+  }
+
   function asyncTimeout(millis) {
     return new Promise((resolve, reject) => {
       setTimeout(() => resolve(), millis);
@@ -144,13 +182,21 @@
     visiblePage.scrollIntoView({ behavior: 'smooth' });
   }
 
+  function handleSmoothScroll(event) {
+    window.pauseZenscroll = !event.target.checked;
+    writeConfig({
+      smoothScroll: event.target.checked,
+    });
+  }
+
   function setupListeners() {
     originalWidthBtn.addEventListener('click', handleOriginalWidth);
     shrinkWidthBtn.addEventListener('click', handleShrinkWidth);
     fitWidthBtn.addEventListener('click', handleFitWidth);
     for (const button of smartFitBtns) {
       button.addEventListener('click', handleSmartWidth);
     }
+    smoothScrollCheckbox.addEventListener('change', handleSmoothScroll);
   }
 
   function attachIntersectObservers() {
@@ -206,6 +252,7 @@
   }
 
   function main() {
+    setupZenscroll();
     setupListeners();
     attachIntersectObservers();
     checkVersion();

diff --git a/mangareader/styles.css b/mangareader/styles.css
@@ -1,5 +1,30 @@
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(roboto-regular.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(roboto-bold.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 body {
   background-color: #f0f0f0;
+  font-family: Roboto, sans-serif;
+}
+
+/* Override user agent stylesheet */
+button,
+input {
+  font-family: Roboto, sans-serif;
 }
 
 img {
@@ -10,6 +35,10 @@ img {
   border-color: #dddddd;
 }
 
+a[href='#_none'] {
+  display: none;
+}
+
 .next,
 .prev {
   position: absolute;
@@ -65,7 +94,6 @@ img {
   top: 0;
   left: 0;
   z-index: 2;
-  font-family: 'Franklin Gothic Medium', Arial, Helvetica, sans-serif;
   transition: background 0.2s;
   background: rgba(255, 255, 255, 0);
 }
@@ -107,7 +135,6 @@ img {
 .toolbar .menu-items {
   display: flex;
   flex-direction: column;
-  padding-left: 24px;
   opacity: 0;
   transition: opacity 0.2s;
 }
@@ -117,23 +144,75 @@ img {
 }
 
 .menu-items button {
-  padding: 12px 24px;
-  font-family: Arial, Helvetica, sans-serif;
+  padding: 12px 24px 12px 60px;
   background: rgba(0, 0, 0, 0);
   border: none;
   text-align: left;
+  font-size: 14px;
 }
 
 .menu-items button:hover {
   background: rgba(0, 0, 0, 0.15);
   cursor: pointer;
 }
 
+label {
+  font-size: 14px;
+}
+
+.label-toggle {
+  position: relative;
+  cursor: pointer;
+  padding: 12px 24px 12px 36px;
+  margin-left: 24px;
+}
+
+.label-toggle .input-toggle {
+  opacity: 0;
+  position: absolute;
+}
+
+.label-toggle .input-toggle + *::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: calc(50% - 6px);
+  left: 0;
+  width: 20px;
+  height: 12px;
+  background: #f0f0f0;
+  box-sizing: border-box;
+  border-radius: 6px;
+  transition: all 0.3s;
+}
+
+.label-toggle .input-toggle:checked + *::before {
+  background: #e0e0e0;
+}
+
+.label-toggle .input-toggle + *::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: calc(50% - 4px);
+  left: 2px;
+  background: #c0c0c0;
+  width: 8px;
+  height: 8px;
+  border-radius: 5px;
+  transition: all 0.3s;
+  transform: translateX(0);
+}
+
+.label-toggle .input-toggle:checked + *::after {
+  transform: translateX(8px);
+  background: #848484;
+}
+
 #version {
   position: fixed;
   bottom: 0;
   right: 0;
-  font-family: 'Franklin Gothic Regular', Arial, Helvetica, sans-serif;
   font-size: 14px;
   color: #d2d2d2;
   text-shadow: white 1px 1px;
@@ -147,7 +226,6 @@ img {
   padding: 12px 16px;
   background: white;
   border-radius: 5px;
-  font-family: 'Franklin Gothic Regular', Arial, Helvetica, sans-serif;
   transition: opacity 0.5s ease-out;
   opacity: 0;
   display: none;

diff --git a/mangareader/templates.py b/mangareader/templates.py
@@ -2,3 +2,11 @@
 ZIP_TYPES = {'zip', 'cbz'}
 RAR_TYPES = {'rar', 'cbr'}
 _7Z_TYPES = {'7z', 'cb7'}
+ASSETS = {
+    'styles.css',
+    'scripts.js',
+    'zenscroll.js',
+    'menu.svg',
+    'roboto-bold.woff2',
+    'roboto-regular.woff2',
+}