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

Commit 7646459

Browse files
peterpeterparkerpeterpeterparker
committed
feat(#9): new template author
1 parent dde4c89 commit 7646459

File tree

11 files changed

+272
-15
lines changed

11 files changed

+272
-15
lines changed

‎src/components.d.ts‎

Lines changed: 49 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,20 @@ export namespace Components {
4343
'percentage'?: boolean;
4444
}
4545

46+
interface DeckgoSlideAuthor {
47+
'beforeSwipe': (_swipeLeft: boolean) => Promise<boolean>;
48+
'imgUrl': string;
49+
'lazyLoadImages': () => Promise<void>;
50+
}
51+
interface DeckgoSlideAuthorAttributes extends StencilHTMLAttributes {
52+
'imgUrl'?: string;
53+
'onSlideDidLoad'?: (event: CustomEvent<void>) => void;
54+
}
55+
4656
interface DeckgoSlideCode {
4757
'anchor': string;
4858
'anchorZoom': string;
49-
'beforeSwipe': (swipeLeft: boolean) => Promise<boolean>;
59+
'beforeSwipe': (_swipeLeft: boolean) => Promise<boolean>;
5060
'hideAnchor': boolean;
5161
'language': string;
5262
'lazyLoadImages': () => Promise<void>;
@@ -63,7 +73,7 @@ export namespace Components {
6373
}
6474

6575
interface DeckgoSlideContent {
66-
'beforeSwipe': (swipeLeft: boolean) => Promise<boolean>;
76+
'beforeSwipe': (_swipeLeft: boolean) => Promise<boolean>;
6777
'lazyLoadImages': () => Promise<void>;
6878
'reveal': boolean;
6979
'revealShowFirst': boolean;
@@ -75,7 +85,7 @@ export namespace Components {
7585
}
7686

7787
interface DeckgoSlideSplit {
78-
'beforeSwipe': (swipeLeft: boolean) => Promise<boolean>;
88+
'beforeSwipe': (_swipeLeft: boolean) => Promise<boolean>;
7989
'lazyLoadImages': () => Promise<void>;
8090
'reveal': boolean;
8191
'revealShowFirst': boolean;
@@ -87,7 +97,7 @@ export namespace Components {
8797
}
8898

8999
interface DeckgoSlideTitle {
90-
'beforeSwipe': (swipeLeft: boolean) => Promise<boolean>;
100+
'beforeSwipe': (_swipeLeft: boolean) => Promise<boolean>;
91101
'lazyLoadImages': () => Promise<void>;
92102
'reveal': boolean;
93103
'revealShowFirst': boolean;
@@ -97,25 +107,44 @@ export namespace Components {
97107
'reveal'?: boolean;
98108
'revealShowFirst'?: boolean;
99109
}
110+
111+
interface DeckgoSocial {
112+
'fullUrl': string;
113+
'github': string;
114+
'linkedin': string;
115+
'medium': string;
116+
'twitter': string;
117+
}
118+
interface DeckgoSocialAttributes extends StencilHTMLAttributes {
119+
'fullUrl'?: string;
120+
'github'?: string;
121+
'linkedin'?: string;
122+
'medium'?: string;
123+
'twitter'?: string;
124+
}
100125
}
101126

102127
declare global {
103128
interface StencilElementInterfaces {
104129
'DeckgoDeck': Components.DeckgoDeck;
105130
'DeckgoPager': Components.DeckgoPager;
131+
'DeckgoSlideAuthor': Components.DeckgoSlideAuthor;
106132
'DeckgoSlideCode': Components.DeckgoSlideCode;
107133
'DeckgoSlideContent': Components.DeckgoSlideContent;
108134
'DeckgoSlideSplit': Components.DeckgoSlideSplit;
109135
'DeckgoSlideTitle': Components.DeckgoSlideTitle;
136+
'DeckgoSocial': Components.DeckgoSocial;
110137
}
111138

112139
interface StencilIntrinsicElements {
113140
'deckgo-deck': Components.DeckgoDeckAttributes;
114141
'deckgo-pager': Components.DeckgoPagerAttributes;
142+
'deckgo-slide-author': Components.DeckgoSlideAuthorAttributes;
115143
'deckgo-slide-code': Components.DeckgoSlideCodeAttributes;
116144
'deckgo-slide-content': Components.DeckgoSlideContentAttributes;
117145
'deckgo-slide-split': Components.DeckgoSlideSplitAttributes;
118146
'deckgo-slide-title': Components.DeckgoSlideTitleAttributes;
147+
'deckgo-social': Components.DeckgoSocialAttributes;
119148
}
120149

121150

@@ -131,6 +160,12 @@ declare global {
131160
new (): HTMLDeckgoPagerElement;
132161
};
133162

163+
interface HTMLDeckgoSlideAuthorElement extends Components.DeckgoSlideAuthor, HTMLStencilElement {}
164+
var HTMLDeckgoSlideAuthorElement: {
165+
prototype: HTMLDeckgoSlideAuthorElement;
166+
new (): HTMLDeckgoSlideAuthorElement;
167+
};
168+
134169
interface HTMLDeckgoSlideCodeElement extends Components.DeckgoSlideCode, HTMLStencilElement {}
135170
var HTMLDeckgoSlideCodeElement: {
136171
prototype: HTMLDeckgoSlideCodeElement;
@@ -155,22 +190,32 @@ declare global {
155190
new (): HTMLDeckgoSlideTitleElement;
156191
};
157192

193+
interface HTMLDeckgoSocialElement extends Components.DeckgoSocial, HTMLStencilElement {}
194+
var HTMLDeckgoSocialElement: {
195+
prototype: HTMLDeckgoSocialElement;
196+
new (): HTMLDeckgoSocialElement;
197+
};
198+
158199
interface HTMLElementTagNameMap {
159200
'deckgo-deck': HTMLDeckgoDeckElement
160201
'deckgo-pager': HTMLDeckgoPagerElement
202+
'deckgo-slide-author': HTMLDeckgoSlideAuthorElement
161203
'deckgo-slide-code': HTMLDeckgoSlideCodeElement
162204
'deckgo-slide-content': HTMLDeckgoSlideContentElement
163205
'deckgo-slide-split': HTMLDeckgoSlideSplitElement
164206
'deckgo-slide-title': HTMLDeckgoSlideTitleElement
207+
'deckgo-social': HTMLDeckgoSocialElement
165208
}
166209

167210
interface ElementTagNameMap {
168211
'deckgo-deck': HTMLDeckgoDeckElement;
169212
'deckgo-pager': HTMLDeckgoPagerElement;
213+
'deckgo-slide-author': HTMLDeckgoSlideAuthorElement;
170214
'deckgo-slide-code': HTMLDeckgoSlideCodeElement;
171215
'deckgo-slide-content': HTMLDeckgoSlideContentElement;
172216
'deckgo-slide-split': HTMLDeckgoSlideSplitElement;
173217
'deckgo-slide-title': HTMLDeckgoSlideTitleElement;
218+
'deckgo-social': HTMLDeckgoSocialElement;
174219
}
175220

176221

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
@import "../deckdeckgo-slides";
2+
3+
div.deckgo-slide {
4+
flex-flow: row wrap;
5+
6+
padding: 0;
7+
width: 100vw;
8+
}
9+
10+
div.deckgo-slide-author {
11+
flex: 1;
12+
13+
height: 100%;
14+
15+
display: flex;
16+
align-items: var(--slide-author-align, inherit);
17+
text-align: var(--slide-author-text-align, inherit);
18+
19+
padding: var(--slide-author-padding-top, 16px) var(--slide-author-padding-end, 32px) var(--slide-author-padding-bottom, 16px) var(--slide-author-padding-start, 32px);
20+
21+
&.deckgo-slide-author-start {
22+
background: var(--slide-author-background-start);
23+
color: var(--slide-author-color-start);
24+
25+
justify-content: center;
26+
align-items: center;
27+
28+
img {
29+
border-radius: 50%;
30+
width: var(--slide-author-img-size, 16rem);
31+
height: var(--slide-author-img-size, 16rem);
32+
}
33+
}
34+
35+
&.deckgo-slide-author-end {
36+
background: var(--slide-author-background-end);
37+
color: var(--slide-author-color-end);
38+
39+
flex-direction: column;
40+
justify-content: center;
41+
42+
div.deckgo-slide-author-social {
43+
display: grid;
44+
grid-template-columns: 30% 30% 30%;
45+
grid-gap: 10px;
46+
47+
padding-top: var(--slide-author-social-padding-top, 32px);
48+
}
49+
}
50+
}

‎src/components/slides/deckdeckgo-slide-author/deckdeckgo-slide-author.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import {Component, Element, Event, EventEmitter, Method, Prop} from '@stencil/core';
2+
3+
import {DeckdeckgoSlide, DeckDeckGoSlideUtils} from '../deckdeckgo-slide';
4+
5+
@Component({
6+
tag: 'deckgo-slide-author',
7+
styleUrl: 'deckdeckgo-slide-author.scss',
8+
shadow: true
9+
})
10+
export class DeckdeckgoSlideAuthor implements DeckdeckgoSlide {
11+
12+
@Element() el: HTMLElement;
13+
14+
@Event() slideDidLoad: EventEmitter<void>;
15+
16+
@Prop() imgUrl: string;
17+
18+
async componentDidLoad() {
19+
this.slideDidLoad.emit();
20+
}
21+
22+
@Method()
23+
beforeSwipe(_swipeLeft: boolean): Promise<boolean> {
24+
return new Promise<boolean>((resolve) => {
25+
resolve(true)
26+
});
27+
}
28+
29+
@Method()
30+
lazyLoadImages(): Promise<void> {
31+
return DeckDeckGoSlideUtils.lazyLoadImages(this.el);
32+
}
33+
34+
render() {
35+
return <div class="deckgo-slide">
36+
<div class="deckgo-slide-author deckgo-slide-author-start">
37+
<img data-src={this.imgUrl}/>
38+
</div>
39+
<div class="deckgo-slide-author deckgo-slide-author-end">
40+
<slot name="author"></slot>
41+
<div class="deckgo-slide-author-social">
42+
<slot name="social-link-a"></slot>
43+
<slot name="social-link-b"></slot>
44+
<slot name="social-link-c"></slot>
45+
<slot name="social-link-d"></slot>
46+
<slot name="social-link-e"></slot>
47+
<slot name="social-link-f"></slot>
48+
</div>
49+
</div>
50+
</div>;
51+
}
52+
53+
hostData() {
54+
return {
55+
class: {
56+
'deckgo-slide-container': true
57+
}
58+
}
59+
}
60+
61+
}

‎src/components/slides/deckdeckgo-slide-code/deckdeckgo-slide-code.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,9 +91,9 @@ export class DeckdeckgoSlideCode implements DeckdeckgoSlide {
9191
}
9292

9393
@Method()
94-
beforeSwipe(swipeLeft: boolean): Promise<boolean> {
94+
beforeSwipe(_swipeLeft: boolean): Promise<boolean> {
9595
return new Promise<boolean>(async (resolve) => {
96-
const couldSwipe: boolean = await this.scrollToNext(swipeLeft);
96+
const couldSwipe: boolean = await this.scrollToNext(_swipeLeft);
9797

9898
if (couldSwipe) {
9999
await this.zoomCode(false);

‎src/components/slides/deckdeckgo-slide-content/deckdeckgo-slide-content.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ export class DeckdeckgoSlideContent implements DeckdeckgoSlide {
2525
}
2626

2727
@Method()
28-
beforeSwipe(swipeLeft: boolean): Promise<boolean> {
29-
return DeckDeckGoSlideUtils.beforeSwipe(this.el, swipeLeft, this.reveal);
28+
beforeSwipe(_swipeLeft: boolean): Promise<boolean> {
29+
return DeckDeckGoSlideUtils.beforeSwipe(this.el, _swipeLeft, this.reveal);
3030
}
3131

3232
@Method()

‎src/components/slides/deckdeckgo-slide-split/deckdeckgo-slide-split.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ export class DeckdeckgoSlideSplit implements DeckdeckgoSlide {
2525
}
2626

2727
@Method()
28-
beforeSwipe(swipeLeft: boolean): Promise<boolean> {
29-
return DeckDeckGoSlideUtils.beforeSwipe(this.el, swipeLeft, this.reveal);
28+
beforeSwipe(_swipeLeft: boolean): Promise<boolean> {
29+
return DeckDeckGoSlideUtils.beforeSwipe(this.el, _swipeLeft, this.reveal);
3030
}
3131

3232
@Method()

‎src/components/slides/deckdeckgo-slide-title/deckdeckgo-slide-title.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ export class DeckdeckgoSlideTitle implements DeckdeckgoSlide {
2525
}
2626

2727
@Method()
28-
beforeSwipe(swipeLeft: boolean): Promise<boolean> {
29-
return DeckDeckGoSlideUtils.beforeSwipe(this.el, swipeLeft, this.reveal);
28+
beforeSwipe(_swipeLeft: boolean): Promise<boolean> {
29+
return DeckDeckGoSlideUtils.beforeSwipe(this.el, _swipeLeft, this.reveal);
3030
}
3131

3232
@Method()

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export interface DeckdeckgoSlide {
2-
beforeSwipe(swipeLeft: boolean): Promise<boolean>;
2+
beforeSwipe(_swipeLeft: boolean): Promise<boolean>;
33

44
lazyLoadImages(): Promise<void>;
55
}
@@ -82,9 +82,12 @@ export class DeckDeckGoSlideUtils {
8282

8383
static async lazyLoadImages(el: HTMLElement): Promise<void> {
8484
return new Promise<void>((resolve) => {
85-
const allImages: NodeListOf<HTMLElement> = el.querySelectorAll('[slot] > img');
85+
const allSlotedImages: NodeListOf<HTMLElement> = el.querySelectorAll('[slot] > img');
86+
const allShadowImages: NodeListOf<HTMLElement> = el.shadowRoot.querySelectorAll('img');
8687

87-
Array.from(allImages).forEach((image: HTMLElement) => {
88+
const images: HTMLElement[] = Array.from(allSlotedImages).concat(Array.from(allShadowImages));
89+
90+
images.forEach((image: HTMLElement) => {
8891
if (image.getAttribute('data-src')) {
8992
image.setAttribute('src', image.getAttribute('data-src'));
9093
image.removeAttribute('data-src');

‎src/components/social/deckdeckgo-social/deckdeckgo-social.scss‎

Whitespace-only changes.

‎src/components/social/deckdeckgo-social/deckdeckgo-social.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import {Component, Prop, State, Watch} from '@stencil/core';
2+
3+
4+
@Component({
5+
tag: 'deckgo-social',
6+
styleUrl: 'deckdeckgo-social.scss',
7+
shadow: true
8+
})
9+
export class DeckdeckgoSocial {
10+
11+
@State() url: string;
12+
13+
@Prop() twitter: string;
14+
@Prop() linkedin: string;
15+
@Prop() medium: string;
16+
@Prop() github: string;
17+
@Prop() fullUrl: string;
18+
19+
componentDidLoad() {
20+
this.concatTwitterUrl();
21+
this.concatLinkedinUrl();
22+
this.concatMediumUrl();
23+
this.concatGithubUrl();
24+
this.concatFullUrl();
25+
}
26+
27+
@Watch('twitter')
28+
concatTwitterUrl() {
29+
if (!this.twitter) {
30+
return;
31+
}
32+
33+
this.url = 'https://twitter.com/' + this.twitter;
34+
}
35+
36+
@Watch('linkedin')
37+
concatLinkedinUrl() {
38+
if (!this.linkedin) {
39+
return;
40+
}
41+
42+
this.url = 'https://www.linkedin.com/in/' + this.linkedin;
43+
}
44+
45+
@Watch('medium')
46+
concatMediumUrl() {
47+
if (!this.medium) {
48+
return;
49+
}
50+
51+
this.url = 'https://medium.com/@' + this.medium;
52+
}
53+
54+
@Watch('github')
55+
concatGithubUrl() {
56+
if (!this.github) {
57+
return;
58+
}
59+
60+
this.url = 'https://github.com/' + this.github;
61+
}
62+
63+
@Watch('fullUrl')
64+
concatFullUrl() {
65+
if (!this.fullUrl) {
66+
return;
67+
}
68+
69+
this.url = this.fullUrl;
70+
}
71+
72+
render() {
73+
return <a href={this.url}>
74+
<slot name="icon"></slot>
75+
<slot></slot>
76+
</a>
77+
}
78+
}

0 commit comments

Comments
 (0)