Browse Source

Paste event.

pull/344/head
Sebastian Stehle 7 years ago
parent
commit
6b5135d3ac
  1. 4
      src/Squidex/app/features/content/shared/assets-editor.component.html
  2. 1
      src/Squidex/app/features/content/shared/assets-editor.component.scss
  3. 20
      src/Squidex/app/features/content/shared/assets-editor.component.ts
  4. 10
      src/Squidex/app/framework/angular/forms/file-drop.directive.ts
  5. 2
      src/Squidex/app/framework/angular/forms/tag-editor.component.ts
  6. 4
      src/Squidex/app/shared/components/assets-list.component.html
  7. 18
      src/Squidex/app/shared/components/assets-list.component.ts

4
src/Squidex/app/features/content/shared/assets-editor.component.html

@ -1,8 +1,8 @@
<div class="assets-container" [class.disabled]="isDisabled"> <div class="assets-container" [class.disabled]="isDisabled" (paste)="pasteFiles($event)" tabindex="1000">
<div class="header list"> <div class="header list">
<div class="row no-gutters"> <div class="row no-gutters">
<div class="col"> <div class="col">
<div class="drop-area align-items-center" (sqxFileDrop)="addFiles($event)" (click)="assetsDialog.show()"> <div class="drop-area align-items-center" (click)="assetsDialog.show()">
Drop files or click here to add assets. Drop files or click here to add assets.
</div> </div>
</div> </div>

1
src/Squidex/app/features/content/shared/assets-editor.component.scss

@ -30,6 +30,7 @@
.body { .body {
margin-bottom: -.25rem; margin-bottom: -.25rem;
margin-top: 1rem; margin-top: 1rem;
min-height: 1px;
} }
.unrow { .unrow {

20
src/Squidex/app/features/content/shared/assets-editor.component.ts

@ -115,6 +115,10 @@ export class AssetsEditorComponent implements ControlValueAccessor, OnInit, OnDe
this.changeDetector.markForCheck(); this.changeDetector.markForCheck();
} }
public noop() {
return;
}
public registerOnChange(fn: any) { public registerOnChange(fn: any) {
this.callChange = fn; this.callChange = fn;
} }
@ -123,9 +127,23 @@ export class AssetsEditorComponent implements ControlValueAccessor, OnInit, OnDe
this.callTouched = fn; this.callTouched = fn;
} }
public pasteFiles(event: ClipboardEvent) {
for (let i = 0; i < event.clipboardData.items.length; i++) {
const file = event.clipboardData.items[i].getAsFile();
if (file) {
this.newAssets = this.newAssets.pushFront(file);
}
}
}
public addFiles(files: FileList) { public addFiles(files: FileList) {
for (let i = 0; i < files.length; i++) { for (let i = 0; i < files.length; i++) {
this.newAssets = this.newAssets.pushFront(files[i]); const file = files[i];
if (file) {
this.newAssets = this.newAssets.pushFront(file);
}
} }
} }

10
src/Squidex/app/framework/angular/forms/file-drop.directive.ts

@ -7,6 +7,8 @@
import { Directive, ElementRef, EventEmitter, HostListener, Output, Renderer2 } from '@angular/core'; import { Directive, ElementRef, EventEmitter, HostListener, Output, Renderer2 } from '@angular/core';
import { Types } from './../../utils/types';
@Directive({ @Directive({
selector: '[sqxFileDrop]' selector: '[sqxFileDrop]'
}) })
@ -88,9 +90,9 @@ export class FileDropDirective {
return false; return false;
} }
if (isFunction(types.indexOf)) { if (Types.isFunction(types.indexOf)) {
return types.indexOf('Files') !== -1; return types.indexOf('Files') !== -1;
} else if (isFunction(types.contains)) { } else if (Types.isFunction(types.contains)) {
return types.contains('Files'); return types.contains('Files');
} else { } else {
return false; return false;
@ -98,10 +100,6 @@ export class FileDropDirective {
} }
} }
function isFunction(obj: any): boolean {
return !!(obj && obj.constructor && obj.call && obj.apply);
}
interface DragDropEvent extends MouseEvent { interface DragDropEvent extends MouseEvent {
readonly dataTransfer: DataTransfer; readonly dataTransfer: DataTransfer;
} }

2
src/Squidex/app/framework/angular/forms/tag-editor.component.ts

@ -211,7 +211,7 @@ export class TagEditorComponent implements AfterViewInit, ControlValueAccessor,
} }
public markTouched() { public markTouched() {
this.selectValue(this.addInput.value); this.selectValue(this.addInput.value, true);
this.resetAutocompletion(); this.resetAutocompletion();
this.resetFocus(); this.resetFocus();

4
src/Squidex/app/shared/components/assets-list.component.html

@ -1,4 +1,4 @@
<div class="file-drop" (sqxFileDrop)="addFiles($event)" *ngIf="!isDisabled"> <div class="file-drop" (sqxFileDrop)="addFiles($event)" *ngIf="!isDisabled" (paste)="pasteFiles($event)">
<h3 class="file-drop-header">Drop files here to upload</h3> <h3 class="file-drop-header">Drop files here to upload</h3>
<div class="file-drop-or">or</div> <div class="file-drop-or">or</div>
@ -14,7 +14,7 @@
<div class="file-drop-info">Drop file on existing item to replace the asset with a newer version.</div> <div class="file-drop-info">Drop file on existing item to replace the asset with a newer version.</div>
</div> </div>
<div class="row assets" [class.unrow]="isListView" *ngIf="state.tagsNames | async; let tags"> <div class="row assets" [class.unrow]="isListView" *ngIf="state.tagsNames | async; let tags" (paste)="pasteFiles($event)">
<sqx-asset *ngFor="let file of newFiles" [initFile]="file" <sqx-asset *ngFor="let file of newFiles" [initFile]="file"
[isListView]="isListView" [isListView]="isListView"
(failed)="remove(file)" (failed)="remove(file)"

18
src/Squidex/app/shared/components/assets-list.component.ts

@ -78,10 +78,26 @@ export class AssetsListComponent {
this.newFiles = this.newFiles.remove(file); this.newFiles = this.newFiles.remove(file);
} }
public pasteFiles(event: ClipboardEvent) {
for (let i = 0; i < event.clipboardData.items.length; i++) {
const file = event.clipboardData.items[i].getAsFile();
if (file) {
this.newFiles = this.newFiles.pushFront(file);
}
}
}
public addFiles(files: FileList) { public addFiles(files: FileList) {
for (let i = 0; i < files.length; i++) { for (let i = 0; i < files.length; i++) {
this.newFiles = this.newFiles.pushFront(files[i]); const file = files[i];
if (file) {
this.newFiles = this.newFiles.pushFront(file);
}
} }
return true;
} }
public trackByAsset(index: number, asset: AssetDto) { public trackByAsset(index: number, asset: AssetDto) {

Loading…
Cancel
Save