diff --git a/CHANGELOG.md b/CHANGELOG.md index b47a35aa3..4af534968 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ + +# [1.0.0-rc.11](https://github.com/deckgo/deckdeckgo/compare/v1.0.0-rc.10...v1.0.0-11) (2019-09-01) + +### Web Components +* inline-editor: v1.0.0-rc.1-1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/inline-editor/CHANGELOG.md)) + +### Others +* utils: v1.0.0-rc.1-1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/utils/CHANGELOG.md)) + # [1.0.0-rc.10](https://github.com/deckgo/deckdeckgo/compare/v1.0.0-rc.9...v1.0.0-10) (2019-08-30) diff --git a/studio/package-lock.json b/studio/package-lock.json index 008da7eb2..3a1bda405 100644 --- a/studio/package-lock.json +++ b/studio/package-lock.json @@ -30,11 +30,11 @@ } }, "@deckdeckgo/inline-editor": { - "version": "1.0.0-rc.1", - "resolved": "https://registry.npmjs.org/@deckdeckgo/inline-editor/-/inline-editor-1.0.0-rc.1.tgz", - "integrity": "sha512-vvTQBHA5h9u5EKjZsa7mIZzNl8htBtIuuooIacf5sgivFjUP8zCvrmkrrTD12NiDOeC6nC0nXHvmX/sDRJa42g==", + "version": "1.0.0-rc.1-1", + "resolved": "https://registry.npmjs.org/@deckdeckgo/inline-editor/-/inline-editor-1.0.0-rc.1-1.tgz", + "integrity": "sha512-VCGO0k1ezzL/igutRBcwhA6lHsTTJW55yeG45QM4jap6FXSPbwS3uv4E5rhDvteNZCn/p0NNLuTypQ1tE4tmYg==", "requires": { - "@deckdeckgo/utils": "^1.0.0-rc.1" + "@deckdeckgo/utils": "^1.0.0-rc.1-1" } }, "@deckdeckgo/lazy-img": { @@ -120,9 +120,9 @@ "dev": true }, "@deckdeckgo/utils": { - "version": "1.0.0-rc.1", - "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.0.0-rc.1.tgz", - "integrity": "sha512-hqwtqx4bk6yl6oNOlu/oxDiH81gQVTQ2qyU2XrbEWeSX880GTzdQ4EzXpc/dZS17T3DkBN+/h+dOn4YEvbdzPQ==" + "version": "1.0.0-rc.1-1", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.0.0-rc.1-1.tgz", + "integrity": "sha512-FYszS7gTAC+V0BQ1CnNyKCkSRWcJw+37vTnMdWwFZzOA2JCYagqKKcZ/vWket8nuu7Q9NpsADoYCX8FMXU34/A==" }, "@firebase/app": { "version": "0.4.15", diff --git a/studio/package.json b/studio/package.json index 1f1ad2796..26a6d2f66 100644 --- a/studio/package.json +++ b/studio/package.json @@ -16,7 +16,7 @@ "dependencies": { "@deckdeckgo/core": "^1.0.0-rc.1", "@deckdeckgo/highlight-code": "^1.0.0-rc.1", - "@deckdeckgo/inline-editor": "^1.0.0-rc.1", + "@deckdeckgo/inline-editor": "^1.0.0-rc.1-1", "@deckdeckgo/lazy-img": "^1.0.0-rc.1", "@deckdeckgo/qrcode": "^1.0.0-rc.1", "@deckdeckgo/remote": "^1.0.0-rc.1", @@ -26,7 +26,7 @@ "@deckdeckgo/slide-split": "^1.0.0-rc.1", "@deckdeckgo/slide-title": "^1.0.0-rc.1", "@deckdeckgo/slide-youtube": "^1.0.0-rc.1", - "@deckdeckgo/utils": "^1.0.0-rc.1", + "@deckdeckgo/utils": "^1.0.0-rc.1-1", "@ionic/core": "^4.8.1", "firebase": "^6.3.5", "idb-keyval": "^3.2.0", diff --git a/webcomponents/inline-editor/CHANGELOG.md b/webcomponents/inline-editor/CHANGELOG.md index 0009d1428..3f277194c 100644 --- a/webcomponents/inline-editor/CHANGELOG.md +++ b/webcomponents/inline-editor/CHANGELOG.md @@ -1,3 +1,10 @@ + +# 1.0.0-rc.1-1 (2019-09-01) + +### Fix + +* debounce the display of the toolbar (useful in case of dragged selection) + # 1.0.0-rc.1 (2019-08-30) diff --git a/webcomponents/inline-editor/package-lock.json b/webcomponents/inline-editor/package-lock.json index a0e125ed9..d1963f826 100644 --- a/webcomponents/inline-editor/package-lock.json +++ b/webcomponents/inline-editor/package-lock.json @@ -1,13 +1,13 @@ { "name": "@deckdeckgo/inline-editor", - "version": "1.0.0-rc.1", + "version": "1.0.0-rc.1-1", "lockfileVersion": 1, "requires": true, "dependencies": { "@deckdeckgo/utils": { - "version": "1.0.0-rc.1", - "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.0.0-rc.1.tgz", - "integrity": "sha512-hqwtqx4bk6yl6oNOlu/oxDiH81gQVTQ2qyU2XrbEWeSX880GTzdQ4EzXpc/dZS17T3DkBN+/h+dOn4YEvbdzPQ==" + "version": "1.0.0-rc.1-1", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.0.0-rc.1-1.tgz", + "integrity": "sha512-FYszS7gTAC+V0BQ1CnNyKCkSRWcJw+37vTnMdWwFZzOA2JCYagqKKcZ/vWket8nuu7Q9NpsADoYCX8FMXU34/A==" }, "@stencil/core": { "version": "1.3.1", diff --git a/webcomponents/inline-editor/package.json b/webcomponents/inline-editor/package.json index 314a5ecdb..a177cc417 100644 --- a/webcomponents/inline-editor/package.json +++ b/webcomponents/inline-editor/package.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/inline-editor", - "version": "1.0.0-rc.1", + "version": "1.0.0-rc.1-1", "description": "A WYSIWYG HTML Inline Editor Web Component", "main": "dist/index.js", "module": "dist/index.mjs", @@ -22,7 +22,7 @@ "test.watch": "stencil test --spec --e2e --watchAll" }, "dependencies": { - "@deckdeckgo/utils": "^1.0.0-rc.1" + "@deckdeckgo/utils": "^1.0.0-rc.1-1" }, "devDependencies": { "@stencil/core": "^1.3.1", diff --git a/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.scss b/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.scss index b3c1dc07b..6b4796146 100644 --- a/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.scss +++ b/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.scss @@ -1,6 +1,9 @@ div.deckgo-tools { position: absolute; visibility: hidden; + opacity: 0; + + animation: 0s ease 0s 1 normal none running none; pointer-events: none; @@ -135,9 +138,8 @@ div.deckgo-tools { } &.deckgo-tools-activated { - transition: top 75ms ease-out, left 75ms ease-out; - animation: pop-upwards 180ms forwards linear; visibility: visible; + opacity: 1; } &.deckgo-tools-mobile { diff --git a/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx b/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx index a6392e64c..da5471a3b 100644 --- a/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx +++ b/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx @@ -1,6 +1,6 @@ import {Component, Element, EventEmitter, Listen, Prop, State, Watch, Event, Method, h} from '@stencil/core'; -import {isMobile, isIOS, unifyEvent} from '@deckdeckgo/utils'; +import {isMobile, isIOS, unifyEvent, debounce} from '@deckdeckgo/utils'; import {DeckdeckgoInlineEditorUtils} from '../../types/inline-editor/deckdeckgo-inline-editor-utils'; @@ -79,6 +79,11 @@ export class DeckdeckgoInlineEditor { @State() private toolsActivated: boolean = false; + @State() + private displayToolsActivated: boolean = false; + + private debounceDisplayToolsActivated: Function; + private selection: Selection = null; private anchorLink: AnchorLink = null; @@ -121,6 +126,16 @@ export class DeckdeckgoInlineEditor { @Prop() list: boolean = true; + constructor() { + this.resetDisplayToolsActivated(); + } + + private resetDisplayToolsActivated() { + this.debounceDisplayToolsActivated = debounce(() => { + this.displayToolsActivated = true; + }); + } + async componentWillLoad() { await this.attachListener(); } @@ -153,8 +168,8 @@ export class DeckdeckgoInlineEditor { return new Promise((resolve) => { const listenerElement: HTMLElement | Document = this.attachTo ? this.attachTo : document; if (listenerElement) { - listenerElement.addEventListener('mousedown', this.mousedown, {passive: true}); - listenerElement.addEventListener('touchstart', this.touchstart, {passive: true}); + listenerElement.addEventListener('mousedown', this.startSelection, {passive: true}); + listenerElement.addEventListener('touchstart', this.startSelection, {passive: true}); } resolve(); @@ -164,34 +179,28 @@ export class DeckdeckgoInlineEditor { private detachListener(listenerElement: HTMLElement | Document): Promise { return new Promise((resolve) => { if (listenerElement) { - listenerElement.removeEventListener('mousedown', this.mousedown); - listenerElement.removeEventListener('touchstart', this.touchstart); + listenerElement.removeEventListener('mousedown', this.startSelection); + listenerElement.removeEventListener('touchstart', this.startSelection); } resolve(); }); } - private mousedown = async ($event: MouseEvent) => { - if (this.toolsActivated) { - await this.resetImageToolbarActions($event); - - return; + private startSelection = async ($event: MouseEvent | TouchEvent) => { + if (this.toolbarActions !== ToolbarActions.IMAGE) { + this.anchorEvent = $event; } - this.anchorEvent = $event; - - await this.displayImageActions($event); - }; - - private touchstart = async ($event: TouchEvent) => { if (this.toolsActivated) { await this.resetImageToolbarActions($event); return; } - this.anchorEvent = $event; + if (this.toolbarActions === ToolbarActions.IMAGE) { + this.anchorEvent = $event; + } await this.displayImageActions($event); }; @@ -411,7 +420,7 @@ export class DeckdeckgoInlineEditor { return; } - if(this.iOSTimerScroll > 0) { + if (this.iOSTimerScroll > 0) { clearTimeout(this.iOSTimerScroll); } @@ -610,6 +619,8 @@ export class DeckdeckgoInlineEditor { await this.setToolsActivated(false); + this.resetDisplayToolsActivated(); + this.selection = null; this.toolbarActions = ToolbarActions.SELECTION; @@ -858,6 +869,12 @@ export class DeckdeckgoInlineEditor { return new Promise(async (resolve) => { this.toolsActivated = activated; + if (activated) { + this.debounceDisplayToolsActivated(); + } else { + this.displayToolsActivated = false; + } + if (this.isSticky()) { this.stickyToolbarActivated.emit(this.toolsActivated); } @@ -1020,7 +1037,7 @@ export class DeckdeckgoInlineEditor { } render() { - let classNames: string = this.toolsActivated ? (this.mobile ? 'deckgo-tools deckgo-tools-activated deckgo-tools-mobile' : 'deckgo-tools deckgo-tools-activated') : (this.mobile ? 'deckgo-tools deckgo-tools-mobile' : 'deckgo-tools'); + let classNames: string = this.displayToolsActivated ? (this.mobile ? 'deckgo-tools deckgo-tools-activated deckgo-tools-mobile' : 'deckgo-tools deckgo-tools-activated') : (this.mobile ? 'deckgo-tools deckgo-tools-mobile' : 'deckgo-tools'); if (this.isSticky()) { classNames += ' deckgo-tools-sticky'; diff --git a/webcomponents/utils/CHANGELOG.md b/webcomponents/utils/CHANGELOG.md index 5a2bb70de..83378ef9b 100644 --- a/webcomponents/utils/CHANGELOG.md +++ b/webcomponents/utils/CHANGELOG.md @@ -1,3 +1,8 @@ + +# 1.0.0-rc.1-1 (2019-09-01) + +* improvate `debounce` typing + # 1.0.0-rc.1 (2019-08-30) diff --git a/webcomponents/utils/package-lock.json b/webcomponents/utils/package-lock.json index ea46d5257..614b1cc53 100644 --- a/webcomponents/utils/package-lock.json +++ b/webcomponents/utils/package-lock.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/utils", - "version": "1.0.0-rc.1", + "version": "1.0.0-rc.1-1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/webcomponents/utils/package.json b/webcomponents/utils/package.json index ca44c9924..353357094 100644 --- a/webcomponents/utils/package.json +++ b/webcomponents/utils/package.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/utils", - "version": "1.0.0-rc.1", + "version": "1.0.0-rc.1-1", "author": "David Dal Busco", "description": "A collection of utils methods and functions developed for DeckDeckGo", "license": "MIT", diff --git a/webcomponents/utils/src/utils/deckdeckgo-utils.ts b/webcomponents/utils/src/utils/deckdeckgo-utils.ts index 9249aa6ea..45d69b3b1 100644 --- a/webcomponents/utils/src/utils/deckdeckgo-utils.ts +++ b/webcomponents/utils/src/utils/deckdeckgo-utils.ts @@ -3,14 +3,16 @@ export function unifyEvent(e: any): any { } export function debounce(func: Function, timeout?: number) { - let timer: number; - return ($args: any) => { + let timer: number | undefined; + + return (...args: any[]) => { + const next = () => func(...args); + if (timer) { clearTimeout(timer); } - // @ts-ignore - timer = setTimeout(func, timeout > 0 ? timeout : 300, $args); + timer = setTimeout(next, timeout && timeout > 0 ? timeout : 300); }; }