@netless/app-presentation 0.1.0-beta.0

package/src/preload.ts

@@ -0,0 +1,59 @@
+import type { IDisposable } from "@wopjs/disposable";
+import type { PresentationPage } from "./presentation";
+
+export class Preload implements IDisposable {
+  readonly links: HTMLLinkElement[]
+
+  head = 0
+  tail = 0
+  timer = 0
+
+  get done(): boolean {
+    return this.head == 0 && this.tail == this.pages.length
+  }
+
+  constructor(readonly pages: PresentationPage[]) {
+    this.links = new Array(pages.length)
+    this.touch(0)
+  }
+
+  touch(index: number) {
+    if (this.done) return
+    this.head = this.tail = index
+    this.timer ||= setTimeout(this.handler.bind(this))
+  }
+
+  handler() {
+    const { links } = this
+
+    while (this.head > 0 && links[this.head]) this.head--
+    if (!links[this.head]) {
+      const link = document.createElement('link')
+      links[this.head] = link
+      link.rel = 'preload'
+      link.as = 'image'
+      link.href = this.pages[this.head].src
+      document.head.appendChild(link)
+    }
+
+    while (links[this.tail]) this.tail++
+    if (this.tail < this.pages.length && !links[this.tail]) {
+      const link = document.createElement('link')
+      links[this.tail] = link
+      link.rel = 'preload'
+      link.as = 'image'
+      link.href = this.pages[this.tail].src
+      document.head.appendChild(link)
+    }
+
+    this.timer = setTimeout(this.handler.bind(this), 2_000)
+  }
+
+  dispose() {
+    clearTimeout(this.timer)
+    for (const link of this.links) {
+      link && document.head.contains(link) && document.head.removeChild(link)
+    }
+    this.links.length = 0
+  }
+}

package/src/presentation.ts

