StardewValley
/
jsoneditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implemented menu with expand all / collapse all buttons

This commit is contained in:
jos 2016-08-21 13:43:28 +02:00
parent 737963b908
commit 56fc3164ec
3 changed files with 105 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/TreeMode.js
View File

@ -45,15 +45,30 @@ export default class TreeMode extends Component {
}
render (props, state) {
return h('div', {class: 'jsoneditor', 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
})
return h('div', {class: 'jsoneditor'}, [
h('div', {class: 'jsoneditor-menu'}, [
h('button', {
class: 'jsoneditor-expand-all',
title: 'Expand all objects and arrays',
onClick: this.handleExpandAll
}),
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
* @param {Object | Array | string | number | boolean | null} json JSON data

5
src/develop.html
View File

@ -4,6 +4,11 @@
<meta charset="UTF-8">
<title>Develop JSONEditor Next</title>
<script src="../dist/jsoneditor.js"></script>
<style>
#container {
/*height: 300px;*/
}
</style>
</head>
<body>
<p>

62
src/jsoneditor.less
View File

@ -1,9 +1,64 @@
.jsoneditor {
border: 1px solid #3883fa;
overflow: auto;
width: 100%;
height: 100%;
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;
flex: 1 1 auto;
}
.jsoneditor-node {
@ -11,13 +66,12 @@
font: 14px Arial;
/* flexbox setup */
display: inline-flex;
flex-direction: row;
}
.jsoneditor-node > div {
flex: 1 1 auto;
flex: 0 0 auto;
}
ul.jsoneditor-list {
@ -36,7 +90,6 @@ ul.jsoneditor-list {
.jsoneditor-value,
.jsoneditor-readonly,
.jsoneditor-separator {
flex: 1 1 auto;
line-height: 20px;
font-family: droid sans mono, consolas, monospace, courier new, courier, sans-serif;
@ -62,6 +115,7 @@ ul.jsoneditor-list {
.jsoneditor-property,
.jsoneditor-value {
border-radius: 1px;
flex: 1 1 auto !important;
}
.jsoneditor-property:focus,