dees-catalog/ts_web/elements/dees-input-fileupload.ts
2021-08-26 21:30:35 +02:00

145 lines
3.4 KiB
TypeScript

import {
customElement,
DeesElement,
TemplateResult,
property,
html,
css,
unsafeCSS,
cssManager,
} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
'dees-input-fileupload': DeesInputFileupload;
}
}
@customElement('dees-input-fileupload')
export class DeesInputFileupload extends DeesElement {
public static demo = () => html`<dees-input-fileupload></dees-input-fileupload>`;
// INSTANCE
public changeSubject = new domtools.rxjs.Subject();
@property({
type: String,
})
public label: string = null;
@property({
type: String,
})
public key: string;
@property({
attribute: false,
})
public value: File[] = [];
@property()
public state: 'idle' | 'dragOver' | 'dropped' | 'uploading' | 'completed' = 'idle';
@property({
type: Boolean,
})
public required: boolean = false;
@property({
type: Boolean
})
public disabled: boolean = false;
constructor() {
super()
}
public static styles = [
cssManager.defaultStyles,
css`
:host {
position: relative;
display: grid;
margin: 10px 0px;
margin-bottom: 24px;
}
.maincontainer {
color: ${cssManager.bdTheme('#333', '#ccc')};
}
.label {
font-size: 14px;
margin-bottom: 5px;
}
.uploadButton {
position: relative;
cursor: pointer;
padding: 20px 20px;
max-width: 200px;
background: ${cssManager.bdTheme('#fafafa', '#333333')};
border-radius: 3px;
text-align: center;
}
.uploadButton::after {
top: 7px;
right: 7px;
left: 7px;
bottom: 7px;
transform: scale3d(0.9, 0.9, 1);
position: absolute;
content: '';
display: block;
border: 4px dashed rgba(255, 255, 255, 0);
transition: all 0.2s;
}
.uploadButton.dragOver::after {
transform: scale3d(1, 1, 1);
border: 4px dashed rgba(255, 255, 255, 0.3);
}
`,
];
public render(): TemplateResult {
return html`
<div class="maincontainer">
${this.label ? html`<div class="label">${this.label}</div>` : null}
<div class="uploadButton ${this.state === 'dragOver' ? 'dragOver' : ''}">Upload File! (Drag/Drop enabled)</div>
</div>
`;
}
public async updateValue(eventArg: Event) {
const target: any = eventArg.target;
this.value = target.value;
this.changeSubject.next(this);
}
public firstUpdated() {
const dropArea = this.shadowRoot.querySelector('.uploadButton');
const handlerFunction = (eventArg: DragEvent) => {
eventArg.preventDefault();
switch(eventArg.type) {
case 'dragover':
this.state = 'dragOver';
break;
case 'dragleave':
this.state = 'idle';
break;
}
console.log(eventArg);
for (const file of Array.from(eventArg.dataTransfer.files)) {
this.value.push(file);
};
console.log(`Got ${this.value.length} files!`);
};
dropArea.addEventListener('dragenter', handlerFunction, false);
dropArea.addEventListener('dragleave', handlerFunction, false);
dropArea.addEventListener('dragover', handlerFunction, false);
dropArea.addEventListener('drop', handlerFunction, false);
}
}