Add Endless Scrolling (Enable/Disable via sidenav)

Co-Authored-By: Ame <[email protected]>

README.md

@@ -11,7 +11,6 @@
     <br>
     <br>
     <a href='https://semaphoreci.com/keziahmoselle/gelbooru-client'> <img src='https://semaphoreci.com/api/v1/keziahmoselle/gelbooru-client/branches/master/badge.svg' alt='Build Status'></a>
-  <img src='https://app.buddy.works/keziahmoselle/gelbooru-client/pipelines/pipeline/151928/badge.svg?token=72fa9825e76df34e8e403d0373782e21385d02da8291fd2795023bc02bc74059' alt='Buddy.works'>
     <br>
     <a href='https://github.com/standard/standard'> <img src='https://cdn.rawgit.com/standard/standard/master/badge.svg' alt='StandardJS'></a>
 </p>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gelbooru-client",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "You already know what it is.",
   "main": "src/main.js",
   "dependencies": {

src/index.html

@@ -26,7 +26,7 @@
 
       <nav id="titlebar">
         <div class="nav-wrapper">
-          <a class="brand-logo center">Gel<b>booru</b></a>
+          <a class="brand-logo center hide-on-med-and-down">Gel<b>booru</b></a>
           <ul id="nav-mobile">
               <li class="active"><a id="openSidenav" href="#"><i class="material-icons">menu</i></a></li>
               <li><a title="Click to search" id="clickSearch" href="#"><i class="material-icons">search</i></a></li>
@@ -48,7 +48,7 @@
           <div class="user-view">
             <div class="background"></div>
             <span class="white-text name">Gel<b>booru</b> Client</span>
-            <span class="white-text email">v0.9.0</span>
+            <span class="white-text email">v0.10.0</span>
           </div>
         </li>
         <li><a class="subheader">Pages</a></li>
@@ -60,7 +60,7 @@
         <li><a class="subheader">Settings</a></li>
         <li><a id="openThemeCustomizationModalBtn" class="waves-effect"><i class="material-icons left">palette</i>Customization</a></li>
         <li><p class="sidenav-form"><label><input id="checkboxTheme" type="checkbox" class="filled-in" /><span>Light theme</span></label></p></li>
-        <li><p class="sidenav-form"><label><input type="checkbox" class="filled-in" disabled /><span>Endless scrolling</span></label></p></li>
+        <li><p class="sidenav-form"><label><input id="checkboxEndlessScrolling" type="checkbox" class="filled-in" /><span>Endless scrolling</span></label></p></li>
         <li><div class="divider"></div></li>
         <li><a class="subheader">Links</a></li>
         <li><a class="waves-effect" href="https://gelbooru.com/"><i class="material-icons">open_in_new</i>Gelbooru</a></li>

src/renderer.js

@@ -9,6 +9,8 @@ const store = require('./store')
 const saveFile = remote.require('electron-save-file')
 
 // HTML elements
+const windowElement = window.window
+const documentElement = document.documentElement
 const root = document.getElementById('root')
 // Body
 const searchBar = document.getElementById('searchBar')
@@ -133,9 +135,7 @@ document.getElementById('openBlacklistModalBtn').addEventListener('click', () =>
 document.getElementById('openThemeCustomizationModalBtn').addEventListener('click', () => {
   // Get themes colors from the store
   let primaryColor = store.get('themeCustomization.primary')
-
   let accentColor = store.get('themeCustomization.accent')
-
   let darkColor = store.get('themeCustomization.dark')
   // Set the color of the three div.preview-color
   document.getElementById('primaryColor-preview').style.backgroundColor = primaryColor
@@ -173,9 +173,7 @@ document.getElementById('updateBlacklistBtn').addEventListener('click', () => {
 // Update :root CSS variables
 document.getElementById('updateThemeBtn').addEventListener('click', () => {
   let primaryColor = document.getElementById('primaryColor').value || store.get(themeCustomization.primary)
-
   let accentColor = document.getElementById('accentColor').value || store.get(themeCustomization.accent)
-
   let darkColor = document.getElementById('darkColor').value || store.get(themeCustomization.dark)
   // Update CSS var
   document.documentElement.style.setProperty('--primary', primaryColor)
@@ -213,9 +211,7 @@ document.getElementById('resetThemeBtn').addEventListener('click', () => {
 // Update at launch the theme
 // Get themes colors from the store
 let primaryColor = store.get('themeCustomization.primary')
-
 let accentColor = store.get('themeCustomization.accent')
-
 let darkColor = store.get('themeCustomization.dark')
 // Update CSS var
 document.documentElement.style.setProperty('--primary', primaryColor)
@@ -230,7 +226,6 @@ function openImageDetails (event) {
     .then((response) => {
       // Setting up values
       let image = response.data[0]
-
       let tags = image.tags.split(' ')
       // Update values
       sidenavImageSource.setAttribute('href', `https://gelbooru.com/index.php?page=post&s=view&id=${image.id}`)
@@ -379,19 +374,16 @@ document.getElementById('limitBtn').addEventListener('click', () => {
 
 // Light & Dark Mode
 
-let lastTheme = store.get('theme')
-
 // Enable light theme if enabled before
-if (lastTheme === 'light-mode') {
+if (store.get('theme') === 'light-mode') {
   root.classList.add('light-mode')
   checkboxTheme.setAttribute('checked', 'checked')
   console.log('Theme : Light mode enabled.')
 }
 
 // Add / Remove light theme
 document.getElementById('checkboxTheme').addEventListener('click', () => {
-  let actualTheme = store.get('theme')
-  if (actualTheme === 'light-mode') { // Actual theme = Light Mode -> Switch on Dark Mode
+  if (store.get('theme') === 'light-mode') { // Actual theme = Light Mode -> Switch on Dark Mode
     root.classList.remove('light-mode')
     M.toast({ html: 'Dark theme activated' })
     store.set('theme', 'dark-mode')
@@ -629,6 +621,42 @@ document.getElementById('darkColor').addEventListener('keypress', (event) => {
   }
 })
 
+// Enable / Disable Endless Scrolling
+if (store.get('endless')) {
+  // Check the checkbox at launch
+  document.getElementById('checkboxEndlessScrolling').setAttribute('checked', 'checked')
+  // Enable Endless Scrolling
+  windowElement.addEventListener('scroll', () => {
+    if (windowElement.scrollY >= documentElement.scrollHeight - windowElement.innerHeight - 0.1) {
+      let url = getUrl(tags, imgLimit, rating)
+      pid++
+      getResults(url + `&pid=${pid}`)
+      displayPid.innerHTML = `Page ${pid}`
+    }
+  })
+}
+
+document.getElementById('checkboxEndlessScrolling').addEventListener('click', () => {
+  if (store.get('endless')) {
+    // If it's enabled, disable it
+    store.set('endless', false)
+    M.toast({ html: 'Disabled : Endless Scrolling' })
+  } else {
+    // If it's disabled, enable it
+    store.set('endless', true)
+    // Enable Endless Scrolling
+    windowElement.addEventListener('scroll', () => {
+      if (windowElement.scrollY >= documentElement.scrollHeight - windowElement.innerHeight - 0.1) {
+        let url = getUrl(tags, imgLimit, rating)
+        pid++
+        getResults(url + `&pid=${pid}`)
+        displayPid.innerHTML = `Page ${pid}`
+      }
+    })
+    M.toast({ html: 'Enabled : Endless Scrolling' })
+  }
+})
+
 // Livereload only on development environment
 if (process.env.NODE_ENV === 'development') {
   require('electron-connect').client.create()

src/store.js

@@ -7,10 +7,11 @@ module.exports = new Store({
       'accent': '#6688EC',
       'dark': '#242424'
     },
-    theme: 'dark-theme',
     windowBounds: {
       width: 1400,
       height: 800
-    }
+    },
+    theme: 'dark-theme',
+    endless: false
   }
 })