Offset option for dropdown can be function (#24222)

* Offset option can be function (Popper.js)

* Fix...add function type for offset option

* Remove constants for popper config

* Optimize code. Remove foreach loop.

* Refactoring. Remove getOffset method

diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md
index cdf713b03f89d95ac026c75d5fac56ae715a7a7a..d38b410c78b5f4d09683c45b5ca07e58c485c165 100644 (file)
--- a/docs/4.0/components/dropdowns.md
+++ b/docs/4.0/components/dropdowns.md
@@ -588,7 +588,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
   <tbody>
     <tr>
       <td>offset</td>
-      <td>number | string</td>
+      <td>number | string | function</td>
       <td>0</td>
       <td>Offset of the dropdown relative to its target. For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..offset.offset">offset docs</a>.</td>
     </tr>

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index f76f84ef0adf1aec41f4f33224cce4162d5601d2..6681df668cadd4710f864097754a419add54408b 100644 (file)
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -80,7 +80,7 @@ const Dropdown = (() => {
   }
 
   const DefaultType = {
-    offset      : '(number|string)',
+    offset      : '(number|string|function)',
     flip        : 'boolean'
   }
 
@@ -246,12 +246,19 @@ const Dropdown = (() => {
     }
 
     _getPopperConfig() {
+      const offsetConf = {}
+      if (typeof this._config.offset === 'function') {
+        offsetConf.fn = (data) => {
+          data.offsets = $.extend({}, data.offsets, this._config.offset(data.offsets) || {})
+          return data
+        }
+      } else {
+        offsetConf.offset = this._config.offset
+      }
       const popperConfig = {
         placement : this._getPlacement(),
         modifiers : {
-          offset : {
-            offset : this._config.offset
-          },
+          offset : offsetConf,
           flip : {
             enabled : this._config.flip
           }