diff --git a/changedetectionio/static/js/limit.js b/changedetectionio/static/js/limit.js deleted file mode 100644 index bc190cde..00000000 --- a/changedetectionio/static/js/limit.js +++ /dev/null @@ -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); - } - }; -}; \ No newline at end of file diff --git a/changedetectionio/static/js/plugins.js b/changedetectionio/static/js/plugins.js index b620312e..ab72c151 100644 --- a/changedetectionio/static/js/plugins.js +++ b/changedetectionio/static/js/plugins.js @@ -1,49 +1,106 @@ -(function($) { - $.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 - - // Build a map of line numbers to styles - const lineStyles = {}; - - configurations.forEach(config => { - const { color, lines: lineNumbers } = config; - lineNumbers.forEach(lineNumber => { - lineStyles[lineNumber] = color; - }); - }); +(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); + }; + }; - // Function to escape HTML characters - function escapeHtml(text) { - return text.replace(/[&<>"'`=\/]/g, function(s) { - return "&#" + s.charCodeAt(0) + ";"; - }); - } - - // Process each line - const processedLines = lines.map((line, index) => { - const lineNumber = index + 1; // Line numbers start at 1 - const escapedLine = escapeHtml(line); - const color = lineStyles[lineNumber]; - - if (color) { - // Wrap the line in a span with inline style - return `${escapedLine}`; - } else { - return escapedLine; - } - }); + /** + * 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 - // Join the lines back together - const newContent = processedLines.join('\n'); + // Build a map of line numbers to styles + const lineStyles = {}; - // Set the new content as HTML - $pre.html(newContent); - }); - }; - $.fn.miniTabs = function(tabsConfig, options) { + configurations.forEach(config => { + const {color, lines: lineNumbers} = config; + lineNumbers.forEach(lineNumber => { + lineStyles[lineNumber] = color; + }); + }); + + // Function to escape HTML characters + function escapeHtml(text) { + return text.replace(/[&<>"'`=\/]/g, function (s) { + return "&#" + s.charCodeAt(0) + ";"; + }); + } + + // Process each line + const processedLines = lines.map((line, index) => { + const lineNumber = index + 1; // Line numbers start at 1 + const escapedLine = escapeHtml(line); + const color = lineStyles[lineNumber]; + + if (color) { + // Wrap the line in a span with inline style + return `${escapedLine}`; + } else { + return escapedLine; + } + }); + + // Join the lines back together + const newContent = processedLines.join('\n'); + + // Set the new content as HTML + $pre.html(newContent); + }); + }; + $.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 = $('
', { class: settings.tabsContainerClass }).prependTo($wrapper); + const $tabsContainer = $('
', {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 diff --git a/changedetectionio/static/js/watch-settings.js b/changedetectionio/static/js/watch-settings.js index d891c4dc..f3360dbe 100644 --- a/changedetectionio/static/js/watch-settings.js +++ b/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",