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.
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();
},