From 8f166a1b2a74126dab0243ec2444a749e9c1f554 Mon Sep 17 00:00:00 2001
From: Maik Derstappen <md@derico.de>
Date: Sat, 11 Jul 2026 19:42:16 +0000
Subject: [PATCH] tech(pat-querystring): lazify pattern, split registration
 from implementation

pat-querystring contributed ~33KB src to the eager patterns chunk on every
page, though the widget only appears on Collection edit forms and the
querystring criteria UI. It also statically imported the contentbrowser
pattern, dragging an eager edge into pat-contentbrowser.

Split it into a thin registration module and querystring--implementation.js
(holding the widget and the contentbrowser import). The implementation is
grafted onto the single pattern instance in init(), so external consumers
that reach into instance state (pat-structure's textfilter reads
this.queryString.$sortOn/$sortOrder) keep working. Public options and
emitted markup are unchanged.

The implementation and its contentbrowser edge now load only on pages with a
.pat-querystring element.
---
 .../querystring--implementation.js            | 930 +++++++++++++++++
 src/pat/querystring/querystring.js            | 934 +-----------------
 2 files changed, 943 insertions(+), 921 deletions(-)
 create mode 100644 src/pat/querystring/querystring--implementation.js

diff --git a/src/pat/querystring/querystring--implementation.js b/src/pat/querystring/querystring--implementation.js
new file mode 100644
index 000000000..94279c4ff
--- /dev/null
+++ b/src/pat/querystring/querystring--implementation.js
@@ -0,0 +1,930 @@
+import $ from "jquery";
+import _ from "underscore";
+import _t from "../../core/i18n-wrapper";
+import utils from "../../core/utils";
+import { Pattern as ContentbrowserPattern } from "../contentbrowser/contentbrowser";
+
+
+var Criteria = function () {
+    this.init.apply(this, arguments);
+};
+Criteria.prototype = {
+    defaults: {
+        indexWidth: "20em",
+        remove: "",
+        classBetweenDtName: "querystring-criteria-betweendt",
+        classWrapperName: "querystring-criteria-wrapper",
+        classIndexName: "querystring-criteria-index",
+        classOperatorName: "querystring-criteria-operator",
+        classValueName: "querystring-criteria-value",
+        classRemoveName: "querystring-criteria-remove",
+        classResultsName: "querystring-criteria-results",
+        classClearName: "querystring-criteria-clear",
+        classDepthName: "querystring-criteria-depth",
+    },
+    init: function (
+        $el,
+        app,
+        options,
+        indexes,
+        index,
+        operator,
+        value,
+        baseUrl,
+        patternDateOptions,
+        patternAjaxSelectOptions,
+        patternRelateditemsOptions
+    ) {
+        var self = this;
+        self.app = app;
+
+        self.options = {
+            ...self.defaults,
+            ...options,
+        };
+        self.indexes = indexes;
+        self.indexGroups = {};
+        self.baseUrl = baseUrl;
+        self.advanced = false;
+        self.initial = value;
+        // create wrapper criteria and append it to DOM
+        self.$wrapper = $("<div/>")
+            .addClass(self.options.classWrapperName)
+            .appendTo($el);
+
+        // Sub widgets options
+        self.patternDateOptions = patternDateOptions || {};
+        self.patternAjaxSelectOptions = patternAjaxSelectOptions || {};
+        self.patternRelateditemsOptions = patternRelateditemsOptions || {};
+        // Defaults
+        self.patternAjaxSelectOptions = {
+            width: "250px",
+            ...self.patternAjaxSelectOptions,
+        };
+        self.patternRelateditemsOptions = {
+            vocabularyUrl:
+                self.baseUrl +
+                "@@getVocabulary?name=plone.app.vocabularies.Catalog&field=relatedItems",
+            width: "20rem",
+            ...self.patternRelateditemsOptions,
+        };
+        // Force set
+        self.patternRelateditemsOptions["maximumSelectionSize"] = 1;
+
+        // Remove button
+        self.$remove = $("<div>" + self.options.remove + "</div>")
+            .addClass(self.options.classRemoveName)
+            .appendTo(self.$wrapper)
+            .on("click", function (e) {
+                e.stopPropagation();
+                self.remove();
+            });
+
+        // Index selection
+        self.$index = $("<select><option></option></select>").attr(
+            "placeholder",
+            _t("Select criteria")
+        );
+
+        // list of indexes
+        for (const value in self.indexes) {
+            let options = self.indexes[value];
+            if (options.enabled) {
+                if (!self.indexGroups[options.group]) {
+                    self.indexGroups[options.group] = $("<optgroup/>")
+                        .attr("label", options.group)
+                        .appendTo(self.$index);
+                }
+                self.indexGroups[options.group].append(
+                    $("<option/>").attr("value", value).html(options.title)
+                );
+            }
+        }
+
+        // attach index select to DOM
+        self.$wrapper.append(
+            $("<div/>").addClass(self.options.classIndexName).append(self.$index)
+        );
+
+        // add blink (select2)
+        self.$index.patternSelect2({
+            width: self.options.indexWidth,
+            placeholder: _t("Select criteria"),
+        });
+        self.$index.on("change", function () {
+            // Read the value from the element rather than from the event's
+            // `val` property. Select2 v3 fires a jQuery `change` event carrying
+            // a `val` property, but pat-select2 also re-dispatches a native
+            // `change` event (for native listeners), which jQuery's `change`
+            // handler catches as well. On that second invocation `e.val` would
+            // be undefined. Reading `self.$index.val()` is correct in both cases.
+            self.removeValue();
+            self.createOperator(self.$index.val());
+            self.createClear();
+            self.trigger("index-changed");
+        });
+
+        if (typeof index !== "undefined") {
+            self.$index.val(index);
+            self.createOperator(index, operator, value);
+            self.createClear();
+        }
+
+        self.trigger("create-criteria");
+    },
+    appendOperators: function (index) {
+        var self = this;
+
+        self.$operator = $("<select/>");
+
+        if (self.indexes[index]) {
+            _.each(self.indexes[index].operations, function (value) {
+                var options = self.indexes[index].operators[value];
+                $("<option/>")
+                    .attr("value", value)
+                    .html(options.title)
+                    .appendTo(self.$operator);
+            });
+        }
+
+        // attach operators select to DOM
+        self.$wrapper.append(
+            $("<div/>").addClass(self.options.classOperatorName).append(self.$operator)
+        );
+
+        // add blink (select2)
+        self.$operator.patternSelect2({ width: "10em" });
+        self.$operator.on("change", function () {
+            self.createValue(index);
+            self.createClear();
+            self.trigger("operator-changed");
+        });
+    },
+    convertPathOperators: function (oval) {
+        var self = this;
+
+        if (self.advanced) {
+            return oval;
+        }
+        //This allows us to use the same query operation for multiple dropdown options.
+        oval = oval.replace("advanced", "relativePath").replace("path", "relativePath");
+        return oval;
+    },
+    createPathOperators: function () {
+        var self = this;
+
+        if (self.advanced) {
+            self.resetPathOperators();
+            return;
+        }
+        var newOperator = "plone.app.querystring.operation.string.advanced";
+
+        if (typeof self.indexes.path.operators[newOperator] === "undefined") {
+            self.indexes.path.operations.push(newOperator);
+            self.indexes.path.operators[newOperator] = {
+                title: "Advanced",
+                widget: "AdvancedPathWidget",
+                description: "Enter a custom path string",
+                operation: "plone.app.querystring.queryparser._relativePath",
+            };
+        }
+
+        for (const key in self.indexes.path.operators) {
+            var options = self.indexes.path.operators[key];
+            if (key.indexOf("absolute") > 0) {
+                options.title = "Custom";
+            } else if (key.indexOf("relative") > 0) {
+                options.title = "Parent (../)";
+            } else if (key.indexOf("advanced") > 0) {
+                options.title = "Advanced Mode";
+            } else {
+                options.title = "Current (./)";
+                options.widget = "RelativePathWidget";
+            }
+        };
+    },
+    resetPathOperators: function () {
+        var self = this;
+        for (const key in self.indexes.path.operators) {
+            var options = self.indexes.path.operators[key];
+            if (key.indexOf("absolute") > 0) {
+                options.title = "Absolute Path";
+            } else if (key.indexOf("relative") > 0) {
+                options.title = "Relative Path";
+            } else if (key.indexOf("advanced") > 0) {
+                options.title = "Simple Mode";
+            } else {
+                options.title = "Navigation Path";
+                options.widget = "ReferenceWidget";
+            }
+        };
+
+        return;
+    },
+    createOperator: function (index, operator, value) {
+        var self = this;
+
+        self.removeOperator();
+        self.createPathOperators();
+
+        // We must test if we have a "simple" path or an "advanced" one and change the widgets accordingly
+        if (
+            index === "path" &&
+            value &&
+            value !== ".::1" &&
+            value !== "..::1" &&
+            !value.match(/^[0-9a-f\-]{32,36}::-?[0-9]+$/)
+        ) {
+            self.advanced = true;
+            self.resetPathOperators();
+        }
+
+        self.appendOperators(index);
+
+        if (typeof operator === "undefined") {
+            operator = self.$operator.val();
+        }
+
+        self.$operator.val(operator);
+        self.createValue(index, value);
+
+        self.trigger("create-operator");
+    },
+    createValue: function (index, value) {
+        var self = this,
+            widget = self.indexes[index].operators[self.$operator.val()].widget,
+            $wrapper = $("<div/>")
+                .addClass(self.options.classValueName)
+                .appendTo(self.$wrapper);
+
+        self.removeValue();
+
+        var createDepthSelect = function (selected) {
+            // remove previous depth-select-box items
+            $wrapper.remove(".depth-select-box");
+            var select =
+                "<div class='depth-select-box'>" +
+                "<label for='depth-select'>Depth</label>" +
+                "<select name='depth-select' class='" +
+                self.options.classDepthName +
+                "'>" +
+                "<option value='-1' selected='selected'>Unlimited</option>";
+
+            for (var i = 0; i <= 10; i += 1) {
+                select += "<option value=" + i + " ";
+                if ("" + i === selected) {
+                    select += "selected='selected' ";
+                }
+                select += ">" + i + "</option>";
+            }
+            select += "</select>" + "</div>";
+
+            return $(select).on("change", function () {
+                self.trigger("depth-changed");
+            });
+        };
+
+        if (widget === "StringWidget") {
+            self.$value = $('<input type="text"/>')
+                .addClass(self.options.classValueName + "-" + widget)
+                .val(value)
+                .appendTo($wrapper)
+                .on("change", function () {
+                    self.trigger("value-changed");
+                });
+        } else if (widget === "DateWidget") {
+            self.$value = $('<input type="date"/>')
+                .addClass(self.options.classValueName + "-" + widget)
+                .val(value)
+                .appendTo($wrapper)
+                .on("change", function () {
+                    self.trigger("value-changed");
+                });
+        } else if (widget === "DateRangeWidget") {
+            var startwrap = $("<span/>").appendTo($wrapper);
+            var val1 = "";
+            var val2 = "";
+
+            if (value) {
+                val1 = value[0] ? value[0] : "";
+                val2 = value[1] ? value[1] : "";
+            }
+
+            var startdt = $('<input type="date"/>')
+                .addClass(self.options.classValueName + "-" + widget)
+                .addClass(self.options.classValueName + "-" + widget + "-start")
+                .val(val1)
+                .appendTo(startwrap)
+                .on("change", function () {
+                    self.trigger("value-changed");
+                });
+            $wrapper.append(
+                $("<span/>").html(_t("to")).addClass(self.options.classBetweenDtName)
+            );
+            var endwrap = $("<span/>").appendTo($wrapper);
+            var enddt = $('<input type="date"/>')
+                .addClass(self.options.classValueName + "-" + widget)
+                .addClass(self.options.classValueName + "-" + widget + "-end")
+                .val(val2)
+                .appendTo(endwrap)
+                .on("change", function () {
+                    self.trigger("value-changed");
+                });
+            self.$value = [startdt, enddt];
+        } else if (widget === "RelativeDateWidget") {
+            self.$value = $('<input type="text"/>')
+                .after($("<span/>").html(_t("days")))
+                .addClass(self.options.classValueName + "-" + widget)
+                .val(value)
+                .appendTo($wrapper)
+                .on("change", function () {
+                    self.trigger("value-changed");
+                });
+        } else if (widget === "AdvancedPathWidget") {
+            if (self.advanced) {
+                self.advanced = false;
+            } else {
+                self.advanced = true;
+            }
+            self.createPathOperators();
+            self.removeOperator();
+            self.appendOperators(index);
+            self.createValue(index);
+        } else if (widget === "RelativePathWidget") {
+            if (self.advanced) {
+                self.$value = $('<input type="text"/>')
+                    .addClass(self.options.classValueName + "-" + widget)
+                    .appendTo($wrapper)
+                    .val(value)
+                    .on("change", function () {
+                        self.trigger("value-changed");
+                    });
+            } else {
+                var pathAndDepth = [".", "1"];
+                if (typeof value !== "undefined" && value.indexOf("::") != -1) {
+                    pathAndDepth = value.split("::");
+                    if (pathAndDepth[0] === ".") {
+                        self.$operator.val(
+                            "plone.app.querystring.operation.string.path"
+                        );
+                    } else {
+                        self.$operator.val(
+                            "plone.app.querystring.operation.string.relativePath"
+                        );
+                    }
+                } else if (
+                    self.$operator.val() ===
+                    "plone.app.querystring.operation.string.relativePath"
+                ) {
+                    pathAndDepth = ["..", "1"];
+                }
+
+                self.$value = $('<input type="hidden"/>')
+                    .addClass(self.options.classValueName + "-" + widget)
+                    .appendTo($wrapper)
+                    .val(pathAndDepth[0]);
+                self.$value.after(createDepthSelect(pathAndDepth[1]));
+            }
+        } else if (widget === "ReferenceWidget") {
+            if (self.advanced) {
+                self.$value = $('<input type="text"/>')
+                    .addClass(self.options.classValueName + "-" + widget)
+                    .val(value)
+                    .appendTo($wrapper)
+                    .on("change", function () {
+                        self.trigger("value-changed");
+                    });
+            } else {
+                pathAndDepth = ["", "-1"];
+                if (typeof value !== "undefined") {
+                    pathAndDepth = value.split("::");
+                }
+                self.$value = $('<input type="text"/>')
+                    .addClass(self.options.classValueName + "-" + widget)
+                    .appendTo($wrapper)
+                    .val(pathAndDepth[0])
+                const pat = new ContentbrowserPattern(self.$value[0], self.patternRelateditemsOptions);
+                pat.el.addEventListener("change", () => {
+                    self.trigger("value-changed");
+                })
+                self.$value.after(createDepthSelect(pathAndDepth[1]));
+            }
+        } else if (widget === "MultipleSelectionWidget") {
+            self.$value = $("<select/>")
+                .prop("multiple", true)
+                .addClass(self.options.classValueName + "-" + widget)
+                .appendTo($wrapper)
+                .on("change", function () {
+                    self.trigger("value-changed");
+                });
+            if (self.indexes[index]) {
+                for (const value in self.indexes[index].values) {
+                    const options = self.indexes[index].values[value];
+                    $("<option/>")
+                        .attr("value", value)
+                        .html(options.title)
+                        .appendTo(self.$value);
+                };
+            }
+            self.$value.patternSelect2(self.patternAjaxSelectOptions);
+        }
+
+        if (typeof value !== "undefined" && typeof self.$value !== "undefined") {
+            if (Array.isArray(self.$value)) {
+                $.each(value, function (i, v) {
+                    self.$value[i].val(v);
+                });
+            } else {
+                var trimmedValue = value;
+                if (typeof value === "string" && widget !== "RelativePathWidget") {
+                    trimmedValue = value.replace(/::-?[0-9]+/, "");
+                }
+                self.$value.val(trimmedValue);
+            }
+        }
+
+        self.trigger("create-value");
+    },
+    createClear: function () {
+        var self = this;
+        self.removeClear();
+        self.$clear = $("<div/>")
+            .addClass(self.options.classClearName)
+            .appendTo(self.$wrapper);
+    },
+    remove: function () {
+        var self = this;
+        self.trigger("remove");
+        self.$remove.remove();
+        self.$index.parent().remove();
+        self.removeOperator();
+        self.removeValue();
+        self.removeClear();
+        self.$wrapper.remove();
+    },
+    removeClear: function () {
+        var self = this;
+        self.trigger("remove-clear");
+        if (self.$clear) {
+            self.$clear.remove();
+        }
+    },
+    removeOperator: function () {
+        var self = this;
+        self.trigger("remove-operator");
+        if (self.$operator) {
+            self.$operator.parent().remove();
+        }
+    },
+    removeValue: function () {
+        var self = this;
+        self.trigger("remove-value");
+        if (self.$value) {
+            if (Array.isArray(self.$value)) {
+                // date ranges have 2 values
+                self.$value[0].parents(".querystring-criteria-value").remove();
+            } else {
+                self.$value.parents(".querystring-criteria-value").remove();
+            }
+        }
+    },
+    // builds the parameters to go into the http querystring for requesting
+    // results from the query builder
+    buildQueryPart: function () {
+        var self = this;
+
+        // index
+        var ival = self.$index.val();
+        if (ival === "") {
+            // no index selected, no query
+            return "";
+        }
+        var istr = "query.i:records=" + ival;
+
+        // operator
+        if (typeof self.$operator === "undefined") {
+            // no operator, no query
+            return "";
+        }
+        var oval = self.$operator.val();
+
+        if (ival === "path") {
+            if (oval.indexOf("advanced") > 0) {
+                return "";
+            }
+            oval = self.convertPathOperators(oval);
+        }
+
+        var ostr = "query.o:records=" + oval;
+
+        // value(s)
+        var vstrbase = "query.v:records=",
+            vstrlistbase = "query.v:records:list=",
+            vstr = [];
+        if (typeof self.$value === "undefined") {
+            vstr.push(vstrbase);
+        } else if (Array.isArray(self.$value)) {
+            // handles only datepickers from the 'between' operator right now
+            $.each(self.$value, function () {
+                vstr.push(vstrlistbase + $(this).val());
+            });
+        } else if (Array.isArray(self.$value.val())) {
+            // handles multible values
+            $.each(self.$value.val(), function (i, v) {
+                vstr.push(vstrlistbase + v);
+            });
+        } else {
+            var str = vstrbase + self.$value.val();
+            if (ival === "path" && self.$value.val() !== "") {
+                str += self.getDepthString();
+            } else if (typeof self.initial !== "undefined") {
+                str = vstrbase + self.initial;
+                //Sometimes the RelatedItemsWidget won't be loaded by this point.
+                //This only should happen on the initial page load.
+                delete self.initial;
+            }
+            vstr.push(str);
+        }
+
+        return istr + "&" + ostr + "&" + vstr.join("&");
+    },
+    getJSONListStr: function () {
+        var self = this;
+
+        // index
+        var ival = self.$index.val();
+        if (ival === "") {
+            // no index selected, no query
+            return "";
+        }
+
+        // operator
+        if (typeof self.$operator === "undefined") {
+            // no operator, no query
+            return "";
+        }
+        var oval = self.$operator.val();
+
+        if (ival === "path") {
+            if (oval.indexOf("advanced") > 0) {
+                //The advanced function is just a placeholder,
+                //We don't want to send an actual query
+                return "";
+            }
+            oval = self.convertPathOperators(oval);
+        }
+        // value(s)
+        var varr = [];
+        if (Array.isArray(self.$value)) {
+            // handles only datepickers from the 'between' operator right now
+            $.each(self.$value, function () {
+                varr.push($(this).val());
+            });
+        } else if (typeof self.$value !== "undefined") {
+            var value = self.$value.val();
+            if (ival === "path" && value) {
+                var depth = self.getDepthString();
+                if (depth) {
+                    value += depth;
+                }
+            }
+            varr.push(value);
+        }
+        var vval;
+        if (varr.length > 1) {
+            vval = '["' + varr.join('","') + '"]';
+        } else if (varr.length === 1) {
+            vval = JSON.stringify(varr[0]);
+        } else {
+            vval = '""';
+        }
+
+        if (typeof self.indexes[ival].operators[oval] === "undefined") {
+            return;
+        }
+
+        return '{"i":"' + ival + '", "o":"' + oval + '", "v":' + vval + "}";
+    },
+    getDepthString: function () {
+        var self = this,
+            out = "",
+            depth = $("." + self.options.classDepthName).val();
+
+        if (depth !== "" && typeof depth !== "undefined") {
+            out += "::" + depth;
+        }
+        return out;
+    },
+    trigger: function (name) {
+        this.$wrapper.trigger(name + "-criteria.querystring.patterns", [this]);
+    },
+    on: function (name, callback) {
+        this.$wrapper.on(name + "-criteria.querystring.patterns", callback);
+    },
+};
+
+// Pattern config object — grafted onto the thin registered pattern in
+// querystring.js and run there. Kept out of the eager patterns chunk.
+export default {
+    defaults: {
+        indexes: [],
+        classWrapperName: "querystring-wrapper",
+        criteria: {},
+        indexOptionsUrl: null,
+        previewURL: "portal_factory/@@querybuilder_html_results", // base url to use to request preview information from
+        previewCountURL: "portal_factory/@@querybuildernumberofresults",
+        patternDateOptions: {},
+        patternAjaxSelectOptions: {},
+        patternRelateditemsOptions: {},
+        classSortLabelName: "querystring-sort-label",
+        classSortReverseName: "querystring-sortreverse",
+        classSortReverseLabelName: "querystring-sortreverse-label",
+        classPreviewCountWrapperName: "querystring-previewcount-wrapper",
+        classPreviewResultsWrapperName: "querystring-previewresults-wrapper",
+        classPreviewWrapperName: "querystring-preview-wrapper",
+        classPreviewName: "querystring-preview",
+        classPreviewTitleName: "querystring-preview-title",
+        classPreviewDescriptionName: "querystring-preview-description",
+        classSortWrapperName: "querystring-sort-wrapper",
+        showPreviews: true,
+    },
+    init: async function () {
+        await import("../select2/select2");
+
+        import("./querystring.scss");
+
+        var self = this;
+
+        // hide input element
+        self.$el.hide();
+
+        // create wrapper for out criteria
+        self.$wrapper = $("<div/>");
+        self.$el.after(self.$wrapper);
+
+        // initialization can be detailed if by ajax
+        self.initialized = false;
+
+        // get remove icon for criterias
+        self.options.criteria.remove = await utils.resolveIcon("x-circle");
+
+        if (self.options.indexOptionsUrl) {
+            try {
+                const response = await fetch(self.options.indexOptionsUrl);
+                const data = await response.json();
+                self.options.indexes = data.indexes;
+                self.options["sortable_indexes"] = data["sortable_indexes"];
+                self._init();
+            } catch {
+                // XXX handle this...
+            }
+        }
+    },
+    _init: function () {
+        var self = this;
+        self.$criteriaWrapper = $("<div/>")
+            .addClass(self.options.classWrapperName)
+            .appendTo(self.$wrapper);
+
+        self.$sortWrapper = $("<div/>")
+            .addClass(self.options.classSortWrapperName)
+            .appendTo(self.$wrapper);
+
+        if (self.options.showPreviews === "false") {
+            self.options.showPreviews = false;
+        }
+        if (self.options.showPreviews) {
+            self.$previewWrapper = $("<div/>")
+                .addClass(self.options.classPreviewWrapperName)
+                .appendTo(self.$wrapper);
+
+            // preview title and description
+            $("<div/>")
+                .addClass(self.options.classPreviewTitleName)
+                .html(_t("Preview"))
+                .appendTo(self.$previewWrapper);
+            $("<div/>")
+                .addClass(self.options.classPreviewDescriptionName)
+                .html(_t("Preview of at most 10 items"))
+                .appendTo(self.$previewWrapper);
+        }
+
+        self.criterias = [];
+
+        // create populated criterias
+        if (self.el.value) {
+            for (const item of JSON.parse(self.el.value)) {
+                self.createCriteria(item.i, item.o, item.v);
+            }
+        }
+
+        // add empty criteria which enables users to create new cr
+        self.createCriteria();
+
+        // add sort/order fields
+        self.createSort();
+
+        // add criteria preview pane to see results from criteria query
+        if (self.options.showPreviews) {
+            self.refreshPreviewEvent();
+        }
+        self.$el.trigger("initialized");
+        self.initialized = true;
+    },
+    createCriteria: function (index, operator, value) {
+        var self = this,
+            baseUrl = self.options.indexOptionsUrl.replace(/(@@.*)/g, ""),
+            criteria = new Criteria(
+                self.$criteriaWrapper,
+                self,
+                self.options.criteria,
+                self.options.indexes,
+                index,
+                operator,
+                value,
+                baseUrl,
+                self.options.patternDateOptions,
+                self.options.patternAjaxSelectOptions,
+                self.options.patternRelateditemsOptions
+            );
+
+        criteria.on("remove", function () {
+            if (self.criterias[self.criterias.length - 1] === criteria) {
+                self.createCriteria();
+            }
+        });
+
+        criteria.on("index-changed", function () {
+            if (self.criterias[self.criterias.length - 1] === criteria) {
+                self.createCriteria();
+            }
+        });
+
+        //This prevents multiple requests from going off after making a single change
+        var _doupdates = function () {
+            self.refreshPreviewEvent();
+            self.updateValue();
+        };
+        var _updateTimeout = -1;
+        var doupdates = function () {
+            clearTimeout(_updateTimeout);
+            _updateTimeout = setTimeout(_doupdates, 100);
+        };
+
+        criteria.on("remove", function (e, criteria) {
+            if (self.criterias.indexOf(criteria) !== -1) {
+                self.criterias.splice(self.criterias.indexOf(criteria), 1);
+            }
+            doupdates(e, criteria);
+        });
+        criteria.on("remove-clear", doupdates);
+        criteria.on("remove-operator", doupdates);
+        criteria.on("remove-value", doupdates);
+        criteria.on("index-changed", doupdates);
+        criteria.on("operator-changed", doupdates);
+        criteria.on("create-criteria", doupdates);
+        criteria.on("create-operator", doupdates);
+        criteria.on("create-value", doupdates);
+        criteria.on("value-changed", doupdates);
+        criteria.on("depth-changed", doupdates);
+
+        self.criterias.push(criteria);
+    },
+    createSort: function () {
+        var self = this;
+
+        // elements that may exist already on the page
+        // XXX do this in a way so it'll work with other forms will work
+        // as long as they provide sort_on and sort_reversed fields in z3c form
+        var existingSortOn = $('[id$="-sort_on"]').filter('[id^="formfield-"]');
+        var existingSortOrder = $('[id*="-sort_reversed"]').filter('[id^="formfield-"]');
+
+        $("<span/>")
+            .addClass(self.options.classSortLabelName)
+            .html(_t("Sort on"))
+            .appendTo(self.$sortWrapper);
+        self.$sortOn = $("<select/>")
+            .attr("name", "sort_on")
+            .appendTo(self.$sortWrapper)
+            .on("change", function () {
+                self.refreshPreviewEvent();
+                $('[id$="sort_on"]', existingSortOn).val($(this).val());
+            });
+
+        self.$sortOn.append($('<option value="">' + _t("No sorting") + "</option>")); // default no sorting
+        for (var key in self.options["sortable_indexes"]) {
+            self.$sortOn.append(
+                $("<option/>").attr("value", key).html(self.options.indexes[key].title)
+            );
+        }
+        self.$sortOn.patternSelect2({ width: "150px" });
+
+        self.$sortOrder = $('<input type="checkbox" />')
+            .attr("name", "sort_reversed:boolean")
+            .on("change", function () {
+                self.refreshPreviewEvent();
+                if ($(this).prop("checked")) {
+                    $('input[type="checkbox"]', existingSortOrder).prop("checked", true);
+                } else {
+                    $('input[type="checkbox"]', existingSortOrder).prop(
+                        "checked",
+                        false
+                    );
+                }
+            });
+
+        $("<span/>")
+            .addClass(self.options.classSortReverseName)
+            .appendTo(self.$sortWrapper)
+            .append(self.$sortOrder)
+            .append(
+                $("<span/>")
+                    .html(_t("Reversed Order"))
+                    .addClass(self.options.classSortReverseLabelName)
+            );
+
+        // if the form already contains the sort fields, hide them! Their values
+        // will be synced back and forth between the querystring's form elements
+        if (existingSortOn.length >= 1 && existingSortOrder.length >= 1) {
+            var reversed = $('input[type="checkbox"]', existingSortOrder).prop(
+                "checked"
+            );
+            var sortOn = $('[id$="-sort_on"]', existingSortOn).val();
+            if (reversed) {
+                self.$sortOrder.prop("checked", true);
+            }
+            self.$sortOn.val(sortOn);
+            $(existingSortOn).hide();
+            $(existingSortOrder).hide();
+        }
+    },
+    refreshPreviewEvent: function () {
+        var self = this;
+
+        if (!self.options.showPreviews) {
+            return; // cut out of this if there are no previews available
+        }
+
+        if (typeof self._previewXhr !== "undefined") {
+            self._previewXhr.abort();
+        }
+
+        if (typeof self.$previewPane !== "undefined") {
+            self.$previewPane.remove();
+        }
+
+        var query = [];
+        for (const criteria of self.criterias) {
+            var querypart = criteria.buildQueryPart();
+            if (querypart !== "") {
+                query.push(querypart);
+            }
+        };
+
+        self.$previewPane = $("<div/>")
+            .addClass(self.options.classPreviewName)
+            .appendTo(self.$previewWrapper);
+
+        if (query.length <= 0) {
+            $("<div/>")
+                .addClass(self.options.classPreviewCountWrapperName)
+                .html("No results to preview")
+                .prependTo(self.$previewPane);
+            return; // no query means nothing to send out requests for
+        }
+
+        query.push("sort_on=" + self.$sortOn.val());
+        if (self.$sortOrder.prop("checked")) {
+            query.push("sort_order=reverse");
+        }
+
+        self._previewXhr = $.ajax({
+            url: self.options.previewURL + "?" + query.join("&"),
+            success: (data) => {
+                $("<div/>")
+                    .addClass(self.options.classPreviewResultsWrapperName)
+                    .html(utils.parseBodyTag(data))
+                    .appendTo(self.$previewPane);
+            },
+        });
+    },
+    updateValue: function () {
+        // updating the original input with json data in the form:
+        // [
+        //    {i:'index', o:'operator', v:'value'}
+        // ]
+
+        var self = this;
+
+        var criteriastrs = [];
+        for (const criteria of self.criterias) {
+            var jsonstr = criteria.getJSONListStr();
+            if (jsonstr !== "") {
+                criteriastrs.push(jsonstr);
+            }
+        }
+        var val = "[" + criteriastrs.join(",") + "]";
+        self.$el.val(val);
+        self.$el.trigger("change");
+    },
+};
diff --git a/src/pat/querystring/querystring.js b/src/pat/querystring/querystring.js
index ae19ca204..bf161856c 100644
--- a/src/pat/querystring/querystring.js
+++ b/src/pat/querystring/querystring.js
@@ -1,931 +1,23 @@
 import $ from "jquery";