@@ -0,0 +1,317 @@
+import type { IDisposable } from '@wopjs/disposable'
+
+import { disposableStore } from '@wopjs/disposable'
+import { listen } from '@wopjs/dom'
+import { default as LazyLoad, type ILazyLoadInstance } from 'vanilla-lazyload'
+import { arrowLeftSVG, arrowRightSVG, sidebarSVG } from './icons';
+import { Preload } from './preload';
+
+export interface PresentationPage {
+  src: string;
+  width: number;
+  height: number;
+  thumbnail?: string | undefined;
+}
+
+export interface PresentationConfig {
+  readonly pages: PresentationPage[]
+  readonly readonly?: boolean
+}
+
+/**
+ * Standalone presentation slide viewer.
+ *
+ * ```html
+ * <div class="netless-app-presentation">
+ *   <div class="netless-app-presentation-content netless-app-presentation-readonly">
+ *     <div class="netless-app-presentation-preview-mask"></div>
+ *     <div class="netless-app-presentation-preview">
+ *       <a class="netless-app-presentation-preview-page">
+ *         <img :data-src="thumbnail || src">
+ *         <span class="netless-app-presentation-preview-page-name">1</span>
+ *       </a>
+ *     </div>
+ *     <div class="netless-app-presentation-image">
+ *       <img :src="src">
+ *     </div>
+ *     <div class="netless-app-presentation-wb-view" style="pointer-events: auto"></div>
+ *   </div>
+ *   <div class="netless-app-presentation-footer netless-app-presentation-readonly">
+ *     <button class="netless-app-presentation-footer-btn netless-app-presentation-btn-sidebar">
+ *       <svg class="netless-app-presentation-footer-icon-sidebar"></svg>
+ *     </button>
+ *     <div class="netless-app-presentation-page-jumps">
+ *       <button-page-back />
+ *       <button-page-next />
+ *     </div>
+ *     <div class="netless-app-presentation-page-number">
+ *       <input class="netless-app-presentation-page-number-input">
+ *       <span> / 10</span>
+ *     </div>
+ *   </div>
+ * </div>
+ * ```
+ */
+export class Presentation implements IDisposable<void> {
+  readonly namespace = "netless-app-presentation"
+  readonly dispose = disposableStore()
+  readonly pages: PresentationPage[]
+  readonly preload: Preload
+
+  dom: Element | DocumentFragment
+  contentDOM: HTMLDivElement
+  previewDOM: HTMLDivElement
+  imageDOM: HTMLDivElement
+  image: HTMLImageElement
+  whiteboardDOM: HTMLDivElement
+  footerDOM: HTMLDivElement
+  pageNumberInputDOM: HTMLInputElement
+
+  readonly: boolean
+  initialized = false
+  showPreview = false
+  pageIndex = 0
+  previewLazyload: ILazyLoadInstance | null = null
+
+  constructor(config: PresentationConfig) {
+    this.pages = config.pages
+    this.preload = new Preload(this.pages)
+    this.dispose.add(this.preload)
+    this.readonly = config.readonly ?? false
+    this.dom = document.createElement('div')
+    this.dom.className = this.namespace
+    this.contentDOM = document.createElement('div')
+    this.contentDOM.className = this.c('content')
+    this.previewDOM = document.createElement('div')
+    this.previewDOM.className = this.c('preview')
+    this.imageDOM = document.createElement('div')
+    this.imageDOM.className = this.c('image')
+    this.image = document.createElement('img')
+    this.whiteboardDOM = document.createElement('div')
+    this.whiteboardDOM.className = this.c('wb-view')
+    this.footerDOM = document.createElement('div')
+    this.footerDOM.className = this.c('footer')
+    this.pageNumberInputDOM = document.createElement('input')
+    this.pageNumberInputDOM.className = this.c('page-number-input')
+    this.initialize()
+  }
+
+  initialize() {
+    if (this.initialized) return
+    this.initialized = true
+
+    this.dispose.add(() => this.previewLazyload?.destroy())
+
+    this.contentDOM.classList.toggle(this.c('readonly'), this.readonly)
+    this.dom.appendChild(this.contentDOM)
+
+    const previewMask = this.contentDOM.appendChild(document.createElement('div'))
+    previewMask.className = this.c('preview-mask')
+    this.dispose.add(listen(previewMask, "click", ev => {
+      if (this.readonly) return
+      if (ev.target == previewMask) {
+        this.togglePreview(false)
+      }
+    }))
+
+    this.contentDOM.appendChild(this.previewDOM)
+    this.previewDOM.classList.add("tele-fancy-scrollbar")
+    const c_previewPage = this.c('preview-page')
+    const c_previewPageName = this.c('preview-page-name')
+    for (let index = 0; index < this.pages.length; ++index) {
+      const page = this.pages[index]
+      const previewSRC = page.thumbnail || this.x_oss_process(page.src)
+
+      const previewPage = document.createElement('a')
+      previewPage.className = `${c_previewPage} ${this.c(`preview-page-${index}`)}`
+      previewPage.setAttribute('href', '#')
+      previewPage.dataset.pageIndex = String(index)
+
+      const img = document.createElement('img')
+      img.width = page.width
+      img.height = page.height
+      img.dataset.src = previewSRC
+      img.dataset.pageIndex = String(index)
+
+      const name = document.createElement('span')
+      name.className = c_previewPageName
+      name.textContent = String(index + 1)
+      name.dataset.pageIndex = String(index)
+
+      previewPage.appendChild(img)
+      previewPage.appendChild(name)
+      this.previewDOM.appendChild(previewPage)
+    }
+    this.previewLazyload?.update()
+
+    this.dispose.add(listen(this.previewDOM, "click", ev => {
+      if (this.readonly) return
+      const pageIndex = (ev.target as HTMLElement).dataset?.pageIndex
+      if (pageIndex) {
+        ev.preventDefault()
+        ev.stopPropagation()
+        ev.stopImmediatePropagation()
+        this.onNewPageIndex(Number(pageIndex), 'preview')
+        this.togglePreview(false)
+      }
+    }))
+
+    this.imageDOM.appendChild(this.image)
+    this.contentDOM.appendChild(this.imageDOM)
+    this.updateImage()
+
+    this.contentDOM.appendChild(this.whiteboardDOM)
+
+    this.footerDOM.classList.toggle(this.c('readonly'), this.readonly)
+    this.dom.appendChild(this.footerDOM)
+
+    const btnSidebar = document.createElement('button')
+    btnSidebar.className = `${this.c('footer-btn')} ${this.c('btn-sidebar')}`
+    btnSidebar.appendChild(sidebarSVG(this.namespace))
+    this.footerDOM.appendChild(btnSidebar)
+    this.dispose.add(listen(btnSidebar, "click", () => {
+      if (this.readonly) return
+      this.togglePreview()
+    }))
+
+    const pageJumps = document.createElement('div')
+    pageJumps.className = this.c('page-jumps')
+    this.footerDOM.appendChild(pageJumps)
+
+    const btnPageBack = document.createElement('button')
+    btnPageBack.className = `${this.c('footer-btn')} ${this.c('btn-page-back')}`
+    btnPageBack.appendChild(arrowLeftSVG(this.namespace))
+    pageJumps.appendChild(btnPageBack)
+    this.dispose.add(listen(btnPageBack, "click", () => {
+      if (this.readonly) return
+      if (this.pageIndex > 0) this.onNewPageIndex(this.pageIndex - 1, 'navigation')
+    }))
+
+    const btnPageNext = document.createElement('button')
+    btnPageNext.className = `${this.c('footer-btn')} ${this.c('btn-page-next')}`
+    btnPageNext.appendChild(arrowRightSVG(this.namespace))
+    pageJumps.appendChild(btnPageNext)
+    this.dispose.add(listen(btnPageNext, "click", () => {
+      if (this.readonly) return
+      if (this.pageIndex < this.pages.length - 1) this.onNewPageIndex(this.pageIndex + 1, 'navigation')
+    }))
+
+    const pageNumber = document.createElement('div')
+    pageNumber.className = this.c('page-number')
+    this.footerDOM.appendChild(pageNumber)
+
+    pageNumber.appendChild(this.pageNumberInputDOM)
+    this.pageNumberInputDOM.value = String(this.pageIndex + 1)
+    this.pageNumberInputDOM.disabled = this.readonly
+    this.dispose.add(listen(this.pageNumberInputDOM, "focus", () => {
+      if (this.readonly) return
+      this.pageNumberInputDOM.select()
+    }))
+    this.dispose.add(listen(this.pageNumberInputDOM, "change", () => {
+      if (this.readonly) return
+      if (this.pageNumberInputDOM.value) {
+        this.onNewPageIndex(Number(this.pageNumberInputDOM.value) - 1, 'input')
+      }
+    }))
+
+    const totalPage = document.createElement('span')
+    totalPage.textContent = ` / ${this.pages.length}`
+    pageNumber.appendChild(totalPage)
+
+    this.dispose.add(listen(window, "keydown", ev => {
+      if (this.readonly || this.isEditable(ev.target)) return
+      if ((ev.key == 'ArrowUp' || ev.key == 'ArrowLeft') && this.pageIndex > 0)
+        this.onNewPageIndex(this.pageIndex - 1, 'keydown')
+      else if ((ev.key == 'ArrowDown' || ev.key == 'ArrowRight') && this.pageIndex < this.pages.length - 1)
+        this.onNewPageIndex(this.pageIndex + 1, 'keydown')
+    }))
+  }
+
+  setDOM(dom: Element | DocumentFragment) {
+    if (this.dom == dom) return
+    dom.appendChild(this.contentDOM)
+    dom.appendChild(this.footerDOM)
+    this.dom = dom
+  }
+
+  setReadonly(readonly: boolean) {
+    if (this.readonly == readonly) return
+    this.contentDOM.classList.toggle(this.c('readonly'), readonly)
+    this.footerDOM.classList.toggle(this.c('readonly'), readonly)
+    this.pageNumberInputDOM.disabled = readonly
+    this.togglePreview(false)
+    this.readonly = readonly
+  }
+
+  setPageIndex(pageIndex: number) {
+    if (Number.isSafeInteger(pageIndex)) {
+      this.pageIndex = pageIndex
+      this.pageNumberInputDOM.value = String(pageIndex + 1)
+      this.updateImage()
+    }
+  }
+
+  togglePreview(showPreview?: boolean) {
+    this.showPreview = showPreview ?? !this.showPreview
+    this.contentDOM.classList.toggle(this.c('preview-active'), this.showPreview)
+    if (this.showPreview) {
+      const previewPageDOM = this.previewDOM.querySelector<HTMLElement>('.' + this.c(`preview-page-${this.pageIndex}`))
+      if (previewPageDOM) {
+        this.previewLazyload ||= new LazyLoad({
+          container: this.previewDOM,
+          elements_selector: `.${this.c('preview-page>img')}`
+        })
+        this.previewDOM.scrollTo({ top: previewPageDOM.offsetTop - 16 })
+      }
+    }
+  }
+
+  // [origin] means the cause:
+  // - navigation: user clicked on the left / right button on footer
+  // - input: user filled the bottom-right page number input box
+  // - preview: user clicked on the left preview menu's item
+  // - keydown: this navigation is caused by user press left or right
+  // Fastboard dispatchDocsEvent() triggers the "navigation" and "input" cause
+  onNewPageIndex(index: number, _origin: "navigation" | "keydown" | "input" | "preview") {
+    if (0 <= index && index < this.pages.length) {
+      this.setPageIndex(index)
+    }
+  }
+
+  page(): PresentationPage | undefined {
+    return this.pages[this.pageIndex]
+  }
+
+  updateImage() {
+    const page = this.page()
+    if (!page) {
+      this.image.src = ''
+      return
+    }
+    this.image.width = page.width
+    this.image.height = page.height
+    this.image.src = page.src
+    this.preload.touch(this.pageIndex)
+  }
+
+  private c(className: string): string {
+    return `${this.namespace}-${className}`
+  }
+
+  private isEditable(el: EventTarget | null): boolean {
+    if (!el) return false
+    const { tagName } = el as HTMLElement
+    return tagName == 'INPUT' || tagName == 'TEXTAREA' || tagName == 'SELECT'
+  }
+
+  private x_oss_process(src: string): string {
+    try {
+      const url = new URL(src)
+      url.searchParams.set('x-oss-process', 'image/resize,l_50')
+      return url.toString()
+    } catch (err) {
+      console.error(err)
+      return src
+    }
+  }
+}

