Integrated `mobius1-selectr`
This commit is contained in:
parent
228a9e9f12
commit
7662874036
|
@ -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"> <img alt="code editor" src="https://raw.github.com/josdejong/jsoneditor/master/misc/codeeditor.png">
|
||||
|
||||
|
|
|
@ -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))
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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.
|
|
@ -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;
|
||||
}
|
File diff suppressed because it is too large
Load Diff
|
@ -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');
|
||||
|
|
|
@ -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="<"><</option>' +
|
||||
|
@ -46,20 +45,18 @@ function showTransformModal (node, container) {
|
|||
' <option value=">=">>=</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) {
|
||||
|
|
|
@ -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()
|
||||
|
|
Loading…
Reference in New Issue