diff --git a/changedetectionio/processors/restock_diff/forms.py b/changedetectionio/processors/restock_diff/forms.py index 07f44b1a0..b44adff45 100644 --- a/changedetectionio/processors/restock_diff/forms.py +++ b/changedetectionio/processors/restock_diff/forms.py @@ -27,7 +27,7 @@ class RestockSettingsForm(Form): validators.NumberRange(min=0, max=100, message="Should be between 0 and 100"), ], render_kw={"placeholder": "0%", "size": "5"}) - price_change_custom_include_filters = StringListField('Override automatic price detection with these selectors', [ValidateCSSJSONXPATHInput()], default='') + price_change_custom_include_filters = StringListField('Override automatic price detection with this selector', [ValidateCSSJSONXPATHInput()], default='') follow_price_changes = BooleanField('Follow price changes', default=True) @@ -78,13 +78,8 @@ class processor_settings_form(processor_text_json_diff_form): For example, If the product is $1,000 USD originally, 2% would mean it has to change more than $20 since the first check.
- {% set field = render_field(form.restock_settings.price_change_custom_include_filters, - rows=5, - placeholder="#example -xpath://body/div/span[contains(@class, 'example-class')]", - class="m-d") - %} - {{ field }} + {{ render_field(form.restock_settings.price_change_custom_include_filters) }} + Override the automatic price metadata reader with this custom select from the Visual Selector, in the case that the automatic detection was incorrect.
diff --git a/changedetectionio/static/js/restock_diff.js b/changedetectionio/static/js/restock_diff.js index e4876e374..25d92d82a 100644 --- a/changedetectionio/static/js/restock_diff.js +++ b/changedetectionio/static/js/restock_diff.js @@ -9,6 +9,20 @@ $(document).ready(function () { $includeFiltersElem: $('#restock_settings-price_change_custom_include_filters') }); } + + // Function to check and bootstrap visual selector based on hash + function checkAndBootstrapVisualSelector() { + if (visualSelectorAPI) { + if (window.location.hash && window.location.hash.includes('visualselector')) { + $('img#selector-background').off('load'); + visualSelectorAPI.bootstrap(); + } else { + // Shutdown when navigating away from visualselector + visualSelectorAPI.shutdown(); + } + } + } + // Bootstrap the visual selector when the tab is clicked $('#visualselector-tab').click(function () { if (visualSelectorAPI) { @@ -16,5 +30,13 @@ $(document).ready(function () { visualSelectorAPI.bootstrap(); } }); + + // Check on page load if hash contains 'visualselector' + checkAndBootstrapVisualSelector(); + + // Listen for hash changes (when anchor changes) + $(window).on('hashchange', function() { + checkAndBootstrapVisualSelector(); + }); }); diff --git a/changedetectionio/static/js/text_json_diff.js b/changedetectionio/static/js/text_json_diff.js index d6f7091ab..5e4e91ac6 100644 --- a/changedetectionio/static/js/text_json_diff.js +++ b/changedetectionio/static/js/text_json_diff.js @@ -54,6 +54,19 @@ $(document).ready(function () { visualSelectorDataUrl: watch_visual_selector_data_url }); + // Function to check and bootstrap visual selector based on hash + function checkAndBootstrapVisualSelector() { + if (visualSelectorAPI) { + if (window.location.hash && window.location.hash.includes('visualselector')) { + $('img#selector-background').off('load'); + visualSelectorAPI.bootstrap(); + } else { + // Shutdown when navigating away from visualselector + visualSelectorAPI.shutdown(); + } + } + } + // Bootstrap the visual selector when the tab is clicked $('#visualselector-tab').click(function() { if (visualSelectorAPI) { @@ -61,6 +74,14 @@ $(document).ready(function () { visualSelectorAPI.bootstrap(); } }); + + // Check on page load if hash contains 'visualselector' + checkAndBootstrapVisualSelector(); + + // Listen for hash changes (when anchor changes) + $(window).on('hashchange', function() { + checkAndBootstrapVisualSelector(); + }); } $('#notification-setting-reset-to-default').click(function (e) { diff --git a/changedetectionio/static/js/visual-selector.js b/changedetectionio/static/js/visual-selector.js index 2db12d7ec..ffd5a34a9 100644 --- a/changedetectionio/static/js/visual-selector.js +++ b/changedetectionio/static/js/visual-selector.js @@ -311,15 +311,6 @@ // Initialize event handlers initializeEventHandlers(); - // Check if we should auto-bootstrap based on URL hash - if (window.location.hash && window.location.hash === '#visualselector') { - // Auto-bootstrap if on the visualselector tab - setTimeout(() => bootstrapVisualSelector(), 100); - } else { - // Clear the background image if not on the visualselector tab - $selectorBackgroundElem.attr('src', ''); - } - // Return public API return { bootstrap: function() { @@ -327,6 +318,20 @@ runInClearMode = false; bootstrapVisualSelector(); }, + shutdown: function() { + // Clear the background image and canvas when navigating away + $selectorBackgroundElem.attr('src', ''); + if (c && ctx) { + ctx.clearRect(0, 0, c.width, c.height); + } + if (c && xctx) { + xctx.clearRect(0, 0, c.width, c.height); + } + // Unbind mouse events on canvas + $selectorCanvasElem.off('mousemove mousedown mouseleave'); + // Unbind background image events + $selectorBackgroundElem.off('load error'); + }, clear: function() { clearReset(); },