1
0
mirror of synced 2025-02-09 16:49:24 +03:00

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.
This commit is contained in:
Kevin Brown 2014-12-05 22:44:41 -05:00
parent 1ca71578d4
commit f0017c024d
8 changed files with 81 additions and 5 deletions

17
dist/css/select2.css vendored
View File

@ -87,6 +87,23 @@
.select2-search--dropdown .select2-search--hide {
display: none; }
.select2-close-mask {
border: 0;
margin: 0;
padding: 0;
display: block;
position: fixed;
left: 0;
top: 0;
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
opacity: 0;
z-index: 99;
background-color: #fff;
filter: alpha(opacity=0); }
.select2-container--default .select2-selection--single {
background-color: #fff;
border: 1px solid #aaa;

File diff suppressed because one or more lines are too long

View File

@ -3709,9 +3709,12 @@ define('select2/dropdown/attachContainer',[
}
AttachContainer.prototype.position =
function (decorated, $container, $dropdown) {
function (decorated, $dropdown, $container) {
var $dropdownContainer = $container.find('.dropdown-wrapper');
$dropdownContainer.append($dropdown);
$dropdown.addClass('select2-dropdown--below');
$container.addClass('select2-container--below');
};
return AttachContainer;

View File

@ -13244,9 +13244,12 @@ define('select2/dropdown/attachContainer',[
}
AttachContainer.prototype.position =
function (decorated, $container, $dropdown) {
function (decorated, $dropdown, $container) {
var $dropdownContainer = $container.find('.dropdown-wrapper');
$dropdownContainer.append($dropdown);
$dropdown.addClass('select2-dropdown--below');
$container.addClass('select2-container--below');
};
return AttachContainer;

File diff suppressed because one or more lines are too long

View File

@ -6,9 +6,12 @@ define([
}
AttachContainer.prototype.position =
function (decorated, $container, $dropdown) {
function (decorated, $dropdown, $container) {
var $dropdownContainer = $container.find('.dropdown-wrapper');
$dropdownContainer.append($dropdown);
$dropdown.addClass('select2-dropdown--below');
$container.addClass('select2-container--below');
};
return AttachContainer;

29
src/js/select2/selection/clickMask.js vendored Normal file
View File

@ -0,0 +1,29 @@
define([
'jquery'
], function ($) {
function ClickMask () { }
ClickMask.prototype.bind = function (decorate, $container, container) {
var self = this;
decorate.call(this, $container, container);
this.$mask = $(
'<div class="select2-close-mask"></div>'
);
this.$mask.on('mousedown touchstart click', function () {
self.trigger('close');
});
};
ClickMask.prototype._attachCloseHandler = function (decorate, container) {
$(document.body).append(this.$mask);
};
ClickMask.prototype._detachCloseHandler = function (deocrate, container) {
this.$mask.detach();
};
return ClickMask;
});

View File

@ -12,5 +12,26 @@
@import "dropdown";
.select2-close-mask {
border: 0;
margin: 0;
padding: 0;
display: block;
position: fixed;
left: 0;
top: 0;
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
opacity: 0;
z-index: 99;
// styles required for IE to work
background-color: #fff;
filter: alpha(opacity=0);
}
@import "theme/default/layout";
@import "theme/classic/layout";