-import _ from "underscore";
-import _t from "../../core/i18n-wrapper";
-import utils from "../../core/utils";
 import Base from "@patternslib/patternslib/src/core/base";
-import { Pattern as ContentbrowserPattern } from "../contentbrowser/contentbrowser";
-
-var Criteria = function () {
-    this.init.apply(this, arguments);
-};
-Criteria.prototype = {
-    defaults: {
-        indexWidth: "20em",
-        remove: "",
-        classBetweenDtName: "querystring-criteria-betweendt",
-        classWrapperName: "querystring-criteria-wrapper",
-        classIndexName: "querystring-criteria-index",
-        classOperatorName: "querystring-criteria-operator",
-        classValueName: "querystring-criteria-value",
-        classRemoveName: "querystring-criteria-remove",
-        classResultsName: "querystring-criteria-results",
-        classClearName: "querystring-criteria-clear",
-        classDepthName: "querystring-criteria-depth",
-    },
-    init: function (
-        $el,
-        app,
-        options,
-        indexes,
-        index,
-        operator,
-        value,
-        baseUrl,
-        patternDateOptions,
-        patternAjaxSelectOptions,
-        patternRelateditemsOptions
-    ) {
-        var self = this;
-        self.app = app;
-
-        self.options = {
-            ...self.defaults,
-            ...options,
-        };
-        self.indexes = indexes;
-        self.indexGroups = {};
-        self.baseUrl = baseUrl;
-        self.advanced = false;
-        self.initial = value;
-        // create wrapper criteria and append it to DOM
-        self.$wrapper = $("<div/>")
-            .addClass(self.options.classWrapperName)
-            .appendTo($el);
-
-        // Sub widgets options
-        self.patternDateOptions = patternDateOptions || {};
-        self.patternAjaxSelectOptions = patternAjaxSelectOptions || {};
-        self.patternRelateditemsOptions = patternRelateditemsOptions || {};
-        // Defaults
-        self.patternAjaxSelectOptions = {
-            width: "250px",
-            ...self.patternAjaxSelectOptions,
-        };
-        self.patternRelateditemsOptions = {
-            vocabularyUrl:
-                self.baseUrl +
-                "@@getVocabulary?name=plone.app.vocabularies.Catalog&field=relatedItems",
-            width: "20rem",
-            ...self.patternRelateditemsOptions,
-        };
-        // Force set
-        self.patternRelateditemsOptions["maximumSelectionSize"] = 1;
-
-        // Remove button
-        self.$remove = $("<div>" + self.options.remove + "</div>")
-            .addClass(self.options.classRemoveName)
-            .appendTo(self.$wrapper)
-            .on("click", function (e) {
-                e.stopPropagation();
-                self.remove();
-            });
-
-        // Index selection
-        self.$index = $("<select><option></option></select>").attr(
-            "placeholder",
-            _t("Select criteria")
-        );
-
-        // list of indexes
-        for (const value in self.indexes) {
-            let options = self.indexes[value];
-            if (options.enabled) {
-                if (!self.indexGroups[options.group]) {
-                    self.indexGroups[options.group] = $("<optgroup/>")
-                        .attr("label", options.group)
-                        .appendTo(self.$index);
-                }
-                self.indexGroups[options.group].append(
-                    $("<option/>").attr("value", value).html(options.title)
-                );
-            }
-        }
-
-        // attach index select to DOM
-        self.$wrapper.append(
-            $("<div/>").addClass(self.options.classIndexName).append(self.$index)
-        );
-
-        // add blink (select2)
-        self.$index.patternSelect2({
-            width: self.options.indexWidth,
-            placeholder: _t("Select criteria"),
-        });
-        self.$index.on("change", function () {
-            // Read the value from the element rather than from the event's
-            // `val` property. Select2 v3 fires a jQuery `change` event carrying
-            // a `val` property, but pat-select2 also re-dispatches a native
-            // `change` event (for native listeners), which jQuery's `change`
-            // handler catches as well. On that second invocation `e.val` would
-            // be undefined. Reading `self.$index.val()` is correct in both cases.
-            self.removeValue();
-            self.createOperator(self.$index.val());
-            self.createClear();
-            self.trigger("index-changed");
-        });
-
-        if (typeof index !== "undefined") {
-            self.$index.val(index);
-            self.createOperator(index, operator, value);
-            self.createClear();
-        }
-
-        self.trigger("create-criteria");
-    },
-    appendOperators: function (index) {
-        var self = this;
-
-        self.$operator = $("<select/>");
-
-        if (self.indexes[index]) {
-            _.each(self.indexes[index].operations, function (value) {
-                var options = self.indexes[index].operators[value];
-                $("<option/>")
-                    .attr("value", value)
-                    .html(options.title)
-                    .appendTo(self.$operator);
-            });
-        }
-
-        // attach operators select to DOM
-        self.$wrapper.append(
-            $("<div/>").addClass(self.options.classOperatorName).append(self.$operator)
-        );
-
-        // add blink (select2)
-        self.$operator.patternSelect2({ width: "10em" });
-        self.$operator.on("change", function () {
-            self.createValue(index);
-            self.createClear();
-            self.trigger("operator-changed");
-        });
-    },
-    convertPathOperators: function (oval) {
-        var self = this;
-
-        if (self.advanced) {
-            return oval;
-        }
-        //This allows us to use the same query operation for multiple dropdown options.
-        oval = oval.replace("advanced", "relativePath").replace("path", "relativePath");
-        return oval;
-    },
-    createPathOperators: function () {
-        var self = this;
-
-        if (self.advanced) {
-            self.resetPathOperators();
-            return;
-        }
-        var newOperator = "plone.app.querystring.operation.string.advanced";
-
-        if (typeof self.indexes.path.operators[newOperator] === "undefined") {
-            self.indexes.path.operations.push(newOperator);
-            self.indexes.path.operators[newOperator] = {
-                title: "Advanced",
-                widget: "AdvancedPathWidget",
-                description: "Enter a custom path string",
-                operation: "plone.app.querystring.queryparser._relativePath",
-            };
-        }
-
-        for (const key in self.indexes.path.operators) {
-            var options = self.indexes.path.operators[key];
-            if (key.indexOf("absolute") > 0) {
-                options.title = "Custom";
-            } else if (key.indexOf("relative") > 0) {
-                options.title = "Parent (../)";
-            } else if (key.indexOf("advanced") > 0) {
-                options.title = "Advanced Mode";
-            } else {
-                options.title = "Current (./)";
-                options.widget = "RelativePathWidget";
-            }
-        };
-    },
-    resetPathOperators: function () {
-        var self = this;
-        for (const key in self.indexes.path.operators) {
-            var options = self.indexes.path.operators[key];
-            if (key.indexOf("absolute") > 0) {
-                options.title = "Absolute Path";
-            } else if (key.indexOf("relative") > 0) {
-                options.title = "Relative Path";
-            } else if (key.indexOf("advanced") > 0) {
-                options.title = "Simple Mode";
-            } else {
-                options.title = "Navigation Path";
-                options.widget = "ReferenceWidget";
-            }
-        };
-
-        return;
-    },
-    createOperator: function (index, operator, value) {
-        var self = this;
-
-        self.removeOperator();
-        self.createPathOperators();
-
-        // We must test if we have a "simple" path or an "advanced" one and change the widgets accordingly
-        if (
-            index === "path" &&
-            value &&
-            value !== ".::1" &&
-            value !== "..::1" &&
-            !value.match(/^[0-9a-f\-]{32,36}::-?[0-9]+$/)
-        ) {
-            self.advanced = true;
-            self.resetPathOperators();
-        }
-
-        self.appendOperators(index);
-
-        if (typeof operator === "undefined") {
-            operator = self.$operator.val();
-        }
-
-        self.$operator.val(operator);
-        self.createValue(index, value);
-
-        self.trigger("create-operator");
-    },
-    createValue: function (index, value) {
-        var self = this,
-            widget = self.indexes[index].operators[self.$operator.val()].widget,
-            $wrapper = $("<div/>")
-                .addClass(self.options.classValueName)
-                .appendTo(self.$wrapper);
-
-        self.removeValue();
-
-        var createDepthSelect = function (selected) {
-            // remove previous depth-select-box items
-            $wrapper.remove(".depth-select-box");
-            var select =
-                "<div class='depth-select-box'>" +
-                "<label for='depth-select'>Depth</label>" +
-                "<select name='depth-select' class='" +
-                self.options.classDepthName +
-                "'>" +
-                "<option value='-1' selected='selected'>Unlimited</option>";
-
-            for (var i = 0; i <= 10; i += 1) {
-                select += "<option value=" + i + " ";
-                if ("" + i === selected) {
-                    select += "selected='selected' ";
-                }
-                select += ">" + i + "</option>";
-            }
-            select += "</select>" + "</div>";
-
-            return $(select).on("change", function () {
-                self.trigger("depth-changed");
-            });
-        };
-
-        if (widget === "StringWidget") {
-            self.$value = $('<input type="text"/>')
-                .addClass(self.options.classValueName + "-" + widget)
-                .val(value)
-                .appendTo($wrapper)
-                .on("change", function () {
-                    self.trigger("value-changed");
-                });
-        } else if (widget === "DateWidget") {
-            self.$value = $('<input type="date"/>')
-                .addClass(self.options.classValueName + "-" + widget)
-                .val(value)
-                .appendTo($wrapper)
-                .on("change", function () {
-                    self.trigger("value-changed");
-                });
-        } else if (widget === "DateRangeWidget") {
-            var startwrap = $("<span/>").appendTo($wrapper);
-            var val1 = "";
-            var val2 = "";
-
-            if (value) {
-                val1 = value[0] ? value[0] : "";
-                val2 = value[1] ? value[1] : "";
-            }
-
-            var startdt = $('<input type="date"/>')
-                .addClass(self.options.classValueName + "-" + widget)
-                .addClass(self.options.classValueName + "-" + widget + "-start")
-                .val(val1)
-                .appendTo(startwrap)
-                .on("change", function () {
-                    self.trigger("value-changed");
-                });
-            $wrapper.append(
-                $("<span/>").html(_t("to")).addClass(self.options.classBetweenDtName)
-            );
-            var endwrap = $("<span/>").appendTo($wrapper);
-            var enddt = $('<input type="date"/>')
-                .addClass(self.options.classValueName + "-" + widget)
-                .addClass(self.options.classValueName + "-" + widget + "-end")
-                .val(val2)
-                .appendTo(endwrap)
-                .on("change", function () {
-                    self.trigger("value-changed");
-                });
-            self.$value = [startdt, enddt];
-        } else if (widget === "RelativeDateWidget") {
-            self.$value = $('<input type="text"/>')
-                .after($("<span/>").html(_t("days")))
-                .addClass(self.options.classValueName + "-" + widget)
-                .val(value)
-                .appendTo($wrapper)
-                .on("change", function () {
-                    self.trigger("value-changed");
-                });
-        } else if (widget === "AdvancedPathWidget") {
-            if (self.advanced) {
-                self.advanced = false;
-            } else {
-                self.advanced = true;
-            }
-            self.createPathOperators();
-            self.removeOperator();
-            self.appendOperators(index);
-            self.createValue(index);
-        } else if (widget === "RelativePathWidget") {
-            if (self.advanced) {
-                self.$value = $('<input type="text"/>')
-                    .addClass(self.options.classValueName + "-" + widget)
-                    .appendTo($wrapper)
-                    .val(value)
-                    .on("change", function () {
-                        self.trigger("value-changed");
-                    });
-            } else {
-                var pathAndDepth = [".", "1"];
-                if (typeof value !== "undefined" && value.indexOf("::") != -1) {
-                    pathAndDepth = value.split("::");
-                    if (pathAndDepth[0] === ".") {
-                        self.$operator.val(
-                            "plone.app.querystring.operation.string.path"
-                        );
-                    } else {
-                        self.$operator.val(
-                            "plone.app.querystring.operation.string.relativePath"
-                        );
-                    }
-                } else if (
-                    self.$operator.val() ===
-                    "plone.app.querystring.operation.string.relativePath"
-                ) {
-                    pathAndDepth = ["..", "1"];
-                }
-
-                self.$value = $('<input type="hidden"/>')
-                    .addClass(self.options.classValueName + "-" + widget)
-                    .appendTo($wrapper)
-                    .val(pathAndDepth[0]);
-                self.$value.after(createDepthSelect(pathAndDepth[1]));
-            }
-        } else if (widget === "ReferenceWidget") {
-            if (self.advanced) {
-                self.$value = $('<input type="text"/>')
-                    .addClass(self.options.classValueName + "-" + widget)
-                    .val(value)
-                    .appendTo($wrapper)
-                    .on("change", function () {
-                        self.trigger("value-changed");
-                    });
-            } else {
-                pathAndDepth = ["", "-1"];
-                if (typeof value !== "undefined") {
-                    pathAndDepth = value.split("::");
-                }
-                self.$value = $('<input type="text"/>')
-                    .addClass(self.options.classValueName + "-" + widget)
-                    .appendTo($wrapper)
-                    .val(pathAndDepth[0])
-                const pat = new ContentbrowserPattern(self.$value[0], self.patternRelateditemsOptions);
-                pat.el.addEventListener("change", () => {
-                    self.trigger("value-changed");
-                })
-                self.$value.after(createDepthSelect(pathAndDepth[1]));
-            }
-        } else if (widget === "MultipleSelectionWidget") {
-            self.$value = $("<select/>")
-                .prop("multiple", true)
-                .addClass(self.options.classValueName + "-" + widget)
-                .appendTo($wrapper)
-                .on("change", function () {
-                    self.trigger("value-changed");
-                });
-            if (self.indexes[index]) {
-                for (const value in self.indexes[index].values) {
-                    const options = self.indexes[index].values[value];
-                    $("<option/>")
-                        .attr("value", value)
-                        .html(options.title)
-                        .appendTo(self.$value);
-                };
-            }
-            self.$value.patternSelect2(self.patternAjaxSelectOptions);
-        }
-
-        if (typeof value !== "undefined" && typeof self.$value !== "undefined") {
-            if (Array.isArray(self.$value)) {
-                $.each(value, function (i, v) {
-                    self.$value[i].val(v);
-                });
-            } else {
-                var trimmedValue = value;
-                if (typeof value === "string" && widget !== "RelativePathWidget") {
-                    trimmedValue = value.replace(/::-?[0-9]+/, "");
-                }
-                self.$value.val(trimmedValue);
-            }
-        }
-
-        self.trigger("create-value");
-    },
-    createClear: function () {
-        var self = this;
-        self.removeClear();
-        self.$clear = $("<div/>")
-            .addClass(self.options.classClearName)
-            .appendTo(self.$wrapper);
-    },
-    remove: function () {
-        var self = this;
-        self.trigger("remove");
-        self.$remove.remove();
-        self.$index.parent().remove();
-        self.removeOperator();
-        self.removeValue();
-        self.removeClear();
-        self.$wrapper.remove();
-    },
-    removeClear: function () {
-        var self = this;
-        self.trigger("remove-clear");
-        if (self.$clear) {
-            self.$clear.remove();
-        }
-    },
-    removeOperator: function () {
-        var self = this;
-        self.trigger("remove-operator");
-        if (self.$operator) {
-            self.$operator.parent().remove();
-        }
-    },
-    removeValue: function () {
-        var self = this;
-        self.trigger("remove-value");
-        if (self.$value) {
-            if (Array.isArray(self.$value)) {
-                // date ranges have 2 values
-                self.$value[0].parents(".querystring-criteria-value").remove();
-            } else {
-                self.$value.parents(".querystring-criteria-value").remove();
-            }
-        }
-    },
-    // builds the parameters to go into the http querystring for requesting
-    // results from the query builder
-    buildQueryPart: function () {
-        var self = this;
-
-        // index
-        var ival = self.$index.val();
-        if (ival === "") {
-            // no index selected, no query
-            return "";
-        }
-        var istr = "query.i:records=" + ival;
-
-        // operator
-        if (typeof self.$operator === "undefined") {
-            // no operator, no query
-            return "";
-        }
-        var oval = self.$operator.val();
-
-        if (ival === "path") {
-            if (oval.indexOf("advanced") > 0) {
-                return "";
-            }
-            oval = self.convertPathOperators(oval);
-        }
-
-        var ostr = "query.o:records=" + oval;
-
-        // value(s)
-        var vstrbase = "query.v:records=",
-            vstrlistbase = "query.v:records:list=",
-            vstr = [];
-        if (typeof self.$value === "undefined") {
-            vstr.push(vstrbase);
-        } else if (Array.isArray(self.$value)) {
-            // handles only datepickers from the 'between' operator right now
-            $.each(self.$value, function () {
-                vstr.push(vstrlistbase + $(this).val());
-            });
-        } else if (Array.isArray(self.$value.val())) {
-            // handles multible values
-            $.each(self.$value.val(), function (i, v) {
-                vstr.push(vstrlistbase + v);
-            });
-        } else {
-            var str = vstrbase + self.$value.val();
-            if (ival === "path" && self.$value.val() !== "") {
-                str += self.getDepthString();
-            } else if (typeof self.initial !== "undefined") {
-                str = vstrbase + self.initial;
-                //Sometimes the RelatedItemsWidget won't be loaded by this point.
-                //This only should happen on the initial page load.
-                delete self.initial;
-            }
-            vstr.push(str);
-        }
-
-        return istr + "&" + ostr + "&" + vstr.join("&");
-    },
-    getJSONListStr: function () {
-        var self = this;
-
-        // index
-        var ival = self.$index.val();
-        if (ival === "") {
-            // no index selected, no query
-            return "";
-        }
-
-        // operator
-        if (typeof self.$operator === "undefined") {
-            // no operator, no query
-            return "";
-        }
-        var oval = self.$operator.val();
-
-        if (ival === "path") {
-            if (oval.indexOf("advanced") > 0) {
-                //The advanced function is just a placeholder,
-                //We don't want to send an actual query
-                return "";
-            }
-            oval = self.convertPathOperators(oval);
-        }
-        // value(s)
-        var varr = [];
-        if (Array.isArray(self.$value)) {
-            // handles only datepickers from the 'between' operator right now
-            $.each(self.$value, function () {
-                varr.push($(this).val());
-            });
-        } else if (typeof self.$value !== "undefined") {
-            var value = self.$value.val();
-            if (ival === "path" && value) {
-                var depth = self.getDepthString();
-                if (depth) {
-                    value += depth;
-                }
-            }
-            varr.push(value);
-        }
-        var vval;
-        if (varr.length > 1) {
-            vval = '["' + varr.join('","') + '"]';
-        } else if (varr.length === 1) {
-            vval = JSON.stringify(varr[0]);
-        } else {
-            vval = '""';
-        }
-
-        if (typeof self.indexes[ival].operators[oval] === "undefined") {
-            return;
-        }
-
-        return '{"i":"' + ival + '", "o":"' + oval + '", "v":' + vval + "}";
-    },
-    getDepthString: function () {
-        var self = this,
-            out = "",
-            depth = $("." + self.options.classDepthName).val();
-
-        if (depth !== "" && typeof depth !== "undefined") {
-            out += "::" + depth;
-        }
-        return out;
-    },
-    trigger: function (name) {
-        this.$wrapper.trigger(name + "-criteria.querystring.patterns", [this]);
-    },
-    on: function (name, callback) {
-        this.$wrapper.on(name + "-criteria.querystring.patterns", callback);
-    },
-};
 
