Integrated `mobius1-selectr`

2018-07-11 10:54:08 +02:00 · 2018-07-11 10:54:08 +02:00 · 7662874036
parent 228a9e9f12
commit 7662874036
11 changed files with 2731 additions and 72 deletions
--- a/README.md
+++ b/README.md
@ -13,7 +13,7 @@ editor.
 The editor can be used as a component in your own web application. The library
 can be loaded as CommonJS module, AMD module, or as a regular javascript file.

-Supported browsers: Chrome, Firefox, Safari, Opera, Internet Explorer 9+.
+Supported browsers: Chrome, Firefox, Safari, Opera, Edge, Internet Explorer 11.

 <img alt="json editor" src="https://raw.github.com/josdejong/jsoneditor/master/misc/jsoneditor.png"> &nbsp; <img alt="code editor" src="https://raw.github.com/josdejong/jsoneditor/master/misc/codeeditor.png">

--- a/gulpfile.js
+++ b/gulpfile.js
@ -138,7 +138,8 @@ gulp.task('bundle-css', ['mkdir'], function () {
    'src/css/autocomplete.css',
    'src/css/treepath.css',
    'src/css/statusbar.css',
-    'src/css/navigationbar.css'
+    'src/css/navigationbar.css',
+    'src/js/assets/selectr/selectr.css'
  ])
      .pipe(concatCss(NAME + '.css'))
      .pipe(gulp.dest(DIST))
--- a/package-lock.json
+++ b/package-lock.json
@ -2910,6 +2910,11 @@
        }
      }
    },
