Skip to content

Instantly share code, notes, and snippets.

@ccapndave
Created February 13, 2020 13:38
Show Gist options
  • Save ccapndave/935c72edb9c00180bcda5193d05b0aba to your computer and use it in GitHub Desktop.
Save ccapndave/935c72edb9c00180bcda5193d05b0aba to your computer and use it in GitHub Desktop.
#_cdielts-context-menu.menu {
width: 120px;
background-color: white;
box-shadow: 0 4px 5px 3px rgba(0, 0, 0, 0.2);
position: absolute;
display: none;
.menu-options {
list-style: none;
padding: 10px 0;
margin: 0;
.menu-option {
font-weight: 500;
font-size: 14px;
padding: 10px 40px 10px 20px;
cursor: pointer;
&:hover {
background: rgba(0, 0, 0, 0.2);
}
}
}
}
const contextMenuElement = document.createElement("div");
contextMenuElement.id = "_cdielts-context-menu";
contextMenuElement.classList.add("menu");
contextMenuElement.innerHTML = `
<ul class="menu-options">
<li class="menu-option" data-event="highlight">Highlight</li>
<li class="menu-option" data-event="notes">Notes</li>
</ul>
`;
const parent = doc.querySelector(".cdielts-section-container");
parent.appendChild(contextMenuElement);
parent.addEventListener("contextmenu", (e: any) => {
e.preventDefault();
const bounds = parent.getBoundingClientRect();
const left = e.pageX - bounds.x;
const top = e.pageY - bounds.y;
contextMenuElement.style.left = `${left}px`;
contextMenuElement.style.top = `${top}px`;
contextMenuElement.style.display = "block";
});
parent.addEventListener("click", (e: any) => {
contextMenuElement.style.display = "none";
});
Array.from(contextMenuElement.querySelectorAll(".menu-option")).forEach(menuOptionElement => {
menuOptionElement.addEventListener("click", _ => {
console.log(`contextmenu-${menuOptionElement.getAttribute("data-event")}`);
menuOptionElement.dispatchEvent(new CustomEvent(`contextmenu-${menuOptionElement.getAttribute("data-event")}`));
contextMenuElement.style.display = "none";
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment