From 3aad499696b3efc0bb128319ac76d766fe0145fd Mon Sep 17 00:00:00 2001
From: John Factotum <50942278+johnfactotum@users.noreply.github.com>
Date: Sat, 29 Oct 2022 16:10:56 +0000
Subject: [PATCH] FXL: `page-spread-center` and `spread` `none`

---
 epub.js         | 14 +++++++++++---
 fixed-layout.js | 36 +++++++++++++++++++++++++-----------
 2 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/epub.js b/epub.js
index de781a5..4247cb9 100644
--- a/epub.js
+++ b/epub.js
@@ -567,6 +567,16 @@ class Loader {
 const getHTMLFragment = (doc, id) => doc.getElementById(id)
     ?? doc.querySelector(`[name="${CSS.escape(id)}"]`)
 
+const getPageSpread = properties => {
+    for (const p of properties) {
+        if (p === 'page-spread-left' || p === 'rendition:page-spread-left')
+            return 'left'
+        if (p === 'page-spread-right' || p === 'rendition:page-spread-right')
+            return 'right'
+        if (p === 'rendition:page-spread-center') return 'center'
+    }
+}
+
 export class EPUB {
     parser = new DOMParser()
     #encryption
@@ -624,9 +634,7 @@ export class EPUB {
                 size: this.getSize(item.href),
                 cfi: this.resources.cfis[index],
                 linear,
-                forceLeft: properties.includes('page-spread-left'),
-                forceRight: properties.includes('page-spread-right'),
-                forceCenter: properties.includes('page-spread-center'),
+                pageSpread: getPageSpread(properties),
                 resolveHref: href => resolveURL(href, item.href),
             }
         }).filter(s => s)
diff --git a/fixed-layout.js b/fixed-layout.js
index d3b5bf8..7e73d39 100644
--- a/fixed-layout.js
+++ b/fixed-layout.js
@@ -35,6 +35,7 @@ class Container {
     #portrait = false
     #left
     #right
+    #center
     #side
     constructor() {
         Object.assign(this.#element.style, {
@@ -83,8 +84,8 @@ class Container {
     }
     render(side = this.#side) {
         if (!side) return
-        const left = this.#left
-        const right = this.#right
+        const left = this.#left ?? {}
+        const right = this.#center ?? this.#right
         const target = side === 'left' ? left : right
         const { width, height } = this.#element.getBoundingClientRect()
         const portrait = height > width
@@ -121,15 +122,22 @@ class Container {
                 element.style.display = 'none'
             }
         }
-        transform(left, 'left')
-        transform(right, 'right')
+        if (this.#center) {
+            transform(this.#center)
+        } else {
+            transform(left)
+            transform(right)
+        }
     }
     async showSpread({ left, right, center, side }) {
         this.#element.replaceChildren()
         this.#left = null
         this.#right = null
+        this.#center = null
         if (center) {
-            // TODO
+            this.#center = await this.#createFrame(center)
+            this.#side = side
+            this.render()
         } else {
             this.#left = await this.#createFrame(left)
             this.#right = await this.#createFrame(right)
@@ -163,28 +171,34 @@ export class FixedLayout {
     #container = new Container()
     constructor({ book, onLoad, onRelocated }) {
         this.book = book
-        this.#container.defaultViewport = book.rendition?.viewport
         this.onLoad = onLoad
         this.onRelocated = onRelocated
 
+        const { rendition } = book
+        this.#container.spread = rendition?.spread
+        this.#container.defaultViewport = rendition?.viewport
+
         const rtl = book.dir === 'rtl'
         const ltr = !rtl
         this.rtl = rtl
-        this.#spreads = book.sections.reduce((arr, section) => {
+
+        if (rendition?.spread === 'none')
+            this.#spreads = book.sections.map(section => ({ center: section }))
+        else this.#spreads = book.sections.reduce((arr, section) => {
             const last = arr[arr.length - 1]
-            const { linear, forceCenter, forceLeft, forceRight } = section
+            const { linear, pageSpread } = section
             if (linear === 'no') return arr
             const newSpread = () => {
                 const spread = {}
                 arr.push(spread)
                 return spread
             }
-            if (forceCenter) newSpread().center = section
-            else if (forceLeft) {
+            if (pageSpread === 'center') newSpread().center = section
+            else if (pageSpread === 'left') {
                 const spread = last.center || last.left || ltr ? newSpread() : last
                 spread.left = section
             }
-            else if (forceRight) {
+            else if (pageSpread === 'right') {
                 const spread = last.center || last.right || rtl ? newSpread() : last
                 spread.right = section
             }