Skip to content

Commit

Permalink
Create option to hide the blue main menu bar on top (josdejong#596)
Browse files Browse the repository at this point in the history 
* ability to hide main menu bar; minor fixes for typos, JSDoc etc.

* fix CSS issue when mainMenuBar is hidden in all modes; other minor refactoring
  • Loading branch information
@tanmayrajani @josdejong
tanmayrajani authored and josdejong committed Nov 12, 2018
1 parent 4e24601 commit d7551da
Show file tree
Hide file tree
Showing 6 changed files with 235 additions and 217 deletions.
4 changes: 4 additions & 0 deletions docs/api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,10 @@ Constructs a new JSONEditor.
- Can return an object `{startFrom: number, options: string[]}`. Here `startFrom` determines the start character from where the existing text will be replaced. `startFrom` is `0` by default, replacing the whole text.
- Can return a `Promise` resolving one of the return types above to support asynchronously retrieving a list with options.

- `{boolean} mainMenuBar`

Adds main menu bar - Contains format, sort, transform, search etc. functionality. True by default. Applicable in all types of `mode`.

- `{boolean} navigationBar`

Adds navigation bar to the menu - the navigation bar visualize the current position on the tree structure as well as allows breadcrumbs navigation. True by default. Only applicable when `mode` is 'tree', 'form' or 'view'.
Expand Down
22 changes: 16 additions & 6 deletions src/css/jsoneditor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,22 +253,32 @@ div.jsoneditor-outer {
position: static;
width: 100%;
height: 100%;
margin: -35px 0 0 0;
padding: 35px 0 0 0;
margin: 0;
padding: 0;

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

div.jsoneditor-outer.has-nav-bar {
margin: -61px 0 0 0;
padding: 61px 0 0 0;
margin-top: -26px;
padding-top: 26px;
}

div.jsoneditor-outer.has-status-bar {
margin: -35px 0 -26px 0;
padding: 35px 0 26px 0;
margin-bottom: -26px;
padding-bottom: 26px;
}

div.jsoneditor-outer.has-main-menu-bar {
margin-top: -35px;
padding-top: 35px;
}

div.jsoneditor-outer.has-nav-bar.has-main-menu-bar {
margin-top: -61px;
padding-top: 61px;
}

textarea.jsoneditor-text,
Expand Down
2 changes: 1 addition & 1 deletion src/js/JSONEditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ JSONEditor.VALID_OPTIONS = [
'colorPicker', 'onColorPicker',
'timestampTag',
'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation',
'sortObjectKeys', 'navigationBar', 'statusBar', 'languages', 'language', 'enableSort', 'enableTransform'
'sortObjectKeys', 'navigationBar', 'statusBar', 'mainMenuBar', 'languages', 'language', 'enableSort', 'enableTransform'
];

/**
Expand Down
6 changes: 3 additions & 3 deletions src/js/Node.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1396,7 +1396,7 @@ Node.prototype.changeType = function (newType) {
this.childs = [];
}

this.childs.forEach(function (child, index) {
this.childs.forEach(function (child) {
child.clearDom();
delete child.index;
child.fieldEditable = true;
Expand Down Expand Up @@ -3372,7 +3372,7 @@ Node.prototype._showColorPicker = function () {
}
});
}
}
};

/**
* Remove nodes
Expand Down Expand Up @@ -3870,7 +3870,7 @@ Node.targetIsColorPicker = function (target) {
}

return false;
}
};

/**
* Remove the focus of given nodes, and move the focus to the (a) node before,
Expand Down
196 changes: 100 additions & 96 deletions src/js/textmode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,13 @@ textmode.create = function (container, options) {
// read options
options = options || {};

if(typeof options.statusBar === 'undefined') {
if (typeof options.statusBar === 'undefined') {
options.statusBar = true;
}

// setting default for textmode
options.mainMenuBar = options.mainMenuBar !== false;

this.options = options;

// indentation
Expand Down Expand Up @@ -108,78 +111,97 @@ textmode.create = function (container, options) {
this.frame.onkeydown = function (event) {
me._onKeyDown(event);
};

// create menu
this.menu = document.createElement('div');
this.menu.className = 'jsoneditor-menu';
this.frame.appendChild(this.menu);

// create format button
var buttonFormat = document.createElement('button');
buttonFormat.type = 'button';
buttonFormat.className = 'jsoneditor-format';
buttonFormat.title = 'Format JSON data, with proper indentation and line feeds (Ctrl+\\)';
this.menu.appendChild(buttonFormat);
buttonFormat.onclick = function () {
try {
me.format();
me._onChange();
}
catch (err) {
me._onError(err);
}
};

// create compact button
var buttonCompact = document.createElement('button');
buttonCompact.type = 'button';
buttonCompact.className = 'jsoneditor-compact';
buttonCompact.title = 'Compact JSON data, remove all whitespaces (Ctrl+Shift+\\)';
this.menu.appendChild(buttonCompact);
buttonCompact.onclick = function () {
try {
me.compact();
me._onChange();
}
catch (err) {
me._onError(err);
}
};
this.content = document.createElement('div');
this.content.className = 'jsoneditor-outer';

// create repair button
var buttonRepair = document.createElement('button');
buttonRepair.type = 'button';
buttonRepair.className = 'jsoneditor-repair';
buttonRepair.title = 'Repair JSON: fix quotes and escape characters, remove comments and JSONP notation, turn JavaScript objects into JSON.';
this.menu.appendChild(buttonRepair);
buttonRepair.onclick = function () {
try {
me.repair();
me._onChange();
}
catch (err) {
me._onError(err);
if (this.options.mainMenuBar) {
util.addClassName(this.content, 'has-main-menu-bar');

// create menu
this.menu = document.createElement('div');
this.menu.className = 'jsoneditor-menu';
this.frame.appendChild(this.menu);

// create format button
var buttonFormat = document.createElement('button');
buttonFormat.type = 'button';
buttonFormat.className = 'jsoneditor-format';
buttonFormat.title = 'Format JSON data, with proper indentation and line feeds (Ctrl+\\)';
this.menu.appendChild(buttonFormat);
buttonFormat.onclick = function () {
try {
me.format();
me._onChange();
}
catch (err) {
me._onError(err);
}
};

// create compact button
var buttonCompact = document.createElement('button');
buttonCompact.type = 'button';
buttonCompact.className = 'jsoneditor-compact';
buttonCompact.title = 'Compact JSON data, remove all whitespaces (Ctrl+Shift+\\)';
this.menu.appendChild(buttonCompact);
buttonCompact.onclick = function () {
try {
me.compact();
me._onChange();
}
catch (err) {
me._onError(err);
}
};

// create repair button
var buttonRepair = document.createElement('button');
buttonRepair.type = 'button';
buttonRepair.className = 'jsoneditor-repair';
buttonRepair.title = 'Repair JSON: fix quotes and escape characters, remove comments and JSONP notation, turn JavaScript objects into JSON.';
this.menu.appendChild(buttonRepair);
buttonRepair.onclick = function () {
try {
me.repair();
me._onChange();
}
catch (err) {
me._onError(err);
}
};

// create mode box
if (this.options && this.options.modes && this.options.modes.length) {
this.modeSwitcher = new ModeSwitcher(this.menu, this.options.modes, this.options.mode, function onSwitch(mode) {
// switch mode and restore focus
me.setMode(mode);
me.modeSwitcher.focus();
});
}
};

// create mode box
if (this.options && this.options.modes && this.options.modes.length) {
this.modeSwitcher = new ModeSwitcher(this.menu, this.options.modes, this.options.mode, function onSwitch(mode) {
// switch mode and restore focus
me.setMode(mode);
me.modeSwitcher.focus();
});
if (this.mode == 'code') {
var poweredBy = document.createElement('a');
poweredBy.appendChild(document.createTextNode('powered by ace'));
poweredBy.href = 'http://ace.ajax.org';
poweredBy.target = '_blank';
poweredBy.className = 'jsoneditor-poweredBy';
poweredBy.onclick = function () {
// TODO: this anchor falls below the margin of the content,
// therefore the normal a.href does not work. We use a click event
// for now, but this should be fixed.
window.open(poweredBy.href, poweredBy.target);
};
this.menu.appendChild(poweredBy);
}
}

var emptyNode = {};
var isReadOnly = (this.options.onEditable
&& typeof(this.options.onEditable === 'function')
&& !this.options.onEditable(emptyNode));

this.content = document.createElement('div');
this.content.className = 'jsoneditor-outer';
this.frame.appendChild(this.content);

this.container.appendChild(this.frame);

if (this.mode == 'code') {
Expand Down Expand Up @@ -224,19 +246,6 @@ textmode.create = function (container, options) {
});
}

var poweredBy = document.createElement('a');
poweredBy.appendChild(document.createTextNode('powered by ace'));
poweredBy.href = 'http://ace.ajax.org';
poweredBy.target = '_blank';
poweredBy.className = 'jsoneditor-poweredBy';
poweredBy.onclick = function () {
// TODO: this anchor falls below the margin of the content,
// therefore the normal a.href does not work. We use a click event
// for now, but this should be fixed.
window.open(poweredBy.href, poweredBy.target);
};
this.menu.appendChild(poweredBy);

// register onchange event
aceEditor.on('change', this._onChange.bind(this));
aceEditor.on('changeSelection', this._onSelect.bind(this));
Expand Down Expand Up @@ -269,12 +278,12 @@ textmode.create = function (container, options) {
this.dom.validationErrorsContainer = validationErrorsContainer;
this.frame.appendChild(validationErrorsContainer);

var additinalErrorsIndication = document.createElement('div');
additinalErrorsIndication.style.display = 'none';
additinalErrorsIndication.className = "jsoneditor-additional-errors fadein";
additinalErrorsIndication.innerHTML = "Scroll for more ▿";
this.dom.additinalErrorsIndication = additinalErrorsIndication;
validationErrorsContainer.appendChild(additinalErrorsIndication);
var additionalErrorsIndication = document.createElement('div');
additionalErrorsIndication.style.display = 'none';
additionalErrorsIndication.className = "jsoneditor-additional-errors fadein";
additionalErrorsIndication.innerHTML = "Scroll for more ▿";
this.dom.additionalErrorsIndication = additionalErrorsIndication;
validationErrorsContainer.appendChild(additionalErrorsIndication);

if (options.statusBar) {
util.addClassName(this.content, 'has-status-bar');
Expand Down Expand Up @@ -428,20 +437,18 @@ textmode._onKeyDown = function (event) {

/**
* Event handler for mousedown.
* @param {Event} event
* @private
*/
textmode._onMouseDown = function (event) {
textmode._onMouseDown = function () {
this._updateCursorInfo();
this._emitSelectionChange();
};

/**
* Event handler for blur.
* @param {Event} event
* @private
*/
textmode._onBlur = function (event) {
textmode._onBlur = function () {
var me = this;
// this allows to avoid blur when clicking inner elements (like the errors panel)
// just make sure to set the isFocused to true on the inner element onclick callback
Expand Down Expand Up @@ -481,7 +488,7 @@ textmode._updateCursorInfo = function () {
line: line,
column: col,
count: count
}
};

if(me.options.statusBar) {
updateDisplay();
Expand All @@ -500,7 +507,7 @@ textmode._updateCursorInfo = function () {
line: line,
column: col,
count: count
}
};

if(this.options.statusBar) {
updateDisplay();
Expand Down Expand Up @@ -528,7 +535,7 @@ textmode._emitSelectionChange = function () {
var currentSelection = this.getTextSelection();
this._selectionChangedHandler(currentSelection.start, currentSelection.end, currentSelection.text);
}
}
};

/**
* refresh ERROR annotations state
Expand All @@ -543,7 +550,7 @@ textmode._refreshAnnotations = function () {
var errEnnotations = session.getAnnotations().filter(function(annotation) {return annotation.type === 'error' });
session.setAnnotations(errEnnotations);
}
}
};

/**
* Destroy the editor. Clean up DOM, event listeners, and web workers.
Expand Down Expand Up @@ -848,7 +855,7 @@ textmode._renderErrors = function(errors) {
if (this.dom.validationErrors) {
this.dom.validationErrors.parentNode.removeChild(this.dom.validationErrors);
this.dom.validationErrors = null;
this.dom.additinalErrorsIndication.style.display = 'none';
this.dom.additionalErrorsIndication.style.display = 'none';

this.content.style.marginBottom = '';
this.content.style.paddingBottom = '';
Expand Down Expand Up @@ -933,12 +940,12 @@ textmode._renderErrors = function(errors) {

this.dom.validationErrors = validationErrors;
this.dom.validationErrorsContainer.appendChild(validationErrors);
this.dom.additinalErrorsIndication.title = errors.length + " errors total";
this.dom.additionalErrorsIndication.title = errors.length + " errors total";

if (this.dom.validationErrorsContainer.clientHeight < this.dom.validationErrorsContainer.scrollHeight) {
this.dom.additinalErrorsIndication.style.display = 'block';
this.dom.additionalErrorsIndication.style.display = 'block';
this.dom.validationErrorsContainer.onscroll = function () {
me.dom.additinalErrorsIndication.style.display =
me.dom.additionalErrorsIndication.style.display =
(me.dom.validationErrorsContainer.clientHeight > 0 && me.dom.validationErrorsContainer.scrollTop === 0) ? 'block' : 'none';
}
} else {
Expand Down Expand Up @@ -1027,13 +1034,10 @@ textmode.getTextSelection = function () {
};

/**
* Callback registraion for selection change
* Callback registration for selection change
* @param {selectionCallback} callback
*
* @callback selectionCallback
* @param {{row:Number, column:Number}} startPos selection start position
* @param {{row:Number, column:Number}} endPos selected end position
* @param {String} text selected text
*/
textmode.onTextSelectionChange = function (callback) {
if (typeof callback === 'function') {
Expand Down
Loading

0 comments on commit d7551da

Please sign in to comment.