From 3e54fc97e58b3c739f3a2185f51d77ecdb9ae983 Mon Sep 17 00:00:00 2001 From: Kevin Brown Date: Mon, 24 Nov 2014 18:59:19 -0500 Subject: [PATCH] Finish the core switch to BEM This switches all of the dropdown components to use BEM. --- dist/css/select2.css | 66 ++++++++++++++------------- dist/css/select2.min.css | 2 +- dist/js/select2.amd.full.js | 54 ++++++++++++++-------- dist/js/select2.amd.js | 54 ++++++++++++++-------- dist/js/select2.full.js | 54 ++++++++++++++-------- dist/js/select2.full.min.js | 4 +- dist/js/select2.js | 54 ++++++++++++++-------- dist/js/select2.min.js | 4 +- src/js/select2/core.js | 2 +- src/js/select2/dropdown.js | 4 +- src/js/select2/dropdown/search.js | 5 ++- src/js/select2/results.js | 43 ++++++++++++------ src/scss/_dropdown.scss | 64 +++++++++++++------------- src/scss/theme/default/layout.scss | 72 ++++++++++++++---------------- 14 files changed, 279 insertions(+), 203 deletions(-) diff --git a/dist/css/select2.css b/dist/css/select2.css index c04d3d58..f1416b8d 100644 --- a/dist/css/select2.css +++ b/dist/css/select2.css @@ -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 { - display: block; } - .select2-container .dropdown .results .options { - list-style: none; - margin: 0; - padding: 0; } - .select2-container .dropdown .results .options .option { - padding: 6px; - user-select: none; - -webkit-user-select: none; } - .select2-container .dropdown .results .options .option[aria-selected] { - cursor: pointer; } -.select2-container.select2-container--open .dropdown { + +.select2-results { + display: block; } + +.select2-results__options { + list-style: none; + margin: 0; + padding: 0; } + +.select2-results__option { + padding: 6px; + user-select: none; + -webkit-user-select: none; } + .select2-results__option[aria-selected] { + cursor: pointer; } + +.select2-container--open .select2-dropdown { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; @@ -104,14 +108,14 @@ margin-right: 5px; margin-top: 5px; padding: 0 5px; } - .select2-container--default .select2-selection--multiple .select2-selection__choice .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 { - color: #333; } + .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__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; border-bottom-right-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 { - cursor: default; - display: block; - padding: 6px; } -.select2-container--default .dropdown .results .options .option[aria-disabled=true] { +.select2-container--default .select2-results__option[aria-disabled=true] { color: #999; } -.select2-container--default .dropdown .results .options .option[aria-selected=true] { +.select2-container--default .select2-results__option[aria-selected=true] { background-color: #ddd; } -.select2-container--default .dropdown .results .options .option[aria-selected].highlighted { +.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.select2-theme-classic .selection .single-select { background-color: #f6f6f6; diff --git a/dist/css/select2.min.css b/dist/css/select2.min.css index e6ef3309..e83da101 100644 --- a/dist/css/select2.min.css +++ b/dist/css/select2.min.css @@ -1 +1 @@ -.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle;}.select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none;}.select2-selection--single .select2-selection__rendered{display:block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none;}.select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-search--inline{float:left;}.select2-search--inline .select2-search__field{border:none;font-size:100%;margin-top:5px;}.select2-container .dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:100;}.select2-container .dropdown .results{display:block;}.select2-container .dropdown .results .options{list-style:none;margin:0;padding:0;}.select2-container .dropdown .results .options .option{padding:6px;user-select:none;-webkit-user-select:none;}.select2-container .dropdown .results .options .option[aria-selected]{cursor:pointer;}.select2-container.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;border-radius:4px;}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px;}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999;}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;}.select2-container--default .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px;}.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;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.select2-container--open .select2-selection--single,.select2-container--default.select2-container--open .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa;}.select2-container--default .select2-search--inline .select2-search__field{border:none;outline:0;}.select2-container--default .dropdown .results>.options{max-height:200px;overflow-y:auto;}.select2-container--default .dropdown .results .options .option[role=group]{padding:0;}.select2-container--default .dropdown .results .options .option[role=group] .group-label{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;border:1px solid #aaa;border-radius:4px;outline:0;background-image:-webkit-linear-gradient(top, #ffffff 50%, #eee 100%);background-image:-o-linear-gradient(top, #ffffff 50%, #eee 100%);background-image:linear-gradient(to bottom, #ffffff 50%, #eee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eee', GradientType=0);}.select2-container.select2-theme-classic .selection .single-select:focus{border:1px solid #5897fb;}.select2-container.select2-theme-classic .selection .single-select .rendered-selection{color:#444;line-height:28px;}.select2-container.select2-theme-classic .selection .single-select .rendered-selection .placeholder{color:#999;}.select2-container.select2-theme-classic.open .selection .single-select{border:1px solid #5897fb;background-image:-webkit-linear-gradient(top, #eee 50%, #ffffff 100%);background-image:-o-linear-gradient(top, #eee 50%, #ffffff 100%);background-image:linear-gradient(to bottom, #eee 50%, #ffffff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ffffff', GradientType=0);}.select2-container.select2-theme-classic.open .selection .single-select,.select2-container.select2-theme-classic.open .selection .multiple-select{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container.select2-theme-classic .dropdown{background-color:white;border-top:none;}.select2-container.select2-theme-classic .dropdown .select2-search input{border:1px solid #aaa;outline:0;}.select2-container.select2-theme-classic .dropdown .results>.options{max-height:200px;overflow-y:auto;}.select2-container.select2-theme-classic .dropdown .results .options .option[role=group]{padding:0;}.select2-container.select2-theme-classic .dropdown .results .options .option[role=group] .group-label{cursor:default;display:block;padding:6px;}.select2-container.select2-theme-classic .dropdown .results .options .option[aria-disabled=true]{color:grey;}.select2-container.select2-theme-classic .dropdown .results .options .option[aria-selected].highlighted{background-color:#3875d7;color:white;}.select2-container.select2-theme-classic.open .dropdown{border:1px solid #5897fb;border-top:none;} \ No newline at end of file +.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle;}.select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none;}.select2-selection--single .select2-selection__rendered{display:block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none;}.select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-search--inline{float:left;}.select2-search--inline .select2-search__field{border:none;font-size:100%;margin-top:5px;}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:100;}.select2-results{display:block;}.select2-results__options{list-style:none;margin:0;padding:0;}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none;}.select2-results__option[aria-selected]{cursor:pointer;}.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;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;border-radius:4px;}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px;}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999;}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;}.select2-container--default .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px;}.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__remove{color:#999;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px;}.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;border-bottom-right-radius:0;}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa;}.select2-container--default .select2-search--inline .select2-search__field{border:none;outline:0;}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto;}.select2-container--default .select2-results__option[role=group]{padding:0;}.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.select2-theme-classic .selection .single-select{background-color:#f6f6f6;border:1px solid #aaa;border-radius:4px;outline:0;background-image:-webkit-linear-gradient(top, #ffffff 50%, #eee 100%);background-image:-o-linear-gradient(top, #ffffff 50%, #eee 100%);background-image:linear-gradient(to bottom, #ffffff 50%, #eee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eee', GradientType=0);}.select2-container.select2-theme-classic .selection .single-select:focus{border:1px solid #5897fb;}.select2-container.select2-theme-classic .selection .single-select .rendered-selection{color:#444;line-height:28px;}.select2-container.select2-theme-classic .selection .single-select .rendered-selection .placeholder{color:#999;}.select2-container.select2-theme-classic.open .selection .single-select{border:1px solid #5897fb;background-image:-webkit-linear-gradient(top, #eee 50%, #ffffff 100%);background-image:-o-linear-gradient(top, #eee 50%, #ffffff 100%);background-image:linear-gradient(to bottom, #eee 50%, #ffffff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ffffff', GradientType=0);}.select2-container.select2-theme-classic.open .selection .single-select,.select2-container.select2-theme-classic.open .selection .multiple-select{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container.select2-theme-classic .dropdown{background-color:white;border-top:none;}.select2-container.select2-theme-classic .dropdown .select2-search input{border:1px solid #aaa;outline:0;}.select2-container.select2-theme-classic .dropdown .results>.options{max-height:200px;overflow-y:auto;}.select2-container.select2-theme-classic .dropdown .results .options .option[role=group]{padding:0;}.select2-container.select2-theme-classic .dropdown .results .options .option[role=group] .group-label{cursor:default;display:block;padding:6px;}.select2-container.select2-theme-classic .dropdown .results .options .option[aria-disabled=true]{color:grey;}.select2-container.select2-theme-classic .dropdown .results .options .option[aria-selected].highlighted{background-color:#3875d7;color:white;}.select2-container.select2-theme-classic.open .dropdown{border:1px solid #5897fb;border-top:none;} \ No newline at end of file diff --git a/dist/js/select2.amd.full.js b/dist/js/select2.amd.full.js index 6c5d6398..2c48596a 100644 --- a/dist/js/select2.amd.full.js +++ b/dist/js/select2.amd.full.js @@ -171,7 +171,7 @@ define('select2/results',[ Results.prototype.render = function () { var $results = $( - '' + '' ); if (this.options.get('multiple')) { @@ -191,7 +191,9 @@ define('select2/results',[ this.clear(); this.hideLoading(); - var $message = $('
  • '); + var $message = $( + '
  • ' + ); 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 = $(''); + var $childrenContainer = $('', { + '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 = $( - '' + - '' + + '' + + '' + '' ); @@ -2529,8 +2544,9 @@ define('select2/dropdown/search',[ var $rendered = decorated.call(this); var $search = $( - '' + - '' + + '' + + '' + '' ); @@ -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); }; diff --git a/dist/js/select2.amd.js b/dist/js/select2.amd.js index 57a855b8..ddbcf9cc 100644 --- a/dist/js/select2.amd.js +++ b/dist/js/select2.amd.js @@ -171,7 +171,7 @@ define('select2/results',[ Results.prototype.render = function () { var $results = $( - '
      ' + '
        ' ); if (this.options.get('multiple')) { @@ -191,7 +191,9 @@ define('select2/results',[ this.clear(); this.hideLoading(); - var $message = $('
      • '); + var $message = $( + '
      • ' + ); 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 = $('
          '); + var $childrenContainer = $('
            ', { + '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 = $( - '' + - '' + + '' + + '' + '' ); @@ -2529,8 +2544,9 @@ define('select2/dropdown/search',[ var $rendered = decorated.call(this); var $search = $( - '' + - '' + + '' + + '' + '' ); @@ -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); }; diff --git a/dist/js/select2.full.js b/dist/js/select2.full.js index b290e8a9..15b23034 100644 --- a/dist/js/select2.full.js +++ b/dist/js/select2.full.js @@ -9706,7 +9706,7 @@ define('select2/results',[ Results.prototype.render = function () { var $results = $( - '
              ' + '
                ' ); if (this.options.get('multiple')) { @@ -9726,7 +9726,9 @@ define('select2/results',[ this.clear(); this.hideLoading(); - var $message = $('
              • '); + var $message = $( + '
              • ' + ); 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 = $('
                  '); + var $childrenContainer = $('
                    ', { + '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 = $( - '' + - '' + + '' + + '' + '' ); @@ -12064,8 +12079,9 @@ define('select2/dropdown/search',[ var $rendered = decorated.call(this); var $search = $( - '' + - '' + + '' + + '' + '' ); @@ -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); }; diff --git a/dist/js/select2.full.min.js b/dist/js/select2.full.min.js index 796b10bd..5940c88c 100644 --- a/dist/js/select2.full.min.js +++ b/dist/js/select2.full.min.js @@ -1,4 +1,4 @@ window.$=window.$||{},function(){$&&$.fn&&$.fn.select2&&$.fn.select2.amd&&(c=$.fn.select2.amd.define,b=$.fn.select2.amd.require);var a,b,c;!function(d){function e(a,b){return u.call(a,b)}function f(a,b){var c,d,e,f,g,h,i,j,k,l,m,n=b&&b.split("/"),o=s.map,p=o&&o["*"]||{};if(a&&"."===a.charAt(0))if(b){for(n=n.slice(0,n.length-1),a=a.split("/"),g=a.length-1,s.nodeIdCompat&&w.test(a[g])&&(a[g]=a[g].replace(w,"")),a=n.concat(a),k=0;k0&&(a.splice(k-1,2),k-=2)}a=a.join("/")}else 0===a.indexOf("./")&&(a=a.substring(2));if((n||p)&&o){for(c=a.split("/"),k=c.length;k>0;k-=1){if(d=c.slice(0,k).join("/"),n)for(l=n.length;l>0;l-=1)if(e=o[n.slice(0,l).join("/")],e&&(e=e[d])){f=e,h=k;break}if(f)break;!i&&p&&p[d]&&(i=p[d],j=k)}!f&&i&&(f=i,h=j),f&&(c.splice(0,h,f),a=c.join("/"))}return a}function g(a,b){return function(){return n.apply(d,v.call(arguments,0).concat([a,b]))}}function h(a){return function(b){return f(b,a)}}function i(a){return function(b){q[a]=b}}function j(a){if(e(r,a)){var b=r[a];delete r[a],t[a]=!0,m.apply(d,b)}if(!e(q,a)&&!e(t,a))throw new Error("No "+a);return q[a]}function k(a){var b,c=a?a.indexOf("!"):-1;return c>-1&&(b=a.substring(0,c),a=a.substring(c+1,a.length)),[b,a]}function l(a){return function(){return s&&s.config&&s.config[a]||{}}}var m,n,o,p,q={},r={},s={},t={},u=Object.prototype.hasOwnProperty,v=[].slice,w=/\.js$/;o=function(a,b){var c,d=k(a),e=d[0];return a=d[1],e&&(e=f(e,b),c=j(e)),e?a=c&&c.normalize?c.normalize(a,h(b)):f(a,b):(a=f(a,b),d=k(a),e=d[0],a=d[1],e&&(c=j(e))),{f:e?e+"!"+a:a,n:a,pr:e,p:c}},p={require:function(a){return g(a)},exports:function(a){var b=q[a];return"undefined"!=typeof b?b:q[a]={}},module:function(a){return{id:a,uri:"",exports:q[a],config:l(a)}}},m=function(a,b,c,f){var h,k,l,m,n,s,u=[],v=typeof c;if(f=f||a,"undefined"===v||"function"===v){for(b=!b.length&&c.length?["require","exports","module"]:b,n=0;n0&&b-1 in a}function e(a,b,c){if(bb.isFunction(b))return bb.grep(a,function(a,d){return!!b.call(a,d,a)!==c});if(b.nodeType)return bb.grep(a,function(a){return a===b!==c});if("string"==typeof b){if(ib.test(b))return bb.filter(b,a,c);b=bb.filter(b,a)}return bb.grep(a,function(a){return V.call(b,a)>=0!==c})}function f(a,b){for(;(a=a[b])&&1!==a.nodeType;);return a}function g(a){var b=pb[a]={};return bb.each(a.match(ob)||[],function(a,c){b[c]=!0}),b}function h(){_.removeEventListener("DOMContentLoaded",h,!1),a.removeEventListener("load",h,!1),bb.ready()}function i(){Object.defineProperty(this.cache={},0,{get:function(){return{}}}),this.expando=bb.expando+Math.random()}function j(a,b,c){var d;if(void 0===c&&1===a.nodeType)if(d="data-"+b.replace(vb,"-$1").toLowerCase(),c=a.getAttribute(d),"string"==typeof c){try{c="true"===c?!0:"false"===c?!1:"null"===c?null:+c+""===c?+c:ub.test(c)?bb.parseJSON(c):c}catch(e){}tb.set(a,b,c)}else c=void 0;return c}function k(){return!0}function l(){return!1}function m(){try{return _.activeElement}catch(a){}}function n(a,b){return bb.nodeName(a,"table")&&bb.nodeName(11!==b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function o(a){return a.type=(null!==a.getAttribute("type"))+"/"+a.type,a}function p(a){var b=Lb.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function q(a,b){for(var c=0,d=a.length;d>c;c++)sb.set(a[c],"globalEval",!b||sb.get(b[c],"globalEval"))}function r(a,b){var c,d,e,f,g,h,i,j;if(1===b.nodeType){if(sb.hasData(a)&&(f=sb.access(a),g=sb.set(b,f),j=f.events)){delete g.handle,g.events={};for(e in j)for(c=0,d=j[e].length;d>c;c++)bb.event.add(b,e,j[e][c])}tb.hasData(a)&&(h=tb.access(a),i=bb.extend({},h),tb.set(b,i))}}function s(a,b){var c=a.getElementsByTagName?a.getElementsByTagName(b||"*"):a.querySelectorAll?a.querySelectorAll(b||"*"):[];return void 0===b||b&&bb.nodeName(a,b)?bb.merge([a],c):c}function t(a,b){var c=b.nodeName.toLowerCase();"input"===c&&zb.test(a.type)?b.checked=a.checked:("input"===c||"textarea"===c)&&(b.defaultValue=a.defaultValue)}function u(b,c){var d=bb(c.createElement(b)).appendTo(c.body),e=a.getDefaultComputedStyle?a.getDefaultComputedStyle(d[0]).display:bb.css(d[0],"display");return d.detach(),e}function v(a){var b=_,c=Pb[a];return c||(c=u(a,b),"none"!==c&&c||(Ob=(Ob||bb("