Restore focus after switching mode. Fixed z-index issue with context menu.

This commit is contained in:
josdejong 2013-08-28 15:01:05 +02:00
parent 5a7a76cf0b
commit a33bc3e119
8 changed files with 53 additions and 17 deletions

2
jsoneditor-min.css vendored

File diff suppressed because one or more lines are too long

6
jsoneditor-min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -224,6 +224,7 @@ div.jsoneditor {
.jsoneditor-contextmenu {
position: absolute;
z-index: 999;
}
.jsoneditor-contextmenu ul {
@ -236,7 +237,6 @@ div.jsoneditor {
border: 1px solid #d3d3d3;
box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3);
z-index: 1;
list-style: none;
margin: 0;
padding: 0;

View File

@ -28,7 +28,7 @@
*
* @author Jos de Jong, <wjosdejong@gmail.com>
* @version 2.3.0-SNAPSHOT
* @date 2013-08-27
* @date 2013-08-28
*/
(function () {
@ -819,6 +819,7 @@ TreeEditor.prototype._createFrame = function () {
if (this.options && this.options.modes && this.options.modes.length) {
var modeBox = createModeBox(this, this.options.modes, this.options.mode);
this.menu.appendChild(modeBox);
this.dom.modeBox = modeBox;
}
// create search box
@ -1075,6 +1076,7 @@ TextEditor.prototype._create = function (container, options, json) {
var me = this;
this.container = container;
this.dom = {};
this.editor = undefined; // ace code editor
this.textarea = undefined; // plain text editor (fallback when Ace is not available)
@ -1125,6 +1127,7 @@ TextEditor.prototype._create = function (container, options, json) {
if (this.options && this.options.modes && this.options.modes.length) {
var modeBox = createModeBox(this, this.options.modes, this.options.mode);
this.menu.appendChild(modeBox);
this.dom.modeBox = modeBox;
}
this.content = document.createElement('div');
@ -5072,41 +5075,56 @@ History.prototype.redo = function () {
* @returns {HTMLElement} box
*/
function createModeBox(editor, modes, current) {
/**
* Switch the mode of the editor
* @param {String} mode
*/
function switchMode(mode) {
// switch mode
editor.setMode(mode);
// restore focus on mode box
var modeBox = editor.dom && editor.dom.modeBox;
if (modeBox) {
modeBox.focus();
}
}
// available modes
var availableModes = {
code: {
'text': 'Code',
'title': 'Switch to code highlighter',
'click': function () {
editor.setMode('code');
switchMode('code')
}
},
form: {
'text': 'Form',
'title': 'Switch to form editor',
'click': function () {
editor.setMode('form');
switchMode('form');
}
},
text: {
'text': 'Text',
'title': 'Switch to plain text editor',
'click': function () {
editor.setMode('text');
switchMode('text');
}
},
tree: {
'text': 'Tree',
'title': 'Switch to tree editor',
'click': function () {
editor.setMode('tree');
switchMode('tree');
}
},
view: {
'text': 'View',
'title': 'Switch to tree view',
'click': function () {
editor.setMode('view');
switchMode('view');
}
}
};

View File

@ -3,6 +3,7 @@
.jsoneditor-contextmenu {
position: absolute;
z-index: 999;
}
.jsoneditor-contextmenu ul {
@ -15,7 +16,6 @@
border: 1px solid #d3d3d3;
box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3);
z-index: 1;
list-style: none;
margin: 0;
padding: 0;

View File

@ -6,41 +6,56 @@
* @returns {HTMLElement} box
*/
function createModeBox(editor, modes, current) {
/**
* Switch the mode of the editor
* @param {String} mode
*/
function switchMode(mode) {
// switch mode
editor.setMode(mode);
// restore focus on mode box
var modeBox = editor.dom && editor.dom.modeBox;
if (modeBox) {
modeBox.focus();
}
}
// available modes
var availableModes = {
code: {
'text': 'Code',
'title': 'Switch to code highlighter',
'click': function () {
editor.setMode('code');
switchMode('code')
}
},
form: {
'text': 'Form',
'title': 'Switch to form editor',
'click': function () {
editor.setMode('form');
switchMode('form');
}
},
text: {
'text': 'Text',
'title': 'Switch to plain text editor',
'click': function () {
editor.setMode('text');
switchMode('text');
}
},
tree: {
'text': 'Tree',
'title': 'Switch to tree editor',
'click': function () {
editor.setMode('tree');
switchMode('tree');
}
},
view: {
'text': 'View',
'title': 'Switch to tree view',
'click': function () {
editor.setMode('view');
switchMode('view');
}
}
};

View File

@ -62,6 +62,7 @@ TextEditor.prototype._create = function (container, options, json) {
var me = this;
this.container = container;
this.dom = {};
this.editor = undefined; // ace code editor
this.textarea = undefined; // plain text editor (fallback when Ace is not available)
@ -112,6 +113,7 @@ TextEditor.prototype._create = function (container, options, json) {
if (this.options && this.options.modes && this.options.modes.length) {
var modeBox = createModeBox(this, this.options.modes, this.options.mode);
this.menu.appendChild(modeBox);
this.dom.modeBox = modeBox;
}
this.content = document.createElement('div');

View File

@ -578,6 +578,7 @@ TreeEditor.prototype._createFrame = function () {
if (this.options && this.options.modes && this.options.modes.length) {
var modeBox = createModeBox(this, this.options.modes, this.options.mode);
this.menu.appendChild(modeBox);
this.dom.modeBox = modeBox;
}
// create search box