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

Commit 5bd5497

Browse files
peterpeterparkerpeterpeterparker
committed
feat: find first slide content to prefill publish
1 parent dd10928 commit 5bd5497

File tree

7 files changed

+108
-34
lines changed

7 files changed

+108
-34
lines changed

‎studio/src/app/components/feed/app-feed/app-feed.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -34,16 +34,17 @@ export class AppFeed {
3434

3535
<hr class="deck-divider" margin></hr>
3636

37-
<app-feed-card-content firstCard={true}></app-feed-card-content>
37+
<app-feed-card-content firstCard={true} caption="Card Title" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate"></app-feed-card-content>
3838
</ion-card>,
39-
<app-feed-card></app-feed-card>,
40-
<app-feed-card></app-feed-card>,
41-
<app-feed-card></app-feed-card>,
42-
<app-feed-card></app-feed-card>,
43-
<app-feed-card></app-feed-card>,
44-
<app-feed-card></app-feed-card>,
45-
<app-feed-card></app-feed-card>,
46-
<app-feed-card></app-feed-card>,
39+
<app-feed-card caption="Card Title" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate"></app-feed-card>,
40+
<app-feed-card caption="Card Title" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate"></app-feed-card>,
41+
<app-feed-card caption="Card Title" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate"></app-feed-card>,
42+
<app-feed-card caption="Card Title" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate"></app-feed-card>,
43+
<app-feed-card caption="Card Title" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate"></app-feed-card>,
44+
<app-feed-card caption="Card Title" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate"></app-feed-card>,
45+
<app-feed-card caption="Card Title" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate"></app-feed-card>,
46+
<app-feed-card caption="Card Title" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate"></app-feed-card>,
47+
<app-feed-card caption="Card Title" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate"></app-feed-card>
4748
];
4849
}
4950
}

‎studio/src/app/components/feed/card/app-feed-card-content/app-feed-card-content.scss‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,25 @@ app-feed-card-content {
1515
flex-wrap: wrap;
1616
}
1717

