RTL Support

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
      *

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
      *

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,
     };
 
     /**

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);
 }

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,
         };
     }