Created sort and transform buttons in the main menu

This commit is contained in:
jos 2018-07-11 12:23:36 +02:00
parent 77e9303ace
commit 9244f4719e
5 changed files with 86 additions and 4 deletions

View File

@ -42,9 +42,9 @@
inkscape:window-height="1026" inkscape:window-height="1026"
id="namedview4144" id="namedview4144"
showgrid="true" showgrid="true"
inkscape:zoom="4" inkscape:zoom="16"
inkscape:cx="128.30169" inkscape:cx="159.19073"
inkscape:cy="93.732883" inkscape:cy="33.796208"
inkscape:window-x="0" inkscape:window-x="0"
inkscape:window-y="0" inkscape:window-y="0"
inkscape:window-maximized="1" inkscape:window-maximized="1"
@ -919,4 +919,48 @@
id="path3546-2" id="path3546-2"
inkscape:connector-curvature="0" inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccc" /> sodipodi:nodetypes="cccccccc" />
<g
transform="matrix(1.3333328,0,0,-1.5999992,-139.9999,127.19999)"
id="g4383-6">
<rect
id="rect4385-2"
height="1.2499905"
width="5.9999924"
y="12.625005"
x="198.00002"
style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0" />
<rect
style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0"
x="198.00002"
y="15.125007"
width="7.4999928"
height="1.2499949"
id="rect4387-9" />
<rect
style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0"
x="198.00002"
y="7.6250024"
width="2.9999909"
height="1.2499905"
id="rect4389-1-0" />
<rect
style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0"
x="198.00002"
y="10.125004"
width="4.4999919"
height="1.2499905"
id="rect4389-1-9" />
<path
style="fill:#ffffff;fill-opacity:0.8;fill-rule:evenodd;stroke:none;stroke-width:0.68465352px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 207.00001,16.375004 0,-5.625005 -2.25,0 3,-3.1250014 3,3.1250014 -2.25,0 0,5.625005 -1.5,0"
id="path4402"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccc" />
</g>
<path
style="fill:#ffffff;fill-opacity:0.8;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 164,100 0,3 -6,6 0,7 -4,0 0,-7 -6,-6 0,-3"
id="path3546-2-2"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccc" />
</svg> </svg>

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 38 KiB

View File

