From cbe9e0009c5f9d4085e65fb0e5c07bbc99ba1e4c Mon Sep 17 00:00:00 2001
From: John Factotum <50942278+johnfactotum@users.noreply.github.com>
Date: Tue, 28 Nov 2023 11:01:35 +0800
Subject: [PATCH] Make animation setting an attribute instead of a property

---
 README.md    | 3 +--
 paginator.js | 5 ++---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 592622c..b8ce927 100644
--- a/README.md
+++ b/README.md
@@ -172,9 +172,8 @@ The filter only applies to the book itself, leaving overlaid elements such as hi
 
 ### The Paginator
 
-There is a basic page transition effect that can be disabled by setting `.pageAnimation` to false.
-
 The layout can be configured by setting the following attributes:
+- `animated`: a [boolean attribute](https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML). If present, adds a sliding transition effect.
 - `flow`: either `paginated` or `scrolled`.
 - `margin`: a CSS `<length>`. The unit must be `px`. The height of the header and footer.
 - `gap`: a CSS `<percentage>`. The size of the space between columns, relative to page size.
diff --git a/paginator.js b/paginator.js
index d49bfb0..4eefbd1 100644
--- a/paginator.js
+++ b/paginator.js
@@ -390,7 +390,6 @@ export class Paginator extends HTMLElement {
     #scrollBounds
     #touchState
     #touchScrolled
-    pageAnimation = true
     constructor() {
         super()
         this.#root.innerHTML = `<style>
@@ -762,7 +761,7 @@ export class Paginator extends HTMLElement {
         }
         // FIXME: vertical-rl only, not -lr
         if (this.scrolled && this.#vertical) offset = -offset
-        if (reason === 'snap' || smooth && this.pageAnimation) return animate(
+        if ((reason === 'snap' || smooth) && this.hasAttribute('animated')) return animate(
             element[scrollProp], offset, 300, easeOutQuad,
             x => element[scrollProp] = x,
         ).then(() => {
@@ -932,7 +931,7 @@ export class Paginator extends HTMLElement {
             index: this.#adjacentIndex(dir),
             anchor: prev ? () => 1 : () => 0,
         })
-        if (shouldGo || !this.pageAnimation) await wait(100)
+        if (shouldGo || !this.hasAttribute('animated')) await wait(100)
         this.#locked = false
     }
     prev(distance) {