1
0
mirror of synced 2024-11-22 21:16:10 +03:00
Commit Graph

32 Commits

Author SHA1 Message Date
Kevin Brown
0de516f17a Add minimumResultsForSearch 2014-12-10 18:46:05 -05:00
Kevin Brown
f0017c024d Added support for a click mask
In past versions of Select2, a mask was used to detect clicks
outside of the dropdown. While this works with high accuracy, and
avoid many of the click issues we had with modals, it is no longer
the default close handler for Select2. It blocks any features on
the container from working without a second click, and introduces
odd edge cases that we cannot easily handle.
2014-12-05 22:44:41 -05:00
Kevin Brown
ce38cd5b9c Allow the dropdown to point up
Up until now, the container could only have a dropdown that was
displayed below the container. While this worked well, there are
some cases where the dropdown should be displayed above the
container. Most notably, this is when the conatainer is displayed
towards the bottom of the page, and displaying the dropdown would
cause the page to be extended. Because we close the dropdown
when the page is scrolled, the user would not be able to access any
options that were displayed outside of the viewpoint.

Because of the order that events are fired, we attach the handlers
for repositioning the dropdown after results are displayed when the
container is opened for the first time.  This allows it to be
registered after the results container registers their events, so
the dropdown is repositioned after the results have been displayed.

The logic for determining the direction that the dropdown will be
shown in is very similar to the positioning code used in
Select2 3.x. Unlike previous versions of Select2, a class is used
to indicate the direction of the dropdown, even if it is displaying
below the container.

The themes provided with Select2 have been updated to correctly
render the dropdown in both directions.
2014-12-05 20:09:42 -05:00
Kevin Brown
07575f051c Automatically close on scroll
This now matches how the browser works, where the dropdown is
closed when the window scrolls.

The arrow was also covering the clear placeholder icon, this has
now been fixed and the clear icon is now placed correctly.
2014-11-26 22:30:31 -05:00
Kevin Brown
7fc195f70d Fix hiding search
When the dropdown is in the dropdown that is attached to the body,
the call to `show` causes `display: inline` to be set directly on
the search container. This causes rendering issues, so this change
uses a class instead of calling `show` and `hide` directly.

This is most likely a jQuery bug of some form, as it only happens
when using the dropdown that is attached to the body.
2014-11-26 20:39:52 -05:00
Kevin Brown
ac5d584f3d Added the arrow for the dropdown 2014-11-24 21:33:22 -05:00
Kevin Brown
ffed37013d Added back the allowClear option 2014-11-24 20:43:15 -05:00
Kevin Brown
dafa99bf40 Working on the classic theme 2014-11-24 20:08:24 -05:00
Kevin Brown
e686bce9d0 Converted classic theme to BEM
This should be the last of the changes.
2014-11-24 19:11:02 -05:00
Kevin Brown
3e54fc97e5 Finish the core switch to BEM
This switches all of the dropdown components to use BEM.
2014-11-24 18:59:19 -05:00
Kevin Brown
8cb074ccef Finished switching main container to BEM 2014-11-24 18:38:58 -05:00
Kevin Brown
7933eb77c1 Switch the multiple selection container
This switches the container to use BEM for the class naming.
2014-11-24 18:30:58 -05:00
Kevin Brown
971422f92e Start the switch to BEM
This is inspired by https://github.com/ivaynberg/select2/issues/2826
and starts the general transition to using selectors with a lower
specificity. This should make it considerably easier to override
the styles in the long run.

Unfortunately libsass does not support the SASS 3.3 style for BEM
where we can just use `&__m` for defining sub-modules. For now we
are still using a limited amount of nesting, but nowhere near as
much as we did in the past.
2014-11-24 18:11:03 -05:00
Kevin Brown
f1c02db189 Automatically resize the search box
Now the search box is automatically resized for placeholders to
fit the available space, so we don't need to worry about the
placeholder not being visible. When the placeholder doesn't need
to be visible, the size of the search box is determined based on
the length of the current search term.
2014-11-22 20:32:25 -05:00
Kevin Brown
217cd4cfd0 Added inline searching for multiple selects
This adds a search box to the main container for multiple select
boxes, similar to the what the old version had. This can still be
swapped out such that the search box displays above the results
like it previously did.

The placeholder for multiple selects will also now use the input
attribute of the search box instead of generating a custom element.

