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
|
function getOffset(el) {
const rect = el.getBoundingClientRect();
return {
left: rect.left + window.scrollX,
top: rect.top + window.scrollY,
};
}
const prevOffset = {};
const displayEffect = (event) => {
if (prevOffset.top === undefined) {
let initialOffset = getOffset(document.getElementsByClassName("cursor")[0]);
prevOffset.top = initialOffset.top;
prevOffset.left = initialOffset.left;
}
const existingRect = document.getElementById("myRect");
if (existingRect !== null) {
existingRect.remove();
}
setTimeout(function () {
const currOffset = getOffset(document.getElementsByClassName("cursor")[0]);
const top = prevOffset.top;
const left = prevOffset.left;
const rect = document.createElement("div");
// console.log("prev: ", top, left);
// console.log("curr: ", currOffset.top, currOffset.left);
rect.id = "myRect";
rect.style.cssText = `
position:absolute;
top:${top}px;
left:${left}px;
width:9px;
height:20px;
z-index:10;
background-color:red;
opacity: 0.5;
`;
rect.animate(
[
// keyframes
{ transform: "scale(1) skew(10deg)" },
{ transform: "scale(0) skew(10deg)" },
],
{
// timing options
duration: 500,
easing: "ease-in-out",
direction: "alternate",
iterations: Infinity,
}
);
document.body.appendChild(rect);
prevOffset.top = currOffset.top;
prevOffset.left = currOffset.left;
}, 24);
};
// NOTE: First enable editor.cursorSmoothCaretAnimation.
// NOTE: Uncomment this to get a cursor trail effect.
// document.addEventListener("keydown", displayEffect);
const windowControls = document.createElement('div');
windowControls.className = 'window-controls-container';
const minimize = document.createElement('div');
minimize.classList.add('window-icon', 'window-minimize', 'codicon', 'codicon-chrome-minimize');
const restore = document.createElement('div');
restore.classList.add('window-icon', 'window-max-restore', 'codicon', 'codicon-chrome-restore');
const close = document.createElement('div');
close.classList.add('window-icon', 'window-close', 'codicon', 'codicon-chrome-close');
windowControls.appendChild(minimize);
windowControls.appendChild(restore);
windowControls.appendChild(close);
// const html = '<div class="window-controls-container"><div class="window-icon window-minimize codicon codicon-chrome-minimize"></div><div class="window-icon window-max-restore codicon codicon-chrome-restore"></div><div class="window-icon window-close codicon codicon-chrome-close"></div></div>';
// template.innerHTML = html;
// const windowControls = template.content.firstChild;
var observer = new MutationObserver(function (mutations, me) {
console.warn('Observing if window controls present');
// const windowControls = document.querySelector(".window-controls-container");
const tabContainer = document.querySelector(".tabs-and-actions-container");
if (windowControls && tabContainer) {
tabContainer.appendChild(windowControls);
console.warn('Observing completed');
me.disconnect();
return;
}
});
// observer.observe(document, {
// childList: true,
// subtree: true
// });
|
