Skip to content

Commit ae57cf6

Browse files
kevin-brownkevin-brown
committed
More work on rendering
Switched all of the divs to spans, as the container should not be a block by default.
1 parent 297a06f commit ae57cf6

13 files changed

Lines changed: 385 additions & 96 deletions

File tree

‎dist/css/select2.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,25 @@
1+
.select2-container {
2+
box-sizing: border-box;
3+
display: inline-block;
4+
margin: 0;
5+
position: relative;
6+
vertical-align: middle; }
7+
8+
.select2-container .selection .single-select {
9+
background-color: #eee;
10+
border: 1px solid #aaa;
11+
border-radius: 4px;
12+
box-sizing: border-box;
13+
cursor: pointer;
14+
display: block;
15+
height: 28px; }
16+
.select2-container .selection .single-select .rendered-selection {
17+
color: #444;
18+
display: block;
19+
line-height: 28px;
20+
overflow: hidden;
21+
text-overflow: ellipsis; }
22+
123
.s2-container {
224
margin: 0;
325
position: relative;

‎dist/js/select2.amd.full.js‎

Lines changed: 64 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,10 @@ define('select2/utils',[], function () {
3434
};
3535

3636
Observable.prototype.trigger = function (event) {
37+
var slice = Array.prototype.slice;
38+
3739
if (event in this.listeners) {
38-
this.invoke(this.listeners[event], util.shift(arguments));
40+
this.invoke(this.listeners[event], slice.call(arguments, 1));
3941
}
4042

4143
if ("*" in this.listeners) {
@@ -63,7 +65,7 @@ define('select2/data/select',[
6365

6466
Utils.Extend(SelectAdapter, Utils.Observable);
6567

66-
SelectAdapter.prototype.current = function () {
68+
SelectAdapter.prototype.current = function (callback) {
6769
var data = [];
6870
var self = this;
6971

@@ -75,7 +77,24 @@ define('select2/data/select',[
7577
data.push(option);
7678
});
7779

78-
return data;
80+
callback(data);
81+
};
82+
83+
SelectAdapter.prototype.query = function (params, callback) {
84+
var data = [];
85+
var self = this;
86+
87+
this.$element.find("option").each(function () {
88+
var $option = $(this);
89+
90+
var option = self.item($option);
91+
92+
if (self.matches(params, option)) {
93+
data.push(option);
94+
}
95+
});
96+
97+
callback(data);
7998
};
8099

81100
SelectAdapter.prototype.item = function ($option) {
@@ -87,6 +106,14 @@ define('select2/data/select',[
87106
return data;
88107
};
89108

109+
SelectAdapter.prototype.matches = function (params, data) {
110+
if (data.text.indexOf(params.term) > -1) {
111+
return true;
112+
}
113+
114+
return false;
115+
}
116+
90117
return SelectAdapter;
91118
});
92119

@@ -122,9 +149,9 @@ define('select2/dropdown',[
122149

123150
Dropdown.prototype.render = function () {
124151
var $dropdown = $(
125-
'<div class="select2 select2-dropdown">' +
126-
'<div class="results"></div>' +
127-
'</div>'
152+
'<span class="">' +
153+
'<span class="results"></span>' +
154+
'</span>'
128155
);
129156

130157
return $dropdown;
@@ -139,15 +166,17 @@ define('select2/selection',[
139166
function Selection ($element, options) {
140167
this.$element = $element;
141168
this.options = options;
169+
170+
Selection.__super__.constructor.call(this);
142171
}
143172

144173
Utils.Extend(Selection, Utils.Observable);
145174

146175
Selection.prototype.render = function () {
147176
var $selection = $(
148-
'<div class="single-select">' +
149-
'<div class="rendered-selection"></div>' +
150-
'</div>'
177+
'<span class="single-select">' +
178+
'<span class="rendered-selection"></span>' +
179+
'</span>'
151180
);
152181

153182
this.$selection = $selection;
@@ -158,7 +187,7 @@ define('select2/selection',[
158187
Selection.prototype.bind = function ($container) {
159188
var self = this;
160189

161-
$container.on('click', function (evt) {
190+
this.$selection.on('click', function (evt) {
162191
self.trigger("toggle", {
163192
originalEvent: evt
164193
});
@@ -216,6 +245,8 @@ define('select2/core',[
216245
this.$element = $element;
217246
this.options = new Options(options);
218247

248+
Select2.__super__.constructor.call(this);
249+
219250
// Set up containers and adapters
220251

221252
this.data = new this.options.dataAdapter($element, options);
@@ -224,6 +255,8 @@ define('select2/core',[
224255

225256
$container.insertAfter(this.$element);
226257

258+
$container.width($element.width());
259+
227260
this.selection = new this.options.selectionAdapter($element, options);
228261

229262
var $selectionContainer = $container.find(".selection");
@@ -233,9 +266,10 @@ define('select2/core',[
233266

234267
this.dropdown = new this.options.dropdownAdapter($element, options);
235268

269+
var $dropdownContainer = $container.find(".dropdown");
236270
var $dropdown = this.dropdown.render();
237271

238-
$dropdown.insertAfter($container);
272+
$dropdownContainer.append($dropdown);
239273

240274
this.results = new this.options.resultsAdapter($element, options);
241275

@@ -244,26 +278,37 @@ define('select2/core',[
244278

245279
$resultsContainer.append($results);
246280

247-
// Set the initial state
281+
// Bind events
248282

249-
var initialData = this.data.current();
283+
this.selection.bind($container);
250284

251-
this.selection.update(initialData);
285+
// Set the initial state
252286

253287
var self = this;
254288

289+
this.data.current(function (initialData) {
290+
self.selection.update(initialData);
291+
});
292+
255293
this.$element.on("change", function () {
256-
self.selection.update(self.data.current());
257-
})
294+
self.data.current(function (data) {
295+
self.selection.update(data);
296+
});
297+
});
298+
299+
this.selection.on("toggle", function () {
300+
$container.toggleClass("open");
301+
});
258302
};
259303

260304
Utils.Extend(Select2, Utils.Observable);
261305

262306
Select2.prototype.render = function () {
263307
var $container = $(
264-
'<div class="select2 select2-container">' +
265-
'<div class="selection"></div>' +
266-
'</div>'
308+
'<span class="select2 select2-container">' +
309+
'<span class="selection"></span>' +
310+
'<span class="dropdown"></span>' +
311+
'</span>'
267312
);
268313

269314
return $container;

‎dist/js/select2.amd.js‎

Lines changed: 64 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,10 @@ define('select2/utils',[], function () {
3434
};
3535

3636
Observable.prototype.trigger = function (event) {
37+
var slice = Array.prototype.slice;
38+
3739
if (event in this.listeners) {
38-
this.invoke(this.listeners[event], util.shift(arguments));
40+
this.invoke(this.listeners[event], slice.call(arguments, 1));
3941
}
4042

4143
if ("*" in this.listeners) {
@@ -63,7 +65,7 @@ define('select2/data/select',[
6365

6466
Utils.Extend(SelectAdapter, Utils.Observable);
6567

66-
SelectAdapter.prototype.current = function () {
68+
SelectAdapter.prototype.current = function (callback) {
6769
var data = [];
6870
var self = this;
6971

@@ -75,7 +77,24 @@ define('select2/data/select',[
7577
data.push(option);
7678
});
7779

78-
return data;
80+
callback(data);
81+
};
82+
83+
SelectAdapter.prototype.query = function (params, callback) {
84+
var data = [];
85+
var self = this;
86+
87+
this.$element.find("option").each(function () {
88+
var $option = $(this);
89+
90+
var option = self.item($option);
91+
92+
if (self.matches(params, option)) {
93+
data.push(option);
94+
}
95+
});
96+
97+
callback(data);
7998
};
8099

81100
SelectAdapter.prototype.item = function ($option) {
@@ -87,6 +106,14 @@ define('select2/data/select',[
87106
return data;
88107
};
89108

109+
SelectAdapter.prototype.matches = function (params, data) {
110+
if (data.text.indexOf(params.term) > -1) {
111+
return true;
112+
}
113+
114+
return false;
115+
}
116+
90117
return SelectAdapter;
91118
});
92119

@@ -122,9 +149,9 @@ define('select2/dropdown',[
122149

123150
Dropdown.prototype.render = function () {
124151
var $dropdown = $(
125-
'<div class="select2 select2-dropdown">' +
126-
'<div class="results"></div>' +
127-
'</div>'
152+
'<span class="">' +
153+
'<span class="results"></span>' +
154+
'</span>'
128155
);
129156

130157
return $dropdown;
@@ -139,15 +166,17 @@ define('select2/selection',[
139166
function Selection ($element, options) {
140167
this.$element = $element;
141168
this.options = options;
169+
170+
Selection.__super__.constructor.call(this);
142171
}
143172

144173
Utils.Extend(Selection, Utils.Observable);
145174

146175
Selection.prototype.render = function () {
147176
var $selection = $(
148-
'<div class="single-select">' +
149-
'<div class="rendered-selection"></div>' +
150-
'</div>'
177+
'<span class="single-select">' +
178+
'<span class="rendered-selection"></span>' +
179+
'</span>'
151180
);
152181

153182
this.$selection = $selection;
@@ -158,7 +187,7 @@ define('select2/selection',[
158187
Selection.prototype.bind = function ($container) {
159188
var self = this;
160189

161-
$container.on('click', function (evt) {
190+
this.$selection.on('click', function (evt) {
162191
self.trigger("toggle", {
163192
originalEvent: evt
164193
});
@@ -216,6 +245,8 @@ define('select2/core',[
216245
this.$element = $element;
217246
this.options = new Options(options);
218247

248+
Select2.__super__.constructor.call(this);
249+
219250
// Set up containers and adapters
220251

221252
this.data = new this.options.dataAdapter($element, options);
@@ -224,6 +255,8 @@ define('select2/core',[
224255

225256
$container.insertAfter(this.$element);
226257

258+
$container.width($element.width());
259+
227260
this.selection = new this.options.selectionAdapter($element, options);
228261

229262
var $selectionContainer = $container.find(".selection");
@@ -233,9 +266,10 @@ define('select2/core',[
233266

234267
this.dropdown = new this.options.dropdownAdapter($element, options);
235268

269+
var $dropdownContainer = $container.find(".dropdown");
236270
var $dropdown = this.dropdown.render();
237271

238-
$dropdown.insertAfter($container);
272+
$dropdownContainer.append($dropdown);
239273

240274
this.results = new this.options.resultsAdapter($element, options);
241275

@@ -244,26 +278,37 @@ define('select2/core',[
244278

245279
$resultsContainer.append($results);
246280

247-
// Set the initial state
281+
// Bind events
248282

249-
var initialData = this.data.current();
283+
this.selection.bind($container);
250284

251-
this.selection.update(initialData);
285+
// Set the initial state
252286

253287
var self = this;
254288

289+
this.data.current(function (initialData) {
290+
self.selection.update(initialData);
291+
});
292+
255293
this.$element.on("change", function () {
256-
self.selection.update(self.data.current());
257-
})
294+
self.data.current(function (data) {
295+
self.selection.update(data);
296+
});
297+
});
298+
299+
this.selection.on("toggle", function () {
300+
$container.toggleClass("open");
301+
});
258302
};
259303

260304
Utils.Extend(Select2, Utils.Observable);
261305

262306
Select2.prototype.render = function () {
263307
var $container = $(
264-
'<div class="select2 select2-container">' +
265-
'<div class="selection"></div>' +
266-
'</div>'
308+
'<span class="select2 select2-container">' +
309+
'<span class="selection"></span>' +
310+
'<span class="dropdown"></span>' +
311+
'</span>'
267312
);
268313

269314
return $container;

0 commit comments

Comments
 (0)