Created by: 719media
ok, here is my first go at it.
i have not done any documentation since it's too early, but here are the main points/areas of discussion:
-
i got rid of $dropdown-margin-top so as to use the offset to more correctly position the dropdown (useful for when the dropdown can reposition based on viewport size)
-
since the dropdown-menu now gets moved out of being a child of .dropdown, it faciliated the need for some minor css changes (most notably .open .dropdown-menu needed to be changed since .dropdown-menu was no longer a child of .dropdown). This means that the "open" class is actually used in two separate elements now: the .dropdown, and the .dropdown-menu. This seems a little wierd to me, but I don't know how else to do it (we could technically probably get rid of the .open on the .dropdown element, but I left it intact for now, partially because there are unit tests around it, but also because there is a css class dealing with getting rid of an outline on focus on the .dropdown if the .dropdown-toggle is an tag).
-
instead of just using "position" and a map, like the toolip.js does, i just exposed the entire attachment/targetAttachment variables. I felt that more flexibility was better (centering a dropdown on the target, etc.) than creating a simplified map. Otherwise, we could create a map with the four most common: "bottom-left, bottom-right, top-left, top-right".
-
i still left "dropdown" as available to just instantiate by use of a class (vs. having to instantiate like .tooltip with javascript). this could be changed, but i was not sure what kind of discussions have happened around that, etc.
-
context.menu is available so that the .dropdown-menu object can always be referenced from the dropdown context, no matter where it may move in the DOM. This is necessary so that the menu can be found again after it has moved in the DOM. I think perhaps it's worth adding data-target (like the modal) so that this can be explicitly set if desired.
-
i defaulted the constraints to have the dropdown shift into viewport always, but maybe this is not desired to be default. i think normally when the dropdown goes out of viewport horizontally, users would almost always want/expect this. however, the "dropup" behavior for when it goes out of viewport vertically may not be desired as default?
-
i cleaned out a couple classes, but there are still some .dropup and navbar-fixed-bottom styles that can probably be removed throughout the scss
this is my first time using some of the bootstrap build tools (grunt, ruby, etc.) so my apologies if i did anything wacky.
New options:
attachment : 'top left',
targetAttachment : 'bottom left',
offset : '0 0',
constraints : [
{
to: 'window',
attachment: 'together',
pin: true
}
]