Render color picker on top when there is not enough space below (see #723)

This commit is contained in:
jos 2019-09-11 16:14:24 +02:00
parent 83e9e0655c
commit fe14ab5b79
2 changed files with 10 additions and 2 deletions

View File

@ -5,7 +5,7 @@ https://github.com/josdejong/jsoneditor
## not yet published, version 7.0.4 ## not yet published, version 7.0.4
- Fixed #723: schema error popup not always fully visible. - Fixed #723: schema error popup and color picker not always fully visible.
- Fixed wrong text color in search box when using JSONEditor in combination - Fixed wrong text color in search box when using JSONEditor in combination
with bootstrap. See #791. Thanks @dmitry-kulikov. with bootstrap. See #791. Thanks @dmitry-kulikov.
- Fixed react examples not working out of the box when cloning or downloading - Fixed react examples not working out of the box when cloning or downloading

View File

@ -124,10 +124,18 @@ treemode._setOptions = function (options) {
colorPicker: true, colorPicker: true,
onColorPicker: function (parent, color, onChange) { onColorPicker: function (parent, color, onChange) {
if (VanillaPicker) { if (VanillaPicker) {
// we'll render the color picker on top
// when there is not enough space below, and there is enough space above
const pickerHeight = 300; // estimated height of the color picker
const top = parent.getBoundingClientRect().top
const windowHeight = window.innerHeight
new VanillaPicker({ new VanillaPicker({
parent: parent, parent: parent,
color: color, color: color,
popup: 'bottom', popup: ((windowHeight - top) < pickerHeight && top > pickerHeight)
? 'top'
: 'bottom',
onDone: function (color) { onDone: function (color) {
const alpha = color.rgba[3] const alpha = color.rgba[3]
const hex = (alpha === 1) const hex = (alpha === 1)