Various improvements

master
Sven Slootweg 5 years ago
parent b775dae096
commit 48a3f3e951

@ -2,6 +2,6 @@
<link rel="stylesheet" href="/scraping-tool-stylesheet.css"> <link rel="stylesheet" href="/scraping-tool-stylesheet.css">
<script src="/scraping-tool-bundle.js"></script> <script src="/scraping-tool-bundle.js"></script>
<div class="___scraping___tool___overlay active"> <div class="___scraping___tool___overlay">
</div> </div>

@ -23,7 +23,7 @@
z-index: 999999990; z-index: 999999990;
} }
.___scraping___tool___overlay.active { .___scraping___tool___overlay.___scraping___tool___active {
/* background-color: rgba(240, 0, 0, 0.4); */ /* background-color: rgba(240, 0, 0, 0.4); */
font-family: sans-serif; font-family: sans-serif;
font-weight: normal; font-weight: normal;

@ -42,7 +42,7 @@ module.exports = function (body, rewriteUrl) {
$("style").get().forEach((element) => { $("style").get().forEach((element) => {
let $element = $(element); let $element = $(element);
$element.text(rewriteCss($element.text())); $element.text(rewriteCssUrls($element.text(), rewriteUrl));
}); });
$("*[style]").get().forEach((element) => { $("*[style]").get().forEach((element) => {

@ -16,28 +16,17 @@ module.exports = function generateSelector(element) {
/* FIXME: check that element != null */ /* FIXME: check that element != null */
let root = findIdRoot(element); let root = findIdRoot(element);
let segments = [ if (root === element) {
(root != null) ? `#${root.id}` : null, /* Special case: always identify by the ID alone, never suffix anything else, when the selected element *itself* has an ID. */
(element.classList.length > 0) return `#${element.id}`;
? Array.from(element.classList).map((className) => `.${className}`).join("") } else {
: element.tagName.toLowerCase() let segments = [
].filter((segment) => segment != null); (root != null) ? `#${root.id}` : null,
(element.classList.length > 0)
return segments.join(" "); ? Array.from(element.classList).map((className) => `.${className}`).join("")
: element.tagName.toLowerCase()
// console.log(root); ].filter((segment) => segment != null);
// let className = element.classList.item(0); return segments.join(" ");
}
// if (root === element) {
// return `#${root.id}`;
// } else if (root != null) {
// if (className != null) {
// return `#${root.id} .${className}`;
// } else {
// return `#${root.id} ${element.tagName}`;
// }
// } else {
// return `stuff`;
// }
}; };

@ -14,6 +14,8 @@ const elementsFromPoint = require("./elements-from-point");
const uniqueElementId = require("./unique-element-id"); const uniqueElementId = require("./unique-element-id");
const getElementPosition = require("./get-element-position"); const getElementPosition = require("./get-element-position");
/* MARKER: Implement selection refining. The refining tree does NOT necessarily match the element selection tree, since overlapping elements are not necessarily DOM ancestors of one another. For refining, *all* identifiers should be shown: tag type, ID, classes. Item selection panel should be made a two-part panel (with the inactive part header-only and grayed out?), first item selection, then refining. */
function Overlay() { function Overlay() {
let [ scrollX, setScrollX ] = React.useState(); let [ scrollX, setScrollX ] = React.useState();
let [ scrollY, setScrollY ] = React.useState(); let [ scrollY, setScrollY ] = React.useState();
@ -46,7 +48,8 @@ function Overlay() {
}); });
function clickHandler(event) { function clickHandler(event) {
if (enabledRef.current) { /* TODO: Need to find a nicer way to exclude scraping tool UI from this interception, than looking at the class prefix */
if (enabledRef.current && !event.target.className.startsWith("___scraping___tool___")) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
@ -91,7 +94,7 @@ function Overlay() {
}, [ selectedElement, scrollX, scrollY ]); }, [ selectedElement, scrollX, scrollY ]);
return ( return (
<div className="___scraping___tool___overlay active"> <div className="___scraping___tool___overlay ___scraping___tool___active">
{(hoveredPosition != null && isHovering) {(hoveredPosition != null && isHovering)
? <HoverHighlight element={hoveredElement} {... hoveredPosition} /> ? <HoverHighlight element={hoveredElement} {... hoveredPosition} />
: null : null
@ -109,7 +112,7 @@ function Overlay() {
: null : null
} }
{(isPicking) {(isPicking)
? <Picker candidates={elementList} onHover={setPickHoveredElement} /> ? <Picker candidates={elementList} onHover={setPickHoveredElement} onSelect={setSelectedElement} /> /* FIXME: setPickedElement eventually instead */
: null : null
} }
{secondaryMatches.map((element) => { {secondaryMatches.map((element) => {
@ -123,7 +126,7 @@ function Overlay() {
); );
} }
function Picker({ candidates, onHover }) { function Picker({ candidates, onHover, onSelect }) {
return ( return (
<div className="___scraping___tool___candidatePicker"> <div className="___scraping___tool___candidatePicker">
{candidates.map((candidate) => { {candidates.map((candidate) => {
@ -132,15 +135,16 @@ function Picker({ candidates, onHover }) {
element={candidate} element={candidate}
onEnter={() => onHover(candidate)} onEnter={() => onHover(candidate)}
onLeave={() => onHover(null)} onLeave={() => onHover(null)}
onClick={() => onSelect(candidate)}
/>; />;
})} })}
</div> </div>
); );
} }
function PickerCandidate({ element, onEnter, onLeave }) { function PickerCandidate({ element, onEnter, onLeave, onClick }) {
return ( return (
<div className="___scraping___tool___candidate" onMouseEnter={onEnter} onMouseLeave={onLeave}> <div className="___scraping___tool___candidate" onMouseEnter={onEnter} onMouseLeave={onLeave} onClick={onClick}>
{generateSelector(element)} {generateSelector(element)}
</div> </div>
); );

Loading…
Cancel
Save