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

Set header/footer text color from book stylesheet

Browse Source
This commit is contained in:
John Factotum
2023-03-27 00:30:46 +08:00
parent 6d2caaad5b
commit db5fc0f679
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
paginator.js
+8 -6
View File
@@ -120,12 +120,12 @@ const getDirection = doc => {
return { vertical, rtl } return { vertical, rtl }
} }
const getBackground = doc => { const getPageStyle = doc => {
const bodyStyle = doc.defaultView.getComputedStyle(doc.body) const bodyStyle = doc.defaultView.getComputedStyle(doc.body)
return bodyStyle.backgroundColor === 'rgba(0, 0, 0, 0)' return bodyStyle.backgroundColor === 'rgba(0, 0, 0, 0)'
&& bodyStyle.backgroundImage === 'none' && bodyStyle.backgroundImage === 'none'
? doc.defaultView.getComputedStyle(doc.documentElement).background ? doc.defaultView.getComputedStyle(doc.documentElement)
: bodyStyle.background : bodyStyle
} }
const makeMarginals = length => Array.from({ length }, () => { const makeMarginals = length => Array.from({ length }, () => {
@@ -193,14 +193,14 @@ class View {
// it needs to be visible for Firefox to get computed style // it needs to be visible for Firefox to get computed style
this.#iframe.style.display = 'block' this.#iframe.style.display = 'block'
const { vertical, rtl } = getDirection(doc) const { vertical, rtl } = getDirection(doc)
const background = getBackground(doc) const { color, background } = getPageStyle(doc)
this.#iframe.style.display = 'none' this.#iframe.style.display = 'none'
this.#vertical = vertical this.#vertical = vertical
this.#rtl = rtl this.#rtl = rtl
this.#contentRange.selectNodeContents(doc.body) this.#contentRange.selectNodeContents(doc.body)
const layout = beforeRender?.({ vertical, rtl, background }) const layout = beforeRender?.({ vertical, rtl, color, background })
this.#iframe.style.display = 'block' this.#iframe.style.display = 'block'
this.render(layout) this.render(layout)
new ResizeObserver(() => this.expand()).observe(doc.body) new ResizeObserver(() => this.expand()).observe(doc.body)
@@ -415,13 +415,15 @@ export class Paginator {
this.#container.append(this.#view.element) this.#container.append(this.#view.element)
return this.#view return this.#view
} }
#beforeRender({ vertical, rtl, background }) { #beforeRender({ vertical, rtl, color, background }) {
this.#vertical = vertical this.#vertical = vertical
this.#rtl = rtl this.#rtl = rtl
// set background to `doc` background // set background to `doc` background
// 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
this.#header.style.color = color
this.#footer.style.color = color
const { flow, margin, gap, maxColumnWidth, maxColumns } = this.layout const { flow, margin, gap, maxColumnWidth, maxColumns } = this.layout