This also changes the selector for the search container to
`.select2-search`, which is consistent with the old class and
reduces the complexity of the selectors.

This fixes an issue with how decorators worked, where the constructor
from the parent class would clobber the custom constructor that is
generated for the new decorated class. This has been fixed by
excluding the constructor from the list of fields which are
transferred when decorating classes.
2014-11-22 19:21:46 -05:00
Kevin Brown
849a9c7a32 Started work on the classic theme
Some people like the old theme, so we're going to also include that
one as well as the easier-to-extend flat theme.
2014-11-19 14:26:52 -05:00
Kevin Brown
cdfa0499f4 Accessibility matches better
Now the accessibility for the single select box better matches what
is picked up for a native select.

This fixes an issue with us always setting `aria-activedescendant`,
which caused Orca to always say the full path to the selected
result, instead of saying that the box was a combobox with a
selection. This means that the `aria-activedescendant` attribute
will now only be set when the dropdown is open.

This also switches the results list from a listbox to a tree, which
is what Firefox tells screen readers that a standard select is.
Combined with a change to use `role=group` and `aria-label` for
option group labels, screen readers will now announce the group
that they are in as well.
2014-10-21 21:44:00 -04:00
Kevin Brown
7c8601d33b Better accessibility for results
Options are correctly called out as focus moves around the results
list.
2014-10-21 21:44:00 -04:00
Kevin Brown
9102cf9473 Fixed keyboard scrolling
Now when scrolling through results with the keyboard, the
highlighted option will always be visible.
2014-10-21 21:44:00 -04:00
Kevin Brown
cc9419928e Working on accessibility
This makes quite a few changes, one of the major ones being the
removal of classes for marking options as selected or selectable,
and instead using the ARIA attributes which should already be
present.
2014-10-21 21:44:00 -04:00
Kevin Brown
a07fc21815 Added remove button on multiple select choices 2014-10-21 21:43:59 -04:00
Kevin Brown
3d1dc36711 Added support for placeholders
Placeholder support has been implemented as a separate module, so
any selection container should be able to be decorated and get
instant placeholder support. It hooks into the updating method of
selections, and determines when to display the placeholder based
on the options that are being updated.

It works in the same way as the old placeholders. If no options
are selected and being displayed, like in the case of a multiple
select, then the placeholder will always be shown.  If one option
is being displayed, and the id of the placeholder matches the id
of the selected element, then the placeholder will be shown.  This
is similar to the functionality that was present in Select2 2.x,
where the placeholder could be passed in as an object that would
be compared to the selection.

This still requires that, for single selects, the first element
must match the placeholder id.  Because the default placeholder id
is a blank string, this will maintain backwards compatibility with
past versions where the first option should be blank.  This can
still be overridden to point at a different id, keeping support
for systems where the placeholder doesn't use a blank value.

**Note:** This does not hide the blank option for single selects,
but that will still be maintained for backwards compatibility
within the results module.  It will not depend on a placeholder
being present, but instead will hide any options with blank text.
2014-10-21 21:43:59 -04:00
Kevin Brown
6375e2ee09 Working on searching results 2014-10-21 21:43:59 -04:00
Kevin Brown
ac7e7dae24 Added example for disabled results 2014-10-21 21:43:59 -04:00
Kevin Brown
acd469c658 Added optgroup support 2014-10-21 21:43:58 -04:00
Kevin Brown
5a17226ba6 Minify assets 2014-10-21 21:43:57 -04:00
Kevin Brown
14d3d99868 Basic multiple select implementation 2014-10-21 21:43:57 -04:00
Kevin Brown
792133ce5c Added Utils.Decorate and tests
This adds decorator support in a very basic way, but enough that
it doesn't take a lot of effort to get it implemented.

This also starts work on splitting things out for theming.
2014-10-21 21:43:56 -04:00
Kevin Brown
2ca14517bb Add classes to results options 2014-10-21 21:43:56 -04:00
Kevin Brown
01c3dc5886 Basic dropdown is in place 2014-10-21 21:43:56 -04:00
Kevin Brown
ae57cf6460 More work on rendering
Switched all of the divs to spans, as the container should not be
a block by default.
2014-10-21 21:43:56 -04:00
Kevin Brown
06e195b025 Work on the AMD scaffolding
This will make it far easier to ensure that components are in their
own modules as well as make it possible to have custom builds of
Select2.
2014-10-21 21:43:56 -04:00