Bookhoard/foliate-js
1
0
Fork 0
mirror of https://github.com/john-okeefe/foliate-js.git synced 2026-09-09 11:29:14 -04:00
Code Issues Packages Projects Releases Wiki Activity

FXL: support spread both and portrait

Browse Source 
Also fix `page-spread-center` in portrait
This commit is contained in:
John Factotum
2022-10-29 16:45:17 +00:00
committed by GitHub
parent 3aad499696
commit a11fd9637d
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fixed-layout.js
+7 -3
View File
@@ -32,6 +32,7 @@ const getViewport = (doc, viewport) => {
class Container { class Container {
#element = document.createElement('div') #element = document.createElement('div')
defaultViewport defaultViewport
spread
#portrait = false #portrait = false
#left #left
#right #right
@@ -88,7 +89,8 @@ class Container {
const right = this.#center ?? this.#right const right = this.#center ?? this.#right
const target = side === 'left' ? left : right const target = side === 'left' ? left : right
const { width, height } = this.#element.getBoundingClientRect() const { width, height } = this.#element.getBoundingClientRect()
const portrait = height > width const portrait = this.spread !== 'both' && this.spread !== 'portrait'
&& height > width
this.#portrait = portrait this.#portrait = portrait
const blankWidth = left.width ?? right.width const blankWidth = left.width ?? right.width
const blankHeight = left.height ?? right.height const blankHeight = left.height ?? right.height
@@ -136,7 +138,7 @@ class Container {
this.#center = null this.#center = null
if (center) { if (center) {
this.#center = await this.#createFrame(center) this.#center = await this.#createFrame(center)
this.#side = side this.#side = 'center'
this.render() this.render()
} else { } else {
this.#left = await this.#createFrame(left) this.#left = await this.#createFrame(left)
@@ -146,6 +148,7 @@ class Container {
} }
} }
goLeft() { goLeft() {
if (this.#center) return
if (this.#left?.blank) return true if (this.#left?.blank) return true
if (this.#portrait && this.#left?.element?.style?.display === 'none') { if (this.#portrait && this.#left?.element?.style?.display === 'none') {
this.#right.element.style.display = 'none' this.#right.element.style.display = 'none'
@@ -155,6 +158,7 @@ class Container {
} }
} }
goRight() { goRight() {
if (this.#center) return
if (this.#right?.blank) return true if (this.#right?.blank) return true
if (this.#portrait && this.#right?.element?.style?.display === 'none') { if (this.#portrait && this.#right?.element?.style?.display === 'none') {
this.#left.element.style.display = 'none' this.#left.element.style.display = 'none'
@@ -243,7 +247,7 @@ export class FixedLayout {
const spread = this.#spreads[index] const spread = this.#spreads[index]
if (spread.center) { if (spread.center) {
const center = await spread.center?.load?.() const center = await spread.center?.load?.()
await this.#container.showSpread({ center, side }) await this.#container.showSpread({ center })
} else { } else {
const left = await spread.left?.load?.() const left = await spread.left?.load?.()
const right = await spread.right?.load?.() const right = await spread.right?.load?.()