vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dom rendering pickers

Browse Source
This commit is contained in:
Rohit
2025-06-23 14:37:48 +05:30
parent 776339bbed
commit bb387d8759
3 changed files with 150 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/pickers/DatePicker.tsx
View File

@@ -16,12 +16,58 @@ const DatePicker: React.FC<DatePickerProps> = ({ coordinates, selector, onClose
setSelectedDate(e.target.value);
};
const updateDOMElement = (selector: string, value: string) => {
try {
let iframeElement = document.querySelector('#dom-browser-iframe') as HTMLIFrameElement;
if (!iframeElement) {
iframeElement = document.querySelector('#browser-window iframe') as HTMLIFrameElement;
}
if (!iframeElement) {
const browserWindow = document.querySelector('#browser-window');
if (browserWindow) {
iframeElement = browserWindow.querySelector('iframe') as HTMLIFrameElement;
}
}
if (!iframeElement) {
console.error('Could not find iframe element for DOM update');
return;
}
const iframeDoc = iframeElement.contentDocument;
if (!iframeDoc) {
console.error('Could not access iframe document');
return;
}
const element = iframeDoc.querySelector(selector) as HTMLInputElement;
if (element) {
element.value = value;
const changeEvent = new Event('change', { bubbles: true });
element.dispatchEvent(changeEvent);
const inputEvent = new Event('input', { bubbles: true });
element.dispatchEvent(inputEvent);
} else {
console.warn(`Could not find element with selector: ${selector}`);
}
} catch (error) {
console.error('Error updating DOM element:', error);
}
};
const handleConfirm = () => {
if (socket && selectedDate) {
socket.emit('input:date', {
selector,
value: selectedDate
});
updateDOMElement(selector, selectedDate);
onClose();
}
};

50
src/components/pickers/DateTimeLocalPicker.tsx
View File

@@ -16,12 +16,58 @@ const DateTimeLocalPicker: React.FC<DateTimeLocalPickerProps> = ({ coordinates,
setSelectedDateTime(e.target.value);
};
const updateDOMElement = (selector: string, value: string) => {
try {
let iframeElement = document.querySelector('#dom-browser-iframe') as HTMLIFrameElement;
if (!iframeElement) {
iframeElement = document.querySelector('#browser-window iframe') as HTMLIFrameElement;
}
if (!iframeElement) {
const browserWindow = document.querySelector('#browser-window');
if (browserWindow) {
iframeElement = browserWindow.querySelector('iframe') as HTMLIFrameElement;
}
}
if (!iframeElement) {
console.error('Could not find iframe element for DOM update');
return;
}
const iframeDoc = iframeElement.contentDocument;
if (!iframeDoc) {
console.error('Could not access iframe document');
return;
}
const element = iframeDoc.querySelector(selector) as HTMLInputElement;
if (element) {
element.value = value;
const changeEvent = new Event('change', { bubbles: true });
element.dispatchEvent(changeEvent);
const inputEvent = new Event('input', { bubbles: true });
element.dispatchEvent(inputEvent);
} else {
console.warn(`Could not find element with selector: ${selector}`);
}
} catch (error) {
console.error('Error updating DOM element:', error);
}
};
const handleConfirm = () => {
if (socket && selectedDateTime) {
socket.emit('input:datetime-local', {
selector,
value: selectedDateTime
});
updateDOMElement(selector, selectedDateTime);
onClose();
}
};
@@ -58,8 +104,8 @@ const DateTimeLocalPicker: React.FC<DateTimeLocalPickerProps> = ({ coordinates,
onClick={handleConfirm}
disabled={!selectedDateTime}
className={`px-3 py-1 text-sm rounded ${selectedDateTime
? 'bg-blue-500 text-white hover:bg-blue-600'
: 'bg-gray-300 text-gray-500 cursor-not-allowed'
? 'bg-blue-500 text-white hover:bg-blue-600'
: 'bg-gray-300 text-gray-500 cursor-not-allowed'
}`}
>
Confirm

56
src/components/pickers/Dropdown.tsx
View File

@@ -18,9 +18,65 @@ const Dropdown = ({ coordinates, selector, options, onClose }: DropdownProps) =>
const { socket } = useSocketStore();
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
const updateDOMElement = (selector: string, value: string) => {
try {
let iframeElement = document.querySelector('#dom-browser-iframe') as HTMLIFrameElement;
if (!iframeElement) {
iframeElement = document.querySelector('#browser-window iframe') as HTMLIFrameElement;
}
if (!iframeElement) {
const browserWindow = document.querySelector('#browser-window');
if (browserWindow) {
iframeElement = browserWindow.querySelector('iframe') as HTMLIFrameElement;
}
}
if (!iframeElement) {
console.error('Could not find iframe element for DOM update');
return;
}
const iframeDoc = iframeElement.contentDocument;
if (!iframeDoc) {
console.error('Could not access iframe document');
return;
}
const selectElement = iframeDoc.querySelector(selector) as HTMLSelectElement;
if (selectElement) {
selectElement.value = value;
const optionElements = selectElement.querySelectorAll('option');
optionElements.forEach(option => {
if (option.value === value) {
option.selected = true;
option.setAttribute('selected', 'selected');
} else {
option.selected = false;
option.removeAttribute('selected');
}
});
const changeEvent = new Event('change', { bubbles: true });
selectElement.dispatchEvent(changeEvent);
const inputEvent = new Event('input', { bubbles: true });
selectElement.dispatchEvent(inputEvent);
} else {
console.warn(`Could not find select element with selector: ${selector}`);
}
} catch (error) {
console.error('Error updating DOM select element:', error);
}
};
const handleSelect = (value: string) => {
if (socket) {
socket.emit('input:dropdown', { selector, value });
updateDOMElement(selector, value);
}
onClose();
};