@netless/forge-slide 0.1.1-alpha.6 → 0.1.1-alpha.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/forge-slide",
-  "version": "0.1.1-alpha.6",
+  "version": "0.1.1-alpha.8",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/SiderBarView.ts

@@ -7,6 +7,7 @@ interface SideBarViewEvents {
 
 export class SideBarView extends EventEmitter<SideBarViewEvents> {
     public readonly root: HTMLDivElement = document.createElement("div");
+    private isShow: boolean = false;
     private itemList: HTMLDivElement[] = [];
 
     public constructor() {
@@ -21,13 +22,14 @@ export class SideBarView extends EventEmitter<SideBarViewEvents> {
         this.root.style.zIndex = "5";
         this.root.style.transition = "left 0.3s ease-in-out";
         this.root.style.overflow = "auto";
-        this.root.style.border = "1px solid #ccc";
-        this.root.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.1)";
         this.root.style.display = "flex";
         this.root.style.flexDirection = "column";
         this.root.style.justifyContent = "flex-start";
         this.root.style.alignItems = "center";
+    }
 
+    get isShowSideBar(): boolean {
+        return this.isShow;
     }
 
     private onMouseOver = (itemContainer: HTMLDivElement) => {
@@ -50,7 +52,6 @@ export class SideBarView extends EventEmitter<SideBarViewEvents> {
             itemContainer.style.display = "flex";
             itemContainer.style.justifyContent = "center";
             itemContainer.style.alignItems = "flex-start";
-            itemContainer.style.border = "7px solid transparent";
             itemContainer.style.position = "relative";
             itemContainer.style.borderRadius = "4px"
             itemContainer.style.transition = "border-color .3s";
@@ -81,6 +82,26 @@ export class SideBarView extends EventEmitter<SideBarViewEvents> {
         }
     }
 
+    public hidden() {
+        if (!this.root) {
+            return;
+        }
+        this.root.style.left = "-240px";
+        this.root.style.border = "none";
+        this.root.style.boxShadow = "none";
+        this.isShow = false;
+    }
+
+    public show() {
+        if (!this.root) {
+            return;
+        }
+        this.root.style.left = "0";
+        this.root.style.border = "1px solid #ccc";
+        this.root.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.1)";
+        this.isShow = true;
+    }
+
     public dispose() {
         this.itemList.forEach(item => {
             item.removeEventListener("mouseover", () => this.onMouseOver(item))

package/src/Slide.ts

@@ -42,6 +42,8 @@ export class SlideForge extends EventEmitter<SlideEvents> implements Application
     public readonly view!: HTMLDivElement;
     public readonly permissions!: ForgeSlidePermissions;
     public readonly footView!: HTMLDivElement;
+    public readonly sideBarView!: HTMLDivElement;
+    public readonly whiteboardView!: HTMLDivElement;
     /**
      * 当前页面索引, 从 0 开始
      */

package/src/SlideApplication.ts

@@ -119,10 +119,10 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
             if (!this.permissions.hasPermission(ForgeSlidePermissionFlag.changePage)) {
                 return;
             }
-            if (this.sideBar.root.style.left === "0px") {
-                this.sideBar.root.style.left = "-240px";
+            if (this.sideBar.isShowSideBar) {
+                this.sideBar.hidden();
             } else {
-                this.sideBar.root.style.left = "0px";
+                this.sideBar.show();
             }
         })
 
@@ -131,97 +131,91 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
         this.emitter.on("renderStart", pageIndex => {
             this.footer.prevPageState(pageIndex !== 0);
         });
-
-        const that = this;
-        Object.defineProperty(this.emitter, "view", {
-            get(): any {
-                return that.rootView;
-            }
-        });
-        Object.defineProperty(this.emitter, "permissions", {
-            get(): any {
-                return that.permissions;
-            }
-        });
-        Object.defineProperty(this.emitter, "footView", {
-            get(): any {
-                return that.footer.root;
-            }
-        })
-        Object.defineProperty(this.emitter, "pageIndex", {
-            get(): any {
-                return that.currentSlideIndex;
-            }
-        });
-        Object.defineProperty(this.emitter, "pageCount", {
-            get(): any {
-                return that.slideCount;
-            }
-        });
-        Object.defineProperty(this.emitter, "goto", {
-            writable: false,
-            enumerable: false,
-            value: (pageIndex: number) => {
-                this.sideBar.emit("pageChange", pageIndex);
-            }
-        });
-        Object.defineProperty(this.emitter, "nextStep", {
-            writable: false,
-            enumerable: false,
-            value: () => {
-                this.footer.emit("nextStep");
-            }
-        })
-        Object.defineProperty(this.emitter, "prevStep", {
-            writable: false,
-            enumerable: false,
-            value: () => {
-                this.footer.emit("prevStep");
-            }
-        })
-        Object.defineProperty(this.emitter, "nextPage", {
-            writable: false,
-            enumerable: false,
-            value: () => {
-                this.footer.emit("nextPage");
-            }
-        })
-        Object.defineProperty(this.emitter, "prevPage", {
-            writable: false,
-            enumerable: false,
-            value: () => {
-                this.footer.emit("prevPage");
-            }
-        })
-        Object.defineProperty(this.emitter, "sideBarToggle", {
-            writable: false,
-            enumerable: false,
-            value: () => {
-                this.footer.emit("sideBarToggle");
-            }
-        })
-        Object.defineProperty(this.emitter, "imgContent", {
-            writable: false,
-            enumerable: false,
-            value: (pageIndex: number) => {
-                return this.getImageContent(pageIndex);
-            }
-        })
-
-        Object.defineProperty(this.emitter, "imgUrl", {
-            writable: false,
+        const propertyConfig = {
+            configurable: false,
             enumerable: false,
-            value: (pageIndex: number) => {
-                return this.getImageUrl(pageIndex);
-            }
-        })
-
-        Object.defineProperty(this.emitter, "imgSize", {
-            writable: false,
-            enumerable: false,
-            value: (pageIndex: number) => {
-                return this.getImageSize(pageIndex);
-            }
+            writable: false
+        }
+        const that = this;
+        Object.defineProperties(this.emitter, {
+            view: {
+                get(): HTMLDivElement { return that.rootView }
+            },
+            permissions: {
+                get(): ForgeSlidePermissions { return that.permissions }
+            },
+            footView: {
+                get(): HTMLDivElement { return that.footer.root }
+            },
+            sidebarView: {
+                get(): HTMLDivElement { return that.sideBar.root }
+            },
+            whiteboardView: {
+                get(): HTMLDivElement { return that.whiteboard.view }
+            },
+            slideView: {
+                get(): HTMLDivElement { return that.slideContainer }
+            },
+            pageIndex: {
+                get(): number { return that.currentSlideIndex }
+            },
+            pageCount: {
+                get(): number { return that.slideCount }
+            },
+            goto: {
+                ...propertyConfig,
+                value: (pageIndex: number) => {
+                    this.sideBar.emit("pageChange", pageIndex);
+                }
+            },
+            nextStep: {
+                ...propertyConfig,
+                value: () => {
+                    this.footer.emit("nextStep");
+                }
+            },
+            prevStep: {
+                ...propertyConfig,
+                value: () => {
+                    this.footer.emit("prevStep");
+                }
+            },
+            nextPage: {
+                ...propertyConfig,
+                value: () => {
+                    this.footer.emit("nextPage");
+                }
+            },
+            prevPage: {
+                ...propertyConfig,
+                value: () => {
+                    this.footer.emit("prevPage");
+                }
+            },
+            sideBarToggle: {
+                ...propertyConfig,
+                value: () => {
+                    this.footer.emit("sideBarToggle");
+                }
+            },
+            imgContent: {
+                ...propertyConfig,
+                value: (pageIndex: number) => {
+                    return this.getImageContent(pageIndex);
+                }
+            },
+            imgUrl: {
+                ...propertyConfig,
+                value: (pageIndex: number) => {
+                    return this.getImageUrl(pageIndex);
+                }
+            },
+            imgSize: {
+                ...propertyConfig,
+                value: (pageIndex: number) => {
+                    return this.getImageSize(pageIndex);
+                }
+            },
         })
     }
 
@@ -318,6 +312,26 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
         }
     }
 
+    private keyBoardEvents = (event: KeyboardEvent) => {
+        if (event.key === "ArrowLeft") {
+            this.footer.emit("prevStep");
+        } else if (event.key === "ArrowRight") {
+            this.footer.emit("nextStep");
+        } else if (event.key === "ArrowUp") {
+            this.footer.emit("prevPage");
+        } else if (event.key === "ArrowDown") {
+            this.footer.emit("nextPage");
+        }
+    }
+
+    private bindKeyBoardEvent() {
+        document.addEventListener("keydown", this.keyBoardEvents);
+    }
+
+    private unbindKeyBoarEvent() {
+        document.removeEventListener("keydown", this.keyBoardEvents);
+    }
+
     public async initialize(option: SlideApplicationOption): Promise<void> {
         this.prefix = option.prefix;
         this.taskId = option.taskId;
@@ -385,35 +399,40 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
         this.slide.setResource(option.taskId, option.prefix);
         this.sideBar.initialize(json.slideCount, option);
 
-        this.slide.on("syncDispatch", event => {
+        this.slide.on(SLIDE_EVENTS.syncDispatch, event => {
             this.getMap(this.name).set("syncSlide", {
                 slideState: this.slide.slideState,
                 dispatch: event,
             })
         })
 
-        this.slide.on("mainSeqStepStart", (animateIndex: number) => {
+        this.slide.on(SLIDE_EVENTS.mainSeqStepStart, (animateIndex: number) => {
             this.emitter.emit("mainSeqStepStart", animateIndex);
         })
 
-        this.slide.on("mainSeqStepEnd", (animateIndex: number) => {
+        this.slide.on(SLIDE_EVENTS.mainSeqStepEnd, (animateIndex: number) => {
             this.emitter.emit("mainSeqStepEnd", animateIndex);
         })
 
-        this.slide.on("renderStart", (slideIndex) => {
+        this.slide.on(SLIDE_EVENTS.animateStart, () => {
+            this.sideBar.hidden();
+        })
+
+        this.slide.on(SLIDE_EVENTS.renderStart, (slideIndex) => {
             this.whiteboardApp.emitter.view.style.opacity = "0";
             this.whiteboardApp.emitter.addPage(`${slideIndex}`);
             this.whiteboardApp.emitter.gotoPage(`${slideIndex}`);
             this.emitter.emit("renderStart", slideIndex);
+            this.sideBar.hidden();
         })
 
-        this.slide.on("renderEnd", (slideIndex) => {
+        this.slide.on(SLIDE_EVENTS.renderEnd, (slideIndex) => {
             this.currentSlideIndex = slideIndex;
             this.whiteboardApp.emitter.view.style.opacity = "1";
             this.emitter.emit("renderEnd", slideIndex);
         });
 
-       this.slide.on("stateChange", (state) => {
+       this.slide.on(SLIDE_EVENTS.stateChange, (state) => {
            this.getMap(this.name).set("slideState", state)
        })
 
@@ -442,8 +461,30 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
                 }
             }
         });
-        this.permissions.addPermission(ForgeSlidePermissionFlag.all);
         this.whiteboardApp.disableViewModel();
+        if (this.window) {
+            let prevStatus = "normal";
+            this.window.on("statusChange", (status) => {
+                if (prevStatus === "minimized") {
+                    this.bindKeyBoardEvent();
+                    prevStatus = status;
+                    return;
+                }
+                prevStatus = status;
+                if (status === "normal") {
+                    this.bindKeyBoardEvent();
+                } else if (status === "minimized") {
+                    this.unbindKeyBoarEvent();
+                }
+            })
+            this.window.on("focusedChange", (status) => {
+                if (status) {
+                    this.bindKeyBoardEvent();
+                } else {
+                    this.unbindKeyBoarEvent();
+                }
+            })
+        }
         // @ts-ignore
         window.__forge_slide = this;
         // @ts-ignore
@@ -461,7 +502,6 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
         this.slide.destroy();
         this.sideBar.dispose();
         this.getMap(this.name).unobserve(this.onSlideEventHandler)
-        return Promise.resolve(undefined);
     }
 
 }