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

feat: handle a & img tags attribute click selection

Browse Source
This commit is contained in:
karishmas6
2024-08-21 23:38:00 +05:30
parent 9d75dd156d
commit a5db763295
1 changed files with 33 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/organisms/BrowserWindow.tsx
View File

@@ -120,7 +120,7 @@ export const BrowserWindow = () => {
const canvasRect = canvasRef.current.getBoundingClientRect(); const canvasRect = canvasRef.current.getBoundingClientRect();
const clickX = e.clientX - canvasRect.left; const clickX = e.clientX - canvasRect.left;
const clickY = e.clientY - canvasRect.top; const clickY = e.clientY - canvasRect.top;
const highlightRect = highlighterData.rect; const highlightRect = highlighterData.rect;
if ( if (
clickX >= highlightRect.left && clickX >= highlightRect.left &&
@@ -128,36 +128,38 @@ export const BrowserWindow = () => {
clickY >= highlightRect.top && clickY >= highlightRect.top &&
clickY <= highlightRect.bottom clickY <= highlightRect.bottom
) { ) {
const options = getAttributeOptions(highlighterData.elementInfo?.tagName || '', highlighterData.elementInfo);
if (getText === true) { if (getText === true) {
const options = getAttributeOptions(highlighterData.elementInfo?.tagName || '', highlighterData.elementInfo); if (options.length === 1) {
if (options.length > 1) { // Directly use the available attribute if only one option is present
const attribute = options[0].value;
const data = attribute === 'href' ? highlighterData.elementInfo?.url || '' :
attribute === 'src' ? highlighterData.elementInfo?.imageUrl || '' :
highlighterData.elementInfo?.innerText || '';
addTextStep('', data, {
selector: highlighterData.selector,
tag: highlighterData.elementInfo?.tagName,
attribute
});
} else {
// Show the modal if there are multiple options
setAttributeOptions(options); setAttributeOptions(options);
setSelectedElement({ setSelectedElement({
selector: highlighterData.selector, selector: highlighterData.selector,
info: highlighterData.elementInfo info: highlighterData.elementInfo
}); });
setShowAttributeModal(true); setShowAttributeModal(true);
} else {
addTextStep('', highlighterData.elementInfo?.innerText || '', {
selector: highlighterData.selector,
tag: highlighterData.elementInfo?.tagName,
attribute: 'innerText'
});
} }
} }
if (getList === true && !listSelector) { if (getList === true && !listSelector) {
setListSelector(highlighterData.selector); setListSelector(highlighterData.selector);
} else if (getList === true && listSelector) { } else if (getList === true && listSelector) {
const options = getAttributeOptions(highlighterData.elementInfo?.tagName || '', highlighterData.elementInfo); if (options.length === 1) {
if (options.length > 1) { // Handle directly without showing the modal
setAttributeOptions(options); const attribute = options[0].value;
setSelectedElement({
selector: highlighterData.selector,
info: highlighterData.elementInfo
});
setShowAttributeModal(true);
} else {
const newField: TextStep = { const newField: TextStep = {
id: Date.now(), id: Date.now(),
type: 'text', type: 'text',
@@ -166,10 +168,10 @@ export const BrowserWindow = () => {
selectorObj: { selectorObj: {
selector: highlighterData.selector, selector: highlighterData.selector,
tag: highlighterData.elementInfo?.tagName, tag: highlighterData.elementInfo?.tagName,
attribute: 'innerText' attribute
} }
}; };
setFields(prevFields => { setFields(prevFields => {
const updatedFields = { const updatedFields = {
...prevFields, ...prevFields,
@@ -177,16 +179,24 @@ export const BrowserWindow = () => {
}; };
return updatedFields; return updatedFields;
}); });
if (listSelector) { if (listSelector) {
addListStep(listSelector, { ...fields, [newField.label]: newField }); addListStep(listSelector, { ...fields, [newField.label]: newField });
} }
} else {
// Show the modal if there are multiple options
setAttributeOptions(options);
setSelectedElement({
selector: highlighterData.selector,
info: highlighterData.elementInfo
});
setShowAttributeModal(true);
} }
} }
} }
} }
}; };
const handleAttributeSelection = (attribute: string) => { const handleAttributeSelection = (attribute: string) => {
if (selectedElement) { if (selectedElement) {