Small tidyup

changedetectionio/static/js/limit.js

@@ -1,56 +0,0 @@
-/**
- * debounce
- * @param {integer} milliseconds This param indicates the number of milliseconds
- *     to wait after the last call before calling the original function.
- * @param {object} What "this" refers to in the returned function.
- * @return {function} This returns a function that when called will wait the
- *     indicated number of milliseconds after the last call before
- *     calling the original function.
- */
-Function.prototype.debounce = function (milliseconds, context) {
-    var baseFunction = this,
-        timer = null,
-        wait = milliseconds;
-
-    return function () {
-        var self = context || this,
-            args = arguments;
-
-        function complete() {
-            baseFunction.apply(self, args);
-            timer = null;
-        }
-
-        if (timer) {
-            clearTimeout(timer);
-        }
-
-        timer = setTimeout(complete, wait);
-    };
-};
-
-/**
-* throttle
-* @param {integer} milliseconds This param indicates the number of milliseconds
-*     to wait between calls before calling the original function.
-* @param {object} What "this" refers to in the returned function.
-* @return {function} This returns a function that when called will wait the
-*     indicated number of milliseconds between calls before
-*     calling the original function.
-*/
-Function.prototype.throttle = function (milliseconds, context) {
-    var baseFunction = this,
-        lastEventTimestamp = null,
-        limit = milliseconds;
-
-    return function () {
-        var self = context || this,
-            args = arguments,
-            now = Date.now();
-
-        if (!lastEventTimestamp || now - lastEventTimestamp >= limit) {
-            lastEventTimestamp = now;
-            baseFunction.apply(self, args);
-        }
-    };
-};

changedetectionio/static/js/plugins.js

@@ -1,6 +1,63 @@
-(function($) {
-  $.fn.highlightLines = function(configurations) {
-    return this.each(function() {
+(function ($) {
+    /**
+     * debounce
+     * @param {integer} milliseconds This param indicates the number of milliseconds
+     *     to wait after the last call before calling the original function.
+     * @param {object} What "this" refers to in the returned function.
+     * @return {function} This returns a function that when called will wait the
+     *     indicated number of milliseconds after the last call before
+     *     calling the original function.
+     */
+    Function.prototype.debounce = function (milliseconds, context) {
+        var baseFunction = this,
+            timer = null,
+            wait = milliseconds;
+
+        return function () {
+            var self = context || this,
+                args = arguments;
+
+            function complete() {
+                baseFunction.apply(self, args);
+                timer = null;
+            }
+
+            if (timer) {
+                clearTimeout(timer);
+            }
+
+            timer = setTimeout(complete, wait);
+        };
+    };
+
+    /**
+     * throttle
+     * @param {integer} milliseconds This param indicates the number of milliseconds
+     *     to wait between calls before calling the original function.
+     * @param {object} What "this" refers to in the returned function.
+     * @return {function} This returns a function that when called will wait the
+     *     indicated number of milliseconds between calls before
+     *     calling the original function.
+     */
+    Function.prototype.throttle = function (milliseconds, context) {
+        var baseFunction = this,
+            lastEventTimestamp = null,
+            limit = milliseconds;
+
+        return function () {
+            var self = context || this,
+                args = arguments,
+                now = Date.now();
+
+            if (!lastEventTimestamp || now - lastEventTimestamp >= limit) {
+                lastEventTimestamp = now;
+                baseFunction.apply(self, args);
+            }
+        };
+    };
+
+    $.fn.highlightLines = function (configurations) {
+        return this.each(function () {
             const $pre = $(this);
             const textContent = $pre.text();
             const lines = textContent.split(/\r?\n/); // Handles both \n and \r\n line endings
@@ -9,7 +66,7 @@
             const lineStyles = {};
 
             configurations.forEach(config => {
-        const { color, lines: lineNumbers } = config;
+                const {color, lines: lineNumbers} = config;
                 lineNumbers.forEach(lineNumber => {
                     lineStyles[lineNumber] = color;
                 });
@@ -17,7 +74,7 @@
 
             // Function to escape HTML characters
             function escapeHtml(text) {
-        return text.replace(/[&<>"'`=\/]/g, function(s) {
+                return text.replace(/[&<>"'`=\/]/g, function (s) {
                     return "&#" + s.charCodeAt(0) + ";";
                 });
             }
@@ -43,7 +100,7 @@
             $pre.html(newContent);
         });
     };
-   $.fn.miniTabs = function(tabsConfig, options) {
+    $.fn.miniTabs = function (tabsConfig, options) {
         const settings = {
             tabClass: 'minitab',
             tabsContainerClass: 'minitabs',
@@ -51,10 +108,10 @@
             ...(options || {})
         };
 
-        return this.each(function() {
+        return this.each(function () {
             const $wrapper = $(this);
             const $contents = $wrapper.find('div[id]').hide();
-            const $tabsContainer = $('<div>', { class: settings.tabsContainerClass }).prependTo($wrapper);
+            const $tabsContainer = $('<div>', {class: settings.tabsContainerClass}).prependTo($wrapper);
 
             // Generate tabs
             Object.entries(tabsConfig).forEach(([tabTitle, contentSelector], index) => {
@@ -69,7 +126,7 @@
             });
 
             // Tab click event
-            $tabsContainer.on('click', `.${settings.tabClass}`, function(e) {
+            $tabsContainer.on('click', `.${settings.tabClass}`, function (e) {
                 e.preventDefault();
                 const $tab = $(this);
                 const target = $tab.data('target');
@@ -88,7 +145,7 @@
     // Object to store ongoing requests by namespace
     const requests = {};
 
-    $.abortiveSingularAjax = function(options) {
+    $.abortiveSingularAjax = function (options) {
         const namespace = options.namespace || 'default';
 
         // Abort the current request in this namespace if it's still ongoing

changedetectionio/static/js/watch-settings.js

@@ -72,16 +72,13 @@ $(document).ready(function () {
     $("#text-preview-inner").css('max-height', (vh-300)+"px");
     $("#text-preview-before-inner").css('max-height', (vh-300)+"px");
 
-    // Realtime preview of 'Filters & Text' setup
-    var debounced_request_textpreview_update = request_textpreview_update.debounce(100);
-
     $("#activate-text-preview").click(function (e) {
         $('body').toggleClass('preview-text-enabled')
         request_textpreview_update();
         const method = $('body').hasClass('preview-text-enabled') ? 'on' : 'off';
-        $('textarea:visible')[method]('keyup blur', debounced_request_textpreview_update);
-        $('input:visible')[method]('keyup blur change', debounced_request_textpreview_update);
-        $("#filters-and-triggers-tab")[method]('click', debounced_request_textpreview_update);
+        $('textarea:visible')[method]('keyup blur', request_textpreview_update.throttle(1000));
+        $('input:visible')[method]('keyup blur change', request_textpreview_update.throttle(1000));
+        $("#filters-and-triggers-tab")[method]('click', request_textpreview_update.throttle(1000));
     });
     $('.minitabs-wrapper').miniTabs({
         "Content after filters": "#text-preview-inner",