hash change cleanups

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):
                     <span class="pure-form-message-inline">For example, If the product is $1,000 USD originally, <strong>2%</strong> would mean it has to change more than $20 since the first check.</span><br>
                 </fieldset>
                 <fieldset class="pure-group price-change-minmax">
-                        {% 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) }}
+                        <span class="pure-form-message-inline">Override the automatic price metadata reader with this custom select from the <a href="#visualselector">Visual Selector</a>, in the case that the automatic detection was incorrect.</span><br>
                 </fieldset>                                  
             </div>
         </fieldset>

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

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) {

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