Make the popover positioning strategy configurable (#1415)

* Switch popper.js to use fixed positioning strategy * Make the popover positioning strategy configurable * Update pot file
WordPress · May 11, 2022 · b0565a1 · b0565a1
1 parent 1b01103
commit b0565a1
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 6 deletions.
diff --git a/src/components/VFilters/VFilterChecklist.vue b/src/components/VFilters/VFilterChecklist.vue
@@ -24,6 +24,7 @@
       <!-- License explanation -->
       <VPopover
         v-if="filterType === 'licenses'"
+        strategy="fixed"
         :label="$t('browse-page.aria.license-explanation').toString()"
       >
         <template #trigger="{ a11yProps }">

diff --git a/src/components/VPopover/VPopover.vue b/src/components/VPopover/VPopover.vue
@@ -23,6 +23,7 @@
       :visible="visibleRef"
       :trigger-element="triggerRef"
       :placement="placement"
+      :strategy="strategy"
       :hide-on-esc="hideOnEsc"
       :hide-on-click-outside="hideOnClickOutside"
       :auto-focus-on-show="autoFocusOnShow"
@@ -99,6 +100,19 @@ export default defineComponent({
         String
       ),
     },
+    /**
+     * The positioning strategy of the popover. If your reference element is in a fixed container
+     * use the fixed strategy; otherwise use the default, absolute strategy.
+     *
+     * @see https://popper.js.org/docs/v2/constructors/#strategy
+     *
+     * @default 'absolute'
+     */
+    strategy: {
+      type: /** @type {import('@nuxtjs/composition-api').PropType<import('@popperjs/core').PositioningStrategy>} */ (
+        String
+      ),
+    },
     /**
      * The label of the popover content. Must be provided if `labelledBy` is empty.
      *

diff --git a/src/components/VPopover/VPopoverContent.types.js b/src/components/VPopover/VPopoverContent.types.js
@@ -39,6 +39,15 @@ export const propTypes = {
     default: 'bottom-end',
     validate: (v) => popoverPlacements.includes(v),
   },
+  strategy: {
+    type: /** @type {import('@nuxtjs/composition-api').PropType<import('@popperjs/core').PositioningStrategy>} */ (
+      String
+    ),
+    default: 'absolute',
+    // todo: Use the actual PositioningStrategy type instead of manually writing these values,
+    // when this file is updated to TypeScript.
+    validate: (v) => ['absolute', 'fixed'].includes(v),
+  },
   zIndex: {
     type: Number,
   },

diff --git a/src/composables/use-popper.js b/src/composables/use-popper.js
@@ -18,6 +18,7 @@ export function usePopper({ popoverRef, popoverPropsRefs }) {
     [
       popoverPropsRefs.visible,
       popoverPropsRefs.placement,
+      popoverPropsRefs.strategy,
       popoverPropsRefs.triggerElement,
       popoverRef,
     ],
@@ -26,12 +27,16 @@ export function usePopper({ popoverRef, popoverPropsRefs }) {
      * @param {unknown} _
      * @param {(cb: () => void) => void} onInvalidate
      */
-    ([visible, placement, triggerElement, popover], _, onInvalidate) => {
+    (
+      [visible, placement, strategy, triggerElement, popover],
+      _,
+      onInvalidate
+    ) => {
       if (!(triggerElement && popover)) return
 
       popperInstanceRef.value = createPopper(triggerElement, popover, {
         placement,
-        strategy: 'absolute',
+        strategy,
         modifiers: [
           {
             name: 'eventListeners',

diff --git a/src/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot
@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2022-05-11T02:19:06+00:00\n"
+"POT-Creation-Date: 2022-05-11T19:21:48+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -142,7 +142,7 @@ msgid "Close"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VFilters/VFilterChecklist.vue:138
+#: src/components/VFilters/VFilterChecklist.vue:139
 msgctxt "modal.close-named"
 msgid "Close ###name###"
 msgstr ""
@@ -764,7 +764,7 @@ msgctxt "browse-page.aria.remove-filter"
 msgid "remove filter"
 msgstr ""
 
-#: src/components/VFilters/VFilterChecklist.vue:27
+#: src/components/VFilters/VFilterChecklist.vue:28
 msgctxt "browse-page.aria.license-explanation"
 msgid "license explanation"
 msgstr ""
@@ -926,7 +926,7 @@ msgctxt "filters.license-explanation.more.read-more"
 msgid "Read more"
 msgstr ""
 
-#: src/components/VFilters/VFilterChecklist.vue:118
+#: src/components/VFilters/VFilterChecklist.vue:119
 msgctxt "filters.search-by.title"
 msgid "Search By"
 msgstr ""