Offset option for dropdown can be function

[romanlex]

Fix #24208

Offset option can be function (Popper.js)

Add support for calculate and dynamically change offset position for dropdown menu.
Function call always when call Popper.js modifierFn.

With this code I can change any dropdown position as on picture

const dropdownMegaToggle = $('.dropdown-toggle--mega');
dropdownMegaToggle.dropdown({
    offset: function(data) {
        let popper = data.popper;
        let reference = data.reference;
        let w = $(window).width();
        let buttonOffset = dropdownMegaToggle.offset();
        popper.top = 100;
        reference.width = w / 2; // f*cking Popper.js crutch
        popper.left = w / 2 - popper.width / 2 - buttonOffset.left;
        return data
    }
});

Fix : #24223

[Johann-S]

Not a big fan to add new const for that 🤔

[romanlex]

Agree, const is redundant. Updated

[Johann-S]

IMO something like that would be enough :

const offsetConf = {}
if (typeof this._config.offset === 'function') {
  offsetConf.offsetFn = (data) => this._getOffset(data)
} else {
  offsetConf.offset = this._config.offset
}

[romanlex]

I agree with your. It's better solution. Const is redundant

_getPopperConfig() {
      const offsetConf = {}
      if (typeof this._config.offset === 'function') {
        offsetConf.fn = (data) => this._getOffset(data)
      } else {
        offsetConf.offset = this._config.offset
      }
      const popperConfig = {
        placement : this._getPlacement(),
        modifiers : {
          offset : offsetConf,
          flip : {
            enabled : this._config.flip
          }
        }
      }

      // Disable Popper.js for Dropdown in Navbar
      if (this._inNavbar) {
        popperConfig.modifiers.applyStyle = {
          enabled: !this._inNavbar
        }
      }
      return popperConfig
    }

[Johann-S]

Sorry to ask I don't know well offset function from Popper.js but why do you need that ?

Ok I read a bit and IMO if you just do return $.extend({}, data.offsets, this._config.offset(data.offsets) || {}) it will be enough here

[romanlex]

data object has many another keys. We need to change only data.offsets and not other. If we return only extended object with data.offsets - Popper is broken

[Johann-S]

That's right 👍 but instead of a Foreach you just have to do :
data.offsets = popperOffset

[romanlex]

Yup. Agree :) Sorry don't know how I can stick new changes in this PR romanlex@9be393b

[Johann-S]

Thank you very much @romanlex to tackled that 👍

[Johann-S]

I was thinking maybe we should remove _getOffset method because that's not something we will use outside of this and remplaced it by :

offsetConf.fn = (data) => {
     data.offsets = $.extend({}, data.offsets, this._config.offset(data.offsets) || {})
     return data
}

Can you give it a try ?

[romanlex]

Remove this method but in my opinion this is less readable. On the other hand, the method is not needed, because obviously not planned to manage offseting inside boostrap