How to use @deckdeckgo/utils - 10 common examples

return new Promise(async (resolve) => {
            if (!$event) {
                resolve();
                return;
            }

            if (!$event.target || !($event.target instanceof HTMLElement)) {
                resolve();
                return;
            }

            if ($event instanceof MouseEvent && isMobile()) {
                resolve();
                return;
            }

            // Click on the pager
            if (!($event.target as HTMLElement).nodeName || ($event.target as HTMLElement).nodeName.toLowerCase() === 'deckgo-deck') {
                resolve();
                return;
            }

            // Need to move a bit the mouse first to detect that we want to edit, otherwise we might select the deck with a click without displaying the toolbar footer
            if (this.fullscreen && this.presenting) {
                resolve();
                return;
            }

private onWindowResize = async () => {
        this.fullscreen = isFullscreen();

        // Per default, when we switch to the fullscreen mode, we want to present the presentation not edit it
        await this.updatePresenting(this.fullscreen);
    };

await this.fetchSlides();
            }

            this.slidesFetched = true;
        });

        this.busySubscription = this.busyService.watchSlideEditable().subscribe(async (slide: HTMLElement) => {
            // Hide actions footer till deck is editable
            this.hideFooterActions = false;

            this.slidesEditable = true;

            await this.contentEditable(slide);
        });

        this.fullscreen = isFullscreen();
    }

return new Promise((resolve) => {
      // Only on mobile devices
      if (DeckDeckGoUtils.isMobile()) {
        const info: HTMLElement = this.el.querySelector('[slot=\'info\']');

        if (info && info.classList.contains('deckgo-show-info')) {
          info.classList.remove('deckgo-show-info');
          info.style.setProperty('pointer-events', 'none');

          resolve(true);
          return;
        }
      }

      resolve(false);
    });
  }

return new Promise(async (resolve) => {
            const deckgoRemoteElement = this.el.querySelector('deckgo-remote');

            if (!deckgoRemoteElement || !window) {
                resolve();
                return;
            }

            const config: EnvironmentDeckDeckGoConfig = EnvironmentConfigService.getInstance().get('deckdeckgo');
            deckgoRemoteElement.socketUrl = config.socketUrl;

            deckgoRemoteElement.addEventListener('event', async ($event) => {
                await this.remoteEvent($event)
            });

            window.addEventListener('resize', debounce(async () => {
                await this.initRemoteSize();
            }, 300));

            await this.initSlidesDidLoadListener();

            await this.initDeckMove();

            await this.remoteService.init();

            this.el.addEventListener('slideDelete', this.onSlideDelete, false);
            this.el.addEventListener('slideDidUpdate', this.slideDidUpdate, false);
            this.el.addEventListener('pollUpdated', this.pollUpdated, false);
            this.el.addEventListener('deckDidChange', this.deckDidChange, false);

            resolve();
        });

private emit(type: DeckdeckgoEventType, e: any) {
        this.communicationService.emit({
            type: type,
            emitter: DeckdeckgoEventEmitter.APP,
            action: this.action,
            clientX: unifyEvent(e).clientX - this.widthOffset,
            clientY: unifyEvent(e).clientY - this.heightOffset,
            windowWidth: this.width,
            windowHeight: this.height,
            color: this.color
        });
    }

private startEvent = (e: MouseEvent) => {
        this.emit(DeckdeckgoEventType.START_DRAWING, e);

        this.startX = unifyEvent(e).clientX - this.deckLeftOffset - this.widthOffset;
        this.startY = unifyEvent(e).clientY - this.heightOffset;

        if (this.action === DeckdeckgoDrawAction.CIRCLE) {
            this.drawables.push(new Circle({x: this.startX, y: this.startY}, {
                x: this.startX,
                y: this.startY
            }, this.color))
        }

        this.drawEvents = true;
    };

private emit(type: DeckdeckgoEventType, e: any) {
        this.communicationService.emit({
            type: type,
            emitter: DeckdeckgoEventEmitter.APP,
            action: this.action,
            clientX: unifyEvent(e).clientX - this.widthOffset,
            clientY: unifyEvent(e).clientY - this.heightOffset,
            windowWidth: this.width,
            windowHeight: this.height,
            color: this.color
        });
    }

return new Promise((resolve) => {
      this.communicationService.emit({
        type: type,
        emitter: DeckdeckgoEventEmitter.DECK,
        length: this.length,
        deck: this.deck,
        mobile: isMobile()
      });

      resolve();
    });
  }

private initWindowResize() {
    if (window) {
      window.addEventListener('resize', debounce(this.onResizeContent));
    }
  }