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

Commit f30e143

Browse files
peterpeterparkerpeterpeterparker
committed
merge: Gifs
2 parents e0036e0 + eedecc8 commit f30e143

File tree

36 files changed

+820
-92
lines changed

36 files changed

+820
-92
lines changed

‎docs/docs/components/app-components-gif/app-components-gif.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ The following theming options will affect this component if set on its host or p
5757
| --color | | The color of the `header` and `footer` over the gif|
5858
| --padding | | The padding of the `header` and `footer` over the gif |
5959
| --zIndex | 2 | The z-index of the slide |
60+
| --border-radius | | A radius for the border of the gif container |
6061

6162
## Note
6263

‎docs/docs/slides/app-slide-gif/app-slide-gif.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ This component offers the following options which could be set using attributes:
6363
| -------------------------- |-----------------|-----------------|-----------------|
6464
| src | string | | The source url, the src, of the Gif. Could be an embeddable external url or a local one. |
6565
| alt | string | | And alt information could be provided for accessibility reason. |
66-
| fullscreen | number | false | If set to true, the gif width and height will be related to the slide width and height respectively will be fullscreen. |
66+
| fullscreen | number | true | If set to true, the gif width and height will be related to the slide width and height respectively will be fullscreen. |
6767

6868
## Theming
6969

