(this.contentRef = el as HTMLElement)}>
-
(this.mainRef = el as HTMLElement)}
- class={busyStore.state.slideReady ? (this.presenting ? 'ready idle' : 'ready') : undefined}
- style={{'--main-size-width': this.mainSize?.width, '--main-size-height': this.mainSize?.height}}>
- {this.renderLoading()}
- (this.deckRef = el as HTMLDeckgoDeckElement)}
- embedded={true}
- style={this.style}
- reveal={this.fullscreen && this.presenting}
- direction={this.direction}
- directionMobile={this.directionMobile}
- animation={this.animation}
- autoSlide={this.fullscreen && this.presenting && autoSlide ? 'true' : 'false'}
- onMouseDown={(e: MouseEvent) => this.deckTouched(e)}
- onTouchStart={(e: TouchEvent) => this.deckTouched(e)}
- onSlideNextDidChange={() => this.onSlideChange()}
- onSlidePrevDidChange={() => this.onSlideChange()}
- onSlideToChange={() => this.onSlideChange()}>
- {this.slides}
- {this.background}
- {this.header}
- {this.footer}
-
-
-
-
+
+ {this.renderSlidesThumbnails()}
+
+
+
(this.contentRef = el as HTMLElement)}>
+
(this.mainRef = el as HTMLElement)}
+ class={busyStore.state.slideReady ? (this.presenting ? 'ready idle' : 'ready') : undefined}
+ style={{'--main-size-width': this.mainSize?.width, '--main-size-height': this.mainSize?.height}}>
+ {this.renderLoading()}
+ (this.deckRef = el as HTMLDeckgoDeckElement)}
+ embedded={true}
+ style={this.style}
+ reveal={this.fullscreen && this.presenting}
+ direction={this.direction}
+ directionMobile={this.directionMobile}
+ animation={this.animation}
+ autoSlide={this.fullscreen && this.presenting && autoSlide ? 'true' : 'false'}
+ onMouseDown={(e: MouseEvent) => this.deckTouched(e)}
+ onTouchStart={(e: TouchEvent) => this.deckTouched(e)}
+ onSlideNextDidChange={() => this.onSlideChange()}
+ onSlidePrevDidChange={() => this.onSlideChange()}
+ onSlideToChange={() => this.onSlideChange()}>
+ {this.slides}
+ {this.background}
+ {this.header}
+ {this.footer}
+
+
+
+
+
+
+
(this.breadCrumbsRef = el as HTMLAppBreadcrumbsElement)}
+ slideNumber={this.activeIndex}
+ onStepTo={($event: CustomEvent) => this.selectStep($event)}>
+
+
(this.actionsEditorRef = el as HTMLAppActionsEditorElement)}
+ hideActions={this.hideActions}
+ fullscreen={this.fullscreen}
+ slides={this.slides}
+ slideNumber={this.activeIndex}
+ onSignIn={() => this.signIn()}
+ onAddSlide={($event: CustomEvent) => this.addSlide($event)}
+ onAnimatePrevNextSlide={($event: CustomEvent) => this.animatePrevNextSlide($event)}
+ onSlideCopy={($event: CustomEvent) => this.copySlide($event)}
+ onSlideTransform={($event: CustomEvent) => this.transformSlide($event)}
+ onElementFocus={($event: CustomEvent) => this.onElementFocus($event)}
+ onPresenting={($event: CustomEvent) => this.updatePresenting($event?.detail)}>
-
-
(this.breadCrumbsRef = el as HTMLAppBreadcrumbsElement)}
- slideNumber={this.activeIndex}
- onStepTo={($event: CustomEvent) => this.selectStep($event)}>
-
-
(this.actionsEditorRef = el as HTMLAppActionsEditorElement)}
- hideActions={this.hideActions}
- fullscreen={this.fullscreen}
- slides={this.slides}
- slideNumber={this.activeIndex}
- onSignIn={() => this.signIn()}
- onAddSlide={($event: CustomEvent) => this.addSlide($event)}
- onAnimatePrevNextSlide={($event: CustomEvent) => this.animatePrevNextSlide($event)}
- onSlideTo={($event: CustomEvent) => this.slideTo($event)}
- onSlideCopy={($event: CustomEvent) => this.copySlide($event)}
- onSlideTransform={($event: CustomEvent) => this.transformSlide($event)}
- onElementFocus={($event: CustomEvent) => this.onElementFocus($event)}
- onPresenting={($event: CustomEvent) => this.updatePresenting($event?.detail)}>
-
+ {this.renderSlidePreview()}
{this.renderLaserPointer()}
,
this.renderInlineEditor()
@@ -836,4 +838,20 @@ export class AppEditor {
return
;
}
}
+
+ private renderSlidesThumbnails() {
+ if (!this.thumbnails) {
+ return undefined;
+ }
+
+ return
;
+ }
+
+ private renderSlidePreview() {
+ if (this.thumbnails) {
+ return undefined;
+ }
+
+ return
;
+ }
}
diff --git a/studio/src/app/popovers/editor/app-slide-navigate/app-slide-navigate.tsx b/studio/src/app/popovers/editor/app-slide-navigate/app-slide-navigate.tsx
index 48ac3aa2e..61f6538c3 100644
--- a/studio/src/app/popovers/editor/app-slide-navigate/app-slide-navigate.tsx
+++ b/studio/src/app/popovers/editor/app-slide-navigate/app-slide-navigate.tsx
@@ -6,6 +6,8 @@ import {findSlidesTitle} from '@deckdeckgo/deck-utils';
import i18n from '../../../stores/i18n.store';
+import {deckSelector, slideTo} from '../../../utils/editor/deck.utils';
+
@Component({
tag: 'app-slide-navigate',
styleUrl: 'app-slide-navigate.scss'
@@ -21,11 +23,13 @@ export class AppSlideNavigate {
async componentDidLoad() {
history.pushState({modal: true}, null);
- this.slides = await findSlidesTitle();
+ this.slides = await findSlidesTitle(deckSelector);
}
async jumpToSlide(index: number) {
- await (this.el.closest('ion-popover') as HTMLIonPopoverElement).dismiss(index);
+ await slideTo(index);
+
+ await (this.el.closest('ion-popover') as HTMLIonPopoverElement).dismiss();
}
private onReorder($event: CustomEvent
) {
@@ -35,8 +39,6 @@ export class AppSlideNavigate {
render() {
return (
- {i18n.state.editor.jump_or_change}
-
) => this.onReorder($event)}
disabled={!this.slides || this.slides.length <= 1}>
diff --git a/studio/src/app/services/editor/offline/offline.service.ts b/studio/src/app/services/editor/offline/offline.service.ts
index fd98e9832..e385584b2 100644
--- a/studio/src/app/services/editor/offline/offline.service.ts
+++ b/studio/src/app/services/editor/offline/offline.service.ts
@@ -13,6 +13,7 @@ import {SlotType} from '../../../types/editor/slot-type';
import {FirestoreUtils} from '../../../utils/editor/firestore.utils';
import {ServiceWorkerUtils} from '../../../utils/core/service-worker.utils';
+import {deckSelector} from '../../../utils/editor/deck.utils';
import {SlideOnlineService} from '../../data/slide/slide.online.service';
import {DeckOnlineService} from '../../data/deck/deck.online.service';
@@ -146,7 +147,7 @@ export class OfflineService {
private cacheServiceWorker(): Promise {
return new Promise(async (resolve, reject) => {
try {
- const deckElement: HTMLElement = document.querySelector('app-editor > ion-content div.deck > main > deckgo-deck');
+ const deckElement: HTMLElement = document.querySelector(deckSelector);
if (!deckElement) {
reject('No deck found');
@@ -301,7 +302,7 @@ export class OfflineService {
private lazyLoadAllContent(): Promise {
return new Promise(async (resolve, reject) => {
try {
- const deck = document.querySelector('app-editor > ion-content div.deck > main > deckgo-deck');
+ const deck = document.querySelector(deckSelector);
if (!deck) {
reject('Deck not found');
@@ -461,7 +462,7 @@ export class OfflineService {
private uploadSlideLocalUserAssets(deck: Deck, slideId: string): Promise {
return new Promise(async (resolve, reject) => {
- const slideElement: HTMLElement = document.querySelector(`app-editor > ion-content div.deck > main > deckgo-deck > *[slide_id="${slideId}"]`);
+ const slideElement: HTMLElement = document.querySelector(`${deckSelector} > *[slide_id="${slideId}"]`);
if (!slideElement) {
reject('No slide found');
@@ -747,7 +748,7 @@ export class OfflineService {
private uploadDeckBackgroundAssets(deck: Deck): Promise {
return new Promise(async (resolve, reject) => {
- const backgroundElement: HTMLElement = document.querySelector(`app-editor > ion-content div.deck > main > deckgo-deck > *[slot="background"]`);
+ const backgroundElement: HTMLElement = document.querySelector(`${deckSelector} > *[slot="background"]`);
if (!backgroundElement) {
resolve();
diff --git a/studio/src/app/utils/editor/deck.utils.ts b/studio/src/app/utils/editor/deck.utils.ts
new file mode 100644
index 000000000..648c9cd40
--- /dev/null
+++ b/studio/src/app/utils/editor/deck.utils.ts
@@ -0,0 +1,6 @@
+export const deckSelector: string = 'app-editor > ion-content div.deck > main > deckgo-deck';
+
+export const slideTo = async (index: number) => {
+ const deck: HTMLDeckgoDeckElement | undefined = document.querySelector(deckSelector);
+ await deck.slideTo(index);
+};
diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts
index b8994bb00..4abb8762a 100644
--- a/studio/src/components.d.ts
+++ b/studio/src/components.d.ts
@@ -47,7 +47,6 @@ export namespace Components {
"deckDidChange": EventEmitter;
"fullscreen": boolean;
"signIn": EventEmitter;
- "slideTo": EventEmitter;
"slides": JSX.IntrinsicElements[];
"toggleFullScreen": EventEmitter;
}
@@ -352,12 +351,19 @@ export namespace Components {
interface AppSlidePreview {
"deckRef": HTMLDeckgoDeckElement;
}
+ interface AppSlideThumbnail {
+ "deck": HTMLDeckgoDeckElement;
+ "slide": HTMLElement;
+ }
interface AppSlideWarning {
}
interface AppSlideWarningInfo {
"lowContrast": boolean;
"overflow": boolean;
}
+ interface AppSlidesAside {
+ "deckRef": HTMLDeckgoDeckElement;
+ }
interface AppSlotType {
"selectedElement": HTMLElement;
"skip": boolean;
@@ -1005,6 +1011,12 @@ declare global {
prototype: HTMLAppSlidePreviewElement;
new (): HTMLAppSlidePreviewElement;
};
+ interface HTMLAppSlideThumbnailElement extends Components.AppSlideThumbnail, HTMLStencilElement {
+ }
+ var HTMLAppSlideThumbnailElement: {
+ prototype: HTMLAppSlideThumbnailElement;
+ new (): HTMLAppSlideThumbnailElement;
+ };
interface HTMLAppSlideWarningElement extends Components.AppSlideWarning, HTMLStencilElement {
}
var HTMLAppSlideWarningElement: {
@@ -1017,6 +1029,12 @@ declare global {
prototype: HTMLAppSlideWarningInfoElement;
new (): HTMLAppSlideWarningInfoElement;
};
+ interface HTMLAppSlidesAsideElement extends Components.AppSlidesAside, HTMLStencilElement {
+ }
+ var HTMLAppSlidesAsideElement: {
+ prototype: HTMLAppSlidesAsideElement;
+ new (): HTMLAppSlidesAsideElement;
+ };
interface HTMLAppSlotTypeElement extends Components.AppSlotType, HTMLStencilElement {
}
var HTMLAppSlotTypeElement: {
@@ -1246,8 +1264,10 @@ declare global {
"app-signin-page": HTMLAppSigninPageElement;
"app-slide-navigate": HTMLAppSlideNavigateElement;
"app-slide-preview": HTMLAppSlidePreviewElement;
+ "app-slide-thumbnail": HTMLAppSlideThumbnailElement;
"app-slide-warning": HTMLAppSlideWarningElement;
"app-slide-warning-info": HTMLAppSlideWarningInfoElement;
+ "app-slides-aside": HTMLAppSlidesAsideElement;
"app-slot-type": HTMLAppSlotTypeElement;
"app-spinner": HTMLAppSpinnerElement;
"app-start-deck": HTMLAppStartDeckElement;
@@ -1300,7 +1320,6 @@ declare namespace LocalJSX {
"fullscreen"?: boolean;
"onSelectDeck"?: (event: CustomEvent) => void;
"signIn"?: EventEmitter;
- "slideTo"?: EventEmitter;
"slides"?: JSX.IntrinsicElements[];
"toggleFullScreen"?: EventEmitter;
}
@@ -1316,7 +1335,6 @@ declare namespace LocalJSX {
"onPresenting"?: (event: CustomEvent) => void;
"onSignIn"?: (event: CustomEvent) => void;
"onSlideCopy"?: (event: CustomEvent) => void;
- "onSlideTo"?: (event: CustomEvent) => void;
"onSlideTransform"?: (event: CustomEvent) => void;
"onToggleFullScreen"?: (event: CustomEvent) => void;
"slideNumber"?: number;
@@ -1662,12 +1680,19 @@ declare namespace LocalJSX {
"deckRef": HTMLDeckgoDeckElement;
"onPreviewAttached"?: (event: CustomEvent) => void;
}
+ interface AppSlideThumbnail {
+ "deck"?: HTMLDeckgoDeckElement;
+ "slide"?: HTMLElement;
+ }
interface AppSlideWarning {
}
interface AppSlideWarningInfo {
"lowContrast"?: boolean;
"overflow"?: boolean;
}
+ interface AppSlidesAside {
+ "deckRef": HTMLDeckgoDeckElement;
+ }
interface AppSlotType {
"onSelectType"?: (event: CustomEvent) => void;
"selectedElement"?: HTMLElement;
@@ -1846,8 +1871,10 @@ declare namespace LocalJSX {
"app-signin-page": AppSigninPage;
"app-slide-navigate": AppSlideNavigate;
"app-slide-preview": AppSlidePreview;
+ "app-slide-thumbnail": AppSlideThumbnail;
"app-slide-warning": AppSlideWarning;
"app-slide-warning-info": AppSlideWarningInfo;
+ "app-slides-aside": AppSlidesAside;
"app-slot-type": AppSlotType;
"app-spinner": AppSpinner;
"app-start-deck": AppStartDeck;
@@ -1972,8 +1999,10 @@ declare module "@stencil/core" {
"app-signin-page": LocalJSX.AppSigninPage & JSXBase.HTMLAttributes;
"app-slide-navigate": LocalJSX.AppSlideNavigate & JSXBase.HTMLAttributes;
"app-slide-preview": LocalJSX.AppSlidePreview & JSXBase.HTMLAttributes;
+ "app-slide-thumbnail": LocalJSX.AppSlideThumbnail & JSXBase.HTMLAttributes;
"app-slide-warning": LocalJSX.AppSlideWarning & JSXBase.HTMLAttributes;
"app-slide-warning-info": LocalJSX.AppSlideWarningInfo & JSXBase.HTMLAttributes;
+ "app-slides-aside": LocalJSX.AppSlidesAside & JSXBase.HTMLAttributes;
"app-slot-type": LocalJSX.AppSlotType & JSXBase.HTMLAttributes;
"app-spinner": LocalJSX.AppSpinner & JSXBase.HTMLAttributes;
"app-start-deck": LocalJSX.AppStartDeck & JSXBase.HTMLAttributes;
diff --git a/studio/src/global/theme/editor/editor-fullscreen.scss b/studio/src/global/theme/editor/editor-fullscreen.scss
index cbcd7744e..cd222fc84 100644
--- a/studio/src/global/theme/editor/editor-fullscreen.scss
+++ b/studio/src/global/theme/editor/editor-fullscreen.scss
@@ -91,9 +91,15 @@
--editor-toolbar-padding: 32px;
}
+ ion-nav app-editor ion-content div.grid div.deck main {
+ left: 50%
+ }
+
ion-content div.grid {
display: block;
+ --slides-aside-width: 0px;
+
> app-breadcrumbs {
display: none;
}
diff --git a/utils/deck/CHANGELOG.md b/utils/deck/CHANGELOG.md
index 8e894571b..5ae9d3ec5 100644
--- a/utils/deck/CHANGELOG.md
+++ b/utils/deck/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 4.1.0 (2021-08-18)
+
+### Features
+
+- `findSlidesTitle` deck query selector can be specified
+
# 4.0.2 (2021-05-24)
### Fix
diff --git a/utils/deck/package-lock.json b/utils/deck/package-lock.json
index 52431abda..f5d3a0c73 100644
--- a/utils/deck/package-lock.json
+++ b/utils/deck/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@deckdeckgo/deck-utils",
- "version": "4.0.2",
+ "version": "4.1.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/utils/deck/package.json b/utils/deck/package.json
index f7bbf9d49..2c5a6f090 100644
--- a/utils/deck/package.json
+++ b/utils/deck/package.json
@@ -1,6 +1,6 @@
{
"name": "@deckdeckgo/deck-utils",
- "version": "4.0.2",
+ "version": "4.1.0",
"author": "David Dal Busco",
"description": "Utils and styles for the DeckDeckGo applications",
"license": "MIT",
diff --git a/utils/deck/src/utils/slides.utils.ts b/utils/deck/src/utils/slides.utils.ts
index f3bd1943f..2b1de8b01 100644
--- a/utils/deck/src/utils/slides.utils.ts
+++ b/utils/deck/src/utils/slides.utils.ts
@@ -1,39 +1,35 @@
import {DeckdeckgoSlideDefinition, DeckdeckgoAttributeDefinition} from '@deckdeckgo/types';
-export const findSlidesTitle = async (): Promise => {
- const slides: NodeListOf = document.querySelectorAll('deckgo-deck > *');
+export const findSlidesTitle = async (deckSelector: string = 'deckgo-deck'): Promise => {
+ const slides: NodeListOf = document.querySelectorAll(`${deckSelector} > *`);
if (!slides) {
return [];
}
- const results: string[] = [];
-
- Array.from(slides)
+ return Array.from(slides)
.filter((slide: HTMLElement) => isSlide(slide))
- .forEach((slide: HTMLElement, index: number) => {
+ .map((slide: HTMLElement, index: number) => {
const title: HTMLElement | null = slide.querySelector('[slot="title"],[slot="question"]');
if (title && title.textContent && title.textContent !== '') {
- results.push(title.textContent);
+ return title.textContent;
} else {
const start: HTMLElement | null = slide.querySelector('[slot="start"],[slot="header"]');
if (start && start.textContent && start.textContent !== '') {
- results.push(start.textContent);
+ return start.textContent;
} else {
const end: HTMLElement | null = slide.querySelector('[slot="end"],[slot="footer"]');
if (end && end.textContent && end.textContent !== '') {
- results.push(end.textContent);
+ return end.textContent;
} else {
- results.push(`Slide #${index}`);
+ return `Slide #${index}`;
}
}
}
});
-
- return results;
};
export function getSlideDefinition(slide: HTMLElement): Promise {