diff --git a/frontend/index.html b/frontend/index.html index 83edf13..88e8765 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -9,5 +9,6 @@
+ diff --git a/frontend/src/context-menu.js b/frontend/src/context-menu.js new file mode 100644 index 0000000..d80db93 --- /dev/null +++ b/frontend/src/context-menu.js @@ -0,0 +1,102 @@ +// inset context-menu html & css +document.body.insertAdjacentHTML('afterbegin', ` + +`); + +const contextMenu = document.getElementById("context-menu"); +let target = null; + +document.oncontextmenu = function(e) { + if (contextMenu.contains(e.target)) return; + // e.preventDefault(); + + target = e.target; + + const tagName = target.tagName.toLowerCase(); + const editable = (tagName === 'input' || tagName === 'textarea'); + const textSelected = !!(getSelection().toString()); + + if (!(editable || textSelected)) return; + + document.getElementById('cut').style.display = textSelected && editable ? '' : 'none'; + document.getElementById('paste').style.display = editable ? '' : 'none'; + document.getElementById('copy').style.display = textSelected ? '' : 'none'; + + contextMenu.style.display = 'block'; + contextMenu.style.left = e.pageX + "px"; + contextMenu.style.top = e.pageY + "px"; +} + +document.onmousedown = function(e) { + if (!contextMenu.contains(e.target)) hideMenu(); +} + +// prevent focus on click +contextMenu.onmousedown = function(e) { + e.preventDefault() +} + +document.getElementById('cut').onclick = function() { + document.execCommand('cut'); + hideMenu(); + target.focus(); +} + +document.getElementById('copy').onclick = function(e) { + // winwindow.runtime.ClipboardSetText(getSelection().toString()) + document.execCommand('copy'); + hideMenu(); + target.focus(); +} + +document.getElementById('paste').onclick = async function(e) { + const text = await window.runtime.ClipboardGetText(); + if (text) document.execCommand("insertText", false, text); + hideMenu(); +} + +function hideMenu() { + contextMenu.style.display = 'none'; +}