Fix positioning with document scroll
parent
2e3f6a7ed4
commit
de88cea9d8
16
Picker.js
16
Picker.js
|
@ -4,7 +4,7 @@
|
||||||
// ...Or maybe a button with a popup menu
|
// ...Or maybe a button with a popup menu
|
||||||
// License: LGPLv3.0+
|
// License: LGPLv3.0+
|
||||||
// (c) Vitaliy Filippov 2019+
|
// (c) Vitaliy Filippov 2019+
|
||||||
// Version 2020-04-27
|
// Version 2021-09-09
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
|
@ -62,6 +62,8 @@ export default class Picker extends React.Component
|
||||||
// calendar-box is calendar.js's class
|
// calendar-box is calendar.js's class
|
||||||
if (e == this.picker || e == n || /\bcalendar-box\b/.exec(e.className||''))
|
if (e == this.picker || e == n || /\bcalendar-box\b/.exec(e.className||''))
|
||||||
{
|
{
|
||||||
|
ev.stopPropagation();
|
||||||
|
ev.preventDefault();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
e = e.parentNode;
|
e = e.parentNode;
|
||||||
|
@ -91,7 +93,9 @@ export default class Picker extends React.Component
|
||||||
|
|
||||||
renderPicker()
|
renderPicker()
|
||||||
{
|
{
|
||||||
return this.props.renderPicker();
|
return this.props.renderPicker({
|
||||||
|
blur: this.blur,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
render()
|
render()
|
||||||
|
@ -129,13 +133,13 @@ export default class Picker extends React.Component
|
||||||
if (this.props.autoHide && !this._blurSet)
|
if (this.props.autoHide && !this._blurSet)
|
||||||
{
|
{
|
||||||
this._blurSet = true;
|
this._blurSet = true;
|
||||||
document.body.addEventListener('click', this.blurExt);
|
document.body.addEventListener('mousedown', this.blurExt);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if (this._blurSet)
|
else if (this._blurSet)
|
||||||
{
|
{
|
||||||
this._blurSet = false;
|
this._blurSet = false;
|
||||||
document.body.removeEventListener('click', this.blurExt);
|
document.body.removeEventListener('mousedown', this.blurExt);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -144,7 +148,7 @@ export default class Picker extends React.Component
|
||||||
if (this._blurSet)
|
if (this._blurSet)
|
||||||
{
|
{
|
||||||
this._blurSet = false;
|
this._blurSet = false;
|
||||||
document.body.removeEventListener('click', this.blurExt);
|
document.body.removeEventListener('mousedown', this.blurExt);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -178,13 +182,11 @@ export default class Picker extends React.Component
|
||||||
direction = down ? 'down' : 'up';
|
direction = down ? 'down' : 'up';
|
||||||
}
|
}
|
||||||
let top = clientRect.top
|
let top = clientRect.top
|
||||||
+ (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop)
|
|
||||||
- (document.documentElement.clientTop || document.body.clientTop || 0);
|
- (document.documentElement.clientTop || document.body.clientTop || 0);
|
||||||
const max_height = (direction == 'down' ? screen_height-top-(clientRect.height||0)-32 : top-32);
|
const max_height = (direction == 'down' ? screen_height-top-(clientRect.height||0)-32 : top-32);
|
||||||
const height = Math.ceil(popup_size.height < max_height ? popup_size.height : max_height);
|
const height = Math.ceil(popup_size.height < max_height ? popup_size.height : max_height);
|
||||||
top = direction == 'down' ? (top + (clientRect.height||0)) : (top - height);
|
top = direction == 'down' ? (top + (clientRect.height||0)) : (top - height);
|
||||||
let left = (clientRect.left
|
let left = (clientRect.left
|
||||||
+ (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft)
|
|
||||||
- (document.documentElement.clientLeft || document.body.clientLeft || 0));
|
- (document.documentElement.clientLeft || document.body.clientLeft || 0));
|
||||||
if (left + popup_size.width > screen_width)
|
if (left + popup_size.width > screen_width)
|
||||||
{
|
{
|
||||||
|
|
Loading…
Reference in New Issue