Added css concat and minify to gulpfile
This commit is contained in:
jos
parent
d6da7f548e
commit
5f9d4a54a2
34
gulpfile.js
34
gulpfile.js
|
|
@ -1,6 +1,8 @@
|
|||
var fs = require('fs'),
|
||||
gulp = require('gulp'),
|
||||
gutil = require('gulp-util'),
|
||||
concatCss = require('gulp-concat-css'),
|
||||
minifyCSS = require('gulp-minify-css'),
|
||||
webpack = require('webpack'),
|
||||
uglify = require('uglify-js');
|
||||
|
||||
|
|
@ -12,7 +14,9 @@ var ENTRY = './src/js/JSONEditor.js',
|
|||
DIST = './',
|
||||
JSONEDITOR_JS = DIST + FILE,
|
||||
JSONEDITOR_MIN_JS = DIST + FILE_MIN,
|
||||
JSONEDITOR_MAP_JS = DIST + FILE_MAP;
|
||||
JSONEDITOR_MAP_JS = DIST + FILE_MAP,
|
||||
JSONEDITOR_CSS = DIST + 'jsoneditor.css',
|
||||
JSONEDITOR_MIN_CSS = DIST + 'jsoneditor.min.css';
|
||||
|
||||
// generate banner with today's date and correct version
|
||||
function createBanner() {
|
||||
|
|
@ -55,6 +59,7 @@ gulp.task('bundle', function (cb) {
|
|||
// update the banner contents (has a date in it which should stay up to date)
|
||||
bannerPlugin.banner = createBanner();
|
||||
|
||||
// bundle javascript
|
||||
compiler.run(function (err, stats) {
|
||||
if (err) {
|
||||
gutil.log(err);
|
||||
|
|
@ -62,12 +67,25 @@ gulp.task('bundle', function (cb) {
|
|||
|
||||
gutil.log('bundled ' + JSONEDITOR_JS);
|
||||
|
||||
// TODO: bundle css
|
||||
|
||||
// TODO: bundle and minify assets
|
||||
|
||||
cb();
|
||||
});
|
||||
|
||||
// bundle css
|
||||
gulp.src([
|
||||
'src/css/jsoneditor.css',
|
||||
'src/css/contextmenu.css',
|
||||
'src/css/menu.css',
|
||||
'src/css/searchbox.css'
|
||||
])
|
||||
.pipe(concatCss(JSONEDITOR_CSS))
|
||||
.pipe(gulp.dest('.'))
|
||||
.pipe(concatCss(JSONEDITOR_MIN_CSS))
|
||||
.pipe(minifyCSS())
|
||||
.pipe(gulp.dest('.'));
|
||||
|
||||
gutil.log('bundled ' + JSONEDITOR_CSS);
|
||||
gutil.log('bundled ' + JSONEDITOR_MIN_CSS);
|
||||
|
||||
});
|
||||
|
||||
gulp.task('minify', ['bundle'], function () {
|
||||
|
|
@ -79,9 +97,11 @@ gulp.task('minify', ['bundle'], function () {
|
|||
gutil.log('Minified ' + JSONEDITOR_MIN_JS);
|
||||
gutil.log('Mapped ' + JSONEDITOR_MAP_JS);
|
||||
|
||||
// TODO: minify css
|
||||
|
||||
});
|
||||
|
||||
|
||||
// TODO: bundle and minify assets
|
||||
|
||||
|
||||
// The default task (called when you run `gulp`)
|
||||
gulp.task('default', ['bundle', 'minify']);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
.jsoneditor .field,
|
||||
.jsoneditor .value,
|
||||
.jsoneditor .readonly {
|
||||
|
|
@ -12,6 +11,7 @@
|
|||
}
|
||||
|
||||
/* adjust margin of p elements inside editable divs, needed for Opera, IE */
|
||||
|
||||
.jsoneditor .field p,
|
||||
.jsoneditor .value p {
|
||||
margin: 0;
|
||||
|
|
@ -33,12 +33,12 @@
|
|||
}
|
||||
|
||||
.jsoneditor .field.empty {
|
||||
background-image: url('img/jsoneditor-icons.png');
|
||||
background-image: url("img/jsoneditor-icons.png");
|
||||
background-position: 0 -144px;
|
||||
}
|
||||
|
||||
.jsoneditor .value.empty {
|
||||
background-image: url('img/jsoneditor-icons.png');
|
||||
background-image: url("img/jsoneditor-icons.png");
|
||||
background-position: -48px -144px;
|
||||
}
|
||||
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
margin: 0;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background: transparent url('img/jsoneditor-icons.png');
|
||||
background: transparent url("img/jsoneditor-icons.png");
|
||||
}
|
||||
|
||||
.jsoneditor div.tree button.collapsed {
|
||||
|
|
@ -132,7 +132,6 @@
|
|||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
|
@ -141,7 +140,6 @@
|
|||
line-height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.jsoneditor div.tree table.tree {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
|
|
@ -154,11 +152,9 @@
|
|||
height: 100%;
|
||||
margin: -35px 0 0 0;
|
||||
padding: 35px 0 0 0;
|
||||
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -173,11 +169,9 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
border: none;
|
||||
background-color: white;
|
||||
resize: none;
|
||||
|
|
@ -188,7 +182,7 @@
|
|||
}
|
||||
|
||||
.jsoneditor div.tree button.dragarea {
|
||||
background: url('img/jsoneditor-icons.png') -72px -72px;
|
||||
background: url("img/jsoneditor-icons.png") -72px -72px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
|
|
@ -221,8 +215,6 @@
|
|||
font-size: 10pt;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
|
||||
/* ContextMenu - main menu */
|
||||
|
||||
.jsoneditor-contextmenu {
|
||||
|
|
@ -235,11 +227,9 @@
|
|||
left: 0;
|
||||
top: 0;
|
||||
width: 124px;
|
||||
|
||||
background: white;
|
||||
border: 1px solid #d3d3d3;
|
||||
box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3);
|
||||
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -254,12 +244,12 @@
|
|||
cursor: pointer;
|
||||
color: #4d4d4d;
|
||||
background: transparent;
|
||||
|
||||
line-height: 26px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Fix button padding in firefox */
|
||||
|
||||
.jsoneditor-contextmenu ul li button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
|
@ -290,7 +280,7 @@
|
|||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-image: url('img/jsoneditor-icons.png');
|
||||
background-image: url("img/jsoneditor-icons.png");
|
||||
}
|
||||
|
||||
.jsoneditor-contextmenu ul li button div.expand {
|
||||
|
|
@ -299,7 +289,7 @@
|
|||
height: 24px;
|
||||
padding: 0;
|
||||
margin: 0 4px 0 0;
|
||||
background: url('img/jsoneditor-icons.png') 0 -72px;
|
||||
background: url("img/jsoneditor-icons.png") 0 -72px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
|
|
@ -321,6 +311,7 @@
|
|||
.jsoneditor-contextmenu button.remove > .icon {
|
||||
background-position: -24px -24px;
|
||||
}
|
||||
|
||||
.jsoneditor-contextmenu button.remove:hover > .icon,
|
||||
.jsoneditor-contextmenu button.remove:focus > .icon {
|
||||
background-position: -24px 0;
|
||||
|
|
@ -329,6 +320,7 @@
|
|||
.jsoneditor-contextmenu button.append > .icon {
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
|
||||
.jsoneditor-contextmenu button.append:hover > .icon,
|
||||
.jsoneditor-contextmenu button.append:focus > .icon {
|
||||
background-position: 0 0;
|
||||
|
|
@ -337,6 +329,7 @@
|
|||
.jsoneditor-contextmenu button.insert > .icon {
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
|
||||
.jsoneditor-contextmenu button.insert:hover > .icon,
|
||||
.jsoneditor-contextmenu button.insert:focus > .icon {
|
||||
background-position: 0 0;
|
||||
|
|
@ -345,6 +338,7 @@
|
|||
.jsoneditor-contextmenu button.duplicate > .icon {
|
||||
background-position: -48px -24px;
|
||||
}
|
||||
|
||||
.jsoneditor-contextmenu button.duplicate:hover > .icon,
|
||||
.jsoneditor-contextmenu button.duplicate:focus > .icon {
|
||||
background-position: -48px 0;
|
||||
|
|
@ -353,6 +347,7 @@
|
|||
.jsoneditor-contextmenu button.sort-asc > .icon {
|
||||
background-position: -168px -24px;
|
||||
}
|
||||
|
||||
.jsoneditor-contextmenu button.sort-asc:hover > .icon,
|
||||
.jsoneditor-contextmenu button.sort-asc:focus > .icon {
|
||||
background-position: -168px 0;
|
||||
|
|
@ -361,6 +356,7 @@
|
|||
.jsoneditor-contextmenu button.sort-desc > .icon {
|
||||
background-position: -192px -24px;
|
||||
}
|
||||
|
||||
.jsoneditor-contextmenu button.sort-desc:hover > .icon,
|
||||
.jsoneditor-contextmenu button.sort-desc:focus > .icon {
|
||||
background-position: -192px 0;
|
||||
|
|
@ -381,11 +377,9 @@
|
|||
position: relative;
|
||||
left: -10px;
|
||||
top: 0;
|
||||
|
||||
border: none;
|
||||
box-shadow: inset 0 0 10px rgba(128, 128, 128, 0.5);
|
||||
padding: 0 10px;
|
||||
|
||||
/* TODO: transition is not supported on IE8-9 */
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
-moz-transition: all 0.3s ease-out;
|
||||
|
|
@ -393,8 +387,7 @@
|
|||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.jsoneditor-contextmenu ul li.selected ul {
|
||||
}
|
||||
|
||||
|
||||
.jsoneditor-contextmenu ul li ul li button {
|
||||
padding-left: 24px;
|
||||
|
|
@ -403,21 +396,22 @@
|
|||
.jsoneditor-contextmenu ul li ul li button:hover,
|
||||
.jsoneditor-contextmenu ul li ul li button:focus {
|
||||
background-color: #f5f5f5;
|
||||
|
||||
}
|
||||
|
||||
.jsoneditor-contextmenu button.type-string > .icon {
|
||||
background-position: -144px -24px;
|
||||
}
|
||||
|
||||
.jsoneditor-contextmenu button.type-string:hover > .icon,
|
||||
.jsoneditor-contextmenu button.type-string:focus > .icon,
|
||||
.jsoneditor-contextmenu button.type-string.selected > .icon{
|
||||
.jsoneditor-contextmenu button.type-string.selected > .icon {
|
||||
background-position: -144px 0;
|
||||
}
|
||||
|
||||
.jsoneditor-contextmenu button.type-auto > .icon {
|
||||
background-position: -120px -24px;
|
||||
}
|
||||
|
||||
.jsoneditor-contextmenu button.type-auto:hover > .icon,
|
||||
.jsoneditor-contextmenu button.type-auto:focus > .icon,
|
||||
.jsoneditor-contextmenu button.type-auto.selected > .icon {
|
||||
|
|
@ -427,18 +421,20 @@
|
|||
.jsoneditor-contextmenu button.type-object > .icon {
|
||||
background-position: -72px -24px;
|
||||
}
|
||||
|
||||
.jsoneditor-contextmenu button.type-object:hover > .icon,
|
||||
.jsoneditor-contextmenu button.type-object:focus > .icon,
|
||||
.jsoneditor-contextmenu button.type-object.selected > .icon{
|
||||
.jsoneditor-contextmenu button.type-object.selected > .icon {
|
||||
background-position: -72px 0;
|
||||
}
|
||||
|
||||
.jsoneditor-contextmenu button.type-array > .icon {
|
||||
background-position: -96px -24px;
|
||||
}
|
||||
|
||||
.jsoneditor-contextmenu button.type-array:hover > .icon,
|
||||
.jsoneditor-contextmenu button.type-array:focus > .icon,
|
||||
.jsoneditor-contextmenu button.type-array.selected > .icon{
|
||||
.jsoneditor-contextmenu button.type-array.selected > .icon {
|
||||
background-position: -96px 0;
|
||||
}
|
||||
|
||||
|
|
@ -446,8 +442,6 @@
|
|||
background-image: none;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
|
||||
.jsoneditor .menu {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
|
|
@ -457,7 +451,6 @@
|
|||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
color: #1A1A1A;
|
||||
background-color: #D5DDF6;
|
||||
border-bottom: 1px solid #97B0F8;
|
||||
|
|
@ -470,22 +463,22 @@
|
|||
padding: 0;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #aec0f8;
|
||||
background: #e3eaf6 url('img/jsoneditor-icons.png');
|
||||
background: #e3eaf6 url("img/jsoneditor-icons.png");
|
||||
color: #4D4D4D;
|
||||
opacity: 0.8;
|
||||
|
||||
font-family: arial, sans-serif;
|
||||
font-size: 10pt;
|
||||
|
||||
float: left;
|
||||
}
|
||||
|
||||
.jsoneditor .menu button:hover {
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.jsoneditor .menu button:active {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.jsoneditor .menu button:disabled {
|
||||
background-color: #e3eaf6;
|
||||
}
|
||||
|
|
@ -493,24 +486,31 @@
|
|||
.jsoneditor .menu button.collapse-all {
|
||||
background-position: 0 -96px;
|
||||
}
|
||||
|
||||
.jsoneditor .menu button.expand-all {
|
||||
background-position: 0 -120px;
|
||||
}
|
||||
|
||||
.jsoneditor .menu button.undo {
|
||||
background-position: -24px -96px;
|
||||
}
|
||||
|
||||
.jsoneditor .menu button.undo:disabled {
|
||||
background-position: -24px -120px;
|
||||
}
|
||||
|
||||
.jsoneditor .menu button.redo {
|
||||
background-position: -48px -96px;
|
||||
}
|
||||
|
||||
.jsoneditor .menu button.redo:disabled {
|
||||
background-position: -48px -120px;
|
||||
}
|
||||
|
||||
.jsoneditor .menu button.compact {
|
||||
background-position: -72px -96px;
|
||||
}
|
||||
|
||||
.jsoneditor .menu button.format {
|
||||
background-position: -72px -120px;
|
||||
}
|
||||
|
|
@ -546,8 +546,6 @@
|
|||
}
|
||||
|
||||
/* TODO: css for button:disabled is not supported by IE8 */
|
||||
|
||||
|
||||
.jsoneditor .search input,
|
||||
.jsoneditor .search .results {
|
||||
font-family: arial, sans-serif;
|
||||
|
|
@ -591,7 +589,7 @@
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
background: url('img/jsoneditor-icons.png');
|
||||
background: url("img/jsoneditor-icons.png");
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
|
|
@ -608,6 +606,7 @@
|
|||
cursor: pointer;
|
||||
background-position: -124px -73px;
|
||||
}
|
||||
|
||||
.jsoneditor .search button.next:hover {
|
||||
background-position: -124px -49px;
|
||||
}
|
||||
|
|
@ -617,7 +616,7 @@
|
|||
background-position: -148px -73px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.jsoneditor .search button.previous:hover {
|
||||
background-position: -148px -49px;
|
||||
}
|
||||
|
||||
|
|
|
|||
224
jsoneditor.js
224
jsoneditor.js
|
|
@ -328,7 +328,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
/* 1 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(4), __webpack_require__(5), __webpack_require__(6), __webpack_require__(7), __webpack_require__(8), __webpack_require__(3)], __WEBPACK_AMD_DEFINE_RESULT__ = (function (Highlighter, History, SearchBox, Node, modebox, util) {
|
||||
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5), __webpack_require__(6), __webpack_require__(7), __webpack_require__(8), __webpack_require__(4), __webpack_require__(3)], __WEBPACK_AMD_DEFINE_RESULT__ = (function (Highlighter, History, SearchBox, Node, modebox, util) {
|
||||
|
||||
/**
|
||||
* @constructor TreeEditor
|
||||
|
|
@ -1064,7 +1064,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
/* 2 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(8), __webpack_require__(3)], __WEBPACK_AMD_DEFINE_RESULT__ = (function (modebox, util) {
|
||||
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(4), __webpack_require__(3)], __WEBPACK_AMD_DEFINE_RESULT__ = (function (modebox, util) {
|
||||
|
||||
/**
|
||||
* Create a TextEditor and attach it to given container
|
||||
|
|
@ -1864,6 +1864,113 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
|
||||
/***/ },
|
||||
/* 4 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(9)], __WEBPACK_AMD_DEFINE_RESULT__ = (function (ContextMenu) {
|
||||
|
||||
/**
|
||||
* Create a mode box to be used in the editor menu's
|
||||
* @param {JSONEditor} editor
|
||||
* @param {String[]} modes Available modes: 'code', 'form', 'text', 'tree', 'view'
|
||||
* @param {String} current Available modes: 'code', 'form', 'text', 'tree', 'view'
|
||||
* @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 () {
|
||||
switchMode('code')
|
||||
}
|
||||
},
|
||||
form: {
|
||||
'text': 'Form',
|
||||
'title': 'Switch to form editor',
|
||||
'click': function () {
|
||||
switchMode('form');
|
||||
}
|
||||
},
|
||||
text: {
|
||||
'text': 'Text',
|
||||
'title': 'Switch to plain text editor',
|
||||
'click': function () {
|
||||
switchMode('text');
|
||||
}
|
||||
},
|
||||
tree: {
|
||||
'text': 'Tree',
|
||||
'title': 'Switch to tree editor',
|
||||
'click': function () {
|
||||
switchMode('tree');
|
||||
}
|
||||
},
|
||||
view: {
|
||||
'text': 'View',
|
||||
'title': 'Switch to tree view',
|
||||
'click': function () {
|
||||
switchMode('view');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// list the selected modes
|
||||
var items = [];
|
||||
for (var i = 0; i < modes.length; i++) {
|
||||
var mode = modes[i];
|
||||
var item = availableModes[mode];
|
||||
if (!item) {
|
||||
throw new Error('Unknown mode "' + mode + '"');
|
||||
}
|
||||
|
||||
item.className = 'type-modes' + ((current == mode) ? ' selected' : '');
|
||||
items.push(item);
|
||||
}
|
||||
|
||||
// retrieve the title of current mode
|
||||
var currentMode = availableModes[current];
|
||||
if (!currentMode) {
|
||||
throw new Error('Unknown mode "' + current + '"');
|
||||
}
|
||||
var currentTitle = currentMode.text;
|
||||
|
||||
// create the html element
|
||||
var box = document.createElement('button');
|
||||
box.className = 'modes separator';
|
||||
box.innerHTML = currentTitle + ' ▾';
|
||||
box.title = 'Switch editor mode';
|
||||
box.onclick = function () {
|
||||
var menu = new ContextMenu(items);
|
||||
menu.show(box);
|
||||
};
|
||||
|
||||
return box;
|
||||
}
|
||||
|
||||
return {
|
||||
create: createModeBox
|
||||
}
|
||||
}.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
|
||||
|
||||
|
||||
/***/ },
|
||||
/* 5 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
var __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_RESULT__ = (function () {
|
||||
|
|
@ -1955,7 +2062,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
}.call(exports, __webpack_require__, exports, module)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
|
||||
|
||||
/***/ },
|
||||
/* 5 */
|
||||
/* 6 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(3)], __WEBPACK_AMD_DEFINE_RESULT__ = (function (util) {
|
||||
|
|
@ -2184,7 +2291,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
|
||||
|
||||
/***/ },
|
||||
/* 6 */
|
||||
/* 7 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
var __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_RESULT__ = (function () {
|
||||
|
|
@ -2483,7 +2590,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
|
||||
|
||||
/***/ },
|
||||
/* 7 */
|
||||
/* 8 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(9), __webpack_require__(10), __webpack_require__(3)], __WEBPACK_AMD_DEFINE_RESULT__ = (function (ContextMenu, appendNodeFactory, util) {
|
||||
|
|
@ -5354,113 +5461,6 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
return Node;
|
||||
}.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
|
||||
|
||||
/***/ },
|
||||
/* 8 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(9)], __WEBPACK_AMD_DEFINE_RESULT__ = (function (ContextMenu) {
|
||||
|
||||
/**
|
||||
* Create a mode box to be used in the editor menu's
|
||||
* @param {JSONEditor} editor
|
||||
* @param {String[]} modes Available modes: 'code', 'form', 'text', 'tree', 'view'
|
||||
* @param {String} current Available modes: 'code', 'form', 'text', 'tree', 'view'
|
||||
* @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 () {
|
||||
switchMode('code')
|
||||
}
|
||||
},
|
||||
form: {
|
||||
'text': 'Form',
|
||||
'title': 'Switch to form editor',
|
||||
'click': function () {
|
||||
switchMode('form');
|
||||
}
|
||||
},
|
||||
text: {
|
||||
'text': 'Text',
|
||||
'title': 'Switch to plain text editor',
|
||||
'click': function () {
|
||||
switchMode('text');
|
||||
}
|
||||
},
|
||||
tree: {
|
||||
'text': 'Tree',
|
||||
'title': 'Switch to tree editor',
|
||||
'click': function () {
|
||||
switchMode('tree');
|
||||
}
|
||||
},
|
||||
view: {
|
||||
'text': 'View',
|
||||
'title': 'Switch to tree view',
|
||||
'click': function () {
|
||||
switchMode('view');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// list the selected modes
|
||||
var items = [];
|
||||
for (var i = 0; i < modes.length; i++) {
|
||||
var mode = modes[i];
|
||||
var item = availableModes[mode];
|
||||
if (!item) {
|
||||
throw new Error('Unknown mode "' + mode + '"');
|
||||
}
|
||||
|
||||
item.className = 'type-modes' + ((current == mode) ? ' selected' : '');
|
||||
items.push(item);
|
||||
}
|
||||
|
||||
// retrieve the title of current mode
|
||||
var currentMode = availableModes[current];
|
||||
if (!currentMode) {
|
||||
throw new Error('Unknown mode "' + current + '"');
|
||||
}
|
||||
var currentTitle = currentMode.text;
|
||||
|
||||
// create the html element
|
||||
var box = document.createElement('button');
|
||||
box.className = 'modes separator';
|
||||
box.innerHTML = currentTitle + ' ▾';
|
||||
box.title = 'Switch editor mode';
|
||||
box.onclick = function () {
|
||||
var menu = new ContextMenu(items);
|
||||
menu.show(box);
|
||||
};
|
||||
|
||||
return box;
|
||||
}
|
||||
|
||||
return {
|
||||
create: createModeBox
|
||||
}
|
||||
}.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
|
||||
|
||||
|
||||
/***/ },
|
||||
/* 9 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
12
package.json
12
package.json
|
|
@ -21,15 +21,13 @@
|
|||
},
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"jake": "latest",
|
||||
"jake-utils": "latest",
|
||||
"archiver": "latest",
|
||||
"clean-css": "latest",
|
||||
"ace": "git://github.com/ajaxorg/ace.git",
|
||||
"gulp": "latest",
|
||||
"gulp-concat-css": "^0.1.4",
|
||||
"gulp-minify-css": "^0.3.4",
|
||||
"gulp-util": "latest",
|
||||
"webpack": "latest",
|
||||
"uglify-js": "latest",
|
||||
"jsonlint": "latest",
|
||||
"ace": "git://github.com/ajaxorg/ace.git"
|
||||
"uglify-js": "latest",
|
||||
"webpack": "latest"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,10 @@
|
|||
location: '../src/js/',
|
||||
main: 'JSONEditor'
|
||||
}
|
||||
]
|
||||
],
|
||||
paths: {
|
||||
'theme-jsoneditor.js': '../src/js/ace/theme-jsoneditor.js'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -21,11 +24,10 @@
|
|||
<link rel="stylesheet" type="text/css" href="../jsoneditor.css">
|
||||
|
||||
<!-- ace editor -->
|
||||
<script type="text/javascript" src="../node_modules/ace/build/src-min/ace.js"></script>
|
||||
<script type="text/javascript" src="../src/js/ace/theme-jsoneditor.js"></script>
|
||||
<script type="text/javascript" src="../asset/ace/ace.js"></script>
|
||||
|
||||
<!-- json lint -->
|
||||
<script type="text/javascript" src="../node_modules/jsonlint/lib/jsonlint.js"></script>
|
||||
<script type="text/javascript" src="../asset/jsonlint/jsonlint.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
|
|
|
|||
|
|
@ -8,11 +8,10 @@
|
|||
<link rel="stylesheet" type="text/css" href="../jsoneditor.css">
|
||||
|
||||
<!-- ace editor -->
|
||||
<script type="text/javascript" src="../node_modules/ace/build/src-min/ace.js"></script>
|
||||
<script type="text/javascript" src="../src/js/ace/theme-jsoneditor.js"></script>
|
||||
<script type="text/javascript" src="../asset/ace/ace.js"></script>
|
||||
|
||||
<!-- json lint -->
|
||||
<script type="text/javascript" src="../node_modules/jsonlint/lib/jsonlint.js"></script>
|
||||
<script type="text/javascript" src="../asset/jsonlint/jsonlint.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
||||
|
||||
<!-- json editor -->
|
||||
<script type="text/javascript" src="../jsoneditor.min.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../jsoneditor.min.css">
|
||||
|
||||
<!-- ace editor -->
|
||||
<script type="text/javascript" src="../asset/ace/ace.js"></script>
|
||||
|
||||
<!-- json lint -->
|
||||
<script type="text/javascript" src="../asset/jsonlint/jsonlint.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10.5pt arial;
|
||||
color: #4d4d4d;
|
||||
line-height: 150%;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
#jsoneditor {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
Switch editor mode using the mode box.
|
||||
Note that the mode can be changed programmatically as well using the method
|
||||
<code>editor.setMode(mode)</code>, try it in the console of your browser.
|
||||
</p>
|
||||
|
||||
<div id="jsoneditor"></div>
|
||||
|
||||
<script type="text/javascript" >
|
||||
var container, options, json, editor;
|
||||
|
||||
container = document.getElementById('jsoneditor');
|
||||
|
||||
options = {
|
||||
mode: 'tree',
|
||||
modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
|
||||
error: function (err) {
|
||||
alert(err.toString());
|
||||
}
|
||||
};
|
||||
|
||||
json = {
|
||||
"array": [1, 2, 3],
|
||||
"boolean": true,
|
||||
"null": null,
|
||||
"number": 123,
|
||||
"object": {"a": "b", "c": "d"},
|
||||
"string": "Hello World"
|
||||
};
|
||||
|
||||
editor = new JSONEditor(container, options, json);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue