Fixed a bug with resizing the window after updating book state

src/PageFlip.ts

@@ -164,6 +164,14 @@ export class PageFlip extends EventObject {
         });
     }
 
+    /**
+     * Clear pages from HTML (remove to initinalState)
+     */
+    public clear(): void {
+        this.pages.destroy();
+        (this.ui as HTMLUI).clear();
+    }
+
     /**
      * Turn to the previous page (without animation)
      */

src/UI/HTMLUI.ts

@@ -1,44 +1,59 @@
-import {UI} from "./UI";
-import {PageFlip} from "../PageFlip";
-import {FlipSetting} from "../Settings";
+import { UI } from './UI';
+import { PageFlip } from '../PageFlip';
+import { FlipSetting } from '../Settings';
 
 /**
  * UI for HTML mode
  */
 export class HTMLUI extends UI {
-    constructor(inBlock: HTMLElement, app: PageFlip, setting: FlipSetting, items: NodeListOf<HTMLElement> | HTMLElement[]) {
+    private items: NodeListOf<HTMLElement> | HTMLElement[];
+
+    constructor(
+        inBlock: HTMLElement,
+        app: PageFlip,
+        setting: FlipSetting,
+        items: NodeListOf<HTMLElement> | HTMLElement[]
+    ) {
         super(inBlock, app, setting);
 
         // Second wrapper to HTML page
         this.wrapper.insertAdjacentHTML('afterbegin', '<div class="stf__block"></div>');
 
         this.distElement = inBlock.querySelector('.stf__block');
 
+        this.items = items;
         for (const item of items) {
             this.distElement.appendChild(item);
         }
 
         this.setHandlers();
     }
 
+    public clear(): void {
+        for (const item of this.items) {
+            this.parentElement.appendChild(item);
+        }
+    }
+
     /**
      * Update page list from HTMLElements
-     * 
+     *
      * @param {(NodeListOf<HTMLElement>|HTMLElement[])} items - List of pages as HTML Element
      */
     public updateItems(items: NodeListOf<HTMLElement> | HTMLElement[]): void {
         this.removeHandlers();
 
-        this.distElement.innerHTML = "";
+        this.distElement.innerHTML = '';
 
         for (const item of items) {
             this.distElement.appendChild(item);
         }
+        this.items = items;
 
         this.setHandlers();
     }
 
     public update(): void {
         this.app.getRender().update();
     }
-}
+}

src/UI/UI.ts

@@ -13,6 +13,8 @@ type SwipeData = {
  * UI Class, represents work with DOM
  */
 export abstract class UI {
+    protected readonly parentElement: HTMLElement;
+
     protected readonly app: PageFlip;
     protected readonly wrapper: HTMLElement;
     protected distElement: HTMLElement;
@@ -33,6 +35,8 @@ export abstract class UI {
      * @param {FlipSetting} setting - Configuration object
      */
     protected constructor(inBlock: HTMLElement, app: PageFlip, setting: FlipSetting) {
+        this.parentElement = inBlock;
+
         inBlock.classList.add('stf__parent');
         // Add first wrapper
         inBlock.insertAdjacentHTML('afterbegin', '<div class="stf__wrapper"></div>');
@@ -134,8 +138,9 @@ export abstract class UI {
     }
 
     protected setHandlers(): void {
+        window.addEventListener('resize', this.onResize, false);
         if (!this.app.getSettings().useMouseEvents) return;
-        
+
         this.distElement.addEventListener('mousedown', this.onMouseDown);
         this.distElement.addEventListener('touchstart', this.onTouchStart);
         window.addEventListener('mousemove', this.onMouseMove);