Skip to content

Add support for calculate and dynamically change offset position for … - #24208

Closed
romanlex wants to merge 0 commit into
twbs:v4-devfrom
romanlex:v4-dev
Closed

romanlex wants to merge 0 commit into
twbs:v4-devfrom
romanlex:v4-dev

Conversation

@romanlex

@romanlex romanlex commented Oct 2, 2017

Copy link
Copy Markdown
Contributor

Sorry for bad English.
Add support for calculate and dynamically change offset position for dropdown menu.
Function call always when call Popper.js modifierFn.
Now I can change dynamically position of dropdown menu

            $('[data-toggle="dropdown"]').dropdown({
                offsetFn: function(data) {
                    data.left = -100;
                    return data
                }
            });

@XhmikosR
XhmikosR requested a review from Johann-S October 2, 2017 15:30
@XhmikosR XhmikosR added js JavaScript or TypeScript sources and plugins v4 v4, the frozen docs on gh-pages labels Oct 2, 2017
@romanlex

romanlex commented Oct 2, 2017 •

Copy link
Copy Markdown
Contributor Author

When use this code found maybe bug in Popper.js(( Cannot set offset.left more when element width but can set any negative values. Maybe it's logic of Popper

PS
I check and confirm what offset.left cannot be more when reference width(button width)

@romanlex

romanlex commented Oct 2, 2017 •

Copy link
Copy Markdown
Contributor Author

I think what better send all popper params, because it's more customizable solution and can change more settings of Popper

_getOffset(data) {
  const popperOffset = $.extend({}, data.offsets, this._config.offsetFn(data.offsets) || {})
  Object.keys(popperOffset).forEach((key) => {
    data.offsets[key] = popperOffset[key]
  })
  return data
}

With this code and this bind

const dropdownMegaToggle = $('.dropdown-toggle--mega');
dropdownMegaToggle.dropdown({
    offsetFn: 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
    }
});

Now I can change dropdown position
2017-10-02-20-29-15

Comment thread dist/js/bootstrap.bundle.js Outdated

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please do not commit dist files, you must revert this change

Comment thread docs/4.0/components/dropdowns.md Outdated

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need for an new option here, just check if offset is a function or not

Comment thread js/src/dropdown.js Outdated

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you have unrelated changes here and their...

@Johann-S

Johann-S commented Oct 3, 2017

Copy link
Copy Markdown
Member

Why did you closed your PR @romanlex ?

@romanlex

romanlex commented Oct 3, 2017

Copy link
Copy Markdown
Contributor Author

@Johann-S big thx for your reply and thx for what you teach and say how to properly make changes.
I tried to correct your comments and made a new one PR

@Johann-S

Johann-S commented Oct 3, 2017

Copy link
Copy Markdown
Member

Ok 😃 you're welcome 😉 but you can just update this one
I made an issue related to that PR #24223

@romanlex

romanlex commented Oct 3, 2017

Copy link
Copy Markdown
Contributor Author

I don't now ) How I can close this PR?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

js JavaScript or TypeScript sources and plugins v4 v4, the frozen docs on gh-pages

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants