Restore focus after switching mode. Fixed z-index issue with context menu.
This commit is contained in:
parent
5a7a76cf0b
commit
a33bc3e119
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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;
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue