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

Fixed color picker closing immediately after the first `onChange` event, and `onChange` events are now debounced

This commit is contained in:
jos 2018-08-29 11:06:11 +02:00
parent ed9a6d48f3
commit 321f947e72
3 changed files with 88 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
HISTORY.md
View File

@ -6,6 +6,8 @@ https://github.com/josdejong/jsoneditor
## 2018-08-29, version 5.24.3 ## 2018-08-29, version 5.24.3
- Fixed color picker not working in ES6 projects. - Fixed color picker not working in ES6 projects.
- Fixed color picker closing immediately after the first `onChange`
event, and `onChange` events are now debounced like all text inputs.
## 2018-08-27, version 5.24.2 ## 2018-08-27, version 5.24.2

4
src/js/Node.js
View File

@ -3362,15 +3362,13 @@ Node.prototype._showColorPicker = function () {
var colorAnchor = createAbsoluteAnchor(this.dom.color, this.editor.frame); var colorAnchor = createAbsoluteAnchor(this.dom.color, this.editor.frame);
this.editor.options.onColorPicker(colorAnchor, this.value, function onChange(value) { this.editor.options.onColorPicker(colorAnchor, this.value, function onChange(value) {
colorAnchor.destroy();
if (typeof value === 'string' && value !== node.value) { if (typeof value === 'string' && value !== node.value) {
// force recreating the color block, to cleanup any attached color picker // force recreating the color block, to cleanup any attached color picker
node._deleteDomColor(); node._deleteDomColor();
node.value = value; node.value = value;
node.updateDom(); node.updateDom();
node._onChangeValue(); node._debouncedOnChangeValue();
} }
}); });
} }

85
test/test_color_picker.html Normal file
View File

@ -0,0 +1,85 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
body {
font: 10.5pt arial;
color: #4d4d4d;
line-height: 150%;
width: 500px;
padding-left: 40px;
}
code {
background-color: #f5f5f5;
}
#jsoneditor {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<p>
Test color picker firing onChange on every change instead of onDone.
</p>
<form>
<div id="jsoneditor"></div>
</form>
<script>
var container, options, json, editor;
container = document.getElementById('jsoneditor');
options = {
onChangeJSON: function (json) {
console.log('onChangeJSON', json);
},
onColorPicker: function (parent, color, onChange) {
new JSONEditor.VanillaPicker({
parent: parent,
color: color,
popup: 'bottom',
onChange: function (color) {
var alpha = color.rgba[3]
var hex = (alpha === 1)
? color.hex.substr(0, 7) // return #RRGGBB
: color.hex // return #RRGGBBAA
onChange(hex)
}
}).show();
}
};
json = {
"array": [1, 2, [3,4,5]],
"boolean": true,
"color": "#82b92c",
"htmlcode": '&quot;',
"escaped_unicode": '\\u20b9',
"unicode": '\u20b9,\uD83D\uDCA9',
"return": '\n',
"null": null,
"number": 123,
"object": {"a": "b", "c": "d"},
"string": "Hello World",
"timestamp": 1534952749890,
"url": "http://jsoneditoronline.org"
};
editor = new JSONEditor(container, options, json);
console.log('json', json);
console.log('string', JSON.stringify(json));
</script>
</body>
</html>