UX: adjust positioning of auto complete vertical
On iPad portrait autocomplete would render off screen
This commit is contained in:
parent
487ef9773f
commit
a24b9981c6
|
@ -253,6 +253,9 @@ export default function(options) {
|
||||||
return $(links[selectedOption]).addClass("selected");
|
return $(links[selectedOption]).addClass("selected");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// a sane spot below cursor
|
||||||
|
const BELOW = -32;
|
||||||
|
|
||||||
function renderAutocomplete() {
|
function renderAutocomplete() {
|
||||||
if (div) {
|
if (div) {
|
||||||
div.hide().remove();
|
div.hide().remove();
|
||||||
|
@ -278,7 +281,7 @@ export default function(options) {
|
||||||
left: 0,
|
left: 0,
|
||||||
top: 0
|
top: 0
|
||||||
};
|
};
|
||||||
vOffset = -32;
|
vOffset = BELOW;
|
||||||
hOffset = 0;
|
hOffset = 0;
|
||||||
} else {
|
} else {
|
||||||
pos = me.caretPosition({
|
pos = me.caretPosition({
|
||||||
|
@ -289,6 +292,7 @@ export default function(options) {
|
||||||
hOffset = 27;
|
hOffset = 27;
|
||||||
if (options.treatAsTextarea) vOffset = -32;
|
if (options.treatAsTextarea) vOffset = -32;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.css({
|
div.css({
|
||||||
left: "-1000px"
|
left: "-1000px"
|
||||||
});
|
});
|
||||||
|
@ -302,18 +306,18 @@ export default function(options) {
|
||||||
if (!isInput && !options.treatAsTextarea) {
|
if (!isInput && !options.treatAsTextarea) {
|
||||||
vOffset = div.height();
|
vOffset = div.height();
|
||||||
|
|
||||||
if (
|
const spaceOutside =
|
||||||
window.innerHeight -
|
window.innerHeight -
|
||||||
me.outerHeight() -
|
me.outerHeight() -
|
||||||
$("header.d-header").innerHeight() <
|
$("header.d-header").innerHeight();
|
||||||
vOffset
|
|
||||||
) {
|
if (spaceOutside < vOffset && vOffset > pos.top) {
|
||||||
vOffset = -23;
|
vOffset = BELOW;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (Discourse.Site.currentProp("mobileView")) {
|
if (Discourse.Site.currentProp("mobileView")) {
|
||||||
if (me.height() / 2 >= pos.top) {
|
if (me.height() / 2 >= pos.top) {
|
||||||
vOffset = -23;
|
vOffset = BELOW;
|
||||||
}
|
}
|
||||||
if (me.width() / 2 <= pos.left) {
|
if (me.width() / 2 <= pos.left) {
|
||||||
hOffset = -div.width();
|
hOffset = -div.width();
|
||||||
|
@ -322,12 +326,19 @@ export default function(options) {
|
||||||
}
|
}
|
||||||
|
|
||||||
var mePos = me.position();
|
var mePos = me.position();
|
||||||
|
|
||||||
var borderTop = parseInt(me.css("border-top-width"), 10) || 0;
|
var borderTop = parseInt(me.css("border-top-width"), 10) || 0;
|
||||||
|
|
||||||
let left = mePos.left + pos.left + hOffset;
|
let left = mePos.left + pos.left + hOffset;
|
||||||
if (left < 0) {
|
if (left < 0) {
|
||||||
left = 0;
|
left = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const offsetTop = me.offset().top;
|
||||||
|
if (mePos.top + pos.top + borderTop - vOffset + offsetTop < 30) {
|
||||||
|
vOffset = BELOW;
|
||||||
|
}
|
||||||
|
|
||||||
div.css({
|
div.css({
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: mePos.top + pos.top - vOffset + borderTop + "px",
|
top: mePos.top + pos.top - vOffset + borderTop + "px",
|
||||||
|
|
Loading…
Reference in New Issue