lee/changedetection.io
1
0
Fork 0
mirror of https://github.com/dgtlmoon/changedetection.io.git synced 2025-12-12 02:55:43 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

UI - Visual Selector - Multiple selections (refactor) (#2475)

Browse Source
This commit is contained in:
dgtlmoon
2024-07-09 15:07:23 +02:00
committed by GitHub
parent 1af342ef64
commit e9c4037178
1 changed files with 25 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
changedetectionio/static/js/visual-selector.js
View File

@@ -36,10 +36,12 @@ $(document).ready(() => {
function clearReset() { function clearReset() {
ctx.clearRect(0, 0, c.width, c.height); ctx.clearRect(0, 0, c.width, c.height);
if ($includeFiltersElem.val().length) { if ($includeFiltersElem.val().length) {
alert("Existing filters under the 'Filters & Triggers' tab were cleared."); alert("Existing filters under the 'Filters & Triggers' tab were cleared.");
} }
$includeFiltersElem.val(''); $includeFiltersElem.val('');
currentSelections = []; currentSelections = [];
// Means we ignore the xpaths from the scraper marked as sel.highlight_as_custom_filter (it matched a previous selector) // Means we ignore the xpaths from the scraper marked as sel.highlight_as_custom_filter (it matched a previous selector)
@@ -109,6 +111,18 @@ $(document).ready(() => {
$selectorBackgroundElem.attr('src', s); $selectorBackgroundElem.attr('src', s);
} }
function alertIfFilterNotFound() {
let existingFilters = splitToList($includeFiltersElem.val());
let sizePosXpaths = selectorData['size_pos'].map(sel => sel.xpath);
for (let filter of existingFilters) {
if (!sizePosXpaths.includes(filter)) {
alert(`One or more of your existing filters was not found and will be removed when a new filter is selected.`);
break;
}
}
}
function fetchData() { function fetchData() {
$fetchingUpdateNoticeElem.html("Fetching element data.."); $fetchingUpdateNoticeElem.html("Fetching element data..");
@@ -119,7 +133,11 @@ $(document).ready(() => {
$fetchingUpdateNoticeElem.html("Rendering.."); $fetchingUpdateNoticeElem.html("Rendering..");
selectorData = data; selectorData = data;
sortScrapedElementsBySize(); sortScrapedElementsBySize();
console.log("Reported browser width from backend: " + data['browser_width']); console.log(`Reported browser width from backend: ${data['browser_width']}`);
// Little sanity check for the user, alert them if something missing
alertIfFilterNotFound();
setScale(); setScale();
reflowSelector(); reflowSelector();
$fetchingUpdateNoticeElem.fadeOut(); $fetchingUpdateNoticeElem.fadeOut();
@@ -130,10 +148,11 @@ $(document).ready(() => {
// Assuming currentSelections is already defined and contains the selections // Assuming currentSelections is already defined and contains the selections
let uniqueSelections = new Set(currentSelections.map(sel => (sel[0] === '/' ? `xpath:${sel.xpath}` : sel.xpath))); let uniqueSelections = new Set(currentSelections.map(sel => (sel[0] === '/' ? `xpath:${sel.xpath}` : sel.xpath)));
// Convert the Set back to an array and join with newline characters if (currentSelections.length > 0) {
let textboxFilterText = Array.from(uniqueSelections).join("\n"); // Convert the Set back to an array and join with newline characters
let textboxFilterText = Array.from(uniqueSelections).join("\n");
$includeFiltersElem.val(textboxFilterText); $includeFiltersElem.val(textboxFilterText);
}
} }
function setScale() { function setScale() {
@@ -237,4 +256,4 @@ $(document).ready(() => {
xctx.strokeRect(sel.left * xScale, sel.top * yScale, sel.width * xScale, sel.height * yScale); xctx.strokeRect(sel.left * xScale, sel.top * yScale, sel.width * xScale, sel.height * yScale);
}); });
} }
}); });