-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathapp.component.ts
More file actions
103 lines (101 loc) · 3.64 KB
/
app.component.ts
File metadata and controls
103 lines (101 loc) · 3.64 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import { AfterViewInit, Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
import { ChildrenOutletContexts, Router, RouterOutlet } from '@angular/router';
import { SwPush } from '@angular/service-worker';
import { AuthenticationService } from './services/authentication.service';
import { MessagingService } from './services/messaging.service';
import { DataProvider } from './providers/data.provider';
import 'clipboard';
import 'prismjs';
import 'prismjs/plugins/toolbar/prism-toolbar';
import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard';
import 'prismjs/components/prism-bash';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-json';
import 'prismjs/components/prism-markup';
import 'prismjs/components/prism-typescript';
import anime from 'animejs/lib/anime.es';
import { animate, animateChild, group, query, style, transition, trigger } from '@angular/animations';
import { slideInAnimation } from './animations/route.animation';
import { environment } from 'src/environments/environment';
// const luxy = require('luxy.js/dist/js/luxy.min.js');
// declare const luxy:any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
// animations: [
// slideInAnimation
// ]
})
export class AppComponent implements AfterViewInit {
environment = environment;
routePath: string = 'Text';
title = 'SapythonBlog';
noHeaderPages: string[] = ['login', 'signup'];
selectionSet:boolean = false;
chatPopupVisible: boolean = true;
chatOpen: boolean = false;
locoScroll:any;
routeAnimated:boolean = false;
get getWindow():any {
return window;
}
constructor(
private router: Router,
public messagingService: MessagingService,
public dataProvider: DataProvider,
private authService:AuthenticationService,
private contexts: ChildrenOutletContexts
) {}
get enableHeader(): boolean {
return !this.noHeaderPages.includes(window.location.pathname.split('/')[1]);
}
prepareRoute(outlet: RouterOutlet) {
return (
outlet &&
outlet.activatedRouteData &&
outlet.activatedRouteData['animation']
);
}
scroll(el: HTMLElement) {
el.scrollIntoView({ behavior: 'smooth' });
}
ngAfterViewInit(): void {
this.dataProvider.currentRoute.subscribe((data:string)=>{
this.routePath = data;
// this.routeAnimation();
})
}
routeAnimation(){
// document.querySelector('.router-wrapper').classList.add('animatable');
// anime({
// targets: '#changer',
// height:[
// { value: '0vh', duration: 500, easing: 'easeInOutQuad' },
// { value: '110vh', duration: 500, easing: 'easeInOutQuad' },
// { value: '0vh', duration: 500, delay:1000, easing: 'easeInOutQuad' },
// ],
// })
// anime({
// targets: '#routeName',
// rotate:[
// { value: '0deg', duration: 500, easing: 'easeInOutQuad', delay:500 },
// { value: '360deg', duration: 500, easing: 'easeInOutQuad' },
// { value: '0deg', duration: 500, delay:1000, easing: 'easeInOutQuad' },
// ],
// scale:[
// { value: '0', duration: 500, easing: 'easeInOutQuad'},
// { value: '1', duration: 500, easing: 'easeInOutQuad',delay:500 },
// { value: '0', duration: 500, delay:1000, easing: 'easeInOutQuad' },
// ],
// })
// setTimeout(()=>{
// // document.querySelector('.router-wrapper').classList.remove('animatable');
// },
// 2500)
}
getRouteAnimationData() {
return this.contexts.getContext('primary')?.route?.snapshot?.data?.['animation'];
}
}