diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js index 8e0a987c1c..211c2cdea9 100644 --- a/src/plugins/bookPlayer/plugin.js +++ b/src/plugins/bookPlayer/plugin.js @@ -29,15 +29,20 @@ export class BookPlayer { this.theme = 'light'; } this.themes = { - 'dark': { 'body': { 'color': '#d8dadc', 'background': '#000' } }, - 'sepia': { 'body': { 'color': '#d8a262', 'background': '#000' } }, - 'light': { 'body': { 'color': '#000', 'background': '#fff' } } + 'dark': { 'body': { 'color': '#d8dadc', 'background': '#000', 'font-size': 'medium' } }, + 'sepia': { 'body': { 'color': '#d8a262', 'background': '#000', 'font-size': 'medium' } }, + 'light': { 'body': { 'color': '#000', 'background': '#fff', 'font-size': 'medium' } } } this.themeOrder = ['dark', 'sepia', 'light']; + this.fontSize = 'medium'; + this.fontSizeOrder = ['x-small', 'small', 'medium', 'large', 'x-large']; + this.onDialogClosed = this.onDialogClosed.bind(this); this.openTableOfContents = this.openTableOfContents.bind(this); this.rotateTheme = this.rotateTheme.bind(this); + this.increaseFontSize = this.increaseFontSize.bind(this); + this.decreaseFontSize = this.decreaseFontSize.bind(this); this.previous = this.previous.bind(this); this.next = this.next.bind(this); this.onWindowKeyUp = this.onWindowKeyUp.bind(this); @@ -177,6 +182,8 @@ export class BookPlayer { elem.querySelector('#btnBookplayerToc').addEventListener('click', this.openTableOfContents); elem.querySelector('#btnBookplayerFullscreen').addEventListener('click', this.toggleFullscreen); elem.querySelector('#btnBookplayerRotateTheme').addEventListener('click', this.rotateTheme); + elem.querySelector('#btnBookplayerIncreaseFontSize').addEventListener('click', this.increaseFontSize); + elem.querySelector('#btnBookplayerDecreaseFontSize').addEventListener('click', this.decreaseFontSize); elem.querySelector('#btnBookplayerPrev')?.addEventListener('click', this.previous); elem.querySelector('#btnBookplayerNext')?.addEventListener('click', this.next); } @@ -198,6 +205,8 @@ export class BookPlayer { elem.querySelector('#btnBookplayerToc').removeEventListener('click', this.openTableOfContents); elem.querySelector('#btnBookplayerFullscreen').removeEventListener('click', this.toggleFullscreen); elem.querySelector('#btnBookplayerRotateTheme').removeEventListener('click', this.rotateTheme); + elem.querySelector('#btnBookplayerIncreaseFontSize').removeEventListener('click', this.increaseFontSize); + elem.querySelector('#btnBookplayerDecreaseFontSize').removeEventListener('click', this.decreaseFontSize); elem.querySelector('#btnBookplayerPrev')?.removeEventListener('click', this.previous); elem.querySelector('#btnBookplayerNext')?.removeEventListener('click', this.next); } @@ -237,6 +246,26 @@ export class BookPlayer { } } + increaseFontSize() { + if (this.loaded) { + if (this.fontSize !== this.fontSizeOrder[this.fontSizeOrder.length - 1]) { + const newFontSize = this.fontSizeOrder[(this.fontSizeOrder.indexOf(this.fontSize) + 1)]; + this.rendition.themes.fontSize(newFontSize); + this.fontSize = newFontSize; + } + } + } + + decreaseFontSize() { + if (this.loaded) { + if (this.fontSize !== this.fontSizeOrder[0]) { + const newFontSize = this.fontSizeOrder[(this.fontSizeOrder.indexOf(this.fontSize) - 1)]; + this.rendition.themes.fontSize(newFontSize); + this.fontSize = newFontSize; + } + } + } + previous(e) { e?.preventDefault(); if (this.rendition) { diff --git a/src/plugins/bookPlayer/template.html b/src/plugins/bookPlayer/template.html index 1bc0e3053f..55fd02c8a1 100644 --- a/src/plugins/bookPlayer/template.html +++ b/src/plugins/bookPlayer/template.html @@ -14,6 +14,12 @@ + +