From 5c832cb94bec8aee9ead449c446966c7e289ac86 Mon Sep 17 00:00:00 2001 From: mic Date: Fri, 23 Aug 2024 23:27:04 +0200 Subject: [PATCH] start working on advanced selection tool... --- js/mzta-chatgpt.js | 76 +++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 68 insertions(+), 8 deletions(-) diff --git a/js/mzta-chatgpt.js b/js/mzta-chatgpt.js index 58c84fde..2e38fbf5 100644 --- a/js/mzta-chatgpt.js +++ b/js/mzta-chatgpt.js @@ -426,6 +426,29 @@ function selectContentOnMouseUp(event) { // If no dragging has occurred, execute the selection code selectContentOnClick(event); } + + + // Capture the text selection and insert markers + const selection = window.getSelection(); + + if (!selection.isCollapsed) { + const range = selection.getRangeAt(0); + + // Create and insert the markers + const startMarker = createMarker('start-marker'); + const endMarker = createMarker('end-marker'); + + range.insertNode(startMarker); + + //selection.removeAllRanges(); + range.setStartAfter(startMarker); + + range.collapse(false); + range.insertNode(endMarker); + + //selection.removeAllRanges(); + } + // Remove the event listeners to prevent future executions // document.removeEventListener('mousedown', selectContentOnMouseDown); // document.removeEventListener('mousemove', selectContentOnMouseMove); @@ -436,34 +459,71 @@ function selectContentOnClick(event) { if(current_action === '0'){ return; } - // Prevent the default behavior of the click event.preventDefault(); - // Get the element that was clicked var clickedElement = event.target; - // Traverse the DOM upwards to find the nearest parent div var parentDiv = clickedElement.closest('div'); - if (parentDiv) { // Create a range object var range = document.createRange(); - // Select the contents of the div range.selectNodeContents(parentDiv); - // Get the selection object var selection = window.getSelection(); - // Clear any existing selections selection.removeAllRanges(); - // Add the new range to the selection selection.addRange(range); } } +// Function to create a marker with draggable attribute +function createMarker(id) { + const marker = document.createElement('span'); + marker.id = id; + marker.textContent = '||||'; + marker.draggable = true; + marker.style.cursor = 'move'; + + marker.addEventListener('dragstart', onDragStart); + marker.addEventListener('dragover', onDragOver); + marker.addEventListener('drop', onDrop); + marker.addEventListener('dragend', onDragEnd); + + return marker; +} + +// Function called at the start of the drag +function onDragStart(event) { + event.dataTransfer.setData('text/plain', event.target.id); +} + +// Allow dragover (necessary to enable drop) +function onDragOver(event) { + event.preventDefault(); +} + +// Function called at the time of the drop +function onDrop(event) { + event.preventDefault(); + + const id = event.dataTransfer.getData('text/plain'); + const draggedElement = document.getElementById(id); + + if (draggedElement) { + const range = document.caretRangeFromPoint(event.clientX, event.clientY); + range.insertNode(draggedElement); + } +} + +// Function called at the end of the drag (can be used for cleanup or other actions) +function onDragEnd(event) { + // Optional actions at the end of the drag, e.g., removing any remaining selections + window.getSelection().removeAllRanges(); +} + // In the content script browser.runtime.onMessage.addListener((message, sender, sendResponse) => {