Skip to content
This repository was archived by the owner on Feb 6, 2024. It is now read-only.

Commit 6dc1f41

Browse files
feat(#50): new feature and option to embed DeckDeckGo in any container too
1 parent d3f446b commit 6dc1f41

File tree

10 files changed

+74
-17
lines changed

10 files changed

+74
-17
lines changed

src/components.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export namespace Components {
1414

1515
interface DeckgoDeck {
1616
'doPrint': () => Promise<void>;
17+
'embedded': boolean;
1718
'getActiveIndex': () => Promise<number>;
1819
'getLength': () => Promise<number>;
1920
'isBeginning': () => Promise<boolean>;
@@ -28,6 +29,7 @@ export namespace Components {
2829
'toggleFullScreen': () => Promise<void>;
2930
}
3031
interface DeckgoDeckAttributes extends StencilHTMLAttributes {
32+
'embedded'?: boolean;
3133
'keyboard'?: boolean;
3234
'onSlideDrag'?: (event: CustomEvent<number>) => void;
3335
'onSlideNextDidChange'?: (event: CustomEvent<number>) => void;

src/components/deck/deckdeckgo-deck/deckdeckgo-deck.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ div.deckgo-deck {
1616
::-webkit-scrollbar {
1717
display: none;
1818
}
19+
20+
--slide-width: 100vw;
21+
--slide-height: 100vh;
1922
}
2023

2124
div.deckgo-pager {

src/components/deck/deckdeckgo-deck/deckdeckgo-deck.tsx

Lines changed: 53 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ export class DeckdeckgoDeck {
2424
@Prop() pager: boolean = true;
2525
@Prop() pagerPercentage: boolean = true;
2626

27+
@Prop() embedded: boolean = false;
28+
2729
@State()
2830
private rtl: boolean = false;
2931

@@ -55,6 +57,8 @@ export class DeckdeckgoDeck {
5557
}
5658

5759
async componentDidLoad() {
60+
await this.initEmbeddedSlideWidth();
61+
5862
this.initWindowResize();
5963
this.initKeyboardAssist();
6064

@@ -75,11 +79,38 @@ export class DeckdeckgoDeck {
7579
private initWindowResize() {
7680
if (window) {
7781
window.addEventListener('resize', DeckdeckgoUtils.debounce(async () => {
82+
await this.initEmbeddedSlideWidth();
7883
await this.slideTo(this.activeIndex);
7984
}, 100));
8085
}
8186
}
8287

88+
private initEmbeddedSlideWidth(): Promise<void> {
89+
return new Promise<void>((resolve) => {
90+
if (!this.embedded) {
91+
resolve();
92+
return;
93+
}
94+
95+
const slider: HTMLElement = this.el.shadowRoot.querySelector('div.deckgo-deck');
96+
97+
if (!slider || !slider.offsetParent) {
98+
resolve();
99+
return;
100+
}
101+
102+
if (slider.offsetParent.clientWidth > 0) {
103+
slider.style.setProperty('--slide-width', '' + slider.offsetParent.clientWidth + 'px');
104+
}
105+
106+
if (slider.offsetParent.clientHeight) {
107+
slider.style.setProperty('--slide-height', '' + slider.offsetParent.clientHeight + 'px');
108+
}
109+
110+
resolve();
111+
});
112+
}
113+
83114
private initKeyboardAssist() {
84115
if (this.keyboard) {
85116
document.addEventListener('keydown', async (e) => {
@@ -193,9 +224,10 @@ export class DeckdeckgoDeck {
193224
}
194225

195226
if (couldSwipeLeft || couldSwipeRight) {
196-
const windowWidth: number = window.innerWidth;
197-
if (deltaX.deltaX > (windowWidth / this.autoSwipeRatio)) {
198-
this.deckTranslateX = deltaX.swipeLeft ? this.deckTranslateX - windowWidth : this.deckTranslateX + windowWidth;
227+
const sliderWidth: number = await this.getSliderWidth();
228+
229+
if (deltaX.deltaX > (sliderWidth / this.autoSwipeRatio)) {
230+
this.deckTranslateX = deltaX.swipeLeft ? this.deckTranslateX - sliderWidth : this.deckTranslateX + sliderWidth;
199231

200232
if (this.isNextChange(deltaX.swipeLeft)) {
201233
this.activeIndex++;
@@ -222,6 +254,24 @@ export class DeckdeckgoDeck {
222254
});
223255
}
224256

257+
private getSliderWidth(): Promise<number> {
258+
return new Promise<number>((resolve) => {
259+
if (!this.embedded) {
260+
resolve(window.innerWidth);
261+
return;
262+
}
263+
264+
const slider: HTMLElement = this.el.shadowRoot.querySelector('div.deckgo-deck');
265+
266+
if (!slider || !slider.offsetParent || slider.offsetParent.clientWidth <= 0) {
267+
resolve(window.innerWidth);
268+
return;
269+
}
270+
271+
resolve(slider.offsetParent.clientWidth);
272+
});
273+
}
274+
225275
private isNextChange(swipeLeft: boolean): boolean {
226276
return (swipeLeft && !this.rtl) || (!swipeLeft && this.rtl);
227277
}

src/components/extra/deckdeckgo-gif/deckdeckgo-gif.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ div.deckgo-gif {
3131
:host(.deckgo-gif-fullscreen) {
3232

3333
div.deckgo-gif {
34-
width: 100vw;
35-
height: 100vh;
34+
width: var(--slide-width);
35+
height: var(--slide-height);
3636

3737
--width: 100vw;
3838
overflow: hidden;

src/components/slides/deckdeckgo-slide-author/deckdeckgo-slide-author.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ div.deckgo-slide {
44
flex-flow: row;
55

66
padding: 0;
7-
width: 100vw;
7+
width: var(--slide-width);
88
}
99

1010
div.deckgo-slide-author {

src/components/slides/deckdeckgo-slide-chart/deckdeckgo-slide-chart.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ div.deckgo-slide {
99
div.deckgo-chart-container {
1010
margin: var(--slide-chart-margin-top, 32px) var(--slide-chart-margin-end, 32px) var(--slide-chart-margin-bottom, 32px) var(--slide-chart-margin-start, 32px);
1111

12-
width: calc(100vw - var(--slide-chart-margin-end, 64px) - var(--slide-chart-margin-start, 64px));
13-
height: calc(100vw - var(--slide-chart-margin-top, 64px) - var(--slide-chart-margin-bottom, 64px));
12+
width: calc(var(--slide-width) - var(--slide-chart-margin-end, 64px) - var(--slide-chart-margin-start, 64px));
13+
height: calc(var(--slide-height) - var(--slide-chart-margin-top, 64px) - var(--slide-chart-margin-bottom, 64px));
1414

1515
display: flex;
1616
align-items: center;
@@ -19,7 +19,7 @@ div.deckgo-chart-container {
1919
align-self: center;
2020

2121
@media screen and (max-width: 1024px) {
22-
width: calc(100vw - var(--slide-chart-margin-end, 32px) - var(--slide-chart-margin-start, 32px));
23-
height: calc(100vw - var(--slide-chart-margin-top, 32px) - var(--slide-chart-margin-bottom, 32px));
22+
width: calc(var(--slide-width) - var(--slide-chart-margin-end, 32px) - var(--slide-chart-margin-start, 32px));
23+
height: calc(var(--slide-height) - var(--slide-chart-margin-top, 32px) - var(--slide-chart-margin-bottom, 32px));
2424
}
2525
}

src/components/slides/deckdeckgo-slide-split/deckdeckgo-slide-split.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ div.deckgo-slide {
44
flex-flow: row wrap;
55

66
padding: 0;
7-
width: 100vw;
7+
width: var(--slide-width);
88
}
99

1010
div.deckgo-slide-split {

src/components/slides/deckdeckgo-slide-youtube/deckdeckgo-slide-youtube.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@ div.deckgo-slide {
77
}
88

99
div.deckgo-youtube-container {
10-
width: calc(100vw - var(--slide-padding-end, 64px) - var(--slide-padding-start, 64px));
11-
height: calc(((100vw - var(--slide-padding-end, 64px) - var(--slide-padding-start, 64px)) * 9) / 16);
10+
width: calc(var(--slide-width) - var(--slide-padding-end, 64px) - var(--slide-padding-start, 64px));
11+
height: calc(((var(--slide-height) - var(--slide-padding-end, 64px) - var(--slide-padding-start, 64px)) * 9) / 16);
1212

1313
display: flex;
1414
align-items: center;
1515
justify-content: center;
1616

1717
@media screen and (max-width: 1024px) {
18-
width: calc(100vw - var(--slide-padding-end, 32px) - var(--slide-padding-start, 32px));
19-
height: calc(((100vw - var(--slide-padding-end, 32px) - var(--slide-padding-start, 32px)) * 9) / 16);
18+
width: calc(var(--slide-width) - var(--slide-padding-end, 32px) - var(--slide-padding-start, 32px));
19+
height: calc(((var(--slide-height) - var(--slide-padding-end, 32px) - var(--slide-padding-start, 32px)) * 9) / 16);
2020
}
2121
}

src/components/slides/deckdeckgo-slide-youtube/deckdeckgo-slide-youtube.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ export class DeckdeckgoSlideYoutube implements DeckdeckgoSlide {
5656
return new Promise<void>(async (resolve) => {
5757
await DeckdeckgoSlideUtils.lazyLoadContent(this.el);
5858

59+
await this.initSize();
5960
await this.resizeContent();
6061

6162
resolve();

src/components/slides/deckdeckgo-slide.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
background: var(--background);
33
color: var(--color);
44
height: 100%;
5+
56
z-index: var(--zIndex, 1);
67

78
--slide-padding-top-default: 64px;
@@ -23,8 +24,8 @@ div.deckgo-slide {
2324

2425
padding: var(--slide-padding-top, var(--slide-padding-top-default)) var(--slide-padding-end, var(--slide-padding-end-default)) var(--slide-padding-bottom, var(--slide-padding-bottom-default)) var(--slide-padding-start,var(--slide-padding-start-default));
2526

26-
width: calc(100vw - var(--slide-padding-start, var(--slide-padding-start-default)) - var(--slide-padding-end, var(--slide-padding-end-default)));
27-
height: calc(100% - var(--slide-padding-top, var(--slide-padding-top-default)) - var(--slide-padding-bottom, var(--slide-padding-bottom-default)));
27+
width: calc(var(--slide-width) - var(--slide-padding-start, var(--slide-padding-start-default)) - var(--slide-padding-end, var(--slide-padding-end-default)));
28+
height: calc(var(--slide-height) - var(--slide-padding-top, var(--slide-padding-top-default)) - var(--slide-padding-bottom, var(--slide-padding-bottom-default)));
2829

2930
// Don't allow text selection
3031
-webkit-touch-callout: none; /* iOS Safari */

0 commit comments

Comments
 (0)