File

src/app/components/app-tabs/app-tabs.component.ts

Metadata

selector app-tabs
styleUrls app-tabs.component.css
templateUrl ./app-tabs.component.html

Index

Properties
Methods
HostListeners

Constructor

constructor(musicService: MusicLoaderService, renderer: Renderer2)
Parameters :
Name Type Optional
musicService MusicLoaderService No
renderer Renderer2 No

HostListeners

window:dragover
Arguments : '$event'
window:dragover(event: )

Methods

droped
droped(event: )
Parameters :
Name Optional
event No
Returns : void
maximize
maximize()
Returns : void
recievedFiles
recievedFiles(files: FileList)
Parameters :
Name Type Optional
files FileList No
Returns : void
setActive
setActive(active: )
Parameters :
Name Optional
active No
Returns : void
stopDrag
stopDrag()
Returns : void

Properties

active
active: string
Type : string
Default value : 'music'
dragging
dragging:
Default value : false
dragLeaveList
dragLeaveList:
dropList
dropList:
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>

result-matching ""

    No results matching ""