iris-ds
Version:
Joveo iris libray
308 lines (298 loc) • 15.7 kB
JavaScript
import { Component, Input, NgModule, ViewChild, EventEmitter, Directive, Output, HostBinding, HostListener } from '@angular/core';
import { CommonModule } from '@angular/common';
class AvatarComponent {
constructor() {
this.src = '';
this.name = '';
this.backgroundType = 'solid';
this.size = 'medium';
this.imgStyles = {};
this.nameStyles = {};
this.alt = '';
this.bgColors = [
'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue',
'light-blue', 'cyan', 'teal', 'green', 'light-green',
'lime', 'amber', 'orange', 'deep-orange',
];
this.colorCssClass = '';
}
ngOnChanges() {
if (!this.src) {
this.alt = this.createInitials(this.name);
this.colorCssClass = `${this.backgroundType}-${this.getBackground(this.name)}`;
}
}
createInitials(name) {
return name
.trim()
.split(' ')
.slice(0, 3)
.map(word => word[0])
.join('');
}
getBackground(name) {
return this.bgColors[name.length % this.bgColors.length];
}
}
AvatarComponent.decorators = [
{ type: Component, args: [{
selector: 'iris-avatar',
template: `
<div [ngClass]="size">
<img [ngClass]="size"
*ngIf="src; else initials"
[src]="src"
[alt]="alt"
[ngStyle]="imgStyles"
/>
<ng-template #initials>
<div [ngStyle]="nameStyles"
class="initials"
[ngClass]="colorCssClass">
<span>{{ alt }}</span>
</div>
</ng-template>
</div>
`,
styles: [".small{font-size:10px;width:24px;height:24px}.medium{font-size:14px;width:32px;height:32px}.large{font-size:16px;width:40px;height:40px}.initials,img{border-radius:50%;height:100%;width:100%}.initials{display:grid;place-items:center}.solid-red{background:#f44336;color:#fff}.solid-pink{background:#e91e63;color:#fff}.solid-purple{background:#9c27b0;color:#fff}.solid-deep-purple{background:#673ab7;color:#fff}.solid-indigo{background:#3f51b5;color:#fff}.solid-blue{background:#2196f3;color:#fff}.solid-light-blue{background:#03a9f4;color:#fff}.solid-cyan{background:#00bcd4;color:#fff}.solid-teal{background:#009688;color:#fff}.solid-green{background:#4caf50;color:#fff}.solid-light-green{background:#8bc34a;color:#fff}.solid-lime{background:#cddc39;color:#fff}.solid-amber{background:#ffc107;color:#fff}.solid-orange{background:#ff9800;color:#fff}.solid-deep-orange{background:#ff5722;color:#fff}.subtle-red{background:#ffcdd2;color:rgba(0,0,0,.87)}.subtle-pink{background:#f8bbd0;color:rgba(0,0,0,.87)}.subtle-purple{background:#e1bee7;color:rgba(0,0,0,.87)}.subtle-deep-purple{background:#d1c4e9;color:rgba(0,0,0,.87)}.subtle-indigo{background:#c5cae9;color:rgba(0,0,0,.87)}.subtle-blue{background:#bbdefb;color:rgba(0,0,0,.87)}.subtle-light-blue{background:#b3e5fc;color:rgba(0,0,0,.87)}.subtle-cyan{background:#b2ebf2;color:rgba(0,0,0,.87)}.subtle-teal{background:#b2dfdb;color:rgba(0,0,0,.87)}.subtle-green{background:#c8e6c9;color:rgba(0,0,0,.87)}.subtle-light-green{background:#dcedc8;color:rgba(0,0,0,.87)}.subtle-lime{background:#f0f4c3;color:rgba(0,0,0,.87)}.subtle-amber{background:#ffecb3;color:rgba(0,0,0,.87)}.subtle-orange{background:#ffe0b2;color:rgba(0,0,0,.87)}.subtle-deep-orange{background:#ffccbc;color:rgba(0,0,0,.87)}"]
},] }
];
AvatarComponent.ctorParameters = () => [];
AvatarComponent.propDecorators = {
src: [{ type: Input }],
name: [{ type: Input }],
backgroundType: [{ type: Input }],
size: [{ type: Input }],
imgStyles: [{ type: Input }],
nameStyles: [{ type: Input }]
};
class AvatarModule {
}
AvatarModule.decorators = [
{ type: NgModule, args: [{
declarations: [AvatarComponent],
imports: [CommonModule],
exports: [AvatarComponent]
},] }
];
// Old CODE
// <div class="dropzone-container">
// <h5 class="w500">{{title}}</h5>
// <p class="subtitle2 mt-1 mb-4">{{subtitle}}</p>
// <div class="progress" #progressBar >
// </div>
// <div>
// <div DragDrop class="dropzone" (filesChangeEmiter)="onFileChange($event)">
// <div class="text-wrapper">
// <div class="centered">
// <input type="file" name="file" id="file" (change)="onFileChange($event.target.files)" multiple>
// <label for="file"><span class="textLink">Choose a file</span> or Drag it here!</label>
// </div>
// </div>
// </div>
// </div>
// <hr>
// <div>
// <h3 mat-subheader>Files</h3>
// <div *ngFor="let file of files">
// <div>{{file.name}}</div>
// <button color="warn" (click)="deleteFile(file)">Delete</button>
// </div>
// </div>
// </div>
class DropzoneComponent {
constructor() {
this.files = [];
this.src = '';
this.title = '';
this.subtitle = '';
this.backgroundType = 'solid';
this.size = 'medium';
this.imgStyles = {};
this.nameStyles = {};
this.progressState = 'verify';
this.alt = '';
this.bgColors = [
'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue',
'light-blue', 'cyan', 'teal', 'green', 'light-green',
'lime', 'amber', 'orange', 'deep-orange',
];
this.colorCssClass = '';
}
ngAfterViewInit() {
this.progressBar.nativeElement.hidden = true;
//state = verify / success / error
}
ngOnChanges() {
this.setProgress(this.ProgressPercentage);
}
onFileChange(pFileList) {
console.log("change called");
this.files = Object.keys(pFileList).map(key => pFileList[key]);
this.progressBar.nativeElement.hidden = false;
// this.setProgressState('verify')
}
resetFileStack(event) {
if (this.files.length == 0) {
console.log("set dom data to null");
event.target.value = null;
}
}
deleteFile(f) {
this.files = this.files.filter(function (w) { return w.name != f.name; });
if (this.files.length == 0) {
this.progressBar.nativeElement.hidden = true;
}
}
setProgress(progresspercentage) {
const totalLength = (this.progressBar.nativeElement.offsetWidth * 2) + (this.progressBar.nativeElement.offsetHeight * 2);
const input = (progresspercentage > 100) ? 100 : progresspercentage;
const borderLen = (input / 100) * totalLength;
let backgroundPos;
if (borderLen <= this.progressBar.nativeElement.offsetWidth) {
backgroundPos = (-448 + borderLen) + 'px 0px, 448px -100px, 453px 95px, 0px 100px';
}
else if (borderLen <= (this.progressBar.nativeElement.offsetWidth + this.progressBar.nativeElement.offsetHeight)) {
backgroundPos = '0px 0px, 448px ' + (-100 + (borderLen - this.progressBar.nativeElement.offsetWidth)) + 'px, 453px 95px, 0px 100px';
}
else if (borderLen <= (this.progressBar.nativeElement.offsetWidth * 2 + this.progressBar.nativeElement.offsetHeight)) {
backgroundPos = '0px 0px, 448px 0px, ' + (448 - (borderLen - this.progressBar.nativeElement.offsetWidth - this.progressBar.nativeElement.offsetHeight)) + 'px 95px, 0px 100px';
}
else {
backgroundPos = '0px 0px, 448px 0px, 0px 95px, 0px ' + (100 - (borderLen - (this.progressBar.nativeElement.offsetWidth * 2) - this.progressBar.nativeElement.offsetHeight)) + 'px';
}
this.progressBar.nativeElement.setAttribute("style", "background-position : " + backgroundPos);
}
}
DropzoneComponent.decorators = [
{ type: Component, args: [{
selector: 'iris-dropzone',
template: `
<div class="dropzone-container">
<h5 class="iris-h5 w500">{{title}}</h5>
<p class="iris-body2 mt-1 mb-4">{{subtitle}}</p>
<div class="{{ 'progress ' + progressState }}" #progressBar>
<div class="filenamecontainer">
<div *ngFor="let file of files">
<div class="filename">{{file.name}}</div>
<button color="warn" (click)="deleteFile(file)"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0003 1.66602C5.39199 1.66602 1.66699 5.39102 1.66699 9.99935C1.66699 14.6077 5.39199 18.3327 10.0003 18.3327C14.6087 18.3327 18.3337 14.6077 18.3337 9.99935C18.3337 5.39102 14.6087 1.66602 10.0003 1.66602ZM14.167 12.991L12.992 14.166L10.0003 11.1744L7.00866 14.166L5.83366 12.991L8.82533 9.99935L5.83366 7.00768L7.00866 5.83268L10.0003 8.82435L12.992 5.83268L14.167 7.00768L11.1753 9.99935L14.167 12.991Z" fill="#718096"/>
</svg>
</button>
</div>
</div>
</div>
<div>
<div DragDrop class="dropzone" (filesChangeEmiter)="onFileChange($event)">
<div class="text-wrapper">
<div class="centered">
<input type="file" name="file" id="file" (change)="onFileChange($event.target.files)" (click)="resetFileStack($event)">
<label for="file"><span class="textLink">Choose a file</span> or Drag it here!</label>
</div>
</div>
</div>
</div>
</div>
`,
styles: ["@charset \"UTF-8\";.iris-h6{font-size:.6rem}.iris-h5,.iris-h6{color:#212121;margin:0}.iris-h5{font-size:1.2rem}.iris-h4{font-size:1.8rem}.iris-h3,.iris-h4{color:#212121;margin:0}.iris-h3{font-size:2.4rem}.iris-h2{font-size:3rem}.iris-h1,.iris-h2{color:#212121;margin:0}.iris-h1{font-size:3.6rem}.iris-subtitle1{font-size:1rem!important;color:#424242;font-weight:500;line-height:1.2rem}.iris-subtitle2{font-size:.9rem!important;color:#424242;font-weight:500}.iris-body1{line-height:1.2rem}.iris-body1,.iris-body2{font-size:.9rem!important;color:#616161;font-weight:400}.iris-caption{font-size:.75rem}.iris-caption,.iris-overline{color:#616161;font-weight:400}.iris-overline{font-size:.65rem}.w100{font-weight:100}.w200{font-weight:200}.w400{font-weight:400}.w500{font-weight:500}.w600{font-weight:600}.w700{font-weight:700}.dropzone{height:96px;display:table;background-color:#fff}.dropzone,.dropzone-container{width:448px}input[type=file]{display:none}.textLink{color:#2196f3;font-weight:600;cursor:pointer}.text-wrapper{display:table-cell;vertical-align:middle}.centered{font-size:1rem;text-align:center;color:#616161}.fileItem{width:calc(25% - 6px);overflow:hidden;height:-moz-fit-content;height:fit-content;margin:3px;padding:10px;display:block;position:relative;float:left;border:2px dashed #789;border-radius:5px;transition:.3s ease}.fileItem:hover{border:2px solid #c33838;background-color:rgba(195,56,56,.7490196078431373)}.fileItem:hover .fileItemIcon:before{content:\"\uF00D\";color:#f5f5f5}.fileItem:hover .fileItemText{color:#f5f5f5}.fileItemIconDiv{text-align:center}.fileItemIcon:before{font-style:normal;content:\"\uF15B\";color:#789;font-family:Font Awesome\\ 5 Free;font-weight:900}.fileItemText{text-align:center;margin-top:10px;height:40px}.filename{color:#4a5568;font-weight:500;float:left}.filenamecontainer{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;background:#fff;width:calc(100% - 6px);margin-left:2px;margin-top:40px}.progress{height:100px;position:absolute;width:453px;margin-top:0;background-size:100% 5px,5px 100%,100% 5px,5px 100%!important;background-repeat:no-repeat!important;animation:progress 4s linear forwards}.progress.verify{background:linear-gradient(90deg,#42a5f5 99.99%,transparent),linear-gradient(180deg,#42a5f5 99.99%,transparent),linear-gradient(90deg,#42a5f5 99.99%,transparent),linear-gradient(180deg,#42a5f5 99.99%,transparent)}.progress.success{background:linear-gradient(90deg,#81c784 99.99%,transparent),linear-gradient(180deg,#81c784 99.99%,transparent),linear-gradient(90deg,#81c784 99.99%,transparent),linear-gradient(180deg,#81c784 99.99%,transparent)}.progress.error{background:linear-gradient(90deg,#e57373 99.99%,transparent),linear-gradient(180deg,#e57373 99.99%,transparent),linear-gradient(90deg,#e57373 99.99%,transparent),linear-gradient(180deg,#e57373 99.99%,transparent)}button{background:none;border:0;cursor:pointer}"]
},] }
];
DropzoneComponent.ctorParameters = () => [];
DropzoneComponent.propDecorators = {
progressBar: [{ type: ViewChild, args: ['progressBar', { static: true },] }],
src: [{ type: Input }],
title: [{ type: Input }],
subtitle: [{ type: Input }],
backgroundType: [{ type: Input }],
size: [{ type: Input }],
imgStyles: [{ type: Input }],
nameStyles: [{ type: Input }],
ProgressPercentage: [{ type: Input }],
progressState: [{ type: Input }]
};
class DragDropDirective {
constructor() {
//@Input() private allowed_extensions : Array<string> = ['png', 'jpg', 'bmp'];
this.filesChangeEmiter = new EventEmitter();
//@Output() private filesInvalidEmiter : EventEmitter<File[]> = new EventEmitter();
this.background = '#ffffff';
this.borderStyle = '2px dashed';
this.borderColor = '#E5E7EB';
this.borderRadius = '0px';
}
onDragOver(evt) {
evt.preventDefault();
evt.stopPropagation();
this.background = '#ffffff';
this.borderColor = '#42A5F5';
this.borderStyle = '2px solid';
console.log("drag over");
}
onDragLeave(evt) {
evt.preventDefault();
evt.stopPropagation();
this.background = '#ffffff';
this.borderColor = '#e5e7eb';
this.borderStyle = '2px dashed';
console.log("drag leave");
}
onDrop(evt) {
evt.preventDefault();
evt.stopPropagation();
this.background = '#ffffff';
this.borderColor = '#e5e7eb';
this.borderStyle = '2px dashed';
console.log("drag drop");
debugger;
let files = evt.dataTransfer.files;
let valid_files = files;
this.filesChangeEmiter.emit(valid_files);
}
}
DragDropDirective.decorators = [
{ type: Directive, args: [{
selector: '[DragDrop]'
},] }
];
DragDropDirective.ctorParameters = () => [];
DragDropDirective.propDecorators = {
filesChangeEmiter: [{ type: Output }],
background: [{ type: HostBinding, args: ['style.background',] }],
borderStyle: [{ type: HostBinding, args: ['style.border',] }],
borderColor: [{ type: HostBinding, args: ['style.border-color',] }],
borderRadius: [{ type: HostBinding, args: ['style.border-radius',] }],
onDragOver: [{ type: HostListener, args: ['dragover', ['$event'],] }],
onDragLeave: [{ type: HostListener, args: ['dragleave', ['$event'],] }],
onDrop: [{ type: HostListener, args: ['drop', ['$event'],] }]
};
class DropzoneModule {
}
DropzoneModule.decorators = [
{ type: NgModule, args: [{
declarations: [DropzoneComponent, DragDropDirective],
imports: [CommonModule],
exports: [DropzoneComponent, DragDropDirective]
},] }
];
class IrisModule {
}
IrisModule.decorators = [
{ type: NgModule, args: [{
imports: [
AvatarModule,
DropzoneModule,
],
exports: [
AvatarModule,
DropzoneModule
]
},] }
];
/*
* Public API Surface of iris
*/
/**
* Generated bundle index. Do not edit.
*/
export { AvatarComponent, AvatarModule, DragDropDirective, DropzoneComponent, DropzoneModule, IrisModule };
//# sourceMappingURL=iris-ds.js.map