File
Metadata
selector |
app-tabs |
styleUrls |
app-tabs.component.css |
templateUrl |
./app-tabs.component.html |
Index
Properties
|
|
Methods
|
|
HostListeners
|
|
HostListeners
window:dragover
|
Arguments : '$event'
|
window:dragover(event: )
|
|
Methods
recievedFiles
|
recievedFiles(files: FileList)
|
|
Parameters :
Name |
Type |
Optional |
files |
FileList
|
No
|
|
setActive
|
setActive(active: )
|
|
|
dragging
|
dragging:
|
Default value : false
|
|
dragLeaveList
|
dragLeaveList:
|
|
maximized
|
maximized:
|
Default value : false
|
|
import { Component, HostListener, Renderer2 } from '@angular/core';
import { MusicLoaderService } from '../../services/music-loader.service';
@Component({
selector: 'app-tabs',
templateUrl: './app-tabs.component.html',
styleUrls: ['./app-tabs.component.css']
})
export class AppTabsComponent {
active = 'music';
dragging = false;
maximized = false;
dragLeaveList;
dropList;
setActive(active) {
this.active = active;
}
maximize() {
this.maximized = !this.maximized;
}
constructor(private musicService: MusicLoaderService, private renderer: Renderer2) {}
droped(event) {
event.preventDefault();
this.recievedFiles(event.dataTransfer.files);
this.dragging = false;
}
@HostListener('window:dragover', ['$event'])
onDragOver(event) {
event.stopPropagation();
event.preventDefault();
this.dragging = true;
this.dragLeaveList = this.renderer.listen('window', 'dragleave', () => {
this.stopDrag();
});
this.dropList = this.renderer.listen('window', 'drop', () => {
this.stopDrag();
});
}
stopDrag() {
this.dragging = false;
this.dragLeaveList();
this.dropList();
}
recievedFiles(files: FileList) {
if (files) {
for (let i = 0; i < files.length; i++) {
if (files.item(i).type.includes('audio')) {
this.musicService.addSong(files.item(i));
}
}
}
}
}
<!--
This file is part of Web Virtual DJ.
Web Virtual DJ is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Web Virtual DJ is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Web Virtual DJ. If not, see <https://www.gnu.org/licenses/>.
-->
<div class="tabs-container" [ngClass]="{'maximized-container':maximized}" (drop)="droped($event)">
<div class="tabs" [ngClass]="{'maximized-tabs':maximized}" *ngIf="!dragging">
<div class="tablist">
<div [ngClass]="{'tab':true, 'tab--active':active=='music'}" (click)="setActive('music')"
id="app_tabs_music_list">
{{ 'TABS.MUSIC' | translate }}
</div>
<div [ngClass]="{'tab':true, 'tab--active':active=='effectssel'}" (click)="setActive('effectssel')"
id="app_tabs_effectssel">
{{ 'TABS.EFFECTSSEL' | translate }}
</div>
<div [ngClass]="{'tab':true, 'tab--active':active=='effectscr'}" (click)="setActive('effectscr')"
id="app_tabs_effects_creator">
{{ 'TABS.EFFCREATOR' | translate }}
</div>
<div [ngClass]="{'tab':true, 'tab--active':active=='help'}" (click)="setActive('help')" id="app_tabs_help">
{{ 'TABS.HELP' | translate }}
</div>
<div [ngClass]="{'tab':true, 'tab--active':active=='settings'}" (click)="setActive('settings')"
id="app_tabs_settings">
{{ 'TABS.SETTINGS' | translate }}
</div>
<div [ngClass]="{'tab':true, 'tab--active':active=='about'}" (click)="setActive('about')" id="app_tabs_about">
{{ 'TABS.ABOUT' | translate }}
</div>
<div style="margin-left: auto;margin-right:5px; display:flex; align-items: center;" (click)="maximize()">
<img (dragstart)="$event.preventDefault()" draggable="false" class="icon icon--clickable"
src="assets/images/maximize.png" *ngIf="!maximized">
<img (dragstart)="$event.preventDefault()" draggable="false" class="icon icon--clickable"
src="assets/images/minimize.png" *ngIf="maximized">
</div>
</div>
<div class="contents">
<app-music-list *ngIf="active=='music'"></app-music-list>
<app-effects-selector *ngIf="active=='effectssel'"></app-effects-selector>
<app-settings *ngIf="active=='settings'"></app-settings>
<app-effects-creator *ngIf="active=='effectscr'"></app-effects-creator>
<app-help *ngIf="active=='help'"></app-help>
<app-about *ngIf="active=='about'"></app-about>
</div>
</div>
<div class="drop" *ngIf="dragging">
{{ 'TABS.DROP' | translate }}
</div>
</div>