Created sort and transform buttons in the main menu

src/css/img/jsoneditor-icons.svg

@@ -42,9 +42,9 @@
      inkscape:window-height="1026"
      id="namedview4144"
      showgrid="true"
-     inkscape:zoom="4"
-     inkscape:cx="128.30169"
-     inkscape:cy="93.732883"
+     inkscape:zoom="16"
+     inkscape:cx="159.19073"
+     inkscape:cy="33.796208"
      inkscape:window-x="0"
      inkscape:window-y="0"
      inkscape:window-maximized="1"
@@ -919,4 +919,48 @@
      id="path3546-2"
      inkscape:connector-curvature="0"
      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>

src/css/menu.css

@@ -53,6 +53,12 @@ div.jsoneditor-menu > button.jsoneditor-collapse-all {
 div.jsoneditor-menu > button.jsoneditor-expand-all {
   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 {
   background-position: -24px -96px;
 }

src/js/Node.js

@@ -10,7 +10,7 @@ var showTransformModal = require('./showTransformModal');
 var util = require('./util');
 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

src/js/i18n.js

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

src/js/treemode.js

@@ -10,10 +10,14 @@ var Node = require('./Node');
 var ModeSwitcher = require('./ModeSwitcher');
 var util = require('./util');
 var autocomplete = require('./autocomplete');
+var showSortModal = require('./showSortModal');
+var showTransformModal = require('./showTransformModal');
 var translate = require('./i18n').translate;
 var setLanguages = require('./i18n').setLanguages;
 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
 var treemode = {};
 
@@ -733,6 +737,28 @@ treemode._createFrame = function () {
   };
   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
   if (this.history) {
     // create undo button