‎docs/src/app/pages/docs/components/app-components-gif/app-components-gif.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,11 @@ export class AppComponentsGif {
143143
<td>2</td>
144144
<td>The z-index of the slide</td>
145145
</tr>
146+
<tr>
147+
<td>--border-radius</td>
148+
<td></td>
149+
<td>A radius for the border of the gif container</td>
150+
</tr>
146151
</tbody></table>
147152
<h2 id="app-components-gif-note">Note</h2>
148153
<p>Of course, as other images added to a presentation build with <a href="https://deckdeckgo.com">DeckDeckGo</a>, gifs are lazy loaded too. </p>

‎docs/src/app/pages/docs/slides/app-slide-gif/app-slide-gif.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export class AppSlideGif {
9494
<tr>
9595
<td>fullscreen</td>
9696
<td>number</td>
97-
<td>false</td>
97+
<td>true</td>
9898
<td>If set to true, the gif width and height will be related to the slide width and height respectively will be fullscreen.</td>
9999
</tr>
100100
</tbody></table>

‎studio/src/app/components/editor/app-editor-toolbar/app-editor-toolbar.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {OverlayEventDetail} from '@ionic/core';
33

44
import {Subscription} from 'rxjs';
55

6-
import {EditorUtils, SlotType} from '../../../utils/editor-utils';
6+
import {SlotType} from '../../../utils/editor-utils';
77

88
import {DeckBusyService} from '../../../services/deck/deck-busy.service';
99

@@ -46,6 +46,8 @@ export class AppEditorToolbar {
4646
@State()
4747
private deckBusy: boolean = false;
4848

49+
private originalPlaceHolder: Node;
50+
4951
constructor() {
5052
this.deckBusyService = DeckBusyService.getInstance();
5153
}
@@ -135,7 +137,7 @@ export class AppEditorToolbar {
135137

136138
if (selected.classList && selected.classList.contains('deckgo-untouched')) {
137139
if (selected.firstChild) {
138-
selected.removeChild(selected.firstChild);
140+
this.originalPlaceHolder = selected.removeChild(selected.firstChild);
139141
}
140142

141143
selected.classList.remove('deckgo-untouched');
@@ -155,8 +157,8 @@ export class AppEditorToolbar {
155157
unSelect(): Promise<void> {
156158
return new Promise<void>(async (resolve) => {
157159
if (this.selectedElement) {
158-
if (this.selectedElement.classList && !this.selectedElement.classList.contains('deckgo-untouched') && !this.selectedElement.firstChild) {
159-
this.selectedElement.appendChild(document.createTextNode(this.selectedElement.nodeName && this.selectedElement.nodeName.toLowerCase() === 'h1' ? EditorUtils.DEFAULT_TITLE : EditorUtils.DEFAULT_CONTENT));
160+
if (this.originalPlaceHolder && this.selectedElement.classList && !this.selectedElement.classList.contains('deckgo-untouched') && !this.selectedElement.firstChild) {
161+
this.selectedElement.appendChild(this.originalPlaceHolder);
160162
this.selectedElement.classList.add('deckgo-untouched');
161163
}
162164

@@ -290,8 +292,9 @@ export class AppEditorToolbar {
290292
if (this.selectedElement.nodeName && this.selectedElement.nodeName.toLowerCase().indexOf('deckgo-slide') > -1) {
291293
this.slideDelete.emit(this.selectedElement);
292294
} else {
295+
const parent: HTMLElement = this.selectedElement.parentElement;
293296
this.selectedElement.parentElement.removeChild(this.selectedElement);
294-
await this.emitSlideChange();
297+
this.slideDidChange.emit(parent);
295298
}
296299

297300
await this.hideToolbar();
@@ -540,9 +543,10 @@ export class AppEditorToolbar {
540543
'border-bottom': '2px solid ' + this.background
541544
};
542545

543-
return [<a onClick={() => this.deleteElement()} class={this.deckBusy && this.deckOrSlide ? "disabled" : undefined}>
544-
<ion-icon name="trash"></ion-icon>
545-
</a>,
546+
return [<a onClick={() => this.deleteElement()}
547+
class={this.deckBusy && this.deckOrSlide ? "disabled" : undefined}>
548+
<ion-icon name="trash"></ion-icon>
549+
</a>,
546550
<a onClick={(e: UIEvent) => this.openForDeckOrSlide(e, this.openColorPicker)}>
547551
<ion-label style={styleColor}>A</ion-label>
548552
</a>,

‎studio/src/app/components/feed/app-popular/app-popular.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
app-popular {
2+
ion-card[class*="sc-ion-card"] {
3+
--background: white;
4+
}
5+
}

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

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,29 +7,23 @@ import {Component} from '@stencil/core';
77
})
88
export class AppPopular {
99

10+
// TODO: For the time being, display what's DeckDeckGo. In the future present dynamic content, like the popular or trending presentations
11+
1012
render() {
1113
return [
12-
<h1 padding>Popular</h1>,
14+
<h1 padding>What the heck is DeckDeckGo?</h1>,
1315
<ion-card>
14-
<ion-item href="#" class="activated">
15-
<ion-icon name="wifi" slot="start"></ion-icon>
16-
<ion-label>Card Link Item 1 .activated</ion-label>
17-
</ion-item>
18-
19-
<ion-item href="#">
20-
<ion-icon name="wine" slot="start"></ion-icon>
21-
<ion-label>Card Link Item 2</ion-label>
22-
</ion-item>
23-
24-
<ion-item class="activated">
25-
<ion-icon name="warning" slot="start"></ion-icon>
26-
<ion-label>Card Button Item 1 .activated</ion-label>
27-
</ion-item>
28-
29-
<ion-item>
30-
<ion-icon name="walk" slot="start"></ion-icon>
31-
<ion-label>Card Button Item 2</ion-label>
32-
</ion-item>
16+
<ion-card-content>
17+
<p>DeckDeckGo aims to be the <strong>open source</strong> editor for <strong>PWA presentations</strong>.</p>
18+
19+
<p padding-top>What does that mean 🤔?</p>
20+
21+
<p padding-top>It means that every presentations you write, present and publish with DeckDeckGo are themselves also <strong>apps</strong> for desktop and mobile 🤪</p>
22+
23+
<p padding-top>DeckDeckGo aims to be an online community for sharing presentations, slides and talks about your interests and ideas too.</p>
24+
25+
<p padding-top><strong>Edit anywhere, display everywhere</strong></p>
26+
</ion-card-content>
3327
</ion-card>
3428

3529
];

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@ import {Component, Prop, State, Watch} from '@stencil/core';
22

33
import DateTimeFormatOptions = Intl.DateTimeFormatOptions;
44

5-
interface InputTargetEvent extends EventTarget {
6-
value: string;
7-
}
8-
95
@Component({
106
tag: 'app-feed-card-content',
117
styleUrl: 'app-feed-card-content.scss',

‎studio/src/app/helpers/editor/editor.helper.tsx‎

Lines changed: 68 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {SlideService} from '../../services/slide/slide.service';
99
import {DeckService} from '../../services/deck/deck.service';
1010
import {ErrorService} from '../../services/error/error.service';
1111
import {DeckBusyService} from '../../services/deck/deck-busy.service';
12+
import {SlideAttributes} from '../../models/slide-attributes';
1213

1314
export class EditorHelper {
1415

@@ -96,7 +97,7 @@ export class EditorHelper {
9697
private createSlide(slide: HTMLElement): Promise<void> {
9798
return new Promise<void>(async (resolve) => {
9899
try {
99-
if (!slide) {
100+
if (!slide || !slide.nodeName) {
100101
resolve();
101102
return;
102103
}
@@ -109,10 +110,16 @@ export class EditorHelper {
109110

110111
this.deckBusyService.busy(true);
111112

112-
const persistedSlide: Slide = await this.slideService.post({
113-
slide_template: SlideTemplate.TITLE,
114-
slide_content: slide.innerHTML
115-
});
113+
const slidePost: Slide = {
114+
slide_template: this.getSlideTemplate(slide)
115+
};
116+
117+
const content: string = await this.cleanSlideContent(slide.innerHTML);
118+
if (content && content.length > 0) {
119+
slidePost.slide_content = content
120+
}
121+
122+
const persistedSlide: Slide = await this.slideService.post(slidePost);
116123

117124
if (persistedSlide && persistedSlide.slide_id) {
118125
slide.setAttribute('slide_id', persistedSlide.slide_id);
@@ -165,7 +172,7 @@ export class EditorHelper {
165172
private updateSlide(slide: HTMLElement): Promise<void> {
166173
return new Promise<void>(async (resolve) => {
167174
try {
168-
if (!slide) {
175+
if (!slide || !slide.nodeName) {
169176
resolve();
170177
return;
171178
}
@@ -176,11 +183,23 @@ export class EditorHelper {
176183
return;
177184
}
178185

179-
await this.slideService.put({
186+
const slideUpdate: Slide = {
180187
slide_id: slide.getAttribute('slide_id'),
181-
slide_template: SlideTemplate.TITLE,
182-
slide_content: slide.innerHTML
183-
});
188+
slide_template: this.getSlideTemplate(slide)
189+
};
190+
191+
const content: string = await this.cleanSlideContent(slide.innerHTML);
192+
if (content && content.length > 0) {
193+
slideUpdate.slide_content = content
194+
}
195+
196+
const attributes: SlideAttributes = await this.getSlideAttributes(slide);
197+
198+
if (attributes && Object.keys(attributes).length > 0) {
199+
slideUpdate.slide_attributes = attributes;
200+
}
201+
202+
await this.slideService.put(slideUpdate);
184203

185204
this.deckBusyService.busy(false);
186205

@@ -236,4 +255,43 @@ export class EditorHelper {
236255
resolve();
237256
});
238257
}
258+
259+
private getSlideAttributes(slide: HTMLElement): Promise<SlideAttributes> {
260+
return new Promise<SlideAttributes>((resolve) => {
261+
let attributes: SlideAttributes = {};
262+
263+
if (slide.getAttribute('style')) {
264+
attributes.style = slide.getAttribute('style');
265+
}
266+
267+
if ((slide as any).src) {
268+
attributes.src = (slide as any).src;
269+
}
270+
271+
resolve(attributes);
272+
})
273+
}
274+
275+
private cleanSlideContent(content: string): Promise<string> {
276+
return new Promise<string>((resolve) => {
277+
if (!content || content.length <= 0) {
278+
resolve(content);
279+
return;
280+
}
281+
282+
let result: string = content.replace(/deckgo-untouched|contenteditable=""|contenteditable="true"|contenteditable/gi, '');
283+
result = result.replace(/class=""/g, '');
284+
result = result.replace(/\s\s+/g, '');
285+
286+
resolve(result);
287+
});
288+
}
289+
290+
private getSlideTemplate(slide: HTMLElement): SlideTemplate {
291+
const templateKey: string = Object.keys(SlideTemplate).find((key: string) => {
292+
return slide.nodeName.toLowerCase().indexOf(SlideTemplate[key]) > -1
293+
});
294+
295+
return SlideTemplate[templateKey];
296+
}
239297
}

‎studio/src/app/modals/editor/app-gif/app-gif.scss‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
app-gif {
2+
ion-content {
3+
--background: var(--ion-color-light);
4+
}
5+
6+
div.gifs-container {
7+
display: flex;
8+
flex-direction: row;
9+
flex-wrap: wrap;
10+
11+
div.gifs-column {
12+
display: block;
13+
flex-grow: 1;
14+
flex-basis: 50%;
15+
max-width: 50%;
16+
17+
div.gifs-category, div.gif {
18+
position: relative;
19+
20+
div.gifs-category-container, div.gif-container {
21+
border-radius: 4px;
22+
overflow: hidden;
23+
position: relative;
24+
25+
img {
26+
width: 100%;
27+
height: auto;
28+
min-height: 150px;
29+
vertical-align: top;
30+
}
31+
32+
div.gifs-category-placeholder {
33+
position: absolute;
34+
top: 0;
35+
left: 0;
36+
right: 0;
37+
bottom: 0;
38+
39+
background: rgba(var(--ion-color-dark-rgb), 0.6);
40+
41+
h2 {
42+
position: absolute;
43+
top: 50%;
44+
left: 50%;
45+
transform: translate(-50%, -50%);
46+
color: white;
47+
}
48+
}
49+
}
50+
}
51+
}
52+
}
53+
}

0 commit comments

Comments
 (0)