-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.ts
108 lines (85 loc) · 2.78 KB
/
index.ts
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
interface Data {
top: number;
left: number;
width: number;
height: number;
}
// Count
localStorage.setItem(
'windowCount',
(Number(localStorage.getItem('windowCount')) + 1).toString()
);
window.addEventListener('unload', () => {
localStorage.setItem(
'windowCount',
Math.max(Number(localStorage.getItem('windowCount')) - 1, 0).toString()
);
});
// Number
const windowNumber = sessionStorage.getItem('windowNumber')
? Number(sessionStorage.getItem('windowNumber'))
: Number(localStorage.getItem('windowCount'));
sessionStorage.setItem('windowNumber', windowNumber.toString());
// Set window position
const setWindowPosition = () => {
const windowsPositions = JSON.parse(
localStorage.getItem('windowsPositions') ?? '{}'
);
const data: Data = {
top: window.screenTop,
left: window.screenLeft,
width: window.innerWidth,
height: window.innerHeight,
};
windowsPositions[windowNumber] = data;
localStorage.setItem('windowsPositions', JSON.stringify(windowsPositions));
};
window.addEventListener('unload', () => {
const windowsPositions: Record<string, Data> = JSON.parse(
localStorage.getItem('windowsPositions') ?? '{}'
);
delete windowsPositions[windowNumber];
localStorage.setItem('windowsPositions', JSON.stringify(windowsPositions));
});
setInterval(setWindowPosition, 10);
setWindowPosition();
// Insert divs
const createDiv = (top: number, left: number) => {
const div = document.createElement('div');
div.style.width = '300px';
div.style.height = '300px';
div.style.backgroundImage = 'url(/logo.svg)';
div.style.backgroundSize = 'contain';
div.style.backgroundRepeat = 'no-repeat';
div.style.backgroundPosition = 'center';
div.style.position = 'fixed';
div.style.top = `${top}px`;
div.style.left = `${left}px`;
div.style.transform = 'translate(-50%, -50%)';
document.getElementById('app')!.appendChild(div);
};
const insertDivs = () => {
const app = document.getElementById('app');
if (app) {
app.innerHTML = '';
}
const windowsPositions: Record<string, Data> = JSON.parse(
localStorage.getItem('windowsPositions') ?? '{}'
);
const data = windowsPositions[windowNumber];
createDiv(data.height / 2, data.width / 2);
const globalMainX = data.left + data.width / 2;
const globalMainY = data.top + data.height / 2;
const otherNumbers = Object.keys(windowsPositions).filter(
(number) => number !== windowNumber.toString()
);
otherNumbers.forEach((i) => {
const logoData = windowsPositions[i];
const mainX = logoData.left + logoData.width / 2;
const mainY = logoData.top + logoData.height / 2;
const centerX = data.width / 2 + (mainX - globalMainX);
const centerY = data.height / 2 + (mainY - globalMainY);
createDiv(centerY, centerX);
});
};
setInterval(insertDivs, 10);