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

Commit 2ebb5aa

Browse files
peterpeterparkerpeterpeterparker
committed
revert: revert last changes regarding slide gif
1 parent 38dff2a commit 2ebb5aa

File tree

11 files changed

+26
-121
lines changed

11 files changed

+26
-121
lines changed

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -58,12 +58,6 @@ The following theming options will affect this component if set on its host or p
5858
| --padding | | The padding of the `header` and `footer` over the gif |
5959
| --zIndex | 2 | The z-index of the slide |
6060
| --border-radius | | A radius for the border of the gif container |
61-
| --min-width | | The minimal width of the slotted elements header and footer |
62-
| --text-transform | | The text transform of the slotted elements header and footer |
63-
| --font-size-h2 | | The font size of the slotted elements header |
64-
| --font-weight-h2 | | The font weight of the slotted elements header |
65-
| --font-size-h3 | | The font size of the slotted elements footer |
66-
| --font-weight-h3 | | The font weight of the slotted elements footer |
6761

6862
## Note
6963

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

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -148,36 +148,6 @@ export class AppComponentsGif {
148148
<td></td>
149149
<td>A radius for the border of the gif container</td>
150150
</tr>
151-
<tr>
152-
<td>--min-width</td>
153-
<td></td>
154-
<td>The minimal width of the slotted elements header and footer</td>
155-
</tr>
156-
<tr>
157-
<td>--text-transform</td>
158-
<td></td>
159-
<td>The text transform of the slotted elements header and footer</td>
160-
</tr>
161-
<tr>
162-
<td>--font-size-h2</td>
163-
<td></td>
164-
<td>The font size of the slotted elements header</td>
165-
</tr>
166-
<tr>
167-
<td>--font-weight-h2</td>
168-
<td></td>
169-
<td>The font weight of the slotted elements header</td>
170-
</tr>
171-
<tr>
172-
<td>--font-size-h3</td>
173-
<td></td>
174-
<td>The font size of the slotted elements footer</td>
175-
</tr>
176-
<tr>
177-
<td>--font-weight-h3</td>
178-
<td></td>
179-
<td>The font weight of the slotted elements footer</td>
180-
</tr>
181151
</tbody></table>
182152
<h2 id="app-components-gif-note">Note</h2>
183153
<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>

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

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -193,15 +193,7 @@ export class AppEditorToolbar {
193193
}
194194

195195
private isElementSlideOrDeck(element: HTMLElement): boolean {
196-
if (!element) {
197-
return false;
198-
}
199-
200-
// TODO: That's a bit a hacky way to find if the deck or an item is clicked. Shadow dom limitation but still...
201-
const isNodeDeckOrSlide: boolean = element.nodeName && (element.nodeName.toLowerCase().indexOf('deckgo-deck') > -1 || element.nodeName.toLowerCase().indexOf('deckgo-slide') > -1);
202-
const isClassSlide: boolean = element.className && (element.className.toLowerCase().indexOf('deckgo-slide') > -1 || element.className.toLowerCase().indexOf('deckgo-gif') > -1);
203-
204-
return isNodeDeckOrSlide || isClassSlide;
196+
return element && element.nodeName && (element.nodeName.toLowerCase().indexOf('deckgo-deck') > -1 || element.nodeName.toLowerCase().indexOf('deckgo-slide') > -1)
205197
}
206198

207199
private displayToolbar(element: HTMLElement): Promise<void> {
@@ -551,8 +543,8 @@ export class AppEditorToolbar {
551543
};
552544

553545
return [<a onClick={() => this.deleteElement()} class={this.deckBusy && this.deckOrSlide ? "disabled" : undefined}>
554-
<ion-icon name="trash"></ion-icon>
555-
</a>,
546+
<ion-icon name="trash"></ion-icon>
547+
</a>,
556548
<a onClick={(e: UIEvent) => this.openForDeckOrSlide(e, this.openColorPicker)}>
557549
<ion-label style={styleColor}>A</ion-label>
558550
</a>,

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

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,7 @@ export class EditorHelper {
3737
init(el: HTMLElement) {
3838
this.el = el;
3939

40-
this.el.addEventListener('input', this.onInputChange, false);
41-
this.el.addEventListener('slideInputChange', this.onSlideInputChange, false);
40+
this.el.addEventListener('input', this.onSlideInputChange, false);
4241
this.el.addEventListener('slideDidChange', this.onSlideChange, false);
4342
this.el.addEventListener('slideDidLoad', this.onSlideDidLoad, false);
4443
this.el.addEventListener('slideDelete', this.onSlideDelete, false);
@@ -49,8 +48,7 @@ export class EditorHelper {
4948
}
5049

5150
destroy() {
52-
this.el.removeEventListener('input', this.onInputChange, true);
53-
this.el.removeEventListener('slideInputChange', this.onSlideInputChange, true);
51+
this.el.removeEventListener('input', this.onSlideInputChange, true);
5452
this.el.removeEventListener('slideDidChange', this.onSlideChange, true);
5553
this.el.removeEventListener('slideDidLoad', this.onSlideDidLoad, true);
5654
this.el.removeEventListener('slideDelete', this.onSlideDelete, true);
@@ -74,26 +72,12 @@ export class EditorHelper {
7472
this.updateSlideSubject.next($event.detail);
7573
};
7674

77-
private onInputChange = async ($event: Event) => {
78-
if (!$event || !$event.target || !($event.target instanceof HTMLElement)) {
79-
return;
80-
}
81-
82-
const parent: HTMLElement = ($event.target as HTMLElement).parentElement;
83-
84-
if (!parent || !parent.nodeName || parent.nodeName.toLowerCase().indexOf('deckgo-slide') <= -1) {
85-
return;
86-
}
87-
88-
this.updateSlideSubject.next(parent);
89-
};
90-
9175
private onSlideInputChange = async ($event: Event) => {
9276
if (!$event || !$event.target || !($event.target instanceof HTMLElement)) {
9377
return;
9478
}
9579

96-
const parent: HTMLElement = ($event.target as HTMLElement);
80+
const parent: HTMLElement = ($event.target as HTMLElement).parentElement;
9781

9882
if (!parent || !parent.nodeName || parent.nodeName.toLowerCase().indexOf('deckgo-slide') <= -1) {
9983
return;

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

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -364,19 +364,12 @@ export class AppEditor {
364364
return;
365365
}
366366

367-
if (!$event.target) {
367+
if (!$event.target || !($event.target instanceof HTMLElement)) {
368368
resolve();
369369
return;
370370
}
371371

372-
const targets: EventTarget[] = $event.composedPath();
373-
374-
if (!targets || targets.length <= 0) {
375-
resolve();
376-
return;
377-
}
378-
379-
const element: HTMLElement = targets[0] as HTMLElement;
372+
const element: HTMLElement = $event.target as HTMLElement;
380373

381374
await this.touchToolbar(element);
382375

‎studio/src/components.d.ts‎

Lines changed: 1 addition & 1 deletion
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';

‎studio/src/global/theme/editor/editor-deck-fonts.scss‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,10 @@
11
// Synchro with https://github.com/deckgo/deckdeckgo-starter/blob/master/src/css/font.css
22

33
deckgo-deck {
4-
*:not(b), h1, h2, h3, h4, h5, h6 {
4+
*:not(b), h3, h4, h5, h6 {
55
font-weight: 300;
66
}
77

8-
--font-size-h1: 3em;
9-
--font-size-h2: 2em;
10-
--font-size-h3: 1.4em;
11-
12-
--font-weight-h1: 300;
13-
--font-weight-h2: 300;
14-
--font-weight-h3: 300;
15-
168
a, strong {
179
font-weight: 500;
1810
}

‎studio/src/global/theme/editor/editor-deck.scss‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,23 @@ deckgo-deck {
1313
border: 1px solid var(--ion-color-light);
1414

1515
padding: 8px;
16+
17+
&:focus {
18+
outline: 0;
19+
box-shadow: 0 0 0 3px rgba(var(--ion-color-primary-rgb), .5);
20+
}
21+
}
22+
23+
h1 {
24+
min-height: calc(var(--font-size-h1) + 4px);
25+
}
26+
27+
h2 {
28+
min-height: calc(var(--font-size-h2) + 4px);
1629
}
1730

18-
deckgo-slide-gif {
19-
--min-width: 75%;
20-
--border-radius: 2px;
21-
--text-transform: uppercase;
31+
h3 {
32+
min-height: calc(var(--font-size-h3) + 4px);
2233
}
2334

2435
p {

‎webcomponents/core/src/components.d.ts‎

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

1010

11-
import {
12-
EventEmitter,
13-
} from '@stencil/core';
1411

1512

1613
export namespace Components {
@@ -208,7 +205,6 @@ export namespace Components {
208205
'alt'?: string;
209206
'fullscreen'?: boolean;
210207
'onSlideDidLoad'?: (event: CustomEvent<void>) => void;
211-
'onSlideInputChange'?: (event: CustomEvent<EventTarget>) => void;
212208
'src'?: string;
213209
}
214210

‎webcomponents/core/src/components/extra/deckdeckgo-gif/deckdeckgo-gif.scss‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -18,22 +18,6 @@ div.deckgo-gif {
1818
background: var(--background);
1919
color: var(--color);
2020
padding: var(--padding, 8px);
21-
22-
min-width: var(--min-width);
23-
border-radius: var(--border-radius);
24-
text-transform: var(--text-transform);
25-
26-
overflow: hidden;
27-
}
28-
29-
::slotted([slot="header"]) {
30-
font-size: var(--font-size-h2, inherit);
31-
font-weight: var(--font-weight-h2, inherit);
32-
}
33-
34-
::slotted([slot="footer"]) {
35-
font-size: var(--font-size-h3, inherit);
36-
font-weight: var(--font-weight-h3, inherit);
3721
}
3822

3923
::slotted([slot="header"]) {

0 commit comments

Comments
 (0)