@netless/app-slide 0.3.0-canary.0 → 0.3.0-canary.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.3.0-canary.0",
+  "version": "0.3.0-canary.1",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",

package/src/SlideViewer.ts

@@ -105,7 +105,7 @@ function create_sidebar() {
 
   const $preview = h("div");
   set_class($preview, "preview");
-  $preview.classList.add("tele-fancy-scrollbar");
+  $preview.classList.add(wrap_class("tele-fancy-scrollbar"));
   $preview.onclick = function on_click_preview(ev) {
     if (readonly) return;
     const page_index = (ev.target as HTMLElement).dataset?.pageIndex;
@@ -402,7 +402,6 @@ export class SlideViewer {
     this.$content = this.sidebar.$content;
     this.$footer = this.footer.$footer;
     append(this.$content, this.$slide);
-    append(this.$content, this.$footer);
 
     let resolveReady: () => void;
     this._readyPromise = new Promise(resolve => {
@@ -441,7 +440,12 @@ export class SlideViewer {
       })
     );
 
-    this.slide = new Slide({ anchor: this.$slide, ...options });
+    this.slide = new Slide({
+      anchor: this.$slide,
+      resize: true,
+      enableGlobalClick: true,
+      ...options,
+    });
     this.slide.setResource(options.taskId, options.url || DefaultUrl);
 
     let resolveFetching: (response: SlideViewerInfoResponse) => void;

package/src/fancy-scrollbar.scss

@@ -0,0 +1,57 @@
+$namespace: "netless-app-slide";
+
+$scrollbar-size: 8px;
+$scrollbar-ff-width: auto; // FF-only accepts auto, thin, none
+$scrollbar-minlength: 50px; // Minimum length of scrollbar thumb
+$scrollbar-track-color: transparent;
+$scrollbar-color: rgba(68, 78, 96, 0.1);
+$scrollbar-color-hover: rgba(68, 78, 96, 0.2);
+$scrollbar-color-active: rgba(68, 78, 96, 0.2);
+
+.#{$namespace}-tele-fancy-scrollbar {
+  overscroll-behavior: contain;
+  overflow: auto;
+  overflow-y: scroll;
+  overflow-y: overlay; // for webkit
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  scrollbar-width: $scrollbar-ff-width;
+  // Firefox has incorrect track color
+  // scrollbar-color: $scrollbar-color $scrollbar-track-color;
+
+  &::-webkit-scrollbar {
+    height: $scrollbar-size;
+    width: $scrollbar-size;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: $scrollbar-track-color;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $scrollbar-color;
+    background-color: $scrollbar-track-color;
+    border-radius: $scrollbar-size * 0.5;
+    transition: background-color 0.4s;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background-color: $scrollbar-color;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: $scrollbar-color-hover;
+  }
+
+  &::-webkit-scrollbar-thumb:active {
+    background-color: $scrollbar-color-active;
+  }
+
+  &::-webkit-scrollbar-thumb:vertical {
+    min-height: $scrollbar-minlength;
+  }
+
+  &::-webkit-scrollbar-thumb:horizontal {
+    min-width: $scrollbar-minlength;
+  }
+}

package/src/index.ts

@@ -82,8 +82,13 @@ export default SlideApp;
 
 export function previewSlide(options: SlideViewerOptions & { container: HTMLElement }) {
   const { container } = options;
+  container.style.cssText = "display:flex;flex-direction:column";
   const viewer = new SlideViewer(options);
+  container.appendChild(document.createElement("style")).textContent = SlideViewer.styles;
   container.appendChild(viewer.$content);
+  container.appendChild(viewer.$footer);
+  viewer.prepare(() => viewer.slide.renderSlide(1));
+  viewer.slide.on("slideChange", page => viewer.setPage(page));
   return viewer;
 }
 

package/src/style.scss

@@ -1,3 +1,5 @@
+@import "./fancy-scrollbar.scss";
+
 $namespace: "netless-app-slide";
 
 .#{$namespace}-content {