feat: slides thumbnails on large screen (#1294)

* feat: slides thumbnails aside

* feat: display thumbnails as of screen wider than 1200px

* feat: deck selector and fix list of slides in popover

* fix: spacing in fullscreen without thumbnails

* feat: navigate to slide from aside

* feat: no slide preview if thumbnails are displayed

Author: peterpeterparker

CHANGELOG.md

@@ -6,6 +6,10 @@
 
 - highlight-code: v3.3.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/highlight-code/CHANGELOG.md))
 
+### Others
+
+- - deck-utils: v4.1.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/utils/deck/CHANGELOG.md))
+
 <a name="4.8.0"></a>
 
 # [4.8.0](https://github.com/deckgo/deckdeckgo/compare/v4.7.0...v4.8.0) (2021-06-13)

studio/package-lock.json

@@ -23,7 +23,7 @@
     "@deckdeckgo/charts": "^2.1.0",
     "@deckdeckgo/color": "^4.1.0",
     "@deckdeckgo/core": "^8.2.1",
-    "@deckdeckgo/deck-utils": "^4.0.2",
+    "@deckdeckgo/deck-utils": "^4.1.0",
     "@deckdeckgo/demo": "^2.1.0",
     "@deckdeckgo/drag-resize-rotate": "^2.2.0",
     "@deckdeckgo/highlight-code": "^3.3.1",

studio/package.json

@@ -0,0 +1,19 @@
+app-slides-aside {
+  display: flex;
+  flex-direction: column;
+
+  min-height: 100%;
+  height: 100%;
+
+  width: var(--slides-aside-width);
+
+  padding: 16px;
+  overflow: scroll;
+  border-right: 1px solid #dedede;
+
+  --preview-width: calc(var(--slides-aside-width) - 32px);
+
+  app-slide-thumbnail {
+    margin-bottom: 16px;
+  }
+}

studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.scss

@@ -0,0 +1,84 @@
+import {Component, Listen, h, Host, State, Prop} from '@stencil/core';
+
+import {debounce} from '@deckdeckgo/utils';
+
+import {isSlide} from '../../../../../../../utils/deck/src';
+import {deckSelector, slideTo} from '../../../../utils/editor/deck.utils';
+
+@Component({
+  tag: 'app-slides-aside',
+  styleUrl: 'app-slides-aside.scss'
+})
+export class AppSlidesAside {
+  @State()
+  private slides: HTMLElement[] = [];
+
+  @Prop()
+  deckRef!: HTMLDeckgoDeckElement;
+
+  private readonly debounceUpdateAllSlides: () => void;
+
+  private readonly debounceUpdateSlide: (updateSlide: HTMLElement) => void;
+
+  constructor() {
+    this.debounceUpdateAllSlides = debounce(async () => {
+      await this.updateAllSlides();
+    }, 750);
+
+    this.debounceUpdateSlide = debounce(async (updateSlide: HTMLElement) => {
+      await this.updateSlide(updateSlide);
+    }, 750);
+  }
+
+  componentDidLoad() {
+    this.debounceUpdateAllSlides();
+  }
+
+  @Listen('deckDidLoad', {target: 'document'})
+  onDeckDidLoad() {
+    this.debounceUpdateAllSlides();
+  }
+
+  @Listen('deckDidChange', {target: 'document'})
+  onDeckDidChange() {
+    this.debounceUpdateAllSlides();
+  }
+
+  @Listen('slideDidUpdate', {target: 'document'})
+  onSlideDidUpdate({detail: updatedSlide}: CustomEvent<HTMLElement>) {
+    this.debounceUpdateSlide(updatedSlide);
+  }
+
+  private async updateSlide(updatedSlide: HTMLElement) {
+    const slideIndex: number = Array.from(updatedSlide.parentNode.children).indexOf(updatedSlide);
+
+    this.slides = [...this.slides.map((slide: HTMLElement, index: number) => (slideIndex === index ? (updatedSlide.cloneNode(true) as HTMLElement) : slide))];
+  }
+
+  private async updateAllSlides() {
+    const slides: NodeListOf<HTMLElement> = document.querySelectorAll(`${deckSelector} > *`);
+
+    if (!slides) {
+      return;
+    }
+
+    this.slides = Array.from(slides)
+      .filter((slide: HTMLElement) => isSlide(slide))
+      .map((slide: HTMLElement) => slide.cloneNode(true) as HTMLElement);
+  }
+
+  render() {
+    return (
+      <Host>
+        {this.slides.map((slide: HTMLElement, index: number) => (
+          <app-slide-thumbnail
+            custom-tappable
+            onClick={async () => await slideTo(index)}
+            key={slide.getAttribute('slide_id')}
+            slide={slide}
+            deck={this.deckRef}></app-slide-thumbnail>
+        ))}
+      </Host>
+    );
+  }
+}

studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx

@@ -15,7 +15,7 @@ import {MoreAction} from '../../../../../types/editor/more-action';
 
 import {BackupOfflineService} from '../../../../../services/editor/backup/backup.offline.service';
 
