Handle tabbing better

changedetectionio/static/js/visual-selector.js

@@ -1,30 +1,53 @@
+// Horrible proof of concept code :)
+
 $(document).ready(function() {
 
+    $('#visualselector-tab').click(function () {
+        bootstrap_visualselector();
+    });
+
+    if(!window.location.hash || window.location.hash != '#visualselector') {
+        $("img#selector-background").attr('src','');
+        return;
+    }
+
+    bootstrap_visualselector();
 
     var current_selected_i;
     var state_clicked=false;
 
-    var c = document.getElementById("selector-canvas");
+    var c;
 
     // greyed out fill context
-    var xctx = c.getContext("2d");
+    var xctx;
     // redline highlight context
-    var ctx = c.getContext("2d");
+    var ctx;
 
-    var current_default_xpath=$("#css_filter").val();
+    var current_default_xpath;
     var x_scale=1;
     var y_scale=1;
-    var selector_image = document.getElementById("selector-background");
+    var selector_image;
     var selector_image_rect;
     var vh;
     var selector_data;
 
 
-    if ( $("img#selector-background").is(':visible') ) {
-        // bootstrap it, this will trigger everything else
-        $("img#selector-background").bind('load', function () {
-           fetch_data();
-        }).attr("src", screenshot_url);
+    function bootstrap_visualselector() {
+        if ( 1 ) {
+            // bootstrap it, this will trigger everything else
+            $("img#selector-background").bind('load', function () {
+
+               c = document.getElementById("selector-canvas");
+                // greyed out fill context
+               xctx = c.getContext("2d");
+                // redline highlight context
+               ctx = c.getContext("2d");
+               current_default_xpath =$("#css_filter").val();
+               fetch_data();
+               $('#selector-canvas').off("mousemove");
+               // screenshot_url defined in the edit.html template
+            }).attr("src", screenshot_url);
+        }
     }
 
     function fetch_data() {
@@ -59,10 +82,9 @@ $(document).ready(function() {
 
       // some things to check if the scaling doesnt work
       // - that the widths/sizes really are about the actual screen size cat elements.json |grep -o width......|sort|uniq
-
+      selector_image = $("img#selector-background")[0];
       selector_image_rect = selector_image.getBoundingClientRect();
 
-
       // make the canvas the same size as the image
       $('#selector-canvas').attr('height', selector_image_rect.height);
       $('#selector-canvas').attr('width', selector_image_rect.width);
@@ -101,14 +123,10 @@ $(document).ready(function() {
         if(!found) {
           alert("unfortunately your existing CSS/xPath Filter was no longer found!");
         }
-
       }
 
 
-
-
       $('#selector-canvas').bind('mousemove', function (e) {
-
         if(state_clicked) {
           return;
         }

changedetectionio/templates/edit.html

@@ -6,10 +6,12 @@
 <script>
     const notification_base_url="{{url_for('ajax_callback_send_notification_test')}}";
     const watch_visual_selector_data_url="{{url_for('static_content', group='visual_selector_data', filename=uuid)}}";
+    const screenshot_url="{{url_for('static_content', group='screenshot', filename=uuid)}}";
+
 {% if emailprefix %}
     const email_notification_prefix=JSON.parse('{{ emailprefix|tojson }}');
 {% endif %}
-    const screenshot_url="{{url_for('static_content', group='screenshot', filename=uuid)}}";
+
 </script>
 <script type="text/javascript" src="{{url_for('static_content', group='js', filename='watch-settings.js')}}" defer></script>
 <script type="text/javascript" src="{{url_for('static_content', group='js', filename='notifications.js')}}" defer></script>
@@ -22,9 +24,9 @@
         <ul>
             <li class="tab" id="default-tab"><a href="#general">General</a></li>
             <li class="tab"><a href="#request">Request</a></li>
-            <li class="tab"><a href="#visualselector">Visual Selector</a></li>
+            <li class="tab"><a id="visualselector-tab" href="#visualselector">Visual Selector</a></li>
             <li class="tab"><a href="#filters-and-triggers">Filters &amp; Triggers</a></li>
-            <li class="tab"><a id="visualselector-tab" href="#notifications">Notifications</a></li>
+            <li class="tab"><a href="#notifications">Notifications</a></li>
         </ul>
     </div>