UI - "Filters & Triggers" - Live preview of text filters (Preview the output of the filters section in realtime) (#2612)

2026-05-01 07:10:34 +00:00 · 2024-09-28 10:40:26 +02:00
parent 367afc81e9
commit 1b625dc18a
13 changed files with 240 additions and 15 deletions
@@ -12,6 +12,54 @@ function toggleOpacity(checkboxSelector, fieldSelector, inverted) {
    checkbox.addEventListener('change', updateOpacity);
 }

+(function($) {
+    // Object to store ongoing requests by namespace
+    const requests = {};
+
+    $.abortiveSingularAjax = function(options) {
+        const namespace = options.namespace || 'default';
+
+        // Abort the current request in this namespace if it's still ongoing
+        if (requests[namespace]) {
+            requests[namespace].abort();
+        }
+
+        // Start a new AJAX request and store its reference in the correct namespace
+        requests[namespace] = $.ajax(options);
+
+        // Return the current request in case it's needed
+        return requests[namespace];
+    };
+})(jQuery);
+
+function request_textpreview_update() {
+    if (!$('body').hasClass('preview-text-enabled')) {
+        return
+    }
+
+    const data = {};
+    $('textarea:visible, input:visible').each(function () {
+        const $element = $(this); // Cache the jQuery object for the current element
+        const name = $element.attr('name'); // Get the name attribute of the element
+        data[name] = $element.is(':checkbox') ? ($element.is(':checked') ? $element.val() : undefined) : $element.val();
+    });
+
+    $.abortiveSingularAjax({
+        type: "POST",
+        url: preview_text_edit_filters_url,
+        data: data,
+        namespace: 'watchEdit'
+    }).done(function (data) {
+        $('#filters-and-triggers #text-preview-inner').text(data);
+    }).fail(function (error) {
+        if (error.statusText === 'abort') {
+            console.log('Request was aborted due to a new request being fired.');
+        } else {
+            $('#filters-and-triggers #text-preview-inner').text('There was an error communicating with the server.');
+        }
+    })
+}
+
 $(document).ready(function () {
    $('#notification-setting-reset-to-default').click(function (e) {
        $('#notification_title').val('');
@@ -27,5 +75,23 @@ $(document).ready(function () {

    toggleOpacity('#time_between_check_use_default', '#time_between_check', false);

+    const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+    $("#text-preview-inner").css('max-height', (vh-300)+"px");
+    var debounced_request_textpreview_update = request_textpreview_update.debounce(100);
+
+    $("#activate-text-preview").click(function (e) {
+        $(this).fadeOut();
+        $('body').toggleClass('preview-text-enabled')
+
+        request_textpreview_update();
+
+        $("#text-preview-refresh").click(function (e) {
+            request_textpreview_update();
+        });
+        $('textarea:visible').on('keyup blur', debounced_request_textpreview_update);
+        $('input:visible').on('keyup blur change', debounced_request_textpreview_update);
+        $("#filters-and-triggers-tab").on('click', debounced_request_textpreview_update);
+    });
+
 });

@@ -0,0 +1,45 @@
+body.preview-text-enabled {
+  #filters-and-triggers > div {
+    display: flex; /* Establishes Flexbox layout */
+    gap: 20px; /* Adds space between the columns */
+    position: relative; /* Ensures the sticky positioning is relative to this parent */
+  }
+
+  /* layout of the page */
+  #edit-text-filter, #text-preview {
+    flex: 1; /* Each column takes an equal amount of available space */
+    align-self: flex-start; /* Aligns the right column to the start, allowing it to maintain its content height */
+  }
+
+  #edit-text-filter {
+    #pro-tips {
+      display: none;
+    }
+  }
+
+  #text-preview {
+    position: sticky;
+    top: 25px;
+    display: block !important;
+  }
+
+  /* actual preview area */
+  #text-preview-inner {
+    background: var(--color-grey-900);
+    border: 1px solid var(--color-grey-600);
+    padding: 1rem;
+    color: #333;
+    font-family: "Courier New", Courier, monospace; /* Sets the font to a monospace type */
+    font-size: 12px;
+    overflow-x: scroll;
+    white-space: pre-wrap; /* Preserves whitespace and line breaks like <pre> */
+    overflow-wrap: break-word; /* Allows long words to break and wrap to the next line */
+  }
+}
+
+#activate-text-preview {
+  right: 0;
+  position: absolute;
+  z-index: 0;
+  box-shadow: 1px 1px 4px var(--color-shadow-jump);
+}
@@ -12,6 +12,7 @@
@import "parts/_darkmode";
@import "parts/_menu";
@import "parts/_love";
+@import "parts/preview_text_filter";

 body {
  color: var(--color-text);
@@ -428,6 +428,47 @@ html[data-darkmode="true"] #toggle-light-mode .icon-dark {
    fill: #ff0000 !important;
    transition: all ease 0.3s !important; }

+body.preview-text-enabled {
+  /* layout of the page */
+  /* actual preview area */ }
+  body.preview-text-enabled #filters-and-triggers > div {
+    display: flex;
+    /* Establishes Flexbox layout */
+    gap: 20px;
+    /* Adds space between the columns */
+    position: relative;
+    /* Ensures the sticky positioning is relative to this parent */ }
+  body.preview-text-enabled #edit-text-filter, body.preview-text-enabled #text-preview {
+    flex: 1;
+    /* Each column takes an equal amount of available space */
+    align-self: flex-start;
+    /* Aligns the right column to the start, allowing it to maintain its content height */ }
+  body.preview-text-enabled #edit-text-filter #pro-tips {
+    display: none; }
+  body.preview-text-enabled #text-preview {
+    position: sticky;
+    top: 25px;
+    display: block !important; }
+  body.preview-text-enabled #text-preview-inner {
+    background: var(--color-grey-900);
+    border: 1px solid var(--color-grey-600);
+    padding: 1rem;
+    color: #333;
+    font-family: "Courier New", Courier, monospace;
+    /* Sets the font to a monospace type */
+    font-size: 12px;
+    overflow-x: scroll;
+    white-space: pre-wrap;
+    /* Preserves whitespace and line breaks like <pre> */
+    overflow-wrap: break-word;
+    /* Allows long words to break and wrap to the next line */ }
+
+#activate-text-preview {
+  right: 0;
+  position: absolute;
+  z-index: 0;
+  box-shadow: 1px 1px 4px var(--color-shadow-jump); }
+
 body {
  color: var(--color-text);
  background: var(--color-background-page);