-import { AppIcon } from '../../../../core/app-icon/app-icon';
+import {AppIcon} from '../../../../core/app-icon/app-icon';
 
 @Component({
   tag: 'app-actions-deck',
@@ -42,9 +42,6 @@ export class AppActionsDeck {
   @Prop()
   animatePrevNextSlide: EventEmitter;
 
-  @Prop()
-  slideTo: EventEmitter;
-
   @Prop()
   toggleFullScreen: EventEmitter;
 
@@ -83,12 +80,6 @@ export class AppActionsDeck {
       cssClass: 'popover-menu popover-menu-wide'
     });
 
-    popover.onDidDismiss().then(async (detail: OverlayEventDetail) => {
-      if (detail.data >= 0) {
-        this.slideTo.emit(detail.data);
-      }
-    });
-
     await popover.present();
   }
 

studio/src/app/components/editor/actions/deck/app-actions-deck/app-actions-deck.tsx

@@ -35,8 +35,6 @@ export class AppActionsEditor {
 
   @Event() private animatePrevNextSlide: EventEmitter<boolean>;
 
-  @Event() private slideTo: EventEmitter<number>;
-
   @Event() private toggleFullScreen: EventEmitter<void>;
 
   @Event() private actionPublish: EventEmitter<void>;
@@ -214,7 +212,6 @@ export class AppActionsEditor {
         signIn={this.signIn}
         addSlide={this.addSlide}
         animatePrevNextSlide={this.animatePrevNextSlide}
-        slideTo={this.slideTo}
         toggleFullScreen={this.toggleFullScreen}
         actionPublish={this.actionPublish}
         deckDidChange={this.deckDidChange}

studio/src/app/components/editor/actions/footer/app-actions-editor/app-actions-editor.tsx

@@ -1,6 +1,3 @@
-@use "../../../../../global/theme/mixins/editor";
-@use "../../../../../global/theme/mixins/deck";
-
 app-slide-preview {
   position: absolute;
   top: var(--ios-top, 8px);
@@ -19,25 +16,4 @@ app-slide-preview {
     visibility: hidden;
     opacity: 0;
   }
-
-  article {
-    position: relative;
-
-    --preview-width: 200px;
-
-    width: var(--preview-width);
-    height: calc(var(--preview-width) * 9 / 16);
-
-    @media screen and (max-width: 768px) {
-      --preview-width: 128px;
-    }
-
-    overflow: hidden;
-
-    @include editor.panel;
-
-    deckgo-deck {
-      @include deck.padding;
-    }
-  }
 }

studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss

@@ -1,6 +1,6 @@
 import {Component, h, Host, Listen, State, Event, EventEmitter, Element, Prop} from '@stencil/core';
 
-import {cleanContent, isSlide} from '@deckdeckgo/deck-utils';
+import {isSlide} from '@deckdeckgo/deck-utils';
 import {debounce, isIOS, isLandscape} from '@deckdeckgo/utils';
 
 import {SlotUtils} from '../../../../utils/editor/slot.utils';
@@ -21,7 +21,8 @@ export class AppSlidePreview {
   @State()
   private iosPositionTop: string | undefined = undefined;
 
-  private deckPreviewRef!: HTMLDeckgoDeckElement;
+  @State()
+  private slideElement: HTMLElement | undefined = undefined;
 
   @Event({bubbles: false}) private previewAttached: EventEmitter<void>;
 
@@ -67,8 +68,6 @@ export class AppSlidePreview {
     this.preview = isSlide(selectedElement?.parentElement) && SlotUtils.isNodeEditable(selectedElement) && !SlotUtils.isNodeWordCloud(selectedElement);
 
     if (this.preview) {
-      await this.initDeckPreview();
-
       this.el.addEventListener('previewAttached', async () => await this.updateSlide(selectedElement.parentElement), {once: true});
 
       this.deckRef.addEventListener('keypress', () => this.debounceUpdatePreview(), {passive: true});
@@ -85,28 +84,8 @@ export class AppSlidePreview {
     }
   }
 
-  async initDeckPreview() {
-    if (!this.deckRef) {
-      return;
-    }
-
-    this.deckPreviewRef?.setAttribute('style', this.deckRef.style.cssText);
-
-    await this.deckPreviewRef?.initSlideSize();
-  }
-
-  async updateSlide(slide: HTMLElement | undefined) {
-    if (!slide || !this.deckPreviewRef) {
-      return;
-    }
-
-    const content: string = await cleanContent(slide.outerHTML);
-
-    this.deckPreviewRef.innerHTML = content;
-  }
-
-  private async blockSlide() {
-    await this.deckPreviewRef?.blockSlide(true);
+  private async updateSlide(slide: HTMLElement | undefined) {
+    this.slideElement = slide?.cloneNode(true) as HTMLElement | undefined;
   }
 
   private async updatePreview() {
@@ -130,7 +109,7 @@ export class AppSlidePreview {
         class={{
           preview: this.preview
         }}>
-        <article>{this.renderPreview()}</article>
+        {this.renderPreview()}
       </Host>
     );
   }
@@ -140,12 +119,6 @@ export class AppSlidePreview {
       return undefined;
     }
 
-    return (
-      <deckgo-deck
-        embedded={true}
-        keyboard={false}
-        ref={(el) => (this.deckPreviewRef = el as HTMLDeckgoDeckElement)}
-        onSlidesDidLoad={() => this.blockSlide()}></deckgo-deck>
-    );
+    return <app-slide-thumbnail slide={this.slideElement} deck={this.deckRef}></app-slide-thumbnail>;
   }
 }

studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx

@@ -0,0 +1,26 @@
+@use "../../../../../global/theme/mixins/editor";
+@use "../../../../../global/theme/mixins/deck";
+
+app-slide-thumbnail {
+  display: block;
+
+  position: relative;
+
+  width: var(--preview-width, 200px);
+  height: calc(var(--preview-width, 200px) * 9 / 16);
+  min-height: calc(var(--preview-width, 200px) * 9 / 16);
+
+  @media screen and (max-width: 768px) {
+    --preview-width: 128px;
+  }
+
+  overflow: hidden;
+
+  @include editor.panel;
+
+  deckgo-deck {
+    pointer-events: none;
+
+    @include deck.padding;
+  }
+}