@ -53,6 +53,12 @@ div.jsoneditor-menu > button.jsoneditor-collapse-all {
div.jsoneditor-menu > button.jsoneditor-expand-all { div.jsoneditor-menu > button.jsoneditor-expand-all {
background-position: 0 -120px; background-position: 0 -120px;
} }
div.jsoneditor-menu > button.jsoneditor-sort {
background-position: -120px -96px;
}
div.jsoneditor-menu > button.jsoneditor-transform {
background-position: -144px -96px;
}
div.jsoneditor-menu > button.jsoneditor-undo { div.jsoneditor-menu > button.jsoneditor-undo {
background-position: -24px -96px; background-position: -24px -96px;
} }

View File

@ -10,7 +10,7 @@ var showTransformModal = require('./showTransformModal');
var util = require('./util'); var util = require('./util');
var translate = require('./i18n').translate; var translate = require('./i18n').translate;
var DEFAULT_MODAL_ANCHOR = document.body; var DEFAULT_MODAL_ANCHOR = document.body; // TODO: this constant is defined twice
/** /**
* @constructor Node * @constructor Node

View File

@ -39,6 +39,7 @@ var _defs = {
'showMoreStatus': 'displaying ${visibleChilds} of ${totalChilds} items.', 'showMoreStatus': 'displaying ${visibleChilds} of ${totalChilds} items.',
'sort': 'Sort', 'sort': 'Sort',
'sortTitle': 'Sort the childs of this ${type}', 'sortTitle': 'Sort the childs of this ${type}',
'sortTitleShort': 'Sort contents',
'sortFieldLabel': 'Field:', 'sortFieldLabel': 'Field:',
'sortDirectionLabel': 'Direction:', 'sortDirectionLabel': 'Direction:',
'sortFieldTitle': 'Select the nested field by which to sort the array or object', 'sortFieldTitle': 'Select the nested field by which to sort the array or object',
@ -49,6 +50,7 @@ var _defs = {
'string': 'String', 'string': 'String',
'transform': 'Transform', 'transform': 'Transform',
'transformTitle': 'Filter, sort, or transform the childs of this ${type}', 'transformTitle': 'Filter, sort, or transform the childs of this ${type}',
'transformTitleShort': 'Filter, sort, or transform contents',
'transformQueryTitle': 'Enter a JMESPath query', 'transformQueryTitle': 'Enter a JMESPath query',
'transformWizardLabel': 'Wizard', 'transformWizardLabel': 'Wizard',
'transformWizardFilter': 'Filter', 'transformWizardFilter': 'Filter',
@ -114,6 +116,8 @@ var _defs = {
'sort': 'Organizar', 'sort': 'Organizar',
'sortTitle': 'Organizar os filhos deste ${type}', 'sortTitle': 'Organizar os filhos deste ${type}',
// TODO: correctly translate // TODO: correctly translate
'sortTitleShort': 'Organizar os filhos',
// TODO: correctly translate
'sortFieldLabel': 'Field:', 'sortFieldLabel': 'Field:',
// TODO: correctly translate // TODO: correctly translate
'sortDirectionLabel': 'Direction:', 'sortDirectionLabel': 'Direction:',
@ -133,6 +137,8 @@ var _defs = {
// TODO: correctly translate // TODO: correctly translate
'transformTitle': 'Filter, sort, or transform the childs of this ${type}', 'transformTitle': 'Filter, sort, or transform the childs of this ${type}',
// TODO: correctly translate // TODO: correctly translate
'transformTitleShort': 'Filter, sort, or transform contents',
// TODO: correctly translate
'transformQueryTitle': 'Enter a JMESPath query', 'transformQueryTitle': 'Enter a JMESPath query',
// TODO: correctly translate // TODO: correctly translate
'transformWizardLabel': 'Wizard', 'transformWizardLabel': 'Wizard',

View File

@ -10,10 +10,14 @@ var Node = require('./Node');
var ModeSwitcher = require('./ModeSwitcher'); var ModeSwitcher = require('./ModeSwitcher');
var util = require('./util'); var util = require('./util');
var autocomplete = require('./autocomplete'); var autocomplete = require('./autocomplete');
var showSortModal = require('./showSortModal');
var showTransformModal = require('./showTransformModal');
var translate = require('./i18n').translate; var translate = require('./i18n').translate;
var setLanguages = require('./i18n').setLanguages; var setLanguages = require('./i18n').setLanguages;
var setLanguage = require('./i18n').setLanguage; var setLanguage = require('./i18n').setLanguage;
var DEFAULT_MODAL_ANCHOR = document.body; // TODO: this constant is defined twice
// create a mixin with the functions for tree mode // create a mixin with the functions for tree mode
var treemode = {}; var treemode = {};
@ -733,6 +737,28 @@ treemode._createFrame = function () {
}; };
this.menu.appendChild(collapseAll); this.menu.appendChild(collapseAll);
// create sort button
var sort = document.createElement('button');
sort.type = 'button';
sort.className = 'jsoneditor-sort';
sort.title = translate('sortTitleShort');
sort.onclick = function () {
var anchor = editor.options.modalAnchor || DEFAULT_MODAL_ANCHOR;
showSortModal(editor.node, anchor)
};
this.menu.appendChild(sort);
// create transform button
var transform = document.createElement('button');
transform.type = 'button';
transform.title = translate('transformTitleShort');
transform.className = 'jsoneditor-transform';
transform.onclick = function () {
var anchor = editor.options.modalAnchor || DEFAULT_MODAL_ANCHOR;
showTransformModal(editor.node, anchor)
};
this.menu.appendChild(transform);
// create undo/redo buttons // create undo/redo buttons
if (this.history) { if (this.history) {
// create undo button // create undo button