fix touch menu toggle

This commit is contained in:
_Bastler 2021-11-21 16:31:16 +01:00
parent 86d352f549
commit fda829745e
2 changed files with 38 additions and 33 deletions

View File

@ -34,8 +34,7 @@
</mat-toolbar> </mat-toolbar>
<mat-sidenav-container> <mat-sidenav-container>
<mat-sidenav #sidenav [mode]="isBiggerScreen() ? 'side' : 'over'" [(opened)]="opened" <mat-sidenav #sidenav [mode]="isBiggerScreen() ? 'side' : 'over'">
(click)="!isBiggerScreen() && opened=false">
<mat-nav-list> <mat-nav-list>
<a *ngIf="!auth || auth && !auth.authenticated" routerLink="/login" routerLinkActive="active" mat-list-item> <a *ngIf="!auth || auth && !auth.authenticated" routerLink="/login" routerLinkActive="active" mat-list-item>
<mat-icon>login</mat-icon> {{'login' | i18n}} <mat-icon>login</mat-icon> {{'login' | i18n}}

View File

@ -1,21 +1,24 @@
import {Component, HostListener} from '@angular/core'; import { Component, HostListener, ViewChild } from '@angular/core';
import {Router} from '@angular/router'; import { Router } from '@angular/router';
import {DomSanitizer} from '@angular/platform-browser'; import { DomSanitizer } from '@angular/platform-browser';
import {MatIconRegistry} from '@angular/material/icon'; import { MatIconRegistry } from '@angular/material/icon';
import {DateAdapter} from '@angular/material/core'; import { DateAdapter } from '@angular/material/core';
import { fromEvent } from 'rxjs'; import { fromEvent } from 'rxjs';
import {AuthService} from '../../services/auth.service'; import { AuthService } from '../../services/auth.service';
import {I18nService} from '../../services/i18n.service'; import { I18nService } from '../../services/i18n.service';
import {ProfileService} from '../../services/profile.service'; import { ProfileService } from '../../services/profile.service';
import { MatSidenav } from '@angular/material/sidenav';
@Component({ @Component({
selector: 'app-main', selector: 'app-main',
templateUrl: './main.component.html', templateUrl: './main.component.html',
styleUrls: ['./main.component.scss'] styleUrls: [ './main.component.scss' ]
}) })
export class MainComponent { export class MainComponent {
opened = true;
@ViewChild(MatSidenav) sidenav: MatSidenav;
darkTheme = "false"; darkTheme = "false";
title = 'we.bstly'; title = 'we.bstly';
currentLocale: String; currentLocale: String;
@ -49,13 +52,13 @@ export class MainComponent {
this._adapter.setLocale(this.currentLocale); this._adapter.setLocale(this.currentLocale);
const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if(width < 768) { if (width < 768) {
this.opened = false; this.sidenav?.close();
} else { } else {
this.opened = true; this.sidenav?.open();
} }
if(localStorage.getItem("bstly.darkTheme") == "true") { if (localStorage.getItem("bstly.darkTheme") == "true") {
this.darkTheme = "true"; this.darkTheme = "true";
window.document.body.classList.add("dark-theme"); window.document.body.classList.add("dark-theme");
} }
@ -66,10 +69,10 @@ export class MainComponent {
setLocale(locale) { setLocale(locale) {
localStorage.setItem("bstly.locale", locale); localStorage.setItem("bstly.locale", locale);
if(this.auth && this.auth.authenticated) { if (this.auth && this.auth.authenticated) {
this.profileService.getField("locale").subscribe((profileField: any) => { this.profileService.getField("locale").subscribe((profileField: any) => {
if(profileField == null) { if (profileField == null) {
profileField = { profileField = {
"name": "locale", "name": "locale",
"type": "TEXT", "type": "TEXT",
@ -88,7 +91,7 @@ export class MainComponent {
} }
darkThemeChange($event) { darkThemeChange($event) {
if($event.checked) { if ($event.checked) {
this.darkTheme = "true"; this.darkTheme = "true";
} else { } else {
this.darkTheme = "false"; this.darkTheme = "false";
@ -96,10 +99,10 @@ export class MainComponent {
localStorage.setItem("bstly.darkTheme", this.darkTheme); localStorage.setItem("bstly.darkTheme", this.darkTheme);
if(this.auth && this.auth.authenticated) { if (this.auth && this.auth.authenticated) {
this.profileService.getField("darkTheme").subscribe((profileField: any) => { this.profileService.getField("darkTheme").subscribe((profileField: any) => {
if(profileField == null) { if (profileField == null) {
profileField = { profileField = {
"name": "darkTheme", "name": "darkTheme",
"type": "BOOL", "type": "BOOL",
@ -120,7 +123,7 @@ export class MainComponent {
logout() { logout() {
this.authService.logout().subscribe(data => { this.authService.logout().subscribe(data => {
this.router.navigate([""]).then(() => { this.router.navigate([ "" ]).then(() => {
window.location.reload(); window.location.reload();
}); });
}) })
@ -128,7 +131,7 @@ export class MainComponent {
isBiggerScreen() { isBiggerScreen() {
const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if(width < 768) { if (width < 768) {
return false; return false;
} else { } else {
return true; return true;
@ -139,12 +142,12 @@ export class MainComponent {
window.open(url, target); window.open(url, target);
} }
@HostListener('window:resize', ['$event']) @HostListener('window:resize', [ '$event' ])
onResize(event) { onResize(event) {
if(event.target.innerWidth < 768) { if (event.target.innerWidth < 768) {
this.opened = false; this.sidenav?.close();
} else { } else {
this.opened = true; this.sidenav?.open();
} }
} }
@ -163,12 +166,15 @@ export class MainComponent {
}) })
fromEvent(document, 'touchend').subscribe((event: TouchEvent) => { fromEvent(document, 'touchend').subscribe((event: TouchEvent) => {
if (this.touchX != 0) {
const touchDiff = this.touchStartX - this.touchX; const touchDiff = this.touchStartX - this.touchX;
this.touchStartX = 0;
if (touchDiff < 0 && touchDiff < (this.touchThresh * -1) && !this.opened) { this.touchX = 0;
this.opened = true; if (touchDiff < 0 && touchDiff < (this.touchThresh * -1) && !this.sidenav.opened) {
} else if (touchDiff > 0 && touchDiff > this.touchThresh && this.opened) { this.sidenav.open();
this.opened = false; } else if (touchDiff > 0 && touchDiff > this.touchThresh && this.sidenav.opened) {
this.sidenav.close();
}
} }
}) })
} }