RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2025-02-16 20:13:16 +03:00
Code Issues Projects Releases Wiki Activity

Switch the multiple selection container

Browse Source 
This switches the container to use BEM for the class naming.
This commit is contained in:
Kevin Brown 2014-11-24 18:30:58 -05:00
parent 971422f92e
commit 7933eb77c1
13 changed files with 217 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
dist/css/select2.css vendored
View File

@ -18,21 +18,22 @@
padding-left: 8px;
text-overflow: ellipsis; }
.select2-container .selection .multiple-select {
.select2-selection--multiple {
box-sizing: border-box;
cursor: pointer;
display: block;
min-height: 32px;
user-select: none;
-webkit-user-select: none; }
.select2-container .selection .multiple-select .rendered-selection {
.select2-selection--multiple .select2-selection__rendered {
display: inline-block;
overflow: hidden;
padding-left: 8px;
text-overflow: ellipsis; }
.select2-container .select2-search-inline {
.select2-search--inline {
float: left; }
.select2-container .select2-search-inline input {
.select2-search--inline .select2-search__field {
border: none;
font-size: 100%;
margin-top: 5px; }
@ -59,18 +60,19 @@
-webkit-user-select: none; }
.select2-container .dropdown .results .options .option[aria-selected] {
cursor: pointer; }
.select2-container .select2-search {
display: block;
padding: 4px; }
.select2-container .select2-search input {
padding: 4px;
width: 100%; }
.select2-container.open .dropdown {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
left: 0; }
.select2-search--dropdown {
display: block;
padding: 4px; }
.select2-search--dropdown .select2-search__field {
padding: 4px;
width: 100%; }
.select2-container--default .select2-selection--single {
background-color: #fff;
border: 1px solid #aaa;
@ -80,59 +82,58 @@
line-height: 28px; }
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #999; }
.select2-container.select2-theme-default .selection .multiple-select {
.select2-container--default .select2-selection--multiple {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
cursor: text; }
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection {
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
list-style: none;
margin: 0;
padding: 0 5px; }
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .placeholder {
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
color: #999;
margin-top: 5px;
float: left; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
cursor: default;
float: left;
margin-right: 5px;
margin-top: 5px;
padding: 0 5px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
color: #999;
margin-top: 5px;
float: left; }
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
cursor: default;
float: left;
margin-right: 5px;
margin-top: 5px;
padding: 0 5px; }
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice .remove {
color: #999;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-right: 2px; }
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice .remove:hover {
color: #333; }
.select2-container.select2-theme-default.open .selection .single-select, .select2-container.select2-theme-default.open .selection .multiple-select {
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-right: 2px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover {
color: #333; }
.select2-container--default.open .select2-selection--single, .select2-container--default.open .select2-selection--multiple {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.select2-container.select2-theme-default .select2-search input {
.select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid #aaa; }
.select2-container.select2-theme-default .select2-search-inline input {
.select2-container--default .select2-search--inline .select2-search__field {
border: none;
outline: 0; }
.select2-container.select2-theme-default .dropdown .results > .options {
.select2-container--default .dropdown .results > .options {
max-height: 200px;
overflow-y: auto; }
.select2-container.select2-theme-default .dropdown .results .options .option[role=group] {
.select2-container--default .dropdown .results .options .option[role=group] {
padding: 0; }
.select2-container.select2-theme-default .dropdown .results .options .option[role=group] .group-label {
.select2-container--default .dropdown .results .options .option[role=group] .group-label {
cursor: default;
display: block;
padding: 6px; }
.select2-container.select2-theme-default .dropdown .results .options .option[aria-disabled=true] {
.select2-container--default .dropdown .results .options .option[aria-disabled=true] {
color: #999; }
.select2-container.select2-theme-default .dropdown .results .options .option[aria-selected=true] {
.select2-container--default .dropdown .results .options .option[aria-selected=true] {
background-color: #ddd; }
.select2-container.select2-theme-default .dropdown .results .options .option[aria-selected].highlighted {
.select2-container--default .dropdown .results .options .option[aria-selected].highlighted {
background-color: #5897fb;
color: white; }

2
dist/css/select2.min.css vendored
View File

File diff suppressed because one or more lines are too long

32
dist/js/select2.amd.full.js vendored
View File

@ -814,9 +814,10 @@ define('select2/selection/multiple',[
MultipleSelection.prototype.render = function () {
var $selection = $(
'<span class="multiple-select" tabindex="0" role="combobox" ' +
'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
'<ul class="rendered-selection"></ul>' +
'<span class="select2-selection select2-selection--multiple"' +
' tabindex="0" role="combobox" aria-autocomplete="list"' +
' aria-haspopup="true" aria-expanded="false">' +
'<ul class="select2-selection__rendered"></ul>' +
'</span>'
);
@ -852,7 +853,7 @@ define('select2/selection/multiple',[
};
MultipleSelection.prototype.clear = function () {
this.$selection.find('.rendered-selection').empty();
this.$selection.find('.select2-selection__rendered').empty();
};
MultipleSelection.prototype.display = function (data) {
@ -863,8 +864,10 @@ define('select2/selection/multiple',[
MultipleSelection.prototype.selectionContainer = function () {
var $container = $(
'<li class="choice">' +
'<span class="remove" role="presentation">&times;</span>' +
'<li class="select2-selection__choice">' +
'<span class="select2-selection__choice__remove" role="presentation">' +
'&times;' +
'</span>' +
'</li>'
);
@ -892,7 +895,7 @@ define('select2/selection/multiple',[
$selections.push($selection);
}
this.$selection.find('.rendered-selection').append($selections);
this.$selection.find('.select2-selection__rendered').append($selections);
};
return MultipleSelection;
@ -957,8 +960,9 @@ define('select2/selection/search',[
Search.prototype.render = function (decorated) {
var $search = $(
'<li class="select2-search-inline">' +
'<input type="search" tabindex="-1" role="textbox" />' +
'<li class="select2-search select2-search--inline">' +
'<input class="select2-search__field" type="search" tabindex="-1"' +
' role="textbox" />' +
'</li>'
);
@ -987,7 +991,7 @@ define('select2/selection/search',[
self.$search.val('');
});
this.$selection.on('keydown', '.select2-search-inline', function (evt) {
this.$selection.on('keydown', '.select2-search--inline', function (evt) {
evt.stopPropagation();
self.trigger('keypress', evt);
@ -995,7 +999,7 @@ define('select2/selection/search',[
self._keyUpPrevented = evt.isDefaultPrevented();
});
this.$selection.on('keyup', '.select2-search-inline', function (evt) {
this.$selection.on('keyup', '.select2-search--inline', function (evt) {
self.handleSearch(evt);
});
};
@ -1009,7 +1013,8 @@ define('select2/selection/search',[
decorated.call(this, data);
this.$selection.find('.rendered-selection').append(this.$searchContainer);
this.$selection.find('.select2-selection__rendered')
.append(this.$searchContainer);
this.resizeSearch();
};
@ -1035,7 +1040,8 @@ define('select2/selection/search',[
if (this.$search.attr('placeholder') !== '') {
width = this.$selection.innerWidth();
width -= this.$selection.find('.rendered-selection').innerWidth();
width -= this.$selection.find('.select2-selection__rendered')
.innerWidth();
width = width + 'px';
} else {

32
dist/js/select2.amd.js vendored
View File

@ -814,9 +814,10 @@ define('select2/selection/multiple',[
MultipleSelection.prototype.render = function () {
var $selection = $(
'<span class="multiple-select" tabindex="0" role="combobox" ' +
'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
'<ul class="rendered-selection"></ul>' +
'<span class="select2-selection select2-selection--multiple"' +
' tabindex="0" role="combobox" aria-autocomplete="list"' +
' aria-haspopup="true" aria-expanded="false">' +
'<ul class="select2-selection__rendered"></ul>' +
'</span>'
);
@ -852,7 +853,7 @@ define('select2/selection/multiple',[
};
MultipleSelection.prototype.clear = function () {
this.$selection.find('.rendered-selection').empty();
this.$selection.find('.select2-selection__rendered').empty();
};
MultipleSelection.prototype.display = function (data) {
@ -863,8 +864,10 @@ define('select2/selection/multiple',[
MultipleSelection.prototype.selectionContainer = function () {
var $container = $(
'<li class="choice">' +
'<span class="remove" role="presentation">&times;</span>' +
'<li class="select2-selection__choice">' +
'<span class="select2-selection__choice__remove" role="presentation">' +
'&times;' +
'</span>' +
'</li>'
);
@ -892,7 +895,7 @@ define('select2/selection/multiple',[
$selections.push($selection);
}
this.$selection.find('.rendered-selection').append($selections);
this.$selection.find('.select2-selection__rendered').append($selections);
};
return MultipleSelection;
@ -957,8 +960,9 @@ define('select2/selection/search',[
Search.prototype.render = function (decorated) {
var $search = $(
'<li class="select2-search-inline">' +
'<input type="search" tabindex="-1" role="textbox" />' +
'<li class="select2-search select2-search--inline">' +
'<input class="select2-search__field" type="search" tabindex="-1"' +
' role="textbox" />' +
'</li>'
);
@ -987,7 +991,7 @@ define('select2/selection/search',[
self.$search.val('');
});
this.$selection.on('keydown', '.select2-search-inline', function (evt) {
this.$selection.on('keydown', '.select2-search--inline', function (evt) {
evt.stopPropagation();
self.trigger('keypress', evt);
@ -995,7 +999,7 @@ define('select2/selection/search',[
self._keyUpPrevented = evt.isDefaultPrevented();
});
this.$selection.on('keyup', '.select2-search-inline', function (evt) {
this.$selection.on('keyup', '.select2-search--inline', function (evt) {
self.handleSearch(evt);
});
};
@ -1009,7 +1013,8 @@ define('select2/selection/search',[
decorated.call(this, data);
this.$selection.find('.rendered-selection').append(this.$searchContainer);
this.$selection.find('.select2-selection__rendered')
.append(this.$searchContainer);
this.resizeSearch();
};
@ -1035,7 +1040,8 @@ define('select2/selection/search',[
if (this.$search.attr('placeholder') !== '') {
width = this.$selection.innerWidth();
width -= this.$selection.find('.rendered-selection').innerWidth();
width -= this.$selection.find('.select2-selection__rendered')
.innerWidth();
width = width + 'px';
} else {

32
dist/js/select2.full.js vendored
View File

@ -10349,9 +10349,10 @@ define('select2/selection/multiple',[
MultipleSelection.prototype.render = function () {
var $selection = $(
'<span class="multiple-select" tabindex="0" role="combobox" ' +
'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
'<ul class="rendered-selection"></ul>' +
'<span class="select2-selection select2-selection--multiple"' +
' tabindex="0" role="combobox" aria-autocomplete="list"' +
' aria-haspopup="true" aria-expanded="false">' +
'<ul class="select2-selection__rendered"></ul>' +
'</span>'
);
@ -10387,7 +10388,7 @@ define('select2/selection/multiple',[
};
MultipleSelection.prototype.clear = function () {
this.$selection.find('.rendered-selection').empty();
this.$selection.find('.select2-selection__rendered').empty();
};
MultipleSelection.prototype.display = function (data) {
@ -10398,8 +10399,10 @@ define('select2/selection/multiple',[
MultipleSelection.prototype.selectionContainer = function () {
var $container = $(
'<li class="choice">' +
'<span class="remove" role="presentation">&times;</span>' +
'<li class="select2-selection__choice">' +
'<span class="select2-selection__choice__remove" role="presentation">' +
'&times;' +
'</span>' +
'</li>'
);
@ -10427,7 +10430,7 @@ define('select2/selection/multiple',[
$selections.push($selection);
}
this.$selection.find('.rendered-selection').append($selections);
this.$selection.find('.select2-selection__rendered').append($selections);
};
return MultipleSelection;
@ -10492,8 +10495,9 @@ define('select2/selection/search',[
Search.prototype.render = function (decorated) {
var $search = $(
'<li class="select2-search-inline">' +
'<input type="search" tabindex="-1" role="textbox" />' +
'<li class="select2-search select2-search--inline">' +
'<input class="select2-search__field" type="search" tabindex="-1"' +
' role="textbox" />' +
'</li>'
);
@ -10522,7 +10526,7 @@ define('select2/selection/search',[
self.$search.val('');
});
this.$selection.on('keydown', '.select2-search-inline', function (evt) {
this.$selection.on('keydown', '.select2-search--inline', function (evt) {
evt.stopPropagation();
self.trigger('keypress', evt);
@ -10530,7 +10534,7 @@ define('select2/selection/search',[
self._keyUpPrevented = evt.isDefaultPrevented();
});
this.$selection.on('keyup', '.select2-search-inline', function (evt) {
this.$selection.on('keyup', '.select2-search--inline', function (evt) {
self.handleSearch(evt);
});
};
@ -10544,7 +10548,8 @@ define('select2/selection/search',[
decorated.call(this, data);
this.$selection.find('.rendered-selection').append(this.$searchContainer);
this.$selection.find('.select2-selection__rendered')
.append(this.$searchContainer);
this.resizeSearch();
};
@ -10570,7 +10575,8 @@ define('select2/selection/search',[
if (this.$search.attr('placeholder') !== '') {
width = this.$selection.innerWidth();
width -= this.$selection.find('.rendered-selection').innerWidth();
width -= this.$selection.find('.select2-selection__rendered')
.innerWidth();
width = width + 'px';
} else {

2
dist/js/select2.full.min.js vendored
View File

File diff suppressed because one or more lines are too long

32
dist/js/select2.js vendored
View File

@ -1242,9 +1242,10 @@ define('select2/selection/multiple',[
MultipleSelection.prototype.render = function () {
var $selection = $(
'<span class="multiple-select" tabindex="0" role="combobox" ' +
'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
'<ul class="rendered-selection"></ul>' +
'<span class="select2-selection select2-selection--multiple"' +
' tabindex="0" role="combobox" aria-autocomplete="list"' +
' aria-haspopup="true" aria-expanded="false">' +
'<ul class="select2-selection__rendered"></ul>' +
'</span>'
);
@ -1280,7 +1281,7 @@ define('select2/selection/multiple',[
};
MultipleSelection.prototype.clear = function () {
this.$selection.find('.rendered-selection').empty();
this.$selection.find('.select2-selection__rendered').empty();
};
MultipleSelection.prototype.display = function (data) {
@ -1291,8 +1292,10 @@ define('select2/selection/multiple',[
MultipleSelection.prototype.selectionContainer = function () {
var $container = $(
'<li class="choice">' +
'<span class="remove" role="presentation">&times;</span>' +
'<li class="select2-selection__choice">' +
'<span class="select2-selection__choice__remove" role="presentation">' +
'&times;' +
'</span>' +
'</li>'
);
@ -1320,7 +1323,7 @@ define('select2/selection/multiple',[
$selections.push($selection);
}
this.$selection.find('.rendered-selection').append($selections);
this.$selection.find('.select2-selection__rendered').append($selections);
};
return MultipleSelection;
@ -1385,8 +1388,9 @@ define('select2/selection/search',[
Search.prototype.render = function (decorated) {
var $search = $(
'<li class="select2-search-inline">' +
'<input type="search" tabindex="-1" role="textbox" />' +
'<li class="select2-search select2-search--inline">' +
'<input class="select2-search__field" type="search" tabindex="-1"' +
' role="textbox" />' +
'</li>'
);
@ -1415,7 +1419,7 @@ define('select2/selection/search',[
self.$search.val('');
});
this.$selection.on('keydown', '.select2-search-inline', function (evt) {
this.$selection.on('keydown', '.select2-search--inline', function (evt) {
evt.stopPropagation();
self.trigger('keypress', evt);
@ -1423,7 +1427,7 @@ define('select2/selection/search',[
self._keyUpPrevented = evt.isDefaultPrevented();
});
this.$selection.on('keyup', '.select2-search-inline', function (evt) {
this.$selection.on('keyup', '.select2-search--inline', function (evt) {
self.handleSearch(evt);
});
};
@ -1437,7 +1441,8 @@ define('select2/selection/search',[
decorated.call(this, data);
this.$selection.find('.rendered-selection').append(this.$searchContainer);
this.$selection.find('.select2-selection__rendered')
.append(this.$searchContainer);
this.resizeSearch();
};
@ -1463,7 +1468,8 @@ define('select2/selection/search',[
if (this.$search.attr('placeholder') !== '') {
width = this.$selection.innerWidth();
width -= this.$selection.find('.rendered-selection').innerWidth();
width -= this.$selection.find('.select2-selection__rendered')
.innerWidth();
width = width + 'px';
} else {

4
dist/js/select2.min.js vendored
View File

File diff suppressed because one or more lines are too long

17
src/js/select2/selection/multiple.js vendored
View File

@ -10,9 +10,10 @@ define([
MultipleSelection.prototype.render = function () {
var $selection = $(
'<span class="multiple-select" tabindex="0" role="combobox" ' +
'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
'<ul class="rendered-selection"></ul>' +
'<span class="select2-selection select2-selection--multiple"' +
' tabindex="0" role="combobox" aria-autocomplete="list"' +
' aria-haspopup="true" aria-expanded="false">' +
'<ul class="select2-selection__rendered"></ul>' +
'</span>'
);
@ -48,7 +49,7 @@ define([
};
MultipleSelection.prototype.clear = function () {
this.$selection.find('.rendered-selection').empty();
this.$selection.find('.select2-selection__rendered').empty();
};
MultipleSelection.prototype.display = function (data) {
@ -59,8 +60,10 @@ define([
MultipleSelection.prototype.selectionContainer = function () {
var $container = $(
'<li class="choice">' +
'<span class="remove" role="presentation">&times;</span>' +
'<li class="select2-selection__choice">' +
'<span class="select2-selection__choice__remove" role="presentation">' +
'&times;' +
'</span>' +
'</li>'
);
@ -88,7 +91,7 @@ define([
$selections.push($selection);
}
this.$selection.find('.rendered-selection').append($selections);
this.$selection.find('.select2-selection__rendered').append($selections);
};
return MultipleSelection;

15
src/js/select2/selection/search.js vendored
View File

@ -7,8 +7,9 @@ define([
Search.prototype.render = function (decorated) {
var $search = $(
'<li class="select2-search-inline">' +
'<input type="search" tabindex="-1" role="textbox" />' +
'<li class="select2-search select2-search--inline">' +
'<input class="select2-search__field" type="search" tabindex="-1"' +
' role="textbox" />' +
'</li>'
);
@ -37,7 +38,7 @@ define([
self.$search.val('');
});
this.$selection.on('keydown', '.select2-search-inline', function (evt) {
this.$selection.on('keydown', '.select2-search--inline', function (evt) {
evt.stopPropagation();
self.trigger('keypress', evt);
@ -45,7 +46,7 @@ define([
self._keyUpPrevented = evt.isDefaultPrevented();
});
this.$selection.on('keyup', '.select2-search-inline', function (evt) {
this.$selection.on('keyup', '.select2-search--inline', function (evt) {
self.handleSearch(evt);
});
};
@ -59,7 +60,8 @@ define([
decorated.call(this, data);
this.$selection.find('.rendered-selection').append(this.$searchContainer);
this.$selection.find('.select2-selection__rendered')
.append(this.$searchContainer);
this.resizeSearch();
};
@ -85,7 +87,8 @@ define([
if (this.$search.attr('placeholder') !== '') {
width = this.$selection.innerWidth();
width -= this.$selection.find('.rendered-selection').innerWidth();
width -= this.$selection.find('.select2-selection__rendered')
.innerWidth();
width = width + 'px';
} else {

20
src/scss/_dropdown.scss
View File

@ -38,16 +38,6 @@
}
}
.select2-search {
display: block;
padding: 4px;
input {
padding: 4px;
width: 100%;
}
}
&.open .dropdown {
border-top: none;
border-top-left-radius: 0;
@ -56,3 +46,13 @@
left: 0;
}
}
.select2-search--dropdown {
display: block;
padding: 4px;
.select2-search__field {
padding: 4px;
width: 100%;
}
}

46
src/scss/_multiple.scss
View File

@ -1,30 +1,28 @@
.select2-container {
.selection .multiple-select {
box-sizing: border-box;
.select2-selection--multiple {
box-sizing: border-box;
cursor: pointer;
display: block;
cursor: pointer;
display: block;
min-height: 32px;
min-height: 32px;
user-select: none;
-webkit-user-select: none;
user-select: none;
-webkit-user-select: none;
.rendered-selection {
display: inline-block;
overflow: hidden;
padding-left: 8px;
text-overflow: ellipsis;
}
}
.select2-search-inline {
float: left;
input {
border: none;
font-size: 100%;
margin-top: 5px;
}
.select2-selection__rendered {
display: inline-block;
overflow: hidden;
padding-left: 8px;
text-overflow: ellipsis;
}
}
.select2-search--inline {
float: left;
.select2-search__field {
border: none;
font-size: 100%;
margin-top: 5px;
}
}

93
src/scss/theme/default/layout.scss
View File

@ -13,78 +13,71 @@
color: #999;
}
}
}
.select2-container.select2-theme-default {
.selection {
.multiple-select {
background-color: white;
.select2-selection--multiple {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
cursor: text;
.select2-selection__rendered {
list-style: none;
margin: 0;
padding: 0 5px;
}
.select2-selection__placeholder {
color: #999;
margin-top: 5px;
float: left;
}
.select2-selection__choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
cursor: text;
cursor: default;
.rendered-selection {
list-style: none;
margin: 0;
padding: 0 5px;
float: left;
.placeholder {
color: #999;
margin-right: 5px;
margin-top: 5px;
padding: 0 5px;
margin-top: 5px;
.select2-selection__choice__remove {
color: #999;
cursor: pointer;
float: left;
}
display: inline-block;
font-weight: bold;
.choice {
background-color: #e4e4e4;
margin-right: 2px;
border: 1px solid #aaa;
border-radius: 4px;
cursor: default;
float: left;
margin-right: 5px;
margin-top: 5px;
padding: 0 5px;
.remove {
color: #999;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-right: 2px;
&:hover {
color: #333;
}
}
&:hover {
color: #333;
}
}
}
}
&.open {
.selection {
.single-select,
.multiple-select {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.select2-selection--single, .select2-selection--multiple {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
.select2-search {
input {
.select2-search--dropdown {
.select2-search__field {
border: 1px solid #aaa;
}
}
.select2-search-inline {
input {
.select2-search--inline {
.select2-search__field {
border: none;
outline: 0;
}