diff --git a/src/PageFlip.ts b/src/PageFlip.ts index 87fe9f2..2a319eb 100644 --- a/src/PageFlip.ts +++ b/src/PageFlip.ts @@ -252,6 +252,17 @@ export class PageFlip extends EventObject { this.trigger('changeOrientation', this, newOrientation); } + /** + * Call a page direction change event trigger. Update UI and rendering area + * + * @param {boolean} newRTL - New page direction + */ + public updateRTL(newRTL: boolean): void { + this.ui.setRTLStyle(newRTL); + this.update(); + this.trigger('changeRTL', this, newRTL); + } + /** * Get the total number of pages in a book * diff --git a/src/Render/Render.ts b/src/Render/Render.ts index 927ee52..f8040c7 100644 --- a/src/Render/Render.ts +++ b/src/Render/Render.ts @@ -71,6 +71,7 @@ export abstract class Render { protected direction: FlipDirection = null; /** Current book orientation */ protected orientation: Orientation = null; + protected rtl: boolean = null; /** Сurrent state of the shadows */ protected shadow: Shadow = null; /** Сurrent animation process */ @@ -191,11 +192,17 @@ export abstract class Render { public update(): void { this.boundsRect = null; const orientation = this.calculateBoundsRect(); + const rtl = this.app.getSettings().rtl; if (this.orientation !== orientation) { this.orientation = orientation; this.app.updateOrientation(orientation); } + + if (this.rtl !== rtl) { + this.rtl = rtl; + this.app.updateRTL(rtl); + } } /** @@ -337,6 +344,13 @@ export abstract class Render { return this.orientation; } + /** + * Get current book direction + */ + public getRTL(): boolean { + return this.rtl; + } + /** * Set page area while flipping * diff --git a/src/Settings.ts b/src/Settings.ts index d16510d..8d08df6 100644 --- a/src/Settings.ts +++ b/src/Settings.ts @@ -57,6 +57,8 @@ export interface FlipSetting { /** if this value is true, flipping by clicking on the whole book will be locked. Only on corners */ disableFlipByClick: boolean; + + rtl: boolean; } export class Settings { @@ -82,6 +84,7 @@ export class Settings { useMouseEvents: true, showPageCorners: true, disableFlipByClick: false, + rtl: false, }; /** diff --git a/src/Style/stPageFlip.css b/src/Style/stPageFlip.css index 5432da4..0c5e494 100644 --- a/src/Style/stPageFlip.css +++ b/src/Style/stPageFlip.css @@ -58,4 +58,12 @@ position: absolute; left: 0; top: 0; +} + +/* rtl */ +.stf__wrapper.--rtl { + transform: scaleX(-1); +} +.stf__wrapper.--rtl .stf__item > * { + transform: scaleX(-1); } \ No newline at end of file diff --git a/src/UI/UI.ts b/src/UI/UI.ts index fd1629e..e747c26 100644 --- a/src/UI/UI.ts +++ b/src/UI/UI.ts @@ -126,6 +126,21 @@ export abstract class UI { this.update(); } + /** + * Updates styles based on book direction + * + * @param {boolean} rtl - New book direction + */ + public setRTLStyle(rtl: boolean): void { + this.wrapper.classList.remove('--rtl'); + + if (rtl) { + this.wrapper.classList.add('--rtl'); + } + + this.update(); + } + protected removeHandlers(): void { window.removeEventListener('resize', this.onResize); @@ -159,9 +174,8 @@ export abstract class UI { */ private getMousePos(x: number, y: number): Point { const rect = this.distElement.getBoundingClientRect(); - return { - x: x - rect.left, + x: this.app.getSettings().rtl ? rect.width - (x - rect.left) : x - rect.left, y: y - rect.top, }; }