101 lines
3.2 KiB
JavaScript
101 lines
3.2 KiB
JavaScript
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
|
|
// });
|