File

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

Metadata

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

Index

Properties
HostListeners

Constructor

constructor(sizeService: SizeService)
Parameters :
Name Type Optional
sizeService SizeService No

HostListeners

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

Properties

actualHeight
actualHeight: number
Type : number
actualWidth
actualWidth: number
Type : number
height
height: number
Type : number
width
width: number
Type : number
window
window:
Default value : window
import { Component, HostListener } from '@angular/core';
import { SizeService } from '../../services/size.service';

@Component({
  selector: 'app-layout',
  templateUrl: './app-layout.component.html',
  styleUrls: ['./app-layout.component.css']
})
export class AppLayoutComponent {
  width: number;
  height: number;
  actualWidth: number;
  actualHeight: number;
  window = window;
  constructor(sizeService: SizeService) {
    this.actualWidth = window.innerWidth;
    this.actualHeight = window.innerHeight;
    this.width = sizeService.getWidth();
    this.height = sizeService.getHeight();
    sizeService.width$.subscribe(value => {
      if (value) {
        this.width = Number(value);
      } else {
        this.width = null;
      }
    });
    sizeService.height$.subscribe(value => {
      if (value) {
        this.height = Number(value) - 1;
      } else {
        this.height = null;
      }
    });
  }
  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.actualWidth = window.innerWidth;
    this.actualHeight = window.innerHeight;
  }
}
<!-- 
    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="layout" id="app_layout" [style.width.px]="width" [style.height.px]="height"
  [ngClass]="{'hidden':!((width && height) || actualWidth > actualHeight)}">
  <div class=" top-layout">
    <div class="deck">
      <app-deck [deckNumber]="0" id="app_deck_0_component"></app-deck>
    </div>
    <div class="volume-control">
      <app-volume id="app_volume_component"></app-volume>
    </div>
    <div class="deck">
      <app-deck [deckNumber]="1" id="app_deck_1_component"></app-deck>
    </div>
  </div>
  <div class="bottom-layout">
    <div class="tabs">
      <app-tabs></app-tabs>
    </div>
  </div>
</div>
<div class="layout" id="app_wrong_orientation_warning" *ngIf="!((width && height) || actualWidth > actualHeight)">
  {{ 'LAYOUT.INFO' | translate }}
</div>

result-matching ""

    No results matching ""