Repository navigation
Expand file tree
/
Copy pathapp.component.ts
More file actions
143 lines (141 loc) · 5.09 KB
/
Copy pathapp.component.ts
File metadata and controls
143 lines (141 loc) · 5.09 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
import {
AfterContentInit,
AfterViewInit,
Component,
Inject,
OnDestroy,
OnInit,
} from '@angular/core';
import { fromEvent } from 'rxjs';
import { DOCUMENT } from '@angular/common';
import { fader } from './route-animations';
import { RouterOutlet } from '@angular/router';
import { AuthencationService } from './services/authencation.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnDestroy {
mouseSubscribe = fromEvent(document.body, 'mousemove');
mouseClickSubscribe = fromEvent(document.body, 'mousedown');
subscribed: Element[] = [];
currentHover: boolean = false;
cursor: any = '';
// innerCursor: any = '';
customMouse: boolean = false;
constructor(private authService:AuthencationService) {}
ngOnInit(): void {
// window.onmouseover=function(e) {
// console.log(e);
// };
if (this.customMouse) {
this.cursor = document.getElementById('cursor') as HTMLElement;
// this.innerCursor = document.getElementById('cursor-inner') as HTMLElement;
let cursorClickAnimation = document.getElementById(
'cursorClickAnimation'
) as HTMLElement;
// console.log(this.cursor,this.innerCursor);
this.mouseSubscribe.subscribe((e: any) => {
if (!this.currentHover) {
this.cursor.style.left = +e.pageX - 25 + 'px';
this.cursor.style.top = +e.pageY - 25 + 'px';
}
// this.innerCursor.style.left = +e.pageX + 2 + 'px';
// this.innerCursor.style.top = +e.pageY + 5 + 'px';
// console.log(e.pageX, e.pageY)
// console.log(this.innerCursor.style.left, this.innerCursor.style.top);
});
this.mouseClickSubscribe.subscribe((e: any) => {
cursorClickAnimation.style.display = 'block';
cursorClickAnimation.style.animation =
'cursorClickAnim 0.5s linear forwards';
cursorClickAnimation.style.left = +e.pageX - 25 + 'px';
cursorClickAnimation.style.top = +e.pageY - 25 + 'px';
setTimeout(() => {
cursorClickAnimation.style.display = 'none';
}, 500);
});
this.setCursor();
}
}
startMorphCursor(element: any): void {
console.log('element on hover', element);
this.cursor.style.transition = 'all 0.5s ease';
this.currentHover = true;
if (element.classList.contains('mv-fxd')) {
this.cursor.style.position = 'fixed';
// this.innerCursor.style.position = 'fixed';
} else {
this.cursor.style.position = 'absolute';
// this.innerCursor.style.position = 'absolute';
}
this.cursor.style.left = +element.offsetLeft + 'px';
this.cursor.style.top = +element.offsetTop + 'px';
this.cursor.style.borderRadius = '5px';
this.cursor.style.width = element.offsetWidth + 'px';
this.cursor.style.height = element.offsetHeight + 'px';
// this.innerCursor.style.transition = 'all 0.5s ease';
// this.innerCursor.style.scale = '0.5';
}
stopMorphCursor() {
// this.innerCursor.style.position = 'absolute';
this.cursor.style.position = 'absolute';
// console.log("Leaving",currentElement);
this.currentHover = false;
this.cursor.style.transition = 'all 0.1s ease';
// console.log(currentElement);
this.cursor.style.borderRadius = '50%';
this.cursor.style.width = '50px';
this.cursor.style.height = '50px';
// this.innerCursor.style.scale = '1';
// this.innerCursor.style.transition = 'none';
}
clearEvents(): void {
this.cursor.style.borderRadius = '50%';
this.cursor.style.width = '50px';
this.cursor.style.height = '50px';
// this.innerCursor.style.transition = 'none';
// this.innerCursor.style.scale = '1';
this.currentHover = false;
this.subscribed.forEach((element: any) => {
element.removeEventListener('mouseenter', this.startMorphCursor);
element.removeEventListener('mouseleave', this.stopMorphCursor);
});
this.subscribed = [];
}
setCursor() {
// console.log('Setting cursor');
// this.clearEvents();
// this.ngAfterContentInit();
}
ngAfterContentInit(): void {
// let a = setInterval(() => {
// document.querySelectorAll('.mv').forEach((element: any) => {
// // console.log(element);
// this.subscribed.forEach((element: any) => {
// element.removeEventListener('mouseenter', this.startMorphCursor);
// element.removeEventListener('mouseleave', this.stopMorphCursor);
// })
// this.subscribed = [];
// if (!this.subscribed.includes(element)) {
// console.log('Adding event listener to', element);
// element.addEventListener('mouseenter', () => {
// this.startMorphCursor(element);
// });
// element.addEventListener('mouseleave', () => {
// this.stopMorphCursor();
// });
// this.subscribed.push(element);
// }
// });
// }, 1000);
// setTimeout(() => {
// clearInterval(a);
// }, 5000);
}
title = 'Sapython';
ngOnDestroy(): void {
console.log('Destroying');
}
}