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

Media Overlay: support playback-active-class

Browse Source
This commit is contained in:
John Factotum
2024-09-26 13:23:40 +08:00
parent 357c129b5d
commit f3afcabd96
1 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
view.js
+9 -2
View File
@@ -111,8 +111,8 @@ export class View extends HTMLElement {
this.#root.append(this.renderer)
if (book.sections.some(section => section.mediaOverlay)) {
book.media.activeClass ||= '-epub-media-overlay-active'
const activeClass = book.media.activeClass
const playbackActiveClass = book.media.playbackActiveClass
this.mediaOverlay = book.getMediaOverlay()
let lastActive
this.mediaOverlay.addEventListener('highlight', e => {
@@ -123,11 +123,18 @@ export class View extends HTMLElement {
.find(x => x.index = resolved.index)
const el = resolved.anchor(doc)
el.classList.add(activeClass)
if (playbackActiveClass) el.ownerDocument
.documentElement.classList.add(playbackActiveClass)
lastActive = new WeakRef(el)
})
})
this.mediaOverlay.addEventListener('unhighlight', () => {
lastActive?.deref()?.classList?.remove(activeClass)
const el = lastActive?.deref()
if (el) {
el.classList.remove(activeClass)
if (playbackActiveClass) el.ownerDocument
.documentElement.classList.remove(playbackActiveClass)
}
})
}
}