diff --git a/src/app/common/common.module.ts b/src/app/common/common.module.ts index f967e6f02f89c1d257ecbd4cd4f9a32f6089a753..2e620457b6b9b059a76340c5579414ca8c9abeae 100644 --- a/src/app/common/common.module.ts +++ b/src/app/common/common.module.ts @@ -99,6 +99,7 @@ import { BlockListService } from "./services/block-list.service"; import { SettingsService } from "../modules/settings/settings.service"; import { ThemeService } from "./services/theme.service"; import { HorizontalInfiniteScroll } from "./components/infinite-scroll/horizontal-infinite-scroll.component"; +import { AttachmentPasteDirective } from "./directives/paste/attachment-paste.directive"; @NgModule({ imports: [ @@ -192,6 +193,8 @@ import { HorizontalInfiniteScroll } from "./components/infinite-scroll/horizonta SwitchComponent, FeaturedContentComponent, + + AttachmentPasteDirective, ], exports: [ MINDS_PIPES, @@ -275,6 +278,7 @@ import { HorizontalInfiniteScroll } from "./components/infinite-scroll/horizonta SwitchComponent, NSFWSelectorComponent, FeaturedContentComponent, + AttachmentPasteDirective, ], providers: [ { diff --git a/src/app/common/components/editors/textarea.component.ts b/src/app/common/components/editors/textarea.component.ts index fe9a6c1055ced5d30b7f25b7c305d28335e3fa23..3598b048662fb652add4d0ae24ba772d17360aba 100644 --- a/src/app/common/components/editors/textarea.component.ts +++ b/src/app/common/components/editors/textarea.component.ts @@ -6,7 +6,6 @@ import { EventEmitter, Input, Output, - SimpleChange, } from '@angular/core'; declare var tinymce; @@ -22,6 +21,9 @@ declare var tinymce; (keyup)="change()" (blur)="change()" (paste)="paste($event); change()" + (onFilePaste)="onFilePaste.emit($event)" + m-attachment-paste + tabindex="0" > = new EventEmitter(); + getControlText(): string { return this.editorControl.nativeElement.innerText; } @@ -62,7 +66,7 @@ export class Textarea implements OnChanges { } paste(e: any) { - e.preventDefault(); + // e.preventDefault(); let text; diff --git a/src/app/common/directives/paste/attachment-paste.directive.ts b/src/app/common/directives/paste/attachment-paste.directive.ts new file mode 100644 index 0000000000000000000000000000000000000000..b9eb860f7c2abc6cf4dbc93d5f855e21e8b2aa8b --- /dev/null +++ b/src/app/common/directives/paste/attachment-paste.directive.ts @@ -0,0 +1,30 @@ +import { Directive, EventEmitter, HostListener, Output } from '@angular/core'; + +@Directive({ selector: '[m-attachment-paste]' }) +export class AttachmentPasteDirective { + @Output('onFilePaste') onFilePaste: EventEmitter = new EventEmitter(); + + private focused: boolean = false; + + + @HostListener('focus') onFocus() { + this.focused = true; + } + + @HostListener('focusout') onFocusOut() { + this.focused = false; + } + + @HostListener('window:paste', ['$event']) onPaste(event: ClipboardEvent) { + if (this.focused) { + for (let index in event.clipboardData.items) { + const item: DataTransferItem = event.clipboardData.items[index]; + + if (item.kind === 'file') { + this.onFilePaste.emit(item.getAsFile()); + break; + } + } + } + } +} diff --git a/src/app/modules/comments/card/comment.component.ts b/src/app/modules/comments/card/comment.component.ts index 43d92c31f65e59e6035503adba8d27890087f515..0e2b73440195a30ae497cd3c715a84be1ddc6eeb 100644 --- a/src/app/modules/comments/card/comment.component.ts +++ b/src/app/modules/comments/card/comment.component.ts @@ -192,7 +192,7 @@ export class CommentComponent implements OnChanges { this.canPost = false; this.triedToPost = false; - this.attachment.remove(file).then(() => { + this.attachment.remove().then(() => { this.canPost = true; this.triedToPost = false; file.value = ''; diff --git a/src/app/modules/comments/comment/comment.component.ts b/src/app/modules/comments/comment/comment.component.ts index 97f2db9bec431d6a6f5c625c30966427d5ebda7f..0a1c82fac0ced9861c64902f7d36f9bf32f79538 100644 --- a/src/app/modules/comments/comment/comment.component.ts +++ b/src/app/modules/comments/comment/comment.component.ts @@ -210,7 +210,7 @@ export class CommentComponentV2 implements OnChanges { this.canPost = false; this.triedToPost = false; - this.attachment.remove(file).then(() => { + this.attachment.remove().then(() => { this.canPost = true; this.triedToPost = false; file.value = ''; diff --git a/src/app/modules/comments/list/list.component.ts b/src/app/modules/comments/list/list.component.ts index 31bf610806ed17463595bdc2db57ab11c76992a6..abfe8e9a78a24a77088d3fc9827ffaf23102a2cd 100644 --- a/src/app/modules/comments/list/list.component.ts +++ b/src/app/modules/comments/list/list.component.ts @@ -463,7 +463,7 @@ export class CommentsListComponent { this.canPost = false; this.triedToPost = false; - this.attachment.remove(file).then(() => { + this.attachment.remove().then(() => { this.canPost = true; this.triedToPost = false; file.value = ''; diff --git a/src/app/modules/comments/poster/poster.component.html b/src/app/modules/comments/poster/poster.component.html index 205647c7167575b701c015cf9582b399fb5a6c7b..990dca3ca6f073b1fc2a91e40916452a5617c2e1 100644 --- a/src/app/modules/comments/poster/poster.component.html +++ b/src/app/modules/comments/poster/poster.component.html @@ -17,6 +17,7 @@ (keyup)="getPostPreview(content)" (keypress)="keypress($event)" [placeholder]="conversation ? 'Enter your message' : 'Enter your comment'" + (onFilePaste)="uploadAttachment($event)" > @@ -29,7 +30,7 @@
attachment - +
{ this.canPost = true; this.triedToPost = false; - file.value = null; this.detectChanges(); }) .catch(e => { console.error(e); this.canPost = true; this.triedToPost = false; - file.value = null; this.detectChanges(); }); - - this.detectChanges(); } - removeAttachment(file: HTMLInputElement) { + removeAttachment(fileInput: HTMLInputElement) { this.canPost = false; this.triedToPost = false; - this.attachment.remove(file).then(() => { + this.attachment.remove().then(() => { this.canPost = true; this.triedToPost = false; - file.value = ''; + fileInput.value = null; }).catch(e => { console.error(e); this.canPost = true; diff --git a/src/app/modules/newsfeed/poster/poster.component.html b/src/app/modules/newsfeed/poster/poster.component.html index 3192a89d5f76b71f1f1c5eb3ae1386cc0977485f..52676b73148f1476f57a7decd93fa0e788ab96a0 100644 --- a/src/app/modules/newsfeed/poster/poster.component.html +++ b/src/app/modules/newsfeed/poster/poster.component.html @@ -18,6 +18,8 @@ [findChoices]="findTrendingHashtags" [getChoiceLabel]="getChoiceLabel" triggerCharacter="#" + m-attachment-paste + (onFilePaste)="uploadAttachment($event)" > @@ -34,7 +36,7 @@ diff --git a/src/app/modules/newsfeed/poster/poster.component.ts b/src/app/modules/newsfeed/poster/poster.component.ts index 2e971cfb7e14ef17990b17c40e4f5ab99b5eab8c..1cc16eb4d745f59720234f1ee9aeb67b1be41e12 100644 --- a/src/app/modules/newsfeed/poster/poster.component.ts +++ b/src/app/modules/newsfeed/poster/poster.component.ts @@ -194,38 +194,46 @@ export class PosterComponent { }); } - uploadAttachment(file: HTMLInputElement, event) { + async uploadFile(file: HTMLInputElement, event) { if (file.value) { // this prevents IE from executing this code twice - this.canPost = false; - this.inProgress = true; - this.errorMessage = null; - - this.attachment.upload(file) - .then(guid => { - this.inProgress = false; - this.canPost = true; - if (this.attachment.isPendingDelete()) { - this.removeAttachment(file); - } - file.value = null; - }) - .catch(e => { - if (e && e.message) { - this.errorMessage = e.message; - } - this.inProgress = false; - this.canPost = true; - file.value = null; - this.attachment.reset(); - }); + try { + await this.uploadAttachment(file); + + file.value = null; + } catch (e) { + file.value = null; + } } } + async uploadAttachment(file: HTMLInputElement | File) { + this.canPost = false; + this.inProgress = true; + this.errorMessage = null; + + return this.attachment.upload(file) + .then(guid => { + this.inProgress = false; + this.canPost = true; + if (this.attachment.isPendingDelete()) { + this.removeAttachment(file); + } + }) + .catch(e => { + if (e && e.message) { + this.errorMessage = e.message; + } + this.inProgress = false; + this.canPost = true; + this.attachment.reset(); + }); + } + removeRichEmbed() { this.attachment.reset(); } - removeAttachment(file: HTMLInputElement) { + removeAttachment(file: HTMLInputElement|File) { if (this.inProgress) { this.attachment.abort(); this.canPost = true; @@ -240,10 +248,9 @@ export class PosterComponent { this.errorMessage = ''; - this.attachment.remove(file).then(() => { + this.attachment.remove().then(() => { this.inProgress = false; this.canPost = true; - file.value = ''; }).catch(e => { console.error(e); this.inProgress = false; diff --git a/src/app/modules/payments/paywall/paywall.service.ts b/src/app/modules/payments/paywall/paywall.service.ts deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git a/src/app/services/attachment.ts b/src/app/services/attachment.ts index 5ce50d88c8f73835793e08c08d93580268fb444e..2954f6553ae8cb994ebcaacc9656986ee586d2a1 100644 --- a/src/app/services/attachment.ts +++ b/src/app/services/attachment.ts @@ -114,13 +114,13 @@ export class AttachmentService { this.meta.nsfw = nsfw.map(reason => reason.value); } - upload(fileInput: HTMLInputElement, detectChangesFn?: Function) { + upload(file: HTMLInputElement|File, detectChangesFn?: Function) { this.reset(); this.attachment.progress = 0; this.attachment.mime = ''; - - let file = fileInput ? fileInput.files[0] : null; + + file = file instanceof HTMLInputElement ? file.files[0] : file; if (!file) { return Promise.reject(null); @@ -172,7 +172,7 @@ export class AttachmentService { } } - remove(fileInput: HTMLInputElement) { + remove() { this.attachment.progress = 0; this.attachment.mime = ''; this.attachment.preview = null;