Implemented menu with expand all / collapse all buttons
This commit is contained in:
jos
parent
737963b908
commit
56fc3164ec
|
|
@ -45,15 +45,30 @@ export default class TreeMode extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render (props, state) {
|
render (props, state) {
|
||||||
return h('div', {class: 'jsoneditor', contentEditable: 'false', onClick: JSONNode.hideContextMenu}, [
|
return h('div', {class: 'jsoneditor'}, [
|
||||||
h('ul', {class: 'jsoneditor-list', contentEditable: 'false'}, [
|
h('div', {class: 'jsoneditor-menu'}, [
|
||||||
h(JSONNode, {
|
h('button', {
|
||||||
data: state.data,
|
class: 'jsoneditor-expand-all',
|
||||||
events: state.events,
|
title: 'Expand all objects and arrays',
|
||||||
options: state.options,
|
onClick: this.handleExpandAll
|
||||||
parent: null,
|
}),
|
||||||
prop: null
|
h('button', {
|
||||||
})
|
class: 'jsoneditor-collapse-all',
|
||||||
|
title: 'Collapse all objects and arrays',
|
||||||
|
onClick: this.handleCollapseAll
|
||||||
|
})
|
||||||
|
]),
|
||||||
|
|
||||||
|
h('div', {class: 'jsoneditor-treemode', contentEditable: 'false', onClick: JSONNode.hideContextMenu}, [
|
||||||
|
h('ul', {class: 'jsoneditor-list', contentEditable: 'false'}, [
|
||||||
|
h(JSONNode, {
|
||||||
|
data: state.data,
|
||||||
|
events: state.events,
|
||||||
|
options: state.options,
|
||||||
|
parent: null,
|
||||||
|
prop: null
|
||||||
|
})
|
||||||
|
])
|
||||||
])
|
])
|
||||||
])
|
])
|
||||||
}
|
}
|
||||||
|
|
@ -123,6 +138,24 @@ export default class TreeMode extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleExpandAll = () => {
|
||||||
|
const all = (path) => true
|
||||||
|
const expanded = true
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
data: expand(this.state.data, all, expanded)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
handleCollapseAll = () => {
|
||||||
|
const all = (path) => true
|
||||||
|
const expanded = false
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
data: expand(this.state.data, all, expanded)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Set JSON object in editor
|
* Set JSON object in editor
|
||||||
* @param {Object | Array | string | number | boolean | null} json JSON data
|
* @param {Object | Array | string | number | boolean | null} json JSON data
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,11 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Develop JSONEditor Next</title>
|
<title>Develop JSONEditor Next</title>
|
||||||
<script src="../dist/jsoneditor.js"></script>
|
<script src="../dist/jsoneditor.js"></script>
|
||||||
|
<style>
|
||||||
|
#container {
|
||||||
|
/*height: 300px;*/
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>
|
<p>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,64 @@
|
||||||
.jsoneditor {
|
.jsoneditor {
|
||||||
border: 1px solid #3883fa;
|
border: 1px solid #3883fa;
|
||||||
overflow: auto;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 150px;
|
min-height: 150px;
|
||||||
|
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jsoneditor-menu {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
background-color: #3883fa;
|
||||||
|
border-bottom: 1px solid #3883fa;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
margin: 2px;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background: transparent url('img/jsoneditor-icons.svg');
|
||||||
|
color: white;
|
||||||
|
opacity: 0.8;
|
||||||
|
|
||||||
|
font-family: arial, sans-serif;
|
||||||
|
font-size: 10pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: rgba(255,255,255,0.2);
|
||||||
|
border: 1px solid rgba(255,255,255,0.4);
|
||||||
|
}
|
||||||
|
button:focus,
|
||||||
|
button:active {
|
||||||
|
background-color: rgba(255,255,255,0.3);
|
||||||
|
}
|
||||||
|
button:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.jsoneditor-expand-all {
|
||||||
|
background-position: 0 -120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.jsoneditor-collapse-all {
|
||||||
|
background-position: 0 -96px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.jsoneditor-treemode {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
padding: 2px 0;
|
padding: 2px 0;
|
||||||
|
flex: 1 1 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jsoneditor-node {
|
.jsoneditor-node {
|
||||||
|
|
@ -11,13 +66,12 @@
|
||||||
|
|
||||||
font: 14px Arial;
|
font: 14px Arial;
|
||||||
|
|
||||||
/* flexbox setup */
|
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jsoneditor-node > div {
|
.jsoneditor-node > div {
|
||||||
flex: 1 1 auto;
|
flex: 0 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.jsoneditor-list {
|
ul.jsoneditor-list {
|
||||||
|
|
@ -36,7 +90,6 @@ ul.jsoneditor-list {
|
||||||
.jsoneditor-value,
|
.jsoneditor-value,
|
||||||
.jsoneditor-readonly,
|
.jsoneditor-readonly,
|
||||||
.jsoneditor-separator {
|
.jsoneditor-separator {
|
||||||
flex: 1 1 auto;
|
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
|
|
||||||
font-family: droid sans mono, consolas, monospace, courier new, courier, sans-serif;
|
font-family: droid sans mono, consolas, monospace, courier new, courier, sans-serif;
|
||||||
|
|
@ -62,6 +115,7 @@ ul.jsoneditor-list {
|
||||||
.jsoneditor-property,
|
.jsoneditor-property,
|
||||||
.jsoneditor-value {
|
.jsoneditor-value {
|
||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
|
flex: 1 1 auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jsoneditor-property:focus,
|
.jsoneditor-property:focus,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue