feat(popover): new verticalPosition parameter to force popover vertical positioning

nolimits4web · nolimits4web · commit 27774e2d2a2e · 2022-05-17T12:01:11.000+03:00
diff --git a/src/core/components/popover/popover-class.js b/src/core/components/popover/popover-class.js
@@ -185,7 +185,7 @@ class Popover extends Modal {
   resize() {
     const popover = this;
     const { app, $el, $targetEl, $angleEl } = popover;
-    const { targetX, targetY } = popover.params;
+    const { targetX, targetY, verticalPosition } = popover.params;
     $el.css({ left: '', top: '' });
     const [width, height] = [$el.width(), $el.height()];
     let angleSize = 0;
@@ -233,13 +233,20 @@ class Popover extends Modal {
 
     let [left, top, diff] = [0, 0, 0];
     // Top Position
-    let position = app.theme === 'md' ? 'bottom' : 'top';
+    const forcedPosition = verticalPosition === 'auto' ? false : verticalPosition;
+    let position = forcedPosition || (app.theme === 'md' ? 'bottom' : 'top');
     if (app.theme === 'md') {
-      if (height < app.height - targetOffsetTop - targetHeight) {
+      if (
+        forcedPosition === 'bottom' ||
+        (!forcedPosition && height < app.height - targetOffsetTop - targetHeight)
+      ) {
         // On bottom
         position = 'bottom';
         top = targetOffsetTop + targetHeight;
-      } else if (height < targetOffsetTop - safeAreaTop) {
+      } else if (
+        forcedPosition === 'top' ||
+        (!forcedPosition && height < targetOffsetTop - safeAreaTop)
+      ) {
         // On top
         top = targetOffsetTop - height;
         position = 'top';
@@ -264,10 +271,16 @@ class Popover extends Modal {
       $el.addClass(`popover-on-${position} popover-on-${hPosition}`);
     } else {
       // ios and aurora
-      if (height + angleSize < targetOffsetTop - safeAreaTop) {
+      if (
+        forcedPosition === 'top' ||
+        (!forcedPosition && height + angleSize < targetOffsetTop - safeAreaTop)
+      ) {
         // On top
         top = targetOffsetTop - height - angleSize;
-      } else if (height + angleSize < app.height - targetOffsetTop - targetHeight) {
+      } else if (
+        forcedPosition === 'bottom' ||
+        (!forcedPosition && height + angleSize < app.height - targetOffsetTop - targetHeight)
+      ) {
         // On bottom
         position = 'bottom';
         top = targetOffsetTop + targetHeight + angleSize;
diff --git a/src/core/components/popover/popover.d.ts b/src/core/components/popover/popover.d.ts
@@ -45,6 +45,8 @@ export namespace Popover {
     targetHeight?: number;
     /** Element to mount modal to. (default app.el) */
     containerEl?: HTMLElement | CSSSelector;
+    /** Force popover vertical position, can be 'auto', 'top' or 'bottom' (default 'auto')  */
+    verticalPosition?: string;
     /** Object with events handlers.. */
     on?: {
       [event in keyof Events]?: Events[event];
diff --git a/src/core/components/popover/popover.js b/src/core/components/popover/popover.js
@@ -7,6 +7,7 @@ export default {
   name: 'popover',
   params: {
     popover: {
+      verticalPosition: 'auto',
       backdrop: true,
       backdropEl: undefined,
       backdropUnique: false,
diff --git a/src/react/components/popover.jsx b/src/react/components/popover.jsx
@@ -23,6 +23,7 @@ import { Popover } from 'framework7/types';
   closeByOutsideClick? : boolean
   closeOnEscape? : boolean
   containerEl? : string | object
+  verticalPosition?: string
   COLOR_PROPS
   onPopoverOpen? : (instance?: Popover.Popover) => void
   onPopoverOpened? : (instance?: Popover.Popover) => void
@@ -47,6 +48,7 @@ const Popover = forwardRef((props, ref) => {
     closeByOutsideClick,
     closeOnEscape,
     containerEl,
+    verticalPosition,
   } = props;
 
   const extraAttrs = getExtraAttrs(props);
@@ -109,6 +111,7 @@ const Popover = forwardRef((props, ref) => {
     if ('backdropEl' in props) popoverParams.backdropEl = backdropEl;
     if ('animate' in props) popoverParams.animate = animate;
     if ('containerEl' in props) popoverParams.containerEl = containerEl;
+    if ('verticalPosition' in props) popoverParams.verticalPosition = verticalPosition;
 
     f7ready(() => {
       f7Popover.current = f7.popover.create(popoverParams);
diff --git a/src/svelte/components/popover.svelte b/src/svelte/components/popover.svelte
@@ -20,6 +20,7 @@
   export let closeByOutsideClick = undefined;
   export let closeOnEscape = undefined;
   export let containerEl = undefined;
+  export let verticalPosition = undefined;
 
   let el;
   let f7Popover;
@@ -95,6 +96,7 @@
     if (typeof backdrop !== 'undefined') params.backdrop = backdrop;
     if (typeof backdropEl !== 'undefined') params.backdropEl = backdropEl;
     if (typeof containerEl !== 'undefined') params.containerEl = containerEl;
+    if (typeof verticalPosition !== 'undefined') params.verticalPosition = verticalPosition;
 
     f7ready(() => {
       f7Popover = app.f7.popover.create(params);
diff --git a/src/vue/components/popover.vue b/src/vue/components/popover.vue
@@ -47,6 +47,10 @@ export default {
       type: [String, Object],
       default: undefined,
     },
+    verticalPosition: {
+      type: String,
+      default: undefined,
+    },
     ...colorProps,
   },
   emits: ['popover:open', 'popover:opened', 'popover:close', 'popover:closed', 'update:opened'],
@@ -108,6 +112,7 @@ export default {
         backdrop,
         backdropEl,
         containerEl,
+        verticalPosition,
       } = props;
       if (typeof targetEl !== 'undefined') popoverParams.targetEl = targetEl;
       if (typeof closeByBackdropClick !== 'undefined')
@@ -118,6 +123,8 @@ export default {
       if (typeof backdrop !== 'undefined') popoverParams.backdrop = backdrop;
       if (typeof backdropEl !== 'undefined') popoverParams.backdropEl = backdropEl;
       if (typeof containerEl !== 'undefined') popoverParams.containerEl = containerEl;
+      if (typeof verticalPosition !== 'undefined')
+        popoverParams.verticalPosition = verticalPosition;
 
       f7ready(() => {
         f7Popover.value = f7.popover.create(popoverParams);
