Tutorial: Bubble-Breite passt sich dynamisch an Platz neben Modal an
Bubble wird auf verfuegbaren Platz (min 260px) verkleinert und immer auf der Seite mit mehr Platz positioniert. Kein top-Fallback mehr der die Bubble aus dem Bildschirm schiebt.
Dieser Commit ist enthalten in:
@@ -1566,17 +1566,21 @@ const Tutorial = {
|
|||||||
|
|
||||||
if (isModalBubble) {
|
if (isModalBubble) {
|
||||||
// Fuer Modal-Steps: Platz links/rechts vom Modal pruefen
|
// Fuer Modal-Steps: Platz links/rechts vom Modal pruefen
|
||||||
var modalEl = document.querySelector(step.target);
|
var modalEl2 = document.querySelector(step.target);
|
||||||
var mRect = modalEl ? modalEl.getBoundingClientRect() : rect;
|
var mRect = modalEl2 ? modalEl2.getBoundingClientRect() : rect;
|
||||||
var spaceLeft = mRect.left;
|
var spaceLeft = mRect.left;
|
||||||
var spaceRight = vw - mRect.right;
|
var spaceRight = vw - mRect.right;
|
||||||
if (spaceRight >= bw + gap) {
|
var bestSpace = Math.max(spaceLeft, spaceRight);
|
||||||
|
// Bubble-Breite an verfuegbaren Platz anpassen (min 260px)
|
||||||
|
var modalBw = Math.min(bw, bestSpace - gap - 8);
|
||||||
|
modalBw = Math.max(modalBw, 260);
|
||||||
|
bw = modalBw;
|
||||||
|
bubble.style.width = bw + 'px';
|
||||||
|
// Seite mit mehr Platz waehlen
|
||||||
|
if (spaceRight >= spaceLeft) {
|
||||||
pos = 'right';
|
pos = 'right';
|
||||||
} else if (spaceLeft >= bw + gap) {
|
|
||||||
pos = 'left';
|
|
||||||
} else {
|
} else {
|
||||||
// Kein Platz links/rechts: Bubble ueber dem Feld im Modal platzieren
|
pos = 'left';
|
||||||
pos = 'top';
|
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (pos === 'bottom' && (visBottom + gap + bubbleHeight > vh)) pos = 'top';
|
if (pos === 'bottom' && (visBottom + gap + bubbleHeight > vh)) pos = 'top';
|
||||||
|
|||||||
In neuem Issue referenzieren
Einen Benutzer sperren