Bring back cursor autohiding

Also change "Scrolled Layout" to "Scrolled Mode"
johnfactotum · Oct 9, 2023 · af28c01 · af28c01
1 parent 1013855
commit af28c01
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 9 deletions.
diff --git a/data/com.github.johnfactotum.Foliate.gschema.xml b/data/com.github.johnfactotum.Foliate.gschema.xml
@@ -85,6 +85,9 @@
     <key name="theme" type="s">
       <default>'default'</default>
     </key>
+    <key name="autohide-cursor" type="b">
+      <default>false</default>
+    </key>
   </schema>
 
   <schema id="com.github.johnfactotum.Foliate.viewer.font"

diff --git a/data/gschemas.compiled b/data/gschemas.compiled
diff --git a/src/book-viewer.js b/src/book-viewer.js
@@ -164,6 +164,7 @@ const ViewSettings = utils.makeDataClass('FoliateViewSettings', {
     'scrolled': 'boolean',
     'invert': 'boolean',
     'theme': 'string',
+    'autohide-cursor': 'boolean',
 })
 
 const FontSettings = utils.makeDataClass('FoliateFontSettings', {
@@ -418,6 +419,7 @@ GObject.registerClass({
                 theme: view.invert ? invertTheme(theme) : theme,
                 userStylesheet,
             },
+            autohideCursor: view.autohide_cursor,
         })
     }
     #contextMenu() {

diff --git a/src/reader/reader.js b/src/reader/reader.js
@@ -316,8 +316,42 @@ footnoteDialog.addEventListener('close', () => {
 footnoteDialog.addEventListener('click', e =>
     e.target === footnoteDialog ? footnoteDialog.close() : null)
 
+class CursorAutohider {
+    #timeout
+    #el
+    #check
+    #state
+    constructor(el, check, state = {}) {
+        this.#el = el
+        this.#check = check
+        this.#state = state
+        if (this.#state.hidden) this.hide()
+        this.#el.addEventListener('mousemove', ({ screenX, screenY }) => {
+            // check if it actually moved
+            if (screenX === this.#state.x && screenY === this.#state.y) return
+            this.#state.x = screenX, this.#state.y = screenY
+            this.show()
+            if (this.#timeout) clearTimeout(this.#timeout)
+            if (check()) this.#timeout = setTimeout(this.hide.bind(this), 1000)
+        }, false)
+    }
+    cloneFor(el) {
+        return new CursorAutohider(el, this.#check, this.#state)
+    }
+    hide() {
+        this.#el.style.cursor = 'none'
+        this.#state.hidden = true
+    }
+    show() {
+        this.#el.style.cursor = 'auto'
+        this.#state.hidden = false
+    }
+}
+
 class Reader {
-    #tocView
+    autohideCursor
+    #cursorAutohider = new CursorAutohider(
+        document.documentElement, () => this.autohideCursor)
     style = {
         spacing: 1.4,
         justify: true,
@@ -338,7 +372,7 @@ class Reader {
         await this.view.open(this.book)
         document.body.append(this.view)
     }
-    setAppearance({ style, layout }) {
+    setAppearance({ style, layout, autohideCursor }) {
         Object.assign(this.style, style)
         const { theme } = style
         const $style = document.documentElement.style
@@ -356,6 +390,7 @@ class Reader {
             renderer.setStyles?.(getCSS(this.style))
         }
         document.body.classList.toggle('invert', this.style.invert)
+        this.autohideCursor = autohideCursor
     }
     #handleEvents() {
         this.view.addEventListener('relocate', e => {
@@ -452,6 +487,8 @@ class Reader {
                 if (selRange.compareBoundaryPoints(Range.END_TO_END, lastLocation.range) >= 0)
                     this.view.next()
             }, 1000))
+
+        this.#cursorAutohider.cloneFor(doc.documentElement)
     }
     #showAnnotation({ index, range, value, pos }) {
         globalThis.showSelection({ type: 'annotation', value, pos })

diff --git a/src/ui/book-viewer.ui b/src/ui/book-viewer.ui
@@ -85,18 +85,22 @@
   </section>
   <section>
     <item>
-      <attribute name="label" translatable="yes">Invert Colors in Dark Mode</attribute>
-      <attribute name="action">view.invert</attribute>
+      <attribute name="label" translatable="yes">Font &amp; Layout Settings</attribute>
+      <attribute name="action">viewer.preferences</attribute>
     </item>
+  </section>
+  <section>
     <item>
-      <attribute name="label" translatable="yes">Scrolled Layout</attribute>
+      <attribute name="label" translatable="yes">Scrolled Mode</attribute>
       <attribute name="action">view.scrolled</attribute>
     </item>
-  </section>
-  <section>
     <item>
-      <attribute name="label" translatable="yes">Font &amp; Layout Settings</attribute>
-      <attribute name="action">viewer.preferences</attribute>
+      <attribute name="label" translatable="yes">Invert Colors in Dark Mode</attribute>
+      <attribute name="action">view.invert</attribute>
+    </item>
+    <item>
+      <attribute name="label" translatable="yes">Autohide Cursor</attribute>
+      <attribute name="action">view.autohide-cursor</attribute>
     </item>
   </section>
   <section>