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

Make margin relative to page width

Browse Source
This commit is contained in:
John Factotum
2023-05-01 23:04:53 +08:00
parent 9068d70acc
commit 7486360390
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
paginator.js
+7 -2
View File
@@ -352,7 +352,7 @@ export class Paginator {
#styleMap = new WeakMap() #styleMap = new WeakMap()
layout = { layout = {
margin: 48, margin: 48,
gap: 40, gap: 0.05,
maxColumnWidth: 700, maxColumnWidth: 700,
} }
constructor({ book, onLoad, onRelocated, createOverlayer }) { constructor({ book, onLoad, onRelocated, createOverlayer }) {
@@ -422,7 +422,7 @@ export class Paginator {
// this is needed because the iframe does not fill the whole element // this is needed because the iframe does not fill the whole element
this.#background.style.background = background this.#background.style.background = background
const { flow, margin, gap, maxColumnWidth, maxColumns } = this.layout const { flow, margin, gap: gape, maxColumnWidth, maxColumns } = this.layout
if (flow === 'scrolled') { if (flow === 'scrolled') {
// FIXME: vertical-rl only, not -lr // FIXME: vertical-rl only, not -lr
@@ -432,6 +432,10 @@ export class Paginator {
this.#maxSizeContainer.style.maxWidth = 'none' this.#maxSizeContainer.style.maxWidth = 'none'
const columnWidth = this.layout.maxColumnWidth const columnWidth = this.layout.maxColumnWidth
const { width, height } = this.#container.getBoundingClientRect()
const size = vertical ? height : width
const gap = gape * size
this.heads = null this.heads = null
this.feet = null this.feet = null
this.#header.replaceChildren() this.#header.replaceChildren()
@@ -443,6 +447,7 @@ export class Paginator {
this.#maxSizeContainer.style.maxWidth = `${maxColumns * maxColumnWidth}px` this.#maxSizeContainer.style.maxWidth = `${maxColumns * maxColumnWidth}px`
const { width, height } = this.#container.getBoundingClientRect() const { width, height } = this.#container.getBoundingClientRect()
const size = vertical ? height : width const size = vertical ? height : width
const gap = gape * size
const divisor = Math.ceil(size / maxColumnWidth) const divisor = Math.ceil(size / maxColumnWidth)
const columnWidth = (size / divisor) - gap const columnWidth = (size / divisor) - gap
this.#element.setAttribute('dir', rtl ? 'rtl' : 'ltr') this.#element.setAttribute('dir', rtl ? 'rtl' : 'ltr')