From 392f5a2567fbf7ad619918ff0ec375312afe3032 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Tue, 17 Nov 2020 21:17:59 +0100 Subject: [PATCH 01/23] feat: preview slide foundation --- .../app-slide-preview/app-slide-preview.scss | 43 ++++++++++++++ .../app-slide-preview/app-slide-preview.tsx | 58 +++++++++++++++++++ .../pages/editor/app-editor/app-editor.tsx | 1 + studio/src/components.d.ts | 13 +++++ 4 files changed, 115 insertions(+) create mode 100644 studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss create mode 100644 studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx diff --git a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss new file mode 100644 index 000000000..bcf084cb7 --- /dev/null +++ b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss @@ -0,0 +1,43 @@ +@use "../../../../../global/theme/editor/editor-mixin"; + +app-slide-preview { + position: absolute; + top: 8px; + right: 8px; + + transition: opacity 0.5s; + + visibility: initial; + opacity: 1; + + article { + position: relative; + + width: 200px; + height: calc(200px * 9 / 16); + + overflow: hidden; + + @include editor-mixin.panel; + + deckgo-deck { + --slide-padding-start: 4px; + --slide-padding-top: 8px; + --slide-padding-end: 4px; + --slide-padding-bottom: 8px; + + --slide-split-padding-start: 4px; + --slide-split-padding-top: 8px; + --slide-split-padding-end: 4px; + --slide-split-padding-bottom: 8px; + + .deckgo-slide-container { + > * { + margin: 0; + padding: 0; + border-color: transparent; + } + } + } + } +} diff --git a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx new file mode 100644 index 000000000..589a09ee3 --- /dev/null +++ b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx @@ -0,0 +1,58 @@ +import {Component, h, Listen, State} from '@stencil/core'; + +@Component({ + tag: 'app-slide-preview', + styleUrl: 'app-slide-preview.scss', +}) +export class AppSlidePreview { + @State() + private preview: boolean = false; + + private containerRef!: HTMLDeckgoDeckElement; + + @Listen('slideDidUpdate', {target: 'document'}) + async onSlideDidUpdate($event: CustomEvent) { + if (!$event || !$event.detail) { + return; + } + + if (!this.containerRef) { + return; + } + + const slide: HTMLElement = $event.detail; + + this.containerRef.setAttribute('style', $event.detail.parentElement.style.cssText); + + this.containerRef.replaceChild(slide.cloneNode(true), this.containerRef.firstChild); + + await this.containerRef.initSlideSize(); + } + + @Listen('elementFocus', {target: 'document'}) + async onElementFocus($event: CustomEvent) { + if (!$event || !$event.detail) { + return; + } + + const selectedElement: HTMLElement = $event.detail; + + this.preview = selectedElement?.parentElement?.nodeName?.toLowerCase().indexOf('deckgo-slide') >= 0; + } + + render() { + return
{this.renderPreview()}
; + } + + private renderPreview() { + if (!this.preview) { + return undefined; + } + + return ( + (this.containerRef = el as HTMLDeckgoDeckElement)}> +
{/* Placeholder for replace first child */}
+ + ); + } +} diff --git a/studio/src/app/pages/editor/app-editor/app-editor.tsx b/studio/src/app/pages/editor/app-editor/app-editor.tsx index e37d6e6da..cb2ad9ed9 100644 --- a/studio/src/app/pages/editor/app-editor/app-editor.tsx +++ b/studio/src/app/pages/editor/app-editor/app-editor.tsx @@ -731,6 +731,7 @@ export class AppEditor { + , (this.actionsEditorRef = el as HTMLAppActionsEditorElement)} diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts index 6c3c2d922..f0099fbb8 100644 --- a/studio/src/components.d.ts +++ b/studio/src/components.d.ts @@ -389,6 +389,8 @@ export namespace Components { } interface AppSlideNavigate { } + interface AppSlidePreview { + } interface AppSlideWarning { } interface AppSlideWarningInfo { @@ -1077,6 +1079,12 @@ declare global { prototype: HTMLAppSlideNavigateElement; new (): HTMLAppSlideNavigateElement; }; + interface HTMLAppSlidePreviewElement extends Components.AppSlidePreview, HTMLStencilElement { + } + var HTMLAppSlidePreviewElement: { + prototype: HTMLAppSlidePreviewElement; + new (): HTMLAppSlidePreviewElement; + }; interface HTMLAppSlideWarningElement extends Components.AppSlideWarning, HTMLStencilElement { } var HTMLAppSlideWarningElement: { @@ -1259,6 +1267,7 @@ declare global { "app-share-options": HTMLAppShareOptionsElement; "app-signin": HTMLAppSigninElement; "app-slide-navigate": HTMLAppSlideNavigateElement; + "app-slide-preview": HTMLAppSlidePreviewElement; "app-slide-warning": HTMLAppSlideWarningElement; "app-slide-warning-info": HTMLAppSlideWarningInfoElement; "app-slot-type": HTMLAppSlotTypeElement; @@ -1703,6 +1712,8 @@ declare namespace LocalJSX { interface AppSlideNavigate { "onReorder"?: (event: CustomEvent) => void; } + interface AppSlidePreview { + } interface AppSlideWarning { } interface AppSlideWarningInfo { @@ -1846,6 +1857,7 @@ declare namespace LocalJSX { "app-share-options": AppShareOptions; "app-signin": AppSignin; "app-slide-navigate": AppSlideNavigate; + "app-slide-preview": AppSlidePreview; "app-slide-warning": AppSlideWarning; "app-slide-warning-info": AppSlideWarningInfo; "app-slot-type": AppSlotType; @@ -1973,6 +1985,7 @@ declare module "@stencil/core" { "app-share-options": LocalJSX.AppShareOptions & JSXBase.HTMLAttributes; "app-signin": LocalJSX.AppSignin & JSXBase.HTMLAttributes; "app-slide-navigate": LocalJSX.AppSlideNavigate & JSXBase.HTMLAttributes; + "app-slide-preview": LocalJSX.AppSlidePreview & JSXBase.HTMLAttributes; "app-slide-warning": LocalJSX.AppSlideWarning & JSXBase.HTMLAttributes; "app-slide-warning-info": LocalJSX.AppSlideWarningInfo & JSXBase.HTMLAttributes; "app-slot-type": LocalJSX.AppSlotType & JSXBase.HTMLAttributes; From 1d77596bdf39272afd63449fc6c6218f307f2440 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Wed, 18 Nov 2020 17:26:58 +0100 Subject: [PATCH 02/23] feat: block slide and display / hide preview --- .../app-slide-preview/app-slide-preview.scss | 5 ++ .../app-slide-preview/app-slide-preview.tsx | 65 +++++++++++++++---- .../core/app-dashboard/app-dashboard.tsx | 2 +- studio/src/components.d.ts | 1 + 4 files changed, 59 insertions(+), 14 deletions(-) diff --git a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss index bcf084cb7..137104f54 100644 --- a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss +++ b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss @@ -10,6 +10,11 @@ app-slide-preview { visibility: initial; opacity: 1; + &:not(.preview) { + visibility: hidden; + opacity: 0; + } + article { position: relative; diff --git a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx index 589a09ee3..4200a97aa 100644 --- a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx +++ b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx @@ -1,14 +1,24 @@ -import {Component, h, Listen, State} from '@stencil/core'; +import {Component, h, Host, Listen, State, Event, EventEmitter, Element} from '@stencil/core'; @Component({ tag: 'app-slide-preview', styleUrl: 'app-slide-preview.scss', }) export class AppSlidePreview { + @Element() el: HTMLElement; + @State() private preview: boolean = false; - private containerRef!: HTMLDeckgoDeckElement; + private deckPreviewRef!: HTMLDeckgoDeckElement; + + @Event({bubbles: false}) private previewAttached: EventEmitter; + + componentDidUpdate() { + if (this.preview) { + this.previewAttached.emit(); + } + } @Listen('slideDidUpdate', {target: 'document'}) async onSlideDidUpdate($event: CustomEvent) { @@ -16,17 +26,9 @@ export class AppSlidePreview { return; } - if (!this.containerRef) { - return; - } - const slide: HTMLElement = $event.detail; - this.containerRef.setAttribute('style', $event.detail.parentElement.style.cssText); - - this.containerRef.replaceChild(slide.cloneNode(true), this.containerRef.firstChild); - - await this.containerRef.initSlideSize(); + await this.updateSlide(slide); } @Listen('elementFocus', {target: 'document'}) @@ -38,10 +40,47 @@ export class AppSlidePreview { const selectedElement: HTMLElement = $event.detail; this.preview = selectedElement?.parentElement?.nodeName?.toLowerCase().indexOf('deckgo-slide') >= 0; + + if (this.preview) { + await this.initDeckPreview(); + + this.el.addEventListener('previewAttached', async () => await this.updateSlide(selectedElement.parentElement), {once: true}); + } + } + + async initDeckPreview() { + const deck: HTMLElement = document.querySelector('main > deckgo-deck'); + + if (!deck) { + return; + } + + this.deckPreviewRef?.setAttribute('style', deck.style.cssText); + + await this.deckPreviewRef?.initSlideSize(); + } + + async updateSlide(slide: HTMLElement | undefined) { + if (!slide) { + return; + } + + this.deckPreviewRef?.replaceChild(slide.cloneNode(true), this.deckPreviewRef.firstChild); + } + + private async blockSlide() { + await this.deckPreviewRef?.blockSlide(true); } render() { - return
{this.renderPreview()}
; + return ( + +
{this.renderPreview()}
+ + ); } private renderPreview() { @@ -50,7 +89,7 @@ export class AppSlidePreview { } return ( - (this.containerRef = el as HTMLDeckgoDeckElement)}> + (this.deckPreviewRef = el as HTMLDeckgoDeckElement)} onSlidesDidLoad={() => this.blockSlide()}>
{/* Placeholder for replace first child */}
 ); diff --git a/studio/src/app/pages/core/app-dashboard/app-dashboard.tsx b/studio/src/app/pages/core/app-dashboard/app-dashboard.tsx index 1d53154c9..a03bac1f3 100644 --- a/studio/src/app/pages/core/app-dashboard/app-dashboard.tsx +++ b/studio/src/app/pages/core/app-dashboard/app-dashboard.tsx @@ -252,7 +252,7 @@ export class AppDashboard { private blockSlide($event: CustomEvent): Promise { return new Promise(async (resolve) => { if ($event && $event.target) { - await ($event.target as any).blockSlide(true); + await ($event.target as HTMLDeckgoDeckElement).blockSlide(true); } resolve(); diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts index f0099fbb8..5a1451b08 100644 --- a/studio/src/components.d.ts +++ b/studio/src/components.d.ts @@ -1713,6 +1713,7 @@ declare namespace LocalJSX { "onReorder"?: (event: CustomEvent) => void; } interface AppSlidePreview { + "onPreviewAttached"?: (event: CustomEvent) => void; } interface AppSlideWarning { } From 57702779ee830b8530bf124c96dcc92154043c3d Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Wed, 18 Nov 2020 18:13:27 +0100 Subject: [PATCH 03/23] feat: clean preview and events bubbeling --- .../slide/app-slide-preview/app-slide-preview.tsx | 14 ++++++++++---- .../src/app/pages/editor/app-editor/app-editor.tsx | 4 ++-- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx index 4200a97aa..2f4a0810c 100644 --- a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx +++ b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx @@ -1,5 +1,7 @@ import {Component, h, Host, Listen, State, Event, EventEmitter, Element} from '@stencil/core'; +import {cleanContent} from '@deckdeckgo/deck-utils'; + @Component({ tag: 'app-slide-preview', styleUrl: 'app-slide-preview.scss', @@ -65,7 +67,9 @@ export class AppSlidePreview { return; } - this.deckPreviewRef?.replaceChild(slide.cloneNode(true), this.deckPreviewRef.firstChild); + const content: string = await cleanContent(slide.outerHTML); + + this.deckPreviewRef.innerHTML = content; } private async blockSlide() { @@ -89,9 +93,11 @@ export class AppSlidePreview { } return ( - (this.deckPreviewRef = el as HTMLDeckgoDeckElement)} onSlidesDidLoad={() => this.blockSlide()}> -
{/* Placeholder for replace first child */}
- + (this.deckPreviewRef = el as HTMLDeckgoDeckElement)} + onSlidesDidLoad={() => this.blockSlide()}> ); } } diff --git a/studio/src/app/pages/editor/app-editor/app-editor.tsx b/studio/src/app/pages/editor/app-editor/app-editor.tsx index cb2ad9ed9..cd3a34a5f 100644 --- a/studio/src/app/pages/editor/app-editor/app-editor.tsx +++ b/studio/src/app/pages/editor/app-editor/app-editor.tsx @@ -141,8 +141,8 @@ export class AppEditor { } async init() { - await this.deckEventsHandler.init(this.el); - await this.editorEventsHandler.init(this.el); + await this.deckEventsHandler.init(this.mainRef); + await this.editorEventsHandler.init(this.mainRef); await this.initOffline(); From 5795f5271ff4e9cc4792d4795511617dfe89dfea Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Thu, 19 Nov 2020 07:54:38 +0100 Subject: [PATCH 04/23] feat: update preview on keypress and paste --- .../app-slide-preview/app-slide-preview.tsx | 49 +++++++++++++------ .../pages/editor/app-editor/app-editor.tsx | 2 +- studio/src/components.d.ts | 2 + 3 files changed, 36 insertions(+), 17 deletions(-) diff --git a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx index 2f4a0810c..446519fd1 100644 --- a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx +++ b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx @@ -1,6 +1,7 @@ -import {Component, h, Host, Listen, State, Event, EventEmitter, Element} from '@stencil/core'; +import {Component, h, Host, Listen, State, Event, EventEmitter, Element, Prop} from '@stencil/core'; import {cleanContent} from '@deckdeckgo/deck-utils'; +import {debounce} from '@deckdeckgo/utils'; @Component({ tag: 'app-slide-preview', @@ -9,6 +10,9 @@ import {cleanContent} from '@deckdeckgo/deck-utils'; export class AppSlidePreview { @Element() el: HTMLElement; + @Prop() + deckRef!: HTMLDeckgoDeckElement; + @State() private preview: boolean = false; @@ -16,23 +20,20 @@ export class AppSlidePreview { @Event({bubbles: false}) private previewAttached: EventEmitter; + private readonly debounceUpdatePreview: () => void; + + constructor() { + this.debounceUpdatePreview = debounce(async () => { + await this.updatePreview(); + }, 250); + } + componentDidUpdate() { if (this.preview) { this.previewAttached.emit(); } } - @Listen('slideDidUpdate', {target: 'document'}) - async onSlideDidUpdate($event: CustomEvent) { - if (!$event || !$event.detail) { - return; - } - - const slide: HTMLElement = $event.detail; - - await this.updateSlide(slide); - } - @Listen('elementFocus', {target: 'document'}) async onElementFocus($event: CustomEvent) { if (!$event || !$event.detail) { @@ -47,17 +48,21 @@ export class AppSlidePreview { await this.initDeckPreview(); this.el.addEventListener('previewAttached', async () => await this.updateSlide(selectedElement.parentElement), {once: true}); + + this.deckRef.addEventListener('keypress', () => this.debounceUpdatePreview(), {passive: true}); + this.deckRef.addEventListener('paste', () => this.debounceUpdatePreview(), {passive: true}); + } else { + this.deckRef.removeEventListener('keypress', () => this.debounceUpdatePreview(), true); + this.deckRef.removeEventListener('paste', () => this.debounceUpdatePreview(), true); } } async initDeckPreview() { - const deck: HTMLElement = document.querySelector('main > deckgo-deck'); - - if (!deck) { + if (!this.deckRef) { return; } - this.deckPreviewRef?.setAttribute('style', deck.style.cssText); + this.deckPreviewRef?.setAttribute('style', this.deckRef.style.cssText); await this.deckPreviewRef?.initSlideSize(); } @@ -76,6 +81,18 @@ export class AppSlidePreview { await this.deckPreviewRef?.blockSlide(true); } + private async updatePreview() { + const index = await this.deckRef?.getActiveIndex(); + + if (index < 0) { + return; + } + + const slideElement: HTMLElement | undefined = this.deckRef?.querySelector('.deckgo-slide-container:nth-child(' + (index + 1) + ')'); + + await this.updateSlide(slideElement); + } + render() { return ( - + , (this.actionsEditorRef = el as HTMLAppActionsEditorElement)} diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts index 5a1451b08..c86015b4e 100644 --- a/studio/src/components.d.ts +++ b/studio/src/components.d.ts @@ -390,6 +390,7 @@ export namespace Components { interface AppSlideNavigate { } interface AppSlidePreview { + "deckRef": HTMLDeckgoDeckElement; } interface AppSlideWarning { } @@ -1713,6 +1714,7 @@ declare namespace LocalJSX { "onReorder"?: (event: CustomEvent) => void; } interface AppSlidePreview { + "deckRef": HTMLDeckgoDeckElement; "onPreviewAttached"?: (event: CustomEvent) => void; } interface AppSlideWarning { From c5121557933595133d42409e5fb637b6122fcefb Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Thu, 19 Nov 2020 07:58:18 +0100 Subject: [PATCH 05/23] refactor: move component to package --- .../{ => slide}/app-slide-warning/app-slide-warning.scss | 0 .../{ => slide}/app-slide-warning/app-slide-warning.tsx | 6 +++--- 2 files changed, 3 insertions(+), 3 deletions(-) rename studio/src/app/components/editor/{ => slide}/app-slide-warning/app-slide-warning.scss (100%) rename studio/src/app/components/editor/{ => slide}/app-slide-warning/app-slide-warning.tsx (97%) diff --git a/studio/src/app/components/editor/app-slide-warning/app-slide-warning.scss b/studio/src/app/components/editor/slide/app-slide-warning/app-slide-warning.scss similarity index 100% rename from studio/src/app/components/editor/app-slide-warning/app-slide-warning.scss rename to studio/src/app/components/editor/slide/app-slide-warning/app-slide-warning.scss diff --git a/studio/src/app/components/editor/app-slide-warning/app-slide-warning.tsx b/studio/src/app/components/editor/slide/app-slide-warning/app-slide-warning.tsx similarity index 97% rename from studio/src/app/components/editor/app-slide-warning/app-slide-warning.tsx rename to studio/src/app/components/editor/slide/app-slide-warning/app-slide-warning.tsx index e72b3ffbe..1e525ef78 100644 --- a/studio/src/app/components/editor/app-slide-warning/app-slide-warning.tsx +++ b/studio/src/app/components/editor/slide/app-slide-warning/app-slide-warning.tsx @@ -4,9 +4,9 @@ import {popoverController} from '@ionic/core'; import {debounce} from '@deckdeckgo/utils'; -import {ContrastUtils} from '../../../utils/editor/contrast.utils'; -import {NodeUtils} from '../../../utils/editor/node.utils'; -import {SlotUtils} from '../../../utils/editor/slot.utils'; +import {ContrastUtils} from '../../../../utils/editor/contrast.utils'; +import {NodeUtils} from '../../../../utils/editor/node.utils'; +import {SlotUtils} from '../../../../utils/editor/slot.utils'; @Component({ tag: 'app-slide-warning', From 2ae166a66bd1125db60bb434df35aa21ce271235 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Thu, 19 Nov 2020 11:31:51 +0100 Subject: [PATCH 06/23] feat: improve highlight and markdown for preview --- CHANGELOG.md | 3 +- .../app-components-highlight-code.md | 28 +++++------ docs/package-lock.json | 12 ++--- docs/package.json | 4 +- .../app-components-highlight-code.tsx | 28 +++++------ remote/package-lock.json | 12 ++--- remote/package.json | 4 +- studio/package-lock.json | 12 ++--- studio/package.json | 4 +- .../app-slide-preview/app-slide-preview.scss | 18 +++++++ .../pages/editor/app-editor/app-editor.scss | 11 +++-- webcomponents/highlight-code/CHANGELOG.md | 13 +++++ .../highlight-code/package-lock.json | 2 +- webcomponents/highlight-code/package.json | 2 +- .../deckdeckgo-highlight-code.scss | 48 ++++++++++++------- .../deckdeckgo-highlight-code.tsx | 6 ++- .../deckdeckgo-highlight-code-languages.tsx | 1 + webcomponents/markdown/CHANGELOG.md | 7 +++ webcomponents/markdown/package-lock.json | 2 +- webcomponents/markdown/package.json | 2 +- .../markdown/deckdeckgo-markdown.scss | 5 ++ 21 files changed, 143 insertions(+), 81 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3ac1d28c0..f753cf85f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,11 +28,12 @@ ### Web Components: New -- markdown: v1.1.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/markdown/CHANGELOG.md)) +- markdown: v1.1.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/markdown/CHANGELOG.md)) ### Web Components - core: v8.1.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/core/CHANGELOG.md)) +- highlight-code: v2.2.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/highlight-code/CHANGELOG.md)) - lazy-img: v3.0.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/lazy-img/CHANGELOG.md)) ### Others: New diff --git a/docs/docs/components/app-components-highlight-code/app-components-highlight-code.md b/docs/docs/components/app-components-highlight-code/app-components-highlight-code.md index cfd3057f2..2932cd90a 100644 --- a/docs/docs/components/app-components-highlight-code/app-components-highlight-code.md +++ b/docs/docs/components/app-components-highlight-code/app-components-highlight-code.md @@ -228,20 +228,20 @@ If the code is displayed as an "ubuntu" terminal card (`terminal` property equal | --deckgo-highlight-code-ubuntu-header-button-height | 12px | The height of a button of the card header. | | --deckgo-highlight-code-ubuntu-header-button-border-radius | 50% | The border-radius of a button of the card header. | | --deckgo-highlight-code-ubuntu-header-button-margin | 0 6px 0 0 | The margin of a button of the card header. | -| --deckgo-highlight-code-carbon-header-button-font-size | 7px | The font-size of a button of the card header. | -| --deckgo-highlight-code-carbon-header-button-color | black | The color of a button of the card header. | -| --deckgo-highlight-code-carbon-header-button-text-shadow | 0px 1px 0px rgba(255, 255, 255, 0.2) | The text-shadow of a button of the card header. | -| --deckgo-highlight-code-carbon-header-button-box-shadow | 0px 0px 1px 0px #41403a, 0px 1px 1px 0px #474642 | The box-shadow of a button of the card header. | -| --deckgo-highlight-code-carbon-header-button-close-background | linear-gradient(#f37458 0%, #de4c12 100%) | The close button background of the card header. | -| --deckgo-highlight-code-carbon-header-button-close-border | | The close button border of the card header. | -| --deckgo-highlight-code-carbon-header-button-minimize-background | linear-gradient(#7d7871 0%, #595953 100%) | The minimize button background of the card header. | -| --deckgo-highlight-code-carbon-header-button-minimize-border | | The minimize button border of the card header. | -| --deckgo-highlight-code-carbon-header-button-maximize-background | linear-gradient(#7d7871 0%, #595953 100%) | The maximize button background of the card header. | -| --deckgo-highlight-code-carbon-header-button-maximize-border | | The maximize button border of the card header. | -| --deckgo-highlight-code-carbon-header-user-color | #d5d0ce | The user's color of the card header. | -| --deckgo-highlight-code-carbon-header-user-font-size | 12px | The user's font-size of the card header. | -| --deckgo-highlight-code-carbon-header-user-line-height | 14px | The user's line-height of the card header. | -| --deckgo-highlight-code-carbon-header-user-margin | 0 0 1px 4px | The user's margin of the card header. | +| --deckgo-highlight-code-ubuntu-header-button-font-size | 7px | The font-size of a button of the card header. | +| --deckgo-highlight-code-ubuntu-header-button-color | black | The color of a button of the card header. | +| --deckgo-highlight-code-ubuntu-header-button-text-shadow | 0px 1px 0px rgba(255, 255, 255, 0.2) | The text-shadow of a button of the card header. | +| --deckgo-highlight-code-ubuntu-header-button-box-shadow | 0px 0px 1px 0px #41403a, 0px 1px 1px 0px #474642 | The box-shadow of a button of the card header. | +| --deckgo-highlight-code-ubuntu-header-button-close-background | linear-gradient(#f37458 0%, #de4c12 100%) | The close button background of the card header. | +| --deckgo-highlight-code-ubuntu-header-button-close-border | | The close button border of the card header. | +| --deckgo-highlight-code-ubuntu-header-button-minimize-background | linear-gradient(#7d7871 0%, #595953 100%) | The minimize button background of the card header. | +| --deckgo-highlight-code-ubuntu-header-button-minimize-border | | The minimize button border of the card header. | +| --deckgo-highlight-code-ubuntu-header-button-maximize-background | linear-gradient(#7d7871 0%, #595953 100%) | The maximize button background of the card header. | +| --deckgo-highlight-code-ubuntu-header-button-maximize-border | | The maximize button border of the card header. | +| --deckgo-highlight-code-ubuntu-header-user-color | #d5d0ce | The user's color of the card header. | +| --deckgo-highlight-code-ubuntu-header-user-font-size | 12px | The user's font-size of the card header. | +| --deckgo-highlight-code-ubuntu-header-user-line-height | 14px | The user's line-height of the card header. | +| --deckgo-highlight-code-ubuntu-header-user-margin | 0 0 1px 4px | The user's margin of the card header. | ### Methods diff --git a/docs/package-lock.json b/docs/package-lock.json index 9094adcbd..4aa17776d 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -1096,9 +1096,9 @@ } }, "@deckdeckgo/highlight-code": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@deckdeckgo/highlight-code/-/highlight-code-2.1.1.tgz", - "integrity": "sha512-nNYogbsM/uiNKLPNpiwBsmdi1wmIoidrH8jX6H0I6R1rva3DqtN7VJBrwFiiSBYPE5220LOchQAputmoGkQczQ==", + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@deckdeckgo/highlight-code/-/highlight-code-2.2.1.tgz", + "integrity": "sha512-58pTwLeq7WiqBePOCWmjD7QkC0hkJph1xzcaOBqIBntS/YuPrP4JXgwdiNwzd4rwmS+U4nUJJrLZ1eZD0/iUQQ==", "requires": { "@deckdeckgo/utils": "1.3.0", "prismjs": "^1.21.0" @@ -1129,9 +1129,9 @@ "integrity": "sha512-Uuwye8ln17PgZYE4TOFfRTQD+3lUu6UFxoLVbutzqf/N7DAkkgvlvb2Asg0yul0lQfM27ocANAKK1LeLvMIcZw==" }, "@deckdeckgo/markdown": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-1.1.0.tgz", - "integrity": "sha512-uWlC6yETjdUlxDEC1kvOyLQ16LME0J1vXiaADb7HZCyJLBvyS09fyj2lceoo1542koNnZ6vMKPbTwaLkVe19Xw==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-1.1.1.tgz", + "integrity": "sha512-35pTOUvDgPBdxLxOTuH1FYBqYt9Y2bgwFdkSsNYVr4aQ0eAqxvk935qrMqoA2HBYywTKqNUpg4gDs/XKTE4dYw==", "requires": { "marked": "^1.2.3" } diff --git a/docs/package.json b/docs/package.json index 93c24b12a..298f5a248 100644 --- a/docs/package.json +++ b/docs/package.json @@ -20,10 +20,10 @@ "@deckdeckgo/deck-utils": "^3.2.1", "@deckdeckgo/demo": "^2.0.1", "@deckdeckgo/drag-resize-rotate": "^2.0.1", - "@deckdeckgo/highlight-code": "^2.1.1", + "@deckdeckgo/highlight-code": "^2.2.1", "@deckdeckgo/inline-editor": "^3.0.2", "@deckdeckgo/lazy-img": "^3.0.0", - "@deckdeckgo/markdown": "^1.1.0", + "@deckdeckgo/markdown": "^1.1.1", "@deckdeckgo/math": "^2.0.3", "@deckdeckgo/qrcode": "^2.0.1", "@deckdeckgo/reveal": "^1.0.0", diff --git a/docs/src/app/pages/docs/components/app-components-highlight-code/app-components-highlight-code.tsx b/docs/src/app/pages/docs/components/app-components-highlight-code/app-components-highlight-code.tsx index d3ad9eea8..3ba643775 100644 --- a/docs/src/app/pages/docs/components/app-components-highlight-code/app-components-highlight-code.tsx +++ b/docs/src/app/pages/docs/components/app-components-highlight-code/app-components-highlight-code.tsx @@ -780,72 +780,72 @@ export class AppComponentsHighlightCode { The margin of a button of the card header. - --deckgo-highlight-code-carbon-header-button-font-size + --deckgo-highlight-code-ubuntu-header-button-font-size 7px The font-size of a button of the card header. - --deckgo-highlight-code-carbon-header-button-color + --deckgo-highlight-code-ubuntu-header-button-color black The color of a button of the card header. - --deckgo-highlight-code-carbon-header-button-text-shadow + --deckgo-highlight-code-ubuntu-header-button-text-shadow 0px 1px 0px rgba(255, 255, 255, 0.2) The text-shadow of a button of the card header. - --deckgo-highlight-code-carbon-header-button-box-shadow + --deckgo-highlight-code-ubuntu-header-button-box-shadow 0px 0px 1px 0px #41403a, 0px 1px 1px 0px #474642 The box-shadow of a button of the card header. - --deckgo-highlight-code-carbon-header-button-close-background + --deckgo-highlight-code-ubuntu-header-button-close-background linear-gradient(#f37458 0%, #de4c12 100%) The close button background of the card header. - --deckgo-highlight-code-carbon-header-button-close-border + --deckgo-highlight-code-ubuntu-header-button-close-border The close button border of the card header. - --deckgo-highlight-code-carbon-header-button-minimize-background + --deckgo-highlight-code-ubuntu-header-button-minimize-background linear-gradient(#7d7871 0%, #595953 100%) The minimize button background of the card header. - --deckgo-highlight-code-carbon-header-button-minimize-border + --deckgo-highlight-code-ubuntu-header-button-minimize-border The minimize button border of the card header. - --deckgo-highlight-code-carbon-header-button-maximize-background + --deckgo-highlight-code-ubuntu-header-button-maximize-background linear-gradient(#7d7871 0%, #595953 100%) The maximize button background of the card header. - --deckgo-highlight-code-carbon-header-button-maximize-border + --deckgo-highlight-code-ubuntu-header-button-maximize-border The maximize button border of the card header. - --deckgo-highlight-code-carbon-header-user-color + --deckgo-highlight-code-ubuntu-header-user-color #d5d0ce The user's color of the card header. - --deckgo-highlight-code-carbon-header-user-font-size + --deckgo-highlight-code-ubuntu-header-user-font-size 12px The user's font-size of the card header. - --deckgo-highlight-code-carbon-header-user-line-height + --deckgo-highlight-code-ubuntu-header-user-line-height 14px The user's line-height of the card header. - --deckgo-highlight-code-carbon-header-user-margin + --deckgo-highlight-code-ubuntu-header-user-margin 0 0 1px 4px The user's margin of the card header. diff --git a/remote/package-lock.json b/remote/package-lock.json index 5626d16ff..ae89591ef 100644 --- a/remote/package-lock.json +++ b/remote/package-lock.json @@ -1118,9 +1118,9 @@ } }, "@deckdeckgo/highlight-code": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@deckdeckgo/highlight-code/-/highlight-code-2.1.1.tgz", - "integrity": "sha512-nNYogbsM/uiNKLPNpiwBsmdi1wmIoidrH8jX6H0I6R1rva3DqtN7VJBrwFiiSBYPE5220LOchQAputmoGkQczQ==", + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@deckdeckgo/highlight-code/-/highlight-code-2.2.1.tgz", + "integrity": "sha512-58pTwLeq7WiqBePOCWmjD7QkC0hkJph1xzcaOBqIBntS/YuPrP4JXgwdiNwzd4rwmS+U4nUJJrLZ1eZD0/iUQQ==", "requires": { "@deckdeckgo/utils": "1.3.0", "prismjs": "^1.21.0" @@ -1132,9 +1132,9 @@ "integrity": "sha512-Uuwye8ln17PgZYE4TOFfRTQD+3lUu6UFxoLVbutzqf/N7DAkkgvlvb2Asg0yul0lQfM27ocANAKK1LeLvMIcZw==" }, "@deckdeckgo/markdown": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-1.1.0.tgz", - "integrity": "sha512-uWlC6yETjdUlxDEC1kvOyLQ16LME0J1vXiaADb7HZCyJLBvyS09fyj2lceoo1542koNnZ6vMKPbTwaLkVe19Xw==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-1.1.1.tgz", + "integrity": "sha512-35pTOUvDgPBdxLxOTuH1FYBqYt9Y2bgwFdkSsNYVr4aQ0eAqxvk935qrMqoA2HBYywTKqNUpg4gDs/XKTE4dYw==", "requires": { "marked": "^1.2.3" } diff --git a/remote/package.json b/remote/package.json index 5b7b4f605..b4161642d 100644 --- a/remote/package.json +++ b/remote/package.json @@ -20,9 +20,9 @@ "@deckdeckgo/deck-utils": "^3.2.1", "@deckdeckgo/demo": "^2.0.1", "@deckdeckgo/drag-resize-rotate": "^2.0.1", - "@deckdeckgo/highlight-code": "^2.1.1", + "@deckdeckgo/highlight-code": "^2.2.1", "@deckdeckgo/lazy-img": "^3.0.0", - "@deckdeckgo/markdown": "^1.1.0", + "@deckdeckgo/markdown": "^1.1.1", "@deckdeckgo/math": "^2.0.3", "@deckdeckgo/qrcode": "^2.0.1", "@deckdeckgo/remote-utils": "^1.0.0", diff --git a/studio/package-lock.json b/studio/package-lock.json index 236733344..27f004720 100644 --- a/studio/package-lock.json +++ b/studio/package-lock.json @@ -1158,9 +1158,9 @@ } }, "@deckdeckgo/highlight-code": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@deckdeckgo/highlight-code/-/highlight-code-2.1.1.tgz", - "integrity": "sha512-nNYogbsM/uiNKLPNpiwBsmdi1wmIoidrH8jX6H0I6R1rva3DqtN7VJBrwFiiSBYPE5220LOchQAputmoGkQczQ==", + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@deckdeckgo/highlight-code/-/highlight-code-2.2.1.tgz", + "integrity": "sha512-58pTwLeq7WiqBePOCWmjD7QkC0hkJph1xzcaOBqIBntS/YuPrP4JXgwdiNwzd4rwmS+U4nUJJrLZ1eZD0/iUQQ==", "requires": { "@deckdeckgo/utils": "1.3.0", "prismjs": "^1.21.0" @@ -1191,9 +1191,9 @@ "integrity": "sha512-Uuwye8ln17PgZYE4TOFfRTQD+3lUu6UFxoLVbutzqf/N7DAkkgvlvb2Asg0yul0lQfM27ocANAKK1LeLvMIcZw==" }, "@deckdeckgo/markdown": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-1.1.0.tgz", - "integrity": "sha512-uWlC6yETjdUlxDEC1kvOyLQ16LME0J1vXiaADb7HZCyJLBvyS09fyj2lceoo1542koNnZ6vMKPbTwaLkVe19Xw==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-1.1.1.tgz", + "integrity": "sha512-35pTOUvDgPBdxLxOTuH1FYBqYt9Y2bgwFdkSsNYVr4aQ0eAqxvk935qrMqoA2HBYywTKqNUpg4gDs/XKTE4dYw==", "requires": { "marked": "^1.2.3" } diff --git a/studio/package.json b/studio/package.json index 70377220c..735cf1c71 100644 --- a/studio/package.json +++ b/studio/package.json @@ -24,10 +24,10 @@ "@deckdeckgo/deck-utils": "^3.2.1", "@deckdeckgo/demo": "^2.0.1", "@deckdeckgo/drag-resize-rotate": "^2.0.1", - "@deckdeckgo/highlight-code": "^2.1.1", + "@deckdeckgo/highlight-code": "^2.2.1", "@deckdeckgo/inline-editor": "^3.0.2", "@deckdeckgo/lazy-img": "^3.0.0", - "@deckdeckgo/markdown": "^1.1.0", + "@deckdeckgo/markdown": "^1.1.1", "@deckdeckgo/math": "^2.0.3", "@deckdeckgo/qrcode": "^2.0.1", "@deckdeckgo/remote": "^2.0.1", diff --git a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss index 137104f54..e72881724 100644 --- a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss +++ b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss @@ -36,6 +36,24 @@ app-slide-preview { --slide-split-padding-end: 4px; --slide-split-padding-bottom: 8px; + --deckgo-highlight-code-carbon-header-padding: 2px 8px; + --deckgo-highlight-code-carbon-header-button-width: 2px; + --deckgo-highlight-code-carbon-header-button-height: 2px; + --deckgo-highlight-code-margin: 0 0 4px; + --deckgo-highlight-code-padding: 0 8px; + + --deckgo-highlight-code-carbon-margin: 8px 0; + --deckgo-highlight-code-ubuntu-margin: 8px 0; + + --deckgo-highlight-code-carbon-box-shadow: rgba(0, 0, 0, 0.55) 0 2px 4px; + + --deckgo-highlight-code-ubuntu-header-height: 8px; + --deckgo-highlight-code-ubuntu-header-button-width: 4px; + --deckgo-highlight-code-ubuntu-header-button-height: 4px; + --deckgo-highlight-code-ubuntu-header-button-span-display: none; + + --deckgo-markdown-container-padding: 4px 8px; + .deckgo-slide-container { > * { margin: 0; diff --git a/studio/src/app/pages/editor/app-editor/app-editor.scss b/studio/src/app/pages/editor/app-editor/app-editor.scss index 2df7d54d9..6fddff364 100644 --- a/studio/src/app/pages/editor/app-editor/app-editor.scss +++ b/studio/src/app/pages/editor/app-editor/app-editor.scss @@ -21,14 +21,15 @@ ion-nav app-editor ion-content { } app-editor { - @import "../../../../global/theme/editor/editor-deck"; - @import "../../../../global/theme/editor/editor-deck-placeholder"; - @import "../../../../global/theme/editor/editor-deck-social"; @import "../../../../global/theme/editor/editor-deck-header-footer"; - + @import "../../../../global/theme/editor/editor-deck-social"; + @import "../../../../global/theme/editor/editor-deck-transition"; @import "../../../../global/theme/editor/editor-loading"; - @import "../../../../global/theme/editor/editor-deck-transition"; + main { + @import "../../../../global/theme/editor/editor-deck"; + @import "../../../../global/theme/editor/editor-deck-placeholder"; + } @import "node_modules/@deckdeckgo/deck-utils/css/deck"; diff --git a/webcomponents/highlight-code/CHANGELOG.md b/webcomponents/highlight-code/CHANGELOG.md index 7997889df..2ebe62d8b 100644 --- a/webcomponents/highlight-code/CHANGELOG.md +++ b/webcomponents/highlight-code/CHANGELOG.md @@ -1,3 +1,16 @@ +# 2.2.1 (2020-11-19) + +### Style + +- cursor text if set as editable + +# 2.2.0 (2020-11-19) + +### Style + +- new style to hide characters in ubuntu bar buttons +- ubuntu styling options variables renamed + # 2.1.1 (2020-10-23) ### Fix diff --git a/webcomponents/highlight-code/package-lock.json b/webcomponents/highlight-code/package-lock.json index f4d714d5d..9d9c862d7 100644 --- a/webcomponents/highlight-code/package-lock.json +++ b/webcomponents/highlight-code/package-lock.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/highlight-code", - "version": "2.1.1", + "version": "2.2.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/webcomponents/highlight-code/package.json b/webcomponents/highlight-code/package.json index 20199d408..5c9e1143f 100644 --- a/webcomponents/highlight-code/package.json +++ b/webcomponents/highlight-code/package.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/highlight-code", - "version": "2.1.1", + "version": "2.2.1", "description": "A Web Component to highlight your code", "main": "dist/index.cjs.js", "module": "dist/index.js", diff --git a/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.scss b/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.scss index 2c3f8294a..7a9e8bb59 100644 --- a/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.scss +++ b/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.scss @@ -18,6 +18,10 @@ } :host([editable]) { + div.deckgo-highlight-code-container { + cursor: text; + } + code:empty:not(:focus):after { content: var(--deckgo-highlight-code-empty-text, "Click to add your code"); } @@ -259,38 +263,46 @@ div.ubuntu { align-items: center; justify-content: center; - width: var(--deckgo-highlight-code-carbon-header-button-width, 12px); - height: var(--deckgo-highlight-code-carbon-header-button-height, 12px); - border-radius: var(--deckgo-highlight-code-carbon-header-button-border-radius, 50%); - margin: var(--deckgo-highlight-code-carbon-header-button-margin, 0 4px 0 0); + width: var(--deckgo-highlight-code-ubuntu-header-button-width, 12px); + height: var(--deckgo-highlight-code-ubuntu-header-button-height, 12px); + border-radius: var(--deckgo-highlight-code-ubuntu-header-button-border-radius, 50%); + margin: var(--deckgo-highlight-code-ubuntu-header-button-margin, 0 4px 0 0); - font-size: var(--deckgo-highlight-code-carbon-header-button-font-size, 7px); + font-size: var(--deckgo-highlight-code-ubuntu-header-button-font-size, 7px); - color: var(--deckgo-highlight-code-carbon-header-button-color, black); + color: var(--deckgo-highlight-code-ubuntu-header-button-color, black); - text-shadow: var(--deckgo-highlight-code-carbon-header-button-text-shadow, 0px 1px 0px rgba(255, 255, 255, 0.2)); - box-shadow: var(--deckgo-highlight-code-carbon-header-button-box-shadow, 0px 0px 1px 0px #41403a, 0px 1px 1px 0px #474642); + text-shadow: var(--deckgo-highlight-code-ubuntu-header-button-text-shadow, 0px 1px 0px rgba(255, 255, 255, 0.2)); + box-shadow: var(--deckgo-highlight-code-ubuntu-header-button-box-shadow, 0px 0px 1px 0px #41403a, 0px 1px 1px 0px #474642); &.close { - background: var(--deckgo-highlight-code-carbon-header-button-close-background, linear-gradient(#f37458 0%, #de4c12 100%)); - border: var(--deckgo-highlight-code-carbon-header-button-close-border); + background: var(--deckgo-highlight-code-ubuntu-header-button-close-background, linear-gradient(#f37458 0%, #de4c12 100%)); + border: var(--deckgo-highlight-code-ubuntu-header-button-close-border); } &.minimize { - background: var(--deckgo-highlight-code-carbon-header-button-minimize-background, linear-gradient(#7d7871 0%, #595953 100%)); - border: var(--deckgo-highlight-code-carbon-header-button-minimize-border); + background: var(--deckgo-highlight-code-ubuntu-header-button-minimize-background, linear-gradient(#7d7871 0%, #595953 100%)); + border: var(--deckgo-highlight-code-ubuntu-header-button-minimize-border); } &.maximize { - background: var(--deckgo-highlight-code-carbon-header-button-maximize-background, linear-gradient(#7d7871 0%, #595953 100%)); - border: var(--deckgo-highlight-code-carbon-header-button-maximize-border); + background: var(--deckgo-highlight-code-ubuntu-header-button-maximize-background, linear-gradient(#7d7871 0%, #595953 100%)); + border: var(--deckgo-highlight-code-ubuntu-header-button-maximize-border); + } + + &.close, + &.minimize, + &.maximize { + span { + display: var(--deckgo-highlight-code-ubuntu-header-button-span-display, inherit); + } } } > p { - color: var(--deckgo-highlight-code-carbon-header-user-color, #d5d0ce); - font-size: var(--deckgo-highlight-code-carbon-header-user-font-size, 12px); - line-height: var(--deckgo-highlight-code-carbon-header-user-line-height, 14px); - margin: var(--deckgo-highlight-code-carbon-header-user-margin, 0 0 1px 4px); + color: var(--deckgo-highlight-code-ubuntu-header-user-color, #d5d0ce); + font-size: var(--deckgo-highlight-code-ubuntu-header-user-font-size, 12px); + line-height: var(--deckgo-highlight-code-ubuntu-header-user-line-height, 14px); + margin: var(--deckgo-highlight-code-ubuntu-header-user-margin, 0 0 1px 4px); } } diff --git a/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.tsx b/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.tsx index 73a882509..1c96f396f 100644 --- a/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.tsx +++ b/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.tsx @@ -675,6 +675,10 @@ export class DeckdeckgoHighlightCode { private renderUbuntuCircle(mode: 'close' | 'minimize' | 'maximize') { const symbol: string = mode === 'close' ? '✕' : mode === 'minimize' ? '─' : '◻'; - return
; + return ( +
+ +
+ ); } } diff --git a/webcomponents/highlight-code/src/declarations/deckdeckgo-highlight-code-languages.tsx b/webcomponents/highlight-code/src/declarations/deckdeckgo-highlight-code-languages.tsx index 659bf0090..d5c86d3e5 100644 --- a/webcomponents/highlight-code/src/declarations/deckdeckgo-highlight-code-languages.tsx +++ b/webcomponents/highlight-code/src/declarations/deckdeckgo-highlight-code-languages.tsx @@ -171,6 +171,7 @@ export const deckdeckgoHighlightCodeLanguages: DeckdeckgoHighlightCodeLanguages powershell: {title: 'PowerShell'}, processing: {title: 'Processing'}, prolog: {title: 'Prolog'}, + promql: {title: 'PromQL'}, properties: {title: '.properties'}, protobuf: {title: 'Protocol Buffers'}, pug: {title: 'Pug', require: ['markup']}, diff --git a/webcomponents/markdown/CHANGELOG.md b/webcomponents/markdown/CHANGELOG.md index 6fd9647c0..ff17f98dc 100644 --- a/webcomponents/markdown/CHANGELOG.md +++ b/webcomponents/markdown/CHANGELOG.md @@ -1,3 +1,10 @@ +# 1.1.1 (2020-11-19) + +### Style + +- cursor text if set as editable +- editable zone clickable on the all width + # 1.1.0 (2020-11-16) ### Features diff --git a/webcomponents/markdown/package-lock.json b/webcomponents/markdown/package-lock.json index bcb1aeb9b..c5259c309 100644 --- a/webcomponents/markdown/package-lock.json +++ b/webcomponents/markdown/package-lock.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/markdown", - "version": "1.1.0", + "version": "1.1.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/webcomponents/markdown/package.json b/webcomponents/markdown/package.json index 53e4f6e47..8acd6c6e9 100644 --- a/webcomponents/markdown/package.json +++ b/webcomponents/markdown/package.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/markdown", - "version": "1.1.0", + "version": "1.1.1", "description": "A Web Component to render markdown to HTML", "main": "dist/index.cjs.js", "module": "dist/index.js", diff --git a/webcomponents/markdown/src/components/markdown/deckdeckgo-markdown.scss b/webcomponents/markdown/src/components/markdown/deckdeckgo-markdown.scss index e3afdd24b..617e4a510 100644 --- a/webcomponents/markdown/src/components/markdown/deckdeckgo-markdown.scss +++ b/webcomponents/markdown/src/components/markdown/deckdeckgo-markdown.scss @@ -10,6 +10,10 @@ } :host([editable]) { + div.deckgo-markdown-container { + cursor: text; + } + div.markdown:empty:not(:focus):after { content: var(--deckgo-markdown-empty-text, "Click to add content using Markdown"); font-size: var(--deckgo-markdown-empty-font-size, 1.4em); @@ -24,6 +28,7 @@ ::slotted([slot="markdown"]) { display: inline-block; white-space: pre-wrap; + width: 100%; } div.markdown { From 836600644650d8b16b06e23ce4e4eced2eee0138 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Thu, 19 Nov 2020 12:52:43 +0100 Subject: [PATCH 07/23] feat: update on reset and slide update --- .../app-actions-element.tsx | 26 +++++++------------ .../app-slide-preview/app-slide-preview.tsx | 19 ++++++++++++-- studio/src/app/utils/editor/slot.utils.tsx | 10 +++---- 3 files changed, 31 insertions(+), 24 deletions(-) diff --git a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx index 6210cd82c..62127a8f0 100644 --- a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx +++ b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx @@ -162,14 +162,8 @@ export class AppActionsElement { } @Method() - blurSelectedElement(): Promise { - return new Promise(async (resolve) => { - if (this.selectedElement) { - this.selectedElement.blur(); - } - - resolve(); - }); + async blurSelectedElement() { + this.selectedElement?.blur(); } private select(element: HTMLElement, autoOpen: boolean): Promise { @@ -200,17 +194,15 @@ export class AppActionsElement { } @Method() - unSelect(): Promise { - return new Promise(async (resolve) => { - if (this.selectedElement) { - this.selectedElement.removeEventListener('paste', this.cleanOnPaste, true); - await this.detachMoveToolbarOnElement(); + async unSelect() { + if (!this.selectedElement) { + return; + } - await this.reset(); - } + this.selectedElement.removeEventListener('paste', this.cleanOnPaste, true); + await this.detachMoveToolbarOnElement(); - resolve(); - }); + await this.reset(); } private findSelectedElement(element: HTMLElement): Promise { diff --git a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx index 446519fd1..46c509b19 100644 --- a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx +++ b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx @@ -2,6 +2,7 @@ import {Component, h, Host, Listen, State, Event, EventEmitter, Element, Prop} f import {cleanContent} from '@deckdeckgo/deck-utils'; import {debounce} from '@deckdeckgo/utils'; +import {SlotUtils} from '../../../../utils/editor/slot.utils'; @Component({ tag: 'app-slide-preview', @@ -25,7 +26,7 @@ export class AppSlidePreview { constructor() { this.debounceUpdatePreview = debounce(async () => { await this.updatePreview(); - }, 250); + }, 500); } componentDidUpdate() { @@ -34,6 +35,18 @@ export class AppSlidePreview { } } + @Listen('slideDidUpdate', {target: 'document'}) + async onSlideDidUpdate() { + if (this.preview) { + this.debounceUpdatePreview(); + } + } + + @Listen('resetted', {target: 'document'}) + async onResetElement() { + this.preview = false; + } + @Listen('elementFocus', {target: 'document'}) async onElementFocus($event: CustomEvent) { if (!$event || !$event.detail) { @@ -42,7 +55,9 @@ export class AppSlidePreview { const selectedElement: HTMLElement = $event.detail; - this.preview = selectedElement?.parentElement?.nodeName?.toLowerCase().indexOf('deckgo-slide') >= 0; + this.preview = selectedElement?.parentElement?.nodeName?.toLowerCase().indexOf('deckgo-slide') >= 0 && SlotUtils.isNodeEditable(selectedElement); + + console.log(selectedElement); if (this.preview) { await this.initDeckPreview(); diff --git a/studio/src/app/utils/editor/slot.utils.tsx b/studio/src/app/utils/editor/slot.utils.tsx index 2246c9118..141a6097d 100644 --- a/studio/src/app/utils/editor/slot.utils.tsx +++ b/studio/src/app/utils/editor/slot.utils.tsx @@ -47,12 +47,12 @@ export class SlotUtils { return selectedElement?.nodeName?.toLowerCase() === SlotType.DRAG_RESIZE_ROTATE; } - static isNodeEditable(element: HTMLElement): boolean { + static isNodeEditable(element?: HTMLElement): boolean { return ( - element.nodeName.toLowerCase() === SlotType.CODE || - element.nodeName.toLowerCase() === SlotType.MATH || - element.nodeName.toLowerCase() === SlotType.WORD_CLOUD || - element.nodeName.toLowerCase() === SlotType.MARKDOWN + element?.nodeName?.toLowerCase() === SlotType.CODE || + element?.nodeName?.toLowerCase() === SlotType.MATH || + element?.nodeName?.toLowerCase() === SlotType.WORD_CLOUD || + element?.nodeName?.toLowerCase() === SlotType.MARKDOWN ); } } From 0008910a679adbb0ebdd66a5e79c40ffbf6f5cf5 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Thu, 19 Nov 2020 12:59:15 +0100 Subject: [PATCH 08/23] fix: attach events --- .../events/deck/deck-events.handler.tsx | 100 +++++++++--------- .../events/editor/editor-events.handler.tsx | 14 +-- 2 files changed, 57 insertions(+), 57 deletions(-) diff --git a/studio/src/app/handlers/editor/events/deck/deck-events.handler.tsx b/studio/src/app/handlers/editor/events/deck/deck-events.handler.tsx index 4c416784f..78b4f4064 100644 --- a/studio/src/app/handlers/editor/events/deck/deck-events.handler.tsx +++ b/studio/src/app/handlers/editor/events/deck/deck-events.handler.tsx @@ -26,7 +26,7 @@ import {SlideService} from '../../../../services/data/slide/slide.service'; import {DeckAction} from '../../../../utils/editor/deck-action'; export class DeckEventsHandler { - private el: HTMLElement; + private mainRef: HTMLElement; private deckService: DeckService; private slideService: SlideService; @@ -49,54 +49,54 @@ export class DeckEventsHandler { }, 500); } - init(el: HTMLElement): Promise { - return new Promise(async (resolve) => { - this.el = el; - - this.el.addEventListener('input', this.onInputChange, false); - this.el.addEventListener('slideDidChange', this.onSlideChange, false); - this.el.addEventListener('slideDidLoad', this.onSlideDidLoad, false); - this.el.addEventListener('slidesDidLoad', this.onSlidesDidLoad, false); - this.el.addEventListener('slideDelete', this.onSlideDelete, false); - this.el.addEventListener('codeDidChange', this.onCustomEventChange, false); - this.el.addEventListener('mathDidChange', this.onCustomEventChange, false); - this.el.addEventListener('markdownDidChange', this.onCustomEventChange, false); - this.el.addEventListener('wordCloudDidChange', this.onCustomEventChange, false); - this.el.addEventListener('imgDidChange', this.onCustomEventChange, false); - this.el.addEventListener('linkCreated', this.onCustomEventChange, false); - this.el.addEventListener('styleDidChange', this.onCustomEventChange, false); - this.el.addEventListener('drrDidChange', this.onCustomEventChange, false); - this.el.addEventListener('notesDidChange', this.onSlideChange, false); - - if (document) { - document.addEventListener('deckDidChange', this.onDeckChange, false); - document.addEventListener('deckNeedChange', this.onDeckNeedChange, false); - } + async init(el: HTMLElement) { + this.mainRef = el; - resolve(); - }); + if (!document) { + return; + } + + document.addEventListener('input', this.onInputChange, false); + document.addEventListener('slideDidChange', this.onSlideChange, false); + document.addEventListener('slideDidLoad', this.onSlideDidLoad, false); + document.addEventListener('slidesDidLoad', this.onSlidesDidLoad, false); + document.addEventListener('slideDelete', this.onSlideDelete, false); + document.addEventListener('codeDidChange', this.onCustomEventChange, false); + document.addEventListener('mathDidChange', this.onCustomEventChange, false); + document.addEventListener('markdownDidChange', this.onCustomEventChange, false); + document.addEventListener('wordCloudDidChange', this.onCustomEventChange, false); + document.addEventListener('imgDidChange', this.onCustomEventChange, false); + document.addEventListener('linkCreated', this.onCustomEventChange, false); + document.addEventListener('styleDidChange', this.onCustomEventChange, false); + document.addEventListener('drrDidChange', this.onCustomEventChange, false); + document.addEventListener('notesDidChange', this.onSlideChange, false); + + document.addEventListener('deckDidChange', this.onDeckChange, false); + document.addEventListener('deckNeedChange', this.onDeckNeedChange, false); } destroy() { - this.el.removeEventListener('input', this.onInputChange, true); - this.el.removeEventListener('slideDidChange', this.onSlideChange, true); - this.el.removeEventListener('slideDidLoad', this.onSlideDidLoad, true); - this.el.removeEventListener('slidesDidLoad', this.onSlidesDidLoad, true); - this.el.removeEventListener('slideDelete', this.onSlideDelete, true); - this.el.removeEventListener('codeDidChange', this.onCustomEventChange, true); - this.el.removeEventListener('mathDidChange', this.onCustomEventChange, true); - this.el.removeEventListener('markdownDidChange', this.onCustomEventChange, true); - this.el.removeEventListener('wordCloudDidChange', this.onCustomEventChange, true); - this.el.removeEventListener('imgDidChange', this.onCustomEventChange, true); - this.el.removeEventListener('linkCreated', this.onCustomEventChange, true); - this.el.removeEventListener('styleDidChange', this.onCustomEventChange, true); - this.el.removeEventListener('drrDidChange', this.onCustomEventChange, true); - this.el.removeEventListener('notesDidChange', this.onSlideChange, true); - - if (document) { - document.removeEventListener('deckDidChange', this.onDeckChange, true); - document.removeEventListener('deckNeedChange', this.onDeckNeedChange, true); + if (!document) { + return; } + + document.removeEventListener('input', this.onInputChange, true); + document.removeEventListener('slideDidChange', this.onSlideChange, true); + document.removeEventListener('slideDidLoad', this.onSlideDidLoad, true); + document.removeEventListener('slidesDidLoad', this.onSlidesDidLoad, true); + document.removeEventListener('slideDelete', this.onSlideDelete, true); + document.removeEventListener('codeDidChange', this.onCustomEventChange, true); + document.removeEventListener('mathDidChange', this.onCustomEventChange, true); + document.removeEventListener('markdownDidChange', this.onCustomEventChange, true); + document.removeEventListener('wordCloudDidChange', this.onCustomEventChange, true); + document.removeEventListener('imgDidChange', this.onCustomEventChange, true); + document.removeEventListener('linkCreated', this.onCustomEventChange, true); + document.removeEventListener('styleDidChange', this.onCustomEventChange, true); + document.removeEventListener('drrDidChange', this.onCustomEventChange, true); + document.removeEventListener('notesDidChange', this.onSlideChange, true); + + document.removeEventListener('deckDidChange', this.onDeckChange, true); + document.removeEventListener('deckNeedChange', this.onDeckNeedChange, true); } private onSlideDidLoad = async ($event: CustomEvent) => { @@ -272,7 +272,7 @@ export class DeckEventsHandler { }; // Retrieve text and background color style randomly generated in the editor - const deckElement: HTMLElement = this.el.querySelector('deckgo-deck'); + const deckElement: HTMLElement = this.mainRef.querySelector('deckgo-deck'); if (deckElement) { const attributes: DeckAttributes = await this.getDeckAttributes(deckElement, false); deck.attributes = attributes; @@ -559,7 +559,7 @@ export class DeckEventsHandler { private deleteSlideElement(): Promise { return new Promise(async (resolve) => { - const deck: HTMLElement = this.el.querySelector('deckgo-deck'); + const deck: HTMLElement = this.mainRef.querySelector('deckgo-deck'); if (!deck) { resolve(); @@ -899,7 +899,7 @@ export class DeckEventsHandler { private slideToLastSlide(): Promise { return new Promise(async (resolve) => { - const deck: HTMLElement = this.el.querySelector('deckgo-deck'); + const deck: HTMLElement = this.mainRef.querySelector('deckgo-deck'); if (!deck || !deck.children || deck.children.length <= 0) { resolve(); @@ -930,7 +930,7 @@ export class DeckEventsHandler { initSlideSize(): Promise { return new Promise(async (resolve) => { - const deck: HTMLDeckgoDeckElement = this.el.querySelector('deckgo-deck'); + const deck: HTMLDeckgoDeckElement = this.mainRef.querySelector('deckgo-deck'); if (!deck) { return; @@ -978,14 +978,14 @@ export class DeckEventsHandler { detail: element, }); - this.el.dispatchEvent(slideDidUpdate); + this.mainRef.dispatchEvent(slideDidUpdate); resolve(); }); } async toggleSlideEditable(editable: boolean) { - const deck: HTMLElement = this.el.querySelector('deckgo-deck'); + const deck: HTMLElement = this.mainRef.querySelector('deckgo-deck'); if (!deck) { return; diff --git a/studio/src/app/handlers/editor/events/editor/editor-events.handler.tsx b/studio/src/app/handlers/editor/events/editor/editor-events.handler.tsx index f05cc8df6..499d47234 100644 --- a/studio/src/app/handlers/editor/events/editor/editor-events.handler.tsx +++ b/studio/src/app/handlers/editor/events/editor/editor-events.handler.tsx @@ -1,11 +1,11 @@ export class EditorEventsHandler { - private el: HTMLElement; + private mainRef: HTMLElement; init(el: HTMLElement): Promise { return new Promise(async (resolve) => { - this.el = el; + this.mainRef = el; - const deck: HTMLElement = this.el.querySelector('deckgo-deck'); + const deck: HTMLElement = this.mainRef.querySelector('deckgo-deck'); if (deck) { deck.addEventListener('keyup', this.onKeyUp, false); @@ -21,7 +21,7 @@ export class EditorEventsHandler { } destroy() { - const deck: HTMLElement = this.el.querySelector('deckgo-deck'); + const deck: HTMLElement = this.mainRef.querySelector('deckgo-deck'); if (deck) { deck.removeEventListener('keyup', this.onKeyUp, true); @@ -47,7 +47,7 @@ export class EditorEventsHandler { private touchToolbar(element: HTMLElement): Promise { return new Promise(async (resolve) => { - const actions: HTMLAppActionsEditorElement = this.el.querySelector('app-actions-editor'); + const actions: HTMLAppActionsEditorElement = this.mainRef.querySelector('app-actions-editor'); if (!actions) { resolve(); @@ -62,7 +62,7 @@ export class EditorEventsHandler { selectDeck(): Promise { return new Promise(async (resolve) => { - const actions: HTMLAppActionsEditorElement = this.el.querySelector('app-actions-editor'); + const actions: HTMLAppActionsEditorElement = this.mainRef.querySelector('app-actions-editor'); if (actions) { await actions.selectDeck(); @@ -78,7 +78,7 @@ export class EditorEventsHandler { blockSlide(blockState: boolean): Promise { return new Promise(async (resolve) => { - const deck: HTMLElement = this.el.querySelector('deckgo-deck'); + const deck: HTMLElement = this.mainRef.querySelector('deckgo-deck'); if (!deck) { resolve(); From 568487e36eaebe68b149f4e166451f35d16460a7 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Thu, 19 Nov 2020 13:02:21 +0100 Subject: [PATCH 09/23] feat: don't add new lines on load on text element --- studio/src/app/utils/editor/parse-elements.utils.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/studio/src/app/utils/editor/parse-elements.utils.tsx b/studio/src/app/utils/editor/parse-elements.utils.tsx index 19fe95213..524c7ceb8 100644 --- a/studio/src/app/utils/editor/parse-elements.utils.tsx +++ b/studio/src/app/utils/editor/parse-elements.utils.tsx @@ -14,7 +14,7 @@ export class ParseElementsUtils { } if (element.nodeType === 3) { - resolve(element.textContent + '\n'); + resolve(element.textContent); return; } From c1a78b6f2900bc085746fff3328c91a7f1c2d278 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Thu, 19 Nov 2020 13:05:00 +0100 Subject: [PATCH 10/23] feat: text --- .../editor/app-slide-warning-info/app-slide-warning-info.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/studio/src/app/popovers/editor/app-slide-warning-info/app-slide-warning-info.tsx b/studio/src/app/popovers/editor/app-slide-warning-info/app-slide-warning-info.tsx index 68c6044cb..50e42406f 100644 --- a/studio/src/app/popovers/editor/app-slide-warning-info/app-slide-warning-info.tsx +++ b/studio/src/app/popovers/editor/app-slide-warning-info/app-slide-warning-info.tsx @@ -40,7 +40,7 @@ export class AppSlideWarningInfo { return (

Overflow

-

Part of your content seems to be placed outside the slide's safe area (16/9).

+

Part of your content may be placed outside the slide's safe area (16/9).

It may not be visible on all display sizes.

 ); From 42c3f781117579532e5a841ffb15c5d26348629f Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Thu, 19 Nov 2020 13:14:41 +0100 Subject: [PATCH 11/23] style: ubuntu shadow --- .../editor/slide/app-slide-preview/app-slide-preview.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss index e72881724..666557019 100644 --- a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss +++ b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss @@ -46,6 +46,7 @@ app-slide-preview { --deckgo-highlight-code-ubuntu-margin: 8px 0; --deckgo-highlight-code-carbon-box-shadow: rgba(0, 0, 0, 0.55) 0 2px 4px; + --deckgo-highlight-code-ubuntu-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5); --deckgo-highlight-code-ubuntu-header-height: 8px; --deckgo-highlight-code-ubuntu-header-button-width: 4px; From 4b251697c08de5b982640306d6c6f681f5352922 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Thu, 19 Nov 2020 13:17:40 +0100 Subject: [PATCH 12/23] style: sizing --- .../slide/app-slide-preview/app-slide-preview.scss | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss index 666557019..02ebcd184 100644 --- a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss +++ b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss @@ -18,8 +18,14 @@ app-slide-preview { article { position: relative; - width: 200px; - height: calc(200px * 9 / 16); + --preview-width: 200px; + + width: var(--preview-width); + height: calc(var(--preview-width) * 9 / 16); + + @media screen and (max-width: 768px) { + --preview-width: 128px; + } overflow: hidden; From 9c9ba4b9aac09a309c4d71daa9bc0e77f5d54896 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Thu, 19 Nov 2020 13:18:59 +0100 Subject: [PATCH 13/23] feat: no preview for word cloud (yet) --- .../editor/slide/app-slide-preview/app-slide-preview.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx index 46c509b19..3bafe527b 100644 --- a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx +++ b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx @@ -55,7 +55,10 @@ export class AppSlidePreview { const selectedElement: HTMLElement = $event.detail; - this.preview = selectedElement?.parentElement?.nodeName?.toLowerCase().indexOf('deckgo-slide') >= 0 && SlotUtils.isNodeEditable(selectedElement); + this.preview = + selectedElement?.parentElement?.nodeName?.toLowerCase().indexOf('deckgo-slide') >= 0 && + SlotUtils.isNodeEditable(selectedElement) && + !SlotUtils.isNodeWordCloud(selectedElement); console.log(selectedElement); From 7172ae8c2ac8f8124f5157f95002d4bea46dfcad Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Thu, 19 Nov 2020 17:38:28 +0100 Subject: [PATCH 14/23] feat: select deck scope --- .../editor/publish/app-publish-edit/app-publish-edit.tsx | 2 +- .../editor/slide/app-slide-preview/app-slide-preview.tsx | 2 -- .../app/popovers/editor/style/app-deck-style/app-deck-style.tsx | 2 +- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/studio/src/app/components/editor/publish/app-publish-edit/app-publish-edit.tsx b/studio/src/app/components/editor/publish/app-publish-edit/app-publish-edit.tsx index 57fc1eee3..8bda84fa4 100644 --- a/studio/src/app/components/editor/publish/app-publish-edit/app-publish-edit.tsx +++ b/studio/src/app/components/editor/publish/app-publish-edit/app-publish-edit.tsx @@ -115,7 +115,7 @@ export class AppPublishEdit { return; } - const slide: HTMLElement = document.querySelector('deckgo-deck > *:first-child'); + const slide: HTMLElement = document.querySelector('app-editor main deckgo-deck > *:first-child'); if (slide?.tagName?.toLowerCase().indexOf('deckgo-slide') > -1) { const contentElement: HTMLElement = slide.querySelector('[slot="content"]'); diff --git a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx index 3bafe527b..8781ead7b 100644 --- a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx +++ b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx @@ -60,8 +60,6 @@ export class AppSlidePreview { SlotUtils.isNodeEditable(selectedElement) && !SlotUtils.isNodeWordCloud(selectedElement); - console.log(selectedElement); - if (this.preview) { await this.initDeckPreview(); diff --git a/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.tsx b/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.tsx index 1dcf28860..b287cbff0 100644 --- a/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.tsx +++ b/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.tsx @@ -29,7 +29,7 @@ export class AppDeck { private imageHelper: ImageHelper; async componentWillLoad() { - this.deckElement = document ? document.querySelector('deckgo-deck') : undefined; + this.deckElement = document?.querySelector('app-editor main deckgo-deck'); this.imageHelper = new ImageHelper(this.deckDidChange, this.blockSlide, this.signIn); } From cf32d313d3e3cdceadac22e6e43053c0e65ec501 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Thu, 19 Nov 2020 17:47:59 +0100 Subject: [PATCH 15/23] fix: events listener --- .../events/deck/deck-events.handler.tsx | 52 +++++++++---------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/studio/src/app/handlers/editor/events/deck/deck-events.handler.tsx b/studio/src/app/handlers/editor/events/deck/deck-events.handler.tsx index 78b4f4064..c9691b84c 100644 --- a/studio/src/app/handlers/editor/events/deck/deck-events.handler.tsx +++ b/studio/src/app/handlers/editor/events/deck/deck-events.handler.tsx @@ -52,49 +52,49 @@ export class DeckEventsHandler { async init(el: HTMLElement) { this.mainRef = el; + this.mainRef.addEventListener('input', this.onInputChange, false); + this.mainRef.addEventListener('slideDidLoad', this.onSlideDidLoad, false); + this.mainRef.addEventListener('slidesDidLoad', this.onSlidesDidLoad, false); + this.mainRef.addEventListener('codeDidChange', this.onCustomEventChange, false); + this.mainRef.addEventListener('mathDidChange', this.onCustomEventChange, false); + this.mainRef.addEventListener('markdownDidChange', this.onCustomEventChange, false); + this.mainRef.addEventListener('wordCloudDidChange', this.onCustomEventChange, false); + this.mainRef.addEventListener('imgDidChange', this.onCustomEventChange, false); + this.mainRef.addEventListener('linkCreated', this.onCustomEventChange, false); + this.mainRef.addEventListener('drrDidChange', this.onCustomEventChange, false); + this.mainRef.addEventListener('notesDidChange', this.onSlideChange, false); + if (!document) { return; } - document.addEventListener('input', this.onInputChange, false); + document.addEventListener('styleDidChange', this.onCustomEventChange, false); document.addEventListener('slideDidChange', this.onSlideChange, false); - document.addEventListener('slideDidLoad', this.onSlideDidLoad, false); - document.addEventListener('slidesDidLoad', this.onSlidesDidLoad, false); document.addEventListener('slideDelete', this.onSlideDelete, false); - document.addEventListener('codeDidChange', this.onCustomEventChange, false); - document.addEventListener('mathDidChange', this.onCustomEventChange, false); - document.addEventListener('markdownDidChange', this.onCustomEventChange, false); - document.addEventListener('wordCloudDidChange', this.onCustomEventChange, false); - document.addEventListener('imgDidChange', this.onCustomEventChange, false); - document.addEventListener('linkCreated', this.onCustomEventChange, false); - document.addEventListener('styleDidChange', this.onCustomEventChange, false); - document.addEventListener('drrDidChange', this.onCustomEventChange, false); - document.addEventListener('notesDidChange', this.onSlideChange, false); - document.addEventListener('deckDidChange', this.onDeckChange, false); document.addEventListener('deckNeedChange', this.onDeckNeedChange, false); } destroy() { + this.mainRef.removeEventListener('input', this.onInputChange, true); + this.mainRef.removeEventListener('slideDidLoad', this.onSlideDidLoad, true); + this.mainRef.removeEventListener('slidesDidLoad', this.onSlidesDidLoad, true); + this.mainRef.removeEventListener('codeDidChange', this.onCustomEventChange, true); + this.mainRef.removeEventListener('mathDidChange', this.onCustomEventChange, true); + this.mainRef.removeEventListener('markdownDidChange', this.onCustomEventChange, true); + this.mainRef.removeEventListener('wordCloudDidChange', this.onCustomEventChange, true); + this.mainRef.removeEventListener('imgDidChange', this.onCustomEventChange, true); + this.mainRef.removeEventListener('linkCreated', this.onCustomEventChange, true); + this.mainRef.removeEventListener('drrDidChange', this.onCustomEventChange, true); + this.mainRef.removeEventListener('notesDidChange', this.onSlideChange, true); + if (!document) { return; } - document.removeEventListener('input', this.onInputChange, true); + document.removeEventListener('styleDidChange', this.onCustomEventChange, true); document.removeEventListener('slideDidChange', this.onSlideChange, true); - document.removeEventListener('slideDidLoad', this.onSlideDidLoad, true); - document.removeEventListener('slidesDidLoad', this.onSlidesDidLoad, true); document.removeEventListener('slideDelete', this.onSlideDelete, true); - document.removeEventListener('codeDidChange', this.onCustomEventChange, true); - document.removeEventListener('mathDidChange', this.onCustomEventChange, true); - document.removeEventListener('markdownDidChange', this.onCustomEventChange, true); - document.removeEventListener('wordCloudDidChange', this.onCustomEventChange, true); - document.removeEventListener('imgDidChange', this.onCustomEventChange, true); - document.removeEventListener('linkCreated', this.onCustomEventChange, true); - document.removeEventListener('styleDidChange', this.onCustomEventChange, true); - document.removeEventListener('drrDidChange', this.onCustomEventChange, true); - document.removeEventListener('notesDidChange', this.onSlideChange, true); - document.removeEventListener('deckDidChange', this.onDeckChange, true); document.removeEventListener('deckNeedChange', this.onDeckNeedChange, true); } From 25dafd736899a811bc2322d5e1212cf2efa8b96b Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Fri, 20 Nov 2020 17:44:42 +0100 Subject: [PATCH 16/23] release: markdown v2.0.0 --- CHANGELOG.md | 2 +- webcomponents/markdown/CHANGELOG.md | 6 ++++++ webcomponents/markdown/package-lock.json | 2 +- webcomponents/markdown/package.json | 2 +- 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f753cf85f..ff271eb13 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,7 +28,7 @@ ### Web Components: New -- markdown: v1.1.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/markdown/CHANGELOG.md)) +- markdown: v2.0.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/markdown/CHANGELOG.md)) ### Web Components diff --git a/webcomponents/markdown/CHANGELOG.md b/webcomponents/markdown/CHANGELOG.md index ff17f98dc..9b72d7f20 100644 --- a/webcomponents/markdown/CHANGELOG.md +++ b/webcomponents/markdown/CHANGELOG.md @@ -1,3 +1,9 @@ +# 2.0.0 (2020-11-20) + +### Features + +- image width and height can be provided as "width:100px,height:20px" + # 1.1.1 (2020-11-19) ### Style diff --git a/webcomponents/markdown/package-lock.json b/webcomponents/markdown/package-lock.json index c5259c309..319caf489 100644 --- a/webcomponents/markdown/package-lock.json +++ b/webcomponents/markdown/package-lock.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/markdown", - "version": "1.1.1", + "version": "2.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/webcomponents/markdown/package.json b/webcomponents/markdown/package.json index 8acd6c6e9..18387681c 100644 --- a/webcomponents/markdown/package.json +++ b/webcomponents/markdown/package.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/markdown", - "version": "1.1.1", + "version": "2.0.0", "description": "A Web Component to render markdown to HTML", "main": "dist/index.cjs.js", "module": "dist/index.js", From b1919b0f579af8ae2d5851046f57f4e5cdf3fd92 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Fri, 20 Nov 2020 17:46:20 +0100 Subject: [PATCH 17/23] build: update markdown component --- docs/package-lock.json | 6 +++--- docs/package.json | 2 +- remote/package-lock.json | 12 ++++++------ remote/package.json | 2 +- studio/package-lock.json | 12 ++++++------ studio/package.json | 2 +- 6 files changed, 18 insertions(+), 18 deletions(-) diff --git a/docs/package-lock.json b/docs/package-lock.json index 4aa17776d..5e2fe84df 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -1129,9 +1129,9 @@ "integrity": "sha512-Uuwye8ln17PgZYE4TOFfRTQD+3lUu6UFxoLVbutzqf/N7DAkkgvlvb2Asg0yul0lQfM27ocANAKK1LeLvMIcZw==" }, "@deckdeckgo/markdown": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-1.1.1.tgz", - "integrity": "sha512-35pTOUvDgPBdxLxOTuH1FYBqYt9Y2bgwFdkSsNYVr4aQ0eAqxvk935qrMqoA2HBYywTKqNUpg4gDs/XKTE4dYw==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-2.0.0.tgz", + "integrity": "sha512-baynudYCgY82gZ4nd3LHJKpxIsOy40C7tR6+Ea8t77pjvVrSvQzqnzmXrogLWxwV4X+gAOg4mosoaXWwg+1BlA==", "requires": { "marked": "^1.2.3" } diff --git a/docs/package.json b/docs/package.json index 298f5a248..823a10f9c 100644 --- a/docs/package.json +++ b/docs/package.json @@ -23,7 +23,7 @@ "@deckdeckgo/highlight-code": "^2.2.1", "@deckdeckgo/inline-editor": "^3.0.2", "@deckdeckgo/lazy-img": "^3.0.0", - "@deckdeckgo/markdown": "^1.1.1", + "@deckdeckgo/markdown": "^2.0.0", "@deckdeckgo/math": "^2.0.3", "@deckdeckgo/qrcode": "^2.0.1", "@deckdeckgo/reveal": "^1.0.0", diff --git a/remote/package-lock.json b/remote/package-lock.json index ae89591ef..6d9695a44 100644 --- a/remote/package-lock.json +++ b/remote/package-lock.json @@ -1132,9 +1132,9 @@ "integrity": "sha512-Uuwye8ln17PgZYE4TOFfRTQD+3lUu6UFxoLVbutzqf/N7DAkkgvlvb2Asg0yul0lQfM27ocANAKK1LeLvMIcZw==" }, "@deckdeckgo/markdown": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-1.1.1.tgz", - "integrity": "sha512-35pTOUvDgPBdxLxOTuH1FYBqYt9Y2bgwFdkSsNYVr4aQ0eAqxvk935qrMqoA2HBYywTKqNUpg4gDs/XKTE4dYw==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-2.0.0.tgz", + "integrity": "sha512-baynudYCgY82gZ4nd3LHJKpxIsOy40C7tR6+Ea8t77pjvVrSvQzqnzmXrogLWxwV4X+gAOg4mosoaXWwg+1BlA==", "requires": { "marked": "^1.2.3" } @@ -3369,9 +3369,9 @@ } }, "marked": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/marked/-/marked-1.2.4.tgz", - "integrity": "sha512-6x5TFGCTKSQBLTZtOburGxCxFEBJEGYVLwCMTBCxzvyuisGcC20UNzDSJhCr/cJ/Kmh6ulfJm10g6WWEAJ3kvg==" + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/marked/-/marked-1.2.5.tgz", + "integrity": "sha512-2AlqgYnVPOc9WDyWu7S5DJaEZsfk6dNh/neatQ3IHUW4QLutM/VPSH9lG7bif+XjFWc9K9XR3QvR+fXuECmfdA==" }, "md5.js": { "version": "1.3.5", diff --git a/remote/package.json b/remote/package.json index b4161642d..0bc66a3e2 100644 --- a/remote/package.json +++ b/remote/package.json @@ -22,7 +22,7 @@ "@deckdeckgo/drag-resize-rotate": "^2.0.1", "@deckdeckgo/highlight-code": "^2.2.1", "@deckdeckgo/lazy-img": "^3.0.0", - "@deckdeckgo/markdown": "^1.1.1", + "@deckdeckgo/markdown": "^2.0.0", "@deckdeckgo/math": "^2.0.3", "@deckdeckgo/qrcode": "^2.0.1", "@deckdeckgo/remote-utils": "^1.0.0", diff --git a/studio/package-lock.json b/studio/package-lock.json index 27f004720..b7870170f 100644 --- a/studio/package-lock.json +++ b/studio/package-lock.json @@ -1191,9 +1191,9 @@ "integrity": "sha512-Uuwye8ln17PgZYE4TOFfRTQD+3lUu6UFxoLVbutzqf/N7DAkkgvlvb2Asg0yul0lQfM27ocANAKK1LeLvMIcZw==" }, "@deckdeckgo/markdown": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-1.1.1.tgz", - "integrity": "sha512-35pTOUvDgPBdxLxOTuH1FYBqYt9Y2bgwFdkSsNYVr4aQ0eAqxvk935qrMqoA2HBYywTKqNUpg4gDs/XKTE4dYw==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-2.0.0.tgz", + "integrity": "sha512-baynudYCgY82gZ4nd3LHJKpxIsOy40C7tR6+Ea8t77pjvVrSvQzqnzmXrogLWxwV4X+gAOg4mosoaXWwg+1BlA==", "requires": { "marked": "^1.2.3" } @@ -3213,9 +3213,9 @@ } }, "marked": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/marked/-/marked-1.2.4.tgz", - "integrity": "sha512-6x5TFGCTKSQBLTZtOburGxCxFEBJEGYVLwCMTBCxzvyuisGcC20UNzDSJhCr/cJ/Kmh6ulfJm10g6WWEAJ3kvg==" + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/marked/-/marked-1.2.5.tgz", + "integrity": "sha512-2AlqgYnVPOc9WDyWu7S5DJaEZsfk6dNh/neatQ3IHUW4QLutM/VPSH9lG7bif+XjFWc9K9XR3QvR+fXuECmfdA==" }, "merge-stream": { "version": "2.0.0", diff --git a/studio/package.json b/studio/package.json index 735cf1c71..c3763e283 100644 --- a/studio/package.json +++ b/studio/package.json @@ -27,7 +27,7 @@ "@deckdeckgo/highlight-code": "^2.2.1", "@deckdeckgo/inline-editor": "^3.0.2", "@deckdeckgo/lazy-img": "^3.0.0", - "@deckdeckgo/markdown": "^1.1.1", + "@deckdeckgo/markdown": "^2.0.0", "@deckdeckgo/math": "^2.0.3", "@deckdeckgo/qrcode": "^2.0.1", "@deckdeckgo/remote": "^2.0.1", From 3c936591b52e8b883543fde43a365cfbb8315fcc Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Fri, 20 Nov 2020 17:53:17 +0100 Subject: [PATCH 18/23] release: kits --- CHANGELOG.md | 4 ++-- README.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ff271eb13..5c4792b73 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -44,8 +44,8 @@ - deck-utils: v3.2.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/utils/deck/CHANGELOG.md)) - slide-utils: v2.6.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/utils/slide/CHANGELOG.md)) -- starter kit: v7.1.1 ([CHANGELOG](https://github.com/deckgo/starter-kit/blob/master/CHANGELOG.md)) -- studio kit: v7.1.1 ([CHANGELOG](https://github.com/deckgo/studio-kit/blob/master/CHANGELOG.md)) +- starter kit: v7.1.2 ([CHANGELOG](https://github.com/deckgo/starter-kit/blob/master/CHANGELOG.md)) +- studio kit: v7.1.2 ([CHANGELOG](https://github.com/deckgo/studio-kit/blob/master/CHANGELOG.md)) diff --git a/README.md b/README.md index e399b10a6..eb8307b58 100644 --- a/README.md +++ b/README.md @@ -112,8 +112,8 @@ Are you interested to contribute to our open source project? That would be aweso | **Cloud** | | ![version](https://img.shields.io/static/v1.svg?label=production&message=v1.1.1&color=success) | [`README`](cloud/README.md) | [`CHANGELOG`](cloud/CHANGELOG.md) | | **Gatsby plugin highlight code** | | [![version](https://img.shields.io/npm/v/gatsby-remark-highlight-code/latest.svg?color=success)](https://www.npmjs.com/package/gatsby-remark-highlight-code) | [`Repo`](https://github.com/deckgo/gatsby-remark-highlight-code/) | [`CHANGELOG`](https://github.com/deckgo/gatsby-remark-highlight-code/blob/master/CHANGELOG.md) | | **Infrastructure** | | | [`README`](infra/README.md) | | -| **Starter kit** | | ![version](https://img.shields.io/static/v1.svg?label=version&message=v7.1.1&color=success) | [`Repo`](http://github.com/deckgo/starter-kit/) | [`CHANGELOG`](https://github.com/deckgo/starter-kit/blob/master/CHANGELOG.md) | -| **Studio kit** | | ![version](https://img.shields.io/static/v1.svg?label=version&message=v7.1.1&color=success) | [`Repo`](http://github.com/deckgo/studio-kit/) | [`CHANGELOG`](https://github.com/deckgo/studio-kit/blob/master/CHANGELOG.md) | +| **Starter kit** | | ![version](https://img.shields.io/static/v1.svg?label=version&message=v7.1.2&color=success) | [`Repo`](http://github.com/deckgo/starter-kit/) | [`CHANGELOG`](https://github.com/deckgo/starter-kit/blob/master/CHANGELOG.md) | +| **Studio kit** | | ![version](https://img.shields.io/static/v1.svg?label=version&message=v7.1.2&color=success) | [`Repo`](http://github.com/deckgo/studio-kit/) | [`CHANGELOG`](https://github.com/deckgo/studio-kit/blob/master/CHANGELOG.md) | | **WAI Lambda** | | | [`Repo`](https://github.com/deckgo/wai-lambda) | | | **Webpack plugins** | [`deckdeckgo-webpack-plugins`](https://www.npmjs.com/package/deckdeckgo-webpack-plugins) | [![version](https://img.shields.io/npm/v/deckdeckgo-webpack-plugins/latest.svg?color=success)](https://www.npmjs.com/package/deckdeckgo-webpack-plugins) | [`README`](webpack/README.md) | [`CHANGELOG`](webpack/CHANGELOG.md) | From 85acb9a8b7230e91e596c14a51f88fd8138a2573 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Fri, 20 Nov 2020 18:40:19 +0100 Subject: [PATCH 19/23] feat: update utils --- CHANGELOG.md | 1 + docs/package-lock.json | 13 ++++++++++--- docs/package.json | 1 + remote/package-lock.json | 13 ++++++++++--- remote/package.json | 2 +- studio/package-lock.json | 13 ++++++++++--- studio/package.json | 2 +- utils/utils/CHANGELOG.md | 16 ++++++++++++++++ utils/utils/package-lock.json | 2 +- utils/utils/package.json | 2 +- utils/utils/src/utils/utils.ts | 12 +++++++++--- 11 files changed, 61 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5c4792b73..f304edfd4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -46,6 +46,7 @@ - slide-utils: v2.6.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/utils/slide/CHANGELOG.md)) - starter kit: v7.1.2 ([CHANGELOG](https://github.com/deckgo/starter-kit/blob/master/CHANGELOG.md)) - studio kit: v7.1.2 ([CHANGELOG](https://github.com/deckgo/studio-kit/blob/master/CHANGELOG.md)) +- utils: v1.5.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/utils/utils/CHANGELOG.md)) diff --git a/docs/package-lock.json b/docs/package-lock.json index 5e2fe84df..d25ef832a 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -1102,6 +1102,13 @@ "requires": { "@deckdeckgo/utils": "1.3.0", "prismjs": "^1.21.0" + }, + "dependencies": { + "@deckdeckgo/utils": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.3.0.tgz", + "integrity": "sha512-QrV3jyqIlL+u1NUqSyMsnIsfORLqBuzEhK2+rGYCT89TLVhnPpOP0b11aP/XvHyJMzG9mZvjadLN/MQ9ls9UGw==" + } } }, "@deckdeckgo/inline-editor": { @@ -1307,9 +1314,9 @@ "dev": true }, "@deckdeckgo/utils": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.3.0.tgz", - "integrity": "sha512-QrV3jyqIlL+u1NUqSyMsnIsfORLqBuzEhK2+rGYCT89TLVhnPpOP0b11aP/XvHyJMzG9mZvjadLN/MQ9ls9UGw==" + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.5.0.tgz", + "integrity": "sha512-mJcZaAVs+PxqsHlHOFO09C1vrMZxAYqAw6sX883Er0WnFpOo6+T6J8ZK07X6R+QkaEm1wtt4mV9siJCv3DQyaA==" }, "@deckdeckgo/word-cloud": { "version": "1.0.5", diff --git a/docs/package.json b/docs/package.json index 823a10f9c..247d3a655 100644 --- a/docs/package.json +++ b/docs/package.json @@ -44,6 +44,7 @@ "@deckdeckgo/slide-video": "^2.2.2", "@deckdeckgo/slide-youtube": "^2.2.2", "@deckdeckgo/social": "^4.0.0", + "@deckdeckgo/utils": "^1.5.0", "@deckdeckgo/word-cloud": "^1.0.5", "@deckdeckgo/youtube": "^2.0.1", "@ionic/core": "^5.4.4", diff --git a/remote/package-lock.json b/remote/package-lock.json index 6d9695a44..4bc4c3c6e 100644 --- a/remote/package-lock.json +++ b/remote/package-lock.json @@ -1124,6 +1124,13 @@ "requires": { "@deckdeckgo/utils": "1.3.0", "prismjs": "^1.21.0" + }, + "dependencies": { + "@deckdeckgo/utils": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.3.0.tgz", + "integrity": "sha512-QrV3jyqIlL+u1NUqSyMsnIsfORLqBuzEhK2+rGYCT89TLVhnPpOP0b11aP/XvHyJMzG9mZvjadLN/MQ9ls9UGw==" + } } }, "@deckdeckgo/lazy-img": { @@ -1315,9 +1322,9 @@ "dev": true }, "@deckdeckgo/utils": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.3.0.tgz", - "integrity": "sha512-QrV3jyqIlL+u1NUqSyMsnIsfORLqBuzEhK2+rGYCT89TLVhnPpOP0b11aP/XvHyJMzG9mZvjadLN/MQ9ls9UGw==" + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.5.0.tgz", + "integrity": "sha512-mJcZaAVs+PxqsHlHOFO09C1vrMZxAYqAw6sX883Er0WnFpOo6+T6J8ZK07X6R+QkaEm1wtt4mV9siJCv3DQyaA==" }, "@deckdeckgo/word-cloud": { "version": "1.0.5", diff --git a/remote/package.json b/remote/package.json index 0bc66a3e2..aadd59f5f 100644 --- a/remote/package.json +++ b/remote/package.json @@ -44,7 +44,7 @@ "@deckdeckgo/slide-video": "^2.2.2", "@deckdeckgo/slide-youtube": "^2.2.2", "@deckdeckgo/social": "^4.0.0", - "@deckdeckgo/utils": "^1.3.0", + "@deckdeckgo/utils": "^1.5.0", "@deckdeckgo/word-cloud": "^1.0.5", "@deckdeckgo/youtube": "^2.0.1", "@ionic/core": "^5.4.4", diff --git a/studio/package-lock.json b/studio/package-lock.json index b7870170f..2cbd270b6 100644 --- a/studio/package-lock.json +++ b/studio/package-lock.json @@ -1164,6 +1164,13 @@ "requires": { "@deckdeckgo/utils": "1.3.0", "prismjs": "^1.21.0" + }, + "dependencies": { + "@deckdeckgo/utils": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.3.0.tgz", + "integrity": "sha512-QrV3jyqIlL+u1NUqSyMsnIsfORLqBuzEhK2+rGYCT89TLVhnPpOP0b11aP/XvHyJMzG9mZvjadLN/MQ9ls9UGw==" + } } }, "@deckdeckgo/inline-editor": { @@ -1351,9 +1358,9 @@ "dev": true }, "@deckdeckgo/utils": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.3.0.tgz", - "integrity": "sha512-QrV3jyqIlL+u1NUqSyMsnIsfORLqBuzEhK2+rGYCT89TLVhnPpOP0b11aP/XvHyJMzG9mZvjadLN/MQ9ls9UGw==" + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.5.0.tgz", + "integrity": "sha512-mJcZaAVs+PxqsHlHOFO09C1vrMZxAYqAw6sX883Er0WnFpOo6+T6J8ZK07X6R+QkaEm1wtt4mV9siJCv3DQyaA==" }, "@deckdeckgo/word-cloud": { "version": "1.0.5", diff --git a/studio/package.json b/studio/package.json index c3763e283..af6a821f1 100644 --- a/studio/package.json +++ b/studio/package.json @@ -45,7 +45,7 @@ "@deckdeckgo/slide-utils": "^2.6.1", "@deckdeckgo/slide-youtube": "^2.2.2", "@deckdeckgo/social": "^4.0.0", - "@deckdeckgo/utils": "^1.3.0", + "@deckdeckgo/utils": "^1.5.0", "@deckdeckgo/word-cloud": "^1.0.5", "@deckdeckgo/youtube": "^2.0.1", "@ionic/core": "^5.4.4", diff --git a/utils/utils/CHANGELOG.md b/utils/utils/CHANGELOG.md index 9d9bf6438..7547c4ed3 100644 --- a/utils/utils/CHANGELOG.md +++ b/utils/utils/CHANGELOG.md @@ -1,3 +1,19 @@ + + +# 1.5.0 (2020-11-20) + +### Fix + +- update is mobile + + + +# 1.4.0 (2020-11-20) + +### Fix + +- detection iPad for iOS >= 13 + # 1.3.0 (2020-08-15) diff --git a/utils/utils/package-lock.json b/utils/utils/package-lock.json index c2e6f5f07..c5eedc56b 100644 --- a/utils/utils/package-lock.json +++ b/utils/utils/package-lock.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/utils", - "version": "1.3.0", + "version": "1.5.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/utils/utils/package.json b/utils/utils/package.json index 72e158016..4c1688e59 100644 --- a/utils/utils/package.json +++ b/utils/utils/package.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/utils", - "version": "1.3.0", + "version": "1.5.0", "author": "David Dal Busco", "description": "A collection of utils methods and functions developed for DeckDeckGo", "license": "MIT", diff --git a/utils/utils/src/utils/utils.ts b/utils/utils/src/utils/utils.ts index 486a3c1f8..02a9ca9ec 100644 --- a/utils/utils/src/utils/utils.ts +++ b/utils/utils/src/utils/utils.ts @@ -25,10 +25,10 @@ export function isMobile(): boolean { const a: string = navigator.userAgent || navigator.vendor || (window as any).opera; return ( - /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test( + /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test( a ) || - /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test( + /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|g1o(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test( a.substr(0, 4) ) ); @@ -51,7 +51,13 @@ export function isIPad(): boolean { const a: string = navigator.userAgent || navigator.vendor || (window as any).opera; - return /iPad/i.test(a); + // iOS 12 and below + if (/iPad/i.test(a)) { + return true; + } + + // iOS 13+ + return /Macintosh/i.test(a) && isMobile(); } export function isFullscreen(): boolean { From 1971b2af57811a2b5c065c54a52b635195b71ae3 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Fri, 20 Nov 2020 18:51:33 +0100 Subject: [PATCH 20/23] fix: on iPad move preview --- CHANGELOG.md | 2 +- docs/package-lock.json | 6 +++--- docs/package.json | 2 +- remote/package-lock.json | 6 +++--- remote/package.json | 2 +- studio/package-lock.json | 6 +++--- studio/package.json | 2 +- .../app-slide-preview/app-slide-preview.scss | 1 - .../app-slide-preview/app-slide-preview.tsx | 15 ++++++++++++++- utils/utils/CHANGELOG.md | 9 +++++++++ utils/utils/package-lock.json | 2 +- utils/utils/package.json | 2 +- utils/utils/src/utils/utils.ts | 16 +++------------- 13 files changed, 41 insertions(+), 30 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f304edfd4..03a3ab94c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -46,7 +46,7 @@ - slide-utils: v2.6.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/utils/slide/CHANGELOG.md)) - starter kit: v7.1.2 ([CHANGELOG](https://github.com/deckgo/starter-kit/blob/master/CHANGELOG.md)) - studio kit: v7.1.2 ([CHANGELOG](https://github.com/deckgo/studio-kit/blob/master/CHANGELOG.md)) -- utils: v1.5.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/utils/utils/CHANGELOG.md)) +- utils: v1.6.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/utils/utils/CHANGELOG.md)) diff --git a/docs/package-lock.json b/docs/package-lock.json index d25ef832a..1aace3e77 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -1314,9 +1314,9 @@ "dev": true }, "@deckdeckgo/utils": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.5.0.tgz", - "integrity": "sha512-mJcZaAVs+PxqsHlHOFO09C1vrMZxAYqAw6sX883Er0WnFpOo6+T6J8ZK07X6R+QkaEm1wtt4mV9siJCv3DQyaA==" + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.6.0.tgz", + "integrity": "sha512-tFX5en+MI2hx9crumxU6fAhzSH2gC74trRLOtWFTh8FEztg+bDtML8pbQOftDQA2BdSOOj04ZMyVkFgMKGmn6A==" }, "@deckdeckgo/word-cloud": { "version": "1.0.5", diff --git a/docs/package.json b/docs/package.json index 247d3a655..56f853441 100644 --- a/docs/package.json +++ b/docs/package.json @@ -44,7 +44,7 @@ "@deckdeckgo/slide-video": "^2.2.2", "@deckdeckgo/slide-youtube": "^2.2.2", "@deckdeckgo/social": "^4.0.0", - "@deckdeckgo/utils": "^1.5.0", + "@deckdeckgo/utils": "^1.6.0", "@deckdeckgo/word-cloud": "^1.0.5", "@deckdeckgo/youtube": "^2.0.1", "@ionic/core": "^5.4.4", diff --git a/remote/package-lock.json b/remote/package-lock.json index 4bc4c3c6e..76960c64e 100644 --- a/remote/package-lock.json +++ b/remote/package-lock.json @@ -1322,9 +1322,9 @@ "dev": true }, "@deckdeckgo/utils": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.5.0.tgz", - "integrity": "sha512-mJcZaAVs+PxqsHlHOFO09C1vrMZxAYqAw6sX883Er0WnFpOo6+T6J8ZK07X6R+QkaEm1wtt4mV9siJCv3DQyaA==" + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.6.0.tgz", + "integrity": "sha512-tFX5en+MI2hx9crumxU6fAhzSH2gC74trRLOtWFTh8FEztg+bDtML8pbQOftDQA2BdSOOj04ZMyVkFgMKGmn6A==" }, "@deckdeckgo/word-cloud": { "version": "1.0.5", diff --git a/remote/package.json b/remote/package.json index aadd59f5f..cdef3c25d 100644 --- a/remote/package.json +++ b/remote/package.json @@ -44,7 +44,7 @@ "@deckdeckgo/slide-video": "^2.2.2", "@deckdeckgo/slide-youtube": "^2.2.2", "@deckdeckgo/social": "^4.0.0", - "@deckdeckgo/utils": "^1.5.0", + "@deckdeckgo/utils": "^1.6.0", "@deckdeckgo/word-cloud": "^1.0.5", "@deckdeckgo/youtube": "^2.0.1", "@ionic/core": "^5.4.4", diff --git a/studio/package-lock.json b/studio/package-lock.json index 2cbd270b6..8a3b51c6f 100644 --- a/studio/package-lock.json +++ b/studio/package-lock.json @@ -1358,9 +1358,9 @@ "dev": true }, "@deckdeckgo/utils": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.5.0.tgz", - "integrity": "sha512-mJcZaAVs+PxqsHlHOFO09C1vrMZxAYqAw6sX883Er0WnFpOo6+T6J8ZK07X6R+QkaEm1wtt4mV9siJCv3DQyaA==" + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.6.0.tgz", + "integrity": "sha512-tFX5en+MI2hx9crumxU6fAhzSH2gC74trRLOtWFTh8FEztg+bDtML8pbQOftDQA2BdSOOj04ZMyVkFgMKGmn6A==" }, "@deckdeckgo/word-cloud": { "version": "1.0.5", diff --git a/studio/package.json b/studio/package.json index af6a821f1..a41b8717d 100644 --- a/studio/package.json +++ b/studio/package.json @@ -45,7 +45,7 @@ "@deckdeckgo/slide-utils": "^2.6.1", "@deckdeckgo/slide-youtube": "^2.2.2", "@deckdeckgo/social": "^4.0.0", - "@deckdeckgo/utils": "^1.5.0", + "@deckdeckgo/utils": "^1.6.0", "@deckdeckgo/word-cloud": "^1.0.5", "@deckdeckgo/youtube": "^2.0.1", "@ionic/core": "^5.4.4", diff --git a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss index 02ebcd184..41107e1a0 100644 --- a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss +++ b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss @@ -2,7 +2,6 @@ app-slide-preview { position: absolute; - top: 8px; right: 8px; transition: opacity 0.5s; diff --git a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx index 8781ead7b..26469080c 100644 --- a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx +++ b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx @@ -1,7 +1,8 @@ import {Component, h, Host, Listen, State, Event, EventEmitter, Element, Prop} from '@stencil/core'; import {cleanContent} from '@deckdeckgo/deck-utils'; -import {debounce} from '@deckdeckgo/utils'; +import {debounce, isIPad} from '@deckdeckgo/utils'; + import {SlotUtils} from '../../../../utils/editor/slot.utils'; @Component({ @@ -17,6 +18,9 @@ export class AppSlidePreview { @State() private preview: boolean = false; + @State() + private top: string = '8px'; + private deckPreviewRef!: HTMLDeckgoDeckElement; @Event({bubbles: false}) private previewAttached: EventEmitter; @@ -29,6 +33,14 @@ export class AppSlidePreview { }, 500); } + @Listen('ionKeyboardDidShow', {target: 'window'}) + onKeyboardDidShow($event: CustomEvent<{keyboardHeight: number}>) { + if (!isIPad()) { + return; + } + this.top = `calc(100vh - ${$event.detail.keyboardHeight}px)`; + } + componentDidUpdate() { if (this.preview) { this.previewAttached.emit(); @@ -112,6 +124,7 @@ export class AppSlidePreview { render() { return ( diff --git a/utils/utils/CHANGELOG.md b/utils/utils/CHANGELOG.md index 7547c4ed3..515cef11a 100644 --- a/utils/utils/CHANGELOG.md +++ b/utils/utils/CHANGELOG.md @@ -1,3 +1,12 @@ + + +# 1.6.0 (2020-11-20) + +### Fix + +- is mobile based on matchMedia +- isIos including new iPads + # 1.5.0 (2020-11-20) diff --git a/utils/utils/package-lock.json b/utils/utils/package-lock.json index c5eedc56b..3f320a9ec 100644 --- a/utils/utils/package-lock.json +++ b/utils/utils/package-lock.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/utils", - "version": "1.5.0", + "version": "1.6.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/utils/utils/package.json b/utils/utils/package.json index 4c1688e59..838089900 100644 --- a/utils/utils/package.json +++ b/utils/utils/package.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/utils", - "version": "1.5.0", + "version": "1.6.0", "author": "David Dal Busco", "description": "A collection of utils methods and functions developed for DeckDeckGo", "license": "MIT", diff --git a/utils/utils/src/utils/utils.ts b/utils/utils/src/utils/utils.ts index 02a9ca9ec..d80f3d6d0 100644 --- a/utils/utils/src/utils/utils.ts +++ b/utils/utils/src/utils/utils.ts @@ -16,22 +16,12 @@ export function debounce(func: Function, timeout?: number) { }; } -// Source: http://detectmobilebrowsers.com export function isMobile(): boolean { - if (!window || !navigator) { + if (!window) { return false; } - const a: string = navigator.userAgent || navigator.vendor || (window as any).opera; - - return ( - /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test( - a - ) || - /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|g1o(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test( - a.substr(0, 4) - ) - ); + return window.matchMedia('(any-pointer:coarse)').matches; } export function isIOS(): boolean { @@ -41,7 +31,7 @@ export function isIOS(): boolean { const a: string = navigator.userAgent || navigator.vendor || (window as any).opera; - return /iPad|iPhone|iPod/i.test(a); + return /iPhone|iPod/i.test(a) || isIPad(); } export function isIPad(): boolean { From 724c26a9226bf8f204f4433492da97d1d045e904 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Sat, 21 Nov 2020 07:38:52 +0100 Subject: [PATCH 21/23] feat: landscape and portrait --- CHANGELOG.md | 2 +- docs/package-lock.json | 6 +++--- docs/package.json | 2 +- remote/package-lock.json | 6 +++--- remote/package.json | 2 +- studio/package-lock.json | 6 +++--- studio/package.json | 2 +- utils/utils/CHANGELOG.md | 8 ++++++++ utils/utils/package-lock.json | 2 +- utils/utils/package.json | 2 +- utils/utils/src/utils/utils.ts | 14 ++++++++++++++ 11 files changed, 37 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 03a3ab94c..d7d91cbf5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -46,7 +46,7 @@ - slide-utils: v2.6.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/utils/slide/CHANGELOG.md)) - starter kit: v7.1.2 ([CHANGELOG](https://github.com/deckgo/starter-kit/blob/master/CHANGELOG.md)) - studio kit: v7.1.2 ([CHANGELOG](https://github.com/deckgo/studio-kit/blob/master/CHANGELOG.md)) -- utils: v1.6.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/utils/utils/CHANGELOG.md)) +- utils: v1.7.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/utils/utils/CHANGELOG.md)) diff --git a/docs/package-lock.json b/docs/package-lock.json index 1aace3e77..5e56e4eaf 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -1314,9 +1314,9 @@ "dev": true }, "@deckdeckgo/utils": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.6.0.tgz", - "integrity": "sha512-tFX5en+MI2hx9crumxU6fAhzSH2gC74trRLOtWFTh8FEztg+bDtML8pbQOftDQA2BdSOOj04ZMyVkFgMKGmn6A==" + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.7.0.tgz", + "integrity": "sha512-aSc7v4lJeHrJTNKVZQUW8Q+qVNU0JNys5y4aerJ/3cEGyKsvzUqgA4QMI25dgn/Flz8f2gGFjfdqSzIR//zKQQ==" }, "@deckdeckgo/word-cloud": { "version": "1.0.5", diff --git a/docs/package.json b/docs/package.json index 56f853441..a89aba9d8 100644 --- a/docs/package.json +++ b/docs/package.json @@ -44,7 +44,7 @@ "@deckdeckgo/slide-video": "^2.2.2", "@deckdeckgo/slide-youtube": "^2.2.2", "@deckdeckgo/social": "^4.0.0", - "@deckdeckgo/utils": "^1.6.0", + "@deckdeckgo/utils": "^1.7.0", "@deckdeckgo/word-cloud": "^1.0.5", "@deckdeckgo/youtube": "^2.0.1", "@ionic/core": "^5.4.4", diff --git a/remote/package-lock.json b/remote/package-lock.json index 76960c64e..923f9dd7c 100644 --- a/remote/package-lock.json +++ b/remote/package-lock.json @@ -1322,9 +1322,9 @@ "dev": true }, "@deckdeckgo/utils": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.6.0.tgz", - "integrity": "sha512-tFX5en+MI2hx9crumxU6fAhzSH2gC74trRLOtWFTh8FEztg+bDtML8pbQOftDQA2BdSOOj04ZMyVkFgMKGmn6A==" + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.7.0.tgz", + "integrity": "sha512-aSc7v4lJeHrJTNKVZQUW8Q+qVNU0JNys5y4aerJ/3cEGyKsvzUqgA4QMI25dgn/Flz8f2gGFjfdqSzIR//zKQQ==" }, "@deckdeckgo/word-cloud": { "version": "1.0.5", diff --git a/remote/package.json b/remote/package.json index cdef3c25d..57fb259ca 100644 --- a/remote/package.json +++ b/remote/package.json @@ -44,7 +44,7 @@ "@deckdeckgo/slide-video": "^2.2.2", "@deckdeckgo/slide-youtube": "^2.2.2", "@deckdeckgo/social": "^4.0.0", - "@deckdeckgo/utils": "^1.6.0", + "@deckdeckgo/utils": "^1.7.0", "@deckdeckgo/word-cloud": "^1.0.5", "@deckdeckgo/youtube": "^2.0.1", "@ionic/core": "^5.4.4", diff --git a/studio/package-lock.json b/studio/package-lock.json index 8a3b51c6f..3c91cf489 100644 --- a/studio/package-lock.json +++ b/studio/package-lock.json @@ -1358,9 +1358,9 @@ "dev": true }, "@deckdeckgo/utils": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.6.0.tgz", - "integrity": "sha512-tFX5en+MI2hx9crumxU6fAhzSH2gC74trRLOtWFTh8FEztg+bDtML8pbQOftDQA2BdSOOj04ZMyVkFgMKGmn6A==" + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.7.0.tgz", + "integrity": "sha512-aSc7v4lJeHrJTNKVZQUW8Q+qVNU0JNys5y4aerJ/3cEGyKsvzUqgA4QMI25dgn/Flz8f2gGFjfdqSzIR//zKQQ==" }, "@deckdeckgo/word-cloud": { "version": "1.0.5", diff --git a/studio/package.json b/studio/package.json index a41b8717d..0a26302cd 100644 --- a/studio/package.json +++ b/studio/package.json @@ -45,7 +45,7 @@ "@deckdeckgo/slide-utils": "^2.6.1", "@deckdeckgo/slide-youtube": "^2.2.2", "@deckdeckgo/social": "^4.0.0", - "@deckdeckgo/utils": "^1.6.0", + "@deckdeckgo/utils": "^1.7.0", "@deckdeckgo/word-cloud": "^1.0.5", "@deckdeckgo/youtube": "^2.0.1", "@ionic/core": "^5.4.4", diff --git a/utils/utils/CHANGELOG.md b/utils/utils/CHANGELOG.md index 515cef11a..58d1a7176 100644 --- a/utils/utils/CHANGELOG.md +++ b/utils/utils/CHANGELOG.md @@ -1,3 +1,11 @@ + + +# 1.7.0 (2020-11-21) + +### Features + +- isLandscape and isPortrait + # 1.6.0 (2020-11-20) diff --git a/utils/utils/package-lock.json b/utils/utils/package-lock.json index 3f320a9ec..8f7b00e92 100644 --- a/utils/utils/package-lock.json +++ b/utils/utils/package-lock.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/utils", - "version": "1.6.0", + "version": "1.7.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/utils/utils/package.json b/utils/utils/package.json index 838089900..ea7485605 100644 --- a/utils/utils/package.json +++ b/utils/utils/package.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/utils", - "version": "1.6.0", + "version": "1.7.0", "author": "David Dal Busco", "description": "A collection of utils methods and functions developed for DeckDeckGo", "license": "MIT", diff --git a/utils/utils/src/utils/utils.ts b/utils/utils/src/utils/utils.ts index d80f3d6d0..529a85a19 100644 --- a/utils/utils/src/utils/utils.ts +++ b/utils/utils/src/utils/utils.ts @@ -76,3 +76,17 @@ export function isRTL(): boolean { const htmlDir: string | null = document.documentElement.getAttribute('dir'); return htmlDir !== null && htmlDir === 'rtl'; } + +// Source: Ionic ionic-framework/angular/src/providers/platform.ts + +export function isLandscape(): boolean { + return !isPortrait(); +} + +export function isPortrait(): boolean { + if (!window) { + return false; + } + + return window.matchMedia && window.matchMedia('(orientation: portrait)').matches; +} From 4c206a5795197422543f48893e8c216801dcb5be Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Sat, 21 Nov 2020 07:43:46 +0100 Subject: [PATCH 22/23] feat: ios keyboard hack --- .../app-slide-preview/app-slide-preview.scss | 1 + .../app-slide-preview/app-slide-preview.tsx | 23 +++++++++++-------- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss index 41107e1a0..c3ec49e52 100644 --- a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss +++ b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss @@ -2,6 +2,7 @@ app-slide-preview { position: absolute; + top: var(--ios-top, 8px); right: 8px; transition: opacity 0.5s; diff --git a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx index 26469080c..b9dc3745c 100644 --- a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx +++ b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx @@ -1,7 +1,7 @@ import {Component, h, Host, Listen, State, Event, EventEmitter, Element, Prop} from '@stencil/core'; import {cleanContent} from '@deckdeckgo/deck-utils'; -import {debounce, isIPad} from '@deckdeckgo/utils'; +import {debounce, isIOS, isLandscape} from '@deckdeckgo/utils'; import {SlotUtils} from '../../../../utils/editor/slot.utils'; @@ -19,7 +19,7 @@ export class AppSlidePreview { private preview: boolean = false; @State() - private top: string = '8px'; + private iosPositionTop: string | undefined = undefined; private deckPreviewRef!: HTMLDeckgoDeckElement; @@ -34,12 +34,7 @@ export class AppSlidePreview { } @Listen('ionKeyboardDidShow', {target: 'window'}) - onKeyboardDidShow($event: CustomEvent<{keyboardHeight: number}>) { - if (!isIPad()) { - return; - } - this.top = `calc(100vh - ${$event.detail.keyboardHeight}px)`; - } + onKeyboardDidShow(_$event: CustomEvent<{keyboardHeight: number}>) {} componentDidUpdate() { if (this.preview) { @@ -67,6 +62,8 @@ export class AppSlidePreview { const selectedElement: HTMLElement = $event.detail; + await this.stickyIOS(selectedElement); + this.preview = selectedElement?.parentElement?.nodeName?.toLowerCase().indexOf('deckgo-slide') >= 0 && SlotUtils.isNodeEditable(selectedElement) && @@ -85,6 +82,12 @@ export class AppSlidePreview { } } + private async stickyIOS(selectedElement: HTMLElement) { + if (isIOS()) { + this.iosPositionTop = isLandscape() ? `calc(${selectedElement.offsetTop}px - (128px * 9 / 16) - 32px)` : undefined; + } + } + async initDeckPreview() { if (!this.deckRef) { return; @@ -122,9 +125,11 @@ export class AppSlidePreview { } render() { + const style = {...(this.iosPositionTop && {'--ios-top': this.iosPositionTop})}; + return ( From 7becc8aa3f6db0e86d1ea3c96e02aca3e4140e19 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Sat, 21 Nov 2020 07:51:27 +0100 Subject: [PATCH 23/23] style: markdown placeholder --- CHANGELOG.md | 2 +- studio/package-lock.json | 6 +++--- studio/package.json | 2 +- webcomponents/markdown/CHANGELOG.md | 6 ++++++ webcomponents/markdown/package-lock.json | 2 +- webcomponents/markdown/package.json | 2 +- .../src/components/markdown/deckdeckgo-markdown.scss | 3 ++- 7 files changed, 15 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d7d91cbf5..1bc7bcc58 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,7 +28,7 @@ ### Web Components: New -- markdown: v2.0.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/markdown/CHANGELOG.md)) +- markdown: v2.0.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/markdown/CHANGELOG.md)) ### Web Components diff --git a/studio/package-lock.json b/studio/package-lock.json index 3c91cf489..a350dfbdf 100644 --- a/studio/package-lock.json +++ b/studio/package-lock.json @@ -1198,9 +1198,9 @@ "integrity": "sha512-Uuwye8ln17PgZYE4TOFfRTQD+3lUu6UFxoLVbutzqf/N7DAkkgvlvb2Asg0yul0lQfM27ocANAKK1LeLvMIcZw==" }, "@deckdeckgo/markdown": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-2.0.0.tgz", - "integrity": "sha512-baynudYCgY82gZ4nd3LHJKpxIsOy40C7tR6+Ea8t77pjvVrSvQzqnzmXrogLWxwV4X+gAOg4mosoaXWwg+1BlA==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-2.0.1.tgz", + "integrity": "sha512-FZYe59evR8N9Xe+T/Z0km3aA/FeW33tMOaKeje21hbM9iAqdIj00gHx1Ner0wZGdfedNTLtYzJffZYeRbV7ylA==", "requires": { "marked": "^1.2.3" } diff --git a/studio/package.json b/studio/package.json index 0a26302cd..3d1186ffc 100644 --- a/studio/package.json +++ b/studio/package.json @@ -27,7 +27,7 @@ "@deckdeckgo/highlight-code": "^2.2.1", "@deckdeckgo/inline-editor": "^3.0.2", "@deckdeckgo/lazy-img": "^3.0.0", - "@deckdeckgo/markdown": "^2.0.0", + "@deckdeckgo/markdown": "^2.0.1", "@deckdeckgo/math": "^2.0.3", "@deckdeckgo/qrcode": "^2.0.1", "@deckdeckgo/remote": "^2.0.1", diff --git a/webcomponents/markdown/CHANGELOG.md b/webcomponents/markdown/CHANGELOG.md index 9b72d7f20..f0dbb5767 100644 --- a/webcomponents/markdown/CHANGELOG.md +++ b/webcomponents/markdown/CHANGELOG.md @@ -1,3 +1,9 @@ +# 2.0.1 (2020-11-21) + +### Style + +- editable after placeholder + # 2.0.0 (2020-11-20) ### Features diff --git a/webcomponents/markdown/package-lock.json b/webcomponents/markdown/package-lock.json index 319caf489..ad7d12cc4 100644 --- a/webcomponents/markdown/package-lock.json +++ b/webcomponents/markdown/package-lock.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/markdown", - "version": "2.0.0", + "version": "2.0.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/webcomponents/markdown/package.json b/webcomponents/markdown/package.json index 18387681c..9c6919388 100644 --- a/webcomponents/markdown/package.json +++ b/webcomponents/markdown/package.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/markdown", - "version": "2.0.0", + "version": "2.0.1", "description": "A Web Component to render markdown to HTML", "main": "dist/index.cjs.js", "module": "dist/index.js", diff --git a/webcomponents/markdown/src/components/markdown/deckdeckgo-markdown.scss b/webcomponents/markdown/src/components/markdown/deckdeckgo-markdown.scss index 617e4a510..a55c8474e 100644 --- a/webcomponents/markdown/src/components/markdown/deckdeckgo-markdown.scss +++ b/webcomponents/markdown/src/components/markdown/deckdeckgo-markdown.scss @@ -15,12 +15,13 @@ } div.markdown:empty:not(:focus):after { - content: var(--deckgo-markdown-empty-text, "Click to add content using Markdown"); + content: var(--deckgo-markdown-empty-text, "Click to add markdown content"); font-size: var(--deckgo-markdown-empty-font-size, 1.4em); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); + width: 100%; } }