+// Thin registration module: the widget implementation (incl. the eager edge
+// into pat-contentbrowser) is loaded lazily on first match, so it stays out of
+// the eager patterns chunk on pages without a querystring widget.
 export default Base.extend({
     name: "querystring",
     trigger: ".pat-querystring",
     parser: "mockup",
-    defaults: {
-        indexes: [],
-        classWrapperName: "querystring-wrapper",
-        criteria: {},
-        indexOptionsUrl: null,
-        previewURL: "portal_factory/@@querybuilder_html_results", // base url to use to request preview information from
-        previewCountURL: "portal_factory/@@querybuildernumberofresults",
-        patternDateOptions: {},
-        patternAjaxSelectOptions: {},
-        patternRelateditemsOptions: {},
-        classSortLabelName: "querystring-sort-label",
-        classSortReverseName: "querystring-sortreverse",
-        classSortReverseLabelName: "querystring-sortreverse-label",
-        classPreviewCountWrapperName: "querystring-previewcount-wrapper",
-        classPreviewResultsWrapperName: "querystring-previewresults-wrapper",
-        classPreviewWrapperName: "querystring-preview-wrapper",
-        classPreviewName: "querystring-preview",
-        classPreviewTitleName: "querystring-preview-title",
-        classPreviewDescriptionName: "querystring-preview-description",
-        classSortWrapperName: "querystring-sort-wrapper",
-        showPreviews: true,
-    },
-    init: async function () {
-        await import("../select2/select2");
-
-        import("./querystring.scss");
-
-        var self = this;
-
-        // hide input element
-        self.$el.hide();
-
-        // create wrapper for out criteria
-        self.$wrapper = $("<div/>");
-        self.$el.after(self.$wrapper);
-
-        // initialization can be detailed if by ajax
-        self.initialized = false;
-
-        // get remove icon for criterias
-        self.options.criteria.remove = await utils.resolveIcon("x-circle");
-
-        if (self.options.indexOptionsUrl) {
-            try {
-                const response = await fetch(self.options.indexOptionsUrl);
-                const data = await response.json();
-                self.options.indexes = data.indexes;
-                self.options["sortable_indexes"] = data["sortable_indexes"];
-                self._init();
-            } catch {
-                // XXX handle this...
-            }
-        }
-    },
-    _init: function () {
-        var self = this;
-        self.$criteriaWrapper = $("<div/>")
-            .addClass(self.options.classWrapperName)
-            .appendTo(self.$wrapper);
-
-        self.$sortWrapper = $("<div/>")
-            .addClass(self.options.classSortWrapperName)
-            .appendTo(self.$wrapper);
-
-        if (self.options.showPreviews === "false") {
-            self.options.showPreviews = false;
-        }
-        if (self.options.showPreviews) {
-            self.$previewWrapper = $("<div/>")
-                .addClass(self.options.classPreviewWrapperName)
-                .appendTo(self.$wrapper);
-
-            // preview title and description
-            $("<div/>")
-                .addClass(self.options.classPreviewTitleName)
-                .html(_t("Preview"))
-                .appendTo(self.$previewWrapper);
-            $("<div/>")
-                .addClass(self.options.classPreviewDescriptionName)
-                .html(_t("Preview of at most 10 items"))
-                .appendTo(self.$previewWrapper);
-        }
-
-        self.criterias = [];
-
-        // create populated criterias
-        if (self.el.value) {
-            for (const item of JSON.parse(self.el.value)) {
-                self.createCriteria(item.i, item.o, item.v);
-            }
-        }
-
-        // add empty criteria which enables users to create new cr
-        self.createCriteria();
 
-        // add sort/order fields
-        self.createSort();
-
-        // add criteria preview pane to see results from criteria query
-        if (self.options.showPreviews) {
-            self.refreshPreviewEvent();
-        }
-        self.$el.trigger("initialized");
-        self.initialized = true;
-    },
-    createCriteria: function (index, operator, value) {
-        var self = this,
-            baseUrl = self.options.indexOptionsUrl.replace(/(@@.*)/g, ""),
-            criteria = new Criteria(
-                self.$criteriaWrapper,
-                self,
-                self.options.criteria,
-                self.options.indexes,
-                index,
-                operator,
-                value,
-                baseUrl,
-                self.options.patternDateOptions,
-                self.options.patternAjaxSelectOptions,
-                self.options.patternRelateditemsOptions
-            );
-
-        criteria.on("remove", function () {
-            if (self.criterias[self.criterias.length - 1] === criteria) {
-                self.createCriteria();
-            }
-        });
-
-        criteria.on("index-changed", function () {
-            if (self.criterias[self.criterias.length - 1] === criteria) {
-                self.createCriteria();
-            }
-        });
-
-        //This prevents multiple requests from going off after making a single change
-        var _doupdates = function () {
-            self.refreshPreviewEvent();
-            self.updateValue();
-        };
-        var _updateTimeout = -1;
-        var doupdates = function () {
-            clearTimeout(_updateTimeout);
-            _updateTimeout = setTimeout(_doupdates, 100);
-        };
-
-        criteria.on("remove", function (e, criteria) {
-            if (self.criterias.indexOf(criteria) !== -1) {
-                self.criterias.splice(self.criterias.indexOf(criteria), 1);
-            }
-            doupdates(e, criteria);
-        });
-        criteria.on("remove-clear", doupdates);
-        criteria.on("remove-operator", doupdates);
-        criteria.on("remove-value", doupdates);
-        criteria.on("index-changed", doupdates);
-        criteria.on("operator-changed", doupdates);
-        criteria.on("create-criteria", doupdates);
-        criteria.on("create-operator", doupdates);
-        criteria.on("create-value", doupdates);
-        criteria.on("value-changed", doupdates);
-        criteria.on("depth-changed", doupdates);
-
-        self.criterias.push(criteria);
-    },
-    createSort: function () {
-        var self = this;
-
-        // elements that may exist already on the page
-        // XXX do this in a way so it'll work with other forms will work
-        // as long as they provide sort_on and sort_reversed fields in z3c form
-        var existingSortOn = $('[id$="-sort_on"]').filter('[id^="formfield-"]');
-        var existingSortOrder = $('[id*="-sort_reversed"]').filter('[id^="formfield-"]');
-
-        $("<span/>")
-            .addClass(self.options.classSortLabelName)
-            .html(_t("Sort on"))
-            .appendTo(self.$sortWrapper);
-        self.$sortOn = $("<select/>")
-            .attr("name", "sort_on")
-            .appendTo(self.$sortWrapper)
-            .on("change", function () {
-                self.refreshPreviewEvent();
-                $('[id$="sort_on"]', existingSortOn).val($(this).val());
-            });
-
-        self.$sortOn.append($('<option value="">' + _t("No sorting") + "</option>")); // default no sorting
-        for (var key in self.options["sortable_indexes"]) {
-            self.$sortOn.append(
-                $("<option/>").attr("value", key).html(self.options.indexes[key].title)
-            );
-        }
-        self.$sortOn.patternSelect2({ width: "150px" });
-
-        self.$sortOrder = $('<input type="checkbox" />')
-            .attr("name", "sort_reversed:boolean")
-            .on("change", function () {
-                self.refreshPreviewEvent();
-                if ($(this).prop("checked")) {
-                    $('input[type="checkbox"]', existingSortOrder).prop("checked", true);
-                } else {
-                    $('input[type="checkbox"]', existingSortOrder).prop(
-                        "checked",
-                        false
-                    );
-                }
-            });
-
-        $("<span/>")
-            .addClass(self.options.classSortReverseName)
-            .appendTo(self.$sortWrapper)
-            .append(self.$sortOrder)
-            .append(
-                $("<span/>")
-                    .html(_t("Reversed Order"))
-                    .addClass(self.options.classSortReverseLabelName)
-            );
-
-        // if the form already contains the sort fields, hide them! Their values
-        // will be synced back and forth between the querystring's form elements
-        if (existingSortOn.length >= 1 && existingSortOrder.length >= 1) {
-            var reversed = $('input[type="checkbox"]', existingSortOrder).prop(
-                "checked"
-            );
-            var sortOn = $('[id$="-sort_on"]', existingSortOn).val();
-            if (reversed) {
-                self.$sortOrder.prop("checked", true);
-            }
-            self.$sortOn.val(sortOn);
-            $(existingSortOn).hide();
-            $(existingSortOrder).hide();
-        }
-    },
-    refreshPreviewEvent: function () {
-        var self = this;
-
-        if (!self.options.showPreviews) {
-            return; // cut out of this if there are no previews available
-        }
-
-        if (typeof self._previewXhr !== "undefined") {
-            self._previewXhr.abort();
-        }
-
-        if (typeof self.$previewPane !== "undefined") {
-            self.$previewPane.remove();
-        }
-
-        var query = [];
-        for (const criteria of self.criterias) {
-            var querypart = criteria.buildQueryPart();
-            if (querypart !== "") {
-                query.push(querypart);
-            }
-        };
-
-        self.$previewPane = $("<div/>")
-            .addClass(self.options.classPreviewName)
-            .appendTo(self.$previewWrapper);
-
-        if (query.length <= 0) {
-            $("<div/>")
-                .addClass(self.options.classPreviewCountWrapperName)
-                .html("No results to preview")
-                .prependTo(self.$previewPane);
-            return; // no query means nothing to send out requests for
-        }
-
-        query.push("sort_on=" + self.$sortOn.val());
-        if (self.$sortOrder.prop("checked")) {
-            query.push("sort_order=reverse");
-        }
-
-        self._previewXhr = $.ajax({
-            url: self.options.previewURL + "?" + query.join("&"),
-            success: (data) => {
-                $("<div/>")
-                    .addClass(self.options.classPreviewResultsWrapperName)
-                    .html(utils.parseBodyTag(data))
-                    .appendTo(self.$previewPane);
-            },
-        });
-    },
-    updateValue: function () {
-        // updating the original input with json data in the form:
-        // [
-        //    {i:'index', o:'operator', v:'value'}
-        // ]
-
-        var self = this;
-
-        var criteriastrs = [];
-        for (const criteria of self.criterias) {
-            var jsonstr = criteria.getJSONListStr();
-            if (jsonstr !== "") {
-                criteriastrs.push(jsonstr);
-            }
-        }
-        var val = "[" + criteriastrs.join(",") + "]";
-        self.$el.val(val);
-        self.$el.trigger("change");
+    init: async function () {
+        const impl = (await import("./querystring--implementation")).default;
+        // Defaults live with the implementation; merge them under the parsed
+        // options (which must win), reproducing the eager pattern's options.
+        this.options = $.extend(true, {}, impl.defaults, this.options);
+        // Graft the implementation's methods/state onto this single instance so
+        // external consumers (e.g. pat-structure's textfilter, which reads
+        // this.queryString.$sortOn) keep working against one object.
+        $.extend(this, impl);
+        return impl.init.apply(this, arguments);
     },
 });