From 369d604e644c15b3a68b9fc8b134adb28a094ab9 Mon Sep 17 00:00:00 2001
From: Ernani Azevedo <ernaniaz@gmail.com>
Date: Wed, 18 Dec 2019 17:09:01 -0300
Subject: [PATCH 1/4] Added read_only option (can be modified with setOptions).

---
 src/defaults.js |  2 ++
 src/main.js     |  6 ++++++
 src/public.js   | 10 +++++++++-
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/defaults.js b/src/defaults.js
index b6c5a5eb..380cb792 100644
--- a/src/defaults.js
+++ b/src/defaults.js
@@ -37,6 +37,7 @@ QueryBuilder.inputs = [
  */
 QueryBuilder.modifiable_options = [
     'display_errors',
+    'read_only',
     'allow_groups',
     'allow_empty',
     'default_condition',
@@ -128,6 +129,7 @@ QueryBuilder.DEFAULTS = {
 
     sort_filters: false,
     display_errors: true,
+    read_only: false,
     allow_groups: -1,
     allow_empty: false,
     conditions: ['AND', 'OR'],
diff --git a/src/main.js b/src/main.js
index f799af6f..6a1eadc1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -136,6 +136,12 @@ var QueryBuilder = function($el, options) {
     // INIT
     this.$el.addClass('query-builder form-inline');
 
+    // if read only, add readonly class
+    if (this.settings.read_only)
+    {
+        this.$el.addClass('query-builder-readonly');
+    }
+
     this.filters = this.checkFilters(this.filters);
     this.operators = this.checkOperators(this.operators);
     this.bindEvents();
diff --git a/src/public.js b/src/public.js
index 79491b96..7724f8b9 100644
--- a/src/public.js
+++ b/src/public.js
@@ -19,7 +19,7 @@ QueryBuilder.prototype.destroy = function() {
 
     this.$el
         .off('.queryBuilder')
-        .removeClass('query-builder')
+        .removeClass('query-builder query-builder-readonly')
         .removeData('queryBuilder');
 
     delete this.$el[0].queryBuilder;
@@ -105,6 +105,14 @@ QueryBuilder.prototype.setOptions = function(options) {
     $.each(options, function(opt, value) {
         if (QueryBuilder.modifiable_options.indexOf(opt) !== -1) {
             this.settings[opt] = value;
+            if (opt === 'read_only')
+            {
+                this.$el.removeClass('query-builder-readonly');
+                if (value)
+                {
+                    this.$el.addClass('query-builder-readonly');
+                }
+            }
         }
     }.bind(this));
 };

From 3bcc858980ba891e7646cbd5b710b146184b021b Mon Sep 17 00:00:00 2001
From: Ernani Azevedo <ernaniaz@gmail.com>
Date: Wed, 18 Dec 2019 17:23:25 -0300
Subject: [PATCH 2/4] Added read only CSS style.

---
 src/scss/default.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/scss/default.scss b/src/scss/default.scss
index b8445fb7..0a49a410 100644
--- a/src/scss/default.scss
+++ b/src/scss/default.scss
@@ -172,5 +172,11 @@ $ticks-position: 5px, 10px !default;
   }
 }
 
+// READ ONLY
+.query-builder-readonly > div {
+  opacity: .5;
+  pointer-events: none;
+}
+
 // import
 // endimport

From 5d0db5e5354c7d96612ea812567743af8b0dd544 Mon Sep 17 00:00:00 2001
From: Ernani Azevedo <ernaniaz@gmail.com>
Date: Wed, 18 Dec 2019 18:45:16 -0300
Subject: [PATCH 3/4] Changed read only feature from CSS overlay to interactive
 elements disabling.

---
 src/main.js                    | 11 +++++------
 src/plugins/sortable/plugin.js | 20 ++++++++++++++++++++
 src/public.js                  | 11 +++--------
 src/scss/default.scss          |  6 ------
 4 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/src/main.js b/src/main.js
index 6a1eadc1..66fda6b4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -136,16 +136,15 @@ var QueryBuilder = function($el, options) {
     // INIT
     this.$el.addClass('query-builder form-inline');
 
-    // if read only, add readonly class
-    if (this.settings.read_only)
-    {
-        this.$el.addClass('query-builder-readonly');
-    }
-
     this.filters = this.checkFilters(this.filters);
     this.operators = this.checkOperators(this.operators);
     this.bindEvents();
     this.initPlugins();
+
+    // if read only, disable interative elements
+    if (this.settings.read_only) {
+        this.$el.find(':input').prop('disabled', true);
+    }
 };
 
 $.extend(QueryBuilder.prototype, /** @lends QueryBuilder.prototype */ {
diff --git a/src/plugins/sortable/plugin.js b/src/plugins/sortable/plugin.js
index 0d7dcaab..5110f900 100644
--- a/src/plugins/sortable/plugin.js
+++ b/src/plugins/sortable/plugin.js
@@ -51,6 +51,11 @@ QueryBuilder.define('sortable', function(options) {
                 .draggable({
                     allowFrom: QueryBuilder.selectors.drag_handle,
                     onstart: function(event) {
+                        // ignore when readonly
+                        if (e.builder.settings.read_only) {
+                            return;
+                        }
+
                         moved = false;
 
                         // get model of dragged element
@@ -72,11 +77,21 @@ QueryBuilder.define('sortable', function(options) {
                         src.$el.hide();
                     },
                     onmove: function(event) {
+                        // ignore when readonly
+                        if (e.builder.settings.read_only) {
+                            return;
+                        }
+
                         // make the ghost follow the cursor
                         ghost[0].style.top = event.clientY - 15 + 'px';
                         ghost[0].style.left = event.clientX - 15 + 'px';
                     },
                     onend: function(event) {
+                        // ignore when readonly
+                        if (e.builder.settings.read_only) {
+                            return;
+                        }
+
                         // starting from Interact 1.3.3, onend is called before ondrop
                         if (event.dropzone) {
                             moveSortableToTarget(src, $(event.relatedTarget), self);
@@ -204,6 +219,11 @@ QueryBuilder.defaults({
  * @private
  */
 function moveSortableToTarget(node, target, builder) {
+    // ignore when readonly
+    if (builder.settings.read_only) {
+        return;
+    }
+
     var parent, method;
     var Selectors = QueryBuilder.selectors;
 
diff --git a/src/public.js b/src/public.js
index 7724f8b9..82d849f5 100644
--- a/src/public.js
+++ b/src/public.js
@@ -19,7 +19,7 @@ QueryBuilder.prototype.destroy = function() {
 
     this.$el
         .off('.queryBuilder')
-        .removeClass('query-builder query-builder-readonly')
+        .removeClass('query-builder')
         .removeData('queryBuilder');
 
     delete this.$el[0].queryBuilder;
@@ -105,13 +105,8 @@ QueryBuilder.prototype.setOptions = function(options) {
     $.each(options, function(opt, value) {
         if (QueryBuilder.modifiable_options.indexOf(opt) !== -1) {
             this.settings[opt] = value;
-            if (opt === 'read_only')
-            {
-                this.$el.removeClass('query-builder-readonly');
-                if (value)
-                {
-                    this.$el.addClass('query-builder-readonly');
-                }
+            if (opt === 'read_only') {
+                this.$el.find(':input').prop('disabled', value);
             }
         }
     }.bind(this));
diff --git a/src/scss/default.scss b/src/scss/default.scss
index 0a49a410..b8445fb7 100644
--- a/src/scss/default.scss
+++ b/src/scss/default.scss
@@ -172,11 +172,5 @@ $ticks-position: 5px, 10px !default;
   }
 }
 
-// READ ONLY
-.query-builder-readonly > div {
-  opacity: .5;
-  pointer-events: none;
-}
-
 // import
 // endimport

From 0b6b8df9dfae29c36a6559e13a76d2348e52bc8d Mon Sep 17 00:00:00 2001
From: Ernani Azevedo <ernaniaz@gmail.com>
Date: Mon, 30 Dec 2019 19:41:21 -0300
Subject: [PATCH 4/4] Added more resilient actions when read_only.

---
 src/main.js     |  2 +-
 src/public.js   |  6 ++++++
 src/template.js | 16 ++++++++--------
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/main.js b/src/main.js
index 66fda6b4..132355f3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -143,7 +143,7 @@ var QueryBuilder = function($el, options) {
 
     // if read only, disable interative elements
     if (this.settings.read_only) {
-        this.$el.find(':input').prop('disabled', true);
+        setTimeout(function () { $el.find(':input').prop('disabled', true)});
     }
 };
 
diff --git a/src/public.js b/src/public.js
index 82d849f5..92f493a8 100644
--- a/src/public.js
+++ b/src/public.js
@@ -52,6 +52,12 @@ QueryBuilder.prototype.reset = function() {
 
     this.addRule(this.model.root);
 
+    // if read only, disable interative elements
+    var $el = this.$el;
+    if (this.settings.read_only) {
+        setTimeout(function () { $el.find(':input').prop('disabled', true)});
+    }
+
     /**
      * After the {@link QueryBuilder#reset} method
      * @event afterReset
diff --git a/src/template.js b/src/template.js
index 004d4693..367984ab 100644
--- a/src/template.js
+++ b/src/template.js
@@ -2,16 +2,16 @@ QueryBuilder.templates.group = '\
 <div id="{{= it.group_id }}" class="rules-group-container"> \
   <div class="rules-group-header"> \
     <div class="btn-group pull-right group-actions"> \
-      <button type="button" class="btn btn-xs btn-success" data-add="rule"> \
+      <button type="button" class="btn btn-xs btn-success" data-add="rule"{{? it.settings.read_only!=false}} disabled="disabled"{{?}}> \
         <i class="{{= it.icons.add_rule }}"></i> {{= it.translate("add_rule") }} \
       </button> \
       {{? it.settings.allow_groups===-1 || it.settings.allow_groups>=it.level }} \
-        <button type="button" class="btn btn-xs btn-success" data-add="group"> \
+        <button type="button" class="btn btn-xs btn-success" data-add="group"{{? it.settings.read_only!=false}} disabled="disabled"{{?}}> \
           <i class="{{= it.icons.add_group }}"></i> {{= it.translate("add_group") }} \
         </button> \
       {{?}} \
       {{? it.level>1 }} \
-        <button type="button" class="btn btn-xs btn-danger" data-delete="group"> \
+        <button type="button" class="btn btn-xs btn-danger" data-delete="group"{{? it.settings.read_only!=false}} disabled="disabled"{{?}}> \
           <i class="{{= it.icons.remove_group }}"></i> {{= it.translate("delete_group") }} \
         </button> \
       {{?}} \
@@ -19,7 +19,7 @@ QueryBuilder.templates.group = '\
     <div class="btn-group group-conditions"> \
       {{~ it.conditions: condition }} \
         <label class="btn btn-xs btn-primary"> \
-          <input type="radio" name="{{= it.group_id }}_cond" value="{{= condition }}"> {{= it.translate("conditions", condition) }} \
+          <input type="radio" name="{{= it.group_id }}_cond" value="{{= condition }}"{{? it.settings.read_only!=false}} disabled="disabled"{{?}}> {{= it.translate("conditions", condition) }} \
         </label> \
       {{~}} \
     </div> \
@@ -36,7 +36,7 @@ QueryBuilder.templates.rule = '\
 <div id="{{= it.rule_id }}" class="rule-container"> \
   <div class="rule-header"> \
     <div class="btn-group pull-right rule-actions"> \
-      <button type="button" class="btn btn-xs btn-danger" data-delete="rule"> \
+      <button type="button" class="btn btn-xs btn-danger" data-delete="rule"{{? it.settings.read_only!=false}} disabled="disabled"{{?}}> \
         <i class="{{= it.icons.remove_rule }}"></i> {{= it.translate("delete_rule") }} \
       </button> \
     </div> \
@@ -51,7 +51,7 @@ QueryBuilder.templates.rule = '\
 
 QueryBuilder.templates.filterSelect = '\
 {{ var optgroup = null; }} \
-<select class="form-control" name="{{= it.rule.id }}_filter"> \
+<select class="form-control" name="{{= it.rule.id }}_filter"{{? it.settings.read_only!=false}} disabled="disabled"{{?}}> \
   {{? it.settings.display_empty_filter }} \
     <option value="-1">{{= it.settings.select_placeholder }}</option> \
   {{?}} \
@@ -74,7 +74,7 @@ QueryBuilder.templates.operatorSelect = '\
 </span> \
 {{?}} \
 {{ var optgroup = null; }} \
-<select class="form-control {{? it.operators.length === 1 }}hide{{?}}" name="{{= it.rule.id }}_operator"> \
+<select class="form-control {{? it.operators.length === 1 }}hide{{?}}" name="{{= it.rule.id }}_operator"{{? it.settings.read_only!=false}} disabled="disabled"{{?}}> \
   {{~ it.operators: operator }} \
     {{? optgroup !== operator.optgroup }} \
       {{? optgroup !== null }}</optgroup>{{?}} \
@@ -89,7 +89,7 @@ QueryBuilder.templates.operatorSelect = '\
 
 QueryBuilder.templates.ruleValueSelect = '\
 {{ var optgroup = null; }} \
-<select class="form-control" name="{{= it.name }}" {{? it.rule.filter.multiple }}multiple{{?}}> \
+<select class="form-control" name="{{= it.name }}"{{? it.rule.filter.multiple }} multiple{{?}}{{? it.settings.read_only!=false}} disabled="disabled"{{?}}> \
   {{? it.rule.filter.placeholder }} \
     <option value="{{= it.rule.filter.placeholder_value }}" disabled selected>{{= it.rule.filter.placeholder }}</option> \
   {{?}} \