+    "mobius1-selectr": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/mobius1-selectr/-/mobius1-selectr-2.4.1.tgz",
+      "integrity": "sha512-neWBV/ew/wxUvj1mVkTKpFXsMIC2T5/usTFmlsOUXt1919y6IMhRMULXTqFxMoAihaRtI98zCE5ckgTMj9aDBQ=="
+    },
    "mocha": {
      "version": "3.4.2",
      "resolved": "https://registry.npmjs.org/mocha/-/mocha-3.4.2.tgz",
--- a/package.json
+++ b/package.json
@ -27,6 +27,7 @@
    "brace": "0.11.0",
    "javascript-natural-sort": "0.7.1",
    "jmespath": "0.15.0",
+    "mobius1-selectr": "2.4.1",
    "picomodal": "3.0.0"
  },
  "devDependencies": {
--- a/src/css/contextmenu.css
+++ b/src/css/contextmenu.css
@ -281,7 +281,8 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {

 .jsoneditor-modal {
  position: absolute !important;
-  max-width: 100% !important;
+  max-width: 95% !important;
+  width: auto !important;

  border-radius: 2px !important;
  padding: 45px 15px 15px 15px !important;
@ -291,6 +292,10 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
  line-height: 1.3em;
 }

+.jsoneditor-modal.jsoneditor-modal-transform {
+  width: 600px !important;
+}
+
 .jsoneditor-modal .pico-modal-header {
  position: absolute;
  box-sizing: border-box;
@ -308,6 +313,10 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
  color: white;
 }

+.jsoneditor-modal table {
+  width: 100%;
+}
+
 .jsoneditor-modal table th,
 .jsoneditor-modal table td {
  padding: 5px 20px 5px 0;
@ -401,38 +410,6 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
  color: #808080;
 }

-.jsoneditor-modal .jsoneditor-select-wrapper {
-  position: relative;
-  display: inline-block;
-}
-
-.jsoneditor-modal .jsoneditor-select-wrapper:after {
-    content: "";
-    width: 0;
-    height: 0;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    border-top: 6px solid #666;
-    position: absolute;
-    right: 8px;
-    top: 10px;
-    pointer-events: none;
-}
-
-.jsoneditor-modal select {
-    padding: 3px 24px 3px 10px;
-    width: 100%;
-    max-width: 300px;
-
-    -webkit-appearance:none;
-    -moz-appearance:none;
-    appearance: none;
-
-    text-indent: 0;
-    text-overflow: "";
-    line-height: inherit;
-}
-
 .jsoneditor-modal select::-ms-expand {
    display: none;
 }
@ -464,7 +441,8 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {

 .jsoneditor-modal #query,
 .jsoneditor-modal .jsoneditor-transform-preview {
-  width: 400px;
+  width: 100%;
+  box-sizing: border-box;
 }

 .jsoneditor-modal .jsoneditor-transform-preview {
@ -490,26 +468,40 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
  margin: 4px 0 2px 0;
 }

+.jsoneditor-modal .jsoneditor-inline {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  padding: 2px 0;
+}
+
 .jsoneditor-modal .jsoneditor-jmespath-filter-field {
-  width: auto;
-  max-width: 200px;
+  width: 170px;
 }
 .jsoneditor-modal .jsoneditor-jmespath-filter-relation {
-  width: auto;
+  width: 100px;
 }
 .jsoneditor-modal .jsoneditor-jmespath-filter-value {
-  width: 100px;
+  width: 170px;
 }

 .jsoneditor-modal .jsoneditor-jmespath-sort-field {
-  width: auto;
-  max-width: 200px;
+  width: 170px;
 }
 .jsoneditor-modal .jsoneditor-jmespath-sort-order {
-  width: auto;
+  width: 150px;
 }

 .jsoneditor-modal .jsoneditor-jmespath-select-fields {
-  width: auto;
-  max-width: 100%;
-}
+  width: 100%;
+}
+
+.jsoneditor-modal .selectr-selected {
+  border-color: #d3d3d3;
+  padding: 3px 28px 4px 8px;
+}
+
+.jsoneditor-modal .selectr-selected .selectr-tag {
+  background-color: #3883fa;
+  border-radius: 5px;
+}
--- a/src/js/assets/selectr/README.md
+++ b/src/js/assets/selectr/README.md
@ -0,0 +1,6 @@
+This is a copy of the Selectr project
+
+https://github.com/Mobius1/Selectr
+
+Reason is that the project is not maintained and has some issues
+loading it via `require` in a webpack project.
--- a/src/js/assets/selectr/selectr.css
+++ b/src/js/assets/selectr/selectr.css
@ -0,0 +1,473 @@
+/*!
+ * Selectr 2.4.0
+ * https://github.com/Mobius1/Selectr
+ *
+ * Released under the MIT license
+ */
+
+.selectr-container {
+    position: relative;
+}
+
+.selectr-container li {
+    list-style: none;
+}
+
+.selectr-hidden {
+    position: absolute;
+    overflow: hidden;
+    clip: rect(0px, 0px, 0px, 0px);
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0 none;
+}
+
+.selectr-visible {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    z-index: 11;
+}
+
+.selectr-desktop.multiple .selectr-visible {
+    display: none;
+}
+
+.selectr-desktop.multiple.native-open .selectr-visible {
+    top: 100%;
+    min-height: 200px !important;
+    height: auto;
+    opacity: 1;
+    display: block;
+}
+
+.selectr-container.multiple.selectr-mobile .selectr-selected {
+    z-index: 0;
+}
+
+.selectr-selected {
+    position: relative;
+    z-index: 1;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 7px 28px 7px 14px;
+    cursor: pointer;
+    border: 1px solid #999;
+    border-radius: 3px;
+    background-color: #fff;
+}
+
+.selectr-selected::before {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    width: 0;
+    height: 0;
+    content: '';
+    -o-transform: rotate(0deg) translate3d(0px, -50%, 0px);
+    -ms-transform: rotate(0deg) translate3d(0px, -50%, 0px);
+    -moz-transform: rotate(0deg) translate3d(0px, -50%, 0px);
+    -webkit-transform: rotate(0deg) translate3d(0px, -50%, 0px);
+    transform: rotate(0deg) translate3d(0px, -50%, 0px);
+    border-width: 4px 4px 0 4px;
+    border-style: solid;
+    border-color: #6c7a86 transparent transparent;
+}
+
+.selectr-container.open .selectr-selected::before,
+.selectr-container.native-open .selectr-selected::before {
+    border-width: 0 4px 4px 4px;
+    border-style: solid;
+    border-color: transparent transparent #6c7a86;
+}
+
+.selectr-label {
+    display: none;
+    overflow: hidden;
+    width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.selectr-placeholder {
+    color: #6c7a86;
+}
+
+.selectr-tags {
+    margin: 0;
+    padding: 0;
+    white-space: normal;
+}
+
+.has-selected .selectr-tags {
+    margin: 0 0 -2px;
+}
+
+.selectr-tag {
+    list-style: none;
+    position: relative;
+    float: left;
+    padding: 2px 25px 2px 8px;
+    margin: 0 2px 2px 0;
+    cursor: default;
+    color: #fff;
+    border: medium none;
+    border-radius: 10px;
+    background: #acb7bf none repeat scroll 0 0;
+}
+
+.selectr-container.multiple.has-selected .selectr-selected {
+    padding: 5px 28px 5px 5px;
+}
+
+.selectr-options-container {
+    position: absolute;
+    z-index: 10000;
+    top: calc(100% - 1px);
+    left: 0;
+    display: none;
+    box-sizing: border-box;
+    width: 100%;
+    border-width: 0 1px 1px;
+    border-style: solid;
+    border-color: transparent #999 #999;
+    border-radius: 0 0 3px 3px;
+    background-color: #fff;
+}
+
+.selectr-container.open .selectr-options-container {
+    display: block;
+}
+
+.selectr-input-container {
+    position: relative;
+    display: none;
+}
+
+.selectr-clear,
+.selectr-input-clear,
+.selectr-tag-remove {
+    position: absolute;
+    top: 50%;
+    right: 22px;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    cursor: pointer;
+    -o-transform: translate3d(0px, -50%, 0px);
+    -ms-transform: translate3d(0px, -50%, 0px);
+    -moz-transform: translate3d(0px, -50%, 0px);
+    -webkit-transform: translate3d(0px, -50%, 0px);
+    transform: translate3d(0px, -50%, 0px);
+    border: medium none;
+    background-color: transparent;
+    z-index: 11;
+}
+
+.selectr-clear,
+.selectr-input-clear {
+    display: none;
+}
+
+.selectr-container.has-selected .selectr-clear,
+.selectr-input-container.active .selectr-input-clear {
+    display: block;
+}
+
+.selectr-selected .selectr-tag-remove {
+    right: 2px;
+}
+
+.selectr-clear::before,
+.selectr-clear::after,
+.selectr-input-clear::before,
+.selectr-input-clear::after,
+.selectr-tag-remove::before,
+.selectr-tag-remove::after {
+    position: absolute;
+    top: 5px;
+    left: 9px;
+    width: 2px;
+    height: 10px;
+    content: ' ';
+    background-color: #6c7a86;
+}
+
+.selectr-tag-remove::before,
+.selectr-tag-remove::after {
+    top: 4px;
+    width: 3px;
+    height: 12px;
+    background-color: #fff;
+}
+
+.selectr-clear:before,
+.selectr-input-clear::before,
+.selectr-tag-remove::before {
+    -o-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+
+.selectr-clear:after,
+.selectr-input-clear::after,
+.selectr-tag-remove::after {
+    -o-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+}
+
+.selectr-input-container.active,
+.selectr-input-container.active .selectr-clear {
+    display: block;
+}
+
+.selectr-input {
+    top: 5px;
+    left: 5px;
+    box-sizing: border-box;
+    width: calc(100% - 30px);
+    margin: 10px 15px;
+    padding: 7px 30px 7px 9px;
+    border: 1px solid #999;
+    border-radius: 3px;
+}
+
+.selectr-notice {
+    display: none;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 8px 16px;
+    border-top: 1px solid #999;
+    border-radius: 0 0 3px 3px;
+    background-color: #fff;
+}
+
+.selectr-container.notice .selectr-notice {
+    display: block;
+}
+
+.selectr-container.notice .selectr-selected {
+    border-radius: 3px 3px 0 0;
+}
+
+.selectr-options {
+    position: relative;
+    top: calc(100% + 2px);
+    display: none;
+    overflow-x: auto;
+    overflow-y: scroll;
+    max-height: 200px;
+    margin: 0;
+    padding: 0;
+}
+
+.selectr-container.open .selectr-options,
+.selectr-container.open .selectr-input-container,
+.selectr-container.notice .selectr-options-container {
+    display: block;
+}
+
+.selectr-option {
+    position: relative;
+    display: block;
+    padding: 5px 20px;
+    list-style: outside none none;
+    cursor: pointer;
+    font-weight: normal;
+}
+
+.selectr-options.optgroups > .selectr-option {
+    padding-left: 25px;
+}
+
+.selectr-optgroup {
+    font-weight: bold;
+    padding: 0;
+}
+
+.selectr-optgroup--label {
+    font-weight: bold;
+    margin-top: 10px;
+    padding: 5px 15px;
+}
+
+.selectr-match {
+    text-decoration: underline;
+}
+
+.selectr-option.selected {
+    background-color: #ddd;
+}
+
+.selectr-option.active {
+    color: #fff;
+    background-color: #5897fb;
+}
+
+.selectr-option.disabled {
+    opacity: 0.4;
+}
+
+.selectr-option.excluded {
+    display: none;
+}
+
+.selectr-container.open .selectr-selected {
+    border-color: #999 #999 transparent #999;
+    border-radius: 3px 3px 0 0;
+}
+
+.selectr-container.open .selectr-selected::after {
+    -o-transform: rotate(180deg) translate3d(0px, 50%, 0px);
+    -ms-transform: rotate(180deg) translate3d(0px, 50%, 0px);
+    -moz-transform: rotate(180deg) translate3d(0px, 50%, 0px);
+    -webkit-transform: rotate(180deg) translate3d(0px, 50%, 0px);
+    transform: rotate(180deg) translate3d(0px, 50%, 0px);
+}
+
+.selectr-disabled {
+    opacity: .6;
+}
+
+.selectr-empty,
+.has-selected .selectr-placeholder {
+    display: none;
+}
+
+.has-selected .selectr-label {
+    display: block;
+}
+
+/* TAGGABLE */
+.taggable .selectr-selected {
+    padding: 4px 28px 4px 4px;
+}
+
+.taggable .selectr-selected::after {
+    display: table;
+    content: " ";
+    clear: both;
+}
+
+.taggable .selectr-label {
+    width: auto;
+}
+
+.taggable .selectr-tags {
+    float: left;
+    display: block;
+}
+
+.taggable .selectr-placeholder {
+    display: none;
+}
+
+.input-tag {
+    float: left;
+    min-width: 90px;
+    width: auto;
+}
+
+.selectr-tag-input {
+    border: medium none;
+    padding: 3px 10px;
+    width: 100%;
+    font-family: inherit;
+    font-weight: inherit;
+    font-size: inherit;
+}
+
+.selectr-input-container.loading::after {
+    position: absolute;
+    top: 50%;
+    right: 20px;
+    width: 20px;
+    height: 20px;
+    content: '';
+    -o-transform: translate3d(0px, -50%, 0px);
+    -ms-transform: translate3d(0px, -50%, 0px);
+    -moz-transform: translate3d(0px, -50%, 0px);
+    -webkit-transform: translate3d(0px, -50%, 0px);
+    transform: translate3d(0px, -50%, 0px);
+
+    -o-transform-origin: 50% 0 0;
+    -ms-transform-origin: 50% 0 0;
+    -moz-transform-origin: 50% 0 0;
+    -webkit-transform-origin: 50% 0 0;
+    transform-origin: 50% 0 0;
+
+    -moz-animation: 500ms linear 0s normal forwards infinite running spin;
+    -webkit-animation: 500ms linear 0s normal forwards infinite running spin;
+    animation: 500ms linear 0s normal forwards infinite running spin;
+    border-width: 3px;
+    border-style: solid;
+    border-color: #aaa #ddd #ddd;
+    border-radius: 50%;
+}
+
+@-webkit-keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg) translate3d(0px, -50%, 0px);
+        transform: rotate(0deg) translate3d(0px, -50%, 0px);
+    }
+    100% {
+        -webkit-transform: rotate(360deg) translate3d(0px, -50%, 0px);
+        transform: rotate(360deg) translate3d(0px, -50%, 0px);
+    }
+}
+@keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg) translate3d(0px, -50%, 0px);
+        transform: rotate(0deg) translate3d(0px, -50%, 0px);
+    }
+    100% {
+        -webkit-transform: rotate(360deg) translate3d(0px, -50%, 0px);
+        transform: rotate(360deg) translate3d(0px, -50%, 0px);
+    }
+}
+.selectr-container.open.inverted .selectr-selected {
+    border-color: transparent #999 #999;
+    border-radius: 0 0 3px 3px;
+}
+
+.selectr-container.inverted .selectr-options-container {
+    border-width: 1px 1px 0;
+    border-color: #999 #999 transparent;
+    border-radius: 3px 3px 0 0;
+    background-color: #fff;
+}
+
+.selectr-container.inverted .selectr-options-container {
+    top: auto;
+    bottom: calc(100% - 1px);
+}
+
+.selectr-container ::-webkit-input-placeholder {
+    color: #6c7a86;
+    opacity: 1;
+}
+
+.selectr-container ::-moz-placeholder {
+    color: #6c7a86;
+    opacity: 1;
+}
+
+.selectr-container :-ms-input-placeholder {
+    color: #6c7a86;
+    opacity: 1;
+}
+
+.selectr-container ::placeholder {
+    color: #6c7a86;
+    opacity: 1;
+}
--- a/src/js/assets/selectr/selectr.js
+++ b/src/js/assets/selectr/selectr.js
--- a/src/js/showSortModal.js
+++ b/src/js/showSortModal.js
@ -53,7 +53,7 @@ function showSortModal (node, container) {
    parent: container,
    content: content,
    overlayClass: 'jsoneditor-modal-overlay',
-    modalClass: 'jsoneditor-modal'
+    modalClass: 'jsoneditor-modal jsoneditor-modal-sort'
  })
      .afterCreate(function (modal) {
        var form = modal.modalElem().querySelector('form');
--- a/src/js/showTransformModal.js
+++ b/src/js/showTransformModal.js
@ -1,5 +1,6 @@
 var jmespath = require('jmespath');
 var picoModal = require('picomodal');
+var Selectr = require('./assets/selectr/selectr');
 var translate = require('./i18n').translate;
 var debounce = require('./util').debounce;

@ -14,7 +15,7 @@ var MAX_PREVIEW_LINES = 100;
 function showTransformModal (node, container) {
  var value = node.getValue();

-  var content = '<label class="pico-modal-contents jsoneditor-transform-modal">' +
+  var content = '<label class="pico-modal-contents">' +
      '<div class="pico-modal-header">' + translate('transform') + '</div>' +
      '<form>' +
      '<p>' +
@ -30,14 +31,12 @@ function showTransformModal (node, container) {
      '  <label>' +
      '    <div class="jsoneditor-jmespath-wizard-label">' + translate('transformWizardFilter') + '</div>' +
      '    <div class="jsoneditor-jmespath-filter">' +
-      '      <div class="jsoneditor-select-wrapper">' +
-      '        <select class="jsoneditor-jmespath-filter-field" id="filterField">' +
-      '          <option value="" selected> </option>' +
+      '      <div class="jsoneditor-inline jsoneditor-jmespath-filter-field" >' +
+      '        <select id="filterField">' +
      '        </select>' +
      '      </div>' +
-      '      <div class="jsoneditor-select-wrapper">' +
-      '        <select class="jsoneditor-jmespath-filter-relation" id="filterRelation">' +
-      '          <option value="" selected> </option>' +
+      '      <div class="jsoneditor-inline jsoneditor-jmespath-filter-relation" >' +
+      '        <select id="filterRelation">' +
      '          <option value="==">==</option>' +
      '          <option value="!=">!=</option>' +
      '          <option value="<">&lt;</option>' +
@ -46,20 +45,18 @@ function showTransformModal (node, container) {
      '          <option value=">=">&gt;=</option>' +
      '        </select>' +
      '      </div>' +
-      '      <input class="jsoneditor-jmespath-filter-value" id="filterValue" />' +
+      '      <input class="jsoneditor-jmespath-filter-value" placeholder="value..." id="filterValue" />' +
      '    </div>' +
      '  </label>' +
      '  <label>' +
      '    <div class="jsoneditor-jmespath-wizard-label">' + translate('transformWizardSortBy') + '</div>' +
      '    <div class="jsoneditor-jmespath-filter">' +
-      '      <div class="jsoneditor-select-wrapper">' +
-      '        <select class="jsoneditor-jmespath-sort-field" id="sortField">' +
-      '          <option value="" selected> </option>' +
+      '      <div class="jsoneditor-inline jsoneditor-jmespath-sort-field">' +
+      '        <select id="sortField">' +
      '        </select>' +
      '      </div>' +
-      '      <div class="jsoneditor-select-wrapper">' +
-      '        <select class="jsoneditor-jmespath-sort-order" id="sortOrder">' +
-      '          <option value="" selected> </option>' +
+      '      <div class="jsoneditor-inline jsoneditor-jmespath-sort-order" >' +
+      '        <select id="sortOrder">' +
      '          <option value="asc">Ascending</option>' +
      '          <option value="desc">Descending</option>' +
      '        </select>' +
@ -69,7 +66,6 @@ function showTransformModal (node, container) {
      '  <label id="selectFieldsPart">' +
      '    <div class="jsoneditor-jmespath-wizard-label">' + translate('transformWizardSelectFields') + '</div>' +
      '    <select class="jsoneditor-jmespath-select-fields" id="selectFields" multiple>' +
-      '      <option value=""> </option>' +
      '    </select>' +
      '  </label>' +
      '  </div>' +
@ -109,7 +105,7 @@ function showTransformModal (node, container) {
    parent: container,
    content: content,
    overlayClass: 'jsoneditor-modal-overlay',
-    modalClass: 'jsoneditor-modal',
+    modalClass: 'jsoneditor-modal jsoneditor-modal-transform',
    focus: false
  })
      .afterCreate(function (modal) {
@ -166,6 +162,19 @@ function showTransformModal (node, container) {
          elem.querySelector('#selectFieldsPart').style.display = 'none';
        }

+        var selectrFilterField = new Selectr(filterField, { defaultSelected: false, clearable: true, allowDeselect: true, placeholder: 'field...' });
+        var selectrFilterRelation = new Selectr(filterRelation, { defaultSelected: false, clearable: true, allowDeselect: true, placeholder: 'compare...' });
+        var selectrSortField = new Selectr(sortField, { defaultSelected: false, clearable: true, allowDeselect: true, placeholder: 'field...' });
+        var selectrSortOrder = new Selectr(sortOrder, { defaultSelected: false, clearable: true, allowDeselect: true, placeholder: 'order...' });
+        var selectrSelectFields = new Selectr(selectFields, {multiple: true, clearable: true, defaultSelected: false});
+
+        selectrFilterField.on('selectr.change', generateQueryFromWizard);
+        selectrFilterRelation.on('selectr.change', generateQueryFromWizard);
+        filterValue.oninput = generateQueryFromWizard;
+        selectrSortField.on('selectr.change', generateQueryFromWizard);
+        selectrSortOrder.on('selectr.change', generateQueryFromWizard);
+        selectrSelectFields.on('selectr.change', generateQueryFromWizard);
+
        query.value = Array.isArray(value) ? '[*]' : '@';

        function preprocessPath(path) {
@ -180,6 +189,7 @@ function showTransformModal (node, container) {
        }

        function generateQueryFromWizard () {
+          console.log('query...', arguments)
          if (filterField.value && filterRelation.value && filterValue.value) {
            var field1 = filterField.value;
            // TODO: move _stringCast into a static util function
@ -260,13 +270,6 @@ function showTransformModal (node, container) {

        var debouncedUpdatePreview = debounce(updatePreview, 300);

-        filterField.onchange = generateQueryFromWizard;
-        filterRelation.onchange = generateQueryFromWizard;
-        filterValue.oninput = generateQueryFromWizard;
-        sortField.oninput = generateQueryFromWizard;
-        sortOrder.oninput = generateQueryFromWizard;
-        selectFields.onchange = generateQueryFromWizard;
-
        query.oninput = debouncedUpdatePreview;
        debouncedUpdatePreview();

@ -286,6 +289,8 @@ function showTransformModal (node, container) {
        setTimeout(function () {
          query.select();
          query.focus();
+          query.selectionStart = 3;
+          query.selectionEnd = 3;
        });
      })
      .afterClose(function (modal) {
--- a/test/test_large_array.html
+++ b/test/test_large_array.html
@ -6,6 +6,9 @@
  <link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
  <script src="../dist/jsoneditor.js"></script>

+  <!--<script src="https://unpkg.com/mobius1-selectr@2.4.1/dist/selectr.min.js"></script>-->
+  <!--<link rel="stylesheet" type="text/css" href="https://unpkg.com/mobius1-selectr@2.4.1/dist/selectr.min.css">-->
+
  <style type="text/css">
    body {
      font: 10.5pt arial;
@ -69,8 +72,8 @@
      index: i,
      time: new Date().toISOString(),
      location: {
-        latitude,
-        longitude,
+        latitude: longitude,
+        longitude: latitude,
        coordinates: [longitude, latitude]
      },
      random: Math.random()