package/src/style.scss

@@ -0,0 +1,259 @@
+$namespace: 'netless-app-presentation';
+
+.#{$namespace} {
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+.#{$namespace}-content {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+}
+
+.#{$namespace}-preview-mask {
+  display: none;
+  position: absolute;
+  z-index: 200;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.#{$namespace}-preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  z-index: 300;
+  top: 0;
+  left: 0;
+  width: 33%;
+  max-width: 200px;
+  height: 100%;
+  padding-top: 10px;
+  transform: translateX(-100%);
+  background: rgba(237, 237, 240, 0.9);
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.11);
+  transition: transform 0.4s;
+  overflow: auto;
+  overflow-y: scroll;
+}
+
+.#{$namespace}-preview-active {
+  .#{$namespace}-preview-mask {
+    display: block;
+  }
+
+  .#{$namespace}-preview {
+    transform: translateX(0);
+  }
+}
+
+.#{$namespace}-preview-page {
+  position: relative;
+  display: block;
+  width: 55%;
+  margin-bottom: 10px;
+  font-size: 0;
+  color: transparent;
+  outline: none;
+  border: 7px solid transparent;
+  border-radius: 4px;
+  transition: border-color 0.3s;
+  user-select: none;
+
+  &:hover,
+  &.#{$namespace}-preview-page-active {
+    border-color: rgba(68, 78, 96, 0.1);
+  }
+
+  & > img {
+    width: 100%;
+    height: auto;
+    box-sizing: border-box;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+    border-radius: 1px;
+    background-color: rgba(255, 255, 255, 1);
+    box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
+  }
+}
+
+.#{$namespace}-preview-page-name {
+  position: absolute;
+  top: 1px;
+  left: -10px;
+  transform: translate(-100%);
+  text-align: right;
+  font-size: 12px;
+  color: #5f5f5f;
+  user-select: none;
+}
+
+.#{$namespace}-footer {
+  box-sizing: border-box;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  border-top: 1px solid #eeeef7;
+  color: #191919;
+}
+
+.#{$namespace}-float-footer {
+  width: 100%;
+  min-height: 26px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 2000;
+  background: rgba(249, 249, 252, 0.9);
+  transition: opacity 0.4s;
+}
+
+.#{$namespace}-footer-btn {
+  box-sizing: border-box;
+  width: 26px;
+  height: 26px;
+  font-size: 0;
+  margin: 0;
+  padding: 3px;
+  border: none;
+  border-radius: 1px;
+  outline: none;
+  color: currentColor;
+  background: transparent;
+  transition: background 0.4s;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  &:hover {
+    background: rgba(237, 237, 240, 0.9);
+  }
+
+  @media (hover: none) {
+    &:hover {
+      background: transparent !important;
+    }
+  }
+
+  & > svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  & > svg:nth-of-type(2) {
+    display: none;
+  }
+
+  &.#{$namespace}-footer-btn-playing {
+    & > svg:nth-of-type(1) {
+      display: none;
+    }
+
+    & > svg:nth-of-type(2) {
+      display: initial;
+    }
+  }
+
+  & ~ & {
+    margin-left: 15px;
+  }
+}
+
+.#{$namespace}-page-jumps {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.#{$namespace}-page-number {
+  margin-left: auto;
+  font-size: 13px;
+  user-select: none;
+  white-space: nowrap;
+  word-break: keep-all;
+}
+
+.#{$namespace}-page-number-input {
+  border: none;
+  outline: none;
+  width: 3em;
+  margin: 0;
+  padding: 0 2px;
+  text-align: right;
+  font-size: 13px;
+  line-height: 1;
+  font-weight: normal;
+  font-family: inherit;
+  border-radius: 2px;
+  color: currentColor;
+  background: transparent;
+  transition: background 0.4s;
+  user-select: text;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  &:hover,
+  &:focus,
+  &:active {
+    background: #fff;
+    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+  }
+}
+
+.#{$namespace}-readonly {
+  &.#{$namespace}-footer {
+    display: none;
+  }
+}
+
+.#{$namespace}-wb-view {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  overflow: hidden;
+  transition: opacity 0.2s;
+}
+
+.#{$namespace}-image {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  >img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+}
+
+.telebox-color-scheme-dark {
+  .#{$namespace}-page-number-input {
+    color: #a6a6a8;
+  }
+  .#{$namespace}-page-number-input:active,
+  .#{$namespace}-page-number-input:focus,
+  .#{$namespace}-page-number-input:hover {
+    color: #222;
+  }
+  .#{$namespace}-footer {
+    color: #a6a6a8;
+    background: #2d2d33;
+    border-top: none;
+  }
+  .#{$namespace}-footer-btn:hover {
+    background: #212126;
+  }
+  .#{$namespace}-preview {
+    background: rgba(50, 50, 50, 0.9);
+  }
+}