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

Fix footer/header layout

Browse Source 
Fix regression from 2bcff70450
This commit is contained in:
John Factotum
2023-05-14 23:24:44 +08:00
parent 17fb71943f
commit a0acc506c5
1 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
paginator.js
+24 -14
View File
@@ -334,7 +334,8 @@ export class Paginator {
#observer = new ResizeObserver(() => this.render()) #observer = new ResizeObserver(() => this.render())
#element = document.createElement('div') #element = document.createElement('div')
#background = document.createElement('div') #background = document.createElement('div')
#maxSizeContainer = document.createElement('div') #maxWidthContainer = document.createElement('div')
#maxHeightContainer = document.createElement('div')
#container = document.createElement('div') #container = document.createElement('div')
#header = document.createElement('div') #header = document.createElement('div')
#footer = document.createElement('div') #footer = document.createElement('div')
@@ -374,13 +375,21 @@ export class Paginator {
}) })
this.#background.classList.add('foliate-filter') this.#background.classList.add('foliate-filter')
this.#element.append(this.#maxSizeContainer) this.#element.append(this.#maxWidthContainer)
Object.assign(this.#maxSizeContainer.style, { Object.assign(this.#maxWidthContainer.style, {
width: '100%',
height: '100%',
margin: 'auto',
position: 'relative',
display: 'flex',
})
this.#maxWidthContainer.append(this.#maxHeightContainer)
Object.assign(this.#maxHeightContainer.style, {
width: '100%', width: '100%',
height: '100%', height: '100%',
margin: 'auto', margin: 'auto',
}) })
this.#maxSizeContainer.append(this.#container) this.#maxHeightContainer.append(this.#container)
Object.assign(this.#container.style, { Object.assign(this.#container.style, {
width: '100%', width: '100%',
height: '100%', height: '100%',
@@ -396,8 +405,8 @@ export class Paginator {
Object.assign(this.#footer.style, marginalStyle) Object.assign(this.#footer.style, marginalStyle)
this.#header.classList.add('foliate-header') this.#header.classList.add('foliate-header')
this.#footer.classList.add('foliate-footer') this.#footer.classList.add('foliate-footer')
this.#maxSizeContainer.append(this.#header) this.#maxWidthContainer.append(this.#header)
this.#maxSizeContainer.append(this.#footer) this.#maxWidthContainer.append(this.#footer)
this.#observer.observe(this.#element) this.#observer.observe(this.#element)
this.#container.addEventListener('scroll', debounce(() => { this.#container.addEventListener('scroll', debounce(() => {
@@ -431,8 +440,8 @@ export class Paginator {
this.#element.setAttribute('dir', vertical ? 'rtl' : 'ltr') this.#element.setAttribute('dir', vertical ? 'rtl' : 'ltr')
this.#element.style.padding = '0' this.#element.style.padding = '0'
this.#container.style.overflow ='scroll' this.#container.style.overflow ='scroll'
this.#maxSizeContainer.style.maxWidth = 'none' this.#maxWidthContainer.style.maxWidth = 'none'
this.#maxSizeContainer.style.maxHeight = 'none' this.#maxHeightContainer.style.maxHeight = 'none'
const columnWidth = this.layout.maxColumnWidth const columnWidth = this.layout.maxColumnWidth
const { width, height } = this.#container.getBoundingClientRect() const { width, height } = this.#container.getBoundingClientRect()
@@ -448,8 +457,8 @@ export class Paginator {
} }
const maxSize = `${maxColumns * maxColumnWidth}px` const maxSize = `${maxColumns * maxColumnWidth}px`
this.#maxSizeContainer.style.maxWidth = vertical ? 'none' : maxSize this.#maxWidthContainer.style.maxWidth = vertical ? 'none' : maxSize
this.#maxSizeContainer.style.maxHeight = vertical ? maxSize : 'none' this.#maxHeightContainer.style.maxHeight = vertical ? maxSize : 'none'
if (this.#shouldUpdateGap) { if (this.#shouldUpdateGap) {
this.#shouldUpdateGap = false this.#shouldUpdateGap = false
@@ -465,8 +474,8 @@ export class Paginator {
: margin}px` : margin}px`
this.#gap = gap this.#gap = gap
this.#element.style.padding = `${paddingV} ${paddingH}` this.#element.style.padding = `${paddingV} ${paddingH}`
this.#header.style.padding = `0 ${paddingH}` this.#header.style.top = `-${paddingV}`
this.#footer.style.padding = `0 ${paddingH}` this.#footer.style.bottom = `-${paddingV}`
const newRect = this.#container.getBoundingClientRect() const newRect = this.#container.getBoundingClientRect()
const newSize = vertical ? newRect.height : newRect.width const newSize = vertical ? newRect.height : newRect.width
@@ -493,10 +502,11 @@ export class Paginator {
height: `${margin}px`, height: `${margin}px`,
gridTemplateColumns: `repeat(${marginalDivisor}, 1fr)`, gridTemplateColumns: `repeat(${marginalDivisor}, 1fr)`,
gap: `${gap}px`, gap: `${gap}px`,
padding: vertical ? '0' : `0 ${gap / 2}px`,
direction: this.bookDir === 'rtl' ? 'rtl' : 'ltr', direction: this.bookDir === 'rtl' ? 'rtl' : 'ltr',
} }
Object.assign(this.#header.style, marginalStyle, { top: 0 }) Object.assign(this.#header.style, marginalStyle)
Object.assign(this.#footer.style, marginalStyle, { bottom: 0 }) Object.assign(this.#footer.style, marginalStyle)
const heads = makeMarginals(marginalDivisor) const heads = makeMarginals(marginalDivisor)
const feet = makeMarginals(marginalDivisor) const feet = makeMarginals(marginalDivisor)
this.heads = heads.map(el => el.children[0]) this.heads = heads.map(el => el.children[0])