Finish the core switch to BEM
This switches all of the dropdown components to use BEM.
This commit is contained in:
Kevin Brown
parent
8cb074ccef
commit
3e54fc97e5
40
dist/css/select2.css
vendored
40
dist/css/select2.css
vendored
@ -38,7 +38,7 @@
|
||||
font-size: 100%;
|
||||
margin-top: 5px; }
|
||||
|
||||
.select2-container .dropdown {
|
||||
.select2-dropdown {
|
||||
background-color: white;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 4px;
|
||||
@ -48,19 +48,23 @@
|
||||
left: -100000px;
|
||||
width: 100%;
|
||||
z-index: 100; }
|
||||
.select2-container .dropdown .results {
|
||||
|
||||
.select2-results {
|
||||
display: block; }
|
||||
.select2-container .dropdown .results .options {
|
||||
|
||||
.select2-results__options {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
.select2-container .dropdown .results .options .option {
|
||||
|
||||
.select2-results__option {
|
||||
padding: 6px;
|
||||
user-select: none;
|
||||
-webkit-user-select: none; }
|
||||
.select2-container .dropdown .results .options .option[aria-selected] {
|
||||
.select2-results__option[aria-selected] {
|
||||
cursor: pointer; }
|
||||
.select2-container.select2-container--open .dropdown {
|
||||
|
||||
.select2-container--open .select2-dropdown {
|
||||
border-top: none;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
@ -104,13 +108,13 @@
|
||||
margin-right: 5px;
|
||||
margin-top: 5px;
|
||||
padding: 0 5px; }
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
|
||||
color: #999;
|
||||
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 {
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
|
||||
color: #333; }
|
||||
.select2-container--default.select2-container--open .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--multiple {
|
||||
border-bottom-left-radius: 0;
|
||||
@ -120,22 +124,22 @@
|
||||
.select2-container--default .select2-search--inline .select2-search__field {
|
||||
border: none;
|
||||
outline: 0; }
|
||||
.select2-container--default .dropdown .results > .options {
|
||||
.select2-container--default .select2-results > .select2-results__options {
|
||||
max-height: 200px;
|
||||
overflow-y: auto; }
|
||||
.select2-container--default .dropdown .results .options .option[role=group] {
|
||||
.select2-container--default .select2-results__option[role=group] {
|
||||
padding: 0; }
|
||||
.select2-container--default .dropdown .results .options .option[role=group] .group-label {
|
||||
.select2-container--default .select2-results__option[aria-disabled=true] {
|
||||
color: #999; }
|
||||
.select2-container--default .select2-results__option[aria-selected=true] {
|
||||
background-color: #ddd; }
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: #5897fb;
|
||||
color: white; }
|
||||
.select2-container--default .select2-results__group {
|
||||
cursor: default;
|
||||
display: block;
|
||||
padding: 6px; }
|
||||
.select2-container--default .dropdown .results .options .option[aria-disabled=true] {
|
||||
color: #999; }
|
||||
.select2-container--default .dropdown .results .options .option[aria-selected=true] {
|
||||
background-color: #ddd; }
|
||||
.select2-container--default .dropdown .results .options .option[aria-selected].highlighted {
|
||||
background-color: #5897fb;
|
||||
color: white; }
|
||||
|
||||
.select2-container.select2-theme-classic .selection .single-select {
|
||||
background-color: #f6f6f6;
|
||||
|
||||
2
dist/css/select2.min.css
vendored
2
dist/css/select2.min.css
vendored
File diff suppressed because one or more lines are too long
54
dist/js/select2.amd.full.js
vendored
54
dist/js/select2.amd.full.js
vendored
@ -171,7 +171,7 @@ define('select2/results',[
|
||||
|
||||
Results.prototype.render = function () {
|
||||
var $results = $(
|
||||
'<ul class="options" role="tree"></ul>'
|
||||
'<ul class="select2-results__options" role="tree"></ul>'
|
||||
);
|
||||
|
||||
if (this.options.get('multiple')) {
|
||||
@ -191,7 +191,9 @@ define('select2/results',[
|
||||
this.clear();
|
||||
this.hideLoading();
|
||||
|
||||
var $message = $('<li role="treeitem" class="option"></li>');
|
||||
var $message = $(
|
||||
'<li role="treeitem" class="select2-results__option"></li>'
|
||||
);
|
||||
|
||||
var message = this.options.get('translations').get(params.message);
|
||||
|
||||
@ -240,7 +242,8 @@ define('select2/results',[
|
||||
return s.id.toString();
|
||||
});
|
||||
|
||||
var $options = self.$results.find('.option[aria-selected]');
|
||||
var $options = self.$results
|
||||
.find('.select2-results__option[aria-selected]');
|
||||
|
||||
$options.each(function () {
|
||||
var $option = $(this);
|
||||
@ -290,7 +293,7 @@ define('select2/results',[
|
||||
|
||||
Results.prototype.option = function (data) {
|
||||
var option = document.createElement('li');
|
||||
option.className = 'option';
|
||||
option.className = 'select2-results__option';
|
||||
|
||||
var attrs = {
|
||||
'role': 'treeitem',
|
||||
@ -326,7 +329,7 @@ define('select2/results',[
|
||||
var $option = $(option);
|
||||
|
||||
var label = document.createElement('strong');
|
||||
label.className = 'group-label';
|
||||
label.className = 'select2-results__group';
|
||||
|
||||
var $label = $(label);
|
||||
this.template(data, label);
|
||||
@ -341,7 +344,9 @@ define('select2/results',[
|
||||
$children.push($child);
|
||||
}
|
||||
|
||||
var $childrenContainer = $('<ul class="options nested-options"></ul>');
|
||||
var $childrenContainer = $('<ul></ul>', {
|
||||
'class': 'select2-results__options select2-results__options--nested'
|
||||
});
|
||||
|
||||
$childrenContainer.append($children);
|
||||
|
||||
@ -417,7 +422,7 @@ define('select2/results',[
|
||||
});
|
||||
|
||||
container.on('results:select', function () {
|
||||
var $highlighted = self.$results.find('.highlighted');
|
||||
var $highlighted = self.getHighlightedResults();
|
||||
|
||||
if ($highlighted.length === 0) {
|
||||
return;
|
||||
@ -437,7 +442,7 @@ define('select2/results',[
|
||||
});
|
||||
|
||||
container.on('results:previous', function () {
|
||||
var $highlighted = self.$results.find('.highlighted');
|
||||
var $highlighted = self.getHighlightedResults();
|
||||
|
||||
var $options = self.$results.find('[aria-selected]');
|
||||
|
||||
@ -471,7 +476,7 @@ define('select2/results',[
|
||||
});
|
||||
|
||||
container.on('results:next', function () {
|
||||
var $highlighted = self.$results.find('.highlighted');
|
||||
var $highlighted = self.getHighlightedResults();
|
||||
|
||||
var $options = self.$results.find('[aria-selected]');
|
||||
|
||||
@ -501,7 +506,7 @@ define('select2/results',[
|
||||
});
|
||||
|
||||
container.on('results:focus', function (params) {
|
||||
params.element.addClass('highlighted');
|
||||
params.element.addClass('select2-results__option--highlighted');
|
||||
});
|
||||
|
||||
container.on('results:message', function (params) {
|
||||
@ -512,7 +517,8 @@ define('select2/results',[
|
||||
self.displayMessage(params);
|
||||
});
|
||||
|
||||
this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
|
||||
this.$results.on('mouseup', '.select2-results__option[aria-selected]',
|
||||
function (evt) {
|
||||
var $this = $(this);
|
||||
|
||||
var data = $this.data('data');
|
||||
@ -532,10 +538,12 @@ define('select2/results',[
|
||||
});
|
||||
});
|
||||
|
||||
this.$results.on('mouseenter', '.option[aria-selected]', function (evt) {
|
||||
this.$results.on('mouseenter', '.select2-results__option[aria-selected]',
|
||||
function (evt) {
|
||||
var data = $(this).data('data');
|
||||
|
||||
self.$results.find('.option.highlighted').removeClass('highlighted');
|
||||
self.getHighlightedResults()
|
||||
.removeClass('select2-results__option--highlighted');
|
||||
|
||||
self.trigger('results:focus', {
|
||||
data: data,
|
||||
@ -544,12 +552,19 @@ define('select2/results',[
|
||||
});
|
||||
};
|
||||
|
||||
Results.prototype.getHighlightedResults = function () {
|
||||
var $highlighted = this.$results
|
||||
.find('.select2-results__option--highlighted');
|
||||
|
||||
return $highlighted;
|
||||
};
|
||||
|
||||
Results.prototype.destroy = function () {
|
||||
this.$results.remove();
|
||||
};
|
||||
|
||||
Results.prototype.ensureHighlightVisible = function () {
|
||||
var $highlighted = this.$results.find('.highlighted');
|
||||
var $highlighted = this.getHighlightedResults();
|
||||
|
||||
if ($highlighted.length === 0) {
|
||||
return;
|
||||
@ -2498,8 +2513,8 @@ define('select2/dropdown',[
|
||||
|
||||
Dropdown.prototype.render = function () {
|
||||
var $dropdown = $(
|
||||
'<span class="dropdown">' +
|
||||
'<span class="results"></span>' +
|
||||
'<span class="select2-dropdown">' +
|
||||
'<span class="select2-results"></span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
@ -2529,8 +2544,9 @@ define('select2/dropdown/search',[
|
||||
var $rendered = decorated.call(this);
|
||||
|
||||
var $search = $(
|
||||
'<span class="select2-search">' +
|
||||
'<input type="search" tabindex="-1" role="textbox" />' +
|
||||
'<span class="select2-search select2-search--dropdown">' +
|
||||
'<input class="select2-search__field" type="search" tabindex="-1"' +
|
||||
' role="textbox" />' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
@ -3149,7 +3165,7 @@ define('select2/core',[
|
||||
};
|
||||
|
||||
Select2.prototype._placeResults = function ($results) {
|
||||
var $resultsContainer = this.$dropdown.find('.results');
|
||||
var $resultsContainer = this.$dropdown.find('.select2-results');
|
||||
$resultsContainer.append($results);
|
||||
};
|
||||
|
||||
|
||||
54
dist/js/select2.amd.js
vendored
54
dist/js/select2.amd.js
vendored
@ -171,7 +171,7 @@ define('select2/results',[
|
||||
|
||||
Results.prototype.render = function () {
|
||||
var $results = $(
|
||||
'<ul class="options" role="tree"></ul>'
|
||||
'<ul class="select2-results__options" role="tree"></ul>'
|
||||
);
|
||||
|
||||
if (this.options.get('multiple')) {
|
||||
@ -191,7 +191,9 @@ define('select2/results',[
|
||||
this.clear();
|
||||
this.hideLoading();
|
||||
|
||||
var $message = $('<li role="treeitem" class="option"></li>');
|
||||
var $message = $(
|
||||
'<li role="treeitem" class="select2-results__option"></li>'
|
||||
);
|
||||
|
||||
var message = this.options.get('translations').get(params.message);
|
||||
|
||||
@ -240,7 +242,8 @@ define('select2/results',[
|
||||
return s.id.toString();
|
||||
});
|
||||
|
||||
var $options = self.$results.find('.option[aria-selected]');
|
||||
var $options = self.$results
|
||||
.find('.select2-results__option[aria-selected]');
|
||||
|
||||
$options.each(function () {
|
||||
var $option = $(this);
|
||||
@ -290,7 +293,7 @@ define('select2/results',[
|
||||
|
||||
Results.prototype.option = function (data) {
|
||||
var option = document.createElement('li');
|
||||
option.className = 'option';
|
||||
option.className = 'select2-results__option';
|
||||
|
||||
var attrs = {
|
||||
'role': 'treeitem',
|
||||
@ -326,7 +329,7 @@ define('select2/results',[
|
||||
var $option = $(option);
|
||||
|
||||
var label = document.createElement('strong');
|
||||
label.className = 'group-label';
|
||||
label.className = 'select2-results__group';
|
||||
|
||||
var $label = $(label);
|
||||
this.template(data, label);
|
||||
@ -341,7 +344,9 @@ define('select2/results',[
|
||||
$children.push($child);
|
||||
}
|
||||
|
||||
var $childrenContainer = $('<ul class="options nested-options"></ul>');
|
||||
var $childrenContainer = $('<ul></ul>', {
|
||||
'class': 'select2-results__options select2-results__options--nested'
|
||||
});
|
||||
|
||||
$childrenContainer.append($children);
|
||||
|
||||
@ -417,7 +422,7 @@ define('select2/results',[
|
||||
});
|
||||
|
||||
container.on('results:select', function () {
|
||||
var $highlighted = self.$results.find('.highlighted');
|
||||
var $highlighted = self.getHighlightedResults();
|
||||
|
||||
if ($highlighted.length === 0) {
|
||||
return;
|
||||
@ -437,7 +442,7 @@ define('select2/results',[
|
||||
});
|
||||
|
||||
container.on('results:previous', function () {
|
||||
var $highlighted = self.$results.find('.highlighted');
|
||||
var $highlighted = self.getHighlightedResults();
|
||||
|
||||
var $options = self.$results.find('[aria-selected]');
|
||||
|
||||
@ -471,7 +476,7 @@ define('select2/results',[
|
||||
});
|
||||
|
||||
container.on('results:next', function () {
|
||||
var $highlighted = self.$results.find('.highlighted');
|
||||
var $highlighted = self.getHighlightedResults();
|
||||
|
||||
var $options = self.$results.find('[aria-selected]');
|
||||
|
||||
@ -501,7 +506,7 @@ define('select2/results',[
|
||||
});
|
||||
|
||||
container.on('results:focus', function (params) {
|
||||
params.element.addClass('highlighted');
|
||||
params.element.addClass('select2-results__option--highlighted');
|
||||
});
|
||||
|
||||
container.on('results:message', function (params) {
|
||||
@ -512,7 +517,8 @@ define('select2/results',[
|
||||
self.displayMessage(params);
|
||||
});
|
||||
|
||||
this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
|
||||
this.$results.on('mouseup', '.select2-results__option[aria-selected]',
|
||||
function (evt) {
|
||||
var $this = $(this);
|
||||
|
||||
var data = $this.data('data');
|
||||
@ -532,10 +538,12 @@ define('select2/results',[
|
||||
});
|
||||
});
|
||||
|
||||
this.$results.on('mouseenter', '.option[aria-selected]', function (evt) {
|
||||
this.$results.on('mouseenter', '.select2-results__option[aria-selected]',
|
||||
function (evt) {
|
||||
var data = $(this).data('data');
|
||||
|
||||
self.$results.find('.option.highlighted').removeClass('highlighted');
|
||||
self.getHighlightedResults()
|
||||
.removeClass('select2-results__option--highlighted');
|
||||
|
||||
self.trigger('results:focus', {
|
||||
data: data,
|
||||
@ -544,12 +552,19 @@ define('select2/results',[
|
||||
});
|
||||
};
|
||||
|
||||
Results.prototype.getHighlightedResults = function () {
|
||||
var $highlighted = this.$results
|
||||
.find('.select2-results__option--highlighted');
|
||||
|
||||
return $highlighted;
|
||||
};
|
||||
|
||||
Results.prototype.destroy = function () {
|
||||
this.$results.remove();
|
||||
};
|
||||
|
||||
Results.prototype.ensureHighlightVisible = function () {
|
||||
var $highlighted = this.$results.find('.highlighted');
|
||||
var $highlighted = this.getHighlightedResults();
|
||||
|
||||
if ($highlighted.length === 0) {
|
||||
return;
|
||||
@ -2498,8 +2513,8 @@ define('select2/dropdown',[
|
||||
|
||||
Dropdown.prototype.render = function () {
|
||||
var $dropdown = $(
|
||||
'<span class="dropdown">' +
|
||||
'<span class="results"></span>' +
|
||||
'<span class="select2-dropdown">' +
|
||||
'<span class="select2-results"></span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
@ -2529,8 +2544,9 @@ define('select2/dropdown/search',[
|
||||
var $rendered = decorated.call(this);
|
||||
|
||||
var $search = $(
|
||||
'<span class="select2-search">' +
|
||||
'<input type="search" tabindex="-1" role="textbox" />' +
|
||||
'<span class="select2-search select2-search--dropdown">' +
|
||||
'<input class="select2-search__field" type="search" tabindex="-1"' +
|
||||
' role="textbox" />' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
@ -3149,7 +3165,7 @@ define('select2/core',[
|
||||
};
|
||||
|
||||
Select2.prototype._placeResults = function ($results) {
|
||||
var $resultsContainer = this.$dropdown.find('.results');
|
||||
var $resultsContainer = this.$dropdown.find('.select2-results');
|
||||
$resultsContainer.append($results);
|
||||
};
|
||||
|
||||
|
||||
54
dist/js/select2.full.js
vendored
54
dist/js/select2.full.js
vendored
@ -9706,7 +9706,7 @@ define('select2/results',[
|
||||
|
||||
Results.prototype.render = function () {
|
||||
var $results = $(
|
||||
'<ul class="options" role="tree"></ul>'
|
||||
'<ul class="select2-results__options" role="tree"></ul>'
|
||||
);
|
||||
|
||||
if (this.options.get('multiple')) {
|
||||
@ -9726,7 +9726,9 @@ define('select2/results',[
|
||||
this.clear();
|
||||
this.hideLoading();
|
||||
|
||||
var $message = $('<li role="treeitem" class="option"></li>');
|
||||
var $message = $(
|
||||
'<li role="treeitem" class="select2-results__option"></li>'
|
||||
);
|
||||
|
||||
var message = this.options.get('translations').get(params.message);
|
||||
|
||||
@ -9775,7 +9777,8 @@ define('select2/results',[
|
||||
return s.id.toString();
|
||||
});
|
||||
|
||||
var $options = self.$results.find('.option[aria-selected]');
|
||||
var $options = self.$results
|
||||
.find('.select2-results__option[aria-selected]');
|
||||
|
||||
$options.each(function () {
|
||||
var $option = $(this);
|
||||
@ -9825,7 +9828,7 @@ define('select2/results',[
|
||||
|
||||
Results.prototype.option = function (data) {
|
||||
var option = document.createElement('li');
|
||||
option.className = 'option';
|
||||
option.className = 'select2-results__option';
|
||||
|
||||
var attrs = {
|
||||
'role': 'treeitem',
|
||||
@ -9861,7 +9864,7 @@ define('select2/results',[
|
||||
var $option = $(option);
|
||||
|
||||
var label = document.createElement('strong');
|
||||
label.className = 'group-label';
|
||||
label.className = 'select2-results__group';
|
||||
|
||||
var $label = $(label);
|
||||
this.template(data, label);
|
||||
@ -9876,7 +9879,9 @@ define('select2/results',[
|
||||
$children.push($child);
|
||||
}
|
||||
|
||||
var $childrenContainer = $('<ul class="options nested-options"></ul>');
|
||||
var $childrenContainer = $('<ul></ul>', {
|
||||
'class': 'select2-results__options select2-results__options--nested'
|
||||
});
|
||||
|
||||
$childrenContainer.append($children);
|
||||
|
||||
@ -9952,7 +9957,7 @@ define('select2/results',[
|
||||
});
|
||||
|
||||
container.on('results:select', function () {
|
||||
var $highlighted = self.$results.find('.highlighted');
|
||||
var $highlighted = self.getHighlightedResults();
|
||||
|
||||
if ($highlighted.length === 0) {
|
||||
return;
|
||||
@ -9972,7 +9977,7 @@ define('select2/results',[
|
||||
});
|
||||
|
||||
container.on('results:previous', function () {
|
||||
var $highlighted = self.$results.find('.highlighted');
|
||||
var $highlighted = self.getHighlightedResults();
|
||||
|
||||
var $options = self.$results.find('[aria-selected]');
|
||||
|
||||
@ -10006,7 +10011,7 @@ define('select2/results',[
|
||||
});
|
||||
|
||||
container.on('results:next', function () {
|
||||
var $highlighted = self.$results.find('.highlighted');
|
||||
var $highlighted = self.getHighlightedResults();
|
||||
|
||||
var $options = self.$results.find('[aria-selected]');
|
||||
|
||||
@ -10036,7 +10041,7 @@ define('select2/results',[
|
||||
});
|
||||
|
||||
container.on('results:focus', function (params) {
|
||||
params.element.addClass('highlighted');
|
||||
params.element.addClass('select2-results__option--highlighted');
|
||||
});
|
||||
|
||||
container.on('results:message', function (params) {
|
||||
@ -10047,7 +10052,8 @@ define('select2/results',[
|
||||
self.displayMessage(params);
|
||||
});
|
||||
|
||||
this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
|
||||
this.$results.on('mouseup', '.select2-results__option[aria-selected]',
|
||||
function (evt) {
|
||||
var $this = $(this);
|
||||
|
||||
var data = $this.data('data');
|
||||
@ -10067,10 +10073,12 @@ define('select2/results',[
|
||||
});
|
||||
});
|
||||
|
||||
this.$results.on('mouseenter', '.option[aria-selected]', function (evt) {
|
||||
this.$results.on('mouseenter', '.select2-results__option[aria-selected]',
|
||||
function (evt) {
|
||||
var data = $(this).data('data');
|
||||
|
||||
self.$results.find('.option.highlighted').removeClass('highlighted');
|
||||
self.getHighlightedResults()
|
||||
.removeClass('select2-results__option--highlighted');
|
||||
|
||||
self.trigger('results:focus', {
|
||||
data: data,
|
||||
@ -10079,12 +10087,19 @@ define('select2/results',[
|
||||
});
|
||||
};
|
||||
|
||||
Results.prototype.getHighlightedResults = function () {
|
||||
var $highlighted = this.$results
|
||||
.find('.select2-results__option--highlighted');
|
||||
|
||||
return $highlighted;
|
||||
};
|
||||
|
||||
Results.prototype.destroy = function () {
|
||||
this.$results.remove();
|
||||
};
|
||||
|
||||
Results.prototype.ensureHighlightVisible = function () {
|
||||
var $highlighted = this.$results.find('.highlighted');
|
||||
var $highlighted = this.getHighlightedResults();
|
||||
|
||||
if ($highlighted.length === 0) {
|
||||
return;
|
||||
@ -12033,8 +12048,8 @@ define('select2/dropdown',[
|
||||
|
||||
Dropdown.prototype.render = function () {
|
||||
var $dropdown = $(
|
||||
'<span class="dropdown">' +
|
||||
'<span class="results"></span>' +
|
||||
'<span class="select2-dropdown">' +
|
||||
'<span class="select2-results"></span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
@ -12064,8 +12079,9 @@ define('select2/dropdown/search',[
|
||||
var $rendered = decorated.call(this);
|
||||
|
||||
var $search = $(
|
||||
'<span class="select2-search">' +
|
||||
'<input type="search" tabindex="-1" role="textbox" />' +
|
||||
'<span class="select2-search select2-search--dropdown">' +
|
||||
'<input class="select2-search__field" type="search" tabindex="-1"' +
|
||||
' role="textbox" />' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
@ -12684,7 +12700,7 @@ define('select2/core',[
|
||||
};
|
||||
|
||||
Select2.prototype._placeResults = function ($results) {
|
||||
var $resultsContainer = this.$dropdown.find('.results');
|
||||
var $resultsContainer = this.$dropdown.find('.select2-results');
|
||||
$resultsContainer.append($results);
|
||||
};
|
||||
|
||||
|
||||
4
dist/js/select2.full.min.js
vendored
4
dist/js/select2.full.min.js
vendored
File diff suppressed because one or more lines are too long
54
dist/js/select2.js
vendored
54
dist/js/select2.js
vendored
@ -599,7 +599,7 @@ define('select2/results',[
|
||||
|
||||
Results.prototype.render = function () {
|
||||
var $results = $(
|
||||
'<ul class="options" role="tree"></ul>'
|
||||
'<ul class="select2-results__options" role="tree"></ul>'
|
||||
);
|
||||
|
||||
if (this.options.get('multiple')) {
|
||||
@ -619,7 +619,9 @@ define('select2/results',[
|
||||
this.clear();
|
||||
this.hideLoading();
|
||||
|
||||
var $message = $('<li role="treeitem" class="option"></li>');
|
||||
var $message = $(
|
||||
'<li role="treeitem" class="select2-results__option"></li>'
|
||||
);
|
||||
|
||||
var message = this.options.get('translations').get(params.message);
|
||||
|
||||
@ -668,7 +670,8 @@ define('select2/results',[
|
||||
return s.id.toString();
|
||||
});
|
||||
|
||||
var $options = self.$results.find('.option[aria-selected]');
|
||||
var $options = self.$results
|
||||
.find('.select2-results__option[aria-selected]');
|
||||
|
||||
$options.each(function () {
|
||||
var $option = $(this);
|
||||
@ -718,7 +721,7 @@ define('select2/results',[
|
||||
|
||||
Results.prototype.option = function (data) {
|
||||
var option = document.createElement('li');
|
||||
option.className = 'option';
|
||||
option.className = 'select2-results__option';
|
||||
|
||||
var attrs = {
|
||||
'role': 'treeitem',
|
||||
@ -754,7 +757,7 @@ define('select2/results',[
|
||||
var $option = $(option);
|
||||
|
||||
var label = document.createElement('strong');
|
||||
label.className = 'group-label';
|
||||
label.className = 'select2-results__group';
|
||||
|
||||
var $label = $(label);
|
||||
this.template(data, label);
|
||||
@ -769,7 +772,9 @@ define('select2/results',[
|
||||
$children.push($child);
|
||||
}
|
||||
|
||||
var $childrenContainer = $('<ul class="options nested-options"></ul>');
|
||||
var $childrenContainer = $('<ul></ul>', {
|
||||
'class': 'select2-results__options select2-results__options--nested'
|
||||
});
|
||||
|
||||
$childrenContainer.append($children);
|
||||
|
||||
@ -845,7 +850,7 @@ define('select2/results',[
|
||||
});
|
||||
|
||||
container.on('results:select', function () {
|
||||
var $highlighted = self.$results.find('.highlighted');
|
||||
var $highlighted = self.getHighlightedResults();
|
||||
|
||||
if ($highlighted.length === 0) {
|
||||
return;
|
||||
@ -865,7 +870,7 @@ define('select2/results',[
|
||||
});
|
||||
|
||||
container.on('results:previous', function () {
|
||||
var $highlighted = self.$results.find('.highlighted');
|
||||
var $highlighted = self.getHighlightedResults();
|
||||
|
||||
var $options = self.$results.find('[aria-selected]');
|
||||
|
||||
@ -899,7 +904,7 @@ define('select2/results',[
|
||||
});
|
||||
|
||||
container.on('results:next', function () {
|
||||
var $highlighted = self.$results.find('.highlighted');
|
||||
var $highlighted = self.getHighlightedResults();
|
||||
|
||||
var $options = self.$results.find('[aria-selected]');
|
||||
|
||||
@ -929,7 +934,7 @@ define('select2/results',[
|
||||
});
|
||||
|
||||
container.on('results:focus', function (params) {
|
||||
params.element.addClass('highlighted');
|
||||
params.element.addClass('select2-results__option--highlighted');
|
||||
});
|
||||
|
||||
container.on('results:message', function (params) {
|
||||
@ -940,7 +945,8 @@ define('select2/results',[
|
||||
self.displayMessage(params);
|
||||
});
|
||||
|
||||
this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
|
||||
this.$results.on('mouseup', '.select2-results__option[aria-selected]',
|
||||
function (evt) {
|
||||
var $this = $(this);
|
||||
|
||||
var data = $this.data('data');
|
||||
@ -960,10 +966,12 @@ define('select2/results',[
|
||||
});
|
||||
});
|
||||
|
||||
this.$results.on('mouseenter', '.option[aria-selected]', function (evt) {
|
||||
this.$results.on('mouseenter', '.select2-results__option[aria-selected]',
|
||||
function (evt) {
|
||||
var data = $(this).data('data');
|
||||
|
||||
self.$results.find('.option.highlighted').removeClass('highlighted');
|
||||
self.getHighlightedResults()
|
||||
.removeClass('select2-results__option--highlighted');
|
||||
|
||||
self.trigger('results:focus', {
|
||||
data: data,
|
||||
@ -972,12 +980,19 @@ define('select2/results',[
|
||||
});
|
||||
};
|
||||
|
||||
Results.prototype.getHighlightedResults = function () {
|
||||
var $highlighted = this.$results
|
||||
.find('.select2-results__option--highlighted');
|
||||
|
||||
return $highlighted;
|
||||
};
|
||||
|
||||
Results.prototype.destroy = function () {
|
||||
this.$results.remove();
|
||||
};
|
||||
|
||||
Results.prototype.ensureHighlightVisible = function () {
|
||||
var $highlighted = this.$results.find('.highlighted');
|
||||
var $highlighted = this.getHighlightedResults();
|
||||
|
||||
if ($highlighted.length === 0) {
|
||||
return;
|
||||
@ -2926,8 +2941,8 @@ define('select2/dropdown',[
|
||||
|
||||
Dropdown.prototype.render = function () {
|
||||
var $dropdown = $(
|
||||
'<span class="dropdown">' +
|
||||
'<span class="results"></span>' +
|
||||
'<span class="select2-dropdown">' +
|
||||
'<span class="select2-results"></span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
@ -2957,8 +2972,9 @@ define('select2/dropdown/search',[
|
||||
var $rendered = decorated.call(this);
|
||||
|
||||
var $search = $(
|
||||
'<span class="select2-search">' +
|
||||
'<input type="search" tabindex="-1" role="textbox" />' +
|
||||
'<span class="select2-search select2-search--dropdown">' +
|
||||
'<input class="select2-search__field" type="search" tabindex="-1"' +
|
||||
' role="textbox" />' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
@ -3577,7 +3593,7 @@ define('select2/core',[
|
||||
};
|
||||
|
||||
Select2.prototype._placeResults = function ($results) {
|
||||
var $resultsContainer = this.$dropdown.find('.results');
|
||||
var $resultsContainer = this.$dropdown.find('.select2-results');
|
||||
$resultsContainer.append($results);
|
||||
};
|
||||
|
||||
|
||||
4
dist/js/select2.min.js
vendored
4
dist/js/select2.min.js
vendored
File diff suppressed because one or more lines are too long
2
src/js/select2/core.js
vendored
2
src/js/select2/core.js
vendored
@ -121,7 +121,7 @@ define([
|
||||
};
|
||||
|
||||
Select2.prototype._placeResults = function ($results) {
|
||||
var $resultsContainer = this.$dropdown.find('.results');
|
||||
var $resultsContainer = this.$dropdown.find('.select2-results');
|
||||
$resultsContainer.append($results);
|
||||
};
|
||||
|
||||
|
||||
4
src/js/select2/dropdown.js
vendored
4
src/js/select2/dropdown.js
vendored
@ -9,8 +9,8 @@ define([
|
||||
|
||||
Dropdown.prototype.render = function () {
|
||||
var $dropdown = $(
|
||||
'<span class="dropdown">' +
|
||||
'<span class="results"></span>' +
|
||||
'<span class="select2-dropdown">' +
|
||||
'<span class="select2-results"></span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
|
||||
5
src/js/select2/dropdown/search.js
vendored
5
src/js/select2/dropdown/search.js
vendored
@ -7,8 +7,9 @@ define([
|
||||
var $rendered = decorated.call(this);
|
||||
|
||||
var $search = $(
|
||||
'<span class="select2-search">' +
|
||||
'<input type="search" tabindex="-1" role="textbox" />' +
|
||||
'<span class="select2-search select2-search--dropdown">' +
|
||||
'<input class="select2-search__field" type="search" tabindex="-1"' +
|
||||
' role="textbox" />' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
|
||||
43
src/js/select2/results.js
vendored
43
src/js/select2/results.js
vendored
@ -13,7 +13,7 @@ define([
|
||||
|
||||
Results.prototype.render = function () {
|
||||
var $results = $(
|
||||
'<ul class="options" role="tree"></ul>'
|
||||
'<ul class="select2-results__options" role="tree"></ul>'
|
||||
);
|
||||
|
||||
if (this.options.get('multiple')) {
|
||||
@ -33,7 +33,9 @@ define([
|
||||
this.clear();
|
||||
this.hideLoading();
|
||||
|
||||
var $message = $('<li role="treeitem" class="option"></li>');
|
||||
var $message = $(
|
||||
'<li role="treeitem" class="select2-results__option"></li>'
|
||||
);
|
||||
|
||||
var message = this.options.get('translations').get(params.message);
|
||||
|
||||
@ -82,7 +84,8 @@ define([
|
||||
return s.id.toString();
|
||||
});
|
||||
|
||||
var $options = self.$results.find('.option[aria-selected]');
|
||||
var $options = self.$results
|
||||
.find('.select2-results__option[aria-selected]');
|
||||
|
||||
$options.each(function () {
|
||||
var $option = $(this);
|
||||
@ -132,7 +135,7 @@ define([
|
||||
|
||||
Results.prototype.option = function (data) {
|
||||
var option = document.createElement('li');
|
||||
option.className = 'option';
|
||||
option.className = 'select2-results__option';
|
||||
|
||||
var attrs = {
|
||||
'role': 'treeitem',
|
||||
@ -168,7 +171,7 @@ define([
|
||||
var $option = $(option);
|
||||
|
||||
var label = document.createElement('strong');
|
||||
label.className = 'group-label';
|
||||
label.className = 'select2-results__group';
|
||||
|
||||
var $label = $(label);
|
||||
this.template(data, label);
|
||||
@ -183,7 +186,9 @@ define([
|
||||
$children.push($child);
|
||||
}
|
||||
|
||||
var $childrenContainer = $('<ul class="options nested-options"></ul>');
|
||||
var $childrenContainer = $('<ul></ul>', {
|
||||
'class': 'select2-results__options select2-results__options--nested'
|
||||
});
|
||||
|
||||
$childrenContainer.append($children);
|
||||
|
||||
@ -259,7 +264,7 @@ define([
|
||||
});
|
||||
|
||||
container.on('results:select', function () {
|
||||
var $highlighted = self.$results.find('.highlighted');
|
||||
var $highlighted = self.getHighlightedResults();
|
||||
|
||||
if ($highlighted.length === 0) {
|
||||
return;
|
||||
@ -279,7 +284,7 @@ define([
|
||||
});
|
||||
|
||||
container.on('results:previous', function () {
|
||||
var $highlighted = self.$results.find('.highlighted');
|
||||
var $highlighted = self.getHighlightedResults();
|
||||
|
||||
var $options = self.$results.find('[aria-selected]');
|
||||
|
||||
@ -313,7 +318,7 @@ define([
|
||||
});
|
||||
|
||||
container.on('results:next', function () {
|
||||
var $highlighted = self.$results.find('.highlighted');
|
||||
var $highlighted = self.getHighlightedResults();
|
||||
|
||||
var $options = self.$results.find('[aria-selected]');
|
||||
|
||||
@ -343,7 +348,7 @@ define([
|
||||
});
|
||||
|
||||
container.on('results:focus', function (params) {
|
||||
params.element.addClass('highlighted');
|
||||
params.element.addClass('select2-results__option--highlighted');
|
||||
});
|
||||
|
||||
container.on('results:message', function (params) {
|
||||
@ -354,7 +359,8 @@ define([
|
||||
self.displayMessage(params);
|
||||
});
|
||||
|
||||
this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
|
||||
this.$results.on('mouseup', '.select2-results__option[aria-selected]',
|
||||
function (evt) {
|
||||
var $this = $(this);
|
||||
|
||||
var data = $this.data('data');
|
||||
@ -374,10 +380,12 @@ define([
|
||||
});
|
||||
});
|
||||
|
||||
this.$results.on('mouseenter', '.option[aria-selected]', function (evt) {
|
||||
this.$results.on('mouseenter', '.select2-results__option[aria-selected]',
|
||||
function (evt) {
|
||||
var data = $(this).data('data');
|
||||
|
||||
self.$results.find('.option.highlighted').removeClass('highlighted');
|
||||
self.getHighlightedResults()
|
||||
.removeClass('select2-results__option--highlighted');
|
||||
|
||||
self.trigger('results:focus', {
|
||||
data: data,
|
||||
@ -386,12 +394,19 @@ define([
|
||||
});
|
||||
};
|
||||
|
||||
Results.prototype.getHighlightedResults = function () {
|
||||
var $highlighted = this.$results
|
||||
.find('.select2-results__option--highlighted');
|
||||
|
||||
return $highlighted;
|
||||
};
|
||||
|
||||
Results.prototype.destroy = function () {
|
||||
this.$results.remove();
|
||||
};
|
||||
|
||||
Results.prototype.ensureHighlightVisible = function () {
|
||||
var $highlighted = this.$results.find('.highlighted');
|
||||
var $highlighted = this.getHighlightedResults();
|
||||
|
||||
if ($highlighted.length === 0) {
|
||||
return;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
.select2-container {
|
||||
.dropdown {
|
||||
.select2-dropdown {
|
||||
background-color: white;
|
||||
|
||||
border: 1px solid #aaa;
|
||||
@ -15,16 +14,19 @@
|
||||
width: 100%;
|
||||
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.results {
|
||||
.select2-results {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.options {
|
||||
.select2-results__options {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.option {
|
||||
.select2-results__option {
|
||||
padding: 6px;
|
||||
|
||||
user-select: none;
|
||||
@ -34,18 +36,14 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container--open .dropdown {
|
||||
.select2-container--open .select2-dropdown {
|
||||
border-top: none;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-search--dropdown {
|
||||
display: block;
|
||||
|
||||
@ -46,6 +46,7 @@
|
||||
margin-right: 5px;
|
||||
margin-top: 5px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.select2-selection__choice__remove {
|
||||
color: #999;
|
||||
@ -61,7 +62,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container--open {
|
||||
.select2-selection--single, .select2-selection--multiple {
|
||||
@ -83,23 +83,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
.results {
|
||||
&> .options {
|
||||
.select2-results > .select2-results__options {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.options {
|
||||
.option {
|
||||
.select2-results__option {
|
||||
&[role=group] {
|
||||
padding: 0;
|
||||
|
||||
.group-label {
|
||||
cursor: default;
|
||||
display: block;
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-disabled=true] {
|
||||
@ -109,13 +100,16 @@
|
||||
&[aria-selected=true] {
|
||||
background-color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-selected].highlighted {
|
||||
.select2-results__option--highlighted[aria-selected] {
|
||||
background-color: #5897fb;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-results__group {
|
||||
cursor: default;
|
||||
display: block;
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user