18-
p.content {
19-
color: black;
20-
margin-top: 8px;
21-
margin-bottom: 8px;
18+
div.summary {
19+
flex: 2;
20+
21+
p.content {
22+
color: black;
23+
margin-top: 8px;
24+
margin-bottom: 8px;
25+
}
2226
}
2327

24-
div {
25-
&.preview {
26-
width: 15rem;
27-
min-width: 8rem;
28-
display: flex;
29-
justify-content: center;
30-
align-items: center;
28+
div.preview {
29+
width: 12rem;
30+
min-width: 8rem;
31+
display: flex;
32+
justify-content: center;
33+
align-items: center;
34+
35+
img {
36+
max-width: 10rem;
3137
}
3238
}
3339

‎studio/src/app/components/feed/card/app-feed-card-content/app-feed-card-content.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,12 @@ export class AppFeedCardContent {
3131
@Prop()
3232
publication: Date;
3333

34+
@Prop()
35+
caption: string;
36+
37+
@Prop()
38+
description: string;
39+
3440
@State()
3541
private formattedPublication: string;
3642

@@ -87,20 +93,15 @@ export class AppFeedCardContent {
8793
<div class="summary">
8894

8995
<ion-card-header>
90-
<ion-card-title class="ion-text-uppercase" contentEditable={this.editable}>Card Title
91-
</ion-card-title>
96+
<ion-card-title class="ion-text-uppercase" contentEditable={this.editable}>{this.caption}</ion-card-title>
9297

9398
<ion-card-subtitle class="ion-text-lowercase">
9499
{this.renderTags()}
95100
{this.renderInputTags()}
96101
</ion-card-subtitle>
97102
</ion-card-header>
98103

99-
<p padding-start padding-end class="content" contentEditable={this.editable}>Keep
100-
close to Nature's heart... and break clear away, once in
101-
awhile,
102-
and climb a mountain or spend a week in the woods. Wash your spirit clean.
103-
</p>
104+
<p padding-start padding-end class="content" contentEditable={this.editable}>{this.description}</p>
104105

105106
<p class="author" padding>
106107
<ion-label>{this.author} | {this.formattedPublication}</ion-label>

‎studio/src/app/components/feed/card/app-feed-card/app-feed-card.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,16 @@ export class AppFeedCard {
1616
@Prop()
1717
publication: Date;
1818

19+
@Prop()
20+
caption: string;
21+
22+
@Prop()
23+
description: string;
24+
1925
render() {
2026

2127
return <ion-card class={this.editable ? "ion-no-margin" : undefined}>
22-
<app-feed-card-content editable={this.editable} author={this.author} publication={this.publication}></app-feed-card-content>
28+
<app-feed-card-content editable={this.editable} author={this.author} publication={this.publication} caption={this.caption} description={this.description}></app-feed-card-content>
2329
</ion-card>
2430
}
2531

‎studio/src/app/modals/editor/app-publish/app-publish.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, Element, Listen, State} from '@stencil/core';
1+
import {Component, Element, Listen, Prop, State} from '@stencil/core';
22

33
import {take} from 'rxjs/operators';
44

@@ -16,6 +16,12 @@ export class AppPublish {
1616

1717
private authService: AuthService;
1818

19+
@Prop()
20+
caption: string;
21+
22+
@Prop()
23+
description: string;
24+
1925
@State()
2026
private author: string;
2127

@@ -58,7 +64,7 @@ export class AppPublish {
5864
<ion-content padding>
5965
<p>Edit the preview of your presentation and add or change tags (up to 5) to make your presentation more inviting to readers</p>
6066

61-
<app-feed-card editable={true} author={this.author} publication={this.today}></app-feed-card>
67+
<app-feed-card editable={true} author={this.author} publication={this.today} caption={this.caption} description={this.description}></app-feed-card>
6268
</ion-content>
6369
];
6470
}

‎studio/src/app/pages/editor/app-editor/app-editor.tsx‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@ import {AuthService} from '../../../services/auth/auth.service';
1313
import {GuestService} from '../../../services/guest/guest.service';
1414
import {NavDirection, NavService} from '../../../services/nav/nav.service';
1515

16+
interface FirstSlideContent {
17+
title: string;
18+
content: string;
19+
}
20+
1621
@Component({
1722
tag: 'app-editor',
1823
styleUrl: 'app-editor.scss'
@@ -219,6 +224,33 @@ export class AppEditor {
219224
});
220225
}
221226

227+
private getFirstSlideContent(): Promise<FirstSlideContent> {
228+
return new Promise<FirstSlideContent>(async (resolve) => {
229+
let title: string = '';
230+
let content: string = '';
231+
232+
const slide: HTMLElement = this.el.querySelector('deckgo-deck > *:first-child');
233+
234+
if (slide && slide.tagName && slide.tagName.toLowerCase().indexOf('deckgo-slide') > -1) {
235+
const titleElement: HTMLElement = slide.querySelector('[slot="title"]');
236+
const contentElement: HTMLElement = slide.querySelector('[slot="content"]');
237+
238+
if (titleElement) {
239+
title = titleElement.textContent;
240+
}
241+
242+
if (contentElement) {
243+
content = contentElement.textContent;
244+
}
245+
}
246+
247+
resolve({
248+
title: title,
249+
content: content
250+
});
251+
});
252+
}
253+
222254
@Listen('actionOpenSlideAdd')
223255
async onActionOpenSlideAdd($event: CustomEvent) {
224256
if (!$event || !$event.detail) {
@@ -264,8 +296,16 @@ export class AppEditor {
264296
return;
265297
}
266298

299+
const firstSlide: FirstSlideContent = await this.getFirstSlideContent();
300+
301+
console.log(firstSlide);
302+
267303
const modal: HTMLIonModalElement = await this.modalController.create({
268-
component: 'app-publish'
304+
component: 'app-publish',
305+
componentProps: {
306+
caption: firstSlide.title,
307+
description: firstSlide.content
308+
}
269309
});
270310

271311
modal.onDidDismiss().then(async (_detail: OverlayEventDetail) => {

‎studio/src/components.d.ts‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@
88
import '@stencil/core';
99

1010
import '@ionic/core';
11+
import 'ionicons';
1112
import 'deckdeckgo';
1213
import 'deckdeckgo-inline-editor';
13-
import 'ionicons';
1414
import {
1515
EventEmitter,
1616
} from '@stencil/core';
@@ -89,30 +89,44 @@ export namespace Components {
8989

9090
interface AppFeedCardContent {
9191
'author': string;
92+
'caption': string;
93+
'description': string;
9294
'editable': boolean;
9395
'firstCard': boolean;
9496
'publication': Date;
9597
}
9698
interface AppFeedCardContentAttributes extends StencilHTMLAttributes {
9799
'author'?: string;
100+
'caption'?: string;
101+
'description'?: string;
98102
'editable'?: boolean;
99103
'firstCard'?: boolean;
100104
'publication'?: Date;
101105
}
102106

103107
interface AppFeedCard {
104108
'author': string;
109+
'caption': string;
110+
'description': string;
105111
'editable': boolean;
106112
'publication': Date;
107113
}
108114
interface AppFeedCardAttributes extends StencilHTMLAttributes {
109115
'author'?: string;
116+
'caption'?: string;
117+
'description'?: string;
110118
'editable'?: boolean;
111119
'publication'?: Date;
112120
}
113121

114-
interface AppPublish {}
115-
interface AppPublishAttributes extends StencilHTMLAttributes {}
122+
interface AppPublish {
123+
'caption': string;
124+
'description': string;
125+
}
126+
interface AppPublishAttributes extends StencilHTMLAttributes {
127+
'caption'?: string;
128+
'description'?: string;
129+
}
116130

117131
interface AppSlideNavigate {
118132
'slides': string[];

0 commit comments

Comments
 (0)